/* Suyga Poker — tanitim sayfasi
   Palet oyunun kendisinden ornekle alindi: ayni kirmizi, ayni altin, ayni kece
   yesili. Site ve oyun arasinda gorsel kopukluk olmasin diye. */
:root{
  --kadife:#240609;      /* zemin: kadife siyah-kirmizi */
  --bordo:#3E0A11;       /* panel */
  --bordo-acik:#57121B;  /* kenar */
  --kirmizi:#D32330;     /* Suyga kirmizisi (logodan) */
  --altin:#EAD08A;       /* oyunun altin metin rengi */
  --altin-koyu:#B99A4A;
  --zumrut:#0E6B44;      /* masa kecesi */
  --krem:#F3E7DA;
  --krem-sonuk:#C7B3A6;
  --olcek:clamp(1rem,.6rem + 1.2vw,1.35rem);
}
@font-face{font-family:'Oswald';src:url('/assets/fonts/oswald-400.ttf?v=b4e9240e53') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Oswald';src:url('/assets/fonts/oswald-700.ttf?v=b4e9240e53') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Mont';src:url('/assets/fonts/montserrat-400.ttf?v=b4e9240e53') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Mont';src:url('/assets/fonts/montserrat-600.ttf?v=b4e9240e53') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Mont';src:url('/assets/fonts/montserrat-700.ttf?v=b4e9240e53') format('truetype');font-weight:700;font-display:swap}
/* Arapca: Oswald ve Montserrat'ta tek Arap harfi yok. Cairo olmazsa tarayici
   sistem yazitipine duser ve /ar/ sayfasi baska bir siteye benzer. */
@font-face{font-family:'Cairo';src:url('/assets/fonts/cairo-400.ttf?v=b4e9240e53') format('truetype');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Cairo';src:url('/assets/fonts/cairo-700.ttf?v=b4e9240e53') format('truetype');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--kadife);color:var(--krem);
  font-family:'Mont',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--olcek);line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.gorsel{font-family:'Oswald','Mont',sans-serif;font-weight:700;line-height:.92;
  letter-spacing:.005em;margin:0;text-transform:uppercase}
a{color:inherit}
img,video{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--altin);outline-offset:3px;border-radius:2px}
.kap{width:min(1180px,92vw);margin-inline:auto}

/* --- ust cubuk --- */
.ust{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;
  display:flex;align-items:center;gap:1rem;padding:.7rem clamp(1rem,4vw,2.5rem);
  background:linear-gradient(180deg,rgba(20,4,7,.94),rgba(20,4,7,.66) 70%,transparent);
  backdrop-filter:blur(6px)}
.marka{display:flex;align-items:center;gap:.55rem;text-decoration:none;margin-inline-end:auto}
.marka img{height:30px;width:auto}
.marka b{font-family:'Oswald',sans-serif;font-size:1.15rem;letter-spacing:.04em;color:var(--krem);
  white-space:nowrap}  /* dar ekranda "suyga / poker" diye kirilmasin */
.marka b i{color:var(--kirmizi);font-style:normal}
.ust .dil{display:flex;gap:.1rem;background:rgba(0,0,0,.35);border:1px solid rgba(234,208,138,.22);
  border-radius:999px;padding:.2rem}
.ust .dil a{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--krem-sonuk);padding:.3rem .55rem;border-radius:999px;transition:.18s}
.ust .dil a:hover{color:var(--krem)}
.ust .dil a[aria-current]{background:var(--kirmizi);color:#fff}
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  text-decoration:none;border:0;cursor:pointer;transition:transform .16s,box-shadow .16s,filter .16s}
.dugme-1{background:linear-gradient(180deg,#F0DA9C,#C9A952);color:#2A0A05;
  padding:.85rem 1.9rem;font-size:1.15rem;border-radius:6px;
  box-shadow:0 6px 0 #8A6E2C,0 14px 30px rgba(0,0,0,.5)}
.dugme-1:hover{transform:translateY(-2px);box-shadow:0 8px 0 #8A6E2C,0 18px 36px rgba(0,0,0,.55)}
.dugme-1:active{transform:translateY(3px);box-shadow:0 3px 0 #8A6E2C,0 8px 18px rgba(0,0,0,.5)}
.dugme-2{border:1px solid rgba(234,208,138,.45);color:var(--altin);padding:.5rem 1.1rem;
  font-size:.85rem;border-radius:5px}
.dugme-2:hover{background:rgba(234,208,138,.1)}
@media (max-width:640px){.ust .dugme-2{display:none}}

/* --- kahraman --- */
.kahraman{position:relative;min-height:100svh;display:grid;place-items:center;
  text-align:center;padding:7rem 1rem 4rem;overflow:hidden}
.kahraman video,.kahraman .poster{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
.kahraman::after{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% 35%,rgba(36,6,9,.35),rgba(36,6,9,.86) 62%,var(--kadife) 96%)}
.kahraman .ic{position:relative;z-index:2;max-width:56ch}
.kicker{font-family:'Oswald',sans-serif;font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--altin);margin:0 0 1.1rem;opacity:.9}
.kahraman h1{font-size:clamp(3.4rem,15vw,9.5rem);margin:0}
.kahraman h1 span{display:block}
.kahraman h1 .cizgili{
  /* Ikinci satir ici bos, yalniz altin konturlu. Sinif adi bilerek "alt"
     DEGIL: sayfa altindaki .alt kurali (font-size:.85rem) bu basligi eziyor
     ve dev baslik minicik cikiyordu. */
  font-size:inherit;color:transparent;
  -webkit-text-stroke:2px var(--altin);text-stroke:2px var(--altin)}
.kahraman p{font-size:clamp(1rem,.85rem + .5vw,1.28rem);color:var(--krem);margin:1.4rem auto 2rem;
  max-width:44ch;text-wrap:balance}
.kahraman .not{display:block;font-size:.8rem;color:var(--krem-sonuk);margin-top:1.4rem;letter-spacing:.02em}

/* --- imza: masa sozlugu seridi --- */
.serit{border-block:1px solid rgba(234,208,138,.18);background:#1B0407;
  padding:1.6rem 0;overflow:hidden;position:relative}
.serit .etiket{position:absolute;inset-block-start:.5rem;inset-inline-start:50%;transform:translateX(-50%);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--krem-sonuk);z-index:2}
.akis{display:flex;gap:2.5rem;width:max-content;animation:kay 26s linear infinite;padding-block-start:1.1rem}
.akis span{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(2rem,6vw,4rem);
  color:transparent;-webkit-text-stroke:1.4px rgba(234,208,138,.5);text-stroke:1.4px rgba(234,208,138,.5);
  letter-spacing:.02em;white-space:nowrap}
.akis span.dolu{color:var(--altin);-webkit-text-stroke:0;text-stroke:0}
@keyframes kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.akis{animation:none;justify-content:center;flex-wrap:wrap;width:auto}}

/* --- bolumler --- */
.bolum{padding:clamp(4rem,9vw,7.5rem) 0}
.bolum-basi{max-width:46ch;margin-block-end:3rem}
.bolum-basi h2{font-size:clamp(2.1rem,5.5vw,3.6rem);color:var(--krem)}
.bolum-basi p{color:var(--krem-sonuk);margin:.9rem 0 0}

.ozellikler{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.kart{background:linear-gradient(180deg,var(--bordo),#2C060C);
  border:1px solid var(--bordo-acik);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.kart:hover{transform:translateY(-4px);border-color:rgba(234,208,138,.4)}
.kart figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#1B0407}
.kart figure img{width:100%;height:100%;object-fit:cover}
.kart .govde{padding:1.3rem 1.4rem 1.6rem}
.kart h3{font-size:1.35rem;color:var(--altin);margin-block-end:.5rem}
.kart p{margin:0;font-size:.94rem;color:var(--krem-sonuk);line-height:1.6}

/* --- el siralamasi: gercek bir sirali dizi, o yuzden numarali --- */
.merdiven{display:grid;gap:.4rem;counter-reset:el}
.el{display:flex;align-items:center;gap:1rem;padding:.7rem 1.1rem;border-radius:8px;
  background:linear-gradient(90deg,var(--bordo) 0%,#2A060B 100%);
  border:1px solid rgba(87,18,27,.9);position:relative;overflow:hidden}
.el::before{counter-increment:el;content:counter(el);
  font-family:'Oswald',sans-serif;font-weight:700;font-size:.9rem;
  min-width:2ch;text-align:center;color:var(--krem-sonuk)}
.el .cizgi{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.el .cizgi i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--kirmizi),var(--altin))}
.el b{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.03em;
  color:var(--krem);white-space:nowrap}
.el:last-child{border-color:rgba(234,208,138,.55)}
.el:last-child b{color:var(--altin)}

/* --- adimlar: gercekten sirali bir surec --- */
.adimlar{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:ad}
.adim{padding-block-start:1.4rem;border-block-start:2px solid var(--bordo-acik);position:relative}
.adim::before{counter-increment:ad;content:counter(ad,decimal-leading-zero);
  position:absolute;inset-block-start:-1.1rem;inset-inline-start:0;
  font-family:'Oswald',sans-serif;font-size:1.5rem;color:var(--kirmizi);
  background:var(--kadife);padding-inline-end:.6rem}
.adim h3{font-size:1.2rem;color:var(--altin);margin-block-end:.4rem}
.adim p{margin:0;font-size:.92rem;color:var(--krem-sonuk)}

/* --- sss --- */
.sorular{display:grid;gap:.5rem;max-width:78ch}
.sor{background:linear-gradient(180deg,var(--bordo),#2A060B);border:1px solid rgba(87,18,27,.9);
  border-radius:10px;padding:0 1.2rem}
.sor summary{cursor:pointer;list-style:none;padding:1rem 0;font-weight:600;color:var(--krem);
  display:flex;align-items:center;gap:.9rem}
.sor summary::-webkit-details-marker{display:none}
/* Isaret metin degil sekil: dil ne olursa olsun ayni okunur, ceviri gerektirmez. */
.sor summary::before{content:'';flex:none;width:.5rem;height:.5rem;border-inline-end:2px solid var(--altin);
  border-block-end:2px solid var(--altin);transform:rotate(-45deg);transition:transform .2s}
.sor[open] summary::before{transform:rotate(45deg)}
.sor[open]{border-color:rgba(234,208,138,.4)}
.sor p{margin:0 0 1.1rem;padding-inline-start:1.4rem;color:var(--krem-sonuk);font-size:.94rem;line-height:1.65}

/* --- kapanis --- */
.kapanis{text-align:center;padding:clamp(4.5rem,10vw,8rem) 0;
  background:radial-gradient(80% 120% at 50% 0%,#4A0B14,var(--kadife) 70%);
  border-block-start:1px solid var(--bordo-acik)}
.kapanis h2{font-size:clamp(2.4rem,7vw,4.6rem)}
.kapanis p{color:var(--krem-sonuk);margin:.8rem auto 2.2rem;max-width:38ch}

/* --- alt --- */
.alt{border-block-start:1px solid var(--bordo-acik);padding:2.6rem 0 3.2rem;font-size:.85rem}
.alt h4{font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--altin);margin:0 0 .7rem}
.alt .yasal{color:var(--krem-sonuk);max-width:72ch;line-height:1.7;margin:0 0 2rem;font-size:.82rem}
.alt .satir{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;justify-content:space-between}
.alt .diller{display:flex;flex-wrap:wrap;gap:.3rem}
.alt .diller a{text-decoration:none;color:var(--krem-sonuk);padding:.25rem .6rem;border-radius:5px;
  border:1px solid transparent;font-size:.8rem}
.alt .diller a:hover{border-color:var(--bordo-acik);color:var(--krem)}
.alt .diller a[aria-current]{color:var(--altin);border-color:rgba(234,208,138,.4)}
.alt small{color:#8A7268}

/* --- arapca --- ------------------------------------------------------------
   Yerlesim yonu HTML'deki dir="rtl" ile hallediliyor (kurallarda margin/padding
   yerine inline-start/end kullaniyoruz). Burada duzeltilen sey TIPOGRAFI:

   1) line-height:.92 latin buyuk harfler icin sikiydi; Arapcada ust nokta ve
      alt kuyruklar bir onceki satira giriyor. Basliklarda 1.25'e aciliyor.
   2) letter-spacing Arapcada harf baglantilarini koparir; sifirlaniyor.
   3) text-transform:uppercase Arapcada karsiliksiz, ama satir icindeki latin
      "SUYGA" icin duruyor -- yalniz kucuk etiketlerde kapatiliyor. */
html[lang="ar"] *{font-family:'Cairo','Mont',system-ui,sans-serif;letter-spacing:normal}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .gorsel{line-height:1.25}
html[lang="ar"] .kahraman h1{font-size:clamp(2.8rem,11vw,7.2rem)}
html[lang="ar"] .kahraman h1 .cizgili{-webkit-text-stroke-width:1.5px;text-stroke-width:1.5px}
html[lang="ar"] .akis span{-webkit-text-stroke-width:1px;text-stroke-width:1px;line-height:1.35}
html[lang="ar"] .kicker,html[lang="ar"] .alt h4,html[lang="ar"] .serit .etiket{text-transform:none;font-size:.9rem}
/* Sirali listelerde sayilar RTL akista ters okunmasin: kendi yonlerini korurlar. */
html[lang="ar"] .el::before,html[lang="ar"] .adim::before{direction:ltr;unicode-bidi:isolate}
/* Guc cubugu soldan degil sagdan dolar. */
html[lang="ar"] .el .cizgi i{background:linear-gradient(270deg,var(--kirmizi),var(--altin))}