:root{
  /* Beyaza yakın ama soğuk olmayan kâğıt: retro palete zemin olsun, siteyi de sarıya boğmasın.
     Krem modüller bunun bir tık altında (daha sıcak) durur ki kart oldukları anlaşılsın. */
  /* Sayfa zemini 1 Ekim'de beyaza doğru çekildi: #F7F3E9 → #FBF8F3, yani
     beyaza olan mesafenin %45'i kapandı. Tam beyaz değil, sıcaklık duruyor.
     --paper-2 ve --line BİLEREK DEĞİŞMEDİ: zemin açıldıkça onlarla arasındaki
     fark büyüyor, yani kart kenarları ve çip zeminleri eskisinden daha iyi
     ayrışıyor. Beyaz kart (--surface) zeminle 1,11'den 1,05'e düşüyor ama
     kartları zaten renk değil kenarlık ve gölge ayırıyor.
     Marka kremi (--brand-cream #F7EBD4) ayrı bir şey, dokunulmadı. */
  --paper:#FBF8F3;
  --paper-2:#EDE5D5;
  --surface:#FFFFFF;
  --ink:#17213B;
  --ink-2:#4C566B;
  --ink-3:#5D677B;   /* eski #8A93A6 kremde 2,46'ya düşüyordu; ton aynı, koyu */
  --line:#E2DACB;

  --cat:#2E8055; --cat-hl:#FFD166; --cat-hl-txt:#FFD166; --cat-on:#FFFFFF; --hl-on:#17213B; --cat-ink:#26694A;
  --cat-dim:rgba(255,255,255,.35);

  --shadow-s:0 2px 6px rgba(21,20,26,.07);
  --shadow-m:0 10px 26px rgba(21,20,26,.13);
  --shadow-l:0 22px 50px rgba(21,20,26,.20);
  --r:24px; --r-sm:16px; --r-xs:10px;
  /* Dolgun, yumuşak hatlı poster yazısı; Fredoka yedek. */
  --disp:"Anton","Arial Narrow","Arial Black",Impact,sans-serif; --disp-w:400;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --nav:"Barlow Condensed","Barlow",Arial Narrow,sans-serif;
  /* Marka imzası: logodan gelir, kategoriden bağımsızdır.
     Kural — kategori renkleri içeriğe, mor+lime siteye aittir. */
  --brand:#6C2BD9; --brand-hl:#C9F24B; --brand-cream:#F7EBD4;
  --paper-brand:#3B1580;   /* footer zemini: derin marka moru */
}
/* Site bilerek tek temalı: kimliği sıcak baskı kâğıdı, kategori renkleri de bu zemine göre
   ölçüldü. Telefonu koyu moddayken sayfayı ters çevirmek, krem kartların üstündeki yazıyı
   açık renge döndürüp okunmaz hâle getiriyordu. color-scheme bunu tarayıcıya da bildirir. */
:root{color-scheme:light}

*{box-sizing:border-box}
[hidden]{display:none!important}
::selection{background:var(--brand);color:var(--brand-cream)}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.poster,h1,h2,h3{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  line-height:.94;letter-spacing:.005em;margin:0;text-wrap:balance}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.hand{font-family:"Caveat","Comic Sans MS",cursive;font-weight:700}
button{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand-hl);outline-offset:3px;border-radius:8px;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 28%,transparent)}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}

/* ---------- topbar ---------- */
/* Aşağı kaydırırken şerit çekiliyor, yukarı kaydırınca geri geliyor. Telefonda
   62 piksel sabit başlık, okunan alanın onda biri. Sticky olduğu için yerini
   koruyor — kazanç görsel alanda, akışta değil.
   TRANSFORM DEĞİL, top. transform şeridi kendi katmanına alıyor ve iOS o
   katmanı düşük çözünürlükte tarayıp geri bırakıyordu: geri gelen başlık
   bulanık görünüyordu (Cansu). top animasyonu katman açmıyor.
   GEÇİŞ DE YOK. Animasyon varken iOS'un kendi araç çubuğu açılıp kapanırken
   üretilen sarsıntılı scroll olayları geçişi ortasından kesiyor ve şerit
   yarı yolda takılı kalıyordu. Anında yer değiştiriyor: ya oradadır ya değil. */
.topbar{background:var(--paper);position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--line)}
@media (max-width:820px){ body.basligizli .topbar{top:-64px} }
.topbar .wrap{display:flex;align-items:center;gap:14px;height:62px}
.logo{display:flex;align-items:center;gap:0;cursor:pointer;background:none;border:none;padding:0;flex:none}
.logo img{height:44px;width:auto;display:block;transition:transform .16s}
.logo:hover img{transform:rotate(-3deg) scale(1.04)}
@media (max-width:520px){.logo img{height:42px}}
.catbar{background:var(--paper);padding:0}
.kirintibar{background:var(--paper)}
.kirinti{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;min-width:0;
  padding:9px 0 2px;font-family:var(--nav);font-size:12.5px;color:var(--ink-3)}
.kirinti a{color:var(--ink-3);text-decoration:none;white-space:nowrap;cursor:pointer;
  background:none;border:0;padding:0;font:inherit}
.kirinti a:hover{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.kirinti i{font-style:normal;opacity:.5;flex:none}
/* Son halka sayfanın kendisi: bağlantı değil, koyu ve gerekirse kısalan tek öğe. */
.kirinti .simdi{color:var(--ink-2);font-weight:600;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.kirinti .adim{display:inline-flex;align-items:center;gap:7px;min-width:0}
.kirinti .adim.son{min-width:0;overflow:hidden}
@media (max-width:700px){
  .kirinti{font-size:11.5px;gap:5px;padding:7px 0 2px}
  .kirinti .adim{gap:5px}
  /* Telefonda dört halka yan yana sığmıyor ve hepsi birden kısalıyordu
     ("Ana …  › Efsane …  › S… › Futbol…"). Yalnızca son iki halka duruyor:
     bir üst seviye (geri dönüş) ve bulunduğun sayfa. Yapılandırılmış veri
     zincirin tamamını taşımaya devam ediyor. */
  .kirinti .adim:nth-last-child(n+3){display:none}
}
@media (max-width:700px){body.oyunda .catbar{display:none}}
.catrow{display:flex;gap:9px;padding:12px 4px 16px}
@media (max-width:1120px){
  /* Şerit zaten kayıyordu ama kaydığı anlaşılmıyordu: kenarlara taşırıp
     sağdaki çipi yarım bırakıyoruz, üstüne bir de solma maskesi. */
  .catrow{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;
    padding:16px 22px 20px;margin-inline:-22px;
    scroll-snap-type:x proximity;scroll-padding-left:22px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent 100%)}
  .catrow .cchip{scroll-snap-align:start}
}
@media (max-width:1120px){.catrow::-webkit-scrollbar{height:6px}}
.catrow::-webkit-scrollbar-thumb{background:var(--brand);border-radius:999px;opacity:.6}
/* 1. seviye: içerik türü. Kategori şeridi bunun altında filtre katmanı olarak kalır. */
/* logo yanı: ince ayraç + iki satırlık tanım */
.brandsep{width:1px;height:34px;background:var(--line);flex:none;margin-left:2px}
.tagline{font-family:var(--body);font-size:12px;line-height:1.25;color:var(--ink-3);
  letter-spacing:.01em;white-space:nowrap;flex:none}

/* 1. seviye: içerik türü. İki bağlantı da aynı renk ve aynı hover'da. */
.typenav{display:flex;align-items:center;gap:14px}
.tnav{background:none;border:0;padding:4px 0;cursor:pointer;font-family:var(--nav);font-weight:600;
  font-size:16px;letter-spacing:.03em;text-transform:uppercase;color:var(--brand);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .14s,border-color .14s}
.tnav:hover{color:#5620AE}
.tnav[aria-current="true"]{border-bottom-color:currentColor}
.tsep{width:1px;height:16px;background:var(--line)}

/* hamburger */
.menubtn{display:none;background:none;border:0;cursor:pointer;padding:9px;border-radius:12px;
  color:var(--ink);margin-left:auto}
.menubtn:hover{background:var(--paper-2)}
.menubtn .bars{display:block;width:22px}
.menubtn .bars i{display:block;height:2.5px;border-radius:2px;background:currentColor;margin:4px 0;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .16s}
.menubtn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menubtn[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.menubtn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobmenu{display:none;background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 14px 26px rgba(21,20,26,.12)}
.mobmenu[hidden]{display:none!important}
.mobmenu .wrap{display:flex;flex-direction:column;align-items:stretch;height:auto;gap:8px;
  padding-top:14px;padding-bottom:16px}
.msearch{display:flex;align-items:center;gap:9px;background:var(--surface);border:2px solid var(--line);
  border-radius:999px;padding:9px 16px;transition:border-color .14s,box-shadow .14s}
.msearch:focus-within{border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.msearch input[type="text"]{border:0;border-radius:0;background:none;outline:none;box-shadow:none;
  font-family:inherit;font-size:15.5px;color:var(--ink);width:100%;padding:2px 0}
.msearch input[type="text"]:focus,.msearch input[type="text"]:focus-visible{border:0;outline:none;box-shadow:none}
.mitem{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  font-family:var(--nav);font-weight:600;font-size:17px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--brand);padding:12px 4px;text-align:left;border-radius:10px}
.mitem:hover,.mitem:active{color:#5620AE;background:var(--paper-2)}
.mitem[aria-current="true"]{background:var(--paper-2)}
.mitem.rand{background:var(--brand-hl);color:var(--ink);justify-content:center;
  border-radius:999px;padding:13px 18px;margin-top:4px}
.mitem.rand:hover{background:#bde63c}

/* Giriş butonu eklenince bar 1080px altında taşıyordu. Bu aralıkta slogan
   düşüyor — dekoratif olan tek öğe o; navigasyon ve butonlar kalıyor. */
@media (max-width:1080px) and (min-width:901px){
  .tagline,.brandsep{display:none}
  .topbar .wrap{gap:10px}
  .randbtn,.loginbtn{padding:9px 15px;font-size:14px;gap:7px}
}
@media (max-width:900px){
  .tagline{font-size:10.5px;line-height:1.22}
  .brandsep{height:28px}
  .typenav,.topbar .iconbtn,.topbar .randbtn,.topbar .loginbtn{display:none}
  .menubtn{display:block}
  .mobmenu{display:block}
}
@media (max-width:400px){
  .tagline{font-size:9.5px;letter-spacing:0}
  .brandsep{height:24px;margin-left:0}
}
/* Giriş en sağda: hesap işlerinin alışılmış yeri. Çerçeveli ve sakin, çünkü
   ana çağrı hâlâ "Rastgele Başla" — önce oyna, sonra kaydol. */
.mitem.mgiris{color:var(--ink);border:2px solid var(--ink);border-radius:999px;
  justify-content:center;padding:12px 18px}
.mitem.mgiris:hover{background:var(--paper-2)}
.iconbtn{background:none;border:none;cursor:pointer;color:var(--ink-2);padding:8px;border-radius:50%;display:grid;place-items:center}
.iconbtn:hover{color:var(--ink);background:var(--paper-2)}
/* İki header butonu tek kalıptan çıkıyor: aynı punto, aynı yazı ailesi, aynı
   iç boşluk, aynı 2px kenarlık payı. Fark yalnızca renkte — biri dolu, öbürü
   çerçeveli. Böylece "Rastgele Başla" önde kalıyor ama ikisi aynı sistemden. */
.randbtn,.loginbtn{border-radius:999px;padding:10px 20px;cursor:pointer;border:2px solid transparent;
  font-family:var(--disp);font-weight:var(--disp-w);font-size:15px;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.3;display:flex;align-items:center;gap:9px;white-space:nowrap;
  transition:transform .14s,box-shadow .14s,border-color .14s,color .14s,background .14s}
.randbtn{background:var(--brand-hl);color:#17213B;border-color:var(--brand-hl);box-shadow:var(--shadow-s)}
/* Kenarlık sitenin kendi buton kuralıyla aynı: 2px var(--ink). --line ile
   çizince buton krem zeminde kayboluyor, yanındaki dolu butonla arasındaki
   fark "iki kademe" değil "var/yok" oluyordu. */
.loginbtn{background:transparent;color:var(--ink);border-color:var(--ink)}
.loginbtn:hover{background:var(--paper-2);box-shadow:var(--shadow-s)}
.loginbtn svg{flex:none}
.loginbtn.uye{border-color:var(--brand);color:var(--brand)}
.randbtn:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}

/* ---------- hero ---------- */
/* Alt pay üstle eşit: kutu komşu modül tarafından uzatıldığı için içerik dikeyde
   ortalanıyor, asimetrik padding o ortalamayı bozuyordu. */
/* container-type: yazı boyu artık ekranın değil KUTUNUN genişliğine bağlı.
   Gerekliydi: 1040px'de banner tek sütuna geçip 980px oluyor, 1041px'de iki
   sütuna dönüp 627px'e düşüyor — vw ile bu sıçrama hesaplanamıyor, başlık
   tam orada üçüncü satıra taşıyordu. */
.hero{position:relative;border-radius:var(--r);overflow:hidden;background:var(--cat);color:var(--cat-on);
  padding:22px 30px;box-shadow:var(--shadow-l);margin-top:6px;container-type:inline-size}
/* Dar telefonda 30px yan pay, 330px'lik kutunun beşte birini yiyordu. */
@media (max-width:620px){.hero{padding:22px}}
/* Banner yüksekliği sabit: başlık bir, iki ya da üç satır olsa da kutu oynamaz.
   İçerik dikeyde ortalanır, fazlalık boşluk payından yenir. */
#hero{display:flex;flex-direction:column;justify-content:center}
/* TEK RİTİM — banttaki bütün dikey boşluklar aynı sayıdan geliyor (--bant-bosluk):
   üst pay, rozet-başlık, başlık-çipler, çipler-butonlar, alt pay ve telefonda
   iki butonun arası. Tek yeri değiştirmek yeter.
   min-height kaldırıldı: sabit yükseklik olsaydı artan boşluğu justify-content
   yalnızca üste ve alta dağıtır, iç ritim bozulurdu. Bant artık içeriğinin
   boyu kadar ve her aralık birbirine eşit. */
/* Kapakta artık yalnızca başlık var. Yükseklik içerikten gelemez — tek
   satırlık bir başlıkta kutu bir şerite iniyor ve fotoğraf anlamını
   kaybediyordu; o yüzden kendi ölçüsü var ve başlık içinde dikeyde
   ortalanıyor. Üst sınır 320px: daha fazlası masaüstünde paneli katlamanın
   altına itiyor. */
#sceneBig{--bant-bosluk:30px;min-height:clamp(230px,24vw,320px);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--bant-bosluk);padding-bottom:var(--bant-bosluk)}
#sceneBigText{margin-top:0}
@media (max-width:620px){#sceneBig{--bant-bosluk:26px;min-height:190px}}
/* Alt metin kalkınca başlık kutunun üst kenarına yapışıyordu; üstüne
   altındaki boşluktan biraz fazla pay veriyoruz — üstte ağır başlık,
   altta hafif noktalar olduğu için eşit boşluk optik olarak eşit durmuyor. */
#hero .hero-title{min-height:1.9em;display:flex;flex-direction:column;justify-content:center;
  margin-top:18px}
@media (max-width:880px){#hero .hero-title{margin-top:10px}}
/* Ana sayfa bandı dar ekranda içeriği kadar; seri kapağı DEĞİL — onun
   yüksekliği kendi ölçüsünden geliyor ve buradan sıfırlanırsa kapak
   tablette 137px'lik bir şerite iniyor. */
@media (max-width:1040px){#hero{min-height:0}#hero .hero-title{min-height:0}}
.hero > .brush{z-index:0}
/* .hero > * kuralı position:relative dayatıyor; bu yüzden daha özgül seçici şart. */
/* Motifler artık dolu siluet: kontur değil, fill:currentColor. Maske sağ üstten
   sola doğru eritiyor — başlığın arkası sakinleşiyor, köşeler nefes alıyor. */
.hero > .heroart{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;
  -webkit-mask-image:radial-gradient(130% 100% at 68% 18%,#000 0%,#000 42%,transparent 88%);
  mask-image:radial-gradient(130% 100% at 68% 18%,#000 0%,#000 42%,transparent 88%)}
.heroart i{position:absolute;display:block;color:var(--cat-on);opacity:.26}
.heroart i.k{color:var(--cat-hl);opacity:.34}
.heroart svg{display:block;width:100%;height:100%;fill:currentColor}
/* --mo: motif ölçeği. Boyutlar piksel sabit yazılıyor; dar ekranda bannerın kendisi
   küçüldüğü için motifler orantısız büyük kalıyordu. */
/* Ana sayfa slider'ı: motifler burada içeriğin önüne geçmemeli — detay sahnesine
   göre bir tık küçük ve daha soluk. Seri detayında motifler serbest kalabiliyor,
   çünkü orada rakip bir içerik yok. */
#hero > .heroart{--mo:.76}
#hero > .heroart i{opacity:.16}
#hero > .heroart i.k{opacity:.21}
@media (max-width:880px){
  .hero > .heroart{--mo:.62}.heroart i{opacity:.17}.heroart i.k{opacity:.22}
  #hero > .heroart{--mo:.5}#hero > .heroart i{opacity:.12}#hero > .heroart i.k{opacity:.15}
}
.hero .brush{position:absolute;pointer-events:none}
.hero .b1{left:-8%;bottom:-32%;width:70%;height:70%;background:rgba(255,255,255,.07);transform:rotate(-18deg);border-radius:40%}
.hero .b2{right:-14%;top:-38%;width:66%;height:96%;background:rgba(0,0,0,.13);transform:rotate(22deg)}
.hero .b3{left:-6%;bottom:-10%;width:120%;height:26%;background:var(--cat-hl);opacity:.16;transform:rotate(-4deg)}
.hero > *{position:relative;z-index:2}
.hero-title{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;text-align:center;
  font-size:clamp(26px,4.6vw,52px);line-height:1.0;letter-spacing:.004em;
  text-shadow:0 4px 0 rgba(0,0,0,.18)}
.hero-title .l2{display:block;color:var(--cat-hl-txt)}
/* Başlığın altındaki kısa açıklama (özel seri). Başlığın gölgesini almıyor:
   düz metin, bir tık şeffaf, ölçüsü başlıkla yarışmayacak kadar küçük. */
.hero-sub{position:relative;z-index:2;margin:14px auto 0;max-width:56ch;text-align:center;
  font-family:var(--body);font-size:clamp(14px,1.35vw,17px);line-height:1.5;
  color:var(--cat-on);opacity:.9}
/* GÖLGE YOK. Bir ara buraya yumuşak bir gölge koymuştum; Cansu sevmedi ve
   haklıydı — parlak bir fotoğrafta zaten yetmiyordu. Okunabilirliği artık
   perdenin kendisi veriyor (#sceneBig.kapakli::after ortada .66). En kötü
   durumda — bembeyaz bir fotoğraf — krem %92 opaklıkla ~5,5:1 veriyor. */
@media (max-width:880px){.hero-sub{margin-top:10px;max-width:42ch}}
/* Başlık her ekranda en fazla iki satır. Katsayı ölçümle bulundu: en uzun
   satır ("seni kurtaracak efsane yemek!") punto başına 13,69px yer kaplıyor,
   yani sığma sınırı kutu/13,69 = %7,30. Güvenlik payıyla %7,01. */
/* --heroOlcek: slayt başına ölçülen küçültme katsayısı (bkz. heroOlcek()).
   Varsayılan 1, yani çoğu başlık tasarım boyunda. Yalnız kutuya sığmayan
   başlık kendi payına küçülüyor; böylece banner her slaytta iki satır. */
#hero .hero-title{font-size:calc(clamp(15px,7.01cqw,42px) * var(--heroOlcek,1))}
/* Alt metin tek satır. En uzun alt metin ("Ennn sevdiğim, en sevdiğim...")
   punto başına 13,33px yer kaplıyor, yani sınır kutu/13,33 = %7,50;
   güvenlik payıyla %7,2. En dar telefonda bile 15px tavanına vuruyor,
   yani alt metin her yerde tasarım boyunda; daha uzun bir metin yazılırsa
   satıra taşmak yerine küçülüyor. */
#hero .hero-sub{font-size:clamp(11px,7.2cqw,15px)}
.hero-sub{text-align:center;max-width:46ch;margin:8px auto 0;font-size:15px;opacity:.94;line-height:1.45}
/* SERİ DETAYINDAKİ açıklama kapağın genişliğini kullanıyor. 46ch tavanı ana
   sayfanın dar banner'ı için konmuştu; seri detayında kutu 1096px ve
   açıklamaların en uzunu 111 karakter — ortada sıkışıp üç satıra bölünüyordu.
   Tavan kalktı. Metni kenardan uzak tutan şey artık kapağın kendi payına
   eklenen cqw'lik iç pay: kutu küçüldükçe o da küçülüyor, yani telefonda
   metin kenara daha çok yaklaşabiliyor ama hiç dayanmıyor. */
/* width:100% ŞART. #sceneBig flex kolon; `margin:0 auto` ile tavanı kalkan
   satır kutusunu içeriğe göre küçültüyordu (1096 yerine 595px), yani tavanı
   kaldırmak tek başına hiçbir şey değiştirmedi. */
/* SERİ DETAYINDAKİ AÇIKLAMA — ayrı ele alınıyor (4 Ekim).
   Cansu: "açıklamada önemli tüyolar veriyoruz ama çok saklıyoruz." Doğru,
   ve sebebi punto değildi. Üç şey üst üste biniyordu:

   1) SATIR UZUNLUĞU. Tavan kaldırılmıştı (bkz. üstteki not) ve açıklama
      1096 pikselin tamamını kullanıp TEK satıra yayılıyordu. Ortalama
      açıklama 107, en uzunu 151 karakter — rahat okuma ölçüsü 45-75.
      Göz bunu okunacak bir cümle olarak görmüyor, altyazı sanıyor.
      Tavan geri geldi ama 46ch değil 58ch: iki satır çıkıyor, üç değil.
   2) ÇİFT SÖNÜKLEŞTİRME. Renk rgba(krem,.92) İLE opacity:.94 aynı anda
      uygulanıyordu, yani metin fiilen %86,5 opaklıktaydı. İkisi ayrı
      yerlerde yazıldığı için kimse toplamı görmemişti. Artık tek karar:
      tam krem, opaklık 1.
   3) ÖLÇEK UÇURUMU. 52px başlığın altında 15px, dipnot gibi duruyor.
      Ara basamak yok. 18,5 tavanı başlıkla yarışmıyor ama cümleyi
      okunacak bir metin seviyesine çıkarıyor.

   Gölge YİNE YOK: Cansu daha önce reddetti ve haklıydı, okunabilirliği
   perde veriyor (::after ortada .66). Tam krem bu oranı ayrıca iyileştirdi. */
#sceneBig .hero-sub{width:100%;max-width:58ch;margin-inline:auto;
  padding-inline:clamp(4px,5cqw,64px);text-wrap:balance;
  margin-top:14px;opacity:1;
  font-size:clamp(15.5px,1.3vw,18.5px);line-height:1.55}
/* Tek satırlık pay yeter; iki satıra taşan alt metin kutuyu kendi büyütür. */
#heroSub{min-height:1.5em;display:flex;align-items:center;justify-content:center}
/* Ayraç sütunu eskiden 190-240px'ti; kartları birbirinden koparan asıl şey oydu.
   Artık işareti taşıyacak kadar dar. */
/* Metin bloğu ile görsel blok arasındaki en büyük görsel kırılma burası;
   14px onları birbirine yapıştırıyordu. Aşağıdaki boşluk zaten fazlaydı. */
.hero-stage{display:grid;grid-template-columns:1fr 76px 1fr;gap:14px;align-items:stretch;margin-top:28px}
.hcard{
  position:relative;border-radius:20px;border:none;cursor:pointer;padding:0;overflow:hidden;
  background:rgba(0,0,0,.28);box-shadow:var(--shadow-l);text-align:left;color:#fff;
  min-height:212px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
}
.hcardA{transform:rotate(-2.2deg)}
.hcardB{transform:rotate(2.2deg)}
.hcardA:hover:not(:disabled){transform:rotate(-2.2deg) translateY(-8px) scale(1.015)}
.hcardB:hover:not(:disabled){transform:rotate(2.2deg) translateY(-8px) scale(1.015)}
.hcard .fill{position:absolute;inset:0;background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(0,0,0,.34))}
.hcard .bignum{position:absolute;top:10px;left:16px;font-family:var(--disp);font-weight:var(--disp-w);font-size:44px;
  color:rgba(255,255,255,.14);line-height:1}
.hcard .inner{position:relative;z-index:2;padding:16px 18px 16px;display:flex;flex-direction:column;gap:8px}
.hcard .nm{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(18px,2.2vw,26px);line-height:1;text-transform:uppercase}
.hcard .yr{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.08em;opacity:.82;margin-top:-2px}
.hcard .yr:empty{display:none}
.opt .yr{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;opacity:.7;margin-top:-4px}
.opt .yr:empty{display:none}
/* ---------- BU? / BU! mührü ---------- */
.stamp{position:absolute;right:16px;bottom:16px;z-index:5;pointer-events:none;
  transform:rotate(-9deg);transition:opacity .16s ease,transform .16s ease}
.stamp .seal{position:relative;display:inline-block;background:var(--brand);color:var(--brand-cream);
  font-family:var(--disp);font-weight:var(--disp-w);font-size:22px;line-height:1;letter-spacing:.02em;
  padding:9px 14px 10px;border-radius:13px;
  box-shadow:0 0 0 4px var(--brand-cream), 0 7px 16px rgba(0,0,0,.34)}
.stamp .mark{color:#C9F24B}
.stamp .sparks{position:absolute;inset:-16px;pointer-events:none}
.stamp .sparks i{position:absolute;width:15px;height:4px;border-radius:3px;background:#C9F24B;opacity:0}
.stamp .sparks i:nth-child(1){top:-4px;left:-2px;transform:rotate(-42deg)}
.stamp .sparks i:nth-child(2){top:14px;left:-18px;transform:rotate(6deg)}
.stamp .sparks i:nth-child(3){bottom:-2px;left:8px;transform:rotate(46deg)}
.stamp .sparks i:nth-child(4){top:2px;right:-14px;transform:rotate(38deg)}
.stamp.yes{opacity:0;transform:rotate(-14deg) scale(1.7)}
.opt.picked .stamp.yes,.hcard.picked .stamp.yes,.stamp.yes.shown{animation:stampIn .24s cubic-bezier(.2,1.6,.4,1) forwards}
.opt.picked .stamp.yes .sparks i,.hcard.picked .stamp.yes .sparks i,.stamp.yes.shown .sparks i{
  animation:sparkOut .36s .08s ease-out forwards}
@keyframes stampIn{
  0%{opacity:0;transform:rotate(-15deg) scale(1.7)}
  62%{opacity:1;transform:rotate(-6deg) scale(.93)}
  100%{opacity:1;transform:rotate(-9deg) scale(1)}}
@keyframes sparkOut{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
/* kaybeden kart soluklaşır */
.duel.locked .opt:not(.picked),.duel.revealed .opt:not(.picked),
.hero-stage.revealed .hcard:not(.picked){filter:saturate(.2) brightness(.88);opacity:.78}
/* şampiyon mührü */
.stamp.big{right:26px;bottom:26px}
.stamp.big .seal{font-size:clamp(26px,4vw,42px);padding:14px 22px 15px;border-radius:18px;box-shadow:0 0 0 6px var(--brand-cream),0 10px 24px rgba(0,0,0,.4)}
@media (max-width:880px){.stamp{right:12px;bottom:12px}.stamp .seal{font-size:18px;padding:7px 11px 8px}}
/* Görsel YÜKLENİRKEN: kart siyah değil, serinin kategori renginde. Varsayılan
   rgba(0,0,0,.28) + koyu .fill gradyanı, kahverengi bannerda kapkara iki
   dikdörtgen veriyordu (Cansu telefonda gördü). */
.hcard.bekliyor{background:var(--cat,#2C63C4)}
.hcard.bekliyor .fill{background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(0,0,0,.14))}
.hcard .shot{display:none}
.hcard.img{background:#FBF5E6;color:#17213B;min-height:212px}
.hcard.img .fill{display:none}
.hcard.img .bignum{color:rgba(21,20,26,.07)}
.hcard.img .shot{display:flex;position:absolute;left:0;right:0;top:10px;bottom:78px;
  align-items:center;justify-content:center;z-index:1}
.hcard.img .shot img{max-width:88%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(21,20,26,.22))}
/* KARAKALEM ÇİZİM. Ürün çekimi kartın ortasında durabiliyor ama bir insan
   duramıyor — havada asılı kalıyor (Cansu). Aday kartındaki dil: figür bir
   kenardan çıkıyor. Burada sağ alt köşe, çünkü ad ve yıl sol altta; figür
   alt kenara basıyor, metin solda kendi yerinde kalıyor. */
.hcard.cizim .shot{inset:0;display:block;overflow:hidden}
.hcard.cizim .shot img{position:absolute;right:0;bottom:0;
  width:46%;height:auto;max-width:none;max-height:100%;object-fit:contain;
  object-position:bottom center}
/* Ad ve yıl figürün altına girmesin: metin sütunu kartın soluna çekiliyor,
   alt satır da bir tık küçülüyor ("Hande Yener · 2004" dar sütuna sığsın). */
.hcard.cizim .inner{padding-right:46%}
.hcard.cizim .yr{font-size:11.5px;letter-spacing:.05em}
/* Telefonda kart dar: aynı yüzdelerde alt satır ("Hande Yener · 2004")
   figürün kenarına değiyordu (ölçüm: 1px). Figür bir tık daralıyor. */
@media (max-width:620px){
  .hcard.cizim .shot img{width:42%}
  .hcard.cizim .inner{padding-right:42%}
}
/* İkinci görsel tipi: ürün çekimi değil, sahne. Forma gibi fonu kesilmiş nesneler krem
   zeminde "contain" duruyor; sinema karesi gibi bir görsel ise kartı baştan başa doldurmalı,
   isim de üstüne binmeli. Havuzda fit:"cover" yazan adaylar bu yolu kullanır. */
.hcard.scene{background:#11131A;min-height:212px}
.hcard.scene .fill{background:linear-gradient(to bottom,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.72) 100%);z-index:1}
.hcard.scene .shot{display:block;position:absolute;inset:0;z-index:0}
.hcard.scene .shot img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none}
.hcard.scene .bignum{color:rgba(255,255,255,.22);z-index:2}
.hcard.scene .inner{color:#fff}
.opt.img{background:#FBF5E6;color:#17213B;min-height:250px}
.opt.img::before{display:none}
.opt.img .shot{position:absolute;left:0;right:0;top:12px;bottom:86px;display:flex;
  align-items:center;justify-content:center;z-index:1}
.opt.img .shot img{max-width:84%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(21,20,26,.22))}
.opt.img .track{background:rgba(21,20,26,.14)}
.opt.img .bar{background:var(--cat)}
.stagemid{display:flex;align-items:stretch;justify-content:center}
/* İki adayın arasındaki işaret. Logo değil: logonun işi markayı söylemek,
   buranınki iki şeyin karşı karşıya olduğunu söylemek. */
.vsmark{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%}
.vsmark .ln{flex:1;width:2px;min-height:14px;border-radius:2px;
  background:linear-gradient(var(--cat-hl),color-mix(in srgb,var(--cat-hl) 10%,transparent));opacity:.55}
.vsmark .ln:last-child{background:linear-gradient(color-mix(in srgb,var(--cat-hl) 10%,transparent),var(--cat-hl))}
/* Jeton üç yerde de aynı: ana banner, tek seri düellosu, ikilem düellosu.
   Marka renklerini taşır (krem + mor) ama logo değildir — logonun işi markayı
   söylemek, bunun işi iki şeyin karşı karşıya olduğunu söylemek. */
/* Jeton üç yerde de aynı: ana banner, tek seri düellosu, ikilem düellosu.
   Logo değil — logonun işi markayı söylemek, bunun işi iki şeyin karşı karşıya
   olduğunu söylemek. Rengi kategoriden değil markadan geliyor (mor + lime),
   çünkü yaptığı iş siteye ait. Krem halka şart: mor jeton tek başına Film &
   Dizi'nin mavisinden 1.10 kontrastla ayrılıyor, yani kenarı kayboluyordu. */
.vstoken{display:flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border-radius:50%;background:var(--brand);color:var(--brand-hl);
  font-family:var(--disp);font-weight:var(--disp-w);font-size:21px;line-height:1;letter-spacing:.02em;
  transform:rotate(-7deg);
  box-shadow:0 0 0 3px var(--brand-cream),0 6px 14px rgba(0,0,0,.26)}
/* Rozet bu panelde VS işareti olarak duruyor (ikilem kartlarında ve tek seri
   sayfasında da aynı işi görüyor). Aksiyon butonu sahnenin altına indiği için
   burada dekoratif kalmalı: logo boyu 58→40, üstteki menü logosuyla yarışmasın. */
.badge{position:relative;background:var(--brand-cream);border-radius:14px;padding:8px 11px;
  transform:rotate(-3deg);text-align:center;box-shadow:0 8px 18px rgba(0,0,0,.26)}
.badge img{height:40px;width:auto;display:block}
@media (max-width:1040px){.badge img{height:36px}}
.badge .spark{position:absolute;width:14px;height:3px;background:var(--cat-hl);border-radius:2px}
/* Aksiyon artık kartların arasında değil, sahnenin altında: başlık → iki aday → aksiyon.
   Rengi kategoriden değil markadan geliyor (lime), çünkü yaptığı iş siteye ait.
   Halka --cat-on ile çiziliyor: Gezi'nin sarı zemininde lime tek başına
   1.64'te kalıyordu, o zeminde halka koyu (ink), diğerlerinde beyaz oluyor. */
/* Vaat satırı butonla sayfalama noktaları arasında tam ortada duruyor.
   Ölçüm: nokta görünürde 10px ama düğmesi 34px, yani kutunun üstünde 12px
   görünmez pay var. Alttaki görsel boşluk 8+12=20px; üstteki boşluk da 20px
   olsun diye .herocta'nın aralığı buna eşitlendi. Telefonda sayfalama şeridi
   akışa girdiği için oradaki üst boşluk da 8'e çekildi (8+12=20). */
.herocta{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:16px}
.herovaat{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--cat-on);opacity:.78}
.herovaat .hvbit{display:inline-flex;align-items:center;gap:6px}
.herovaat .kic{width:12px;height:12px;flex:none;display:block}
@media (max-width:620px){.herovaat{font-size:9.5px;letter-spacing:.06em;gap:13px}}
.startbtn{background:var(--brand-hl);color:var(--ink);border:none;border-radius:999px;
  padding:14px 30px;cursor:pointer;
  font-family:var(--disp);font-weight:var(--disp-w);font-size:18px;text-transform:uppercase;letter-spacing:.03em;
  display:flex;align-items:center;gap:11px;
  box-shadow:0 0 0 3px var(--cat-on),var(--shadow-m);transition:transform .14s,box-shadow .14s}
.startbtn:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--cat-on),var(--shadow-l)}
.doodle{position:absolute;z-index:3;color:var(--cat-hl-txt);font-family:"Caveat",cursive;font-weight:700;font-size:18px;
  line-height:1.05;pointer-events:none;text-align:center}
/* NOTLAR KARTLARIN ALTINA İNDİ (v519).
   Önce başlığın iki yanındaydılar ve banner'ın 802 pikselinin 287'sini
   yiyorlardı; uzun başlık ya notların altına giriyor ya da sığsın diye
   küçülüyordu. Cansu'nun kararı: puntolar aynı kalsın, notlar aşağı insin.
   Yeni yerleri kartların bittiği (y 362) ile sayfalayıcının başladığı
   (y 468) arasındaki boş şerit: "Seçmeye Başla" ortada, notlar iki yanında.
   Alttan konumlanıyorlar ki banner boyu değişirse sayfalayıcıya binmesinler.
   OKLAR TERS ÇEVRİLDİ: artık kartlar notların ÜSTÜNDE. Ok yazının altında
   aşağı bakarken hiçbir şeyi göstermiyordu; şimdi yazının üstünde ve
   yukarı, kartlara doğru kıvrılıyor (column-reverse + scaleY(-1)). */
.d-left{left:14px;bottom:68px;transform:rotate(-11deg)}
.d-right{right:14px;bottom:58px;transform:rotate(9deg)}
.d-left,.d-right{display:flex;flex-direction:column-reverse;align-items:center}
.d-left svg,.d-right svg{display:block;margin:0 auto 2px;transform:scaleY(-1)}
.d-crown{right:44px;top:22px}
.dots{display:flex;gap:8px;justify-content:center;margin-top:8px;position:relative;z-index:4}
/* Nokta görünürde 10px ama dokunma alanı 44px: parmakla isabet ettirilebilsin diye
   düğmenin kendisi şeffaf, renkli kısım ::before ile çiziliyor. */
.dots button{width:26px;height:34px;border:none;cursor:pointer;background:none;padding:0;
  display:flex;align-items:center;justify-content:center}
.dots button::before{content:"";display:block;width:10px;height:10px;border-radius:50%;
  background:var(--cat-dim);transition:width .18s,background .18s}
.dots button[aria-current="true"]::before{background:var(--cat-hl);width:26px;border-radius:999px}
.heronav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.34);color:#fff;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(3px);transition:background .16s,transform .16s}
.heronav svg{width:22px;height:22px}
.heronav:hover{background:rgba(0,0,0,.52)}
.heronav.prev{left:10px}
.heronav.next{right:10px}
/* Otomatik geçiş duraklat düğmesi. Oklarla aynı dilde ama daha küçük ve
   noktaların hemen sağında: gezinme değil, bir anahtar. */
.herooto{position:absolute;right:14px;bottom:14px;z-index:5;
  width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,.34);color:#fff;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(3px);transition:background .16s}
.herooto[hidden]{display:none}
.herooto:hover{background:rgba(0,0,0,.52)}
.herooto svg{width:15px;height:15px}
.herooto .ikOyna{display:none}
.herooto.duruyor .ikDur{display:none}
.herooto.duruyor .ikOyna{display:block;margin-left:1.5px}
/* Sargı masaüstünde görünmez: static kaldığı için oklar yine .hero'ya göre,
   dikey ortada, kenarlarda duruyor. */
.hero > .heropager{position:static}
/* Telefonda oklar akışa giriyor ve noktalar ikisinin tam ortasında,
   üstten alttan aynı hizada duruyor: tek bir gezinme satırı. */
@media (max-width:880px){
  .hero > .heropager{position:relative;display:flex;align-items:center;gap:10px;margin-top:5px}
  .heronav{position:static;top:auto;bottom:auto;left:auto;right:auto;transform:none;
    width:40px;height:40px;flex:none;order:1}
  .heronav.next{order:3}
  .heropager .dots{order:2;flex:1;margin-top:0}
  /* Telefonda otomatik geçiş zaten çalışmıyor; düğme de hiç görünmüyor.
     Yine de akışa girerse oklarla aynı satıra otursun. */
  .herooto{position:static;order:4;width:34px;height:34px}
}
/* Banner tıklamaya YAZIYLA cevap vermiyor. Burada bir zamanlar uydurulmuş bir
   yüzde ("%57'si seninle") ve iki kartın kilitlenmesi vardı: sayfanın en görünür
   modülü hem gerçek olmayan bir iddia taşıyor hem de kendi butonunu boğuyordu.
   Sonra yerine seriye çağıran bir cümle kondu, o da kalktı. Bugünkü kural:
   tıklayınca yalnızca SEÇİLİ HÂL görünür — damga düşer, öbür kart solar.
   Cümle olmadığı için banner tıklamayla boy da değiştirmiyor.
   Yeniden metin eklemek istersen önce bu notu oku: burası kullanıcının gördüğü
   ilk ekran ve her cümle "Seçmeye Başla"dan pay çalıyor. */

/* ---------- final paketi ----------
   Turnuva sonunda tek kart: şampiyon, kaç kişinin aynı şampiyonu seçtiği,
   en sıra dışı seçim, en çok zorlanılan eşleşme ve kimlik kartı. Ekranda
   görülen bu kart ile paylaş düğmesinin ürettiği görsel aynı içeriği taşır. */
/* Mühür görselin sağ alt köşesinde, kutunun kenarına binerek. */
.stamp.rmuhur{right:-14px;bottom:-14px;top:auto;left:auto}
@media (max-width:620px){.stamp.rmuhur{right:-8px;bottom:-10px}
  .stamp.rmuhur .seal{font-size:19px;padding:8px 12px 9px}}
.fpct{margin:18px 0 0;font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(18px,2.1vw,24px);line-height:1.12;color:var(--ink);text-wrap:pretty}
.fpct[hidden]{display:none}
.fpct b{color:var(--cat-ink)}
.fsatlar{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:20px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.fsat{background:var(--surface);padding:13px 15px 14px;display:flex;flex-direction:column;gap:5px;min-width:0}
.fk{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.fv{font-size:15px;line-height:1.35;color:var(--ink);font-weight:600}
.fv small{display:block;font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.02em;color:var(--ink-3);margin-top:3px}
/* Kimlik kartı sayfanın tek koyu bloğu: turnuvanın özeti burada bitiyor. */
.fkart{margin-top:14px;background:var(--ink);color:var(--brand-cream);border-radius:var(--r-sm);
  padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.fkart .fk{color:rgba(247,235,212,.52)}
.fkad{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  font-size:clamp(24px,3.2vw,34px);line-height:1;letter-spacing:.01em;color:var(--brand-hl)}
.fkmes{margin:0;font-size:13.5px;line-height:1.5;color:rgba(247,235,212,.8)}
/* Nadir rozet: altı karttan ayrılsın diye marka moru zemin ve halka. */
.fkart.nadir{background:linear-gradient(152deg,#2A1466 0%,#17213B 62%);
  box-shadow:0 0 0 2px var(--brand-hl)}
.frow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
@media (max-width:620px){
  .fbody{padding:18px 18px 20px}
  .fsatlar{grid-template-columns:1fr}
  .frow #fShare{width:100%;justify-content:center}
}

/* ---------- sonuç özeti: iki lop + ortak paylaşım ----------
   Zemin marka moru. Kimlik kartı içeriğe değil siteye ait — ve Mahkeme'nin
   laciverdinden ayrılmalıydı: o kurumsal bir dosya, bu bir kutlama kartı. */
.ozet{margin-top:22px;border-radius:var(--r);padding:16px;box-shadow:var(--shadow-l);
  background:linear-gradient(145deg,#7A35E8 0%,var(--brand) 42%,#3B1580 100%)}
/* İki lop eşit genişlikte. */
.ozUst{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
/* Sol lop: dikey, yuvarlak köşeli, camsı. Avatar en üstte. */
.kimlik{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);
  border-radius:26px;padding:24px 22px 26px;color:var(--brand-cream)}
/* Avatar yuvarlak değil dikey: kimlik kartı hissi için daha çok yer kaplıyor.
   Görsel gelene kadar kartın baş harfi duruyor. */
/* 2:3 — karakter görsellerinin kendi oranı. Sonuç ekranı çizimin tam
   göründüğü tek yer; küçük yuvalarda kutu 3/4 kalıyor ve cover kırpıyor. */
.kmlAvatar{width:100%;max-width:236px;aspect-ratio:2/3;border-radius:24px;overflow:hidden;
  position:relative;background:linear-gradient(150deg,#3B1580 0%,#1B0940 100%);
  box-shadow:0 0 0 2px var(--brand-hl),0 14px 30px rgba(0,0,0,.36);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.kmlAvatar img{width:100%;height:100%;object-fit:cover;display:block}
.kmlHarf{font-family:var(--disp);font-weight:var(--disp-w);font-size:96px;line-height:1;
  color:var(--brand-hl)}
.kmlKick{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(247,235,212,.6)}
.kmlUst{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:6px}
.kmlSkor{font-family:var(--disp);font-weight:var(--disp-w);font-size:54px;line-height:.9;
  color:var(--brand-hl);font-variant-numeric:tabular-nums}
.kmlSkorEt{font-family:"IBM Plex Mono",monospace;font-size:10px;line-height:1.25;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(247,235,212,.6);text-align:left}
.kmlAd{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  font-size:clamp(24px,2.6vw,30px);line-height:1.02;letter-spacing:.01em;margin-top:0;color:#fff}
.kmlMes{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:rgba(247,235,212,.8)}
/* Nadir kart: uyum ekseninin iki ucunda, katılımcıların küçük bir bölümünde
   çıkıyor. Görünürde normal kartlardan farkı yoktu; artık halkası çift ve
   üstünde rozeti var. */
/* NADİR İŞARETİ — dört köşeli parıltı. Mor kartın üzerinde markanın neon
   yeşili; haplı hâlinden vazgeçildi, çünkü aynı işaretin profil ızgarasında
   da görünmesi gerekiyor ve orada hap kartı kalabalıklaştırıyordu. */
.nadirEt{display:inline-flex;align-items:center;gap:7px;margin:2px 0 8px;
  color:var(--brand-hl);
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}
.nadirEt[hidden]{display:none}
.nadirEt i{font-style:normal;font-size:15px;line-height:1;
  text-shadow:0 0 12px rgba(201,242,75,.6)}
/* Adın yanındaki işaret. Ada YAZILMIYOR: ad veri, bu sunum. */
.nadirpar{margin-left:.3em;font-size:.72em;line-height:1;vertical-align:.1em;
  color:var(--brand-hl);text-shadow:0 0 12px rgba(201,242,75,.55)}
/* Krem/beyaz zeminde lime 1,6:1 veriyor, okunmuyor: orada marka moru. */
.pfkbas .nadirpar,.kkart .nadirpar,.pfnasil .nadirpar{
  color:var(--brand);text-shadow:none}
/* ÇİZİMİN KÖŞESİNDEKİ ROZET. Adın yanındaki glif yeterince belirgin değildi:
   ızgarada seçili olmayan kartlar griye düşüyor ve mor bir glif o griye
   karışıyor. Rozet dolu neon yeşil kare + koyu parıltı: griden de, renkli
   çizimden de ayrılıyor. Yalnızca iki nadir karakterde basılıyor. */
/* Rozet artık yazılı: lime zemin, MOR çerçeve, MOR parıltı ve "NADİR".
   Yalnız simge yeterince açık değildi — işaretin ne demek olduğunu söylemek
   için bir kelime gerekiyordu. Mor #6C2BD9 lime #C9F24B üzerinde ~6:1. */
.nadirroz{position:absolute;top:10px;right:10px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;padding:5px 9px 5px 8px;
  border-radius:999px;border:2px solid var(--brand);
  background:var(--brand-hl);color:var(--brand);
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  box-shadow:0 4px 14px rgba(108,43,217,.28)}
.nadirroz b{font-weight:600}
/* Parıltı SVG: yüksekliği yazının yaklaşık 1,7 katı ve flex ile tam ortalı.
   Glifken yazıdan yukarıda duruyordu (Cansu: "yazıya ortalı ve daha büyük"). */
.nadirroz .nadsvg{width:16px;height:16px;flex:none;display:block}
.nadirroz.buyuk{top:12px;right:12px;padding:7px 12px 7px 10px;font-size:11px;gap:6px;
  border-width:2.5px;box-shadow:0 6px 20px rgba(108,43,217,.4)}
.nadirroz.buyuk .nadsvg{width:19px;height:19px}
/* "Nasıl çalışır" ızgarasında rozet adın yanında, akışta. Oradaki iş
   "bu karakter nadir" demek; kart küçük olduğu için bir tık küçülüyor. */
.nadirroz.mini{position:static;padding:3px 8px 3px 6px;font-size:8.5px;gap:4px;
  border-width:1.5px;box-shadow:none;vertical-align:middle}
.nadirroz.mini .nadsvg{width:12px;height:12px}
.hwkart h4{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* Telefonda kart 159px, çizim 131px: 34'lük rozet görselin dörtte birini
   yiyordu. 26px aynı işareti aynı güçte veriyor. */
/* Izgara kartında rozet .kkav'ın İÇİNDE değil, kartın çocuğu: telefonda
   akışa girip görselin altına inebilsin diye. Masaüstünde yine çizimin
   üstünde duruyor (kart zaten position:relative; 16px kart payı + 10px). */
.kkart .nadirroz{top:26px;right:26px}
@media (max-width:620px){
  .nadirroz{top:7px;right:7px;padding:4px 7px 4px 6px;font-size:8px;gap:4px;letter-spacing:.1em}
  .nadirroz .nadsvg{width:13px;height:13px}
  .nadirroz.buyuk{padding:6px 10px 6px 8px;font-size:10px}
  .nadirroz.buyuk .nadsvg{width:16px;height:16px}
  /* Telefonda kart 159px, çizim 131px: yazılı rozet görselin üstünde onun
     üçte ikisini kaplıyordu. Akışa alındı — görselin altında, adın üstünde,
     tam boyunda okunuyor ve çizimi kapatmıyor. */
  .kkart .nadirroz{position:static;display:inline-flex;margin:9px 0 0;
    padding:5px 9px 5px 7px;font-size:9px}
  .kkart .nadirroz .nadsvg{width:14px;height:14px}
}
/* Nadir kartın çerçevesi de konuşuyor: çizimin içine lime bir hat. Kartın
   kendi kenarlığına dokunulmuyor — o "senin karakterin" sinyali (mor).
   ::after ŞART, inset box-shadow DEĞİL: iç gölge içeriğin ALTINDA kalıyor,
   yani görsel tam opaklıktayken (seçili kart) hat kayboluyordu. Soluk
   kartlarda görünüp seçili kartta kaybolan bir işaret, işaret değildir. */
.kkart.nadir .kkav::after{content:"";position:absolute;inset:0;z-index:2;
  border:3px solid var(--brand-hl);border-radius:12px;pointer-events:none}
.ozet.nadir .kmlAvatar{box-shadow:0 0 0 3px var(--brand-hl),0 0 0 8px rgba(201,242,75,.20),
  0 16px 34px rgba(0,0,0,.42)}
.ozet.nadir .kimlik{background:rgba(201,242,75,.10);border-color:rgba(201,242,75,.40)}
/* Sağ lop: tablo açık zeminde okunsun diye krem. */
.yolcu{background:var(--surface);border-radius:26px;padding:20px 22px 12px;
  display:flex;flex-direction:column;min-width:0}
/* Başlık mono gri iken tablonun altında kalıyordu; artık gerçek bir başlık. */
.yolKick{display:block;font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  font-size:21px;line-height:1;letter-spacing:.01em;color:var(--ink);
  padding-bottom:12px;border-bottom:2px solid var(--ink)}
/* Tablo lobun boyuna yayılıyor: satırlar arta kalan boşluğu paylaşınca
   beyaz kutunun altında delik kalmıyor. */
.yolTablo{width:100%;height:100%;border-collapse:collapse;margin-top:8px}
.yolTablo th,.yolTablo td{text-align:left;vertical-align:middle;padding:12px 0;
  border-bottom:1px solid var(--line)}
.yolTablo tr:last-child th,.yolTablo tr:last-child td{border-bottom:0}
.yolTablo th{width:38%;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-right:12px;line-height:1.45}
.yolTablo .yad{padding-right:10px;min-width:0}
/* Aday: küçük görsel + isim. Görsel olmayanlarda krem bir kutu duruyor,
   satırın hizası bozulmasın diye. */
.yiki{display:flex;align-items:flex-start;justify-content:flex-start;gap:10px;flex-wrap:nowrap}
.yyan{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  flex:0 1 auto;min-width:0;max-width:150px}
.yvs{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);
  flex:none;align-self:center;margin-top:12px}
.ygor{display:block;width:42px;height:30px;border-radius:7px;
  overflow:hidden;background:var(--paper-2);flex:none}
.ygor img{width:100%;height:100%;object-fit:cover;display:block}
.ygor img.contain{object-fit:contain;background:var(--surface)}
.yisim{display:block;font-weight:700;font-size:14px;line-height:1.25;color:var(--ink)}
/* İstatistik iki kısa satır. Rakam olan satır büyük ve mor; kategori mavisi
   tablonun içinde yabancı duruyordu. */
.yolTablo .ydeg{width:1%;white-space:nowrap;text-align:right;padding-left:14px}
.yolTablo .ybuy{display:block;font-family:"IBM Plex Mono",monospace;font-size:16px;
  font-weight:600;font-variant-numeric:tabular-nums;color:var(--brand);line-height:1.25}
.yolTablo .ykuc{display:block;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  font-weight:500;line-height:1.3;color:var(--ink-3)}
.yolTablo tr.vurgu .ybuy{font-family:var(--disp);font-weight:var(--disp-w);font-size:32px;
  line-height:1;color:var(--brand)}
.yolTablo tr.vurgu th{color:var(--ink-2)}
/* Paylaşım bandı iki lobu da kapsıyor: kartın altında tek şerit. */
.ozPay{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;
  margin-top:16px;padding:14px 12px 4px}
.kmlPayK{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(247,235,212,.66)}
.kmlBtns{display:flex;flex-wrap:wrap;gap:9px}
.pbtn{border:1.6px solid rgba(255,255,255,.34);background:none;color:#fff;
  border-radius:999px;padding:9px 16px;cursor:pointer;
  font-family:var(--nav);font-weight:600;font-size:13.5px;letter-spacing:.03em;
  transition:background .15s,border-color .15s,transform .14s}
.pbtn:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-1px)}
.pbtn.ana{background:var(--brand-hl);border-color:var(--brand-hl);color:var(--ink)}
.pbtn.ana:hover{background:#d6f95f;border-color:#d6f95f}
.pbtn:disabled{opacity:.55;cursor:default;transform:none}
.ozet .shnot{color:rgba(247,235,212,.78)}

/* ---------- seçim sonuçları ----------
   Katılan herkesin ortalaması: sıralı liste, çubuk ve yüzde. Kullanıcının
   şampiyonu işaretli ki kendi sonucunu listede arayıp bulabilsin. */
.sirala{background:var(--surface);border-radius:var(--r-sm);box-shadow:var(--shadow-m);overflow:hidden}
.ssat{display:grid;grid-template-columns:26px 54px minmax(0,1fr) minmax(70px,150px) 52px;
  align-items:center;gap:12px;padding:9px 18px;border-bottom:1px solid var(--line)}
.ssat:last-of-type{border-bottom:0}
.ssat.ben{background:var(--cat-dim);background:color-mix(in srgb,var(--cat) 9%,var(--surface))}
.ssira{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;text-align:right}
.sgor{width:54px;height:36px;border-radius:8px;overflow:hidden;background:var(--paper-2);flex:none}
.sgor img{width:100%;height:100%;object-fit:cover;display:block}
.sgor img.contain{object-fit:contain;background:var(--surface)}
.sad{font-weight:600;font-size:14px;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sben{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cat-ink);margin-top:1px}
.scub{height:8px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.scub i{display:block;height:100%;border-radius:999px;background:var(--cat)}
.ssat.ben .scub i{background:var(--brand)}
.sp{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;text-align:right}
.sara{padding:4px 18px;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:12px}
.sdaha{width:100%;border:0;border-top:1px solid var(--line);background:var(--paper-2);cursor:pointer;
  padding:12px;font-family:var(--nav);font-weight:600;font-size:13.5px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-2)}
.sdaha:hover{background:var(--paper);color:var(--ink)}
@media (max-width:640px){
  .ssat{grid-template-columns:22px 44px minmax(0,1fr) 46px;gap:9px;padding:9px 13px}
  .scub{grid-column:2/-1;height:6px}
  .sgor{width:44px;height:30px}
}

/* ---------- ağaç görünüm anahtarı ---------- */
/* ---- turnuva ağacı ---- */
.agacsar{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  padding-bottom:6px;margin-top:4px}
.agacipucu{display:none;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:4px}
@media (max-width:1100px){.agacipucu{display:block}}
.agacic{position:relative}
.aturlar{position:absolute;left:0;top:0;right:0}
.aturad{position:absolute;top:0;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agaccizgi{position:absolute;left:0;overflow:visible}
.agaccizgi path{fill:none;stroke:var(--line);stroke-width:2}
.akutular{position:absolute;left:0;right:0}
.akonum{position:absolute}
/* Yükseklik TEK YERDEN: --akh'yi agacTumHTML basıyor (AG.kh). CSS'te sabit
   50px dururken JS'teki kh'yi değiştirmek kutuları birbirine bindiriyordu. */
.akutu{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;
  padding:6px 9px;display:grid;grid-template-columns:1fr auto;gap:1px 8px;
  align-items:center;height:var(--akh,50px);box-sizing:border-box}
.akutu .asatir{grid-column:1;display:flex;align-items:center;gap:6px;min-width:0;
  font-size:12.5px;line-height:1.2}
.akutu .asatir b{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.akutu .asatir i{font-style:normal;font-size:10.5px;color:var(--ink-3);flex:none}
.akutu .aele b{font-weight:500;color:var(--ink-3)}
.akutu .aele i{color:var(--ink-3);opacity:.7}
/* Kaybedenin de görseli var (6 Ekim). Ama aynı parlaklıkta olunca iki satır
   eşitleniyor; kaybedenin ADI zaten solgun, görseli de ona uyuyor. */
.akutu .aele .agor{opacity:.52}
.agor{width:20px;height:15px;border-radius:4px;overflow:hidden;background:var(--paper-2);
  flex:none;display:block}
.agor img{width:100%;height:100%;object-fit:cover;display:block}
.agor img.contain{object-fit:contain;background:var(--surface)}
.akutu .apct{grid-column:2;grid-row:1 / span 2;align-self:center;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  color:var(--brand);white-space:nowrap}
/* Yükseklik SABİT DEĞİL. 50px'e kilitliyken görsel + ad + "KAZANAN" üç satırı
   60px istiyordu; flex çocukları sıkıştırdığı için ortadaki ad sıfıra inip
   kayboluyordu — ağacın en sağındaki kutu "KAZANAN" diyor ama kimin kazandığını
   söylemiyordu. Artık kutu içeriğe göre uzuyor, ad iki satıra kadar sarıyor. */
/* Kazanan kutusu tek satır: solda görsel, yanında ad. Görsel ağaçtaki
   minik yuvaların iki katı — bu kutu turnuvanın cevabı, ağacın bir
   kutusu değil. İçinde ayrıca "Kazanan" yazmıyor; üstündeki rozet
   "SENİN KAZANANIN" diyor. */
.asampkutu{background:var(--brand);color:#fff;border-radius:12px;padding:9px 12px;
  display:flex;align-items:center;gap:11px;min-height:var(--akh,58px);
  box-sizing:border-box;box-shadow:var(--shadow-s)}
/* SEZON ADIN PARÇASI. Ağacın bütün kutuları "Barcelona 2005-06" diyorken
   kazanan kutusu yalnız "Barcelona" diyordu; aynı havuzda üç Barcelona olan
   serilerde hangisi olduğu kayboluyordu. */
.asampkutu .asampad{flex:1 1 auto;min-width:0}
.asampkutu b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:13.5px;line-height:1.15}
.asampkutu .asampad i{display:block;margin-top:2px;font-style:normal;font-size:11px;
  line-height:1.1;color:var(--brand-hl)}
.asampkutu .agor.buyuk{width:44px;height:33px;border-radius:7px;flex:none}
/* Şampiyonun yolu: tek sütun, solda tur adı, ortada omurga. */
.ayol{display:grid;gap:0;margin-top:4px}
.ayadim{display:grid;grid-template-columns:96px 22px minmax(0,1fr);align-items:center;
  column-gap:10px;position:relative;padding:7px 0}
/* Genişlik sabit: her adım kendi ızgarası olduğu için "auto" sütun satırdan
   satıra değişiyordu ve omurga zikzak çiziyordu. */
.ayturad{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:right;
  white-space:nowrap;width:96px;overflow:hidden;text-overflow:ellipsis}
/* Omurga kendi sütununda: çizgi satır boyunu birebir kaplıyor, ilk adımda
   yukarısı, son adımda aşağısı kesiliyor. Konum hesabı gerekmiyor. */
.aysut{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
.ayhat{position:absolute;top:0;bottom:0;width:2px;background:var(--line)}
.ayadim:first-child .ayhat{top:50%}
.ayadim:last-child .ayhat{bottom:50%}
.aynokta{position:relative;z-index:2;width:11px;height:11px;border-radius:50%;
  background:var(--surface);border:2.5px solid var(--brand);display:block}
.aynokta.bayrak{background:var(--brand);box-shadow:0 0 0 4px rgba(108,43,217,.18)}
.akutu.duz{height:auto;min-height:50px}
@media (max-width:620px){
  .ayturad{width:70px;font-size:8.5px;letter-spacing:.04em}
  .ayadim{grid-template-columns:70px 18px minmax(0,1fr);column-gap:7px}
  .akutu .asatir{font-size:12px}
}
.agacsec{display:flex;gap:6px;margin-left:auto;background:var(--paper-2);
  border-radius:999px;padding:4px}
.asbtn{border:0;background:none;cursor:pointer;border-radius:999px;padding:7px 14px;
  font-family:var(--nav);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--ink-2)}
.asbtn:hover{color:var(--ink)}
.asbtn.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-s)}
.turad{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding:14px 18px 2px}
.turblok.acik{padding-bottom:6px}

/* ---------- turnuva ağacı işaretleri ----------
   Şampiyonun yolu marka moru, çoğunluğa ters düşen kararlar neon yeşil.
   İşaret solda ince bir şerit: satırın kendi düzenini bozmuyor. */
.mac{position:relative}
.mac.yol::before,.mac.aykiri::after{content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:3px;border-radius:3px}
.mac.yol::before{background:var(--brand)}
.mac.aykiri::after{background:var(--brand-hl);left:5px;box-shadow:0 0 8px rgba(201,242,75,.55)}
.mac.yol,.mac.aykiri{padding-left:16px}
.mac.yol.aykiri{padding-left:22px}

@media (max-width:880px){ .ozUst{grid-template-columns:1fr} }
@media (max-width:620px){
  .ozet{padding:12px}
  .kimlik{padding:20px 16px 22px}
  .kmlAvatar{max-width:184px;margin-bottom:14px}
  .kmlHarf{font-size:74px}
  .yolcu{padding:18px 16px 10px}
  .yolTablo{height:auto;display:block}
  .yolTablo tbody{display:block}
  /* Dar ekranda satir bir karte donuyor: etiket ustte tam genislikte,
     altinda solda aday(lar) sagda istatistik. Uc sutun yan yana sigmiyordu. */
  .yolTablo tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;column-gap:10px;row-gap:6px;padding:11px 0;
    border-bottom:1px solid var(--line)}
  .yolTablo tr:last-child{border-bottom:0}
  .yolTablo th,.yolTablo td{display:block;padding:0;border-bottom:0}
  .yolTablo th{width:auto;grid-column:1/-1;padding-right:0;font-size:9.5px}
  .yolTablo .yad{grid-column:1;padding-right:0}
  .yolTablo .ydeg{grid-column:2;padding-left:0;width:auto}
  /* Ikili satirda cift tam genislige yayiliyor, istatistik altina gecip
     saga yaslaniyor: isimler ucer satira bolunmuyor. */
  .yolTablo tr.ciftli .yad{grid-column:1/-1}
  .yolTablo tr.ciftli .ydeg{grid-column:1/-1;text-align:center}
  .yolTablo tr.vurgu{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
  .yolTablo tr.vurgu th{grid-column:1;align-self:center}
  .yolTablo tr.vurgu .yad{display:none}
  .yolTablo tr.vurgu .ydeg{grid-column:2}
  .yisim{font-size:13px}
  .ygor{width:36px;height:26px}
  .yyan{max-width:130px}
  .yolTablo .ybuy{font-size:14px}
  .yolTablo .ykuc{font-size:10.5px}
  .yolTablo tr.vurgu .ybuy{font-size:26px}
  .yolKick{font-size:19px}
  .ozPay{padding:12px 6px 2px;justify-content:center;text-align:center}
  .kmlBtns{justify-content:center;width:100%}
  .pbtn{flex:1 1 auto;text-align:center}
  .agacsec{margin-left:0;width:100%}
  .asbtn{flex:1}
}

/* ---------- Popüler Kültür Mahkemesi ----------
   Ayda bir açılan tek büyük dosya. Zemini kategori rengi değil --ink:
   bu bir kategori değil, sitenin kendi olayı — renk sistemine girmemesi
   hiyerarşiyi tek başına kuruyor. Vurgu rengi dosyanın damarından gelir. */
.mahkeme{position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--ink);color:var(--brand-cream);box-shadow:var(--shadow-l);
  padding:26px 30px 28px;isolation:isolate}
/* Maske sağdan sola yumuşuyor: sol kenarda fotoğraf var, orada motif zaten görünmez.
   Eski radyal maske her şeyi tek köşeye topluyordu. */
.mahkeme > .mahart{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;--mo:.72;
  -webkit-mask-image:linear-gradient(100deg,transparent 2%,#000 30%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 2%,#000 30%,#000 100%)}
.mahart i{position:absolute;display:block;color:var(--mh,var(--brand-hl));opacity:.11}
.mahart svg{display:block;width:100%;height:100%;fill:currentColor}
.mahkeme > *:not(.mahart){position:relative;z-index:2}
/* Üst bant: mahkemenin adı, dosya numarası ve dönem. Mono, çünkü burası künye. */
.mahust{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mh,var(--brand-hl));
  padding-bottom:13px;border-bottom:1px solid rgba(247,235,212,.17)}
/* Amblem dışındaki her şey tek bir kutuda: satır atlarsa hepsi aynı hizadan başlıyor. */
.mahkunye{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}
.mahust .sep{opacity:.4}
.mahust .mahamblem{width:38px;height:38px;flex:none;display:block;margin-right:1px;
  color:var(--brand-cream)}
/* Sayaç künyenin sağ ucunda: koyu bir yuvaya gömülü, mono, sabit genişlikli
   rakamlarla — küçük bir dijital gösterge. Akışı iki nokta üst üstenin saniyede
   bir sönmesi de söylüyor; hareket azaltma tercihinde sönme kapanıyor. */
.mahsaat{margin-left:auto;display:inline-flex;align-items:center;gap:9px}
.msetiket{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.16em;
  color:rgba(247,235,212,.62)}
.mahsayac{display:inline-flex;align-items:baseline;
  background:rgba(0,0,0,.30);border:1px solid rgba(247,235,212,.13);border-radius:7px;
  padding:5px 10px 6px;box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.mahsayac b{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.05em;color:var(--mh,var(--brand-hl))}
.mssep{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.08em;
  color:rgba(247,235,212,.58);margin:0 5px 0 1px}
.msnk{font-style:normal;font-size:13px;line-height:1;color:var(--mh,var(--brand-hl));
  margin:0 1px;animation:mskirp 1s steps(1,end) infinite}
@keyframes mskirp{0%,50%{opacity:.9}50.01%,100%{opacity:.22}}
@media (prefers-reduced-motion:reduce){.msnk{animation:none;opacity:.7}}
.mahust .mahsure.bitti{margin-left:auto}
/* Dosyanın kapısı: altı çizili, oklu, kendini gösteren bir bağlantı. */
.mahlink{display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:0 0 2px;cursor:pointer;
  font-family:var(--nav);font-weight:600;font-size:13.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--mh,var(--brand-hl));
  border-bottom:1.6px solid currentColor}
.mahlink b{display:inline-block;font-size:15px;line-height:1;transition:transform .16s}
.mahlink:hover{color:var(--brand-cream)}
.mahlink:hover b{transform:translateX(3px)}
/* Başlık ile not birbirine yakın dursun, asıl boşluk notla panel arasında olsun. */
.mahbas{margin-bottom:9px}
.mahnot{margin:0 0 26px;font-size:13.5px;color:var(--ink-3);text-wrap:pretty}
/* Dosya üstte, karar altta. Yan yana dururken iki sorun vardı: aralarında
   yalnızca boşluk olduğu için sınır okunmuyordu, ve gerekçe uzayıp kısaldıkça
   iki sütunun yüksekliği tutmuyordu. Şimdi ayrımı yatay çizgi yapıyor — dosya
   iddiayı, alt bant kararı taşıyor — ve iki seçenek sitenin her yerindeki gibi
   yan yana, eşit genişlikte duruyor. */
/* Portre artık modülün boyunca iniyor: ızgara iki satır (dosya + karar) ve
   görsel ikisini birden kapsıyor. Dosyayı kararı ayıran çizgi de bu yüzden
   yalnızca sağ sütunda — tam genişlikte olsaydı portrenin önünden geçerdi. */
.mahgrid{display:grid;grid-template-columns:186px minmax(0,1fr);
  column-gap:26px;row-gap:0;align-items:stretch;margin-top:20px}
.mahgor{grid-row:1/3;grid-column:1}
.mahdosya{grid-column:2;grid-row:1}
.mahgrid > .mahkarar{grid-column:2;grid-row:2;margin-top:22px}
/* Temsili görsel. Görsel yokken kategori motifiyle dolu bir karo duruyor —
   boş kutu değil, kasıtlı bir yüzey. Görsel gelince yerine geçiyor. */
/* Görsel artık sabit oranlı değil, metnin boyuna uzuyor: gerekçe uzasa da
   kısalsa da blok temiz bir dikdörtgen kalıyor, altında delik açılmıyor. */
.mahgor{position:relative;border-radius:var(--r-sm);overflow:hidden;align-self:stretch;
  min-height:216px;background:var(--ink);box-shadow:0 12px 28px rgba(0,0,0,.34);
  outline:1px solid rgba(247,235,212,.14);outline-offset:-1px}
/* Portre bir özne: kapak kırpımında ağırlık üstte kalmalı, yoksa dar kutuda
   yüz kesiliyor. */
/* Görselin oranı (0,80) masaüstü kutusuyla birebir aynı: orada hiç kırpılmıyor.
   Dar kutularda ağırlık üstte kalıyor ki yüz kesilmesin. */
.mahgor img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
.mahgor .ph{position:absolute;inset:0;overflow:hidden;--mo:.78;color:var(--mh,var(--brand-hl));
  background:linear-gradient(155deg,rgba(247,235,212,.10) 0%,rgba(247,235,212,.04) 48%,rgba(0,0,0,.22) 100%)}
.mahgor .ph i{position:absolute;display:block;opacity:.22}
.mahgor .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
.mahkonu{display:block;font-family:var(--body);font-size:14px;font-weight:600;
  color:var(--mh,var(--brand-hl));margin-bottom:5px}
.mahsoru{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(22px,2.5vw,34px);line-height:1.04;color:var(--brand-cream)}
/* Gerekçe düz akıyor: iki paragraf, sütunun tamamına yayılı. Paragraflar kısa
   olduğu için (ikisi de iki-üç satır) geniş ölçü okumayı zorlamıyor. */
.mahger{margin-top:12px;font-size:14.5px;line-height:1.62;text-wrap:pretty;color:rgba(247,235,212,.74)}
.mahger p{margin:0}
.mahger p + p{margin-top:13px}
/* Neon altı çizgi: markanın lime'ı. İki katman — üstteki keskin çizgi, alttaki
   yumuşak hale. box-decoration-break, cümle satır atladığında çizginin de
   devam etmesini sağlıyor. */
.mahvurgu{font-style:normal;color:var(--brand-cream);padding-bottom:2px;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(to top,rgba(201,242,75,0) .05em,rgba(201,242,75,1) .05em,
      rgba(201,242,75,1) .155em,rgba(201,242,75,0) .155em),
    linear-gradient(to top,rgba(201,242,75,.42) 0,rgba(201,242,75,.22) .13em,
      rgba(201,242,75,0) .34em);
  text-shadow:0 0 14px rgba(201,242,75,.34);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Karar bandı: dosyadan çizgiyle ayrılıyor. Sol taraf okunur, burası tıklanır. */
.mahkarar{margin-top:22px;padding-top:20px;border-top:1px solid rgba(247,235,212,.15)}
.mahsure{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);background:var(--mh,var(--brand-hl));
  border-radius:999px;padding:5px 12px 6px}
.mahsure.bitti{background:rgba(247,235,212,.16);color:rgba(247,235,212,.78)}
/* Gerçek sayaç: saniyede bir yalnızca rakamlar değişir, modül yeniden çizilmez.
   tabular-nums şart, yoksa rakam genişliği oynayıp kutu titriyor. */

/* Mahkemenin asıl eylemi karar vermek: bu iki düğme panelin en yüksek sesi olmalı.
   Koyu zeminde çerçeveli kutu "tıklanır" demiyordu; dolu krem zemin diyor. */
.mahopts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mahopt{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;cursor:pointer;
  border:2px solid var(--brand-cream);background:var(--brand-cream);color:var(--ink);
  border-radius:var(--r-sm);padding:16px 18px;box-shadow:0 8px 20px rgba(0,0,0,.3);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s,
             border-color .16s,background .16s,color .16s}
.mahopt:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 13px 26px rgba(0,0,0,.36)}
.mahopt:active:not(:disabled){transform:translateY(0);box-shadow:0 5px 14px rgba(0,0,0,.3)}
.mahopt:disabled{cursor:default}
/* Tokmak kuyusu: daire biçimi "birini seç" diyor, içindeki tokmak "karar ver" diyor.
   Üstüne gelince tokmak vuracakmış gibi yatıyor — tıklanabilirliği asıl bu söylüyor. */
.mahopt .mkvur{width:46px;height:46px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(23,33,59,.07);box-shadow:inset 0 0 0 2px rgba(23,33,59,.15);
  transition:background .16s,box-shadow .16s}
.mahopt .mktok{width:27px;height:27px;display:block;transform-origin:72% 78%;
  transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.mahopt:hover:not(:disabled) .mkvur{background:rgba(23,33,59,.12);
  box-shadow:inset 0 0 0 2px rgba(23,33,59,.3)}
.mahopt:hover:not(:disabled) .mktok{transform:rotate(-24deg)}
.mahopt:active:not(:disabled) .mktok{transform:rotate(6deg)}
/* Karar verilince tokmak yalnızca seçilende kalır: vurulan taraf o.
   Ayrıca elenen düğme koyu zemine döndüğü için mürekkep tokmak orada okunmazdı. */
.mahkeme.done .mahopt.picked .mkvur{background:rgba(23,33,59,.12);
  box-shadow:inset 0 0 0 2px rgba(23,33,59,.34)}
.mahkeme.done .mahopt:not(.picked) .mkvur{display:none}
.mahopt .mktxt{flex:1;min-width:0}
/* Büyütmeyi CSS değil BUYUK() yapıyor: text-transform, lang="tr" altında
   İngilizce adlarda da Türkçe kuralı uyguluyor ve "Barbie" → "BARBİE" oluyordu.
   BUYUK() yabancı adları tanıyıp I üretiyor. */
.mahopt .mkad{display:block;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:21px;line-height:1.02;letter-spacing:.01em;
  /* "OPPENHEİMER" gibi tek kelimelik uzun bir seçenek adı dar ekranda kutudan
     taşıp yüzdenin üstüne biniyordu: tek kelime sarılamıyor. */
  overflow-wrap:anywhere}
.mahopt .mkalt{display:block;font-size:12.5px;line-height:1.3;color:rgba(23,33,59,.72);margin-top:3px}
.mahopt .mkv{display:none;flex:none;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:27px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.mahopt .mkbar{position:absolute;left:0;bottom:0;height:5px;width:0;
  background:rgba(23,33,59,.85);transition:width .8s cubic-bezier(.2,.8,.2,1)}
/* Oy verildikten sonra: seçilen dolu kalır, diğeri geri çekilir.
   Ayırt edici işaret vurgu rengi olamaz — krem zeminde sarı bir çerçeve görünmüyor. */
.mahkeme.done .mahopt{box-shadow:none;transform:none}
.mahkeme.done .mahopt .mkv{display:block}
.mahkeme.done .mahopt.picked{border-color:var(--ink)}
.mahkeme.done .mahopt:not(.picked){background:transparent;border-color:rgba(247,235,212,.22);
  color:var(--brand-cream)}
.mahkeme.done .mahopt:not(.picked) .mkalt{color:rgba(247,235,212,.64)}
.mahkeme.done .mahopt:not(.picked) .mkv{color:rgba(247,235,212,.62)}
.mahkeme.done .mahopt:not(.picked) .mkbar{background:rgba(247,235,212,.22)}
/* Oy verildi ama karar açıklanmadı: düğmeler kilitli, seçilen taraf belli,
   yüzde YOK. Mahkeme hükmünü sonda veriyor — serilerde "yüzdeler oyun bitince
   açılır" kuralının aynısı. .done ile farkı tek satır: .mkv görünmüyor. */
.mahkeme.verdi .mahopt{box-shadow:none;transform:none}
.mahkeme.verdi .mahopt.picked{border-color:var(--ink)}
.mahkeme.verdi .mahopt.picked .mkvur{background:rgba(23,33,59,.12);
  box-shadow:inset 0 0 0 2px rgba(23,33,59,.34)}
.mahkeme.verdi .mahopt:not(.picked){background:transparent;border-color:rgba(247,235,212,.22);
  color:var(--brand-cream)}
.mahkeme.verdi .mahopt:not(.picked) .mkalt{color:rgba(247,235,212,.64)}
.mahkeme.verdi .mahopt:not(.picked) .mkvur{display:none}
.mahfoot{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;min-height:30px;
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(247,235,212,.15);
  font-size:12.5px;color:rgba(247,235,212,.62)}
.mahfsag{display:flex;align-items:center;gap:18px;margin-left:auto}
.mahfoot b{color:var(--brand-cream);font-weight:600}
.mahfoot .shbtn{background:var(--brand-cream);color:var(--ink)}
/* Satır yüksekliğini kim belirliyor? Önce görsel belirliyordu: img'nin doğal
   oranı (0,80) 186px genişlikte 233px yükseklik istiyor, metin ise 193px'te
   bitiyordu — aradaki 40-79px kutunun altında delik olarak kalıyordu. Artık
   ters: img mutlak konumlanıp kutuyu doldurduğu için kutunun boyuna hiç
   karışmıyor, satırın boyunu metin belirliyor, görsel o boya kırpılıyor.
   Metin ölçüsüne dokunulmuyor: başlık iki satır, gerekçe sütuna yayılı.
   Kırpım 14% yerine 8%: dar kutuda yüz ortada kalsın, çene kesilmesin. */
@media (min-width:881px){
  .mahgor{min-height:0}
  .mahgor img{position:absolute;inset:0;object-position:50% 8%}
}
@media (max-width:1040px){
  .mahgrid{grid-template-columns:150px minmax(0,1fr);gap:20px}
}
@media (max-width:880px){
  .mahkeme{padding:22px}
  .mahgrid{grid-template-columns:1fr;gap:18px;margin-top:16px}
  .mahgor{grid-row:auto;grid-column:auto}
  .mahdosya{grid-column:auto;grid-row:auto}
  .mahgrid > .mahkarar{grid-column:auto;grid-row:auto;margin-top:0}
  /* Dikey karo telefonda ekranı yiyor: yatay bir şeride dönüşüyor. */
  .mahgor{aspect-ratio:1/1;min-height:0}
  .mahopts{grid-template-columns:1fr;gap:11px}
  .mahkarar{margin-top:18px;padding-top:18px}
  .mahger{max-width:none}
  .mahust .mahamblem{width:32px;height:32px}
  /* Dar ekranda mahkemenin adı kendi satırını alıyor; ardındaki ayraç da
     satır sonunda öksüz kalmasın diye kapanıyor. İki künye satırı birbirine
     yakın duruyor — amblemin kapsadığı blok onlardan ibaret. */
  .mahkunye .mahad{flex-basis:100%}
  .mahkunye .sep.s1{display:none}
  .mahkunye{row-gap:3px}
  /* Sayaç etiketi tek satırda: yeri var ama esnek kutuda daralıp bölünüyordu. */
  .msetiket{letter-spacing:.09em;flex:none;white-space:nowrap}
  /* Sayaç tam genişlikte kendi satırında: amblemin altından başlıyor. */
  .mahsaat{margin-left:0;flex-basis:100%;justify-content:space-between;margin-top:4px}
  .mahust .mahsure.bitti{margin-left:0;flex-basis:100%;margin-top:4px}
  /* Dar ekranda sağ grup kendi satırını alıyor: solda bağlantı, sağda paylaş.
     Mahkeme sayfasının kendisinde bağlantı olmadığı için space-between tek
     çocuğu sola yapıştırıyordu; paylaş kendi payıyla sağ uçta kalıyor. */
  /* Tek çocuklu grup (mahkeme sayfası: yalnız paylaş) katılım sayısının tam
     karşısında, aynı satırda. */
  .mahfsag{margin-left:auto;justify-content:flex-end;gap:14px}
  /* İki çocuklu grup (ana sayfa: bağlantı + paylaş) kendi satırını alıyor ve
     iki uca yayılıyor: bağlantı solda sayının altına hizalanıyor, paylaş
     sağda. Eskiden ikisi birlikte sağa yığılıyordu ve sağ üst köşede
     düzensiz bir küme oluşturuyordu. */
  .mahfsag.ikili{width:100%;margin-left:0;justify-content:space-between;margin-top:2px}
  .mahfoot{min-height:38px}
}

/* ---------- kategori şeridi ---------- */
.cchip{display:flex;align-items:center;gap:9px;border:none;border-radius:13px;padding:9px 16px 9px 10px;
  cursor:pointer;font-family:var(--nav);font-weight:600;font-size:17px;letter-spacing:.02em;text-transform:uppercase;
  text-align:left;white-space:nowrap;flex:1 0 auto;position:relative;overflow:hidden;
  box-shadow:var(--shadow-s);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease}
.cchip::before{content:"";position:absolute;right:-26%;top:-46%;width:70%;height:150%;
  background:rgba(0,0,0,.16);transform:rotate(24deg)}
/* Kategori adı kendi <span>'inde: çıplak metin düğümü ">*" seçicisine
   girmediği için köşedeki koyu katmanın altında kalıyordu ve "& İÇ"in üstünden
   geçiyordu. Artık ikon gibi o da katmanın üstünde. */
.cchip > *{position:relative;z-index:2}
.cchip .cad{display:inline-block}
/* Tek hareket: bütün kutu yukarı kalkar. Kırpılmaması için satıra dikey pay verildi. */
.cchip:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.cchip:active{transform:translateY(-1px);box-shadow:var(--shadow-m)}
/* İkonlar viewBox içinde %86 doluluğa eşitlendi (bkz. ikon/olcek.py); düğme
   içindeki ölçü de bir tık indi, yazıyla dengeli dursun. */
.cchip .ic{width:26px;height:26px;flex:none;display:block}
/* Seçili kategori kendi rengiyle işaretleniyor: krem boşluk + aynı renkten halka.
   Siyah halka sitenin dilinde yok; seçilmeyenleri soldurmak da onları devre dışı
   gibi gösteriyordu — oysa hepsi tıklanabilir. */
.cchip[aria-current="true"]{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--kend,var(--ink)),var(--shadow-m)}

/* ---------- bölümler ---------- */
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.sec{padding:34px 0}
/* ANA SAYFA SIRASI TEK YERDEN (1 Ekim 2026). Eskiden sıra HTML'den geliyordu
   ve yalnızca telefonda flex order ile değiştiriliyordu — iki sıra, iki yer.
   Artık her ekranda aynı: order burada, HTML'deki fiziksel sıra önemsiz.
   Sıra Cansu'nun kararı: banner → mahkeme → ikilem → sana özel → profil →
   popüler → yayıncı → reklam → sen de ekle. */
#view-home{display:flex;flex-direction:column}
#view-home > .herorow{order:1}
#view-home > #secKarar{order:2}
#view-home > #secMahkeme{order:3}
#view-home > #secIkilem{order:4}
#view-home > #secOzel{order:5}
#view-home > #secProfil{order:6}
#view-home > #secPopuler{order:7}
#view-home > #secYayinci{order:8}
#view-home > #secReklam{order:9}
#view-home > #sugSec{order:10}
/* Telefonda modüller arası 68 px fazla geliyordu; 44 px'e indi.
   Footer'ın üst payı da 56'dan 30'a — son içerikle footer arası 90 -> 52 px. */
@media (max-width:820px){
  .sec{padding:22px 0}
  /* body seçicisi şart: .sitefoot temel kuralı bu bloktan sonra tanımlı. */
  body .sitefoot{margin-top:30px}
}
/* Yan öğeler başlığa göre dikeyde ortalı. flex-end tabanla hizalıyordu ama
   başlığın alt boşluğu yüzünden küçük öğeler optik olarak aşağıda kalıyordu. */
.sechead{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}

/* ---------- site içi arama ---------- */
/* Listedeki kutu "gördüğüm listede daralt" demek; buradaki "sitede ara".
   İkisi farklı iş yaptığı için ikisi de duruyor. */
/* .searchbox'ın margin-left:auto'sunu iptal ediyor: liste başlığında kutu
   sağa yaslı duruyor, burada sayfanın kendi kutusu, solda ve geniş. */
/* Boydan boya: 560px'lik sınır kaldırıldı. Arama sayfasında kutu sayfanın
   kendisi; dar durduğunda sağında açıklanamayan bir boşluk kalıyordu. */
.searchbox.arakutu{margin:0 0 10px 0;width:100%;max-width:none;padding:11px 18px}
.searchbox.arakutu input[type="text"]{font-size:16px}
.arayardim{font-size:13.5px;color:var(--ink-3);margin:0 0 4px}
.aragrup{margin-top:28px}
.aragrup > h2{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:0 0 11px}
.aragrup > h2 b{color:var(--ink-2);font-weight:600}
.arasatir{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:13px 16px;margin-bottom:9px;
  transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s,border-color .14s}
.arasatir:hover{transform:translateY(-2px);box-shadow:var(--shadow-s);border-color:var(--ink)}
.arasatir .arayazi{min-width:0;flex:1}
.arasatir .ad{display:block;font-weight:700;font-size:15.5px;line-height:1.25;color:var(--ink)}
.arasatir .alt{display:block;font-size:13px;line-height:1.4;color:var(--ink-2);margin-top:3px}
/* Kategori rozeti: satırın hangi damara ait olduğunu renkle söylüyor. */
.arasatir .arakat{flex:none;font-family:var(--nav);font-weight:700;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--ak,var(--brand));
  border-radius:999px;padding:4px 10px 5px}
.arasatir .araok{flex:none;color:var(--ink-3);font-size:15px}
.arasatir:hover .araok{color:var(--ink)}
@media (max-width:520px){
  .arasatir{gap:10px;padding:12px 13px}
  .arasatir .arakat{font-size:10px;padding:3px 8px 4px}
}
/* Dar ekranda başlık ve yanındaki tek buton aynı satırda ve dikeyde ortalı kalıyor.
   Önceden 1px yer yetmediği için buton alt satıra düşüyordu; başlık artık daralabiliyor.
   Arama kutusu gibi geniş öğelerin olduğu başlıklar eskisi gibi alt satıra sarıyor. */
@media (max-width:620px){
  .sechead:has(> .btn:last-child){flex-wrap:nowrap;align-items:center;gap:12px}
  .sechead:has(> .btn:last-child) h2{min-width:0}
  .sechead:has(> .btn:last-child) > .btn{flex:none}
}
.sechead h2{font-size:clamp(26px,3.6vw,40px)}
.sechead .note{font-size:13px;color:var(--ink-3);margin-left:auto;font-family:var(--body)}

/* ---------- duel (oyun içi) ---------- */
.duel{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
.opt{position:relative;border-radius:20px;border:3px solid transparent;padding:26px 24px;min-height:176px;
  cursor:pointer;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden;
  box-shadow:var(--shadow-s);transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s}
.opt::before{content:"";position:absolute;right:-30%;top:-40%;width:120%;height:120%;background:rgba(0,0,0,.11);transform:rotate(26deg)}
.opt > *{position:relative;z-index:2}
.opt > .stamp{position:absolute;z-index:5}
.optA{background:var(--cat);color:var(--cat-on)}
.optB{background:var(--cat-hl);color:var(--hl-on)}
.opt:hover:not(:disabled){transform:translateY(-6px);box-shadow:var(--shadow-l)}
.opt:disabled{cursor:default}
.opt .kicker{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.68}
.opt .name{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;font-size:clamp(22px,3.3vw,34px);line-height:1}
.optA .bar{background:var(--cat-hl)}.optB .bar{background:var(--hl-on)}
.vs{display:flex;align-items:center;justify-content:center;width:60px}
.pct{display:none;gap:10px;align-items:center}
.revealed .pct{display:flex}
.pctnum{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;min-width:44px}
.track{flex:1;height:10px;border-radius:999px;background:rgba(0,0,0,.24);overflow:hidden}
.optB .track{background:rgba(0,0,0,.14)}
.bar{height:100%;width:0;border-radius:999px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.opt.picked{border-color:currentColor}

/* ---------- butonlar ---------- */
.btn{border:2px solid var(--ink);background:var(--surface);color:var(--ink);border-radius:999px;padding:12px 24px;
  cursor:pointer;font-family:var(--nav);font-weight:600;font-size:15.5px;text-transform:uppercase;letter-spacing:.04em;
  transition:transform .14s,box-shadow .14s,background .14s,color .14s;box-shadow:var(--shadow-s)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.btn.prime{background:var(--cat);border-color:var(--cat);color:var(--cat-on)}
.btn.hl{background:var(--cat-hl);border-color:var(--cat-hl);color:var(--hl-on)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn.sm{padding:9px 17px;font-size:13px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Oyun kurulumu: çipler ve iki mod butonu tek blok. Aralarında metin satırı yok,
   her öğe kendi karşılığını kendi içinde söylüyor. */
.modrow{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
/* Buton iki satır: üstte emir, altında o modun tek kuralı. İnce ayraç ikisini
   ayırıyor — açıklama butonun dışındayken hangi cümlenin hangi butona ait
   olduğu okunmuyordu. */
/* justify-content:center — "Seçmeye Başla" tek satıra inince yazı düğmenin
   üstüne yapışıyordu; komşusu iki satırlı olduğu için ikisi aynı boyda
   (stretch) ve tek satır ortada durmalı. */
.modbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:11px 22px 12px;line-height:1.1;min-width:190px}
/* .mb1 artık ikon taşıyor, bu yüzden satır. Dikey hizalama baseline değil
   center: kupa ve yayın dalgası farklı yükseklikte çizimler, baseline'da
   biri yazıdan yukarı kaçıyordu. */
.modbtn .mb1{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15.5px;letter-spacing:.04em}
/* flex:none — esneyen kutuda ikon yazıya yer açmak için eziliyordu. */
.modbtn .mb1 svg{flex:none;width:19px;height:19px}
@media (max-width:620px){.modbtn .mb1{gap:7px}.modbtn .mb1 svg{width:17px;height:17px}}
/* Şeffaflık yok (gerekçe aşağıdaki çip notunda): hiyerarşiyi punto ve ince
   ayraç taşıyor, sönükleştirmek kategori zemininde eşiğin altına düşürüyor. */
.modbtn .mb2{font-family:var(--body);font-weight:500;font-size:11.5px;
  text-transform:none;letter-spacing:0;
  padding-top:6px;border-top:1px solid color-mix(in srgb,currentColor 28%,transparent);
  align-self:stretch;text-align:center}
.modbtn .mb2 strong{font-weight:700}
/* İKİ MOD AYNI GÖRÜNÜR — bu bilinçli. Önce "Düşünme, seç" kategori vurgusuyla,
   sonra markanın limesiyle doluydu; ikisinde de dolu buton, üstündeki seçili
   aday çipiyle aynı dili konuşup "bu mod zaten seçili" gibi okundu. Oysa ikisi
   eşit iki yol, biri varsayılan değil. Dolgu = seçim durumu (yalnızca çipler),
   çerçeveli koyu cam = eylem. Birine vurgu vermek istersen önce çiplerin
   seçili hâliyle çakışıp çakışmadığını ölç.
   Dolgu %25'ti; Gezi sarısının üstünde beyaz 3,65'te, eşiğin altında
   kalıyordu. %40'ta en kötü kategori 5,34, diğerleri 9-17. Satır içi stildeydi,
   buraya alındı ki ölçülebilsin. */
/* Kategori adı bir zamanlar bandın üstünde koyu cam bir rozetti; zemini
   kestirilemeyen bir fotoğrafın üstünde kontrastı ancak öyle sabit
   kalıyordu. Panele inince o soruna gerek kalmadı: beyaz zeminde kart
   pilinin aynısı (.pill), kategori renginde. */
/* İKİSİ DE DOLU VE BİREBİR AYNI. İki denemeyi de gördük: biri renkli biri
   camken buton seçili anahtar gibi okundu; ikisi de camken sayfanın en önemli
   iki nesnesi bantta kayboldu. Çözüm rengi almak değil, "dolu = seçili"
   varsayımını kırmak: dolu olan tek şey artık EYLEM, seçim ise çiplerde
   çerçeveyle anlatılıyor. İki buton aynı olduğu için hangisi varsayılan
   sorusu da doğmuyor. Lime kategoriden bağımsız, banner'daki ana çağrıyla
   aynı çift (#C9F24B + --ink, 12,36 kontrast). */
.modbtn{background:var(--brand-hl);border-color:var(--brand-hl);color:var(--ink)}
/* LİMON YER DEĞİŞTİRMİYOR (7 Ekim, Cansu). Burada bir süre şu kural vardı:
   yarım kayıt varsa asıl eylem devam etmektir, limon "Kaldığın yerden devam
   et" düğmesine geçer, "Seçmeye Başla" çerçeveli hâline düşer. Doğru
   hiyerarşiydi ama bedeli yeşil düğmenin kullanıcıya göre şekil
   değiştirmesiydi — sayfanın en tanıdık nesnesi, kaydı olanla olmayanda
   başka görünüyordu. Yeni kural: limon her senaryoda "Seçmeye Başla"da,
   Sürdür çerçeveli (aşağıda .surdur). Hiyerarşiyi artık renk değil sıra
   taşıyor: kayıt varken Sürdür soldaki ilk düğme. */
.modbtn .mb2{border-top-color:rgba(23,33,59,.28)}
.modbtn:hover{background:#D7F76E;border-color:#D7F76E}
/* Yayin dugmesi ayni kaliptaki IKINCI TUR eylem, ikinci oyun modu degil.
   Yukaridaki "ikisi de dolu ve birebir ayni" notu iki esit moda aitti; artik
   esit degiller, hiyerarsi dogru. Cam govde denemesi o notta kapakli bantta
   kayboluyordu diye elenmisti — bu yuzden cam degil, .katrozet'in kanitlanmis
   koyu saydam zemini kullaniliyor: hem duz renkli hem kapakli bantta okunuyor. */
.modbtn.yayin{background:rgba(0,0,0,.42);border-color:rgba(255,243,220,.3);color:#FFF3DC}
.modbtn.yayin .mb2{border-top-color:rgba(255,243,220,.3)}
.modbtn.yayin:hover{background:rgba(0,0,0,.56);border-color:rgba(255,243,220,.5)}
/* Telefonda butonlar eskiden tam genişlikti: 390px'te 286px'lik bir çubuk,
   içindeki iki kısa satır için fazla uzundu. Yan yana 430px'e kadar sığıyor
   (en uzun etiket "DÜŞÜNME, SEÇ" 125px, kutuya 187px düşüyor); altında alt
   alta ama içeriğe göre daralmış ve ortalanmış duruyorlar. */
@media (max-width:430px){
  .modrow{flex-direction:column;align-items:center;width:100%}
  .modbtn{width:auto;min-width:215px}
}

/* Aday sayısı: havuz 32 ve üstündeyse çıkıyor. Etiket satırı yok — her çip
   "64 aday" ve altında ne kadar süreceğini kendisi yazıyor. Küçük boy seçmek
   havuzu rastgele budamıyor; seedBracket seviyeye göre sıraladığı için
   "en iyi 16" demek oluyor. */
/* Yan pay 15 -> 12, aralık 8 -> 7 (7 Ekim, Cansu: "çok az daralt"). Birim
   kısaltmasıyla (dk./sn.) birlikte dört çipli satır ~110 piksel daraldı;
   sağdaki üç düğmenin tek satırda kalması buna bağlı. */
.boychips{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.boychips[hidden]{display:none}
.boychip{display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--nav);font-weight:600;font-size:13.5px;line-height:1;
  text-transform:uppercase;letter-spacing:.03em;
  padding:9px 12px 10px;border-radius:14px;cursor:pointer;
  border:1.6px solid color-mix(in srgb,currentColor 40%,transparent);
  background:none;color:inherit;transition:.14s}
/* Küçük metne opacity verilmiyor: kategori zemininde --cat-on zaten tam tamına
   yetiyor (en dar Yeme İçme 4,50) ve %90 şeffaflık onu 3,92'ye düşürüyor. */
/* Tek çip (özel seri): seçenek yok, bilgi var. Sönükleştirmiyoruz — disabled
   görünümü "tıklayamazsın" der, oysa burada söylenen şey "oynanacak boy bu". */
.boychip.tek{cursor:default;opacity:1}
.boychip small{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:10px;
  letter-spacing:.02em;text-transform:none}
.boychip:hover{border-color:currentColor}
/* 390px'te üç çip tek satıra sığmıyordu (gereken 320px, iç genişlik 286px) ve
   2+1 kırılıyordu. Dar ekranda punto ve yan pay daralıyor, satır bozulmuyor. */
@media (max-width:430px){
  .boychip{font-size:12px;padding:8px 11px 9px;letter-spacing:.01em}
  .boychip small{font-size:9.5px}
  .boychips{gap:6px}
}
/* Eski dar telefonlar (SE, 320-375px): bir kademe daha. */
@media (max-width:375px){
  .boychip{font-size:11px;padding:8px 9px 9px}
  .boychip small{font-size:9px}
  .boychips{gap:5px}
}
/* Seçili çipin DOLGUSU yok: dolgu bu bantta "eylem" demek (mod butonları).
   Seçim çerçeveyle anlatılıyor — ince ve soluk kenarlık, seçilince kalın, tam
   renkli ve dışında bir halka. Çipler zaten üçlü bir grup; grup içinde tek
   vurgulanmış öğe "seçili" diye okunuyor, dolguya gerek kalmıyor. */
.boychip[aria-pressed="true"]{border-color:currentColor;border-width:2px;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}


/* ---------- seri paneli (detay sayfası) ----------
   Kapağın altındaki tek kart: kategori, favori/paylaş, aday seçici, iki eylem
   ve künye. Satırlar ince çizgiyle ayrılıyor, ritim tek bir sayıdan geliyor. */
.sahnepanel{margin-top:16px;background:var(--surface);border-radius:var(--r);
  box-shadow:var(--shadow-m);padding:20px 26px 24px;display:flex;flex-direction:column}
.sprow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sprow+.sprow{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.sprow[hidden]{display:none}
.spust{gap:10px}
/* Kategori pili tıklanabilir bir düğme: "Etiket" başlığının altında duran her
   şey bir çıkış kapısı. Görünümü .pill'den geliyor, düğme sıfırlamaları burada. */
.sppil{flex:none;border:0;cursor:pointer;line-height:1.5;
  transition:filter .14s,transform .14s}
.sppil:hover{filter:brightness(1.08);transform:translateY(-1px)}
.sppil:focus-visible{outline:3px solid var(--brand-hl);outline-offset:2px}
.sppil[hidden]{display:none}
/* Etiketler pilin yanında ve bilerek sessiz: bunlar sayfanın işi değil,
   çıkış kapısı. Çerçevesiz, küçük, krem zeminde — üzerine gelince markanın
   limesine dönüyorlar ki tıklanabilir oldukları anlaşılsın. */
.sptags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.sptags:empty{display:none}
.sptag{border:0;background:var(--paper-2);color:var(--ink-3);cursor:pointer;
  border-radius:999px;padding:4px 11px;font-family:var(--nav);font-weight:600;
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.5;transition:background .14s,color .14s}
.sptag:hover{background:var(--brand-hl);color:var(--ink)}
.sptag:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Kurulum satırı: solda "kaç adayla" sorusu ve çipleri, sağda iki eylem.
   Dar ekranda ikisi alt alta geçiyor, space-between kendiliğinden bırakıyor. */
.spkur{justify-content:space-between;gap:18px 24px}
.spboy{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
.spboy[hidden]{display:none}
.spboy .boychips{justify-content:flex-start}
.sahnepanel .modrow{justify-content:flex-start;margin-left:auto}
/* Baştan başla bağlantısı: çip satırının devamı, ayrı bir blok değil.
   AYRAÇ NOKTASI YOK. Önce ::before ile "·" konmuştu; satır sardığında
   (telefonda her zaman, masaüstünde dört çipli seride) nokta satır başına
   düşüp başıboş kalıyordu. Çipler zaten çerçeveli kutu, bağlantı ise altı
   çizili düz yazı — ayrım biçimden geliyor, ayraca gerek yok. */
/* margin-right:auto ŞART. .spkur space-between ve üç çocuk var
   (çipler | bağlantı | düğmeler); otomatik boşluk olmadan bağlantı ortaya
   savruluyor ve hangi gruba ait olduğu anlaşılmıyordu. Sağındaki boşluğu
   kendisi yutunca çiplere yapışıyor, düğmeler yine sağ uçta kalıyor. */
.spsol{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
/* SÜRDÜR: komşuları dolu, bu çerçeveli — dolgu bu panelde "seçili" demek
   (çipler) ve limon tek bir şeye ayrılmış durumda (bkz. yukarı). min-width
   yok: 190px'lik taban ölçü satırı dört öğeyle taşırıyordu, bu düğme
   içeriği kadar yer tutuyor ("Sürdür" + ikon üst satırda, asıl genişliği
   alt satırdaki cümle veriyor, ~186px). */
.sahnepanel .modbtn.surdur{background:transparent;border-color:var(--line);
  color:var(--ink-2);box-shadow:none;min-width:0;padding-left:18px;padding-right:18px}
.sahnepanel .modbtn.surdur:hover{border-color:var(--ink);color:var(--ink)}
.modbtn.surdur[hidden]{display:none}

/* Sakin satır. Sayı gerçek veri gelene kadar seri verisinden geliyor;
   karttaki "oynadı" ile aynı kaynak, aynı ikon. */
.spalt{justify-content:space-between}
.spistat{display:inline-flex;align-items:center;gap:8px;min-width:0;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-3)}
.spistat:empty{display:none}
.spistat b{font-weight:600;color:var(--ink-2)}
.spistat .kic{flex:none;width:15px;height:15px}
.spikon{display:flex;align-items:center;gap:8px;margin-left:auto}
.spikon:empty{display:none}
/* Künye artık panelin son satırı DEĞİL, panelin altındaki dipnot. Kart
   içindeyken kendi üst çizgisi ve açılır listesiyle etiket/paylaş satırlarıyla
   aynı ağırlıkta okunuyordu. Şimdi tek satır: ikon + ad, kaynağın kendisi
   üstüne gelince (dokunmatikte tıklayınca) açılan balonda. */
#sceneKunye{margin-top:10px;padding-left:2px}
#sceneKunye:empty{display:none}
.mmk{position:relative;display:inline-block}
.mmkbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:4px 2px;
  cursor:help;font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.02em;
  color:var(--ink-3);text-decoration:underline dotted;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--ink-3) 45%,transparent)}
.mmkbtn:hover,.mmkbtn:focus-visible{color:var(--brand)}
.mmkbtn svg{width:14px;height:14px;flex:none}
/* Balon aşağı açılıyor: yukarı açılsa panelin alt satırını (favori, paylaş)
   kapatıyordu. Uzun künyede kendi içinde kayıyor — fare balonun üstünde
   kaldığı sürece açık, çünkü .mmk'nin içinde. */
.mmktip{position:absolute;left:0;top:calc(100% + 8px);z-index:40;
  /* Tavan ekranın tamamından değil, balonun SOLUNDA kalan paydan hesaplanıyor:
     balon sayfanın sol payından başlıyor (telefonda 32px), 100vw-36 dersen o
     payı iki kez saymış olup sağdan 4px kalıyordu. */
  width:max-content;max-width:min(420px,calc(100vw - 64px));
  max-height:min(300px,46vh);overflow:auto;
  /* KOYU ZEMİN, bilerek. Beyaz balon kartların arasında bir kart gibi
     okunuyordu — telefonda balonun alt kenarı arşiv kutusunun üst kenarına
     yapışıyor ve ikisi tek blok sanılıyordu. Koyu zemin balonu geçici bir
     katman yapıyor; krem metin #17213B üzerinde ~12:1. */
  background:var(--ink);color:var(--brand-cream);border:0;
  border-radius:12px;box-shadow:var(--shadow-l);padding:12px 14px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;line-height:1.55;
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s}
.mmk:hover .mmktip,.mmk:focus-within .mmktip,.mmk.ac .mmktip{opacity:1;visibility:visible;transform:none}
.mmktip p{margin:0}
.mmktip ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mmktip li{line-height:1.5}
.mmktip b{font-weight:600;color:#FFF}
.mmktip a{color:var(--brand-hl);text-decoration:underline;text-underline-offset:2px}

/* Çipler artık fotoğrafın değil beyazın üstünde: currentColor'a dayalı soluk
   çerçeve burada görünmüyordu. Seçili çip kategorinin rengini alıyor — kapak
   sadeleşince kategori sinyalini sayfada taşıyan ikinci yer burası. */
.sahnepanel .boychip{border-color:var(--line);color:var(--ink-2);background:var(--surface)}
.sahnepanel .boychip:hover{border-color:var(--ink-3);color:var(--ink)}
.sahnepanel .boychip small{color:var(--ink-3)}
.sahnepanel .boychip[aria-pressed="true"]{border-color:var(--cat);color:var(--cat-ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cat) 18%,transparent)}
/* Yayın düğmesi Teknoloji damarının rengini alıyor (#2B303A — CATS.Teknoloji
   .ana). Serinin kendi kategorisinden bağımsız, çünkü yayın modu bir içerik
   değil bir araç; hep aynı renkte duruyor.
   Kontrast ölçüldü: beyaz yazı #2B303A üstünde 13,4:1, alt satırın %88'lik
   kremi 10,4:1 — ikisi de AAA eşiğinin (7:1) üstünde.
   Lime ana eylem olduğu gibi kalıyor; iki dolu düğme yan yana ama biri parlak
   biri koyu, hangisinin ana yol olduğu bir bakışta okunuyor. */
.sahnepanel .modbtn.yayin{background:#2B303A;border-color:#2B303A;color:#FFFFFF}
.sahnepanel .modbtn.yayin .mb2{border-top-color:rgba(255,255,255,.3);color:rgba(255,243,220,.88)}
.sahnepanel .modbtn.yayin:hover{background:#3A4150;border-color:#3A4150;color:#FFFFFF}

@media (max-width:900px){
  /* Kurulum satırı kırılınca eylemler sola hizalanmalı; margin-left:auto
     onları kendi satırının sağ ucuna itip sorudan kopartıyordu. */
  .sahnepanel .modrow{margin-left:0;gap:10px}
  .spkur{align-items:flex-start}
  /* Üçüncü düğme (Sürdür) gelince 768 pikselde toplam 663px gerekiyor ama
     panelin içi 656px: satır 2+1 kırılıyor ve tek başına kalan düğme
     yanlış bir hiyerarşi gösteriyordu. Taban ölçü ve yan paylar bu bantta
     kırpılıyor, etiketler aynı kalıyor — telefonda (≤560px) düğmeler
     zaten alt alta. */
  .sahnepanel .modrow .modbtn{min-width:0;padding-left:16px;padding-right:16px}
}
/* ÜÇ DÜĞME ALT ALTA 700 PİKSELDEN İTİBAREN (eskiden 560'tı). Üçü yan yana
   630 piksel istiyor, 700'de panelin içi 588: biri tek başına alt satıra
   düşüyor ve yan yana durmayan o düğme "farklı bir şey" gibi okunuyordu.
   Üçü de alt alta olunca dikeydeki sıra DOM sırası oluyor ve o sıra doğru:
   Sürdür → Seçmeye Başla → Yayın Moduna Geç. 560'ta sadece iki düğme vardı
   ve o eşik onlara göreydi. */
@media (max-width:700px){
  .sahnepanel .modrow{flex-direction:column;align-items:stretch;width:100%;gap:10px}
  .sahnepanel .modrow .modbtn{width:100%;min-width:0}
  /* Sıra kuralı (order) kalktı: DOM sırası artık dikeyde de doğru. Bu düğme
     "Baştan başla"yken en sona iniyordu, çünkü ilk düğme en güçlü vaat
     olmalı ve o değildi; "Sürdür" ise kayıt varken tam olarak o. */
}
@media (max-width:560px){
  .sahnepanel{padding:18px 18px 20px}
  .spboy{flex-direction:column;align-items:flex-start;gap:10px;width:100%}
}

/* ---------- seri kartları ---------- */
.tcard .cgo{display:block;margin-top:12px;font-family:var(--nav);font-weight:600;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase}
.tcard:hover .cgo{text-decoration:underline;text-underline-offset:3px}
.draft{display:inline-flex;align-items:center;align-self:flex-start;margin-bottom:8px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#7A4A00;background:#FFE9B8;border-radius:999px;padding:4px 9px}
.draft.light{margin:0 0 0 8px;background:rgba(255,255,255,.22);color:#fff;vertical-align:middle}
.tcard .cmeta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 13px;margin-top:6px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.03em;color:var(--ink-3)}
.cmeta .kbit{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
/* Oynanma kendi satırında ve bir tık koyu: kanıt olan o, üstelik üçü yan yana
   dar karta sığmıyordu (ölçülen 311px, kart 248px). */
.cmeta .kbit.koy{flex-basis:100%;color:var(--ink-2);font-weight:600}
.cmeta .kic{width:13px;height:13px;flex:none;display:block;opacity:.8}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px}
#homeGrid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1020px){#homeGrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){#homeGrid{grid-template-columns:1fr}}
/* Kartın kapsayıcısı: kart ile paylaş düğmesi kardeş duruyor (gerekçe cardHTML'de).
   Kaldırma efekti artık kapsayıcıda, yoksa kart yukarı kalkarken üstündeki paylaş
   yerinde kalıyor ve ikisi birbirinden ayrılıyordu. */
.tcwrap{position:relative;display:flex;
  transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.tcwrap:hover{transform:translateY(-6px)}
.tcwrap > .tcard{flex:1;min-width:0}
.tcard{border:none;border-radius:20px;background:var(--surface);display:flex;flex-direction:column;text-align:left;
  cursor:pointer;padding:0;overflow:hidden;box-shadow:var(--shadow-m);color:var(--ink);
  transition:box-shadow .18s}
.tcwrap:hover .tcard{box-shadow:var(--shadow-l)}
/* Paylaş "Seriye Başla"nın tam karşısında; kartlardaki kuralın aynısı. */
/* Dikey hiza kutuya göre değil MÜREKKEBE göre ayarlandı. Kutunun ortası tutsa
   bile göz harfleri ortalar; ayrıca "SERİYE BAŞLA"nın mürekkep sınırı İ noktası
   ve Ş çengeliyle şişiyor, o yüzden ölçü büyük harf bandının merkezi.
   Değerler taranarak bulundu. Tarayıcı daireyi cihaz pikseline yapıştırıyor ve
   yapışma yönü kartın piksel ızgarasında nereye düştüğüne, yani ekran genişliğine
   göre değişiyor — bu yüzden tek bir değer her genişlikte sıfır vermiyor. Ölçüt
   "en kötü genişlikteki sapma": 700/820/1024/1280/1440'ta 10,6 → 0,41px ile en iyisi
   (10,8 bir genişlikte 0,55'e, 10,4 0,61'e çıkıyor). Telefonda düğme 38px olduğu
   için ayrı tarandı: 390/480/560/620'de 7,0 → her yerde 0,50px, tabanı o.
   Kalan sapma Retina'da bir pikselin altında. Ölçümü yenilemeden değiştirme. */
.tcsh{position:absolute;right:16px;bottom:10.6px;z-index:3}
@media (max-width:620px){.tcsh{bottom:7px}}
/* Favori kalbi paylaşın solunda, aynı alt satırda. Boyu ve dikey hizası
   paylaşla birebir aynı — .tcsh'nin taranarak bulunmuş bottom değerlerini
   aynen kullanıyor, yoksa iki daire yarım piksel kayık duruyor.
   Daire iki durumda da aynı: değişen yalnızca kalbin içi. Dolu durumda
   zemini kırmızıya çevirmek, paylaş dairesi zaten kırmızı olan kategoride
   (Yeme İçme) iki kırmızı daire yan yana demekti. */
.tcfav{position:absolute;right:54px;bottom:10.6px;z-index:3}
@media (max-width:620px){.tcfav{right:62px;bottom:7px}}
/* Favori de aynı ailede: mürekkep hep mor, "kaydedildi" sinyalini lime
   veriyor. Kırmızı kalp denendi ve bırakıldı — palette olmayan sekizinci bir
   renk getiriyordu, üstelik Yeme İçme kategorisinde paylaş dairesiyle
   çakışıyordu. Kontrast: mor #6C2BD9 lime üstünde 5,46:1, krem üstünde
   5,6:1 — ikisi de arayüz ögesi eşiğinin (3:1) çok üstünde. */
.favbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--paper-2);color:var(--brand);
  transition:background .16s,color .16s,transform .14s cubic-bezier(.2,.8,.2,1)}
.favbtn svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Üzerine gelince açık durum önizleniyor: tıklayınca ne olacağını söylüyor. */
.favbtn:hover{transform:translateY(-2px);background:var(--brand-hl)}
.favbtn.on{background:var(--brand-hl)}
.favbtn.on svg{fill:currentColor}
.favbtn:focus-visible{outline:3px solid var(--brand-hl);outline-offset:2px}
/* Ekleme anında tek sıçrama: dolu/boş farkı renkle zaten okunuyor, animasyon
   yalnızca "kaydedildi" geri bildirimini gözün kaçırmaması için. */
@keyframes favPop{0%{transform:scale(1)}42%{transform:scale(1.26)}100%{transform:scale(1)}}
.favbtn.on.atti{animation:favPop .34s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){
  .favbtn,.favbtn.on.atti{transition:none;animation:none}
}
@media (max-width:620px){
  .favbtn{width:38px;height:38px}
  .favbtn svg{width:18px;height:18px}
}
/* Yarım kalan kartında da ikili: kalp + paylaş, alt eylem satırının sağ
   ucunda, seri kartındaki sırayla ve aralıkla. */
.dvsag{margin-left:auto;display:flex;align-items:center;gap:8px}
/* Son satırda sağda iki düğmeye yer ayrılı: paylaş + favori. */
.tcard .cgo{padding-right:84px}
@media (max-width:620px){.tcard .cgo{padding-right:100px}}
/* Kapak oranı her ekranda aynı. Eskiden yükseklik 140px'e çivilenmişti ve
   genişlik sütun sayısıyla değiştiği için oran ekrana göre kayıyordu: 1440'ta
   1,96, tablette 2,69, tek sütuna düşen 430-635px bandında 4,00 — yani
   görselin yarısı kırpılan bir şerit. Artık oran sabit, yükseklik genişlikten
   geliyor. 274/140 masaüstündeki ölçünün kendisi, o yüzden 1440 ve 1280'de
   tek piksel oynamıyor; değişen yalnızca 1024 ve altı.
   Bedeli kartın uzaması: telefonda +29px (%9), tablette %16, 620px bandında
   %47 — orada zaten işe yaramayan bir bant yerine görsel geliyor.
   Çözünürlük kaybı yok: en büyük kutu 560 CSS piksel, 3x ekranda 1680 —
   kaynaklar ~1900 geniş. */
.tcard .thumb,.devamcard .thumb{aspect-ratio:274/140;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;padding:16px 18px}
.tcard .thumb::before,.devamcard .thumb::before{content:"";position:absolute;
  right:-30%;top:-40%;width:120%;height:120%;background:rgba(0,0,0,.14);transform:rotate(26deg)}
/* Kapaklı kart: başlık görselin üstünde tekrar etmiyor (gövdede zaten var),
   ızgaradaki kategori rengi ise alttaki ince şeritten okunuyor — renk kodu
   kapaklarla birlikte kaybolmasın diye. */
.tcard .thumb.kapakli,.devamcard .thumb.kapakli{background-size:cover!important;
  background-position:center!important;border-bottom:4px solid var(--kat,transparent)}
.tcard .thumb.kapakli::before,.devamcard .thumb.kapakli::before{right:0;top:0;
  width:100%;height:100%;transform:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.28) 100%)}
/* Seri sayfası bandı: karartma olmadan başlık okunmuyor. */
#sceneBig.kapakli{background-size:cover!important;background-position:center;
  position:relative;border-radius:var(--r);overflow:hidden}
/* Perde üç duraklı: üstte hafif, YAZININ OLDUĞU ORTA BANTTA en koyu, altta
   yine koyu. Eski iki duraklı geçişte ortası .55 civarındaydı ve parlak bir
   fotoğrafta alt metin zayıf kalıyordu; gölgeyi oraya yama olarak koymuştuk.
   Ortayı .66'ya çekince gölgeye gerek kalmadı. */
#sceneBig.kapakli::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.66) 48%,rgba(0,0,0,.74) 100%)}
#sceneBig.kapakli > *{position:relative;z-index:1}
/* Kapaklı bantta yazı rengi kategoriden değil perdeden geliyor. Kültür'ün
   krem tonu koyu perdede okunuyordu ama Gezi'nin laciverti okunmuyor —
   çünkü o renkler kendi açık sarı zemini için seçilmiş. İkinci satır
   kategorinin tonunu koruyor, sadece kreme doğru açılıyor. */
/* KATEGORİ RENGİ KAPAKLI BANTTA DA GÖRÜNÜYOR.
   Eskiden ilk satır sabit #FFF3DC, ikinci satır --cat-hl-txt'nin yalnızca
   %32'siydi; yani yedi kategoride de pratikte aynı krem çıkıyordu. Gerekçe
   geçerliydi (kategori vurgu renkleri kendi AÇIK zeminleri için seçilmiş;
   Gezi'nin #074C5F'si koyu perdede okunmuyor) ama çözüm yanlıştı: doğru
   token zaten vardı — `tebesir`, kategorinin KOYU zeminde okunan tonu, yedi
   kategoride de #17213B üzerinde en az 6:1. İlk satır krem kalıyor (en büyük
   okuma yükü onda), ikinci satır artık tam tebesir.
   GÖLGE KALKTI. Yerine perdenin kendisi güçlendi (aşağıdaki ::after) — yazıya
   bulanık bir hale eklemek yerine arkasını karartmak hem daha temiz hem daha
   güvenilir: gölge parlak bir fotoğrafta da zayıf kalıyordu. */
#sceneBig.kapakli .hero-title{color:#FFF3DC}
#sceneBig.kapakli .hero-title .l2{color:var(--cat-tebesir,#FFF3DC)}
#sceneBig.kapakli .hero-sub{color:#FFF3DC}
/* Kapaklı bantta yazı kreme dönüyor; seçici ve mod açıklamaları da onu izliyor. */

#sceneBig.kapakli .hero-sub b,#sceneBig.kapakli .hero-sub strong{color:#FFF3DC}
/* Kapaksiz seri kartinda motif katmani. Kapagi olmayan gercek bir seri,
   havuzu henuz yazilmamis bekleyen seriden daha cıplak gorunuyordu — tam
   tersi olmali. Opaklik bekleyen kartin .3'unden dusuk: orada thumb bos,
   burada ustunde seri basligi duruyor ve once o okunmali. */
/* Motif katmanı artık kapaklı kartta da basılıyor: kapak YÜKLENENE KADAR
   görünen şey o (bkz. js → kapakUygula). Kapak gelip .kapakli eklenince
   gizleniyor, yoksa fotoğrafın üstünde kalırdı — çocuk eleman, ebeveynin
   arka planının üstüne boyanır. */
.tcard .thumb .ph,.devamcard .thumb .ph{position:absolute;inset:0;overflow:hidden;z-index:0}
.tcard .thumb.kapakli .ph,.devamcard .thumb.kapakli .ph,
.tcard .thumb.kapakli > .ph,.serigez .gminik.kapakli .ph,
.ykKart .thumb.kapakli .ph,.bekthumb.kapakli .ph{display:none}
.tcard .thumb .ph i,.devamcard .thumb .ph i{position:absolute;display:block;opacity:.2}
.tcard .thumb .ph i svg,.devamcard .thumb .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
/* Capraz tarama motiflerin ustunde kalmali, yoksa kartin derinligi kayboluyor. */
.tcard .thumb::before,.devamcard .thumb::before{z-index:1}
.tcard .thumb .tt{position:relative;z-index:2;font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:19px;line-height:1.08}
.tcard .body{padding:15px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.tcard .ti{font-weight:700;font-size:15.5px}
.tcard .meta{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);margin-top:auto;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:10px}
.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-family:var(--nav);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.03em}
.tag{display:inline-flex;align-items:center;border:1.6px solid var(--line);color:var(--ink-2);
  border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600;background:none;cursor:pointer;
  font-family:var(--nav);text-transform:uppercase;letter-spacing:.03em;transition:.14s;line-height:1.5}
.tag:hover{border-color:var(--ink);color:var(--ink)}
.tag.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tag.light{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.92)}
/* Kategoriye ait etiket o kategorinin rengini taşır; bağlam etiketi nötr kalır.
   Farkı anlatmadan gösteren tek işaret bu. */
.tag.kat{border-color:var(--tc);color:var(--tc)}
/* Üzerine gelince zemin etiketin rengini alır, yazı da zeminin üstünde okunur
   kalsın diye kâğıt rengine döner. Renk "color" yerine --tc ile taşındığı için
   ikisi birbirine kilitlenmiyor. */
.tag.kat:hover{background:var(--tc);border-color:var(--tc);color:#fff}
.tag.kat.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* ---------- kategori sayfası modül sekmeleri ----------
   Profil sekmeleriyle aynı dil (alt çizgi), çünkü ikisi de "aynı sayfanın iki
   yüzü" demek. Sayı her sekmede: hangisinin daha dolu olduğunu göstermek
   kayırma hissini bitiren şeyin kendisi — çoğu kategoride ikilemler önde. */
/* YARIM YARIM, ÇİZGİNİN TAMAMI KADAR (v521).
   Önce sola yaslı iki küçük düğmeydi ve yanlarında boşluk kalıyordu: filtre
   gibi, "istersen aç" gibi duruyordu. Oysa bu ikisi sitenin iki demirbaşı.
   Artık altlarındaki çizgiyi tam ortadan paylaşıyorlar — her biri yarısı.
   Izgara, flex değil: 1fr 1fr iki gözü metin uzunluğundan bağımsız olarak
   eşitliyor, "Bitmeyen İkilemler" uzun diye daha geniş bir yarım almıyor.
   Seçili olanın alt çizgisi kendi yarısının TAMAMINI boyuyor; çizginin
   hangi yarısının dolu olduğu uzaktan bakınca bile okunuyor. */
/* minmax(0,1fr) — düz 1fr DEĞİL. 1fr'in alt sınırı içeriğin en dar hâli ve
   yazılar sarmadığı için o "en dar hâl" bütün satırın genişliği oluyordu:
   uzun yazılı göz daha geniş bir yarım alıyor, çizgi tam ortadan
   bölünmüyordu (360px'te 143'e 157 ölçüldü). Sıfır alt sınırla iki göz
   her ekranda birebir eşit. */
.turseki{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 22px;
  border-bottom:2px solid var(--line)}
.turseki[hidden]{display:none}
.turbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;background:none;
  cursor:pointer;padding:15px 10px 14px;font-family:var(--nav);font-weight:600;
  font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.turbtn b{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:11.5px;
  letter-spacing:0;color:var(--ink-3);background:var(--paper-2);border-radius:999px;
  padding:2px 8px}
.turbtn:hover{color:var(--ink)}
/* Mor, kategori rengi DEĞİL. Bir süre --cat kullanıldı ve kategorisiz
   sayfalarda setCat(null) onu NEUTRAL'a (#2C63C4) düşürdüğü için sekmeler
   Film & Dizi mavisine boyanıyordu. Zaten kurala da aykırıydı: modül sekmesi
   gezinmedir, gezinme markaya aittir. Profil sekmeleri (.pfsekb) da aynı moru
   kullanıyor — iki sekme çifti artık aynı dili konuşuyor. */
.turbtn.on{color:var(--ink);border-bottom-color:var(--brand)}
.turbtn.on b{background:var(--brand);color:#fff}
.turbtn:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
#listIkGrid[hidden],#listGrid[hidden],#tagRow[hidden],#listAra[hidden]{display:none}
/* Dar ekranda iki yarım da sabit: taşmasın diye punto ve rozet iniyor,
   metin sarmıyor. "BİTMEYEN İKİLEMLER" 18 karakter ve en dar yarıma
   sığması gereken yazı o. Ölçüyle bulundu. */
@media (max-width:860px){
  .turbtn{padding:13px 6px 12px;font-size:14px;gap:7px;letter-spacing:.04em}
}
/* Telefonda SAYI ALTA GEÇİYOR, yazı sarmıyor.
   Yan yana dizilişte yarıma sığmak için punto 9'a inmek gerekiyordu; yazıyı
   sarmak da iki yarımı birbirine benzemez hâle getiriyordu ("EFSANE SERİLER"
   tek satır, "BİTMEYEN İKİLEMLER" iki satır). Sayı alt satıra alınınca her
   iki yarım da aynı iskelete kavuşuyor: bir satır yazı, altında rozet —
   ve en dar ekranda bile yazı tek satır ve okunur punto kalıyor. */
@media (max-width:620px){
  .turbtn{flex-direction:column;gap:5px;padding:10px 4px 9px;font-size:12px;
    letter-spacing:.02em;line-height:1.1}
  .turbtn b{font-size:10.5px;padding:2px 7px}
}

.tagrow{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
/* Telefonda etiketler alt alta diziliyordu: kategori sayfasında on etiket
   ekranın üçte birini yiyor. Yatay kayan şerit — yasal sekmelerde ve profil
   sekmelerinde kullandığımız kalıp. Şerit .wrap'ın 22px yan payını negatif
   marjla iptal ediyor, son etiket kenardan sızıyor. */
@media (max-width:700px){
  .tagrow,#spTags{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tagrow::-webkit-scrollbar,#spTags::-webkit-scrollbar{display:none}
  /* Etiket şeridi de aynı kuralda: metinle hizalı başlıyor. */
  .tagrow > *,#spTags > *{flex:none}
  /* Seri panelinde şerit kartın içinde: negatif marj yok, satırın kendisi
     kayıyor ve "Etiket" künyesi solda sabit kalıyor. */
  .spust{flex-wrap:nowrap;min-width:0}
  #spTags{min-width:0}
}
/* Tek tanım: kategori listesindeki etiket başlığı ile seri panelindeki
   başlıklar aynı kuraldan besleniyor. İki ayrı yerde iki ayrı ölçü tutmak
   sayfalar arasında sessizce farklılaşmaya yol açıyordu. */
.tagrow .lbl,.splbl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.splbl{flex:none}
/* Bitmeyen İkilemler sayfası kendi kategori şeridini kullanmaya devam ediyor:
   üstteki ana şerit tıklanınca serilere gidiyor, buradaki ise ikilemleri süzüyor. */
.filterbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.fchip{border:2px solid var(--line);background:transparent;color:var(--ink-2);border-radius:999px;padding:8px 18px;
  cursor:pointer;font-family:var(--nav);font-weight:600;font-size:14.5px;text-transform:uppercase;letter-spacing:.04em;transition:.14s}
.fchip:hover{border-color:var(--ink);color:var(--ink)}
.fchip[aria-pressed="true"]{border-color:transparent}
.searchbox{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--surface);border:2px solid var(--line);
  border-radius:999px;padding:6px 14px;min-width:220px;transition:border-color .14s,box-shadow .14s}
/* Odak halkası tek yerde: dış kapsül. Alandaki input kendi çerçevesini ve
   :focus-visible halkasını almazsa iç içe üç çizgi sorunu bitiyor.
   Seçici, sonradan gelen genel form kuralından ağır olacak şekilde yazıldı. */
.searchbox input[type="text"]{border:0;border-radius:0;background:none;outline:none;box-shadow:none;
  font-family:inherit;font-size:15px;color:var(--ink);width:100%;padding:3px 0}
.searchbox input[type="text"]:focus,
.searchbox input[type="text"]:focus-visible{border:0;outline:none;box-shadow:none}
.searchbox:focus-within{border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}

/* ---------- etiket merkezi ---------- */
/* Kap artık bölümleri taşıyor; ızgara her bölümün kendi içinde. */
#tagGrid{display:block}
.tagsec{margin-bottom:30px}
.tagsech{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  font-size:15px;letter-spacing:.06em;margin:0 0 4px}
.tagsecp{margin:0 0 12px;font-size:13.5px;color:var(--ink-3);max-width:70ch}
.tagcard.bos{opacity:.45}
.taggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.tagcard{border:2px solid var(--line);border-radius:18px;background:var(--surface);padding:18px 20px 16px;
  text-align:left;cursor:pointer;color:var(--ink);display:flex;flex-direction:column;gap:7px;
  box-shadow:var(--shadow-s);transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s,border-color .16s}
.tagcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:var(--ink)}
.tagcard h3{font-size:26px;line-height:1}
.tagcard .cnt{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);letter-spacing:.06em}
.tagcard .cats{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.tagcard .cats span{width:12px;height:12px;border-radius:4px;display:block}
.tagcard .slug{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  margin-top:auto;padding-top:10px;border-top:1px dashed var(--line);width:100%}
.tagcard .warn{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper);background:var(--ink-3);border-radius:999px;padding:3px 9px;align-self:flex-start}

.seotable code,.callout code{font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  background:var(--paper-2);padding:2px 6px;border-radius:6px}
.seopath{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--brand);
  background:none;border:0;padding:0;cursor:pointer;text-align:left}
.seopath:hover{text-decoration:underline;text-underline-offset:3px}
.seodesc{font-size:12.5px;color:var(--ink-2);line-height:1.45;max-width:46ch}
.seoflag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;border-radius:999px;padding:3px 9px;white-space:nowrap}
.seoflag.on{background:#146B3A;color:#fff}
.seoflag.off{background:var(--ink-3);color:var(--paper)}
.seogroup td{background:var(--paper-2);font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- öneri modülü ---------- */
.recgrid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1020px){.recgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.recgrid{grid-template-columns:1fr}}
.tcard .why{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);border-radius:999px;padding:4px 10px;margin-bottom:9px}
.tcard .why.soft{background:var(--paper-2);color:var(--ink-2)}
.recik{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:820px){.recik{grid-template-columns:1fr}}
.recik .recline{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.recik .recline strong{display:block;font-family:var(--disp);font-weight:var(--disp-w);
  text-transform:uppercase;font-size:20px;color:var(--ink);margin-bottom:7px}

/* ---------- markalı karşılaştırma çerçevesi ---------- */
/* Her aday aynı ölçüde bir çerçevede durur: görsel alanı sabit oranlı,
   ad alanı sabit yükseklikte. Böylece hangi seri açılırsa açılsın kartlar
   birbirinin aynı boyda çıkar. */
.opt.frame{background:var(--surface);color:var(--ink);padding:13px 13px 15px;min-height:0;
  justify-content:flex-start;gap:0;border:3px solid transparent;
  width:100%;max-width:322px;justify-self:center}
.opt.frame::before{display:none}
/* Kart metinleri tek sarmalayıcıda ama masaüstünde display:contents, yani
   düzen açısından yokmuş gibi: eski kurallar olduğu gibi çalışıyor.
   Sarmalayıcı yalnızca telefonda bir bloğa dönüşüp görselin üstüne biniyor. */
.falt{display:contents}
.frameshot{position:relative;width:100%;aspect-ratio:5/6;border-radius:15px;overflow:hidden;
  background:var(--brand-cream);display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(21,20,26,.09)}
.frameshot img{width:100%;height:100%;display:block}
/* Şiir kartı: görsel yerine dizeler. Kutu ölçüsü görselli kartlarla aynı
   kalıyor ki turnuva boyunca kart boyu oynamasın. Punto JS'te dize sayısına
   göre veriliyor, buradaki değerler ondan devralınıyor. */
/* ŞİİR KARTI — Omubumu metin kartı dili (5 Ekim).
   Bütün ölçüler cqw, yani kartın kendi genişliğine oranlı: aynı kart düelloda
   502px, telefonda 332px, listede daha küçük çiziliyor ve üçünde de aynı
   görünüyor. Sabit px'te görünmüyordu.
   Zemin iki katman: kâğıt kıvrımı (SERT duraklı konik = düz yüzeyler, yumuşak
   gradyan küçülünce bantlanıyordu) + sönük nokta ızgarası. Ölçüldü: iki
   yüzey arası fark WebP q80'den sonra 7/255, yani sağlam.
   İsim ve şair kartın ALTINDA (.fad/.fyr) zaten yazıyor; künye bloku kartın
   içine konmadı, yoksa iki kez okunurdu. Limon kare markanın kartta tek
   göründüğü yer. */
/* DOLGU KAPSAYICIDA DEĞİL. cqw, kapsayıcının İÇERİK kutusuna göre çözülüyor;
   dolguyu .frameshot'a verince içerik kutusu daralıyor ve bütün ölçüler
   küçülüyordu (502px kartta dolgu 89px çıktı). Dolgu .dzic'te. */
.frameshot.dizelik{container-type:inline-size;padding:0;display:block;
  background-color:var(--brand-cream)}
/* .dzic AKIŞTA duruyor, konumlandırılmış DEĞİL. Mutlak konumlandırınca
   .frameshot'ın içerik yüksekliği sıfıra düşüyor; kısa bir pencerede
   .frameshot flex ile eziliyor ve dizeler kartın altından taşıyordu.
   Akışta durunca kart hiçbir zaman metninden kısa olamıyor. */
/* height (min-height DEĞİL): kart kendi yuvasından uzayamamalı, yoksa
   kısa pencerede alttaki ad satırının üstüne biniyordu. Taşma burada
   kırpılıyor ve dizeOturt() taşmayı görüp puntoyu düşürüyor. */
.frameshot.dizelik .dzic{width:100%;height:100%;max-height:100%;overflow:hidden;
  padding:6.2cqw 6.5cqw;display:flex;flex-direction:column;align-items:flex-start;
  background-image:
    radial-gradient(rgba(23,33,59,.055) .15cqw, transparent .15cqw),
    conic-gradient(from 0deg at 74% 56%,
      var(--brand-cream) 0 92deg, #FAF1DE 0 122deg, var(--brand-cream) 0 152deg,
      #F2E4C9 0 186deg, var(--brand-cream) 0 360deg);
  background-size:2.13cqw 2.13cqw, auto;
  background-position:1.06cqw 1.06cqw, 0 0}
.frameshot.dizelik .dzkose{position:absolute;right:0;bottom:0;
  width:8.25cqw;height:8.25cqw;
  background:linear-gradient(to bottom right,transparent 50%,var(--cat) 50%)}
.frameshot.dizelik .dztirnak{display:block;font-family:var(--disp);font-weight:400;
  font-size:9.4cqw;line-height:.62;height:5.8cqw;color:var(--brand);margin-bottom:.7cqw}
.frameshot.dizelik .dize{display:block;text-align:left;
  font-family:var(--disp);font-weight:400;color:var(--ink);
  font-size:calc(var(--fs,4.7) * 1cqw);line-height:1.16;letter-spacing:.004em;
  text-wrap:initial;position:relative;
  /* Dizeler dikeyde ortada: tırnak üstte, çizgi altta sabit; aradaki boşluk
     dize sayısına göre değişiyor ve üste yaslanınca altında ölü alan kalıyordu.
     Alttaki dolgu ŞART: uzun bir şiirde son dize mor çizginin dibine iniyor
     ve çizgi o dizenin altını çiziyormuş gibi duruyordu. Çizgi bir tasarım
     işareti, vurgu değil — her zaman boş bir alanda duruyor. Dolgu (kenar
     boşluğu değil) çünkü auto ortalamayı bozmuyor ve ölçüme kendiliğinden
     giriyor. */
  margin-block:auto;padding-bottom:4cqw}
.frameshot.dizelik .dzalt{margin-top:auto;display:flex;align-items:center;position:relative}
.frameshot.dizelik .dzalt i{display:block;width:5.5cqw;height:.44cqw;background:var(--brand)}
.frameshot.dizelik .dzalt b{display:block;width:1.25cqw;height:1.25cqw;
  background:var(--brand-hl);margin-left:.62cqw}
/* KASET KARTI — B düzeni (liste). Şiir kartıyla aynı zemin, aynı köşe,
   aynı limon kare; bütün ölçüler yine cqw. Dolgu .kaic'te (bkz. şiir kartı:
   cqw kapsayıcının İÇERİK kutusuna göre çözülüyor). */
/* ÇIKIŞ KARTI — kaset ve şiir kartlarıyla aynı aile: aynı krem zemin, aynı
   nokta dokusu, aynı kırılma yüzeyleri, aynı köşe kıvrımı. Tek farkı
   içeriğinin bir parçasının dosyadan gelmesi: saydam zeminli karakalem
   çizim. Çizim ALTA yaslı ve kartın alt kenarından taşıyor — afiş
   kompozisyonu; ortaya yapıştırılmış bir resim değil.
   Aile işareti (mor çizgi + limon kare) burada başlığın ALTINDA, çünkü
   kartın altını çizim dolduruyor. Tek bilinçli sapma bu. */
.frameshot.cikislik{container-type:inline-size;padding:0;display:block;
  background-color:var(--brand-cream)}
.frameshot.cikislik .ciic{width:100%;height:100%;max-height:100%;overflow:hidden;
  padding:6.2cqw 6.5cqw 0;display:flex;flex-direction:column;align-items:flex-start;
  background-image:
    radial-gradient(rgba(23,33,59,.055) .15cqw, transparent .15cqw),
    conic-gradient(from 0deg at 74% 56%,
      var(--brand-cream) 0 92deg, #FAF1DE 0 122deg, var(--brand-cream) 0 152deg,
      #F2E4C9 0 186deg, var(--brand-cream) 0 360deg);
  background-size:2.13cqw 2.13cqw, auto;background-position:1.06cqw 1.06cqw, 0 0}
.frameshot.cikislik .cikose{position:absolute;right:0;bottom:0;z-index:2;
  width:8.25cqw;height:8.25cqw;
  background:linear-gradient(to bottom right,transparent 50%,var(--cat) 50%)}
/* Sanatçı ve yıl: kaset kartındaki .kasan ile birebir aynı ölçü. */
.frameshot.cikislik .cisan{display:block;flex:none;
  font-family:var(--nav);font-weight:700;font-size:2.5cqw;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:1}
/* Üst boşluk 2cqw: kaset kartındaki Türkçe aksan çakışmasının aynısı burada
   da var (üstte Ç/Ş iner, altta İ/Ö/Ü/Ğ çıkar). Aynı değer kullanıldı. */
.frameshot.cikislik .cisar{display:block;flex:none;margin-top:2cqw;max-width:100%;
  font-family:var(--disp);font-weight:400;font-size:calc(var(--cfs,9.4) * 1cqw);
  line-height:.98;text-transform:uppercase;color:var(--ink);letter-spacing:.004em}
.frameshot.cikislik .cialt{display:flex;align-items:center;flex:none;margin-top:2.4cqw}
.frameshot.cikislik .cialt i{display:block;width:5.5cqw;height:.44cqw;background:var(--brand)}
.frameshot.cikislik .cialt b{display:block;width:1.25cqw;height:1.25cqw;
  background:var(--brand-hl);margin-left:.62cqw}
/* Çizim kalan alanın tamamını alıyor. Yan dolgu iptal: omuzlar kartın
   kenarlarına kadar gidebilsin.
   KADRAJ (Cansu: "sanki bir yerden çıkıyor gibi olsun, şu an havada duruyor"):
   görsel kutuya SIĞDIRILMIYOR, kutuyu DOLDURUYOR. cover + üstten hizalama:
   ölçek kartın genişliğinden geliyor, artan boy alt kenarda kırpılıyor.
   Sonuç figürün kartın altından çıkıyor olması — ortada asılı duran bir
   kesme değil. Yatayda hiç kırpılmıyor: kutu oranı (1.3-1.8) çizim
   oranından (0.85) her zaman geniş, o yüzden ölçek daima genişlikten
   belirleniyor ve omuz hiç kesilmiyor. Üstten hizalama da baş hep
   görünür kalsın diye — kırpma yalnız aşağıdan. */
.frameshot.cikislik .cigor{flex:1 1 auto;min-height:0;width:calc(100% + 13cqw);
  margin:1.2cqw -6.5cqw 0;display:block}
.frameshot.cikislik .cigor img{width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 0}
.frameshot.kasetlik{container-type:inline-size;padding:0;display:block;
  background-color:var(--brand-cream)}
.frameshot.kasetlik .kaic{width:100%;height:100%;max-height:100%;overflow:hidden;
  padding:6.2cqw 6.5cqw;display:flex;flex-direction:column;align-items:flex-start;
  background-image:
    radial-gradient(rgba(23,33,59,.055) .15cqw, transparent .15cqw),
    conic-gradient(from 0deg at 74% 56%,
      var(--brand-cream) 0 92deg, #FAF1DE 0 122deg, var(--brand-cream) 0 152deg,
      #F2E4C9 0 186deg, var(--brand-cream) 0 360deg);
  background-size:2.13cqw 2.13cqw, auto;background-position:1.06cqw 1.06cqw, 0 0}
.frameshot.kasetlik .kakose{position:absolute;right:0;bottom:0;z-index:2;
  width:8.25cqw;height:8.25cqw;
  background:linear-gradient(to bottom right,transparent 50%,var(--cat) 50%)}
.frameshot.kasetlik .kanota{display:block;width:5.4cqw;height:5.4cqw;flex:none;color:var(--brand)}
.frameshot.kasetlik .kanota svg{width:100%;height:100%;display:block;fill:currentColor}
/* Sanatçı üstte küçük, ALBÜM en büyük öge. Telefonda kart 332 piksele
   inince liste okunmuyor ve kartı tek başına albüm adı taşıyor. */
.frameshot.kasetlik .kasan{display:block;flex:none;margin-top:1.9cqw;
  font-family:var(--nav);font-weight:700;font-size:2.5cqw;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:1}
/* Boşluk .7 → 2.0cqw (5 Ekim, Cansu bildirdi: "Kibariye / İŞTE SES, İŞTE
   YORUM"da K ile İ üst üste biniyordu). Sorun Türkçe'ye özgü: ÜSTTEKİ satır
   Ç/Ş ile taban çizgisinin ALTINA iniyor, ALTTAKİ satır İ/Ö/Ü/Ğ ile normal
   büyük harf boyunun ÜSTÜNE çıkıyor; iki kutu arasında .7cqw varken bu ikisi
   buluşuyordu. Tarayıcıda gerçek Anton ile ölçüldü (658px kart, mürekkepten
   mürekkebe): eski değerde Kibariye/İŞTE +0.8px, Coşkun Sabah/AŞIĞIM -3.4px,
   Feridun Düzağaç/KÖPRÜDEN -2.4px — yani ikisi fiilen üst üste. Yeni değerde
   sırasıyla 9.3 / 5.1 / 6.1px. En kötü hâl zaten ölçülen o: sanatçıda en
   derin iniş (Ç/Ş, .217em) + albümde en yüksek çıkış (Ğ, .879em).
   line-height'a dokunulmadı: Anton dar bir yazı, 64 albümün hiçbirinin adı
   iki satıra düşmüyor — satır arası sorunu yok. */
.frameshot.kasetlik .kaalb{display:block;flex:none;margin-top:2cqw;
  font-family:var(--disp);font-weight:400;font-size:6.4cqw;line-height:.98;
  text-transform:uppercase;color:var(--ink);letter-spacing:.006em}
.frameshot.kasetlik .kaliste{display:grid;grid-auto-flow:column;
  grid-template-columns:repeat(var(--sut,2),1fr);
  grid-template-rows:repeat(var(--sat,6),auto);
  column-gap:4.6cqw;row-gap:1.18cqw;width:100%;
  margin-block:auto;padding-block:2.6cqw;
  font-family:var(--nav);font-weight:600;font-size:calc(var(--kfs,2.6) * 1cqw);line-height:1.1}
.frameshot.kasetlik .kasat{display:flex;gap:1.35cqw;align-items:baseline;min-width:0}
.frameshot.kasetlik .kasat i{flex:none;width:3.6cqw;text-align:right;font-style:normal;
  color:var(--brand);font-variant-numeric:tabular-nums}
.frameshot.kasetlik .kasat b{font-weight:600;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frameshot.kasetlik .kaalt{display:flex;align-items:center;flex:none}
.frameshot.kasetlik .kaalt i{display:block;width:5.5cqw;height:.44cqw;background:var(--brand)}
.frameshot.kasetlik .kaalt b{display:block;width:1.25cqw;height:1.25cqw;
  background:var(--brand-hl);margin-left:.62cqw}
.frameshot img.contain{object-fit:contain;padding:12px;
  filter:drop-shadow(0 10px 16px rgba(21,20,26,.22))}
.frameshot img.cover{object-fit:cover}
.frameshot .ph{position:absolute;inset:0;overflow:hidden}
.frameshot .ph i{position:absolute;display:block;opacity:.26}
.frameshot .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
@media (max-width:700px){.frameshot .ph{--mo:.7}}
.opt.frame .fad{display:block;margin-top:10px;text-align:center;color:var(--ink);
  font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  font-size:clamp(16px,1.75vw,20px);line-height:1.08}
.opt.frame .fyr{display:block;text-align:center;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);margin-top:-4px;min-height:15px}
/* Ad gorselin icinde oldugu serilerde (kaset) ekranda kalan tek yazi satiri bu.
   Once --ink-3 ile soluklastirmistim; yanlisti. Normal kartta alt satir da tam
   --ink, yalnizca ayrac soluk -- burada da ayni olmali, yoksa kasette yil
   kartin en zayif ogesi oluyor. */
.opt.frame .fad.yalnizalt{color:var(--ink)}
.opt.frame .fad .fsep{color:var(--ink-3);font-weight:400;margin:0 7px}
/* Başarı rozetleri. Oyun testinde "alttaki açıklama az görünüyor" geri bildirimi
   geldi; alan zaten boştu. Artık her kadronun lig / Avrupa / ülke kupası sonucu
   ayrı rozette duruyor. Kupa kazanılmışsa dolu (kategori rengi), kazanılmamışsa
   çerçeveli — gözün bir bakışta ayırabilmesi için. */
/* Üç ayrı katman: açıklama > isim > rozetler. Bir ara isim ve rozeti tek saran
   satırda birleştirmiştim; hiyerarşiyi siliyordu, ayrıldı. */
.opt.frame .fbs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 7px;
  margin:9px auto 0;max-width:44ch}
.opt.frame .fbs:empty{display:none}
/* Açıklama artık görselin hemen altında ve kartın ASIL metni: kararı besleyen
   cümle bu. Eskiden 13px/--ink-2 ile en altta duruyordu ve görülmüyordu. */
.opt.frame .facik{display:block;margin-top:11px;text-align:center;
  font-size:16.5px;line-height:1.5;color:var(--ink);font-weight:500;
  letter-spacing:-.005em;max-width:30em;margin-left:auto;margin-right:auto}
/* Rozet kategori rengini taşıyor. Yazı DİKEY ORTALI: line-height 1.25 ile
   satır kutusu, ş/ğ/ç gibi alt uzantısı olan ve olmayan yazılarda farklı
   yükseklikte oturuyordu ("Şampiyon" aşağı, "3. oldu" yukarı kaçıyordu).
   Sabit yükseklik + line-height:1 ile kutu her dizede aynı, ortalama şaşmıyor. */
.bsp{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:25px;padding:0 11px;font-size:12px;line-height:1;font-weight:700;
  border-radius:999px;border:1.5px solid var(--cat);
  background:var(--cat);color:var(--cat-on);white-space:nowrap}
/* Açıklaması olan kartta cümle asıl iş; rozet ona eşlik ediyor, bu yüzden
   açık tonlu. Açıklaması olmayan kartta rozet kartın kendisi, dolu kalıyor. */
.opt.frame.acli .bsp{border-color:transparent;
  background:color-mix(in srgb,var(--cat) 15%,transparent);
  color:color-mix(in srgb,var(--cat) 72%,var(--ink))}
.opt.frame.acli .bsp.kupa{background:var(--cat);color:var(--cat-on)}
.bsi{width:11px;height:11px;flex:none;fill:currentColor}
.bsd{font-weight:500;color:inherit;opacity:.72}
.bsayrac{display:inline-block;width:1px;height:12px;margin:0 7px;flex:none;
  background:currentColor;opacity:.3}
.opt.frame .pct{margin-top:9px}
.opt.frame .track{background:rgba(21,20,26,.12)}
.opt.frame .bar{background:var(--cat)}
.opt.frame .stamp{right:14px;bottom:14px}
.opt.frame.picked{border-color:var(--brand)}
.duel.revealed .opt.frame:not(.picked),.duel.locked .opt.frame:not(.picked){filter:none;opacity:.62}
@media (max-width:700px){
  .frameshot{aspect-ratio:1/1}
  .opt.frame{max-width:none}
}
/* Seri düellosu yatay, ikilem ekranı dikey.
   Gerekçe iki ölçüme dayanıyor: mobilde iki dikey seçenek ekrana sığmıyordu
   (ikincisi katlamanın 232px altında kalıyordu) ve masaüstünde kart 534px'lik
   sütunun içinde 322px'te sıkışıyordu. Banner zaten seri düellosu gösteriyor
   ve oradaki oran ~3:2; seri ekranı artık onunla aynı dili konuşuyor.
   Kimlik sabiti: seri = yatay, ikilem = dikey. */
/* YUVA GÖRSELİN ORANINI ALIYOR (3 Ekim). Eskiden sabit 3:2'ydi ve görseli
   object-fit:cover ile kenarlarından kesiyordu — ordu görselleri 16:9 olduğu
   için kaynağın %15,6'sı gidiyordu ("SEDAN" tabelası "SEDA" oluyordu). Oran
   artık görselden geliyor: --oranN'i, görsel yüklenince motor yazıyor
   (bkz. "oran yazıcı"). Yazılana kadar 3/2 duruyor; envanterin çoğu o. */
#gDuel .frameshot,#rShot .frameshot{aspect-ratio:var(--oranN,1.5)}
/* Aday görseli olmayan seride çerçeve bilgi taşımıyor, yalnızca kategori
   motifi var — 63 serinin 60'ı böyle. Masaüstünde 3/2 blok kartın ~%40'ını
   yiyordu; ince banda inince o yer açıklamaya gidiyor. */
#gDuel .frameshot.gorselsiz{aspect-ratio:16/4.5}
#gDuel .opt.frame{max-width:none}
/* Yıl satırı çoğu havuzda boş; boşken yer tutmasın. */
.opt.frame .fyr:empty{min-height:0;margin-top:0}
/* ODAK MODU DEVRALDI. Bu blok telefonda düelloyu "katlamanın üstüne sığdır"
   mantığıyla ayarlıyordu: 3:2 kilidi, hap rozetler, açıklamada üç satır
   kırpma (-webkit-line-clamp). Odak modu (bkz. "ODAK MODU" bloğu) aynı işi
   kırpmadan ve bilgi saklamadan yapıyor; üstelik bu kurallar #gDuel kimlik
   seçicisiyle yazıldığı için odak modunun sınıf seçicilerini eziyordu —
   açıklama 15,5px kalıyor ve üç satırdan sonra üç noktayla kesiliyordu.
   Yalnız düelloya dokunmayan kurallar kaldı. */
@media (max-width:700px){
  /* Sonuç sayfasındaki kart görselinin kendi üst şeridi var; çerçeve 3:2
     dışına çıkarsa object-fit onu kırpıyor ve ad gidiyor. */
  #rShot .frameshot{aspect-ratio:var(--oranN,1.5)}
  /* Üst şerit telefonda dar: kazanılan her piksel iki seçeneği yaklaştırıyor.
     Kimlik seçicisi şart — .gamebar temel kuralı bu bloktan sonra tanımlı. */
  #view-game .gamebar{padding:10px 15px 11px;margin-bottom:10px}
  /* Telefonda başlık kendi satırını alıyor; rozet ve sayaç altında yan yana
     duruyor, böylece şerit dört satır yerine üç satır oluyor. */
  #view-game .gbtitle{order:1;width:100%;font-size:16px}
  #view-game .gbcat{order:2;font-size:10.5px;padding:2px 9px}
  #view-game .gbcount{order:3;font-size:11.5px;margin-left:0}
  /* ÇIKIŞ order:4 — ŞART. Bu blokta başlık width:100% ile kendi satırını
     alıyor ve kalanlar order ile diziliyor. Düğme ordersiz kalınca 0 sayılıp
     EN BAŞA, kendi satırına geçiyordu (ölçüldü: 390px'te şerit dört satıra
     çıkıyor ve çıkış tek başına tepede duruyordu). Şimdi ikinci satırın
     sağ ucunda, rozet ve sayacın karşısında. */
  /* Baştan başla ÇIKIŞLA AYNI SATIRDA. Sırasız bırakılınca order:0 ile
     başlığın da önüne geçip en üste, kendi satırına düşüyordu — orada
     başıboş bir etiket gibi duruyor. İkisi 4 ve 5: dar ekranda sayaçtan
     sonra birlikte sarıyorlar, yani "bu turdan çıkma" ikilisi hep yan yana. */
  #view-game .gbtop .gbcik{order:4}
  /* TELEFONDA BAŞTAN BAŞLA YOK (7 Ekim, Cansu). Üst şerit zaten üç satıra
     çıkıyordu ve odak modunda her piksel karta gidiyor. Telefonda baştan
     başlamanın yolu duruyor: çık, seri sayfasındaki düğmeye bas. */
  #view-game .gbtop #gRestart{display:none}
  #view-game .gbtop{gap:8px;row-gap:9px}
  #view-game .gbnow{font-size:12.5px}
}

/* DOKUNMATİKTE HOVER KALICI. Parmak kalktıktan sonra tarayıcı :hover'ı
   bırakmıyor; seçilen kart 6px yukarıda kalıyor ve dikey düelloda VS
   rozetinin üstüne biniyordu. Cansu'nun "tam seçerken yapışıyor" dediği şey
   buydu. İşaretçi ince değilse kaldırma hareketleri kapalı; gölge ve renk
   değişimleri duruyor, onlar çakışma yaratmıyor. */
@media (hover:none){
  .opt:hover:not(:disabled),.ikopt:hover:not(:disabled),.mahopt:hover:not(:disabled),
  .tcwrap:hover,.cchip:hover,.gezkart:hover,.arasatir:hover,.btn:hover,
  .randbtn:hover,.startbtn:hover,.favbtn:hover,.sppil:hover,.pbtn:hover{transform:none}
}

/* ---------- banner + haftanın ikilemi (iki sütun) ---------- */
.herorow{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:18px;align-items:stretch;margin-top:6px}
@media (max-width:1040px){.herorow{grid-template-columns:1fr}}
.herorow > .hero{margin-top:0}
/* Daralan banner yalnızca iki sütunlu düzende geçerli; mobil yığın düzenini bozmasın. */
@media (min-width:1041px){
  .herorow #hero .hero-stage{grid-template-columns:1fr 60px 1fr;gap:10px}
  .herorow #hero .startbtn{font-size:16px;padding:12px 24px}
  .herorow #hero .doodle{font-size:15px;max-width:118px}
  .herorow #hero .d-crown{display:none}
  .herorow #hero .badge img{height:34px}
  /* Notlar eğik durduğu için 6px'te kutunun kenarına yapışıyorlardı;
     ölçülen boşluk sıfırdı. İçeri alındılar. */
  .herorow #hero .d-left{left:24px;bottom:62px}
  .herorow #hero .d-right{right:24px;bottom:52px}
}
@media (min-width:1041px) and (max-width:1240px){.herorow #hero .doodle{display:none}}
/* Başlığın notların altına girmesini artık punto ölçümü engelliyor
   (bkz. heroOlcek). Burada bir zamanlar 530px'lik tavan vardı: sığmayan
   satırı kırıyordu ve banner üç satıra çıkıyordu. Cansu'nun kuralı en
   fazla iki satır, o yüzden kırmak değil küçültmek doğrusu. */

/* Marka kuralı: kategori renkleri içeriğe ait, mor+lime siteye. Haftanın ikilemi
   sitenin kendi ritüeli olduğu için krem zemin ve marka renkleriyle duruyor. */
/* Haftanın ikilemi, aşağıdaki krem şeritten yapıca ayrılsın diye kendi kategorisinin
   renginde bir afiş: zemin o damarın motifleriyle dolu, ortasından lime bir çatlak geçiyor.
   Çatlak ikilemin görsel imzası — modül zaten "ikiye bölünme" anlatıyor.
   Renkler kök --cat üzerinden değil, modüle özel değişkenlerle geliyor: banner'daki seri
   başka bir kategoriden olabilir, ikisi birbirini ezmemeli. */
.weekik{background:var(--wc,var(--brand));color:var(--won,#fff);border-radius:var(--r);box-shadow:var(--shadow-l);
  padding:24px 22px 22px;display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden}
.wbg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(155deg,var(--wc-lt,#2E8055) 0%,var(--wc,#2E8055) 46%,var(--wc-dk,#1d5a3a) 100%)}
.wbg i{position:absolute;display:block;opacity:.22;color:var(--wh,var(--brand-hl))}
.wbg i svg{width:100%;height:100%;display:block}
.wcrack{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;
  color:var(--wh,var(--brand-hl));opacity:.85}
/* Kıvılcımlar çatlağın çizimden arta kalan iki ucunda: üstte başlığın, altta seçeneklerin hizasında. */
.wspark{position:absolute;z-index:1;display:block;width:3px;height:18px;border-radius:3px;
  background:var(--wh,var(--brand-hl));opacity:.9;pointer-events:none}
.wspark.s1{left:calc(50% - 27px);top:11%;transform:rotate(-40deg)}
.wspark.s2{left:calc(50% + 24px);top:9%;transform:rotate(40deg)}
.wspark.s3{left:calc(50% - 29px);top:78%;transform:rotate(-34deg);z-index:4}
.wspark.s4{left:calc(50% + 26px);top:82%;transform:rotate(36deg);z-index:4}
.weekik > *{position:relative;z-index:2}
/* Katman elemanları o kuralın dışında: eşit özgüllükte oldukları için "> *" onları
   akışa sokup modülü metrelerce uzatıyordu. */
.weekik > .wbg,.weekik > .wcrack,.weekik > .wstage{position:absolute}
/* Çatlak figürlerin arkasından geçer, sahnenin önünden devam eder: aynı yolun
   alt parçası.
   KESİK GÖRÜNÜYORDU: alt parça %61,5'ten başlıyordu ama koyu yeşil sahne
   (.wstage) %56'da başlıyor. Arada kalan ~%5,5'lik şeritte üst parça
   sahnenin ARKASINDA (z-index 1 < 3), alt parça ise henüz başlamamış
   oluyordu; çatlak tam sınırın altında yirmi küsur piksel kayboluyordu.
   Pay artık sahnenin kendi yüksekliğiyle aynı sayıdan türüyor: .wstage
   height:44% ise çatlağın alt parçası da 56%'dan başlar. İkisinden biri
   değişirse öbürü de değişmeli. */
.weekik > .wcrack.lo{position:absolute;z-index:4;clip-path:inset(56% 0 0 0)}
.weekik > .wspark{position:absolute}
.weekik .wk{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--wacc,var(--brand-hl))}
.weekik .wsoru{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(24px,2.3vw,31px);line-height:1.05;margin-top:2px;color:var(--won,#fff);
  text-shadow:0 2px 10px rgba(0,0,0,.22)}
.wsoru .s1,.wsoru .s2{display:block}
.weekik.light .wsoru{text-shadow:none}
.wmid{flex:1;display:flex;align-items:center;justify-content:center;min-height:40px}
.wmid .ic{width:74px;height:74px;color:var(--wh,var(--brand-hl));opacity:.95;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.3))}
/* Gölge yerine sahne. Figürler havada durmasın diye altlarına katı bir zemin koyuyoruz:
   kavisli üst kenarı vurgu renginde bir bant. Çizim bu bandın ARKASINA giriyor, yani düz
   kesim çizgisi bandın altında kalıyor — bulanık hiçbir şey yok, her kenar keskin. */
/* ÖLÇÜ: bandın tepe noktası çizimin düz kesim çizgisiyle AYNI hizadaydı
   (1440'te 325'e 324). Tepe noktası yalnızca tam ortada; kavis kenarlara
   doğru iniyor, figürlerin bittiği yerde (merkezden ~130px) 11px aşağıda
   kalıyordu. Beyaz kesim çizgisi o 11px boyunca bandın üstünde görünüyor ve
   figürler havada duruyormuş gibi oluyordu.
   İki değişiklik: kavis yarıçapı 64 → 44 (bant daha düz, yatay kesim
   çizgisini daha iyi takip ediyor) ve bant %39 → %42 (tepe ~15px yukarı).
   Artık çizginin görünen her noktası bandın altında. */
.wstage{left:-18%;right:-18%;bottom:0;height:44%;z-index:3;pointer-events:none;
  background:var(--wc-dk,#1d5a3a);
  border-radius:50% 50% 0 0 / 36px 36px 0 0;
  border-top:3px solid var(--wh,var(--brand-hl))}
.wart{display:block;width:calc(100% + 30px);margin:0 -15px -20px;position:relative;z-index:2}
/* Etiket kesimi: çizim yapıştırma bir çıkartma gibi okunsun diye krem kontur. */
.wart img{display:block;width:100%;height:auto;position:relative;
  filter:drop-shadow(2.5px 0 0 var(--brand-cream)) drop-shadow(-2.5px 0 0 var(--brand-cream))
         drop-shadow(0 2.5px 0 var(--brand-cream)) drop-shadow(0 -2.5px 0 var(--brand-cream))}
.weekik.hasart .wmid{align-items:flex-end}
.wopts,.wust,.walt{z-index:4}
.weekik.hasart .wmid{align-items:stretch;padding:2px 0}
.weekik.hasart{gap:8px}
.weekik.hasart .wsoru{font-size:clamp(21px,1.9vw,26px)}
.wopts{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.wopt{position:relative;overflow:hidden;border:2px solid var(--wline,rgba(255,255,255,.42));
  background:var(--wfill,rgba(255,255,255,.10));border-radius:14px;
  padding:13px 15px;text-align:left;cursor:pointer;font-family:var(--nav);font-weight:600;font-size:17px;
  color:var(--won,#fff);display:flex;align-items:center;justify-content:space-between;gap:10px;
  backdrop-filter:blur(2px);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .16s,background .16s}
.wopt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--wacc,var(--brand-hl));
  background:var(--wfill-hi,rgba(255,255,255,.20))}
.wopt:disabled{cursor:default}
.wend{display:flex;align-items:center;gap:8px}
.wopt .wv{display:block;visibility:hidden;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:24px;line-height:1;color:var(--wacc,var(--brand-hl))}
.weekik.done .wopt .wv{visibility:visible}
.weekik.done .wopt:not(.picked){opacity:.5}
.wopt.picked{border-color:var(--wacc,var(--brand-hl));background:var(--wfill-hi,rgba(255,255,255,.20))}
/* Kartlardaki .ikbar ile aynı iskelet: RAY düğme boyunca durur, DOLGU payı
   kadar dolar. Eskiden tek parçaydı ve genişliği 0'dı: oy verilmeden önce
   düğmenin altında hiçbir şey yoktu, kart modülünde ise soluk ray duruyordu.
   Üç yerin aynı dili konuşması için ray buraya da geldi (Cansu, 3 Ekim). */
.wopt .wbar{position:absolute;left:0;right:0;bottom:0;height:5px;width:auto;
  overflow:hidden;background:var(--wtrack,rgba(255,255,255,.24))}
.wopt .wbar i{display:block;height:100%;width:0;border-radius:0 999px 999px 0;
  background:var(--wacc,var(--brand-hl));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.wopt.picked .wbar i{background:var(--wh,var(--brand-hl))}
@media (prefers-reduced-motion:reduce){.wopt .wbar i{transition:none}}
/* BU! damgası markaya ait: kategori ne olursa olsun mor kalır.
   Mahkeme seçeneği de aynı damgayı kullanıyor — kullanıcının işaretlediği
   taraf orada yalnızca kenarlık rengiyle belli oluyordu, oysa sitenin
   "seçtim" işareti bu. Oy verilir verilmez görünüyor (.picked), dosyanın
   kapanmasını beklemiyor; yüzde ise dosya kapanınca geliyor, o yüzden
   damga yüzdenin solunda duruyor. */
.wopt .bu,.mahopt .bu{display:none;background:var(--brand);color:var(--brand-cream);font-family:var(--disp);
  font-weight:var(--disp-w);font-size:13px;line-height:1;padding:5px 8px 6px;border-radius:8px;
  letter-spacing:.03em;transform:rotate(-6deg);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.wopt .bu i,.mahopt .bu i{color:var(--brand-hl);font-style:normal}
.wopt.picked .bu,.mahopt.picked .bu{display:block}
.mahopt .bu{flex:none}
/* Kartlarla aynı iskelet: üstte solda etiket, karşısında künye; en altta solda
   bağlantı, karşısında paylaş. Künye eskiden seçeneklerin hemen altındaydı ve
   paylaş modülün ortasında kalıyordu. */
.wust{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.wsay{flex:0 1 auto;min-width:0;font-family:var(--body);font-size:11.5px;line-height:1.2;
  color:var(--wsoft,rgba(255,255,255,.62));text-align:right;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.wsay b{color:var(--won,#fff);font-weight:600}
.walt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.wall{background:none;border:0;padding:0;cursor:pointer;font-family:var(--nav);
  font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--wacc,var(--brand-hl))}
.wall:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- bitmeyen ikilemler ---------- */
/* Kartlar, banner yanındaki "haftanın ikilemi" modülüyle aynı yapıda:
   krem zemin, marka moru vurgular, büyük soru, ortada kategori ikonu. */
.ikgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1100px){.ikgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.ikgrid{grid-template-columns:1fr}}

/* ---------- ikilem destesi (telefon) ----------
   Izgara yatay bir desteye dönüşüyor. Kaydırma tarayıcının kendi yatay
   kaydırması + scroll-snap; elle yazılmış bir sürükleme ivmeyi, lastik kenarı
   ve klavye erişimini yeniden icat etmek zorunda kalırdı.
   Deste kenardan kenara: .wrap'ın 22px yan payı negatif marjla iptal ediliyor,
   böylece komşu kartlar ekranın kenarından sızıyor. */
/* SOL PAY 64 DEĞİL 22. Simetrik payla ilk kart ortalanabiliyordu ve ekranın
   solunda 64px boşluk kalıyordu — başlık 22'de başlarken kart 64'te. Cansu:
   "ilk ikilem içeriği çok sağa doğru görünüyor".
   Sol pay 22 olunca ilk kartın ortalanması MATEMATİKSEL OLARAK imkânsız
   (scrollLeft -42 gerekirdi), tarayıcı 0'da duruyor ve kart tam başlığın
   altına geliyor. İkinci karttan itibaren iki yanda da yer var, ortalama
   kendiliğinden geri geliyor. Sağ pay 64 kalıyor: son kart ortalanabilsin. */
.ikgrid.deste{display:flex;position:relative;gap:14px;
  margin-inline:-22px;padding:4px 64px 10px 22px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  /* İlk kartın ERİŞİLEBİLİR bir yapışma noktası olmalı. Ortalama hedefi
     scrollLeft -42 isterdi; erişilemeyen hedefte tarayıcılar farklı davranıyor
     ve bazıları ikinci karta atlıyor. İlk kart "start" ile yapışıyor,
     scroll-padding-inline:22 da o noktayı tam scrollLeft 0 yapıyor.
     Pay İKİ YANDA birden: yalnızca solda olsaydı yapışma kutusu asimetrik
     olur ve ortalanan kartlar 11px sağa kayardı. */
  scroll-padding-inline:22px;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;align-items:flex-start}
.ikgrid.deste::-webkit-scrollbar{display:none}
/* Kart genişliği ekrandan 104px eksik: iki yana 52'şer, aradaki 14px boşluk
   düşünce komşudan 38px sızıyor. Daha azında kenardaki şerit "kart" gibi
   okunmuyor, daha fazlasında ortadaki kart daralıyor. */
/* Kart genişliği 104px → 128px eksildi: komşu karttan görünen pay 52'den
   64px'e çıktı. Yanındaki kart "orada bir şey var" demekten "orada BİR KART
   var" demeye geçsin diye; eski payda yalnızca renkli bir şerit görünüyordu.
   Soluk kartın opaklığı da .36 → .46. */
.ikgrid.deste > .ikcard{flex:0 0 calc(100vw - 128px);max-width:none;
  scroll-snap-align:center;scroll-snap-stop:always;
  opacity:.46;transform:scale(.94);transform-origin:center 45%;
  transition:opacity .26s ease,transform .26s ease}
/* Etkin kart tam görünür; komşular sönük ve bir tık küçük. Sönük kartın
   düğmeleri de tıklanmasın — yarım görünen bir seçeneğe yanlışlıkla basmak
   geri alınamayan tek hata olurdu. */
.ikgrid.deste > .ikcard:first-child{scroll-snap-align:start}
.ikgrid.deste > .ikcard:not(.etkin){pointer-events:none}
.ikgrid.deste > .ikcard.etkin{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .ikgrid.deste{scroll-behavior:auto}
  .ikgrid.deste > .ikcard{transition:none;transform:none}
  .ikgrid.deste > .ikcard:not(.etkin){opacity:.5}
}
/* Sayaç şeridi: kaydırmayı keşfetmeyen için düğme, keşfeden için "neredeyim". */
/* Şerit telefonda sekiz, masaüstünde dört kart. Izgara dört sütun; sekiz kart
   iki satır olup "İkiye Bölündük" bölümünü sayfanın en uzun bloğu yapıyordu.
   Destede ise dört kart çabuk bitiyor, orada sekizi taşıyor. */
@media (min-width:621px){ #ikStrip > .ikcard:nth-child(n+5){display:none} }
.ikdeste{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:4px}
.ikdeste[hidden]{display:none}
.ikdnav{flex:none;width:44px;height:44px;border:2px solid var(--line);border-radius:50%;
  background:var(--surface);color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .14s,background .14s,opacity .14s}
.ikdnav svg{width:20px;height:20px}
.ikdnav:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.ikdnav:disabled{opacity:.34;cursor:default}
.ikdsay{min-width:74px;text-align:center;font-family:"IBM Plex Mono",monospace;
  font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ikcard{background:var(--brand-cream);color:var(--ink);border-radius:var(--r-sm);
  box-shadow:var(--shadow-s);padding:20px 20px 18px;display:flex;flex-direction:column;gap:7px;
  position:relative;overflow:hidden;text-align:left}
.ikcard::before{content:"";position:absolute;right:-46px;top:-58px;width:150px;height:150px;
  border-radius:50%;background:var(--icw,var(--brand));opacity:.10}
.ikcard::after{content:"";position:absolute;left:-52px;bottom:-66px;width:140px;height:140px;
  border-radius:50%;background:var(--ich,var(--brand-hl));opacity:.30}
.ikcard > *{position:relative;z-index:2}
/* Üst satır kartın künyesi: solda kategori, tam karşısında kaç kişinin
   tarafını seçtiği. İkisi de kartın "ne olduğunu" söyleyen bilgi, alt alta
   değil yan yana duruyorlar; altta kalan yer sonuca ve linklere kalıyor. */
.ikust{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
/* Etiket tek başına bir satırken .2em aralık taşıyordu; künyeyle aynı satırı
   paylaşınca "SEYAHAT & DOĞA" sığmıyordu. Aralık ve punto burada biraz daralıyor,
   kısaltma yok: kategori adı hep tam okunuyor. */
.ikcat{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ic,var(--brand));flex:none;white-space:nowrap}
.iksay{flex:0 1 auto;min-width:0;font-family:var(--body);font-size:10.5px;line-height:1.2;
  color:var(--ink-3);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iksay b{color:var(--ink);font-weight:600}
/* Taslak: yazılmış ama açılışta öne çıkarılmayan ikilem. Rozet küçük ve renksiz —
   kartın kendi rengiyle yarışmasın, ama editör bir bakışta ayırsın. */
.iktaslak{flex:none;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.08em;
  text-transform:lowercase;color:var(--ink-3);border:1px solid rgba(23,33,59,.24);
  border-radius:999px;padding:1px 7px;line-height:1.5}

/* Başlık iki satır: virgül kanadı bitirir, ikinci kanat alta iner. Yükseklik
   sabit iki satır olduğu için kısa ve uzun sorular aynı yeri kaplar; altındaki
   görseller de bütün kartlarda aynı hizadan başlar. */
.ikcard .ikq{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(19px,1.7vw,25px);line-height:1.06;color:var(--ink);
  background:none;border:0;padding:0;margin-top:-1px;text-align:left;cursor:pointer;
  min-height:2.12em;display:block}
.ikcard .ikq .s1,.ikcard .ikq .s2{display:block}
.ikcard .ikq:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
/* Kartın ortası artık kategori ikonu değil, karşılaştırılan iki şeyin kendisi:
   solda ve sağda dikey görsel, ortada markanın ayracı. Görsel girilmemişse
   aynı yere damarın kodla çizilmiş motifi düşüyor, düzen bozulmuyor.
   (Haftanın ikilemi modülü bundan etkilenmez, o kendi afişini kullanmaya devam eder.) */
/* Ayraç kendi sütununu kaplayınca görsellere yer kalmıyordu; jeton artık iki görselin
   üstünde, tam ortada duruyor. Böylece kartın bütün genişliği ikiliye kalıyor. */
/* flex:1 idi: ızgarada kartlar en uzun karta uzayınca artan boşluğu burası yutuyor,
   görseller kartına göre aşağı kayıyordu. Artık boşluk kartın en altına düşüyor;
   görsel bloğu her kartta aynı yükseklikte ve aynı yerde. */
.ikmid{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;gap:7px;
  align-items:center;padding:8px 0 4px;width:100%}
/* 3/4'tü: düğmeler alçaldıkça kartın ağırlığı görsele kaydırıldı. */
.ikshot{position:relative;display:block;aspect-ratio:7/10;border-radius:12px;overflow:hidden;
  background:var(--surface);box-shadow:inset 0 0 0 1px rgba(21,20,26,.08)}
.ikshot img{width:100%;height:100%;object-fit:cover;display:block}
.ikshot .ph{position:absolute;inset:0;overflow:hidden}
.ikshot .ph i{position:absolute;display:block;opacity:.30}
.ikshot .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
/* Ayraç bu ölçekte küçülüyor; çizgiler kartın kendi kategorisinden renk alıyor. */
.ikmid .vsmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:auto;gap:0;z-index:3;pointer-events:none}
.ikmid .vsmark .ln{display:none}
.ikmid .vstoken{width:31px;height:31px;font-size:13.5px;
  box-shadow:0 0 0 2.5px var(--brand-cream),0 3px 9px rgba(21,20,26,.34)}
/* Düğmeler alt alta dururken hangi görselin hangi seçenek olduğu belli olmuyordu
   (soğanlı/soğansız gibi gözle ayırt edilmesi güç ikililerde iş büsbütün zorlaşıyor).
   Artık her düğme kendi görselinin tam altında: bağı konum kuruyor, metin tekrarı yok. */
/* Düğmenin içinde artık yalnızca ad var. Yüzde ve damga aşağıdaki sonuç şeridine
   taşındı: kutu bir ada yetecek kadar alçak, oy verilince de büyümüyor.
   Ad için iki satırlık yer ayrılı, "ÇAY MI?" ile "COCA-COLA MI?" aynı boyda. */
.ikopts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:5px;align-items:stretch}
.ikopt{position:relative;overflow:hidden;border:2px solid var(--ink);background:#fff;
  border-radius:14px;padding:7px 9px 8px;text-align:center;cursor:pointer;
  font-family:var(--nav);font-weight:600;font-size:13.5px;line-height:1.1;
  letter-spacing:.01em;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .16s}
/* Oy öncesi ad ortalı, 30px'lik satırı tek başına kaplıyor.
   Oy sonrası ad küçülüp yukarı çıkıyor, altına yüzde giriyor: 12 + 18 = 30px,
   yani aynı satır yüksekliği, yani kartın boyu değişmiyor.
   YAN YANA DENENDİ, OLMADI: ad solda yüzde sağda dizilince kart düğmesi 115px
   ve iç genişlik 97px; yüzde 41px alıyor, ada 49px kalıyor ve "SOĞANSIZ" 52px.
   Tek kelimelik uzun adlar ("DOSTOYEVSKİ" 71px) hiçbir kartta sığmıyordu.
   Detayda düğme geniş, orada yan yana duruyor. */
/* Satır 30 → 32px: ad ile yüzde arasına 3px girdi (12 + 3 + 17 = 32). Ölçü
   İKİ durumda da 32 olduğu için oy vermiş ve vermemiş kart yine aynı boyda. */
.ikopt .l{flex:1 1 auto;min-width:0;min-height:32px;display:flex;align-items:center;
  justify-content:center}
.ikopt .p{display:none;flex:none;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:17px;line-height:17px;letter-spacing:.01em;color:var(--ic,var(--brand))}
/* padding DEĞİŞMİYOR: bir ara alta 2px eklemiştim ve kart oy verilince
   402 → 404 oluyordu. Çubuk zaten padding'in üstüne biniyor (overflow:hidden). */
.ikcard.done .ikopt{flex-direction:column;justify-content:center;gap:3px}
.ikcard.done .ikopt .l{flex:0 0 auto;min-height:0;font-size:11.5px;line-height:12px;
  letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
  width:100%;text-align:center}
.ikcard.done .ikopt .p{display:block}
/* Dolu kutuda iki satır da beyaz; yüzdenin kategori rengi orada okunmaz. */
.ikcard.done .ikopt.picked .p{color:#fff}
/* Çubuk düğmenin dibinde. RAY düğmenin tam genişliği, yani ekranda duran
   çizgi %100; DOLGU o rayın payı kadarı. Tek parçayken %57 "yarıya yakın bir
   çizgi" oluyordu ama neyin yarısı olduğu görünmüyordu.
   Seçilmeyen kutu beyaz zeminde: dolgu kategori tonunda. Seçilen kutu dolu
   kategori renginde: dolgu lime, ray beyazın soluğu. */
.ikopt .ikbar{position:absolute;left:0;right:0;bottom:0;height:4px;width:auto;
  overflow:hidden;background:color-mix(in srgb,var(--icw,var(--brand)) 22%,transparent)}
.ikopt .ikbar i{display:block;height:100%;width:0;border-radius:0 999px 999px 0;
  background:var(--icw,var(--brand));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.ikopt.picked .ikbar{background:rgba(255,255,255,.28)}
.ikopt.picked .ikbar i{background:var(--ich,var(--brand-hl))}
@media (prefers-reduced-motion: reduce){.ikopt .ikbar i{transition:none}}
.ikopt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--ic,var(--brand))}
.ikopt:disabled{cursor:default}
.ikcard.done .ikopt:not(.picked){opacity:.55}
/* Seçilen kutu dolu renge geçiyor: kartta gözün ilk gittiği yer senin cevabın.
   Zemin kategorinin koyu tonu (--ic), üstündeki beyaz yazı yedi kategoride de
   en az 5,6:1 ayrışıyor — en zayıfı Yeme İçme ile Gezi, ikisi de AA'nın üstünde. */
.ikopt.picked{border-color:var(--ic,var(--brand));background:var(--ic,var(--brand));color:#fff}

/* Sonuç şeridi (.ikpct) 30 Eylül'de kaldırıldı: yüzdeler düğmenin içine girdi.
   Şerit oy verilmeden görünmüyordu ama yeri ayrılıydı ve kart oy vermemişken
   altında bir avuç boşlukla duruyordu. Bkz. js/4-motor.js → ikOptPctHTML. */

/* Alt satır: solda ikilemin kendi sayfasına giden link, tam karşısında paylaş. */
.ikalt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
/* Dolu daire: işaret zeminden değil zemin işaretten çıkıyor. Beyaz ikon yedi
   kategorinin koyu tonunda da en az 5,6:1 ayrışıyor — dolu seçenek kutusuyla
   aynı ölçüm. Kontur sürümü küçük ölçekte siliniyordu. */
.shbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:0;border-radius:50%;
  background:var(--ic,var(--brand));color:#fff;cursor:pointer;
  transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s,background .14s}
.shbtn:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(21,20,26,.3)}
/* Paylaş ve favori site kontrolü, içerik değil. :root'taki kural aynen:
   "kategori renkleri içeriğe, mor+lime siteye aittir." Beyaz zeminde duran
   paylaş düğmeleri kategori renginden çıkıp markaya döndü — kart ızgarasında
   yedi ayrı renkte daire yerine tek bir mor duruyor, göz de kategoriyi
   pilden okumaya devam ediyor. Renkli panel üstündekiler (.light, mahkeme
   altbilgisi) dışarıda: onlar zaten kendi zeminine göre ayarlı. */
.tcsh,.ikalt .shbtn,#ikVotes .shbtn,.dvsag .shbtn{--ic:var(--brand)}
.shbtn svg{width:16px;height:16px}
/* Renkli zemin üstünde (haftanın ikilemi) daire panelin yazı rengini alıyor,
   ikon panelin kendi koyu tonuna düşüyor. Açık panelde (Gezi sarısı) daire
   lacivert olduğu için ikon kreme dönüyor. */
.shbtn.light{background:var(--won,#fff);color:var(--wc-dk,var(--brand))}
.weekik.light .shbtn.light{color:#FFF3DC}
/* Dokunmatikte 30px küçük kalıyor: telefonda hem düğme hem satır büyüyor. */
@media (max-width:620px){
  .shbtn{width:38px;height:38px}
  .shbtn svg{width:18px;height:18px}
  .walt{min-height:38px}
}
.shnot{font-family:var(--body);font-size:12px;color:var(--ink-3)}
/* Oy verilmiş kartta beliriyordu; artık her kartta duruyor. Kart oy öncesi ve
   sonrası aynı yüksekliğe sahip, satırlar yerinden oynamıyor. */
.ikmore{flex:0 1 auto;text-align:left;font-family:var(--nav);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ic,var(--brand));background:none;border:0;
  padding:0;cursor:pointer;display:block}

/* tek ikilem sayfası — kartın büyütülmüş hâli.
   880px'lik tek kolon: sayfa 1156px ama kartın kompozisyonu bu genişlikte
   kuruluyor. Yayılsaydı iki fotoğraf birbirinden kopardı ve başlık kendi
   seçeneklerinden uzaklaşırdı. */
.ikdetay{max-width:880px;margin:0 auto}
/* Hiza soldan, kartla aynı. Ortalı başlık + sola yaslı seçenek adları iki ayrı
   düzen gibi okunuyordu. */
.ikbig{text-align:left;margin-bottom:22px}
/* Kartın üst satırı: solda kategori, karşısında katılım. Detayda punto
   büyüyor, dil aynı kalıyor. */
.ikdust{margin-bottom:12px;align-items:baseline}
.ikdust .ikcat{font-size:11.5px;letter-spacing:.14em}
/* Sonuç şeridi kartın şeridinin aynısı, detay ölçeğinde. Oy verilene kadar
   yeri ayrılı ama görünmüyor — sayfa oy öncesi ve sonrası aynı boyda. */
/* .ikdpct kuralları kalktı: detayın sonuç şeridi de düğmenin içine taşındı. */
/* Üstündeki konu etiketi kalktı; 10px'lik üst payı da onunla birlikte gitti.
   Tavan 60 → 44: ölçümde 60 punto iki satırda 123px yer kaplıyordu ve dizüstü
   ekranda ad satırını katlanın altına itiyordu (1440x820'de 115px, 1280x720'de
   215px aşağıda). Taban 30'da kaldı, yani telefonda bugünküyle aynı; eğim
   5,4vw'den 4,4'e indi ki tablette ani bir düşüş olmasın. */
.ikbig h1{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(30px,4.4vw,44px);line-height:1.02;margin-top:0}
.ikbig h1 .s1,.ikbig h1 .s2{display:block}
/* Seçenekler birbirinden 300px uzaktı: sütunlar 1fr olduğu için 534px'e
   açılıyor, içindeki 322px'lik kart ortalanıyor ve aradaki boşluk kartların
   kendisinden büyük oluyordu. Artık sütunlar içeriği kadar, grup ortalı ve
   kartlar sayfanın genişliğine yakışacak kadar büyük (400px). Aradaki
   mesafe 14+44+14 = 72px.
   Kural yalnızca #ikDuel'e: aynı .duel kalıbını oyun ekranı da kullanıyor ve
   orada iki seçenek tam genişlikte durmalı. */
#ikDuel{grid-template-columns:1fr auto 1fr;gap:14px}
#ikDuel .opt.frame{max-width:none}
#ikDuel .vs{width:44px}
@media (max-width:700px){#ikDuel{gap:10px}#ikDuel .vs{width:34px}}
/* Fotoğrafın yüksekliği ekrana bağlı: soru, iki fotoğraf, ad ve yüzde tek
   ekranda dursun. 5/6 oranı SABİT DEĞİL, TAVAN — uzun ekranda sınır hiç
   devreye girmiyor (1680x1050'de fotoğraf yine 372x446), kısa ekranda
   kırpılıyor (1280x720'de 372x230). Sabit bir oran denendi ve yetmedi:
   kare fotoğraf + 44 punto başlık 1280x720'de hâlâ 108px aşağıda kalıyordu.
   Kırpma noktası yukarıda: dikey insan fotoğrafında merkez kırpması kafayı
   kesiyordu. Telefona kural YOK — orada başlık 30 punto, çerçeve kare ve
   ad satırı zaten ekranın 325px yukarısında bitiyor. */
@media (min-width:701px){
  #ikDuel .frameshot{max-height:max(230px,calc(100vh - 500px))}
  #ikDuel .frameshot img.cover{object-position:center 28%}
}
/* Seçenek adı karttaki düğmeyle aynı yazı ailesinden. Barlow (gövde fontu)
   kullanıyordu, kartta ise Barlow Condensed var; iki sayfa aynı iki kelimeyi
   iki ayrı fontla yazıyordu. Punto detayda daha büyük, aile aynı. */
/* Ad satırı iki uçlu: solda ad, sağda yüzde. Kartla aynı kalıp, büyütülmüş
   ölçüde. Yüzdenin yeri oy öncesinde de ayrılı (visibility), yani oy
   düğmenin boyunu değiştirmiyor — burada kartın aksine yer var, ad küçülmüyor.
   Üst payı .opt.frame .fad'ın kuralıyla aynı: 10px. */
#ikDuel .fnrow{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:10px}
#ikDuel .fname{flex:1 1 auto;min-width:0;font-family:var(--nav);
  font-weight:600;font-size:18px;letter-spacing:.02em;text-align:left}
#ikDuel .fpct{flex:none;visibility:hidden;font-family:var(--disp);
  font-weight:var(--disp-w);font-size:26px;line-height:1;color:var(--ink-3)}
#ikDuel .opt.picked .fpct{color:var(--cat,var(--brand))}
.duel.revealed #ikDuel .fpct,#ikDuel.revealed .fpct{visibility:visible}
/* Kartla aynı kural: ray tam genişlik (%100), dolgu payı kadar. */
#ikDuel .fbar{position:absolute;left:0;right:0;bottom:0;height:6px;width:auto;
  overflow:hidden;background:color-mix(in srgb,var(--cat,var(--brand)) 16%,transparent)}
#ikDuel .fbar i{display:block;height:100%;width:0;border-radius:0 999px 999px 0;
  background:color-mix(in srgb,var(--cat,var(--brand)) 45%,transparent);
  transition:width .7s cubic-bezier(.2,.8,.2,1)}
#ikDuel .opt.picked .fbar i{background:var(--cat,var(--brand))}
@media (prefers-reduced-motion: reduce){#ikDuel .fbar i{transition:none}}
@media (max-width:700px){
  #ikDuel .fnrow{gap:6px}
  #ikDuel .fname{font-size:15px}
  #ikDuel .fpct{font-size:20px}
}
#ikDuel .opt .name{text-transform:none}
#ikDuel .pctnum{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(26px,3.4vw,38px);
  min-width:auto;line-height:1}
#ikDuel .pct{gap:14px}
#ikDuel .track{height:12px}
/* Gezinme bloğu künye satırının altında, detay kolonunun içinde: kartlarla
   aynı sol/sağ kenar. .serigez'in kendi kuralları geçerli, yalnızca ikilem
   sorusu seri başlığından uzun olduğu için satır sınırı bir fazla. */
.ikgez{margin-top:22px}
.ikgez .gad{-webkit-line-clamp:3}
@media (max-width:700px){.ikgez{gap:10px}}
/* Düellonun künye satırı: iki uç, üstteki iki kartın dış kenarlarıyla aynı
   hizada. Paylaş kartlardaki gibi sağ uçta duruyor, cümlenin içine sıkışmıyor. */
.ikvotes{margin-top:18px;min-height:30px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;font-family:"IBM Plex Mono",monospace;
  font-size:15px;color:var(--ink-2);text-align:left}
.ikvotes .iksag{display:flex;align-items:center;gap:10px}
.ikvotes .iksay{font-size:13px}
.ikvotes b{font-weight:600;color:var(--ink)}
.ikscope{display:inline-block;margin-left:10px;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:var(--ink-3);
  border-radius:999px;padding:3px 8px;vertical-align:middle}

/* ---------- reklam ---------- */
/* Kutular birebir reklam ölçüsünde: yüklenen görselin sağında solunda boşluk kalmaz. */
.adwrap{text-align:center}
.adwrap[hidden]{display:none!important}
.adslot{width:var(--aw);height:var(--ah);margin:0 auto;
  border:2px dashed var(--ink-3);border-radius:10px;background:var(--surface);
  display:flex;align-items:center;justify-content:center;gap:9px;overflow:hidden;flex-wrap:wrap;
  max-width:100%}
.adslot .sid{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--paper);background:var(--ink);padding:3px 9px;border-radius:999px}
.adslot .dim{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-2);letter-spacing:.04em}
@media (max-width:820px){
  .adslot{width:var(--maw,var(--aw));height:var(--mah,var(--ah))}
  .adslot .dim::after{content:" (mobil)"}
}
/* reklam rafı: modül içerik genişliğinde kalır, reklam onun içinde ortalanır */
.adrail{position:relative;background:var(--paper-2);border:1px solid var(--line);
  border-radius:14px;padding:18px 22px;display:flex;align-items:center;justify-content:center}
.adlabel{position:absolute;left:9px;top:0;bottom:0;display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);pointer-events:none;user-select:none}
@media (max-width:820px){
  /* margin-inline:-14px kaldırıldı: raf, yanındaki bütün modüllerden 28px
     geniş kalıyordu ve sayfadan taşıyormuş gibi okunuyordu. */
  .adrail{flex-direction:column;gap:8px;padding:12px 6px;border-radius:12px}
  .adlabel{position:static;writing-mode:horizontal-tb;transform:none;align-self:flex-start;margin-left:4px}
}

/* örnek reklam görselleri: kutuyu birebir doldurur, çerçeve ve etiket kalkar */
.adslot.demo{border-width:0;background:var(--surface) var(--ad) center/contain no-repeat;
  box-shadow:0 1px 0 rgba(0,0,0,.06)}
.adslot.demo .sid,.adslot.demo .dim{display:none}
@media (max-width:820px){
  .adslot.demo{background-image:var(--adm,var(--ad))}
}

/* ---------- panel & oyun ---------- */
.panel{border-radius:var(--r);background:var(--surface);padding:26px;box-shadow:var(--shadow-m)}
/* Üst şerit iki kat: üstte "ne oynuyorum" (kategori + serinin gerçek adı),
   altta "neredeyim" (tur adı + tüm seriyi gösteren çubuk + eşleşme sayacı).
   Eskiden sahne etiketi başlığın yerini tutuyordu ve seri adı hiç görünmüyordu. */
/* ŞERİT BİR TIK FERAH (7 Ekim, Cansu: "çok sıkışık olmasınlar"). Başlık,
   kategori, sayaç ve iki düğme aynı satırda; 14/15 dolguyla düğmeler
   şeridin kenarlarına değiyordu. */
.gamebar{background:var(--surface);border-radius:22px;
  padding:18px 22px 19px;box-shadow:var(--shadow-s);margin-bottom:14px}
.gbtop{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
/* Çıkış düğmesi başlık satırının sağ ucunda. margin-left:auto, sayaçtan
   sonra geliyor; sarma olursa kendi satırına düşüp yine sağa yaslanıyor. */
.gbcik{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.gbtop .quitbtn{margin-left:0;flex:none;height:30px;padding:0 14px;font-size:12.5px}
/* "Seçimini geri al" ile aynı düğme tipi (7 Ekim, ikinci tur — Cansu).
   Önce altı çizili bağlantıydı; iki çerçeveli düğmenin yan yana durmasından
   çekinmiştim, Cansu düğme istedi. Çıkışla arasındaki ayrımı artık renk
   kuruyor: çıkış kırmızımsı (.quitbtn), bu nötr. */
/* SEÇİCİ İKİ SINIFLI OLMAK ZORUNDA. Tek sınıfla yazılınca .btn.sm'in
   padding:9px 17px kuralı daha belirgin kalıyor ve 30px sabit yükseklikle
   birleşince yazı aşağı kayıyordu (üstte 11, altta 4 piksel). Çıkış düğmesi
   .gbtop .quitbtn diye yazıldığı için bu sorunu hiç yaşamadı. */
.gbtop .gbrestart{flex:none;height:30px;padding:0 14px;font-size:12.5px;line-height:1}
/* Onay bekleyen hâl: çerçeve ve yazı uyarı rengine dönüyor. */
.gbrestart.soruyor{color:var(--uyari,#c0392b);border-color:currentColor}
.gbtop .grKisa{display:none}
.gbtop .quitbtn .gqKisa{display:none}
/* Dar ekranda başlık + sayaç + düğme aynı satıra sığmıyor; düğme kısa adına
   iniyor. Yayın sahnesindeki .ysCikUzun/.ysCikKisa ile aynı kalıp. */
@media (max-width:620px){
  .gbtop .quitbtn{padding:0 11px}
  .gbtop .quitbtn .gqUzun{display:none}
  .gbtop .quitbtn .gqKisa{display:inline}
  .gbtop .grUzun{display:none}
  .gbtop .grKisa{display:inline}
  .gbtop .gbrestart{font-size:12px}
}
.gbcat{flex:none;font-family:var(--nav);font-weight:700;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--cat-on,#fff);background:var(--cat,var(--brand));
  border-radius:999px;padding:3px 11px}
.gbtitle{margin:0;min-width:0;font-family:var(--nav);font-weight:700;font-size:20px;
  line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink)}
.gbcount{margin-left:auto;flex:none;font-family:"IBM Plex Mono",monospace;font-size:12px;
  color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Tur adı sadece merdivenin okunamadığı dar ekranda burada tekrar ediyor. */
.gbnow{font-family:var(--nav);font-weight:700;font-size:13.5px;color:var(--cat-ink)}
@media (min-width:821px){.gbnow,.gbsep{display:none}}

/* Tur merdiveni: düz bir dolgu "Çeyrek Final'e geldim" duygusunu vermiyordu.
   Her tur kendi basamağı; bitenler dolu, içinde olduğun kısmen dolu, kalanlar boş.
   Genişlikler o turun eşleşme sayısına bağlı (bak: MERDIVEN_US) — eşit genişlik
   "hep bu kadar seçenek gelecek" hissi veriyordu. */
/* Sayaç iki yerde duruyor ama aynı anda bir tanesi görünüyor: masaüstünde
   merdivenin ucunda (çubuklara yedirilmiş), telefonda üst satırda — orada
   merdivenin yanına sığmıyor ve basamakları eziyordu. */
.gbsteprow{display:flex;align-items:flex-end;gap:14px}
.gbsteprow .gbcount{margin-left:0;padding-bottom:1px}
.gbc-d{display:none}
@media (min-width:821px){.gbc-m{display:none}.gbc-d{display:inline}}
.gbsteps{display:flex;gap:8px;margin-top:12px;flex:1;min-width:0}
.gbstep{flex:1 1 0;min-width:26px;display:flex;flex-direction:column;gap:5px}
.gbslabel{font-family:var(--nav);font-weight:600;font-size:11.5px;letter-spacing:.02em;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.7}
.gbstep.done .gbslabel{opacity:1;color:var(--ink-2)}
.gbstep.on .gbslabel{opacity:1;font-weight:700;color:var(--cat-ink)}
.gbsbar{display:block;height:9px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.gbstep.on .gbsbar{height:12px;margin-top:-2px}
.gbsbar i{display:block;height:100%;width:0;border-radius:999px;background:var(--cat,var(--brand));
  transition:width .45s cubic-bezier(.3,.8,.4,1)}
.gbstep.done .gbsbar i{opacity:.55}
@media (max-width:820px){
  .gbslabel{display:none}
  /* Çubuklar kalınlaştı; üstündeki boşluktan 3px geri alıyoruz ki düelloda
     iki seçenek 360px'lik ekranda da katlamanın üstünde kalsın. */
  .gbsteps{gap:5px;margin-top:6px}
  .gbsteprow{gap:0}
  .gbstep{min-width:15px}
}
.timertrack{height:10px;border-radius:999px;background:var(--paper-2);overflow:hidden;margin-bottom:14px}
.timerbar{height:100%;width:100%;border-radius:999px;background:var(--cat)}
.timerbar.warn{background:var(--cat-hl)}
/* ÜÇ SÜTUN, ORTASI TAM ORTA. Eskiden flex'ti: "Seriden çık" margin-left:auto
   ile sağa gidiyor, klavye şeridi de margin-inline:auto alıyordu. İki öğe
   birden otomatik pay isteyince boşluk ÜÇE bölünüyor ve şerit ortaya değil
   üçte bire oturuyordu. Izgarada orta sütun gerçekten ortada ve düğmelerin
   genişliğinden etkilenmiyor. Otomatik seçim notu kendi satırına düşüyor;
   eskiden şeritle aynı satırda sıkışıyordu. */
.gamefoot{display:grid;grid-template-columns:1fr auto 1fr;gap:8px 14px;align-items:center;
  margin-top:18px;font-size:13.5px;color:var(--ink-3)}
.gamefoot > #gUndo{grid-column:1;justify-self:start}
.gamefoot > .kbdhint{grid-column:2;justify-self:center}
.gamefoot > #gQuit{grid-column:3;justify-self:end}
.gamefoot > .autonote{grid-column:1/-1;grid-row:2;justify-self:center;text-align:center}
/* ÜÇÜNCÜ SÜTUN BOŞTU: "Seriden çık" 4 Ekim'de sağ üste taşınınca burada
   kullanılmayan bir sütun kaldı. Görsel künyesi oraya oturuyor — satırı
   büyütmüyor, "geri al"ın karşısında dengeliyor. */
.gamefoot > .gkaynak{grid-column:3;justify-self:end;min-width:0}
.gkaynak:empty{display:none}
/* Balon YUKARI açılıyor: şerit sayfanın altında, aşağıda yer yok.
   Sağ uçta durduğu için sağa değil sola doğru genişliyor (right:0). */
.gkaynak .mmktip{top:auto;bottom:calc(100% + 8px);left:auto;right:0;
  transform:translateY(-4px)}
.gkaynak .mmk:hover .mmktip,.gkaynak .mmk:focus-within .mmktip,
.gkaynak .mmk.ac .mmktip{transform:none}
/* Oyun ekranında etiket kısalıyor: alt şeritte "Multimedya kaynağı"
   komşusu olan tuş şeridiyle yarışıyordu. Metni CSS gizliyor, ikon ve
   erişilebilir ad duruyor. */
.gkaynak .mmkbtn span{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.gkaynak .mmkbtn::after{content:"Görseller";font-family:"IBM Plex Mono",monospace;font-size:12px}
@media (max-width:560px){
  /* Telefonda üç sütun tek sütuna iniyor; künye kendi satırında ortada. */
  .gamefoot > .gkaynak{grid-column:1/-1;justify-self:center}
  .gkaynak .mmktip{left:50%;right:auto;transform:translate(-50%,-4px)}
  .gkaynak .mmk:hover .mmktip,.gkaynak .mmk:focus-within .mmktip,
  .gkaynak .mmk.ac .mmktip{transform:translate(-50%,0)}
}
/* Mono yalnızca tuş kapaklarında kalıyor; çevresindeki cümle gövde fontunda. */
/* Yayın sahnesindeki şeridin aydınlık zemindeki hâli: aynı mono, aynı
   aralık, aynı "tuş koyu / etiket soluk" ayrımı. Nokta ayraçları kalktı. */
.kbdhint{display:inline-flex;flex-wrap:wrap;gap:4px 20px;
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3)}
.kbdhint span{white-space:nowrap}
.kbdhint b{font-weight:600;color:var(--ink-2)}
.autonote{font-family:var(--body);font-size:12.5px;color:var(--ink)}
/* Çıkış düğme kalıyor ama "geri al"ın yanında değil, barın öbür ucunda:
   kullanıcıyı tutmuyoruz, yanlışlıkla basılacak yerde de durmuyor.
   Basınca ilerleme saklanıyor, ana sayfada kaldığı yerden devam edebiliyor. */
/* Çıkış düğmesi yumuşak bir kırmızı: uyarı gibi değil, "buradan ayrılırsın"
   diyen tatlı bir işaret. Metin/zemin kontrastı 6.8. */
/* Yazı formdaki uyarı kırmızısı (#C0392B), sertliği alınsın diye bir tık geri
   çekilmiş: #BD392B. İki tık daha indirmek kontrastı 4.5'in altına düşürüyor,
   14.5 px'lik bir düğme etiketi için sınırın altı. Yumuşaklığı zemin ve
   kenarlık taşıyor. Kontrast 4.78 / hover 5.26.
   .btn.ghost daha güçlü seçici olduğu için sınıf ikisiyle birlikte yazılıyor. */
.btn.quitbtn{margin-left:auto;background:#F9EBEA;border-color:#ECC4BF;color:#BD392B}
.btn.quitbtn:hover{background:#F4DDDB;border-color:#E3A9A2;color:#A82F23}
@media (max-width:820px){.kbdhint{display:none}}
kbd{border-radius:6px;padding:2px 7px;font-family:"IBM Plex Mono",monospace;font-size:11px;background:var(--paper-2);color:var(--ink-2)}

/* ---------- sonuç ---------- */
/* ---------- sonuç posteri ---------- */
/* Görsel oranları çok değişken (11 kartları 3:2, ikilem görselleri 3:4). Tek bir
   kırpma hepsine uymuyordu; bu yüzden aynı görsel iki kez: arkada bulanık dolgu,
   önde tam sığdırılmış net kopya. Hangi oran gelirse gelsin kapak dolu görünüyor. */
/* --capH: yazının kapladığı alt bant. Net görsel bu bandın üstünde kalıyor, yani
   isim posterin üstünde duruyor ama görselin hiçbir yerini kapatmıyor — 11 kartında
   alt hattaki futbolcular kararmasın diye. Yazı bulanık zeminin üstüne düşüyor. */
/* ---------- sonuç sayfası: kazanan bloğu ----------
   1 Ekim 2026. Eskiden kazanan bir POSTERDİ: sayfanın tamamını kaplayan bir
   görsel, adı görselin içinde, yanında hiçbir şey. İlk ekranda ne seri adı
   ne tek bir cümle vardı. Şimdi iki sütun: solda görsel ve mühür, sağda
   "senin kazananın", ad, yıl, rozet, açıklama, katılım cümlesi ve paylaşım.
   GÖRSEL KIRPILMIYOR — kutu kazananın kendi oranını alıyor, arkadaki bulanık
   kopya boşluğu dolduruyor. */
.rust{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.rust .rbas{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(21px,2.5vw,32px);line-height:1.1;margin:0;color:var(--ink);flex:1 1 320px;min-width:0}
.rust .rkat{flex:none}
.rust .rkat[hidden]{display:none}

/* Görsel sütunu YAZI SÜTUNU KADAR UZUN. Eskiden iki sütun da ortalanıyordu
   ve 310px'lik yatay bir görsel 190px'e düşüyordu: yanındaki yazı bloğunun
   yarısı kadar. Artık satır "stretch", kutu metnin boyunu alıyor ve sütun
   420px'e çıktı, yani görselin kendisi de büyüdü. Kırpma yok: görsel
   kutunun içinde oranını koruyor, arkadaki bulanık kopya boşluğu dolduruyor. */
.rkazanan{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:30px;
  align-items:stretch;background:var(--surface);border-radius:var(--r);
  box-shadow:var(--shadow-l);padding:24px 28px}
/* ÇERÇEVE YOK (3 Ekim 2026). Görsel kategori renginde, bulanık kopyayla
   doldurulmuş, iç dolgulu bir kutunun içindeydi — yani bir çerçevenin.
   Artık yalnızca görselin kendisi duruyor; kutu, bulanık zemin ve dolgu
   kalktı. .rgor görseli KUCAKLIYOR (align-self/justify-self:center),
   yoksa BU! damgası sütunun köşesine kaçıyor, görselin köşesine değil. */
.rgor{position:relative;display:flex;align-items:center;justify-content:center;
  align-self:center;justify-self:center;max-width:100%}
.rmetin{align-self:center}
.rcover{position:relative;max-width:100%;display:block;background:none;
  border-radius:0;overflow:visible}
.rcover .blurbg{display:none}
/* ÇİZİMLİ KAZANAN. Fotoğraf kendi kenarıyla biter, karakalem çizim bitmez —
   saydam bir kesme, beyaz zeminde havada duruyor. Kart dilindeki krem
   levhaya oturuyor ve alt kenara basıyor; aday kartıyla aynı duruş. */
.rcover .rimg.cizim{background:var(--brand-cream);border-radius:var(--r-sm);
  overflow:hidden;display:flex;align-items:flex-end;justify-content:center;
  width:min(420px,78vw);aspect-ratio:1/1}
.rcover .rimg.cizim .ana{max-width:86%;max-height:100%;border-radius:0;filter:none}
.rcover .rimg{position:relative;z-index:1;display:block;padding:0}
/* max-height: uzun dikey görselde blok ekranı yemesin. width:auto şart —
   yoksa dikey görsel kutuyu genişletip oranını bozuyor. */
.rcover .ana{display:block;width:auto;height:auto;max-width:100%;max-height:min(56vh,440px);
  border-radius:var(--r-xs);filter:drop-shadow(0 12px 28px rgba(0,0,0,.38))}
/* Görseli olmayan seride motifli yer tutucu: zemin artık .rcover'da
   olmadığı için rengi kendi üstünde. */
/* Genişlik vw ile sınırlı, yüzdeyle DEĞİL: .rgor artık içeriğini kucaklıyor
   (justify-self:center), yani genişliği belirsiz; yüzde oraya dayanamıyor ve
   420px sabit yer tutucu telefonda sütundan taşıyordu. */
.rcover .phwrap{position:relative;z-index:1;display:block;width:min(420px,78vw);
  aspect-ratio:1/1;background:var(--cat);border-radius:var(--r-sm);overflow:hidden}
.rcover .phwrap .ph{position:absolute;inset:0;display:block;overflow:hidden}
.rcover .phwrap .ph i{position:absolute;display:block;opacity:.26}
.rcover .phwrap .ph i svg{width:100%;height:100%;display:block}

.rmetin{min-width:0}
.rmetin .rkick{display:block;font-family:var(--nav);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cat-ink)}
/* Beyaz zeminde ad artık mürekkep renginde; posterdeki krem/gölgeli hâli
   fotoğrafın üstünde okunmak içindi. */
/* BAŞLIK FONTU burada yeniden tanımlanıyor: eski .champ kuralı silinen
   poster bloğunun içindeydi, ad gövde fontuna (Barlow) düşmüştü — sayfadaki
   tek ince yazı oydu. */
.rmetin .champ{font-family:var(--disp);font-weight:var(--disp-w);
  color:var(--ink);text-shadow:none;font-size:clamp(28px,4vw,50px);
  line-height:1.04;margin-top:6px}
.champ .ryil{white-space:nowrap}
.rmetin .champoa,.rmetin .champacik{color:var(--ink-2)}
/* Paylaş düğmeleri mor kart için çizilmişti: beyaz çerçeve, beyaz yazı,
   şeffaf zemin. Beyaz zeminde görünmez oluyorlar — burada mürekkep rengine
   dönüyorlar. Ana düğme (Story) lime, o iki yerde de aynı. */
.rpay{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.rpay .kmlPayK{display:block;margin-bottom:10px;color:var(--ink-3)}
.rpay .pbtn{border-color:var(--line);color:var(--ink)}
.rpay .pbtn:hover{background:var(--paper-2);border-color:var(--ink-3)}
.rpay .pbtn.ana{background:var(--brand-hl);border-color:var(--brand-hl);color:var(--ink)}
.rpay .pbtn.ana:hover{background:#d6f95f;border-color:#d6f95f}
.rpay .shnot{display:block;margin-top:9px;font-size:12.5px;color:var(--ink-3)}
@media (max-width:820px){
  .rkazanan{grid-template-columns:1fr;gap:20px;padding:16px}
  .rcover .rimg{padding:10px}
  .rcover .ana{max-height:min(42vh,320px)}
  .rmetin .champ{font-size:clamp(26px,7.4vw,40px)}
}

/* ---------- karakter bandı ----------
   Sonuç sayfasında karakter, yolculuktan ayrı bir bant. Eskiden ikisi tek
   kartın iki lobuydu ve kart "hem sen kimsin hem turnuva nasıl geçti" diye
   iki soruyu birden cevaplıyordu. */
.krband{display:flex;align-items:center;gap:20px;margin-top:22px;padding:18px 24px;
  background:var(--brand);color:#fff;border-radius:var(--r);box-shadow:var(--shadow-m)}
.krband[hidden]{display:none}
.krband.nadir{box-shadow:var(--shadow-m),0 0 0 2px var(--brand-hl)}
.krav{flex:none;width:86px;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  display:block;background:rgba(0,0,0,.22)}
.krav img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
.krav .kmlHarf{display:grid;place-items:center;width:100%;height:100%;font-size:40px}
.krmet{min-width:0}
.krkick{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand-hl)}
.krband .nadirEt{margin:6px 0 0}
.krad{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  font-size:clamp(21px,2.4vw,28px);line-height:1.05;margin:6px 0 0;color:#fff}
/* text-wrap:balance: düğme gelince satır sonu rastgele bir kelimede
   kırılıyordu ("Kararların hızlı, sonuçların beklenmedik. Çoğunluğun /
   favorisi"). Balance satırları eşitleyip anlamlı yerden bölüyor. */
/* ÖLÇÜ SINIRI YOK. 62ch, 836 piksellik bandın içinde 500 pikselde kesiyordu:
   cümle sağda koca bir boşluk dururken ortasından kırılıyor ve hata gibi
   görünüyordu (Cansu). Genişliği artık bandın kendisi belirliyor; cümleler
   zaten .ksat ile satır satır ayrılmış durumda. */
.krmes{margin:7px 0 0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.84)}
.krmes .ksat{display:block;text-wrap:pretty}
.krmet{flex:1 1 auto}
.krgo{flex:none;white-space:nowrap;align-self:center;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px}
.krgo b{font-size:19px;line-height:1;transition:transform .16s}
.krgo:hover b{transform:translateX(3px)}
@media (max-width:620px){
  .krband{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 18px}
  .krav{width:74px}
  .krgo{align-self:stretch;justify-content:center}
}

/* ---------- ağaçtaki rozetler ----------
   Üç an — en büyük ters köşen, en yalnız seçimin, en çok zorlandığın — artık
   ayrı bir tabloda değil, kendi eşleşmesinin üstünde. Mutlak konumlu: .akutu
   bir ızgara, rozet onun hücrelerine girmemeli. */
.akutu{position:relative}
.asampkutu{position:relative}
/* Rozet kutunun üst kenarına BİNİYOR (alt ucu +2px içeride) ve sola 10px
   içeriden başlıyor. Havada dururken hangi eşleşmeye ait olduğu
   okunmuyordu — Cansu: "üstteki ikiliye mi alttaki ikiliye mi belli
   olmuyor". Kutular arası boşluk da 22'den 34'e çıktı (AG.gy). */
/* AĞACIN KENDİ ZEMİNİ. Sayfadaki her modül bir kartın içinde; ağaç tek
   başına sayfanın kremine oturuyordu ve havada duruyordu. Dolgu
   .rkazanan ile aynı (24px 28px) — ağaç zemine yapışmıyor. AG ölçüleri
   bu dolguya göre: 4*(200+28)+188 = 1100 = 1156 - 56, yani masaüstünde
   yatay kaydırma çıkmıyor. */
#rPath{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-m);
  padding:24px 28px;margin-top:4px}
@media (max-width:820px){ #rPath{padding:18px 16px} }
.arozsar{position:absolute;left:10px;top:-15px;display:flex;gap:5px;white-space:nowrap;z-index:3}
.aroz{display:inline-flex;align-items:center;font-style:normal;
  font-family:"IBM Plex Mono",monospace;font-size:8.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;background:var(--brand);color:#fff;border-radius:999px;
  padding:3px 8px;line-height:1.3}
.akutu.rozetli{border-color:var(--brand)}
.asampkutu.rozetli .aroz{background:var(--brand-hl);color:var(--ink)}

/* ---------- halk oyu kartı ---------- */
.oykart{margin-top:18px;background:var(--surface);border-radius:var(--r-sm);
  box-shadow:var(--shadow-m);padding:22px 24px 24px}
.oykart[hidden]{display:none!important}
.oytop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.oykick{font-family:var(--nav);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.vtag{margin-left:auto;background:var(--cat);color:var(--cat-on);border-radius:999px;
  padding:6px 15px;font-family:var(--nav);font-weight:700;font-size:12.5px;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.oybar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--paper-2)}
.oyseg{display:block;height:100%}
.oyseg.me{background:var(--cat);width:50%;transition:width .8s cubic-bezier(.3,.9,.3,1)}
.oyseg.other{background:var(--paper-2);flex:1}
.oylegend{display:flex;gap:20px;flex-wrap:wrap;margin-top:11px;font-size:13px;color:var(--ink-2)}
.oylegend b{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.oylegend .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px}
.oylegend .dot.me{background:var(--cat)}
.oylegend .dot.other{background:var(--line)}
.oyline{margin:14px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink);max-width:52ch}
.oyline b{font-weight:700;color:var(--cat-ink)}

/* ---------- paylaş ---------- */
/* Eskiden mono bir <pre> bloğuydu; terminal çıktısı gibi duruyordu. Artık
   gönderilmeyi bekleyen bir mesaj balonu — amaç bilgi vermek değil, göndertmek. */
.paylas{margin-top:18px;background:var(--surface);border-radius:var(--r-sm);
  box-shadow:var(--shadow-m);padding:22px 24px 24px;
  border-left:5px solid var(--brand)}
.paylas[hidden]{display:none!important}
.pykick{font-family:var(--nav);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand)}
.pyt{margin:7px 0 15px;font-family:var(--nav);font-weight:700;font-size:clamp(19px,2.4vw,25px);
  line-height:1.22;color:var(--ink);max-width:26ch}
.pyt b{color:var(--brand)}
.pybaloncuk{position:relative;display:inline-block;max-width:min(100%,46ch);
  background:var(--brand-cream);color:var(--ink);border-radius:16px 16px 16px 4px;
  padding:14px 17px;font-size:14.5px;line-height:1.62;white-space:pre-wrap}
.pyrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}

/* ---------- seri dökümü ---------- */
/* Tablo gitti: her eşleşme bir kart satırı, seçtiğin renkli ve görselli,
   elediğin soluk ve üstü çizili. Son turlar açık, kalabalık ilk turlar katlı. */
.dokum{display:flex;flex-direction:column;gap:10px}
.turblok{background:var(--surface);border-radius:var(--r-sm);box-shadow:var(--shadow-s);overflow:hidden}
.turblok > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:14px 18px;user-select:none}
.turblok > summary::-webkit-details-marker{display:none}
.turblok > summary::after{content:"▾";margin-left:auto;color:var(--ink-3);font-size:13px;
  transition:transform .18s}
.turblok[open] > summary::after{transform:rotate(180deg)}
.turblok > summary:hover{background:var(--paper-2)}
.tbad{font-family:var(--nav);font-weight:700;font-size:16px;color:var(--cat-ink);
  text-transform:uppercase;letter-spacing:.02em}
.tsay{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3)}
.maclar{border-top:1px solid var(--line)}
.mac{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:12px;
  padding:9px 18px;border-bottom:1px solid var(--line)}
.mac:last-child{border-bottom:0}
.mac:nth-child(even){background:var(--paper-2)}
.mtaraf{display:flex;align-items:center;gap:10px;min-width:0}
.mtaraf.sag{justify-content:flex-end;text-align:right}
/* Yatay (11 kartı) ve dikey (ikilem) görseller aynı kutuyu paylaşıyor; 3:2 kutu
   ikisinde de tanınabilir bir parça gösteriyor. */
.mgor{flex:none;width:54px;height:36px;border-radius:8px;overflow:hidden;background:var(--paper-2);
  box-shadow:0 1px 0 rgba(0,0,0,.07)}
.mgor img{width:100%;height:100%;object-fit:cover;display:block}
.mgor img.contain{object-fit:contain;background:var(--surface)}
.mad{font-weight:700;font-size:14px;color:var(--cat-ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mad .myil{font-style:normal;font-weight:500;font-size:12.5px;color:var(--ink-3);margin-left:5px}
.mkazanan::before{content:"";flex:none;width:3px;align-self:stretch;min-height:26px;
  border-radius:99px;background:var(--cat)}
/* Elenen: üstü çizili değil, küçük ve soluk. Çizgi hem okunmayı zorlaştırıyor
   hem satırı kirletiyordu. */
.melenen .mad{font-weight:500;font-size:13px;color:var(--ink-3);white-space:normal}
.meledi{flex:none;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);opacity:.7}
.mpct{flex:none;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;background:var(--paper-2);border-radius:999px;
  padding:4px 10px;white-space:nowrap}
.mac:nth-child(even) .mpct{background:var(--surface)}
/* Telefonda dört sütun kazananın adını "Fener…" diye kesiyordu. Satır üçe
   bölünüyor: kazanan tam genişlikte, altında kimi elediği, altında yüzde. */
@media (max-width:640px){
  .mac{grid-template-columns:auto minmax(0,1fr);row-gap:5px;padding:11px 14px;column-gap:8px}
  .mac .mkazanan{grid-column:1/-1}
  .mac .mkazanan .mad{white-space:normal}
  .mac .meledi{grid-column:1;align-self:center}
  .mac .melenen{grid-column:2;min-width:0}
  .mac .melenen .mad{white-space:normal}
  .mpct{grid-column:1/-1;justify-self:start;min-width:0}
  .mad{font-size:13.5px}
  .mgor{width:46px;height:31px}
}
.regret{border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow-m);padding:22px 26px}
.regret .rl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.regret .rt{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;font-size:clamp(18px,2.6vw,27px);line-height:1.04;margin-top:6px}
.regret .rt em{font-style:normal;color:var(--cat-ink)}
.reveal-in{animation:riseIn .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* ---------- sonuç arşivi ----------
   Sayfa kategori bağımsız tek bir yığındı ve her seri bütün favori
   ikililerini tabloya döküyordu. Şimdi: kategori grupları, seri başına
   tek akordeon, kapalıyken kalın bant. */
.arUst{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.arAra{width:100%;max-width:none;margin-left:0;padding:12px 16px}
.arAra input[type="text"]{font-size:15px}
.arKat{display:flex;flex-wrap:wrap;gap:8px}
.arKat .tag b{margin-left:6px;font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:11.5px;opacity:.55}

/* Seri detayındaki arşiv bloğu: arşiv sayfasının modülünün aynısı, yalnızca
   üstünde bir künye etiketi ve kendi boşluğu var. */
.sarsiv{margin-top:26px}
.sarkick{display:block;margin-bottom:12px}
/* Arşivde karşılığı olmayan seri. Blok eskiden hiç çizilmiyordu ve sayfanın o
   bandı boş kalıyordu. Kutu arşiv kartının sakin kardeşi: aynı köşe, aynı
   zemin, çerçevesi kesik çizgi — "burada bir şey yok, henüz". */
.sarbos{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;
  border:1.5px dashed var(--line);border-radius:14px;background:var(--surface);padding:16px 18px}
.sarbos p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.sarbos p b{font-weight:600;color:var(--ink)}
.sarbos .btn{flex:none}
.arsonuc.gizli em{font-style:normal;font-family:var(--nav);font-weight:600;
  font-size:13px;letter-spacing:.02em;color:var(--ci);white-space:nowrap}
@media (max-width:560px){.arsonuc.gizli em{font-size:12px}}
.arliste{display:flex;flex-direction:column;gap:34px}
.argrup{display:flex;flex-direction:column;gap:10px}
.argbas{display:flex;align-items:center;gap:10px;margin:0 0 2px;
  font-family:var(--nav);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.argnokta{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c)}
.argsay{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;
  color:var(--ink-3);background:var(--paper-2);border-radius:99px;padding:2px 9px}

.arkart{background:var(--surface);border-radius:var(--r-sm);box-shadow:var(--shadow-s);
  overflow:hidden;border-left:6px solid var(--c)}
.arbant{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto) 26px;align-items:center;gap:18px;
  padding:17px 20px}
.arbant::-webkit-details-marker{display:none}
.arbant:hover{background:var(--paper-2)}
.arbas{font-family:var(--disp);font-weight:var(--disp-w);font-size:19px;line-height:1.15;
  color:var(--ink);min-width:0}
.arsonuc{display:flex;align-items:center;gap:10px;min-width:0;justify-content:flex-end}
.arsonuc b{font-size:15px;font-weight:700;color:var(--ci);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arsonuc i{flex:none;font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  color:var(--ink);background:var(--brand-hl);border-radius:99px;padding:3px 9px}
.arok{justify-self:end;width:26px;height:26px;border-radius:50%;background:var(--paper-2);
  position:relative}
.arok::before,.arok::after{content:"";position:absolute;left:50%;top:50%;
  width:11px;height:2px;border-radius:2px;background:var(--ink-2)}
.arok::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .18s}
.arok::before{transform:translate(-50%,-50%)}
.arkart[open] .arok{background:var(--c)}
.arkart[open] .arok::before,.arkart[open] .arok::after{background:#fff}
.arkart[open] .arok::after{transform:translate(-50%,-50%) rotate(0deg)}

.argovde{padding:0 20px 18px;border-top:1px solid var(--line)}
.arbaslik{display:flex;justify-content:space-between;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);padding:13px 0 6px}
/* Birinci satır listenin cevabı; bir tık öne çıkıyor. Kalınlık zaten vardı
   (.ilk .arad/.arsn) ama satırın kendisi komşularıyla aynı duruyordu:
   kategori renginin çok soluk bir zemini, sol kenarda ince bir çubuk ve
   biraz daha yüksek bir satır. Yüzde de kategori renginde. */
.arsat.ilk{background:color-mix(in srgb,var(--c) 7%,transparent);
  border-radius:10px;padding:11px 10px;margin:0 -10px;border-top:0;
  box-shadow:inset 3px 0 0 var(--c)}
.arsat.ilk+.arsat{border-top:0}
.arsat.ilk .arpct{color:var(--ci);font-weight:700;font-size:13.5px}
.arsat.ilk .arbar i{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent)}
.arsira{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.arsat{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(80px,190px) 54px;
  align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.arsat:first-child{border-top:0}
.arsat.vur{background:var(--brand-hl);border-radius:8px;
  box-shadow:0 0 0 5px var(--brand-hl)}
.arsn{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);text-align:right}
.arsat.ilk .arsn{color:var(--ci);font-weight:700}
.arad{font-size:14.5px;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arsat.ilk .arad{font-weight:700}
.arad small{display:block;font-size:12px;color:var(--ink-3);font-weight:400}
/* Adayın kendi metni (parça listesi / dize). Tamamı HTML'de duruyor —
   Google'ın okuması için — ama ekranda tek satır: taşanı üç nokta kesiyor.
   Sakin ve italik: satırın asıl bilgisi ad ve yüzde, bu bir dipnot. */
.arad .armetin{display:block;font-style:normal;font-size:11.5px;line-height:1.35;
  color:var(--ink-3);font-weight:400;opacity:.85;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arsat.ilk .arad .armetin{font-weight:400}
/* Seri sayfasında havuzun tamamı HTML'e yazılıyor; ilk 10'un ötesi
   "+N aday daha" düğmesine basılana kadar yalnız GÖRSEL olarak kapalı. */
.arsat.kapali{display:none}
.arbar{height:8px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.arbar i{display:block;height:100%;border-radius:99px;background:var(--c)}
.arpct{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-2);text-align:right}
.arhepsi{margin-top:12px;background:var(--paper-2);border:0;border-radius:99px;
  padding:8px 15px;font-family:var(--nav);font-weight:600;font-size:13px;
  color:var(--ink-2);cursor:pointer}
.arhepsi:hover{background:var(--brand-hl);color:var(--ink)}
.aralt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3)}
.arlink{background:none;border:0;padding:0;cursor:pointer;font-family:var(--nav);
  font-weight:700;font-size:13.5px;color:var(--brand)}
.arlink:hover{text-decoration:underline}
.arbos{margin:26px 0;font-size:15.5px;color:var(--ink-2)}

@media (max-width:720px){
  .arbant{grid-template-columns:minmax(0,1fr) 26px;gap:6px 14px;padding:14px 16px}
  .arbas{font-size:17px}
  .arsonuc{grid-column:1;justify-content:flex-start}
  /* Yerleşim ARŞİV bandına ait: orada satır telefonda iki satıra bölünüyor
     ve ok iki satırın ortasında duruyor. Seçicisi .arok'tu; aday listesi
     aynı oku yeniden kullanınca bu kural oradaki dizilimi de bozdu
     (ok ikinci sütuna atlayıp adı sağa itiyordu). Bandına bağlandı. */
  .arbant > .arok{grid-area:1/2/3/3;align-self:center}
  .argovde{padding:0 16px 16px}
  .arsat{grid-template-columns:24px minmax(0,1fr) 52px;gap:10px}
  .arbar{display:none}
  .arliste{gap:28px}
}

.tablewrap{overflow-x:auto;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-m)}
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th,.table td{text-align:left;padding:13px 17px;border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:none}
.table th{font-family:var(--nav);font-weight:600;font-size:13.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);background:var(--paper-2)}
.table td.num{font-family:"IBM Plex Mono",monospace}

/* ---------- editör ---------- */
.form{display:grid;gap:17px;grid-template-columns:repeat(auto-fit,minmax(264px,1fr))}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--nav);font-weight:600;font-size:13.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.field .hint{font-size:12.5px;color:var(--ink-3)}
input[type="text"],input[type="email"],textarea,select{border:2px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);padding:11px 14px;font-family:inherit;font-size:15px;width:100%}
textarea{resize:vertical;min-height:98px;line-height:1.5}
/* Tüm form alanlarında odak dili tek: mor kenar + yumuşak mor halka.
   Genel :focus-visible halkası burada devre dışı, yoksa iki halka üst üste biniyor. */
input[type="text"]:focus,input[type="email"]:focus,textarea:focus,select:focus{border-color:var(--brand);outline:none}
input[type="text"]:focus-visible,input[type="email"]:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.poolrow{display:grid;grid-template-columns:26px 1fr 152px;gap:9px;align-items:center;margin-bottom:8px;
  padding-left:12px;border-radius:var(--r-xs)}
.poolrow .n{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);text-align:right}
.lvl1{box-shadow:inset 5px 0 0 #E0392A}.lvl2{box-shadow:inset 5px 0 0 #F0A81E}.lvl3{box-shadow:inset 5px 0 0 var(--line)}
.out{border-radius:var(--r-sm);background:var(--paper-2);padding:17px;font-family:"IBM Plex Mono",monospace;
  font-size:12px;line-height:1.55;white-space:pre;overflow-x:auto;max-height:330px;color:var(--ink-2)}

/* ---------- yayıncı ---------- */
.stream{background:#0B0B0D;border-radius:var(--r);padding:26px;box-shadow:var(--shadow-l)}
.stream .gamebar{background:#16161A;color:#EFEDE8;box-shadow:none}
/* Yayın modu şeridi eski tek satırlık düzeninde kalıyor: orada seri adı ve
   ilerleme çubuğu gerekmiyor, sahne etiketi + tur yeterli. */
.stream .gamebar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:999px;padding:12px 22px}
.stream .gamebar .scenestrip{font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase}
.stream .gamebar .round{font-family:var(--nav);font-weight:700;font-size:16px;
  text-transform:uppercase;margin-left:auto;color:var(--cat-hl)}
.stream .gamebar .scenestrip{color:#9B97A3}
.stream .timertrack{background:#232328}
.stream .opt{min-height:226px}
.streamnote{font-size:12.5px;color:var(--ink-3);margin-top:12px}

.callout{border-radius:var(--r-sm);background:var(--paper-2);padding:15px 19px;font-size:14px;color:var(--ink-2);
  box-shadow:inset 4px 0 0 var(--brand)}
.bubble{background:var(--surface);border-radius:var(--r-sm);padding:13px 18px;font-size:15px;color:var(--ink-2);
  display:inline-block;box-shadow:var(--shadow-s)}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.split2 .panel{display:flex;flex-direction:column}
.pkick{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand)}
.split2 .panel h2{font-size:clamp(22px,2.4vw,28px);margin:10px 0 12px;text-transform:none;line-height:1.1}
.split2 .panel p{margin:0 0 18px;color:var(--ink-2);font-size:15px;line-height:1.5}
.sugdone{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px;min-height:52px}
/* Mühür burada akışın içinde duruyor; ".stamp" varsayılanı mutlak konumlu. */
.sugstamp{position:static;right:auto;bottom:auto;flex:none}
.sugdonetxt{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  font-size:clamp(20px,2.2vw,26px);line-height:1;color:var(--brand)}
.sugagain{background:none;border:0;padding:0;cursor:pointer;font-family:var(--nav);font-weight:600;
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);width:100%;text-align:left}
.sugagain:hover{color:var(--brand)}
.psug .btn.prime,.pstream .btn.prime{background:var(--brand);border-color:var(--brand);color:#fff}
.psug .btn.prime:hover,.pstream .btn.prime:hover{background:#5620AE;border-color:#5620AE}
/* ---------- Türkiye ne dedi şeridi ----------
   Krem zeminde ince bir bant: banner'ın hemen altında ama onunla yarışmıyor.
   Her öğe tıklanabilir ve doğrudan ilgili içeriğe gidiyor. */
.kararband{display:flex;align-items:center;gap:18px;
  background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);
  padding:14px 18px;box-shadow:var(--shadow-s)}
.kbkick{flex:none;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);max-width:90px;line-height:1.35}
.kbrow{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;gap:0;overflow:hidden}
.kbit2{flex:1 1 0;min-width:0;display:flex;align-items:baseline;gap:9px;
  background:none;border:0;border-left:1px solid var(--line);padding:4px 14px;
  cursor:pointer;text-align:left;font:inherit;color:inherit}
.kbrow > .kbit2:first-child{border-left:0;padding-left:0}
.kbit2:hover .kbsoru{color:var(--brand)}
.kbpct{flex:none;font-family:var(--disp);font-weight:var(--disp-w);font-size:26px;
  line-height:1;color:var(--brand)}
.kbsoru{min-width:0;font-size:13px;line-height:1.3;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .14s}
.kbsoru b{color:var(--ink);font-weight:700}
.kball{flex:none;background:none;border:0;cursor:pointer;
  font-family:var(--nav);font-weight:600;font-size:13px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--brand);white-space:nowrap;padding:4px 0}
.kball:hover{color:#5620AE;text-decoration:underline}
@media (max-width:980px){
  .kararband{flex-wrap:wrap;gap:12px 16px;padding:14px}
  .kbkick{max-width:none}
  .kbrow{flex-basis:100%;order:3;flex-wrap:wrap;gap:10px 0}
  .kbit2{flex:1 1 44%}
  .kball{margin-left:auto}
}
@media (max-width:620px){
  .kbrow{display:grid;grid-template-columns:1fr;gap:0}
  .kbit2{flex:none;border-left:0;border-top:1px solid var(--line);padding:9px 0}
  .kbrow > .kbit2:first-child{border-top:0;padding-top:2px}
  .kbpct{font-size:23px}
  .kbsoru{-webkit-line-clamp:2}
}

/* ---------- seçim profili bandı ----------
   Ana sayfadaki tek üyelik çağrısı. Zemin marka moru; üstünde kullanıcının
   kendi oynadığı damarların ikonları duruyor — jenerik bir soru işareti yerine
   profilin neyden oluştuğunu anlatan bir doku. Uyum yüzdesi burada yok:
   metin onu keşfedilecek şeylerden biri olarak vaat ediyor, peşin vermiyoruz. */
/* Bant iki kanat + koyu eylem seridi. Sol kanat kisisel (senin kartin),
   sag kanat vaat (ozel seri), alttaki serit ikisini tek bir girise bagliyor. */
.profilbant{position:relative;overflow:hidden;border-radius:var(--r);
  box-shadow:var(--shadow-l);display:flex;flex-direction:column}
.pbust{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.pbyan{position:relative;padding:26px 30px;display:flex;align-items:center;gap:22px}
.pbsol{background:linear-gradient(112deg,#5A21B8 0%,var(--brand) 46%,#7530ED 100%);
  color:var(--brand-cream)}
/* Sag kanat krem: iki vaat ayni renkte olsaydi tek bir uzun metin gibi
   okunurdu; renk ayrimi "bunlar iki ayri sey" diyor. */
.pbsag{background:var(--brand-cream);color:var(--ink);
  flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
.pbsag[hidden]{display:none}
/* Sag kanat artik bagli: niyeti adrese tasiyor (#/giris/ozel). */
a.pbsag{text-decoration:none;transition:background .16s}
a.pbsag:hover{background:#FCF3E2}
.gniyet{margin:0 0 14px;padding:11px 14px;border-radius:12px;background:rgba(108,43,217,.08);
  border-left:3px solid var(--brand);font-size:14px;line-height:1.5;color:var(--ink-2)}
.pbust:has(.pbsag[hidden]){grid-template-columns:1fr}
/* Şerit artık bandın TEPESİNDE (eski adı .pbalt). Bandın ne vaat ettiğini
   söyleyen cümle iki kanattan önce okunuyor; altta ayrı bir giriş bandı yok. */
.pbtepe{background:var(--ink);color:rgba(247,235,212,.94);
  padding:16px 30px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.pbtepemes{margin:0;font-size:14.5px;line-height:1.45}
.pbKisa,.pbgoKisa{display:none}

.pbkick2{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.pbad2{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(24px,2.7vw,36px);
  line-height:1.02;margin:9px 0 10px;color:var(--ink);letter-spacing:.01em;
  display:flex;align-items:flex-start;gap:11px}
.pbsim{width:.78em;height:.78em;flex:none;margin-top:.1em;fill:var(--brand)}
.pbmes2{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
/* İnce neon hat: bandın üstünde marka imzası. */
.pbsol::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand-hl) 0%,rgba(201,242,75,.25) 52%,transparent 100%);z-index:3}
.pbart{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;--mo:.72;
  -webkit-mask-image:linear-gradient(86deg,transparent 14%,#000 52%,#000 100%);
  mask-image:linear-gradient(86deg,transparent 14%,#000 52%,#000 100%)}
.pbart i{position:absolute;display:block;color:var(--brand-hl);opacity:.15}
.pbart svg{display:block;width:100%;height:100%;fill:currentColor}
.pbsol > *:not(.pbart){position:relative;z-index:2}
/* Avatar bir çıkartma gibi: hafif eğik, neon kenarlı, derin gölgeli. */
.pbAvatar{width:104px;aspect-ratio:3/4;flex:none;border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,#3B1580 0%,#1B0940 100%);
  box-shadow:0 0 0 2.5px var(--brand-hl),0 16px 32px rgba(0,0,0,.42);
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-3deg);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.profilbant:hover .pbAvatar{transform:rotate(-3deg) translateY(-3px)}
.pbAvatar img{width:100%;height:100%;object-fit:cover;display:block}
.pbHarf{font-family:var(--disp);font-weight:var(--disp-w);font-size:50px;color:var(--brand-hl)}
.pbmetin{flex:1 1 auto;min-width:0}
.pbkick{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand-hl)}
/* Çizim + altındaki nadir rozeti tek sütun. Rozet statik: mutlak konumda
   avatarın köşesine oturttuğumda 104px'lik çizimin yüzünü kapatıyordu. */
.pbgor{flex:none;display:flex;flex-direction:column;align-items:center;gap:9px}
.pbnadroz[hidden]{display:none}
.pbnadroz .nadirroz{position:static}
.profilbant.nadir .pbAvatar{box-shadow:0 0 0 3px var(--brand-hl),
  0 0 0 8px rgba(201,242,75,.20),0 16px 32px rgba(0,0,0,.42)}
.pbad{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(26px,3vw,40px);
  line-height:1.0;margin:7px 0 9px;color:#fff;letter-spacing:.01em;
  text-shadow:0 3px 0 rgba(0,0,0,.16)}
.pbmes{margin:0;font-size:14.5px;line-height:1.5;color:rgba(247,235,212,.95)}
.btn.lime{background:var(--brand-hl);border-color:var(--brand-hl);color:var(--ink)}
.btn.lime:hover{background:#D6F76B;border-color:#D6F76B}
.pbgo{flex:none;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;
  gap:9px;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.pbgo b{font-size:19px;line-height:1;transition:transform .16s}
.pbgo:hover b{transform:translateX(3px)}
@media (max-width:940px){
  .pbust{grid-template-columns:1fr}
  .pbyan{padding:22px}
  .pbmetin{flex:1 1 200px;min-width:0}
  /* ŞERİT TEK SATIR. flex-wrap ile düğme kendi satırına düşüp tam genişlik
     oluyordu: bandın tepesinde 80 piksellik kalın bir "giriş yap" bloğu.
     Artık cümle solda iki satır, düğme sağında ve kendi eninde. */
  .pbtepe{padding:14px 22px;flex-wrap:nowrap;align-items:center;gap:14px}
  .pbtepemes{flex:1 1 auto;min-width:0;font-size:13.5px}
  .pbgo{flex:none;padding:9px 14px;font-size:12.5px;gap:7px}
  .pbgo b{font-size:16px}
  /* ŞERİT ALTA. Telefonda her şey alt alta olduğu için şerit üstteyken
     sayfa "önce giriş yap" deyip faydaları sonra sayıyordu (Cansu).
     Masaüstünde iki kanat zaten yan yana, orada şerit üstte kalıyor. */
  .profilbant{display:flex;flex-direction:column}
  .pbust{order:1}
  .pbtepe{order:2}
  /* Krem kanadin ustunde ince bir ayirici: iki kanat alt alta gelince
     renk degisimi tek basina sinir gibi okunmuyor. */
  .pbsag{box-shadow:inset 0 3px 0 var(--brand-hl)}
}
@media (max-width:520px){
  .pbkick{font-size:9.6px;letter-spacing:.12em;line-height:1.5}
  .pbyan{padding:20px 18px;gap:16px}
  .pbAvatar{width:84px}
  .pbtepe{padding:14px 18px}
}
@media (max-width:620px){
  /* TELEFONDA CÜMLE YOK, YALNIZ DÜĞME. Cümle düğmenin yanında iki satıra
     sarıp şeridi kalınlaştırıyordu; faydaları zaten hemen altındaki iki kanat
     anlatıyor, şeridin tek işi giriş. Masaüstünde cümle duruyor.
     Bu blok 940px bloğundan SONRA gelmek zorunda: orada .pbgo{flex:none} var. */
  .pbtepemes{display:none}
  .pbtepe{justify-content:center;padding:12px 18px}
  .pbgo{flex:1 1 auto;justify-content:center}
  .pbAvatar{width:84px}
  .pbad{font-size:clamp(21px,5.7cqw,26px)}
  .pbmes{font-size:13.5px}
  /* Telefonda blok tek sütuna iniyor, yani metnin arkası boş kalmıyor:
     doku sağ alta toplanıyor ve daha da soluyor. */
  .pbart i{opacity:.09}
  .pbart{--mo:.6;-webkit-mask-image:linear-gradient(160deg,transparent 16%,#000 64%,#000 100%);
    mask-image:linear-gradient(160deg,transparent 16%,#000 64%,#000 100%)}
}

/* ---------- giriş / kayıt ---------- */
.girissec{padding-top:30px}
.gprofil{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding:12px 16px 12px 12px;
  border-radius:16px;background:linear-gradient(126deg,var(--brand) 0%,#5A21B8 100%);
  color:var(--brand-cream);box-shadow:var(--shadow-s)}
.gpav{width:52px;aspect-ratio:3/4;flex:none;border-radius:10px;overflow:hidden;
  background:#1B0940;box-shadow:0 0 0 2px var(--brand-hl)}
.gpav img{width:100%;height:100%;object-fit:cover;display:block}
.gpkick{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-hl)}
.gpad{display:block;font-family:var(--disp);font-weight:var(--disp-w);font-size:21px;
  line-height:1.1;color:#fff;margin:3px 0 1px}
.gpsay{display:block;font-size:12.5px;color:rgba(247,235,212,.88)}
.giriskart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:38px;
  align-items:start;background:var(--surface);border:2px solid var(--ink);
  border-radius:var(--r);box-shadow:var(--shadow-l);padding:38px 40px}
.gkick{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
/* Alt bosluk 12 degil 22: aradaki .gsub paragrafi kaldirildi (Cansu, liste
   zaten aynisini soyluyordu) ve baslik listeye yapisiyordu. */
.gbaslik{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(30px,4vw,48px);
  line-height:1.02;margin:8px 0 22px;color:var(--ink)}
.gbaslik em{font-style:normal;color:var(--brand)}
.gliste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gliste li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.gliste li b{color:var(--ink)}
/* Kare, ilk satırın gövdesiyle ortalanıyor. Sabit 8px değeri onu satırın
   altına düşürüyordu; kutu 12px + 2x2px kenarlık = 16px, satır kutusu 1,5em. */
.gliste li::before{content:"";position:absolute;left:0;top:calc((1.5em - 16px) / 2);
  width:12px;height:12px;border-radius:4px;background:var(--brand-hl);border:2px solid var(--ink)}
.girissag{background:var(--paper);border:2px solid var(--line);border-radius:20px;padding:26px 24px}
.gsagbas{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(20px,2vw,25px);
  line-height:1.08;margin:0 0 8px;color:var(--ink)}
.gsagsub{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.ginput{width:100%;box-sizing:border-box;border:2px solid var(--ink);border-radius:12px;
  background:var(--surface);color:var(--ink);font:600 15px/1.2 Barlow,Arial,sans-serif;
  padding:13px 14px;margin-bottom:12px}
.ginput:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(108,43,217,.16)}
.gbtn{width:100%;justify-content:center}
.gnot{margin:10px 0 0;font-size:13px;line-height:1.45;min-height:1em}
.gnot.ok{color:#2D7D46} .gnot.err{color:#BD392B}
.gayrac{display:flex;align-items:center;gap:12px;margin:18px 0;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.gayrac::before,.gayrac::after{content:"";flex:1;height:1px;background:var(--line)}
/* .btn satır içi bir kutu; içindeki logo ve yazı taban çizgisine oturduğu için
   ortalanmış görünmüyordu. Esnek kutuya çevirince ikisi de dikeyde ortalanıyor. */
.gsocial{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--surface);border-color:var(--ink)}
.gsocial svg{flex:none;display:block}
@media (max-width:900px){
  .giriskart{grid-template-columns:1fr;gap:26px;padding:26px 22px}
}
/* Dar ekranda iki buton da iki satıra bölünüyordu; harf arası ve punto biraz
   kapanınca tek satırda kalıyorlar. */
@media (max-width:620px){
  .giriskart{padding:22px 16px}
  .girissag{padding:22px 16px}
  .gbtn,.gsocial{font-size:13.5px;letter-spacing:.02em;padding-left:14px;padding-right:14px}
  .gsocial{gap:8px}
}

/* ---------- yatay bannerlar (öneri + yayıncı) ---------- */
.hbanner{position:relative;overflow:hidden;border-radius:var(--r);padding:34px 38px 32px;
  box-shadow:var(--shadow-l);color:#fff}
/* Öneri bannerı footer'ın hemen üstünde: neon yeşil zemin, gölgesiz, alçak.
   Seçenekler kendi genişliği kadar yer kaplar; asıl alan yazı kutusunun. */
.hbanner.hb-sug{background:var(--brand-hl);color:var(--ink);padding:22px 30px 20px;box-shadow:none}
.hbwedge{position:absolute;right:-14%;top:-70%;width:68%;height:240%;
  background:rgba(21,20,26,.055);transform:rotate(21deg);z-index:0;pointer-events:none}
.hbanner.hb-sug .hbkick{color:var(--brand)}
.hbanner.hb-sug h2{color:var(--ink);font-size:clamp(21px,2.3vw,31px);margin:5px 0 7px;line-height:1.05}
.hbanner.hb-sug p{color:rgba(21,20,26,.72);font-size:14.5px}
.hbgrid.sug{grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:30px;align-items:center}
.hbside{min-width:0}
.hbmark.sm img{height:54px;filter:drop-shadow(0 6px 12px rgba(21,20,26,.22))}
.hbanner.hb-sug .hbhand.inline{color:var(--brand);margin:0 0 0 4px;font-size:20px;
  display:inline-block;transform:rotate(-2deg);vertical-align:baseline}

/* seçenekler: içerik kadar yer */
.hbanner.hb-sug .hbcards{gap:8px;margin-bottom:9px;justify-content:flex-start}
.hbanner.hb-sug .hbcard{flex:0 0 auto;width:auto;flex-direction:row;align-items:center;gap:8px;
  border:2px solid rgba(21,20,26,.22);border-radius:999px;background:rgba(255,255,255,.7);
  padding:7px 14px;box-shadow:none;font-family:var(--nav);font-weight:600;font-size:13px;
  letter-spacing:.03em;text-transform:uppercase;color:rgba(21,20,26,.7);white-space:nowrap}
.hbanner.hb-sug .hbcard:hover{transform:none;border-color:var(--brand);color:var(--brand);background:#fff}
.hbanner.hb-sug .hbcard .ic{width:18px;height:18px;flex:none;color:currentColor;--ico-cut:#EFFAD9}
.hbanner.hb-sug .hbcard.on .ic{--ico-cut:var(--brand)}
.hbanner.hb-sug .hbcard.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* yazı alanı geniş, buton koyu */
.hbanner.hb-sug .hbform{margin-top:0;gap:10px;flex-wrap:nowrap}
.hbanner.hb-sug input[type="text"]{flex:1 1 auto;background:#fff;border:2px solid rgba(21,20,26,.16);
  padding:13px 20px;font-size:15.5px}
.hbanner.hb-sug input[type="text"]:focus{border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(108,43,217,.22)}
.hbanner.hb-sug .hbsend{flex:none;background:var(--ink);color:var(--brand-hl);padding:13px 24px;font-size:14.5px}
.hbanner.hb-sug .hbsend:hover{background:#000}
.hbanner.hb-sug .hbnote{color:rgba(21,20,26,.7);margin-top:8px}
/* Boşken hiç yer tutmuyor: not kalktıktan sonra formun altında ölü boşluk kalıyordu. */
.hbnote:empty{display:none}
.hbanner.hb-sug .hbnote.ok{color:var(--brand)}
.hbanner.hb-sug .hbnote.err{color:#8E1B0F}
.hbanner.hb-sug .sugdone{margin-top:10px}
.hbanner.hb-sug .sugdonetxt{color:var(--brand)}
.hbanner.hb-sug .sugagain{color:rgba(21,20,26,.6)}
.hbanner.hb-sug .sugagain:hover{color:var(--brand)}

/* ---------- biz kimiz ---------- */
/* Sayfanın rengi siteye ait: krem, mor, lime. Kategori renkleri buraya girmez. */
.abhero{position:relative;overflow:hidden;border-radius:var(--r);background:var(--brand-cream);
  color:var(--ink);padding:40px 44px 38px;box-shadow:var(--shadow-s)}
.abwedge{position:absolute;right:-12%;top:-70%;width:60%;height:240%;
  background:rgba(108,43,217,.07);transform:rotate(21deg);pointer-events:none}
.abwedge.dark{background:rgba(255,255,255,.07)}
.abhero > *{position:relative;z-index:2}
.abmark{display:block;width:max-content;transform:rotate(-7deg);margin-bottom:18px}
.abmark img{height:70px;width:auto;display:block;filter:drop-shadow(0 8px 16px rgba(21,20,26,.2))}
.abkick{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.abkick.on{color:var(--brand-hl)}
.abtop{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:44px;
  align-items:end;margin-top:10px}
@media (max-width:860px){.abtop{grid-template-columns:1fr;gap:16px;align-items:start}}
.abhero h1{font-size:clamp(30px,4.4vw,54px);line-height:1.03;margin:0;
  color:var(--ink);text-transform:none}
.ablead{margin:0 0 6px;font-size:clamp(16px,1.4vw,18px);line-height:1.55;color:rgba(21,20,26,.74)}
.ablead::before{content:"";display:block;width:46px;height:5px;border-radius:99px;
  background:var(--brand-hl);margin-bottom:15px}
.ablead b{color:var(--brand);font-weight:700}

.abp{margin:0 0 18px;font-size:17px;line-height:1.62;color:var(--ink-2)}
.abp:last-child{margin-bottom:0}
/* Metnin döndüğü cümle: poster yazısı, altı lime ile çizili. */
/* 44ch cümleyi ortasından bölüyordu; bölümün kendi genişliği zaten sınır. */
.abclaim{margin:0 0 16px;text-wrap:pretty;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:clamp(19px,2vw,26px);line-height:1.14;color:var(--brand)}

/* İki format kartı: metinden çıkışın olduğu yer. */
.abformats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
@media (max-width:760px){.abformats{grid-template-columns:1fr}}
.abfmt{position:relative;overflow:hidden;text-align:left;cursor:pointer;
  background:var(--surface);border:2px solid var(--line);border-radius:var(--r-sm);
  padding:24px 26px 22px;display:flex;flex-direction:column;gap:8px;font:inherit;color:var(--ink);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .16s,box-shadow .16s}
.abfmt::after{content:"";position:absolute;right:-40px;bottom:-52px;width:130px;height:130px;
  border-radius:50%;background:rgba(201,242,75,.24)}
.abfmt > *{position:relative;z-index:2}
.abfmt:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow-m)}
.abfico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex:none;
  border-radius:15px;background:var(--brand);color:#fff;--ico-cut:var(--brand)}
.abfico svg{width:28px;height:28px}
.abfmt h3{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(20px,2vw,26px);line-height:1.06;margin:6px 0 0}
.abfmt p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.abgo{margin-top:6px;font-family:var(--nav);font-weight:600;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand)}
.abfmt:hover .abgo{text-decoration:underline;text-underline-offset:3px}

/* Duruş bloğu: sayfadaki tek koyu yüzey. */
.abcase{position:relative;overflow:hidden;border-radius:var(--r);background:var(--brand);
  color:#fff;padding:40px 44px 36px;box-shadow:var(--shadow-l)}
.abcase > *{position:relative;z-index:2}
.abcaset{margin:10px 0 18px;text-wrap:pretty;font-size:clamp(16px,1.6vw,20px);line-height:1.5;
  color:rgba(255,255,255,.86)}
.abpunch{margin:0;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:clamp(24px,3.2vw,42px);line-height:1.04;color:#fff}
.abpunch span{color:var(--brand-hl)}

.abcta{text-align:center;padding-top:14px}
.abcta h2{font-size:clamp(26px,3.6vw,42px);margin:0 0 20px;text-transform:none}
.abrand{display:inline-flex;margin:0 auto;padding:15px 28px;font-size:17px}

/* ---------- yasal sayfalar ---------- */
/* Uzun metin sayfaları: tek kolon, dar ölçü, numaralı başlıklar. Poster dili burada
   susar — okunurluk her şeyin önünde. */
.lghead{margin-bottom:26px}
.lghead h1{font-size:clamp(28px,3.8vw,44px);line-height:1.04;margin:8px 0 10px;text-transform:none}
.lgdate{margin:12px 0 0;font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.08em;color:var(--ink-3)}
.lgnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;padding-bottom:22px;
  border-bottom:2px solid var(--line)}
/* Telefonda beş pil alt alta sarmalıyor ve sayfanın üçte birini yiyordu.
   Yatay kayan tek şerit: sitenin başka yerlerinde (profil sekmeleri, ikilem
   destesi) zaten kullandığımız kalıp. Şerit .wrap'ın 22px yan payını negatif
   marjla iptal ediyor, böylece son pil ekranın kenarından sızıyor ve
   "devamı var" bilgisi kendiliğinden görünüyor. */
@media (max-width:700px){
  /* ŞERİT METİNLE HİZALI. Bir ara kenardan kenara taşırmıştım (negatif marj +
     dolgu) ki son pil ekranın kenarından sızsın; sonuç, ilk pilin başlıktan
     22px solda başlaması oldu ve Cansu "sola çok yapışık" dedi. Haklıydı:
     bir araç çubuğu, hizalandığı metinle aynı yerden başlamalı. Taşma yok,
     kaydırma kutunun kendi içinde. */
  .lgnav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    scroll-snap-type:x proximity}
  .lgnav::-webkit-scrollbar{display:none}
  .lgnav button{flex:none;scroll-snap-align:start}
}
.lgnav button{font-family:var(--nav);font-weight:600;font-size:13px;letter-spacing:.03em;
  text-transform:uppercase;border:1.6px solid var(--line);background:none;color:var(--ink-2);
  border-radius:999px;padding:7px 14px;cursor:pointer;transition:.14s}
.lgnav button:hover{border-color:var(--ink);color:var(--ink)}
.lgnav button[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
/* Metin sütunu + yapışkan içindekiler rayı. Ray 248px; metin sütunu 1104px'lik
   kapta ~808px'e iniyor, yani satır uzunluğu kendiliğinden makul bir ölçüye
   dönüyor ve sağdaki boşluk artık boşluk değil. 1040px altında ray düşüyor:
   orada metin zaten tam genişlikte ve ray bir engel olurdu. */
.lgduzen{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:48px;align-items:start}
@media (max-width:1040px){.lgduzen{grid-template-columns:1fr}.lgray{display:none}}
.lgray{position:sticky;top:82px;max-height:calc(100vh - 110px);overflow-y:auto;
  scrollbar-width:thin;padding-left:22px;border-left:2px solid var(--line)}
.lgray[hidden]{display:none}
.lgraybas{display:block;margin-bottom:12px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
#lgIcindekiler{display:flex;flex-direction:column;gap:2px}
.lgrayl{display:block;padding:6px 0;font-size:13.5px;line-height:1.4;
  color:var(--ink-3);text-decoration:none;cursor:pointer;
  border-left:2px solid transparent;margin-left:-24px;padding-left:22px;
  transition:color .14s,border-color .14s}
.lgrayl:hover{color:var(--ink)}
.lgrayl.on{color:var(--brand);font-weight:600;border-left-color:var(--brand)}

.lgbody{text-wrap:pretty}
.lgsec{margin-bottom:30px}
.lgsec h2{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(19px,2vw,25px);line-height:1.14;margin:0 0 12px;color:var(--ink)}
.lgsec p{margin:0 0 13px;font-size:16px;line-height:1.68;color:var(--ink-2)}
.lgsec p:last-child{margin-bottom:0}
.lgsec ul{margin:0 0 13px;padding-left:20px}
.lgsec li{font-size:16px;line-height:1.62;color:var(--ink-2);margin-bottom:8px}
.lgsec b{color:var(--ink);font-weight:600}
.lgsec a{color:var(--brand);text-underline-offset:3px}
/* Doldurulmayı bekleyen alanlar gözden kaçmasın. */
/* ---------- iletişim ---------- */
.ctacc{display:flex;flex-direction:column;gap:12px}
.ctitem{background:var(--surface);border-radius:var(--r-sm);box-shadow:var(--shadow-s);overflow:hidden}
.ctitem summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:19px 22px;user-select:none}
/* Başlığın yanındaki simge: konuyu tek bakışta söylesin diye. Şeritteki kategori
   ikonlarıyla aynı dil — 24'lük çizgi ikon, yuvarlak uçlar. */
.ctico{flex:none;width:25px;height:25px;color:var(--brand);opacity:.85;transition:opacity .14s}
.ctitem[open] .ctico,.ctitem summary:hover .ctico{opacity:1}
.ctitem summary::-webkit-details-marker{display:none}
.ctitem summary:hover .cth{color:var(--brand)}
.cth{flex:1;font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(19px,2vw,23px);line-height:1.1;color:var(--ink);transition:color .14s}
.ctchev{flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper-2);
  position:relative;transition:background .16s,transform .2s cubic-bezier(.2,.8,.2,1)}
.ctchev::before,.ctchev::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2.4px;
  border-radius:2px;background:var(--brand);transform-origin:center}
.ctchev::before{transform:translate(-50%,-50%)}
.ctchev::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.ctitem[open] .ctchev{background:var(--brand)}
.ctitem[open] .ctchev::before,.ctitem[open] .ctchev::after{background:var(--brand-cream)}
.ctitem[open] .ctchev::after{transform:translate(-50%,-50%) rotate(0deg)}
.ctitem[open] .cth{color:var(--brand)}
.ctbody{padding:0 22px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ctbody p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.ctmore{font-weight:600;color:var(--ink)!important}
/* Basın kiti: indirilebilir dosyalar ve renk kodları tek satırda. */
.ctkit{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.ctfile{display:flex;flex-direction:column;gap:3px;background:var(--paper-2);border-radius:12px;
  padding:11px 15px;text-decoration:none;color:var(--ink);min-width:132px}
a.ctfile:hover{background:var(--brand-hl)}
.ctfile b{font-family:var(--nav);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em}
.ctfile span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3)}
.ctfile.ren{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}
.ctswatch{display:flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;color:var(--ink-2)}
.ctswatch i{width:14px;height:14px;border-radius:4px;display:block}
.ctmail{display:inline-block;align-self:flex-start;margin-top:4px;font-family:"IBM Plex Mono",monospace;
  font-size:13.5px;font-weight:600;color:var(--brand);text-decoration:none;
  border-bottom:2px solid var(--brand-hl);padding-bottom:1px}
.ctmail:hover{border-bottom-color:var(--brand)}
.ctmail.big{font-size:15.5px;margin-top:16px}
.ctsteps{display:flex;flex-direction:column;gap:9px;margin-top:16px;width:100%}
.ctstep{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);
  line-height:1.5}
.ctstep b{flex:none;width:22px;height:22px;border-radius:50%;background:var(--brand);
  color:var(--brand-cream);font-family:var(--disp);font-weight:var(--disp-w);font-size:12.5px;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.ctnote{margin:10px 0 0;font-family:var(--body);font-size:13px;color:var(--ink-3)}
.ctnote b{color:var(--ink-2)}

/* Lansman panosu — telif bölümü */
.pntelif{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media (max-width:860px){.pntelif{grid-template-columns:1fr}}
.pnalt{font-family:var(--nav);font-weight:700;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.pnliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pnliste li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;
  color:var(--ink-2)}
.pnliste .im{flex:none;width:18px;height:18px;border-radius:6px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  font-family:"IBM Plex Mono",monospace}
.pnliste .im.ok{background:#D8F3E3;color:#1B6B45}
.pnliste .im.yok{background:#FFE9A8;color:#5A4300}
.pnliste li.bitti{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line)}
.pnriskrow{display:flex;flex-direction:column;gap:4px}
.pnriskn{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.45;max-width:60ch}
@media (min-width:701px){.pnriskn{padding-left:164px}}

/* Görsel künyesi: gazete fotoğraf altı gibi sakin. Kapalıyken tek satır. */
.kunye{margin-top:24px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:12px}
.kunye.tek{padding-top:12px}
.kunye summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  letter-spacing:.04em;color:var(--ink-2);font-weight:600}
.kunye summary::before{content:"";width:13px;height:11px;flex:none;border:1.6px solid currentColor;
  border-radius:2.5px;box-shadow:inset 0 -3px 0 -1px currentColor}
.kunye summary::-webkit-details-marker{display:none}
.kunye summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-bottom:2px;transition:transform .16s}
.kunye[open] summary::after{transform:rotate(-135deg);margin-bottom:-2px}
.kunye summary:hover{color:var(--brand)}
.kozet{color:color-mix(in srgb,var(--ink-3) 60%,transparent);letter-spacing:0}
.kunye ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.kunye li{line-height:1.5}
.kunye b{font-weight:600;color:var(--ink-2)}
.kunye a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

.tbd{background:#FFE9A8;color:#5A4300;padding:1px 6px;border-radius:5px;font-weight:600;
  font-family:"IBM Plex Mono",monospace;font-size:.88em}

/* Çerez bandı: alt kenarda, sayfayı kapatmayan ince bir şerit. Üstte değil çünkü
   logoyu ve menüyü örtüyor; ayrıca araya giren kutular mobilde aramada cezalandırılıyor.
   "Sadece zorunlu" ile "Tümünü kabul et" aynı boyutta — mevzuat reddetmenin kabul etmek
   kadar kolay olmasını istiyor, o yüzden reddi küçültmüyoruz. */
.ckbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper-brand);
  color:#FCF6E9;box-shadow:0 -10px 30px rgba(0,0,0,.28);
  padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px))}
.ckbarin{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ckbartext{margin:0;flex:1 1 380px;min-width:0;font-size:14px;line-height:1.55;
  color:rgba(252,246,233,.86)}
.ckbarlink{background:none;border:0;padding:0;cursor:pointer;color:var(--brand-hl);
  font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ckbarbtns{display:flex;gap:10px;flex:none;flex-wrap:wrap}
.ckbar .btn{background:transparent;border-color:rgba(252,246,233,.5);color:#FCF6E9;box-shadow:none}
.ckbar .btn:hover{border-color:#FCF6E9}
.ckbar .btn.prime{background:var(--brand-hl);border-color:var(--brand-hl);color:#17213B}
@media (max-width:620px){
  .ckbarin{gap:12px}
  .ckbarbtns{width:100%}
  .ckbarbtns .btn{flex:1}
}


/* ---------- lansman panosu ---------- */
/* İç kullanım sayfası: grafik değil, sayı ve çubuk. Her çubuğun yanında rakamı yazıyor —
   renk tek başına hiçbir bilgiyi taşımıyor. (Kategori paletinde Müzik pembesi ile Spor
   yeşili kırmızı-yeşil renk körlüğünde birbirine çok yakın; bu yüzden etiketsiz çubuk yok.) */
.pnhero{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.pnbig{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(46px,7vw,76px);
  line-height:.9;color:var(--brand)}
.pnbigsub{font-size:15px;color:var(--ink-2);max-width:44ch}
/* span olduğu için display:block şart; yoksa yükseklik uygulanmıyor ve dolgu taşıyor. */
.pntrack{display:block;height:10px;border-radius:999px;background:var(--paper-2);
  overflow:hidden;margin:14px 0 26px}
.pntrack i{display:block;height:100%;border-radius:999px;background:var(--brand)}

.pntiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.pntiles{grid-template-columns:repeat(2,1fr)}}
.pntile{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-sm);padding:16px 18px}
.pntile .k{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.pntile .v{display:block;font-family:var(--disp);font-weight:var(--disp-w);font-size:30px;line-height:1;
  color:var(--ink)}
.pntile .n{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-2)}

.pnrows{display:flex;flex-direction:column;gap:12px}
.pnrow{display:grid;grid-template-columns:150px minmax(0,1fr) 128px;gap:14px;align-items:center}
@media (max-width:700px){.pnrow{grid-template-columns:1fr;gap:6px}}
.pnrow .ad{font-family:var(--nav);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:8px}
.pnrow .ad i{width:12px;height:12px;border-radius:4px;flex:none}
.pnbar{display:block;height:14px;border-radius:999px;background:var(--paper-2);overflow:hidden}
/* Dolu kısım 4px yuvarlak uçlu ve zemine yaslı; boş kısımla arasında 2px nefes var. */
.pnbar i{display:block;height:100%;border-radius:999px;box-shadow:0 0 0 2px var(--paper)}
.pnrow .sy{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-2);text-align:right}
@media (max-width:700px){.pnrow .sy{text-align:left}}

.pntodo{margin:0;padding-left:22px;max-width:70ch}
.pntodo li{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-bottom:9px}
.pntodo li b{color:var(--ink)}
/* Başlığı hazır, havuzu bekleyen seriler: pano içinde sade bir liste. */
/* Havuzu bekleyen seri kartı: aynı ölçü, düşük ton. Tıklanamadığı hem imleçten
   hem soluk kapaktan hem de alt satırdaki metinden anlaşılıyor. */
.tcard.bekleyen{cursor:default;opacity:.72}
.tcard.bekleyen:hover{transform:none;box-shadow:var(--shadow-s)}
.bekthumb{position:relative;overflow:hidden}
.bekthumb .ph{position:absolute;inset:0;overflow:hidden}
.bekthumb .ph i{position:absolute;display:block;opacity:.3}
.bekthumb .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
.tcard.bekleyen .thumb{filter:saturate(.62)}
/* İnce çapraz tarama: "bu kart henüz çalışmıyor" işareti. Desen görselin değil
   kartın üstünde, o yüzden motif okunurluğunu bozmuyor. */
.tcard.bekleyen .thumb::after{content:"";position:absolute;inset:0;z-index:2;
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(255,255,255,.055) 11px 22px)}
.tcard.bekleyen .ti{color:var(--ink-2)}
.bekmeta{color:var(--ink-3);font-style:italic}
.bekgo{color:var(--ink-3)!important;font-style:italic}
.tag.bekrozet{border-style:dashed;color:var(--ink-3)}
/* Yedek rozeti trafik ışığının sarısı: "hazır ama henüz değil". Yazı rengi
   kehribarın koyusu, çünkü parlak kehribar beyaz üstünde okunmuyor; çerçeve
   ve zemin açık tonu taşıyor, ışık hissi oradan geliyor.
   Gezi & Doğa kategorisinin rengi de kehribar (#E9A62E) — karışmasın diye
   rozet KESİK çizgili ve içi açık, kategori etiketi ise DOLU. İkisi yan yana
   basılıp bakıldı, ayrışıyor.
   Tonlar ölçüyle seçildi, gözle değil: ilk deneme (#B45309 / #D97706) yazıda
   tam 4,50 veriyordu — eşiğin tam üstü, bir yuvarlamayla altına düşer — ve
   çerçeve 2,86 ile eşiğin altındaydı. Bu değerlerde yazı 5,68, çerçeve 3,58.
   İmleç de değişiyor: diğer etiketler filtre, bu tıklanmıyor. */
.tag.planrozet{border-style:dashed;border-color:#C2660A;color:#9A4708;
  cursor:default;background:rgba(194,102,10,.10)}
.tag.planrozet:hover{border-color:#C2660A;color:#9A4708}
.pnplan{font-weight:600;color:var(--ink-3);margin-left:4px}
.pnbgrup{margin-bottom:22px}
.pnbgrup h3{display:flex;align-items:center;gap:9px;margin:0 0 9px;font-size:15px;
  font-family:var(--nav);text-transform:uppercase;letter-spacing:.03em}
.pnbgrup h3 i{width:11px;height:11px;border-radius:3px;flex:none;display:block}
.pnbgrup h3 span{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.04em;text-transform:none;color:var(--ink-3);font-weight:400}
.pnbgrup ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:7px}
.pnbgrup li{line-height:1.45}
.pnbgrup li.planlanan .bb{color:var(--ink-3)}
.pnbgrup .bb{font-weight:600}
.pnbgrup .bn{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.pnnote{margin:-12px 0 16px;font-size:13px;color:var(--ink-3)}
/* Görsel kuralı panonun kalıcı hatırlatması: her görsel talebinden önce okunacak yer. */
.pnkural{border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--surface);
  padding:18px 20px 14px;margin-bottom:20px}
.pnkural h3{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  letter-spacing:.04em;font-size:15px;margin:0 0 8px}
.pnkural p{margin:0 0 10px;font-size:14px;line-height:1.5}
.pnkural ul{margin:0;padding-left:18px}
.pnkural li{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-bottom:5px}
.pnkural .pnkuraln{margin:10px 0 0;font-family:var(--body);
  font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.pntable td,.pntable th{white-space:nowrap}
.pnflag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:6px}
.pnflag.ok{background:#DCEFE2;color:#1B5E3A}
.pnflag.eksik{background:#FBE3C6;color:#8A4B12}
.pnflag.yok{background:#F6D7D2;color:#8E2C1B}

/* Yarım kalan seri kartı. Bilerek tıklanabilir bir yüzey değil: iki net eylemi var
   (devam et / baştan başla), gövdesine basınca bir şey olmuyor. */
.devamcard{border-radius:20px;background:var(--surface);box-shadow:var(--shadow-m);
  display:flex;flex-direction:column;overflow:hidden}
/* Rozet kapağın sol üstünde: gövdede dururken kartı komşularından bir satır
   uzatıyordu, ızgara da en uzun karta göre yükseliyordu. */
.devamcard .thumb{align-items:flex-start}
.devamcard .thumb .dvrozet{position:relative;z-index:2;
  box-shadow:0 2px 10px rgba(21,20,26,.28)}
.devamcard .dvbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.dvrozet{align-self:flex-start;font-family:var(--nav);font-weight:700;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dvon,#fff);
  background:var(--dvc,var(--brand));border-radius:999px;padding:3px 10px}
.dvti{font-weight:700;font-size:15.5px;line-height:1.25;color:var(--ink)}
.dvmeta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.dvtrack{height:6px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.dvbar{display:block;height:100%;border-radius:999px;background:var(--dvc,var(--brand))}
.dvfoot{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dvgo{border:0;border-radius:999px;padding:9px 16px;cursor:pointer;font-family:var(--nav);
  font-weight:700;font-size:14px;letter-spacing:.02em;
  background:var(--dvc,var(--brand));color:var(--dvon,#fff)}
.dvgo:hover{filter:brightness(1.07)}
/* Kart altındaki "Seriye Başla →" ile aynı kalıp: nav fontu, büyük harf,
   altı çizgi yalnızca üzerine gelince. Rengi kategorinin okunur tonundan
   (--dvink) geliyor, kartın zemini krem. */
.dvreset{background:none;border:0;padding:4px 2px;cursor:pointer;
  font-family:var(--nav);font-weight:600;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dvink,var(--ink-2))}
.dvreset:hover{text-decoration:underline;text-underline-offset:3px}

#secKarar[hidden]{display:none}
#ozelGrid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1020px){#ozelGrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){#ozelGrid{grid-template-columns:1fr}}

/* Sonuç ekranındaki bülten şeridi: pop-up değil, sayfanın son satırı.
   Kapatan bir daha görmez; kaydolan zaten görmez. */
/* Şampiyonun o sezon ne kazandığı: kutlamanın altında, sakin bir satır.
   Zemin kategori rengi olduğu için yazı ink değil, kategorinin üst rengi. */
.champ .rsep{opacity:.55;font-weight:400}
/* Poster zemini kategori rengi olduğu için rozetler burada ters çalışıyor:
   kazanılan kupa --cat-on dolgu, diğerleri --cat-on çerçeve. */
/* Künye sola dayalı; rozetler de sola dayanmazsa ikinci satır ortada kalıyor. */
.champbs{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px 7px;
  margin-top:11px}
/* Rozet koyu perdenin üstünde duruyor, kategorinin zemin üstü renginin değil.
   Gezi'nin --cat-on'u lacivert; perdeye düşünce okunmuyordu. Kontur zaten
   beyazdı, yazı da ona uyduruldu. */
.champbs .bsp{font-size:13px;padding:5px 11px;color:#fff;
  border-color:rgba(255,255,255,.5);background:transparent}
/* Poster zemininde --ink-3 okunmaz; derece aynı renkten biraz soluk. */
.champbs .bsd{color:inherit;opacity:.82}
.champbs .bsp.kupa{background:var(--cat-on,#fff);border-color:var(--cat-on,#fff);
  color:var(--cat)}
/* SONUÇ SAYFASI BEYAZ KART. Yukarıdaki iki kural koyu perde içindi: rozet
   yazısı beyaz, zemini şeffaf. Kart beyaza dönünce kupa olmayan rozetler
   (ordular serisinde "Sefer gücü ~49 bin" gibi) beyaz üstüne beyaz kalıp
   görünmez oldu — Cansu "rozetler basılmıyor" diye bildirdi, aslında
   basılıyordu. Kupalı olanlar kategori renginde yazı olduğu için
   okunuyordu, o yüzden hata yalnız bazı serilerde görünüyordu. */
.rmetin .champbs .bsp{color:var(--ink-2);border-color:var(--line);background:var(--paper-2)}
/* Kupalı rozet de bir çip: zeminsiz hâli sayfada havada duran bir yazıydı.
   Zemin diğer rozetlerle aynı, yazı kategori renginde — ayrımı renk yapıyor. */
.rmetin .champbs .bsp.kupa{background:var(--paper-2);border-color:var(--line);
  color:var(--cat-ink)}
.rmetin .champbs .bsd{color:var(--ink-3);opacity:1}
.champbs[hidden]{display:none}
/* Sonuç ekranındaki açıklama: kullanıcı hiç duymadığı bir yeri seçmiş olabilir,
   burası ona o yerin ne olduğunu söyleyen tek yer. */
/* Poster koyu perdenin üstünde: renk kategoriden değil, .rmeta ve şampiyon
   adıyla aynı aileden geliyor. --cat-on kullanılınca Gezi'nin laciverti koyu
   perdeye düşüp okunmaz oluyordu. */
/* 46ch, 650 piksellik metin sütununda 371 pikselde kesiyordu. */
.champacik{margin:9px 0 0;font-size:14.5px;line-height:1.5;
  color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(0,0,0,.45)}
.champacik[hidden]{display:none}

/* çerez tercih paneli */
.ckpanel{max-width:760px;margin:6px 0 30px;background:var(--surface);border:2px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.ckrow{display:flex;align-items:flex-start;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}
.ckrow:last-of-type{border-bottom:0}
.ckrow .t{flex:1;min-width:0}
.ckrow h3{font-family:var(--nav);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:13.5px;margin:0 0 5px;color:var(--ink)}
.ckrow p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.cksw{flex:none;width:52px;height:30px;border-radius:999px;border:none;cursor:pointer;
  background:var(--line);position:relative;transition:background .18s;margin-top:2px}
.cksw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .18s}
.cksw[aria-checked="true"]{background:var(--brand)}
.cksw[aria-checked="true"]::after{transform:translateX(22px)}
.cksw:disabled{opacity:.5;cursor:not-allowed}
.ckfoot{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:16px 20px;
  background:var(--paper-2)}
.cknote{font-size:13px;color:var(--ink-2);margin:0}
.cknote.ok{color:var(--brand);font-weight:600}

@media (max-width:560px){
  .lgsec p,.lgsec li{font-size:15.5px}
  .ckrow{padding:16px}
}

/* ---------- nasıl çalışır ---------- */
/* Başlık bloğu ile altındaki içerik arası: tek paragraflı üç modülde 14px
   yeterli, paragraf başlığa bağlı kalıyor. Adım kartları 12px daha alıyor
   (toplam 26) çünkü dört kutuluk bir ızgara başlığa yapışınca sıkışık
   duruyor. :has() gerekmeden, farkı .hwsteps kendi üst boşluğuyla veriyor. */
.hwhead{display:flex;align-items:flex-start;gap:18px;margin-bottom:14px}
.hwhead h2{font-size:clamp(24px,3vw,36px);text-transform:none;margin:2px 0 8px}
.hwhead p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
@media (max-width:560px){.hwhead{gap:14px}.hwhead .abfico{width:44px;height:44px;border-radius:13px}}

/* Dört adım: numara sırayı taşır, kart sadece onu çerçeveler. */
.hwsteps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:none}
@media (max-width:1000px){.hwsteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.hwsteps{grid-template-columns:1fr}}
/* Üç adımlı modüller (Mahkeme, Özel Seri). Dört kartlık ızgara ara boyda
   2+2'ye iniyor; üç kart 2'ye inince 2+1 kalıyor ve tek kart öksüz duruyor.
   O yüzden doğrudan tek sütuna geçiyor. */
.hwsteps.uc{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.hwsteps.uc{grid-template-columns:1fr}}
.hwmetin.hwnot{margin-top:16px;font-size:15px;color:var(--ink-3)}
/* Bölüm içindeki alt başlık. "Profilim" iki işi birden anlatıyor (özel seri
   ve karakter); h2 ile h3 arasındaki fark burada okunabilir olmalı, yoksa
   iki alt bölüm tek blok gibi akıyor. */
.hwalt{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(19px,2vw,24px);line-height:1.1;margin:30px 0 2px;color:var(--ink)}
.hwhead+.hwalt{margin-top:22px}
/* Karakter ızgarası: minik görsel + ad + ÇIKMA KOŞULU. Kart değil satır:
   buradaki iş tanıtmak değil, eşiği göstermek. */
.hwkar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:900px){.hwkar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hwkar{grid-template-columns:1fr}}
.hwkart{display:flex;align-items:center;gap:14px;background:var(--surface);
  border:2px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.hwkart.nadir{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.hwkav{flex:none;width:58px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;
  background:var(--paper);display:grid;place-items:center}
.hwkav img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block}
.hwkav i{font-family:var(--disp);font-weight:var(--disp-w);font-style:normal;
  font-size:22px;color:var(--ink-3)}
.hwkart h4{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:17px;line-height:1.1;margin:0 0 5px}
.hwkart p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-3)}
.hwstep{position:relative;overflow:hidden;background:var(--surface);border:2px solid var(--line);
  border-radius:var(--r-sm);padding:20px 22px 20px;display:flex;flex-direction:column;gap:7px;
  transition:border-color .16s,transform .16s cubic-bezier(.2,.8,.2,1)}
.hwstep:hover{border-color:var(--brand);transform:translateY(-3px)}
.hwstep::after{content:"";position:absolute;right:-44px;bottom:-56px;width:130px;height:130px;
  border-radius:50%;background:var(--brand-hl);opacity:.26}
.hwstep > *{position:relative;z-index:2}
.hwno{font-family:var(--disp);font-weight:var(--disp-w);font-size:30px;line-height:1;
  color:var(--brand);letter-spacing:.02em}
.hwstep h3{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:19.5px;line-height:1.1;margin:0}
.hwstep p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* Adım kartı olmayan üç modülün gövde paragrafı. Hepsi aynı ölçüde: bölümler
   arası ritim başlık + tek paragraf olarak tekrar ediyor, yalnızca Efsane
   Seriler dört kartla ayrışıyor — adımı olan tek modül o. */
.hwmetin{margin:0;font-size:17px;line-height:1.62;color:var(--ink-2);text-wrap:pretty}
.hwsonra{margin-bottom:0}
/* İki cümle iki satır: dengeli sarma cümleyi ortadan bölüyordu. */
#view-howto .abhero h1{text-wrap:wrap}


@media (max-width:640px){
  .abhero{padding:28px 22px 26px}
  .abcase{padding:28px 22px 26px}
  .abmark img{height:56px}
}

@media (max-width:900px){
  .hbgrid.sug{grid-template-columns:1fr;gap:18px}
  .hbanner.hb-sug .hbmark{display:none}
  .hbanner.hb-sug .hbcards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hbanner.hb-sug .hbcard{font-size:12px;padding:8px 9px;white-space:normal;
    justify-content:center;text-align:center;line-height:1.15}
  .hbanner.hb-sug .hbform{flex-wrap:wrap}
  .hbanner.hb-sug input[type="text"]{flex:1 1 100%}
}
/* Bannerın kendisi ekran. İçine ayrıca çerçeveli koyu bir kutu koymak iki katman
   dark yaratıyordu; kutunun kenarını görünür kılmak için eklediğimiz çizgi de onun
   belirtisiydi. Şimdi tek katman var: düz siyah yüzey, içerik doğrudan üstünde. */
/* Zemin Teknoloji damarının ana rengi. Bu sınıf uzun süre işlevsizdi: banner'ın iç
   ızgarası da "stream" sınıfını taşıyordu ve yayıncı modu sayfasının .stream kuralı
   (koyu zemin) onu örtüyordu. Izgaranın sınıfı hbstream oldu, çakışma bitti. */
.hb-stream{background:#2B303A}
.hbart{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 92% 6%,rgba(255,255,255,.10) 0,transparent 55%),
             radial-gradient(80% 70% at 4% 96%,rgba(201,242,75,.12) 0,transparent 60%)}
.hbanner > *{position:relative;z-index:2}
.hbspark{position:absolute;display:block;width:8px;height:26px;border-radius:5px;
  background:var(--brand-hl);opacity:.85;z-index:1}
.hbspark.s1{left:20px;top:64px;transform:rotate(-24deg)}
.hbspark.s2{left:52px;top:34px;transform:rotate(14deg);height:18px}
.hbspark.s3{left:14px;top:118px;transform:rotate(38deg);height:16px}

.hbgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center}
.hbgrid.hbstream{grid-template-columns:minmax(0,460px) minmax(0,1fr)}
.hbtext{display:flex;gap:22px;align-items:flex-start}
.hbtext.col{display:block}
.hbmark{flex:none;display:block;transform:rotate(-7deg);margin-top:4px}
.hbmark img{height:76px;width:auto;display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
@media (max-width:900px){.hbmark{display:none}}
.hbkick{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand-hl)}
.hbanner h2{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(28px,4vw,50px);line-height:1.0;margin:8px 0 12px;color:#fff}
.hbanner h2 span{color:var(--brand-hl)}
.hbanner p{margin:0;font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.82)}

/* öneri kartları */
.hbcards{display:flex;gap:16px;flex-wrap:wrap;align-items:stretch}
.hbcard{background:#fff;border:3px solid transparent;border-radius:22px;padding:18px 20px 16px;
  width:186px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:0 14px 30px rgba(0,0,0,.28);transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .16s}
.hbcard:hover{transform:translateY(-4px)}
.hbcard.on{border-color:var(--brand-hl)}
.hbcard .ic{width:52px;height:52px;color:var(--brand)}
.hbcard .nm{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  font-size:17px;line-height:1.05;color:var(--ink);text-align:center;
  min-height:2.1em;display:flex;align-items:center;justify-content:center}
.hbcard .go{margin-top:auto}
.hbcard .go{margin-top:8px;background:var(--brand-hl);color:#17213B;border-radius:999px;
  padding:9px 15px;font-family:var(--disp);font-weight:var(--disp-w);font-size:13px;
  text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;gap:7px}
.hbcard.on .go{background:var(--brand);color:#fff}

/* öneri formu */
.hbform{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hbanner input[type="text"]{flex:1 1 260px;min-width:0;border:0;border-radius:999px;
  background:rgba(255,255,255,.96);color:var(--ink);padding:14px 22px;font-family:inherit;font-size:15.5px}
.hbanner input[type="text"]:focus{outline:none;box-shadow:0 0 0 4px rgba(201,242,75,.55)}
.hbanner input[type="text"]:focus-visible{outline:none}
.hbsend{background:var(--brand-hl);color:#17213B;border:0;border-radius:999px;padding:14px 26px;
  cursor:pointer;font-family:var(--disp);font-weight:var(--disp-w);font-size:15px;
  text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;gap:8px;
  transition:transform .14s}
.hbsend:hover{transform:translateY(-2px)}
.hbnote{display:block;margin-top:11px;font-size:12.5px;color:rgba(255,255,255,.65)}
.hbnote.ok{color:var(--brand-hl);font-weight:600}
.hbnote.err{color:#FFD1C7;font-weight:600}
.hbanner .sugdone{margin-top:22px}
.hbanner .sugdonetxt{color:var(--brand-hl)}
.hbanner .sugagain{color:rgba(255,255,255,.7)}
.hbanner .sugagain:hover{color:#fff}

/* el yazısı not */
.hbhand{position:absolute;font-family:"Caveat","Comic Sans MS",cursive;font-weight:700;
  font-size:23px;line-height:1.08;color:var(--brand-hl);text-align:center;pointer-events:none;z-index:3}
.hbhand.inline{position:static;display:inline-block;margin-top:14px;transform:rotate(-3deg);
  font-size:22px;text-align:left}
/* Not, bannerın iç kenarına hizalanır: 26px köşe yarıçapının içine giriyordu ve
   -6 derece dönünce ikinci satırın ünlemi dış çerçevede kırpılıyordu. */
.hb-hand-stream{right:64px;top:52px;text-align:right;transform:rotate(-6deg);
  transform-origin:100% 0}
/* Köşedeki mutlak konumlu not dar ekranda başlığın üstüne biniyordu; orada
   kapanıyor ve yerini paragrafın sonundaki satır içi hâli alıyor. */
@media (max-width:1180px){.hbhand{display:none}}
/* Yayinci modulunun el yazisi notu dar ekranda kaldirildi: 1180'in altinda
   modul zaten tek sutuna dusuyor ve metin + dort cip + cagri alt alta
   diziliyor, bir de dekoratif satir kalabaliktan baska bir sey yapmiyordu.
   Genis ekranda sagdaki mutlak konumlu not (.hb-hand-stream) duruyor. */

/* yayın önizlemesi */
/* Yayın çerçevesi: dolgu yok, sadece saç teli kalınlığında bir hat ve köşe işaretleri.
   Zemin yine düz siyah — ikinci bir koyu katman yaratmadan "burası ekran" diyor.
   Köşe işaretleri kamera vizörü çağrışımı taşıdığı için kutu değil kadraj gibi okunuyor. */
.smock{position:relative;background:none;border:1px solid rgba(255,255,255,.17);
  border-radius:14px;padding:16px 18px 15px;box-shadow:none}
.smock::before,.smock::after{content:"";position:absolute;width:16px;height:16px;
  border-color:rgba(255,255,255,.45);border-style:solid;pointer-events:none}
.smock::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:14px 0 0 0}
.smock::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 14px 0}
.smtop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.smtop img{height:30px;width:auto;display:block}
/* Soru artik ust seridin hemen altindan basliyor. Eskiden 70px'ti: kamera
   yuvasi mutlak konumluydu ve seridin altina sarkiyordu, bu pay da onu
   kurtarmak icindi. Yuva seride girince pay da gereksizlesti; telefonda
   bu tek basina 49px bos bant demekti. */
.smq{margin-top:14px;text-align:center;font-family:var(--disp);font-weight:var(--disp-w);
  text-transform:uppercase;font-size:17px;letter-spacing:.03em;color:rgba(255,255,255,.9)}
.smduel{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:12px}
/* Maket, gerçek eşleşme ekranını taklit ediyor: orada adaylar kategori renginde
   çerçeveler içinde duruyor. Burada da öyle olsun — düz mor ve lime bloklar hem yalan
   söylüyordu hem de marka renklerini içeriğin yerine koyuyordu. */
/* Maketteki iki kutu: rastgele desen yerine seçeneğin kendi simgesi.
   Önceki halde motifler kategori havuzundan rastgele geliyordu ve konsol kutusunda
   fare imleci, PC kutusunda oyun kolu çıkıyordu — etiketle çelişiyordu.
   Bu boyutta doku değil, tek net simge okunuyor. */
.smopt{position:relative;overflow:hidden;border-radius:16px;min-height:104px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:14px 10px 12px;
  background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.smico{width:38px;height:38px;color:#F27A6B;flex:none;opacity:.95}
.smopt.b .smico{color:#8FD3FF}
.smname{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  font-size:14.5px;line-height:1.05;color:#fff;text-align:center}
.smvs{font-family:var(--disp);font-weight:var(--disp-w);font-size:22px;color:var(--brand-hl)}
.smfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
/* Tur basamagi: sahnedeki serit rozetiyle ayni is. */
.smtur{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.14em;
  padding:5px 12px;border-radius:999px;background:var(--brand-hl);color:var(--ink)}
/* Maketteki kamera yuvasi: sahnedekiyle ayni kesikli dil, kucuk olcekte.
   UST SERIDIN ICINDE, logonun karsisinda. Eskiden mutlak konumluydu, seridin
   altina sarkiyordu ve altindaki icerigi 70px asagi itiyordu — kutunun kendisi
   masaustunde 62, telefonda 38 pikseldi, yani ayirdigimiz yerin yarisi bos
   bant olarak gidiyordu. Simdi serit ne kadar yuksekse o kadar: ust sagda tek
   bir oge var ve o da kamera alani.
   CANLI rozeti de icine girdi (Cansu'nun onerisi): ayri bir cip olarak
   durdugunda ikisi yan yana iki ayri "bu ne?" soruyordu; birlikte tek sey
   soyluyorlar — yayin surerken kameranin oturdugu yer.
   Olcu sahnedekiyle birebir DEGIL, bilerek kucuk: burasi ornek bir ekran,
   baskin olmasi gereken sey secenekler. */
/* Alt sinir metinden geliyor: iki satirin genisi 36px, iki yanda 2px dolgu ve
   1,5px cerceve — 54px'in altinda yazi kutuyu tasiyor (330px telefonda kutu
   oransal olarak 38px'e dusuyordu). Ust sinir da var, yoksa 900px ustunde
   banner genisledikce yuva da buyuyup maketin yarisini aliyor. */
.smkam{position:relative;flex:none;width:18%;min-width:54px;max-width:84px;aspect-ratio:4/3;border-radius:7px;
  border:1.5px dashed rgba(201,242,75,.6);background:rgba(201,242,75,.07);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:2px;pointer-events:none}
.smkam b,.smkam i{font-style:normal;font-weight:400;font-family:"IBM Plex Mono",monospace;
  font-size:7.5px;letter-spacing:.1em;line-height:1;white-space:nowrap}
.smkam b{display:flex;align-items:center;gap:4px;color:#fff;letter-spacing:.12em}
.smkam b::before{content:"";width:5px;height:5px;border-radius:50%;background:#FF4D4D;flex:none}
.smkam i{color:rgba(201,242,75,.85)}
/* Maketteki tuş şeridi sahnedekinin (.ysTus) birebir küçüğü: mono, tuş
   parlak, etiket soluk, ayraç yok, aralar boşlukla. kbd kutuları kalktı —
   sahnede öyle durmuyordu, maket sahneyi anlatıyor. */
.smkeys{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;color:rgba(255,255,255,.52);line-height:1.5}
/* Telefonda şerit iki satıra sarıyor ve sola dayalıyken ikinci satır
   maketin ortasında asılı kalıyordu. Dar ekranda ortalı. */
@media (max-width:620px){
  .smfoot{justify-content:center}
  .smkeys{justify-content:center;width:100%}
}
.smkeys b{font-weight:600;color:rgba(255,255,255,.88)}
.smkeys span{white-space:nowrap}

/* yayıncı çipleri + buton */
/* Dört çip masaüstünde TEK SATIR. Sarmaladıklarında sağ sütun soldaki
   maketten uzuyor ve ikisinin dikey ortalaması bozuluyordu. Punto ve dolgu
   kısıldı, metinler kırılmıyor (nowrap) ve çipler satırı paylaşıyor. */
.hbchips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 22px}
.hbchip{display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:8px 12px;font-family:var(--nav);font-weight:600;font-size:12px;
  letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.9);white-space:nowrap}
.hbchip svg{width:15px;height:15px;flex:none;color:var(--brand-hl)}
@media (min-width:901px){
  .hb-stream .hbchips{flex-wrap:nowrap}
  /* flex:none şart: nowrap'te esnek öğe içeriğinin altına kadar büzülüyor ve
     yazı kırpılıyordu (scrollWidth > clientWidth). */
  .hb-stream .hbchip{flex:none;padding:8px 12px;font-size:12px;gap:7px}
}
/* Telefonda tek satıra sığmaz; EN FAZLA İKİ satır olsun diye 2'li ızgara. */
@media (max-width:900px){
  .hb-stream .hbchips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hb-stream .hbchip{white-space:normal;justify-content:center;text-align:center;
    line-height:1.15;font-size:11px;padding:8px 10px}
}
.hbcta{background:var(--brand-hl);color:#17213B;border:0;border-radius:999px;padding:15px 30px;
  cursor:pointer;font-family:var(--disp);font-weight:var(--disp-w);font-size:17px;
  text-transform:uppercase;letter-spacing:.03em;display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 12px 26px rgba(201,242,75,.22);transition:transform .14s}
.hbcta:hover{transform:translateY(-2px)}

@media (max-width:1020px){
  .hbanner{padding:26px 22px 24px}
  .hbgrid,.hbgrid.hbstream{grid-template-columns:1fr;gap:24px}
  .hbgrid.stream .smock{order:2}
  .hbspark{display:none}
  .hbcards{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
  .hbcard{width:auto;padding:15px 12px 14px;border-radius:18px}
  .hbcard .ic{width:42px;height:42px}
  .hbcard .nm{font-size:15px}
  .hbcard .go{padding:8px 12px;font-size:12px}
  .hbchips{gap:8px}
  .hbchip{padding:8px 13px;font-size:12.5px}
}

/* ---------- footer ---------- */
.sitefoot{margin-top:56px;background:var(--paper-brand);color:#FCF6E9;
  border-top:3px solid var(--brand-hl);position:relative}
.sitefoot .wrap{padding-top:38px;padding-bottom:34px;position:relative}
/* Düğme neon çizginin üstüne biniyor: hem çizgiyi bir "raya" çeviriyor
   hem de footer'ın başladığı yeri işaretliyor. */
.fuptop{position:absolute;right:22px;top:0;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  /* ÇERÇEVE YOK. Önce krem (koyu zeminde beyaz bir halka gibi duruyordu),
     sonra iki ayrı mor denendi; üçü de düğmeyi footer'a yapıştırılmış bir
     rozete çeviriyordu. Çerçevesiz hâlde lime daire, footer'ın üstündeki
     neon çizginin aynı renginde: çizgi düğmenin olduğu yerde şişiyor gibi
     okunuyor, yani düğme footer'ın parçası. */
  background:var(--brand-hl);color:var(--ink);border:0;
  display:grid;place-items:center;box-shadow:0 10px 22px rgba(21,20,26,.28);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s}
.fuptop:hover{transform:translateY(-50%) translateY(-4px);box-shadow:0 16px 28px rgba(21,20,26,.34)}
.fuptop:active{transform:translateY(-50%) translateY(-1px)}
.fuptop svg{display:block}
@media (max-width:620px){
  .fuptop{width:42px;height:42px}
  .fuptop svg{width:18px;height:18px}
}
.footTop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:860px){.footTop{grid-template-columns:1fr;gap:28px}}
.flogo{height:52px;width:auto;display:block}
.ftag{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.fpitch{margin:12px 0 0;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:clamp(19px,2.1vw,25px);line-height:1.15;color:var(--ink)}

.fmail{background:var(--brand-cream);border-radius:var(--r-sm);padding:22px 24px;
  display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.fmail::after{content:"";position:absolute;right:-50px;top:-60px;width:150px;height:150px;
  border-radius:50%;background:rgba(108,43,217,.09)}
.fmail > *{position:relative;z-index:2}
.fmk{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(17px,1.8vw,21px);
  line-height:1.15;color:var(--ink)}
.fmrow{display:flex;gap:10px;flex-wrap:wrap}
.fmail input[type="email"]{flex:1 1 190px;min-width:0;border:2px solid var(--ink);border-radius:999px;
  background:#fff;color:var(--ink);padding:11px 18px;font-family:inherit;font-size:15px}
.fmail input[type="email"]:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.fmail input[type="email"]:focus-visible{outline:none}
.fmail .btn{background:var(--brand);border-color:var(--brand);color:#fff}
.fmail .btn:hover{background:#5620AE;border-color:#5620AE}
.fmnote{font-size:12.5px;color:var(--ink-2)}
/* Boşken yer tutmasın: yoksa kapsayıcının 12px'lik boşluğu kutuyu uzatır. */
.fmnote:empty{display:none}
.fmnote.ok{color:var(--brand);font-weight:600}
.fmnote.err{color:#C0392B;font-weight:600}

.footCols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:40px}
@media (max-width:1000px){.footCols{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Telefonda iki sütun 24px boşlukla duruyordu ve sağdaki (Omubumu, Takipte
   Kal) soldakine yapışık görünüyordu — sol sütunun satırları uzun, sağdakiler
   kısa, yani aradaki beyaz tek biçimli değil. Sağ sütunu biraz ileri itmek
   için boşluk büyüdü ve sütunlar eşit değil: sol biraz geniş. */
@media (max-width:700px){
  .footCols{grid-template-columns:1.15fr 1fr;gap:28px 34px}
}
@media (max-width:340px){.footCols{grid-template-columns:1fr}}
.fcol{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.fcol h3{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.fcol button{background:none;border:0;padding:0;cursor:pointer;text-align:left;
  font-family:var(--body);font-weight:600;font-size:15px;color:var(--ink-2)}
.fcol button:hover{color:var(--brand)}

/* Prototip şeridi footer'ın altında, ayrı bir yüzeyde: siteye ait değil, araç.
   Yayına çıkarken tek bir <div> silinecek. */
.devbar{background:#131318;color:rgba(255,255,255,.55);padding:14px 0;
  font-family:"IBM Plex Mono",monospace;font-size:12px}
.devbar .wrap{display:flex;gap:14px 18px;flex-wrap:wrap;align-items:center}
.devtag{flex:none;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.78);padding:4px 9px;border-radius:6px}
.fdev{display:flex;gap:14px;flex-wrap:wrap}
.devbar button{background:none;border:0;padding:0;cursor:pointer;color:rgba(255,255,255,.62);
  font-family:inherit;font-size:12px}
.devbar button:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.devbar .adtoggle{color:rgba(255,255,255,.55);font-size:12px;margin-left:0}
.devbar .adtoggle input{accent-color:var(--brand-hl)}
.ftoast{margin-top:14px;background:var(--ink);color:var(--paper);border-radius:12px;
  padding:11px 16px;font-size:13.5px;width:max-content;max-width:100%}
.ftoast[hidden]{display:none!important}
/* Telif ibaresi ile yasal bağlantılar aynı satırın iki ucunda. Telif eskiden
   geliştirici şeridindeydi; o şerit yayında kapanacağı için buraya taşındı. */
.footEnd{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  margin-top:22px;padding-top:16px;border-top:1px solid rgba(108,43,217,.16)}
.fcopyright{font-size:12.5px;color:var(--ink-3);flex:none}
.footLegal{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
/* Sosyal satırlar: ikon adın solunda, hizası yazının orta çizgisine oturuyor.
   İkonlar platformların kendi işaretleri, daire rozet biçiminde: tek renk
   (currentColor) basılıyorlar, oranları ve çizimleri değiştirilmiyor. Bunlar
   Omubumu'nun kendi hesaplarına gidecek — marka kılavuzlarının izin verdiği
   kullanım bu, işaretin biçimini bozmamak şartıyla. */
.fsoscol button{display:flex;align-items:center;gap:10px}
.fsi{width:19px;height:19px;flex:none;display:block;fill:currentColor;stroke:none;opacity:.82}
.fsoscol button:hover .fsi{opacity:1}

/* Footer koyu mor zeminde: logonun konturu #6C2BD9 olduğu için zemin ondan koyu
   olmak zorunda, yoksa logo kenarını kaybediyor. */
.sitefoot .ftag{color:rgba(246,244,238,.70)}
.sitefoot .fpitch{color:#FCF6E9}
.sitefoot .fcol h3{color:rgba(246,244,238,.60)}
.sitefoot .fcol button{color:rgba(246,244,238,.88)}
.sitefoot .fcol button:hover{color:var(--brand-hl)}
.sitefoot .footEnd{border-top-color:rgba(255,255,255,.14)}
.sitefoot .fcopyright{color:rgba(246,244,238,.60)}
.sitefoot .footLegal button{color:rgba(246,244,238,.60)}
.sitefoot .footLegal button:hover{color:var(--brand-hl)}
.footLegal button{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:12.5px;color:var(--ink-3)}
.footLegal button:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* kategori hub */
.catgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:960px){.catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.catgrid{grid-template-columns:1fr}}
.ccard{position:relative;overflow:hidden;border:0;border-radius:var(--r-sm);cursor:pointer;
  padding:22px 22px 20px;text-align:left;display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--shadow-s);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.ccard::before{content:"";position:absolute;right:-30%;top:-45%;width:120%;height:130%;
  background:var(--wash,rgba(0,0,0,.11));transform:rotate(26deg)}
.ccard > *{position:relative;z-index:2}
.ccard .ic{width:34px;height:34px}
.ccard .nm{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;font-size:26px;line-height:1}
.ccard .cn{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;opacity:.85}
.adtoggle{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);cursor:pointer;user-select:none}
.adtoggle input{accent-color:var(--brand);width:15px;height:15px;cursor:pointer}

/* Masaüstü banner: kutu komşu modül tarafından uzatıldığı için artan boşluk
   vardı ve bu boşluk aşağıda, noktaların altında birikiyordu. Artık sahne
   o boşluğu yutuyor: düğme ile noktalar kutunun altına iniyor, kartlar da
   alt metin ile düğme arasındaki bantta dikeyde ortalanıyor.
   align-content:center şart — olmazsa grid satırı esneyip kartları uzatır. */
@media (min-width:1041px){
  .hero-stage{flex:1 0 auto;align-content:center;margin-top:26px}
  .herocta{margin-top:26px}
  /* Jeton bir tık küçülüyor; düello ve ikilem jetonları aynı kalıyor. */
  .hero-stage .vstoken{width:44px;height:44px;font-size:19px}
}
@media (max-width:1040px){
  nav.cats{display:none}
  .hero-stage{grid-template-columns:1fr;gap:10px;position:relative}
  /* Ayraç akıştan çıkıyor: kendi satırını kaplarken iki kartın arasını 124px
     açıyordu, oysa insan iki seçeneği yan yana görüp karşılaştırmak istiyor. */
  .hero-stage .stagemid{position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);z-index:6;pointer-events:none}
  .hero-stage .vsmark .ln{display:none}
  .hero-stage .vstoken{width:46px;height:46px;font-size:20px;
    box-shadow:0 0 0 3px var(--brand-cream),0 6px 16px rgba(0,0,0,.42)}
  .hcardA,.hcardB{transform:none}
  .hcardA:hover:not(:disabled),.hcardB:hover:not(:disabled){transform:translateY(-6px)}
  .doodle{display:none}
}
@media (max-width:880px){
  .split2{grid-template-columns:1fr}
  /* Tek sütuna inince VS kendi satırına geçiyor: masaüstünde olduğu gibi iki
     kartın arasındaki boşlukta durur, kartların üstüne binmez. */
  /* VS telefonda küçülüyor ki iki seçenek birbirine yaklaşsın. Halkası karta
     değmesin diye boşluğu jetonun kendi payından geliyor, yukarı ve aşağı eşit. */
  .duel{grid-template-columns:1fr;gap:0}
  .duel .vs{position:static;transform:none;width:auto;height:auto;justify-self:center;margin:12px 0}
  .duel .vstoken{width:34px;height:34px;font-size:15px;
    box-shadow:0 0 0 3px var(--brand-cream),0 5px 13px rgba(21,20,26,.32)}
  .opt{min-height:118px}
  .poolrow{grid-template-columns:22px 1fr 122px}
  .searchbox{margin-left:0;width:100%}
}
/* ================= DÜELLO ODAK MODU (3 Ekim 2026) =================
   KARAR: telefonda ve tablette düello kendi ekranı. Site başlığı, kategori
   şeridi, kırıntı yolu, footer ve geliştirme şeridi oyun açıkken yok.
   NEDEN: 402x750'lik bir ekranda bunlar 147 piksel yiyordu ve iki adaya
   kalan yer baştan yetmiyordu. Yetmeyince de görseli kırpıp yazıyı üstüne
   bindirmek zorunda kalmıştık; ikisi de bedeldi (Cansu: "görselim
   anlamsızlaşabiliyor", "bilgiyi kullanıcıdan saklıyoruz").

   GÖRSEL HİÇ KIRPILMIYOR. Yuva esnek (kalan yüksekliği alıyor), görselin
   kendisi o yuvanın içinde max-width/max-height ile ortalanıyor ve kendi
   oranını koruyor. Envanterin tamamı 3:2 (ordular 1215x810, onbir 690x460,
   kaset 1800x1200) olduğu için pratikte boşluk da kalmıyor; başka oranda
   bir görsel gelirse kırpılmak yerine ortalanır.
   Metin uzunsa görsel kendiliğinden küçülür, kısaysa büyür — bölüşüm
   flex'in işi, elle hesap yok.

   bilgiduel İSTİSNASI KALKTI: kırpma ve bindirme olmadığı için kaset
   listesi, onbir dizilişi ve fotoğraf aynı düzende çalışıyor. */
/* KOŞUL GENİŞLİK *VEYA* YÜKSEKLİK. Yalnız genişliğe bakmak yetmiyor:
   1112x760'lık yatay tabletde normal düzen 781 piksel istiyor ve 760'lık
   ekrana sığmıyordu (ölçüldü). Kısa pencereli masaüstü de aynı. */
/* ODAK EŞİĞİ 820 → 1200 (5 Ekim). Eskiden yalnız kısa pencereler tam
   ekran oyun düzenine geçiyordu; uzun pencerede sayfa normal akışta kalıyor ve
   aday görseli 1200 piksellik içerik sütununa sıkışıp 502×334'te kalıyordu —
   1080 piksellik bir ekranda ~400 piksel boş duruyordu. Daha kötüsü: kısa
   pencere uzun pencereden BÜYÜK kart gösteriyordu. Tek düzen. */
@media (max-width:1024px),(max-height:2000px){
  /* body'nin 8px varsayılan payı: odak modunda 100dvh'lik bölüm 8 aşağıdan
     başlayıp 8 alttan taşıyordu. */
  body.oyunda{margin:0}
  body.oyunda .topbar,
  body.oyunda .catbar,
  body.oyunda .kirintibar,
  body.oyunda .sitefoot,
  body.oyunda #devBar{display:none}
  body.oyunda{overflow:hidden}

  #view-game{max-width:none;padding:0;height:100dvh;display:flex;flex-direction:column}
  #view-game > .sec{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
    padding:8px 14px 10px}

  /* --- üst şerit: iki satır, ~68px --- */
  /* Şeritten kısılan her piksel doğrudan görsele yazılıyor: iki kart payı
     böldüğü için 15 piksellik sıkılaştırma her görsele 7 piksel boy veriyor. */
  #view-game .gamebar{flex:none;margin:0 0 8px;padding:6px 13px 7px;border-radius:14px}
  #view-game .gbtop{gap:4px 9px}
  #view-game .gbcat{padding:2px 10px;font-size:11px}
  #view-game .gbsteprow{gap:10px}
  /* Başlık TEK SATIR: iki satıra sarınca şerit 79'dan 101'e çıkıyor ve o
     22 piksel doğrudan görselden iniyor. Sığmayan başlık üç noktayla biter. */
  #view-game .gbtitle{font-size:14.5px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  #view-game .gbsteps{margin-top:4px}
  #view-game .gbsteprow{align-items:center}

  /* --- düello alanı --- */
  #gDuel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:0;
    justify-content:center}
  /* Satır sabit yükseklik: jetonun halkası box-shadow, yani yer kaplamıyor.
     Pay verilince kartlar (flex:1) payı yok sayıp satırın üstüne biniyor. */
  #gDuel.duel .vs{flex:0 0 30px;height:30px;width:auto;margin:0;
    position:relative;z-index:5;align-items:center;justify-content:center}
  #gDuel .vstoken{width:24px;height:24px;font-size:10.5px;
    box-shadow:0 0 0 2px var(--brand-cream),0 4px 10px rgba(21,20,26,.3)}

  /* --- kart: görsel esnek, metin sabit --- */
  #gDuel .opt.frame{max-width:none;flex:1 1 0;min-height:0;overflow:hidden;
    padding:10px 12px 11px;justify-content:flex-start}
  /* Kimlik seçicisi şart: "#gDuel .frameshot{aspect-ratio:3/2}" ve
     ".gorselsiz{aspect-ratio:16/4.5}" masaüstü kuralları sınıf seçicisini
     eziyordu. Yuva oranını BIRAKIYOR (aspect-ratio:auto) ve kalan yüksekliği alıyor.
     Oranı artık görselin kendisi taşıyor. */
  #gDuel .opt.frame .frameshot{position:relative;flex:1 1 auto;min-height:0;width:100%;
    aspect-ratio:auto;background:none;box-shadow:none;border-radius:0;overflow:visible}
  /* inset+margin:auto: kutunun içinde dikey ve yatay ortalı, iki yönde de
     taşmıyor, oranı bozulmuyor. object-fit gerekmiyor çünkü kutu görselin
     kendi ölçüsünde. */
  #gDuel .opt.frame .frameshot img{position:absolute;inset:0;margin:auto;
    width:auto;height:auto;max-width:100%;max-height:100%;padding:0;
    border-radius:12px;box-shadow:0 5px 16px rgba(21,20,26,.18);filter:none}
  /* ÇIKIŞ KARTI bu kuralın dışında: oradaki görsel kartın kendisi değil,
     kompozisyonun bir parçası. Mutlak konumlanırsa başlığın üstüne biniyor
     ve kartın alt kenarından taşma da mümkün olmuyor. */
  #gDuel .opt.frame .frameshot.cikislik .cigor img{position:static;inset:auto;
    margin:0;width:100%;height:100%;max-width:none;max-height:none;
    border-radius:0;box-shadow:none}
  #gDuel .opt.frame .frameshot .ph{border-radius:12px;background:var(--cat)}
  /* GÖRSELSİZ KART (63 serinin 60'ı). Çerçevede bilgi yok, yalnız kategori
     motifi var; esnek bırakılınca kalan yüksekliğin tamamını alıp kocaman bir
     renk bloğuna dönüşüyordu. Orantılı bir bant olarak kalıyor, kart da
     içeriğini ortalıyor — boşluk altta toplanmasın. */
  #gDuel .opt.frame .frameshot.gorselsiz{flex:0 1 auto;aspect-ratio:16/6;
    max-height:42%;border-radius:12px}
  /* Kart payı almıyor, içeriği kadar oluyor (7 Ekim) — masaüstündeki
     düzeltmenin odak modundaki karşılığı. Eskiden flex:1 ile sütunun yarısını
     alıyor ve 390x844'te kartın içinde ~200 piksel boşluk kalıyordu. İkili
     #gDuel'in justify-content:center'ı ile dikeyde ortalanıyor. */
  #gDuel .opt.frame:has(.frameshot.gorselsiz){flex:0 1 auto;justify-content:center}
  /* Görselsiz kartta okunacak tek şey metin; bant küçülünce açılan yer ona
     gidiyor, kart boş durmuyor. */
  #gDuel .opt.frame:has(.frameshot.gorselsiz) .facik{font-size:14.5px;margin-top:10px}
  #gDuel .opt.frame:has(.frameshot.gorselsiz) .fad{margin-top:8px}
  /* Yeni şiir kartı (5 Ekim): dolgu ve düzen .dzic'te, kapsayıcı yalnız kutu.
     overflow GERİ KAPATILIYOR — bir üstteki genel kural odak modunda görselin
     kutudan taşabilmesi için visible yapıyor; bu kartta taşma kırpılmalı, yoksa
     kısa pencerede dizeler alttaki ad satırının üstüne biniyordu. */
  #gDuel .opt.frame .frameshot.dizelik,
  #gDuel .opt.frame .frameshot.cikislik,
  #gDuel .opt.frame .frameshot.kasetlik{background:var(--brand-cream);border-radius:12px;
    display:block;padding:0;overflow:hidden}

  /* Metin görselin ALTINDA (bindirme kalktı), hepsi görünür, hepsi sabit. */
  #gDuel .opt.frame .falt{display:contents}
  /* Ad artık görselin hemen altındaki ilk satır; 9 piksel banda yapışık
     duruyordu (7 Ekim). */
  #gDuel .opt.frame .fad{flex:none;margin-top:12px;font-size:clamp(15px,4vw,19.5px)}
  /* margin'in YAN DEĞERLERİ auto OLMAK ZORUNDA. Taban kuralda açıklama
     max-width:30em ile sınırlı ve margin-left/right:auto ile ortalanıyor;
     buradaki kısa yazım (margin:6px 0 0) o iki auto'yu sıfırlıyordu ve
     kutudan dar kalan açıklama kartın soluna yapışıyordu. Yazı kendi
     içinde ortalı olduğu için hata "metin biraz sola kaymış" diye
     görünüyor, sebebi anlaşılmıyordu. Ölçüldü: 1024x1366'da açıklama
     görselin merkezinden 265 piksel solda kalıyordu. */
  #gDuel .opt.frame .facik{flex:none;margin:6px auto 0;-webkit-line-clamp:2;font-size:13px;
    line-height:1.4;color:var(--ink-2)}
  /* ROZETLER YİNE HAP (3 Ekim, ikinci tur). Künye satırı yer kazandırıyordu
     (22px, hapta iki satır 47) ama Cansu rozet biçimini geri istedi: "bir
     şeyi küçültmen gerekse bile geri gelsinler". Aradaki ~25 piksel adayın
     görselinden iniyor; punto ve hap yüksekliği de bir tık kısıldı.
     Hiçbir rozet gizlenmiyor, satıra sığmayan alta sarıyor. */
  #gDuel .opt.frame .fbs{flex:none;display:flex;flex-wrap:wrap;justify-content:center;
    align-items:center;gap:5px 6px;margin-top:7px;max-width:100%}
  #gDuel .opt.frame .fbs .bsp{font-size:11px;height:21px;padding:0 9px;max-width:100%}

  /* --- alt şerit --- */
  .gamefoot{margin:8px 0 0;gap:6px 10px}
  /* Telefon ve tablette klavye yok; şerit yalan söylemesin. Laptop odak
     moduna yükseklikten giriyor, orada geri geliyor (bir alttaki kural). */
  .gamefoot .kbdhint{display:none}
}

/* YATAY: iki kart yan yana. Dikeyde 390 piksellik bir ekranda alt alta iki
   kart imkânsız; yan yana her kart 410 genişlik ve 298 yükseklik alıyor. */
@media (orientation:landscape) and (max-height:820px){
  #gDuel{flex-direction:row;align-items:stretch;gap:0}
  #gDuel.duel .vs{flex:0 0 34px;width:34px;height:auto}
  #gDuel .opt.frame{flex:1 1 0;min-width:0}
  #view-game .gamebar{margin-bottom:6px;padding:6px 12px 7px}
  #view-game .gbsteps{margin-top:4px}
  #view-game > .sec{padding:6px 14px 8px}
  .gamefoot{margin-top:6px}
  /* Yatayda yükseklik en kıt kaynak: metin bloğu sıkışıyor ki görsele
     yer kalsın. Bilgi gitmiyor, punto ve ara iniyor. */
  #gDuel .opt.frame{padding:8px 10px 9px}
  #gDuel .opt.frame .fad{margin-top:6px;font-size:clamp(15px,2.1vw,19px)}
  #gDuel .opt.frame .facik{margin-top:4px;font-size:12.5px}
  /* Yatayda yükseklik kıt: görselsiz kartın metin büyütmesi burada geçersiz. */
  #gDuel .opt.frame:has(.frameshot.gorselsiz) .facik{font-size:13px;margin-top:6px}
  #gDuel .opt.frame:has(.frameshot.gorselsiz) .fad{margin-top:6px}
  #gDuel .opt.frame .fbs{margin-top:5px;gap:4px 5px}
  #gDuel .opt.frame .fbs .bsp{font-size:10.5px;height:20px;padding:0 8px}
}

/* GENİŞ VE ALÇAK EKRAN: laptop penceresi (1512x810) ve yatay tablet.
   Odak modu burada da çalışıyor ama telefon ölçüleriyle değil:
   - Kart genişliği sınırlı. Serbest bırakılınca kart ekranın yarısı kadar
     oluyordu; görsel 3:2 olduğu için yuva kartın boyunca uzayıp görselle
     başlık arasında koca bir beyaz boşluk bırakıyordu (Cansu).
   - Yuva oranını geri alıyor (3:2) ve kart içeriği kadar yükseliyor; boşluk
     kartın içinde değil, kartın etrafında — yani nefes payı olarak duruyor.
   - VS bu ölçekte 24px'lik jetonla kayboluyordu; büyüdü.
   Şiir ve görselsiz kartlar kendi oranlarını koruyor (:not). */
@media (min-width:1025px) and (max-height:2000px){
  #view-game > .sec{padding:16px 24px 18px}
  #view-game .gamebar{margin-bottom:14px;padding:14px 18px 15px;border-radius:18px}
  #view-game .gbtitle{font-size:17px}
  /* SÜTUNLAR YÜKSEKLİĞE YAYILIYOR. align-items:center + içeriğine göre
     yükselen sütun demek, kartın boş alanı kullanmaması demekti: 1512×804'te
     düello alanı 617 piksel, kart 274 — 238 piksel boş duruyordu. */
  /* YAN YANA. Satir yonu eskiden yalnız (orientation:landscape) and
     (max-height:820px) blokundaydı; pencere 820'den uzun olunca iki aday
     ALT ALTA düşüyor ve her biri yüksekliğin yarısını alıyordu — 1512×900'de
     kart 215 piksele iniyordu, yani uzun pencere kısa pencereden küçük kart
     gösteriyordu. Geniş ekranda yön her zaman satır. */
  #gDuel{--optEn:min(760px, (100vw - 120px) / 2);
    flex-direction:row;justify-content:center;align-items:stretch;gap:0}
  /* Genişlik tavanı: ekran ne verirse, 760'a kadar. Tavan şart — tavansız
     2560'lık monitorde kart 1174 piksele çıkıyor ve iki aday arasında göz o
     mesafeyi tarayamıyor, karşılaştırma zorlaşıyor. */
  #gDuel .opt.frame{flex:0 1 var(--optEn);max-width:var(--optEn);
    max-height:100%;height:100%;justify-content:center;padding:14px 16px 16px}
  /* GÖRSELSİZ KART SÜTUNU DOLDURMUYOR (7 Ekim, Cansu). height:100% fotoğraf
     kartı için doğru: görsel boşluğu genişlikle büyüyerek dolduruyor. Motif
     bantlı kartta dolduramıyor, bant kendi oranıyla sınırlı — 1440x900'de
     713 piksellik kartın içinde 300 piksel içerik, üstünde 193 altında 190
     piksel boşluk kalıyordu. Kart artık içeriği kadar; boşluk kartın İÇİNDE
     değil, satırın içinde. Bandı büyütmek 29 Eylül'de denenip reddedilmişti
     (kocaman bir renk bloğuna dönüşüyor), o karar duruyor. */
  #gDuel .opt.frame:has(.frameshot.gorselsiz){height:auto;align-self:center}
  /* FOTOĞRAF KARTINDA ORAN KİLİDİ KALIYOR. Kutuyu boşluğa uzatmayı denedim:
     görsel büyümüyor çünkü kendi oranıyla sınırlı, yalnız altında koca bir
     boşluk kalıyor — Cansu bunu zaten bir kez söylemişti. Fotoğrafın tek
     büyüme yolu GENİŞLİK; onu da --optEn veriyor. */
  #gDuel .opt.frame .frameshot:not(.dizelik):not(.kasetlik):not(.cikislik):not(.gorselsiz){flex:0 1 auto;
    aspect-ratio:var(--oranN,1.5);width:100%}
  /* ŞİİR/METIN KARTI farklı: kutunun kendisi eser, oranı serbest. Kalan
     yüksekliği alıyor ama kendi genişliğinin 1,05 katından uzun olmuyor —
     2560'lık ekranda 1031 piksellik bir sütüna dönüşüyordu. */
  #gDuel .opt.frame .frameshot.dizelik,
  #gDuel .opt.frame .frameshot.cikislik,
  #gDuel .opt.frame .frameshot.kasetlik{flex:1 1 auto;min-height:0;
    max-height:calc(var(--optEn) * 1.05)}
  /* ÇIKIŞ KARTININ DOĞAL BOYU. Şiir ve kaset kartının içi metin, yani yükseklik
     vermeden de bir boyu var. Bu kartın içi çizim ve çizim esnek kutuda
     duruyor: yükseklik belirsizken kutu metne iniyor (~246px). kartBoyHesapla
     havuzu ÖLÇERKEN kutuya yükseklik vermiyor, o yüzden bütün havuzun ortak
     boyu bu 246'ya düşüyordu ve iki çıkış kartı karşılaşınca kartlar bir
     şeride iniyordu. Oran vererek karta ölçülebilir bir doğal boy veriyoruz;
     gerçek düzende flex zaten büyütüyor. */
  #gDuel .opt.frame .frameshot.cikislik{aspect-ratio:1/1}
  #gDuel.duel .vs{flex:0 0 72px;width:72px;height:auto;align-self:center}
  #gDuel .vstoken{width:46px;height:46px;font-size:18px;
    box-shadow:0 0 0 3px var(--brand-cream),0 6px 14px rgba(21,20,26,.28)}
  /* AD ARTIK İLK SATIR, yani görselden ayıran boşluk ona düştü. Sırayı
     çevirirken margin:0 bırakmıştım ve ad banda yapışıyordu (8 piksel).
     Açıklamadaki ile aynı sebeple İKİ SEÇİCİ: odak bloğundaki
     :has(.gorselsiz) kuralı masaüstünde de yürürlükte ve 8px'i geri
     getiriyordu. */
  #gDuel .opt.frame .fad,
  #gDuel .opt.frame:has(.frameshot.gorselsiz) .fad{margin-top:16px;font-size:22px}
  /* AÇIKLAMA MASAÜSTÜNDE BÜYÜDÜ (7 Ekim, Cansu). Oyun ekranında açıklama
     14,5px ve --ink-2 ile sitenin geri kalanından KÜÇÜK ve soluk kalıyordu.
     Artık 17px ve tam --ink.

     İKİ SEÇİCİ ŞART. Odak bloğunun medya sorgusu (max-width:1024px),
     (max-height:2000px) — ikinci koşul masaüstünde de tutuyor, yani o blok
     burada da yürürlükte. Oradaki :has(.gorselsiz) kuralı tek seçicili
     kuralımdan daha belirgin ve 14,5'i geri getiriyordu; aynı :has
     seçicisini burada da yazmak gerekiyor.

     SATIR KIRPMASI DA KALKIYOR. Odak bloğu -webkit-line-clamp:2 koyuyor;
     telefonda yer kazandırıyor ama masaüstünde üç satırlık açıklamayı
     sessizce kesiyordu. */
  #gDuel .opt.frame .facik,
  #gDuel .opt.frame:has(.frameshot.gorselsiz) .facik{margin-top:10px;font-size:17px;
    line-height:1.45;color:var(--ink);-webkit-line-clamp:none}
  #gDuel .opt.frame .fbs{margin-top:10px;gap:6px 7px}
  #gDuel .opt.frame .fbs .bsp{font-size:12px;height:24px;padding:0 11px}
  .gamefoot{margin-top:14px}
}

/* TUŞ ŞERİDİ GERİ: odak moduna yalnızca pencere yüksekliğinden giren laptop.
   Ölçüt pointer:fine — yatay tablet de 1025'ten geniş olabiliyor ama orada
   klavye yok. Şerit iki düğmenin arasında duruyor (space-between). */
@media (min-width:1025px) and (max-height:2000px) and (pointer:fine){
  #view-game .gamefoot .kbdhint{display:inline-flex}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Seri sayfasinda kategori ici gezinme ---------- */
/* Ilk hali iki duz cerceveydi; sitenin kendi dilini konusmuyordu. Bu hal
   izgaradaki seri kartinin yatay ve kucuk kardesi: ayni egik karartma,
   ayni motifli renk blogu, kapagi olan seride ayni kapak. Kategori rengi
   --cat uzerinden geliyor, yani hangi damarda gezindigin renkten okunuyor.
   Yon oku disa dogru duruyor ve ustune gelince o yone kayiyor: kart nereye
   gotureceğini soylemeden once gosteriyor. */
.serigez{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.serigez .gezkart{display:flex;align-items:stretch;gap:0;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  box-shadow:var(--shadow-s);cursor:pointer;font:inherit;text-align:left;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.serigez .gezkart:hover{border-color:var(--cat);transform:translateY(-2px);box-shadow:var(--shadow-m)}
.serigez .gezkart:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.serigez .ileri{flex-direction:row-reverse;text-align:right}

/* Motifli renk blogu: kapak gelene kadarki yer tutucu, karttakiyle ayni kural. */
.serigez .gminik{flex:none;width:92px;align-self:stretch;position:relative;overflow:hidden;
  background-color:var(--cat);color:var(--cat-hl)}
.serigez .gminik::before{content:"";position:absolute;right:-30%;top:-40%;
  width:120%;height:120%;background:rgba(0,0,0,.14);transform:rotate(26deg)}
.serigez .gminik.kapakli{background-size:cover!important;background-position:center!important}
.serigez .gminik.kapakli::before{right:0;top:0;width:100%;height:100%;transform:none;
  background:linear-gradient(90deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.22) 100%)}
.serigez .ileri .gminik.kapakli::before{background:linear-gradient(270deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.22) 100%)}
/* --mo yok: GEZ_POS boyutları zaten bu kutu için gerçek piksel olarak
   yazıldı, ikinci bir ölçek ikonları gereksiz küçültüyordu. */
.serigez .gminik .ph{position:absolute;inset:0;overflow:hidden;z-index:0;
  transition:transform .25s ease}
.serigez .gminik .ph i{position:absolute;display:block;opacity:.22}
.serigez .gminik .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
.serigez .gezkart:hover .gminik .ph{transform:scale(1.08)}

.serigez .gmetin{flex:1;min-width:0;display:flex;flex-direction:column;
  justify-content:center;gap:7px;padding:15px 17px}
/* Yon satiri kategori rozetiyle ayni mono dil, ama bantta degil beyaz uzerinde. */
.serigez .gyon{display:flex;align-items:center;gap:7px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.serigez .ileri .gyon{flex-direction:row-reverse}
.serigez .gyon svg{flex:none;width:13px;height:13px;color:var(--cat);
  transition:transform .18s ease}
.serigez .gezkart:hover .gyon{color:var(--cat)}
.serigez .geri:hover .gyon svg{transform:translateX(-3px)}
.serigez .ileri:hover .gyon svg{transform:translateX(3px)}
.serigez .gad{font-family:var(--disp);font-weight:var(--disp-w);font-size:15.5px;
  line-height:1.24;color:var(--ink);text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Kartin alt kenarinda kategori seridi: izgarada kapakli kartin altindaki
   4px serit ne isi goruyorsa burada da onu goruyor. */
.serigez .gezkart::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--cat);opacity:0;transition:opacity .18s ease}
.serigez .gezkart{position:relative}
.serigez .gezkart:hover::after{opacity:1}

@media (max-width:620px){
  .serigez{grid-template-columns:1fr;gap:10px;margin-top:20px}
  .serigez .gminik{width:74px}
  .serigez .gmetin{padding:12px 14px;gap:5px}
  /* Telefonda kart tek sutuna dustugu icin daha dar: iki satirda uzun baslik
     "..." ile kesiliyordu. Nereye gidecegini gosteremeyen kartin anlami yok. */
  .serigez .gad{font-size:14px;-webkit-line-clamp:3}
  /* Dokunmatikte hover yok, yani kategori seridi hic gorunmuyordu. */
  .serigez .gezkart::after{opacity:1}
}

/* Sampiyonun orijinal adi: adin hemen altinda, mono ve soluk. Adla yarismiyor,
   onu tamamliyor — "bunu izleyeyim" deyip aratacak kullanici icin. */
.champoa{margin:6px 0 0;font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  letter-spacing:.03em;color:rgba(255,243,220,.72)}
.champoa[hidden]{display:none}

/* ==================== YAYINCI ==================== */
/* Kurulum sayfasi site govdesinin icinde, sahne disinda. Ikisi ayri
   dunyalar: burasi aydinlik ve normal, sahne koyu ve tam ekran. */
.yayinkur{display:grid;grid-template-columns:1fr 348px;gap:26px;align-items:start}
/* align-items:stretch ŞART: taban kuralda align-items:start var ve dikey
   flex'te o, çapraz ekseni yani GENİŞLİĞİ içeriğe daraltıyor. Panel kapalıyken
   yarım ekran genişliğinde bir hap gibi duruyor, açılınca büyüyordu. */
@media (max-width:1000px){
  .yayinkur{grid-template-columns:1fr;display:flex;flex-direction:column;align-items:stretch}
}
/* Ust satir: arama + kategori. Iki sutunun ustunde, icerigin tam genisliginde. */
.ykUst{margin-bottom:22px}
.ykAra{width:100%;max-width:none;margin-bottom:12px;padding:12px 16px}
.ykAra input{font-size:15px}
/* Cipler satiri soldan saga tam dolduruyor. Once esit sutunlu izgara denedim,
   "Gezi & Doga" her genislikte kirpiliyordu. Flex + flex-grow ile her cip
   kendi dogal genisliginden baslayip artan yeri paylasiyor: kirpma yok, satir
   yine iki ucta da tam oturuyor. */
.ykKat{display:flex;flex-wrap:wrap;gap:9px}
/* max-width tek amac icin var: son satirda tek cip kalirsa butun satiri
   kaplamasin. Sekiz cip bir satira sigdiginda sinir zaten devreye girmiyor. */
.ykKat .tag{flex:1 1 auto;min-width:max-content;max-width:calc(33.333% - 6px);
  justify-content:center;text-align:center;font-size:14px;padding:11px 14px;
  border-radius:12px;white-space:nowrap}
@media (max-width:560px){
  .ykKat{gap:7px}
  .ykKat .tag{font-size:13px;padding:9px 11px}
}
.ykIzgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
/* Kart .tcard'in kendisi; buradaki kurallar yalnizca secim durumunu ve havuz
   tutamini ekliyor. Kapak, motif, baslik ve rozet dili oradan geliyor. */
.ykKart{position:relative;transition:box-shadow .18s ease,transform .18s ease}
.ykKart:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.ykKart:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.ykKart[aria-pressed="true"]{box-shadow:0 0 0 3px var(--brand),var(--shadow-l)}
.ykTutam{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ykTik{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;
  background:var(--brand);color:#fff;align-items:center;justify-content:center;font-size:15px;
  display:none;z-index:2;box-shadow:0 2px 10px rgba(0,0,0,.32)}
.ykKart[aria-pressed="true"] .ykTik{display:flex}
.ykPanel{position:sticky;top:18px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);padding:18px 18px 20px}
.ykBas{font-family:var(--disp);font-weight:var(--disp-w);font-size:20px;margin:0 0 14px;text-transform:uppercase}
/* Başlık masaüstünde başlık, telefonda düğme. Tek öge, iki davranış. */
/* font:inherit YOK: düğme olunca .ykBas'ın başlık fontunu eziyordu ve
   "Yayınını hazırla" gövde fontuna düşüyordu. Sıfırlanacak tek şey
   düğmenin kendi zemini ve çerçevesi. */
.ykBasBtn{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  color:inherit;cursor:default;letter-spacing:inherit}
.ykOk{display:none}

/* TEK SÜTUN. Panel ızgaranın üstüne geçiyor (altta kalınca 60 serilik
   ızgaranın ardında, 22.000 piksel aşağıda kalıyordu) ama AÇIK DEĞİL:
   açık hâli ekranın tamamını kaplayıp seri seçmeyi imkânsız kılıyordu.
   Kapalıyken yalnız başlık satırı duruyor; seri seçilince kendiliğinden
   açılıyor ve ekrana geliyor (ykIzgara click). position:static şart —
   sticky panel kapalıyken bile ekranın üstünü işgal ediyor. */
@media (max-width:1000px){
  .ykPanel{order:1;position:static;padding:14px 16px}
  .ykSol{order:2}
  .ykBasBtn{display:flex;align-items:center;justify-content:space-between;gap:12px;
    cursor:pointer;margin:0}
  .ykOk{display:block;width:11px;height:11px;flex:none;border-right:2.4px solid var(--ink-2);
    border-bottom:2.4px solid var(--ink-2);transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .18s ease}
  .ykPanel:not(.kapali) .ykOk{transform:rotate(-135deg) translate(-2px,-2px)}
  .ykPanel:not(.kapali) .ykBasBtn{margin-bottom:14px}
  .ykPanel.kapali .ykIc{display:none}
}
.ykSecili{display:flex;gap:11px;align-items:center;padding:10px;border-radius:var(--r-xs);
  background:var(--paper-2);margin-bottom:16px;min-height:62px}
.ykSecili .kap{flex:none;width:76px;aspect-ratio:2/1;border-radius:8px;overflow:hidden;background:var(--k,#999)}
.ykSecili .kap img{width:100%;height:100%;object-fit:cover;display:block}
.ykSecili .kap{position:relative}
.ykSecili .kap .ph{position:absolute;inset:0;overflow:hidden;--mo:.42}
.ykSecili .kap .ph i{position:absolute;display:block;opacity:.22}
.ykSecili .kap .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
.ykSecili b{font-family:var(--disp);font-weight:var(--disp-w);font-size:14px;line-height:1.2;
  text-transform:uppercase;color:var(--ink)}
.ykSecili span{display:block;margin-top:4px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3)}
.ykSecili.bos{align-items:center;justify-content:center;font-size:13px;color:var(--ink-3);font-family:var(--nav)}
.ykAlan{margin-bottom:16px}
.ykEt{display:block;font-family:var(--nav);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.ykCipler{display:flex;flex-wrap:wrap;gap:7px}
.ykCip{font-family:var(--nav);font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer}
.ykCip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ykNot{display:block;margin-top:8px;font-size:12px;line-height:1.45;color:var(--ink-3)}
.ykBasla{width:100%;margin-top:4px}
.ykBasla[disabled]{opacity:.45;cursor:not-allowed}
.ykSonNot{text-align:center}
/* Kamera onizlemesi: sahnenin 16:9 maketi, kesikli kutu kameranin yeri. */
.ykOnizle{position:relative;margin-top:11px;aspect-ratio:16/9;border-radius:9px;
  background:linear-gradient(160deg,#1b2740,#101a2e);overflow:hidden}
.ozSerit{position:absolute;left:0;right:0;top:0;height:11%;background:rgba(255,255,255,.14)}
.ozKart{position:absolute;width:31%;border-radius:4px;background:rgba(255,255,255,.3)}
.ozKam{position:absolute;border:1.5px dashed var(--brand-hl);background:rgba(201,242,75,.12);
  border-radius:5px;display:flex;align-items:center;justify-content:center}
.ozKam i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:8px;
  letter-spacing:.08em;color:var(--brand-hl)}

/* ---------- Yayin sahnesi ---------- */
/* Butun olculer ekrana gore: yayinci 1080p de paylasabilir 1440p de.
   --ysTop ve --ysBot kamera yuvasina gore kayiyor; kart genisligi de
   kalan yukseklikten turuyor, boylece 3:2 yuva hicbir zaman tasmiyor. */
.ysahne{position:fixed;inset:0;z-index:9000;overflow:hidden;color:#FFF3DC;
  font-family:var(--body);background:var(--mcbg,var(--mc,#2C63C4));
  --serit:clamp(44px,6.2vh,74px);
  --kamW:26vw; --kamH:calc(var(--kamW) * .75); --kamPay:2.2vh;
  --ysTop:var(--serit); --ysBot:clamp(38px,6vh,66px);
  --bant:clamp(56px,9.5vh,112px);
  --kartEn:min(44vw, calc((100vh - var(--ysTop) - var(--ysBot) - var(--bant)) * var(--oranN,1.5)))}
.ysahne[hidden]{display:none}
.ysahne[data-kamboy="kucuk"]{--kamW:20vw}
.ysahne[data-kamboy="buyuk"]{--kamW:32vw}
.ysahne[data-kam="kapali"]{--kamW:0px;--kamH:0px;--kamPay:0px}
/* Kamera yuvasi kartlari kendi boyu kadar itmiyor, %85'i kadar itiyor. Tamami
   kadar itseydi kartlar yariya inerdi; bu payla kamera yalnizca gorselin ust
   kosesine ince bir bant gibi giriyor — ki orasi guvenli alan kuralinda zaten
   "kenarlar atmosfer" dedigimiz bolge. Ozne hicbir zaman kameranin altinda
   kalmiyor. */
.ysahne[data-kam="ust-sag"],.ysahne[data-kam="ust-sol"]{--ysTop:calc(var(--serit) + var(--kamH) * .85)}
.ysahne[data-kam="alt-sag"],.ysahne[data-kam="alt-sol"]{--ysBot:calc(var(--kamH) * .85 + 2vh)}
.ysKam{position:absolute;width:var(--kamW);height:var(--kamH);pointer-events:none}
.ysahne[data-kam="ust-sag"] .ysKam{top:calc(var(--serit) + 1vh);right:1.4vw}
.ysahne[data-kam="ust-sol"] .ysKam{top:calc(var(--serit) + 1vh);left:1.4vw}
.ysahne[data-kam="alt-sag"] .ysKam{bottom:1.4vh;right:1.4vw}
.ysahne[data-kam="alt-sol"] .ysKam{bottom:1.4vh;left:1.4vw}

/* Ust serit. Sayac sagda degil solda: sag ust kamera bolgesi. */
.ysUst{position:absolute;top:0;left:0;right:0;height:var(--serit);display:flex;align-items:center;
  gap:clamp(10px,1.1vw,18px);padding:0 clamp(16px,2.2vw,38px);background:rgba(0,0,0,.36);
  border-bottom:1px solid rgba(255,243,220,.14);z-index:3}
.ysKat{font-family:"IBM Plex Mono",monospace;font-size:clamp(10px,.82vw,14px);letter-spacing:.18em;
  text-transform:uppercase;color:var(--mc-hl,#C9F24B);white-space:nowrap}
.ysAd{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(15px,1.4vw,25px);
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ysSay{font-family:"IBM Plex Mono",monospace;font-size:clamp(10px,.85vw,14px);
  color:rgba(255,243,220,.62);white-space:nowrap;padding-left:clamp(8px,1vw,16px);
  border-left:1px solid rgba(255,243,220,.2)}
.ysTurlar{display:flex;align-items:center;gap:clamp(5px,.6vw,10px);margin-left:clamp(6px,1vw,18px);
  overflow:hidden}
.ysTurlar i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:clamp(9px,.75vw,13px);
  letter-spacing:.1em;padding:.4em 1em;border-radius:999px;border:1px solid rgba(255,243,220,.22);
  color:rgba(255,243,220,.5);white-space:nowrap}
.ysTurlar i.bitti{color:rgba(255,243,220,.4);border-color:transparent;background:rgba(255,243,220,.08)}
.ysTurlar i.simdi{color:#17213B;background:var(--mc-hl,#C9F24B);border-color:var(--mc-hl,#C9F24B);font-weight:600}
.ysSure{position:absolute;top:var(--serit);left:0;right:0;height:5px;background:rgba(0,0,0,.34);z-index:3}
.ysSure[hidden]{display:none}
.ysSure i{display:block;height:100%;width:100%;background:var(--mc-hl,#C9F24B);
  transition:background .2s ease}
.ysSure i.uyari{background:#E4572E}

/* Duello */
.ysDuello{position:absolute;left:0;right:0;top:var(--ysTop);bottom:var(--ysBot);
  display:flex;align-items:center;justify-content:center;gap:clamp(20px,3.4vw,84px);
  padding:0 clamp(16px,2.6vw,52px)}
.ysKart{flex:1 1 0;max-width:var(--kartEn);border-radius:clamp(10px,1.1vw,20px);overflow:hidden;
  background:rgba(0,0,0,.3);box-shadow:0 16px 54px rgba(0,0,0,.45);
  transition:transform .3s ease,opacity .3s ease,box-shadow .3s ease}
.ysKart .yuva{position:relative;aspect-ratio:var(--oranN,1.5);overflow:hidden;
  background:var(--mc,#2C63C4)}
.ysKart .yuva img{width:100%;height:100%;object-fit:cover;display:block}
.ysKart .yuva img.contain{object-fit:contain}
.ysKart .yuva .ph{position:absolute;inset:0;overflow:hidden;color:var(--mc-hl,#C9F24B);--mo:1}
.ysKart .yuva .ph i{position:absolute;display:block;opacity:.22}
.ysKart .yuva .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
.ysKart .alt{padding:clamp(10px,1.2vh,20px) clamp(14px,1.4vw,26px) clamp(12px,1.5vh,22px)}
/* Kaynak sirasi = okuma sirasi: aciklama > ad > rozet (bkz. ysKart notu).
   Aciklama ilk oge oldugu icin ust bosluk ondan degil, kendisinden sonrakinden
   geliyor -- boylece tek bir ritim kaliyor. */
.ysKart .acik{margin:0 0 .55em;font-size:clamp(13px,1.12vw,20px);line-height:1.42;
  font-weight:500;color:#FFF3DC;
  display:-webkit-box;-webkit-line-clamp:var(--acSatir,3);-webkit-box-orient:vertical;
  overflow:hidden}
.ysKart .ad{display:block;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:clamp(19px,2.1vw,40px);line-height:1.02;text-transform:uppercase}
.ysKart .yan{display:block;margin-top:.45em;font-family:"IBM Plex Mono",monospace;
  font-size:clamp(11px,.92vw,16px);color:rgba(255,243,220,.66)}
/* Ad gorselin icindeyse ekranda kalan tek kimlik satiri bu: mono kaliyor ama
   ad slotunun yerini tutacak kadar guclenyor. Buyuk display fontuna almiyoruz --
   tek basina duran bir yil sahnede baslik gibi durmuyor. */
.ysKart .yan.yalnizalt{margin-top:0;font-size:clamp(13px,1.12vw,21px);font-weight:600;
  color:rgba(255,243,220,.92)}
.ysKart .roz{display:flex;flex-wrap:wrap;gap:7px;margin-top:.7em}
/* Rozet karttan taşarsa KIRPILIYORDU (kart overflow:hidden): telefon yatayda
   "Belirleyici anı | Stalingrad, 19…" diye kesiliyordu. Hap içinde satır
   sarmaya izin var; etiket (.bse) tek parça kalıyor, yalnız değer sarıyor. */
.ysKart .roz .bsp{max-width:100%;white-space:normal}
.ysKart .roz .bse{white-space:nowrap}
/* Sabit 25px yuksekligi burada bosaltiyoruz: sahne olculeri ekranla buyuyor,
   rozet 1440p yayinda sabit kalinca okunmuyordu. Dikey ortalama yine
   line-height:1 + simetrik em dolgudan geliyor, ondan vazgecmiyoruz. */
.ysKart .roz .bsp{font-family:var(--nav);font-size:clamp(11px,.86vw,15px);font-weight:600;
  height:auto;line-height:1;padding:.52em .95em;border-radius:999px;
  background:rgba(255,243,220,.15);border:1px solid rgba(255,243,220,.26);color:#FFF3DC}
.ysKart .roz .bsd{opacity:.8}
/* Sitedeki kural: aciklamasi olan kartta rozet cumleyle yarismasin, olmayan
   kartta kart bitmemis gorunmesin. Sahnede bunu renkle degil AGIRLIKLA
   yapiyoruz -- zemin zaten kategori renginin kendisi, orada renk ayirmiyor. */
.ysKart.acli .roz .bsp{background:rgba(255,243,220,.11);border-color:rgba(255,243,220,.26);
  color:rgba(255,243,220,.88)}
.ysKart:not(.acli) .roz .bsp{background:#FFF3DC;border-color:#FFF3DC;color:#17213B}
.ysKart .roz .bsp.kupa{background:var(--mc-hl,#C9F24B);border-color:var(--mc-hl,#C9F24B);
  color:#17213B}
/* VS sitenin standart rozeti; sahnede bir tik buyuk. */
.ysVs{flex:none;display:flex;align-items:center;justify-content:center}
.ysVs .vstoken{width:clamp(44px,3.6vw,68px);height:clamp(44px,3.6vw,68px);
  font-size:clamp(19px,1.6vw,30px)}
.ysKart.kazandi{transform:translateY(-6px);box-shadow:0 0 0 3px var(--mc-hl,#C9F24B),0 20px 60px rgba(0,0,0,.5)}
.ysKart.elendi{opacity:.34;transform:scale(.97)}

/* Tus listesi. Kamera altta ise karsi tarafa kaciyor. */
/* SAHNEDEN CIKIS DUGMESI. Tus seridi "Esc cik" diyordu ama serit telefon
   dikeyde gizli ve orada klavye de yok: sahneye giren cikamiyordu (Cansu).
   Dugme her zaman duruyor, sonuk; kamera sag ustteyse sol uste geciyor ki
   yuvanin uzerine binmesin. */
/* Sitedeki "Seriden çık" düğmesinin (.btn.ghost.sm.quitbtn) koyu zemin
   karşılığı: aynı sözcük, aynı hap biçimi, aynı kırmızı aile — sahnenin
   zemini koyu olduğu için açık kırmızı yerine şeffaf kırmızı. */
.ysCikBtn{flex:none;margin-left:auto;display:inline-flex;align-items:center;
  height:30px;padding:0 15px;border-radius:999px;
  border:1.5px solid rgba(236,140,128,.42);background:rgba(189,57,43,.22);
  color:#F3B5AC;font-family:var(--nav);font-weight:600;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.04em;cursor:pointer;white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.ysCikBtn:hover,.ysCikBtn:focus-visible{background:rgba(189,57,43,.4);
  border-color:rgba(236,140,128,.72);color:#FFE2DC}
.ysCikKisa{display:none}

.ysTus{position:absolute;bottom:1.2vh;left:0;right:0;display:flex;justify-content:center;
  gap:clamp(12px,1.6vw,30px);font-family:"IBM Plex Mono",monospace;
  font-size:clamp(10px,.82vw,14px);color:rgba(255,243,220,.5);z-index:3;
  transition:opacity .6s ease;pointer-events:none}
.ysTus b{font-weight:600;color:rgba(255,243,220,.82)}
.ysahne.tusSol .ysTus{justify-content:flex-start;padding-left:2.4vw}
.ysahne.tusSag .ysTus{justify-content:flex-end;padding-right:2.4vw}
.ysahne.tusSol .ysTus,.ysahne.tusSag .ysTus{width:calc(100% - var(--kamW) - 3vw)}
.ysahne.tusSag .ysTus{margin-left:calc(var(--kamW) + 3vw)}
.ysTus.sol{opacity:.2}

/* ---------- Yayin sahnesi: DIKEY EKRAN ----------
   Telefonu dikey tutan yayinci icin sahne baska bir sahne. Yan yana iki kart
   390px'te 137 piksele düşüyordu (ölçüm) ve ekranin 677 pikselllik yuksekligi
   bos duruyordu. Dikeyde kartlar ALT ALTA: her biri kalan yuksekligin yarisi,
   gorsel de kartin kalanini dolduruyor. Kamera yuvasi yerinde: --ysTop zaten
   onun payini dusuyor, kartlar o payin altindan basliyor. */
@media (orientation:portrait) and (max-width:900px){
  .ysahne{--kartEn:none}
  /* Yuva kartin KOSESINE DEGIL, tamamen disinda. Genis sahnede kamera
     gorselin ust kosesine %85 payla giriyor; orada kart ekranin yarisi ve
     kose "atmosfer". Dikeyde kart tam genislik, yani o kose ozneyle dolu —
     kamera karti kesmemeli. Kart yuvanin tamami kadar asagidan basliyor. */
  /* Kamera açıkken rezerv kamera boyunun %90'ı: kutunun alt kenarı kartın
     üst payına denk geliyor, görselin üstüne binmiyor. */
  .ysahne[data-kam="ust-sag"],.ysahne[data-kam="ust-sol"]{
    --ysTop:calc(var(--serit) + var(--kamH) * .9 + 1vh)}
  .ysahne[data-kam="alt-sag"],.ysahne[data-kam="alt-sol"]{
    --ysBot:calc(var(--kamH) + 2.6vh)}
  .ysDuello{flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,18px);
    padding:clamp(6px,1vh,14px) clamp(14px,4.6vw,30px)}
  /* Görsel artık kartın tepesine yapışmıyor: yanlarda ortalama payı var,
     üstte de küçük bir pay olmazsa kart tek yönden kesilmiş gibi duruyor. */
  /* Kart TAM GENİŞLİK kalıyor. width:auto denendi (tablette görselin iki
     yanındaki boş bandı kapatmak için): kartın genişliği içeriğin en geniş
     satırına, görsel kutusunun genişliği de kartın yüksekliğine bağlı olduğu
     için ölçüler birbirini kovaladı — aynı ekranda iki kartın görseli farklı
     boyda çıktı (265 ve 219). Sabit genişlik öngörülebilir. */
  .ysKart{flex:1 1 0;width:100%;max-width:none;min-height:0;
    display:flex;flex-direction:column;padding-top:clamp(6px,.9vh,11px)}
  /* GÖRSEL KIRPILMIYOR (3 Ekim). Önceki kural "dikeyde yükseklik kısıt,
     oran değil; kalanı cover kırpsın" diyordu ve 16:9'luk bir kare 3,1:1'lik
     bir banda (dar telefonda 7,4:1) iniyordu — kadrajın yarısından fazlası
     gidiyordu. Artık yuva görselin oranında (--oranN), yer yetmezse kutu
     kısalıyor ve contain görseli bütün tutuyor: yanlarda kart zemini kalır,
     kırpma olmaz. Düello odak modundaki davranışın aynısı. */
  /* Kutu görselin ölçüsüne OTURUYOR (width:auto + max-width:100%): böylece
     köşe yuvarlaması ve zemin görselin kendi kenarında kalıyor, yanlarda
     "boş kutu" bandı oluşmuyor. Yer yetmezse kutu oranını koruyarak küçülür. */
  .ysKart .yuva{flex:0 1 auto;aspect-ratio:var(--oranN,1.5);
    width:auto;max-width:100%;height:auto;min-height:0;margin:0 auto}
  .ysKart .yuva img{object-fit:contain}
  /* Boşa giden alt rezerv: tuş şeridi dikeyde gizli, altta 45px bekliyordu.
     Kamera aşağıdaysa o rezerv yukarıdaki kuralla zaten yeniden kuruluyor. */
  .ysahne[data-kam="ust-sag"],.ysahne[data-kam="ust-sol"],
  .ysahne[data-kam="kapali"]{--ysBot:12px}
  /* Metin bloğu sıkışıyor ki görsele boy kalsın; hiçbir bilgi düşmüyor.
     min-height:var(--bant) ile iki metin bandını eşitlemek denendi: rozeti
     tek satıra sığan kartın altında 60 piksellik boş bir bant kalıyordu,
     yani eğrilik gitmiyor yer değiştiriyordu. Dikeyde kartlar alt alta
     durduğu için görsel boylarının birkaç piksel farkı göze çarpmıyor;
     boş bant çarpıyor. Her kart kendi yerini sonuna kadar kullanıyor. */
  .ysKart .alt{flex:none;
    padding:clamp(7px,.9vh,12px) clamp(12px,3.6vw,18px) clamp(8px,1.1vh,13px)}
  .ysKart .acik{--acSatir:2;font-size:clamp(12px,3.2vw,15px)}
  .ysKart .ad{font-size:clamp(18px,5vw,26px)}
  /* Ad ve yıl dikeyde TEK SATIR (düello kartındaki "AD / YIL" düzeniyle aynı):
     ayrı satır 22px yiyordu ve o 22 piksel doğrudan görselden iniyordu.
     Sığmazsa kendiliğinden alt satıra sarıyor, kırpılmıyor. */
  .ysKart .ad{display:inline}
  .ysKart .yan{display:inline;margin:0 0 0 .55em}
  .ysKart .roz{gap:5px;margin-top:.5em}
  .ysKart .roz .bsp{font-size:clamp(10.5px,2.9vw,13px);padding:.3em .7em}
  .ysVs{flex:none;margin:0}
  /* Punto da jetonla birlikte inmeli: yalnız çap küçülünce "VS" yuvarlağın
     kenarına yapışıyordu (30px jetonda 19px harf, oran .63). Sahnenin geri
     kalanında oran .43 — dikeyde de o orana dönüyor. */
  .ysVs .vstoken{width:clamp(27px,6.6vw,33px);height:clamp(27px,6.6vw,33px);
    font-size:clamp(11px,2.8vw,14px)}
  /* Ust serit 390px'te tasiyordu: baslik uc harfe dusuyor, tur cipleri
     ekranin disina tasiyordu. Dikeyde serit sadece "hangi seri" ve
     "hangi tur" diyor; gecmis/gelecek turlar ve sayac dusuyor. */
  .ysUst{gap:10px;padding:0 14px}
  .ysSay{display:none}
  .ysTurlar{margin-left:auto;flex:none}
  .ysTurlar i:not(.simdi){display:none}
  /* Dev tur yazisi genis sahnede kamerayi dengelemek icindi; dikeyde
     kartlarin arkasinda kaliyor. */
  .ysTurBuyuk{display:none!important}
  /* Telefonda fiziksel klavye yok: yonerge serisi hem yalan hem de iki
     satira sarip kenarlardan tasiyordu. Dokunarak secim zaten calisiyor. */
  .ysTus{display:none}
  /* Dar şeride "SERİDEN ÇIK" sığmıyor: aynı düğme, kısa adı. */
  .ysCikBtn{margin-left:10px;height:26px;padding:0 11px;flex:none;font-size:11.5px}
  .ysCikUzun{display:none}
  .ysCikKisa{display:inline}
}

/* Telefon YATAY. Kamera yuvasi genisligin %26'si: 844x390'lik bir ekranda
   219px, yani yuksekligin yarisi. Kartlar kalan yukseklikten turudugu icin
   85 piksele iniyordu (olculdu). Yatayda ve kisa ekranda yuva yukseklikle
   de sinirli. Olcu ucu de yazili: data-kamboy kurallari .ysahne'den daha
   ozel, tek bir .ysahne satiri onlari ezemez. */
@media (orientation:landscape) and (max-height:560px){
  .ysahne{--serit:clamp(32px,9vh,44px);--kamW:min(26vw,30vh);
    --ysBot:clamp(24px,7vh,38px)}
  .ysahne[data-kamboy="kucuk"]{--kamW:min(20vw,24vh)}
  .ysahne[data-kamboy="buyuk"]{--kamW:min(32vw,36vh)}
  .ysahne[data-kam="kapali"]{--kamW:0px}
  .ysKart .acik{--acSatir:2}
  .ysTurlar i:not(.simdi){display:none}
  /* Kısa yatay ekranda kart genişliği kalan yükseklikten türüyor (--kartEn),
     yani metin bandı büyüdükçe kart daralıyor ve rozetler daha çok sarıyor.
     Punto bir tık inince üç rozetin çoğu tek satıra sığıyor ve döngü
     kapanıyor; bilgi yine tam, yalnız küçük. */
  .ysKart .roz{gap:5px;margin-top:.5em}
  .ysKart .roz .bsp{font-size:clamp(10px,1.5vw,12.5px);padding:.28em .66em}
  .ysKart .yan{font-size:clamp(10px,1.2vw,13px)}
}

.ysNot{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--serit) + 2vh);
  font-family:"IBM Plex Mono",monospace;font-size:clamp(11px,.9vw,15px);letter-spacing:.06em;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,243,220,.22);border-radius:999px;
  padding:.5em 1.2em;z-index:5}
.ysNot[hidden]{display:none}
.ysDurak{position:absolute;inset:0;z-index:20;background:rgba(10,15,26,.82);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.ysDurak[hidden]{display:none}
.ysDurak span{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(28px,3.4vw,62px);
  text-transform:uppercase}
.ysDurak small{font-family:"IBM Plex Mono",monospace;font-size:clamp(11px,.9vw,15px);
  color:rgba(255,243,220,.6)}

/* Tahta ve sampiyon: ayni kapsayici kurallar */
.ysTahta,.ysSampiyon{position:absolute;left:0;right:0;top:var(--serit);bottom:0;z-index:10;
  background:var(--mcbg,var(--mc,#2C63C4));
  padding:clamp(16px,2.6vh,34px) clamp(20px,2.8vw,52px) clamp(44px,6vh,70px);
  display:flex;flex-direction:column;overflow:hidden}
.ysTahta[hidden],.ysSampiyon[hidden]{display:none}
.ysTahta h2,.ysSampiyon h2{font-family:var(--disp);font-weight:var(--disp-w);margin:0;
  font-size:clamp(26px,3.4vw,58px);line-height:1;text-transform:uppercase}
.ysBas{display:flex;align-items:baseline;gap:clamp(10px,1.2vw,20px);flex-wrap:wrap}
.ysBasNot{font-family:"IBM Plex Mono",monospace;font-size:clamp(11px,.95vw,16px);
  color:rgba(255,243,220,.62)}
.ysAyrim{display:flex;align-items:center;gap:13px;margin:clamp(10px,1.6vh,22px) 0 clamp(7px,1vh,14px)}
.ysAyrim span{font-family:"IBM Plex Mono",monospace;font-size:clamp(10px,.8vw,13px);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,243,220,.55);white-space:nowrap}
.ysAyrim i{flex:1;height:1px;background:rgba(255,243,220,.16)}
/* Kart boyu aday sayisina gore: 128'lik bir turda 190px'lik kartlar ekrana
   sigmiyor ve elenenler listesi altta kirpiliyordu. --miniEn JS'te ayarlaniyor. */
.ysGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--miniEn,150px),1fr));
  gap:clamp(6px,.7vw,14px);min-height:0;overflow:hidden}
.ysElenen{max-height:14vh}
.ysMini{border-radius:9px;overflow:hidden;background:rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 2px var(--mc-hl,#C9F24B)}
.ysMini .yuva{aspect-ratio:3/2;overflow:hidden;background:var(--mc,#2C63C4);position:relative}
.ysMini .yuva img{width:100%;height:100%;object-fit:cover;display:block}
.ysMini .yuva .ph{position:absolute;inset:0;overflow:hidden;color:var(--mc-hl,#C9F24B);--mo:.5}
.ysMini .yuva .ph i{position:absolute;display:block;opacity:.22}
.ysMini .yuva .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
.ysMini b{display:block;padding:.5em .6em .6em;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:clamp(10px,.82vw,14px);line-height:1.1;text-transform:uppercase}
.ysElenen{display:flex;flex-wrap:wrap;gap:7px 9px;overflow:hidden}
.ysElenen span{font-family:"IBM Plex Mono",monospace;font-size:clamp(10px,.8vw,13.5px);
  padding:.35em .85em;border-radius:999px;background:rgba(0,0,0,.26);color:rgba(255,243,220,.42);
  text-decoration:line-through;text-decoration-color:rgba(255,243,220,.42)}
.ysAltNot{margin-top:auto;padding-top:1.4vh;font-family:"IBM Plex Mono",monospace;
  font-size:clamp(10px,.85vw,14px);color:rgba(255,243,220,.55)}
.ysAltNot b{font-weight:600;color:rgba(255,243,220,.85)}

/* Sampiyon */
.ysSampiyon{align-items:center;justify-content:center;text-align:center}
/* flex:none — şampiyon katmanı dikey esnek kutu; kutu büzülünce genişlik
   sabit kalıp yükseklik düşüyor ve oran bozuluyordu (673x351, oysa 16:9
   672x378), yani cover yine kırpıyordu. Genişlik zaten 44vh'ye göre
   hesaplandığı için büzülmeye gerek yok. */
/* Ölçü YÜKSEKLİKTEN kuruluyor: genişlikten kurulunca oran 16:9'a geçince
   görsel 27px uzuyor ve katman taşıyordu. 41vh, ad + rozet + yol şeridi ile
   birlikte 1512x860'ta tam oturuyor (ölçüldü). */
.ysSampGor{flex:none;height:min(41vh,calc(46vw / var(--oranN,1.5)));width:auto;
  aspect-ratio:var(--oranN,1.5);border-radius:clamp(10px,1.1vw,20px);
  overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.5);background:var(--mc,#2C63C4);position:relative}
.ysSampGor img{width:100%;height:100%;object-fit:cover;display:block}
.ysSampGor .ph{position:absolute;inset:0;overflow:hidden;color:var(--mc-hl,#C9F24B)}
.ysSampGor .ph i{position:absolute;display:block;opacity:.22}
.ysSampGor .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
.ysSampKick{font-family:"IBM Plex Mono",monospace;font-size:clamp(10px,.85vw,14px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mc-hl,#C9F24B);margin-bottom:.7em}
.ysSampAd{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(30px,4.2vw,76px);
  line-height:1;text-transform:uppercase;margin:.35em 0 0}
.ysSampYan{font-family:"IBM Plex Mono",monospace;font-size:clamp(11px,.95vw,16px);
  color:rgba(255,243,220,.66);margin-top:.5em}
/* Sampiyon rozetleri sahnede her zaman dolu: burada yarisacagi bir cumle yok,
   kart bitmis gorunmeli. Aciklama iki satirla sinirli -- altinda sampiyonun
   yolu duruyor ve bu ekran olculmuyor, tasarsa kirpilmaz kayar. */
.ysSampBs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;flex:none;
  margin-top:clamp(10px,1.6vh,20px)}
.ysSampBs .bsp{font-family:var(--nav);font-size:clamp(11px,.88vw,16px);font-weight:600;
  height:auto;line-height:1;padding:.55em 1em;border-radius:999px;
  background:#FFF3DC;border:1px solid #FFF3DC;color:#17213B}
.ysSampBs .bsp.kupa{background:var(--mc-hl,#C9F24B);border-color:var(--mc-hl,#C9F24B)}
.ysSampBs .bsd{opacity:.72;color:inherit}
.ysSampAcik{max-width:min(62ch,72vw);margin:clamp(10px,1.6vh,20px) auto 0;flex:none;
  font-size:clamp(13px,1.05vw,20px);line-height:1.45;font-weight:500;color:#FFF3DC;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ysYol{display:flex;gap:clamp(6px,.7vw,12px);justify-content:center;flex-wrap:wrap;
  margin-top:clamp(12px,2vh,26px);max-width:86vw}
.ysYol .ysMini{width:clamp(88px,8vw,150px);box-shadow:none;opacity:.78}
.ysPay{margin-top:clamp(12px,2vh,26px);font-family:"IBM Plex Mono",monospace;
  font-size:clamp(11px,.95vw,16px);color:rgba(255,243,220,.75);
  background:rgba(0,0,0,.34);border:1px solid rgba(255,243,220,.2);border-radius:999px;
  padding:.55em 1.4em}

/* Bos banttaki buyuk tur adi. Yalnizca kamera ustteyken var; altta veya
   kapaliyken o bant zaten yok, serit yetiyor. */
.ysTurBuyuk{position:absolute;top:calc(var(--serit) + 1.5vh);font-family:var(--disp);
  font-weight:var(--disp-w);font-size:clamp(26px,3.6vw,64px);line-height:1;text-transform:uppercase;
  color:rgba(255,243,220,.16);letter-spacing:.01em;pointer-events:none;display:none;z-index:2}
.ysahne[data-kam="ust-sag"] .ysTurBuyuk{display:block;left:clamp(16px,2.6vw,52px)}
.ysahne[data-kam="ust-sol"] .ysTurBuyuk{display:block;right:clamp(16px,2.6vw,52px)}
/* Rozet yazisi videoda okunmali: sitedeki soluk ton burada kayboluyor. Renk
   artik yukaridaki .acli / :not(.acli) ayriminda; burada yalnizca alt metin. */
.ysKart .roz .bsd{opacity:.92;color:inherit}

/* Tahta tam ekrani kaplarken kamera ustunde durmaya devam ediyor. Izgara
   kameranin altindan basliyor; basliga da karsi taraftaki bos bant kaliyor. */
.ysahne[data-kam="ust-sag"] .ysTahta,.ysahne[data-kam="ust-sol"] .ysTahta{
  padding-top:calc(var(--ysTop) - var(--serit) + 1vh)}
.ysahne[data-kam="ust-sag"] .ysTahta .ysBas,.ysahne[data-kam="ust-sol"] .ysTahta .ysBas{
  position:absolute;top:2.6vh}
.ysahne[data-kam="ust-sag"] .ysTahta .ysBas{left:clamp(20px,2.8vw,52px);right:calc(var(--kamW) + 3vw)}
.ysahne[data-kam="ust-sol"] .ysTahta .ysBas{right:clamp(20px,2.8vw,52px);left:calc(var(--kamW) + 3vw);
  justify-content:flex-end}
.ysahne[data-kam="alt-sag"] .ysTahta,.ysahne[data-kam="alt-sol"] .ysTahta{
  padding-bottom:calc(var(--ysBot) + 2vh)}

/* Kart yerine ad listesi (24'ten kalabalik turlar). Elenenlerle ayni kalip,
   ama diri: ustu cizili degil, rengi acik. */
.ysKalanAd{max-height:none;overflow:hidden}
.ysKalanAd span{background:rgba(255,243,220,.14);color:rgba(255,243,220,.92);
  text-decoration:none;border:1px solid rgba(255,243,220,.16)}
/* Mini karttaki ad: gorselin uzerindeki acik zeminde kayboluyordu. */
.ysMini b{background:rgba(0,0,0,.46)}


/* ---------- PROFİLİM ----------
   Sayfa üç ritimden kuruluyor: üst karakter alanı, sekme şeridi, bloklar.
   Blok tek bir soruya cevap veren kutu; her sekme bunlardan birkaç tane. */
.pfbos{text-align:center;max-width:46ch;margin:40px auto 60px}
.pfboskick{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.pfbos h1{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(28px,4vw,44px);
  line-height:1.04;margin:10px 0 12px}
.pfbos p{margin:0 0 22px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.pfbosey{justify-content:center}
a.btn{text-decoration:none}

.pfust{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:26px 30px;border-radius:var(--r);box-shadow:var(--shadow-l);
  background:linear-gradient(112deg,#5A21B8 0%,var(--brand) 48%,#7530ED 100%);color:var(--brand-cream)}
.pfkimlik{display:flex;align-items:center;gap:20px;min-width:0}
.pfav{width:84px;height:112px;flex:none;border-radius:16px;overflow:hidden;
  background:rgba(0,0,0,.26);border:2px solid var(--brand-hl);
  display:flex;align-items:center;justify-content:center}
.pfav img{width:100%;height:100%;object-fit:cover;display:block}
.pfkim{min-width:0}
.pfkick{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand-hl)}
.pfad{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(28px,3.6vw,46px);
  line-height:1.02;margin:12px 0 0;color:#fff}
.pfnadir{margin-top:10px}
/* Dikey: iki düğme alt alta ve eşit genişlikte (stretch). Yan yanayken
   "Profil Ayarları" ile "Özel Seri Oluştur" arasındaki fark bandın sağ
   kenarını tırtıklı gösteriyordu. */
.pfeylem{display:flex;flex-direction:column;align-items:stretch;gap:10px;flex:none}
.pfeylem .btn{width:100%;justify-content:center;text-align:center;white-space:nowrap}
.pfeylem .btn.ghost{border-color:rgba(255,255,255,.5);color:var(--brand-cream)}
.pfeylem .btn.ghost:hover{border-color:#fff;color:#fff}

/* Sekme şeridi: masaüstünde de mobilde de aynı yatay şerit. Mobilde kaydırılıyor. */
.pfsek{display:flex;gap:6px;margin:26px 0 0;border-bottom:2px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.pfsek::-webkit-scrollbar{display:none}
.pfsekb{flex:none;border:0;background:none;cursor:pointer;padding:13px 16px 12px;
  font-family:var(--nav);font-weight:600;font-size:14.5px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-3);border-bottom:3px solid transparent;margin-bottom:-2px}
.pfsekb:hover{color:var(--ink)}
.pfsekb.on{color:var(--ink);border-bottom-color:var(--brand)}
.pfsekb[hidden]{display:none}
.pfgov{padding-top:28px}

.pfblok{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);
  padding:26px 28px;margin-bottom:22px}
.pfblokbas h3{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(19px,2vw,25px);
  line-height:1.1;margin:0}
/* 66ch bu bloklarda dardi: sagda yer bos dururken cumleyi alt satira
   atiyordu. 104ch hem "Gecmisim" cumlesini tek satirda tutuyor hem de
   ileride cok uzun bir alt basligin sayfayi bastan basa kat etmesini
   engelliyor. */
.pfblokbas p{margin:9px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:104ch}
/* Başlık, karşısındaki düğmeye/çiplere ortalı duruyor. flex-start, başlık
   altı açıklamalar varken doğruydu; onlar kalkınca başlık düğmenin üstüne
   kaçıyordu ve her sekmede farklı yükseklikte oturuyordu. */
/* Tıklanmayan pil (özel seride kategori yok): imleç ve hover yok. */
.sppil.sabit{cursor:default;pointer-events:none}
.pfblokbas.ustcubuk{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* .pfbosblok da listeye dahil: Özel Serilerim'de başlık boş kutuya
   yapışıyordu, çünkü kural yalnızca dolu durumun kapsayıcısını sayıyordu. */
/* .pfkutu da listeye eklendi: boş durumda başlığın altındaki "0 Efsane Seri -
   1 Bitmeyen İkilem" satırı doğrudan kutunun zeminine yapışıyordu, çünkü kural
   yalnızca dolu durumun kapsayıcılarını sayıyordu. */
.pfblokbas+.pflist,.pfblokbas+.pfayar,.pfblokbas+.pfayarey,
.pfblokbas+.pfbosblok,.pfblokbas+.pfkutu{margin-top:22px}
/* Boş kutuda iki düğme yan yana gelebiliyor (Hepsi sekmesi). */
.pfkutu .btn+.btn{margin-left:10px}
@media (max-width:540px){.pfkutu .btn{width:100%;justify-content:center}
  .pfkutu .btn+.btn{margin:10px 0 0}}
.pfnot{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-3);
  background:var(--paper);border-radius:12px;padding:12px 14px}
.pfkutu{text-align:center;padding:38px 24px;background:var(--paper);border-radius:14px}
/* line-height ŞART: başlık fontunun kendi satır yüksekliği 1'e yakın ve
   iki satırlık bir boş durum başlığı ("Henüz bir ikilemde taraf seçmedin")
   telefonda üst üste biniyordu. */
.pfkutu h3{font-family:var(--disp);font-weight:var(--disp-w);font-size:21px;
  line-height:1.12;margin:0 0 10px}
.pfkutu p{margin:0 auto 20px;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:44ch}

/* Karakteri olmayan kullanicinin ilk ekrani. Bos kart silueti, iki cumle ve
   tek eylem -- aralari genis, cunku burada acele ettirecek bir sey yok. */
/* Dikey boşluk kısıldı (48/52 → 30/32, kart 122 → 96, aralar 26/12/28 →
   16/8/20): blok 418px'ten ~300px'e indi ve altındaki karakter kartlarının
   üst kenarı katlanın içine girdi. Boş bir durumun ekranın tamamını yemesi,
   altında asıl gösterilecek şey dururken yanlıştı. */
.pfbosblok{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:30px 24px 32px;background:var(--surface);border:2px dashed var(--line);
  border-radius:var(--r)}
/* Boş kart artık boş değil: içinde logonun soru işareti duruyor. Krem
   zeminde lime okunmadığı için burada marka moru, mor avatarın içinde lime. */
.pfboskart{width:72px;height:96px;border-radius:16px;border:2.5px dashed var(--line);
  background:repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(21,20,26,.035) 9px,rgba(21,20,26,.035) 18px);
  display:flex;align-items:center;justify-content:center;color:var(--brand)}
.pfboskart .soruik{height:46px;width:auto;display:block;opacity:.5}
.pbSoru{display:block;height:56px;color:var(--brand-hl)}
.pbSoru .soruik{height:100%;width:auto;display:block}
.pfbosbas{margin:16px 0 0;font-size:18.5px;line-height:1.4;font-weight:600;color:var(--ink);max-width:34ch}
.pfbosmes{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.pfbosblok .btn{margin-top:20px}
/* Boş blok ile altındaki karakter kartları birbirine yapışıyordu: ikisi de
   #pfKarakter'in doğrudan çocuğu ve aralarında hiç kural yoktu. */
.pfbosblok+.kkizgara,.pfkbas+.kkizgara{margin-top:22px}
/* Kart silueti olmayan kullanim (Özel Serilerim): üst boşluk siluetten değil
   kutunun kendi dolgusundan geliyor, başlık tepeye yapışmasın. */
.pfbosblok>.pfbosbas:first-child{margin-top:0}

/* ---- karakter şeridi ve kart seti ---- */
/* Üstteki şerit durumu söylüyor, sağda paylaş; kartın kendisi aşağıda. */
.pfkbas{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:26px}
.pfkbaskick{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.pfkbas h2{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(24px,2.9vw,36px);
  line-height:1.04;margin:9px 0 0}
/* 58ch siniri vardi ve sagda yer bos dururken cumleyi alt satira atiyordu.
   Sinir kalkti; satir uzunlugunu sagdaki dugme zaten belirliyor. */
.pfkbas p{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.pfkbas>div{flex:1 1 30ch;min-width:0}
.pfkbas .btn{flex:none}

/* Sekiz kart. Aktif olan renkli ve çerçeveli, diğerleri gri ve geri çekilmiş —
   fark rozetle değil doygunlukla kuruluyor, göz ilk bakışta kendininkini
   buluyor. */
/* Sutun sayisi acikca veriliyor: auto-fill kendi kafasina gore dagitiyordu.
   ALTI kart var (once sekizdi, dortlu duzen 4+4 veriyordu); uclu duzen 3+3
   veriyor ve kartlar genisledigi icin Cansu'nun yeni iki cumlelik
   aciklamalari da rahat siğiyor. */
.kkizgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1040px){.kkizgara{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kkart{position:relative;background:var(--surface);border:2px solid var(--line);
  border-radius:18px;padding:16px 16px 20px;transition:border-color .16s,box-shadow .16s}
.kkart.on{border-color:var(--brand);box-shadow:0 0 0 4px rgba(108,43,217,.11)}
/* MAX-HEIGHT KALKTI. Tavan koyunca kutu kısalmıyor, DARALIYOR: aspect-ratio
   oranı korumak için genişliği de kısıyor (342 yerine 240px) ve kartın
   sağında 100px boşluk kalıyordu. Cansu onu gördü. Artık kutu kartın tam
   genişliği; 3/4 oranda 456px oluyor, kart ~630px — tavanlı hâlinden
   yalnızca 35px uzun, buna karşılık çizim kartı dolduruyor.
   Oran 3/4, çizimler 2:3: cover %11 kırpıyor, object-position üst grafikleri
   (çizgiler, yollar) ve alttaki nesneleri (pusula, tokmak, saat) içeride
   tutuyor — ölçüldü. */
.kkav{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  background:var(--paper);display:flex;align-items:center;justify-content:center}
.kkav img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block;
  filter:grayscale(1) contrast(.92);opacity:.5;transition:filter .18s,opacity .18s}
.kkart.on .kkav img{filter:none;opacity:1}
.kkav i{font-family:var(--disp);font-weight:var(--disp-w);font-size:40px;
  font-style:normal;color:var(--ink-3)}
/* Rozet once kartin ustunden tasiyordu (top:-11px); ikinci satirdaki kartta
   ustteki kartin kenarina biniyordu. Artik gorselin icinde, Nadir'in
   karsisinda. */
.kkbayrak{position:absolute;top:8px;left:8px;background:var(--brand);color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px}
.kkart h3{font-family:var(--disp);font-weight:var(--disp-w);font-size:19px;line-height:1.1;
  margin:14px 0 0;color:var(--ink-3)}
.kkart.on h3{color:var(--ink)}
/* .kknadir kalktı (1 Ekim 2026): köşedeki "NADİR" hapının yerini adın
   yanındaki parıltı aldı — iki nadir karakterde de aynı işaret, diğer
   dördünde hiçbir etiket yok. */
.kkart p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.kkart.on p{color:var(--ink-2)}

/* Ust bosluk: acilir, kart setine yapisik duruyordu. */
.pfnasil{background:var(--surface);border:2px solid var(--line);border-radius:var(--r);
  padding:4px 28px;margin:26px 0 22px}
.pfnasil summary{cursor:pointer;padding:16px 0;font-family:var(--nav);font-weight:600;
  font-size:15px;text-transform:uppercase;letter-spacing:.04em}
/* Tek sütun, soldan sağa. İki sütuna akıtmıştım; Cansu bölünmüş metni
   sevmiyor. Genişlik serbest, satır uzunluğunu bloğun kendi dolgusu
   dengeliyor. */
.pfnasilgov{padding-bottom:22px}
.pfnasil p{margin:0 0 14px;font-size:15px;line-height:1.62;color:var(--ink-2)}
.pfnasil p:last-child{margin-bottom:0}
.pfnasilliste{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.pfnasilliste li{position:relative;padding-left:20px;font-size:15px;line-height:1.62;
  color:var(--ink-2)}
.pfnasilliste li::before{content:"";position:absolute;left:0;top:calc((1.62em - 7px) / 2);
  width:7px;height:7px;border-radius:50%;background:var(--brand)}
.pfnasilliste b{color:var(--ink)}

/* ---- satır listesi (yarım kalanlar, tamamlananlar, özel seriler) ---- */
.pflist{display:grid;gap:14px}
.pfsatir{display:flex;gap:18px;align-items:center;padding:16px;border:2px solid var(--line);
  border-radius:16px;background:var(--surface)}
.pfkap{width:86px;height:58px;flex:none;border-radius:11px;overflow:hidden;position:relative;
  background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.pfkap .ph{position:absolute;inset:0;overflow:hidden;--mo:.9}
.pfkap .ph i{position:absolute;display:block;opacity:.3}
.pfkap .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
.pfsatirmet{flex:1 1 auto;min-width:0}
.pfsatirmet b{display:block;font-size:15.5px;line-height:1.3;margin:5px 0 0}
.pfpil{display:inline-block;padding:2px 9px;border-radius:999px;font-family:var(--nav);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.pfilerle{display:block;height:6px;border-radius:999px;background:var(--paper);overflow:hidden;margin:8px 0 6px}
.pfilerle i{display:block;height:100%;border-radius:999px}
.pfmeta{display:block;font-size:12.5px;color:var(--ink-3)}
/* .pfsatirmet b kurali (display:block, 15.5px) bu satirin icindeki <b>'yi de
   yakaliyordu: "Senin secimin:" kucuk kaliyor, cevap alt satira buyuk harfle
   dusuyordu. Iki parca ayni cumlenin parcasi -- ayni satirda, ayni puntoda,
   yalnizca renk ve kalinlik ayiriyor. */
.pfkazanan{display:block;font-size:14px;color:var(--ink-2);margin-top:5px}
.pfkazanan b{display:inline;font-size:inherit;font-weight:700;color:var(--brand)}
.pfsatirey{flex:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pffiltre{display:flex;gap:6px;flex-wrap:wrap}
.pfdaha{display:flex;justify-content:center;margin-top:14px}

/* ---- özel seri kartı ---- */
.pfkap.ozkap{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;
  background:var(--paper)}
.pfkap.ozkap i{display:block;background-size:cover;background-position:center}
.pfkap.ozkap b{grid-column:1/-1;grid-row:1/-1;align-self:center;justify-self:center;
  font-family:var(--disp);font-weight:var(--disp-w);font-size:26px;color:var(--ink-3)}
.pfkap.ikkap .ph{--mo:.8}
.pfpil.oztas{background:var(--line);color:var(--ink-2)}
.pfpil.ozpay{background:var(--brand);color:#fff}
.ozlink{display:block;margin-top:5px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- ayarlar ---- */
.pfgeri{border:0;background:none;cursor:pointer;padding:0 0 4px;font-family:var(--nav);
  font-weight:600;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.pfgeri:hover{color:var(--ink)}
.pfayarbas{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(26px,3.2vw,38px);
  line-height:1.04;margin:10px 0 24px}
.pfayar{display:grid;gap:22px}
.pfmail .pflbl{margin-bottom:8px}
.pfmailsatir{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--paper);border-radius:12px;padding:12px 14px}
.pfmaildeger{font-size:15px;font-weight:600;color:var(--ink);word-break:break-all}
.pfmaildeger i{font-style:normal;font-weight:500;color:var(--ink-3)}
.pfbekle{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);
  background:rgba(108,43,217,.07);border-left:3px solid var(--brand);
  border-radius:0 10px 10px 0;padding:11px 14px}
.pfmetinbtn{border:0;background:none;padding:0;cursor:pointer;font:inherit;
  color:var(--brand);text-decoration:underline}
.pfmailform{margin-top:14px}
.pfmailform[hidden]{display:none}
.pfmailnot{margin:10px 0 0;font-size:13.5px;color:var(--ink-2)}
.pfmailnot.ok{color:#1B7A3E}.pfmailnot.err{color:#B3261E}
.pfayarey{display:flex;gap:12px;flex-wrap:wrap}
.pfcikis{display:flex;justify-content:center;padding:20px}
.btn.tehlike{border-color:#E2C3C0;color:#B3261E}
.btn.tehlike:hover{border-color:#B3261E;background:#FDF3F2}
.btn.tehlike.dolu{background:#B3261E;border-color:#B3261E;color:#fff}
.btn.tehlike.dolu:hover{background:#96201A;border-color:#96201A;color:#fff}

/* Bir serideki kendi sonucun. */
.sonuckutu{position:relative;width:min(520px,100%);max-height:min(88vh,800px);overflow:auto;
  background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-l);padding:30px}
.sonuckutu .ozkapa{position:absolute;top:14px;right:18px}
.snkick{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase}
.snbas{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(21px,2.5vw,28px);
  line-height:1.08;margin:9px 40px 0 0}
.snson{display:flex;gap:18px;align-items:center;margin-top:22px;background:var(--paper);
  border-radius:16px;padding:16px}
.sngor{width:92px;height:70px;flex:none;border-radius:11px;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center}
.sngor img{width:100%;height:100%;object-fit:cover;display:block}
.sngor .ph{position:absolute;inset:0;overflow:hidden;--mo:.9}
.sngor .ph i{position:absolute;display:block;opacity:.32}
.sngor .ph i svg{width:100%;height:100%;display:block;fill:currentColor}
.snet{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.snad{display:block;font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(19px,2.2vw,25px);
  line-height:1.08;margin:6px 0 6px;color:var(--brand)}
.snmeta{display:block;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.sngecmis{margin-top:22px}
.sngecmis ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.sngecmis li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;border-top:1.5px solid var(--line);padding-top:8px}
.sngecmis li span{font-weight:600;font-size:14px;color:var(--ink)}
.sngecmis li i{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.sney{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:26px}

/* Onay sayfacığı: geri alınamayan işlemin ikinci sorusu. */
.onaykutu{width:min(460px,100%);background:var(--surface);border-radius:var(--r);
  box-shadow:var(--shadow-l);padding:30px 30px 24px;text-align:center}
.onaybas{font-family:var(--disp);font-weight:var(--disp-w);font-size:26px;line-height:1.06;margin:0}
.onaymes{margin:14px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.onaymes[hidden]{display:none}
.onayey{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.ginput:disabled{background:var(--paper);color:var(--ink-3);border-color:var(--line);cursor:not-allowed}
/* AD CAKISMASI: once .ozet demistim; o sinif sonuc ekranindaki kimlik ozet
   blogu icin zaten kullaniliyor ve mor zeminini bu etiketlere tasiyordu. */
.pflbl{display:block;font-family:var(--nav);font-weight:600;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);margin-bottom:4px}
.pflbl i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.8}
.pflbl .ginput,.pflbl textarea{margin-top:7px;text-transform:none;letter-spacing:0;color:var(--ink)}

/* ---- özel seri sihirbazı ---- */
body.kilit{overflow:hidden}
.ozkat{position:fixed;inset:0;z-index:9500;background:rgba(9,13,24,.55);
  display:flex;align-items:center;justify-content:center;padding:20px}
.ozkat[hidden]{display:none}
.ozkutu{width:min(680px,100%);max-height:min(88vh,860px);display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-l);overflow:hidden}
.ozust{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 14px}
.ozkick{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.ozbas{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(22px,2.6vw,30px);
  line-height:1.05;margin:7px 0 0}
.ozkapa{border:0;background:none;cursor:pointer;font-size:30px;line-height:1;color:var(--ink-3);padding:0 4px}
.ozkapa:hover{color:var(--ink)}
.ozcubuk{height:3px;background:var(--line)}
.ozcubuk i{display:block;height:100%;background:var(--brand);transition:width .25s ease}
.ozgov{padding:20px 24px;overflow:auto;flex:1 1 auto}
.ozalt{display:flex;align-items:center;gap:14px;padding:16px 24px;border-top:2px solid var(--line)}
.ozalt .btn:last-child{margin-left:auto}
.ozuyari{font-size:13.5px;color:#B3261E;flex:1 1 auto}
/* Kullaniciya bilgi veren her kutu ayni isareti tasiyor: mor daire icinde i.
   Metin yaninda hizali dursun diye kutu flex. */
.bilgii,.ozipucu,.pfnot,.pfbekle{display:flex;gap:10px;align-items:flex-start}
/* "i" bir harf değil, çizim. Harf olduğunda iki sorun vardı: yazı tipinin
   kendi metrikleri yüzünden daire içinde optik olarak ortalanmıyordu (satır
   kutusu ortalanıyor, mürekkep değil) ve 19px'lik dairede fazla iriydi.
   Çizimde nokta ile gövdenin toplam mürekkebi 4,2-13,8 arasında, yani merkezi
   tam 9 — dairenin merkeziyle aynı. Yazı tipi yüklenmese de değişmez. */
.bilgii::before,.ozipucu::before,.pfnot::before,.pfbekle::before{
  content:"";flex:none;width:18px;height:18px;border-radius:50%;margin-top:1px;
  background:var(--brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='9' cy='5.5' r='1.3'/%3E%3Crect x='7.9' y='8.2' width='2.2' height='5.6' rx='1.1'/%3E%3C/g%3E%3C/svg%3E")
    center / 18px 18px no-repeat}
.ozipucu{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
/* Son adımdaki not dört satır: "i" tepeye yaslıyken paragrafın yanında değil
   ilk satırın yanında duruyordu. Burada kutunun ortasına oturuyor. Diğer
   kullanımlar (tek-iki satırlık .bilgii, .pfnot) flex-start kalıyor; orada
   ortalamak ikonu ilk satırdan aşağı kaydırıyor. */
.ozipucu.son{margin:16px 0 0;background:var(--paper);border-radius:12px;padding:13px 15px;
  align-items:center}
.ozipucu.son::before{margin-top:0}

/* ---------- PAYLAŞMADAN ÖNCE ----------
   Son adımın altındaki onay bloğu. İpucu kutusu DEĞİL: ipucu yardımdır,
   burası yükümlülük. O yüzden "i" ikonu yok, kenarlığı belirgin ve başlığı
   var. Önizlemeden sonra geliyor — kullanıcı neyi paylaşacağını gördükten
   sonra neyi üstlendiğini okuyor. */
.ozonay{margin:18px 0 0;border:1.5px solid var(--line);border-radius:14px;
  padding:15px 17px 16px;background:var(--surface)}
.ozonay h4{margin:0 0 9px;font-family:var(--nav);font-weight:700;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.ozonay ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:7px}
.ozonay li{font-size:13px;line-height:1.5;color:var(--ink-3)}
.ozonay a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
/* Kutu metnin yanında değil üstünde hizalı: üç satırlık etikette ortalanmış
   bir kutu metnin ortasına kayıyor ve neyi işaretlediği belirsizleşiyor. */
.ozonaysec{display:flex;gap:10px;align-items:flex-start;margin-top:13px;
  padding-top:13px;border-top:1px solid var(--line);cursor:pointer}
.ozonaysec input{flex:none;width:19px;height:19px;margin:1px 0 0;accent-color:var(--brand);cursor:pointer}
.ozonaysec span{font-size:13.5px;line-height:1.45;color:var(--ink)}
/* Onayı zaten alınmışsa kutu yerine kaydın kendisi: ne zaman kabul edildiği. */
.ozonaykabul{display:flex;gap:8px;align-items:flex-start;margin:13px 0 0;
  padding-top:13px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.45;color:var(--ink-3)}
.ozonaykabul svg{flex:none;margin-top:2px;color:var(--brand)}
.ozonaykabul b{font-weight:600;color:var(--ink-2)}

/* İçeriği bildir — özel seri sayfasının altında, sakin. Düğme değil bağlantı:
   bu bir eylem çağrısı değil, gerektiğinde bulunması gereken bir kapı. */
.spbildir{margin:10px 0 0;text-align:right}
.spbildir[hidden]{display:none}
.spbildirl{font-size:12.5px;color:var(--ink-3);text-decoration:underline;
  text-underline-offset:3px}
.spbildirl:hover{color:var(--ink)}
/* Kapak secici: tiklanabilir genis bir alan, secilince gorselin kendisi. */
.ozkapakal{display:flex;align-items:center;justify-content:center;cursor:pointer;
  aspect-ratio:16/6;border:2px dashed var(--line);border-radius:14px;overflow:hidden;
  background:var(--paper);text-align:center;padding:14px;margin-bottom:6px}
.ozkapakal:hover{border-color:var(--brand)}
.ozkapakal.dolu{border-style:solid;padding:0}
.ozkapakal img{width:100%;height:100%;object-fit:cover;display:block}
.ozkapakal span{font-size:13px;line-height:1.5;color:var(--ink-3);max-width:40ch}
.ozkapakal b{display:block;font-family:var(--nav);font-size:13.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-2);margin-bottom:4px}
.ozkapaksil{font-size:13px}

.ozaday{display:grid;gap:10px}
.ozsatir{display:flex;gap:12px;align-items:center}
/* Sira numarasi: 128 adaya kadar cikabilen bir listede "kacinci sirdayim"in
   tek cevabi. */
.ozno{flex:none;width:22px;text-align:right;font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;font-weight:600;color:var(--ink-3)}
/* Tasima oklari ve kaldir: once cerceveli bir "SİL" dugmesiydi, alanlarin
   yaninda gereginden agirdi. Simdi ucu de kucuk ve ikincil. */
.ozarac{flex:none;display:flex;align-items:center;gap:2px}
.ozok,.ozkaldir{border:0;background:none;cursor:pointer;color:var(--ink-3);
  width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:10px;line-height:1}
.ozkaldir{font-size:20px;margin-left:4px}
.ozok:hover,.ozkaldir:hover{background:var(--paper);color:var(--ink)}
.ozkaldir:hover{color:#B3261E}
.ozok:disabled{opacity:.28;cursor:default}
.ozok:disabled:hover{background:none;color:var(--ink-3)}
@media (max-width:560px){
  .ozsatir{gap:8px}
  .ozno{width:16px;font-size:11.5px}
  .ozgor{width:52px;height:52px}
  .ozarac{flex-direction:column;gap:0}
}
.ozgor{width:64px;height:64px;flex:none;border:2px dashed var(--line);border-radius:12px;
  overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:var(--paper)}
.ozgor:hover{border-color:var(--brand)}
.ozgor img{width:100%;height:100%;object-fit:cover;display:block}
.ozgor span{font-family:var(--nav);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3)}
.ozalanlar{flex:1 1 auto;min-width:0}
.ozalanlar .ginput{margin-bottom:6px}
.ozalanlar .kucukg{font-size:13.5px;padding:9px 12px;margin-bottom:0}
.ozadayalt{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.ozsay{font-size:13px;color:var(--ink-3)}
.ozonizle{position:relative;background:var(--paper);border-radius:16px;padding:20px;
  overflow:hidden}
/* Kapak keskin haliyle zemin olunca uzerindeki aday listesi okunmuyordu:
   kapagin kendi detayi yazinin detayiyla yarisiyor. Iki katman:
   ::before bulanik kapak (kenar sizmasin diye biraz buyutulmus),
   ::after duz koyu perde. Ikisi de icerigin ALTINDA. */
.ozonizle.kapakli{color:#fff;isolation:isolate}
.ozonizle.kapakli::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--kapak);background-size:cover;background-position:center;
  filter:blur(18px) saturate(.85);transform:scale(1.12)}
.ozonizle.kapakli::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,13,24,.66) 0%,rgba(9,13,24,.84) 100%)}
.ozonizle.kapakli .ozonkick{color:rgba(255,255,255,.72)}
.ozonizle.kapakli>p{color:rgba(255,255,255,.9)}
.ozonizle.kapakli .ozonsay{color:rgba(255,255,255,.72)}
.ozonizle.kapakli .ozongor{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.ozonizle.kapakli figcaption b{color:#fff}
.ozonizle.kapakli figcaption span{color:rgba(255,255,255,.72)}
.ozonkick{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.ozonizle h3{font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(20px,2.4vw,28px);
  line-height:1.06;margin:8px 0 0}
.ozonizle>p{margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.ozongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:16px}
.ozongrid figure{margin:0}
.ozongor{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;border-radius:10px;
  overflow:hidden;background:var(--surface);border:1.5px solid var(--line)}
.ozongor img{width:100%;height:100%;object-fit:cover;display:block}
.ozongor i{font-family:var(--disp);font-weight:var(--disp-w);font-size:26px;color:var(--ink-3);font-style:normal}
.ozongrid figcaption{margin-top:6px}
.ozongrid figcaption b{display:block;font-size:13px;line-height:1.25}
.ozongrid figcaption span{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.ozonsay{margin:16px 0 0;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-3)}

@media (max-width:700px){
  .pfust{padding:18px 18px;gap:18px}
  .pfav{width:68px;height:90px}
  .pfeylem{width:100%}
  .pfeylem .btn{flex:1 1 auto;justify-content:center;text-align:center}
  .pfblok{padding:18px 16px}
  .kkizgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kkart{padding:12px 12px 16px;border-radius:15px}
  .kkart h3{font-size:16.5px;margin-top:11px}
  .kkart p{font-size:12.5px}
  .pfkbas .btn{width:100%;justify-content:center}
  /* Satır mobilde iki kata iniyor: kapak + metin üstte, eylemler altta tam genişlik. */
  .pfsatir{flex-wrap:wrap}
  .pfsatirmet{flex:1 1 60%}
  .pfsatirey{width:100%;justify-content:flex-start}
  .pfsatirey .btn{flex:1 1 auto;justify-content:center}
  .pfayarbas{margin-bottom:18px}
  /* Telefonda mor bant iki düğmeyle uzadı; boş blok da onun kadar kısıldı
     ki altındaki karakter kartlarının üstü katlanın içinde kalsın. */
  .pfbosblok{padding:20px 18px 22px}
  .pfboskart{width:56px;height:75px}
  .pfboskart .soruik{height:36px}
  .pfbosbas{font-size:17px;margin-top:11px}
  .pfbosmes{margin-top:6px}
  .pfbosblok .btn{margin-top:15px}
  .pfsek{margin-top:18px}
  .pfmailsatir{align-items:flex-start;flex-direction:column;gap:10px}
  .pfmailsatir .btn{width:100%;justify-content:center}
  .onaykutu{padding:26px 22px 20px}
  .sonuckutu{padding:24px 18px;border-radius:0;width:100%;max-height:100vh;height:100%}
  /* Satir telefonda da yatay kaliyor: tam genislige buyutunce aday gorseli
     (cogu kez uzerinde yazi olan bir kapak) ortasindan kirpiliyordu. */
  .snson{gap:14px;padding:14px}
  .sngor{width:78px;height:60px}
  .sney .btn{flex:1 1 auto;justify-content:center}
  .onayey .btn{flex:1 1 auto;justify-content:center}
  /* .ozkat tam ekran SİHİRBAZ için; onay kutusu aynı sınıfı paylaşıyor ve
     kenarlara yapışıp ekrandan taşacakmış gibi duruyordu. Onay kutusu
     telefonda da ortada duran bir kutu. */
  #onayKat{padding:18px}
  .onaykutu{width:min(420px,100%);border-radius:var(--r)}
  .onaybas{font-size:22px;line-height:1.12}
  .onayey{margin-top:20px}
  .ozkat{padding:0}
  .ozkutu{width:100%;max-height:100vh;height:100%;border-radius:0}
  .ozalt{flex-wrap:wrap}
  .ozalt .btn{flex:1 1 auto;justify-content:center}
  .ozuyari{order:3;flex:1 1 100%}
}
@media (max-width:420px){
  .kkizgara{grid-template-columns:1fr 1fr}
}


/* ---------- Kapanmış mahkeme dosyaları ----------
   Canlı panelle aynı gövde (.mahkeme.done) ama ızgarasız: görsel yok, sayaç yok.
   Ayırt eden şey mühür — kararın kendisi tipografik bir nesne olarak duruyor. */
.mahesler{margin-top:52px}
.messbas{font-family:var(--disp);font-weight:var(--disp-w);text-transform:uppercase;
  font-size:clamp(20px,3vw,27px);line-height:1;letter-spacing:.01em;
  color:var(--ink);margin:0 0 20px}
.mahes{padding:24px 28px 26px}
/* Kapanmış dosyada künye iki uçta: solda dosya numarası, sağda dönem —
   bir belge antedi gibi. "Karar açıklandı" etiketi kalktı çünkü mühür zaten
   aynı şeyi ve fazlasını söylüyor; kategori de kalktı çünkü panelin rengi ve
   arka plandaki motifler onu zaten anlatıyor. */
.mahes .mahkunye{justify-content:space-between;gap:12px;width:100%}
.mahes .mahkunye > span{flex:none}
.mahes + .mahes{margin-top:20px}
/* Kapanmış dosyada künye tek satır; sağdaki "Karar açıklandı" onu bitiriyor. */

/* Canlı dosyadaki .mahsoru gibi cümle düzeninde: hem tutarlı, hem büyük
   harfte "BARBENHEİMER" sorunu kökten kalkıyor. */
/* Görselsizken tek sütun, görselliyken solda 168px'lik bir kolon. Kolon iki
   satırı kapsıyor (metin + seçenekler), karar bandı ızgaranın dışında kalıyor. */
.mesgrid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:20px;margin-top:18px}
.mesgrid.gorselli{grid-template-columns:168px minmax(0,1fr);column-gap:22px}
.mesgrid.gorselli > .mesgor{grid-column:1;grid-row:1/3}
.mesgrid.gorselli > .mesmet{grid-column:2;grid-row:1}
.mesgrid.gorselli > .mahopts{grid-column:2;grid-row:2}
.mesgor{position:relative;border-radius:var(--r-sm);overflow:hidden;align-self:stretch;
  min-height:190px;background:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.32);
  outline:1px solid rgba(247,235,212,.14);outline-offset:-1px}
/* Fotoğraflar dikey; dar ve uzun kutuda ağırlık üstte kalsın ki yüz kesilmesin. */
.mesgor img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 22%}
.messoru{font-family:var(--disp);font-weight:var(--disp-w);text-transform:none;
  font-size:clamp(21px,2.9vw,30px);line-height:1.08;letter-spacing:.005em;
  color:var(--brand-cream);margin:18px 0 0}
/* text-wrap:pretty son satırda tek kelime bırakmıyor — cümle tam genişliği
   kullanınca ortaya çıkan "bulmuştur." gibi öksüz satırları toparlıyor. */
.mesarka{margin:11px 0 0;font-size:14.5px;line-height:1.6;text-wrap:pretty;
  color:rgba(247,235,212,.74)}
/* Izgara zaten row-gap veriyor. */
.mesgrid .mahopts{margin-top:0}
/* Kapanmış dosyada çubuk beklemiyor, kararı zaten verilmiş: geçiş yok ki
   sayfa her açıldığında dört kart birden soldan sağa dolmasın. */
.mahes .mahopt .mkbar{transition:none}
.meskarar{margin-top:20px;padding-top:18px;border-top:1px solid rgba(247,235,212,.15)}
/* Mühür: hafif eğik, kalın çerçeveli, vurgu renginde. Eğim 2 dereceden fazla
   olursa satır yüksekliğini bozuyor ve "şaka" gibi duruyor — bu bir karar. */
.mesdamga{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--disp);font-weight:var(--disp-w);
  font-size:14.5px;line-height:1;letter-spacing:.055em;
  color:var(--mh,var(--brand-hl));
  border:2.5px solid currentColor;border-radius:9px;padding:10px 15px 11px;
  transform:rotate(-1.8deg)}
.mesdamga b{font-weight:inherit;color:var(--brand-cream)}
.mesdamga .mestok{width:19px;height:19px;flex:none;display:block}
.mesger{margin:15px 0 0;font-size:14.5px;line-height:1.62;text-wrap:pretty;
  color:rgba(247,235,212,.86);font-style:italic}
@media (max-width:880px){
  /* Telefonda dikey fotoğraf ekranı yer; yatay bir şeride dönüşüyor. */
  .mesgrid.gorselli{grid-template-columns:minmax(0,1fr)}
  .mesgrid.gorselli > .mesgor,
  .mesgrid.gorselli > .mesmet,
  .mesgrid.gorselli > .mahopts{grid-column:auto;grid-row:auto}
  /* align-self:start ŞART. Üst kuralda stretch var (masaüstünde kutu metnin
     boyuna uzuyor); telefonda tek sütuna düşünce stretch ile aspect-ratio
     çakışıyor: kutunun boyu satırdan, satırın boyu kutudan geliyor ve içerik
     mutlak konumlu <img> olduğu için ortada boy belirleyen hiçbir şey kalmıyor.
     Chromium oranı uyguluyor, Safari kutuyu 0'a indiriyordu — Cansu'nun
     telefonunda kapanan dosyaların görseli bu yüzden hiç görünmüyordu.
     min-height ikinci emniyet: oran hiç uygulanmasa bile kutu görünür kalıyor. */
  /* KARE, 3:2 DEĞİL. Fotoğraflar 4:5 dikey; 3:2'lik şerit yüksekliğin
     %47'sini atıyordu ve öznesi altta olan fotoğrafta (tatil dosyası:
     masadaki lahmacun) özne neredeyse hiç görünmüyordu. Karede atılan pay
     %20'ye iniyor ve üçünde de hem sahne hem özne kadraja giriyor.
     Canlı dosyanın kutusu (.mahgor) zaten kare — ikisi artık aynı dilde.
     Kırpım merkezden; istisnası olan dosya kendi `odak` alanını yazıyor. */
  .mesgor{aspect-ratio:1/1;min-height:160px;align-self:start}
  .mesgor img{object-position:50% 50%}
  .mahes{padding:20px 20px 22px}
  .mahesler{margin-top:38px}
  /* Dar ekranda künye sarınca "Karar açıklandı" kendi satırına düşsün ama
     genişliği kadar kalsın. Canlı modülde bu etiket flex-basis:100% alıyor
     (amblemin altında tam satır olsun diye); arşiv kartında amblem yok ve
     tam genişlikte bir gri şerit tıklanabilir bir düğme gibi duruyor. */

}
@media (max-width:700px){
  /* Arşivdeki seçenek adları canlı dosyadakinden uzun olabiliyor ("Oppenheimer",
     "Fiyatlar normal"): tek sütuna inen kutuda ad ve yüzde aynı satırı
     paylaştığı için ikisini birden küçültüyoruz. */
  .mahes .mahopt .mkad{font-size:18px}
  .mahes .mahopt .mkv{font-size:23px}
  .mahes .mahopt{padding:14px 15px}
  .mahes .mahopt .mkvur{width:40px;height:40px}
  .mahes .mahopt .mktok{width:23px;height:23px}
}

/* ---------- sonuç sayfası: topluluk sonuçları ----------
   Arşivdeki tablonun aynısı; burada akordeon yok, liste doğrudan açık.
   `.arliste.tek` tek kartlık kullanım: dış boşluk ve çerçeve arşivdeki
   <details> kabuğundan geliyordu, burada kabuk yok. */
.arliste.tek{gap:0;background:var(--surface);border:2px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.arliste.tek .argovde{border-top:0;padding:14px 20px 18px}
.arsat.benim{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.arsat.benim .arad{font-weight:700;color:var(--ink)}
.arsat.benim .arad small{color:var(--brand);font-weight:600}
.arsat.benim .arbar i{background:var(--brand)}
.arsat.benim .arpct{color:var(--brand);font-weight:700}
.arara{list-style:none;text-align:center;color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace;font-size:13px;padding:4px 0}
@media (max-width:620px){.arliste.tek .argovde{padding:12px 14px 16px}}

/* ---------- YORUMLAR ----------
   Kapalı akordeon, topluluk arşiviyle aynı dil: isteyen açar. Sayfanın
   ana akışını kesmiyor, gezinmenin hemen üstünde duruyor.
   <details> kullanılıyor çünkü açılır kapanır davranışı tarayıcının
   kendi işi: klavye, ekran okuyucu ve "sayfada bul" bedava geliyor. */
.yorumlar{margin-top:22px}
.yorumlar[hidden]{display:none}
.yrkutu{border:1.5px solid var(--line);border-radius:16px;background:var(--surface);
  overflow:hidden}
.yrkutu > summary{display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:14px 18px;list-style:none;user-select:none}
.yrkutu > summary::-webkit-details-marker{display:none}
.yrkutu > summary:hover{background:var(--paper)}
.yrkutu > summary:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
/* Sayı rozeti markanın moru: kaç yorum olduğu başlıkla yarışmadan okunuyor. */
/* Başlık .splbl mikro etiketiyle çiziliyordu (10.5px mono) ve modül
   kapalıyken bir başlık gibi okunmuyordu. Kendi kuralı: başlık punto, nav
   fontu, yanında konuşma balonu ikonu. */
.yrbas{font-family:var(--nav);font-weight:700;font-size:19px;line-height:1;
  letter-spacing:.015em;text-transform:uppercase;color:var(--ink)}
.yrikon{flex:none;width:21px;height:21px;color:var(--brand)}
.yrsay{flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  background:var(--brand);color:#fff;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
/* Çağrı metni sağa yaslı ve soluk: başlık solda, eylem sağda, ok en uçta. */
.yrac{margin-left:auto;font-size:13px;color:var(--ink-3);white-space:nowrap}
.yrok{flex:none;width:18px;height:18px;color:var(--ink-3);transition:transform .18s ease}
.yrkutu[open] > summary .yrok{transform:rotate(180deg)}
.yrgov{padding:4px 18px 18px;border-top:1px solid var(--line)}

.yrliste{list-style:none;margin:0 0 18px;padding:14px 0 0;display:flex;
  flex-direction:column;gap:14px}
.yrsatir{padding:13px 15px;border-radius:12px;background:var(--paper)}
.yrsatir p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink)}
.yrust{display:flex;align-items:center;gap:10px}
/* Ad 40 karaktere kadar olabiliyor; telefonda tarihi iki satıra kırıyordu.
   Ad kısalıp üç nokta alıyor, tarih tek satırda kalıyor — tarih satırın
   çapası, ad ise zaten tıklanınca tam görünecek bir şey değil. */
.yrust b{font-family:var(--nav);font-weight:700;font-size:13.5px;color:var(--ink);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yrzaman{flex:none;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  color:var(--ink-3);white-space:nowrap}
/* Karakter avatarı: profil kartının küçük hali. Yuvarlak değil 3/4 köşeli
   — sitenin her yerinde karakter bu oranda duruyor, yorumda birden
   yuvarlaşması başka bir şey sanılmasına yol açardı. Henüz karakteri
   olmayan için boş hali: adın ilk harfi. */
.yrav{flex:none;width:32px;height:40px;border-radius:8px;overflow:hidden;
  background:#E9E2D6;box-shadow:0 0 0 1.5px var(--line);
  display:flex;align-items:center;justify-content:center}
/* Karakter görselleri 720×1080 boy portre (2:3). Kutu 4:5, yani cover
   yalnızca ALTTAN ~%11 kırpıyor ve %2'lik üst hizayla hiçbir baş kesilmiyor.
   Önce sabit bir zoom (scale 1.6, odak %28) denenmişti; altı karakterin baş
   yüksekliği görselden görsele %19 ile %36 arasında değiştiği için tek odak
   noktası hepsine uymuyordu — Halkın Nabzı'nın başı yarıdan kesiliyordu.
   Kutu zemini de artık çizimlerin kendi bej'i: yuvarlama farkı görünmesin. */
.yrav img{width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 2%}
.yrav.bos{background:var(--paper);color:var(--ink-3);
  font-family:var(--nav);font-weight:700;font-size:16px}
/* Kendi yorumunu silme: satırın sağ ucunda, sessiz metin düğmesi.
   Profildeki "Sil" ile aynı sözcük — sitede silme hep "Sil". */
.yrsil{margin-left:auto;flex:none;font-size:12.5px;color:var(--ink-3);
  text-decoration:none;border-bottom:1px solid var(--line)}
.yrsil:hover{color:#BD392B;border-bottom-color:#BD392B}
/* Bekleyen yorum: kendi yorumunu görüyorsun ama yayında olmadığı belli.
   Kesik çerçeve "henüz yerleşmedi" demenin en sessiz yolu. */
.yrsatir.bekleyen{background:transparent;border:1.5px dashed var(--line)}
.yrbek{display:block;margin-top:9px;font-size:12px;line-height:1.4;color:var(--ink-3);
  font-style:italic}
.yrbos{margin:14px 0 18px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}

.yrform{display:flex;flex-direction:column;gap:11px;padding-top:16px;
  border-top:1px solid var(--line)}
/* Üye olmayanın yazma alanı: formun yerini alıyor, aynı üst çizgi,
   aynı boşluk — eksik bir şey dehşetinden çok "burada şu var" hissi. */
.yrgiris{padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.yrgbas{margin:0;font-family:var(--nav);font-weight:700;font-size:16.5px;
  line-height:1.2;color:var(--ink)}
.yrform textarea{resize:vertical;min-height:76px}
/* Not ve düğme aynı satırda: moderasyon uyarısı göndermeden ÖNCE okunmalı,
   düğmenin altına atılırsa gönderildikten sonra fark ediliyor. */
.yralt{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.yrnot{margin:0;flex:1 1 240px;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.yrnot a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.yruyari{margin:0;min-height:0;font-size:13px;color:#BD392B}
.yruyari:empty{display:none}
@media (max-width:620px){
  .yrkutu > summary{padding:12px 14px;gap:8px}
  .yrbas{font-size:17px}
  .yrikon{width:19px;height:19px}
  .yrac{font-size:12px}
  /* Telefonda "Tüm Yorumları Gör" sayı rozetiyle aynı satıra sığmıyor:
     360px'te üç satıra sarıp başlığı 80px'e çıkarıyordu. Rozet varken
     gizleniyor — sayı ve ok zaten "burada yorum var, dokun" diyor.
     Rozet yoksa (hiç yorum yok) "Yorum yaz" kalıyor, kısa ve sığıyor. */
  .yrsay + .yrac{display:none}
  /* Gizlenince boşluğu iten `margin-left:auto` da gidiyor; ok sağ uçta
     kalsin diye auto'yu ok devralıyor. Yalnız rozet varken: rozet yoksa
     .yrac görünür ve auto onda kalıyor (iki auto boşluğu bölüşürdü). */
  .yrsay ~ .yrok{margin-left:auto}
  .yrgiris .btn{width:100%;text-align:center}
  .yrgov{padding:4px 14px 16px}
  .yralt{align-items:stretch}
  .yralt .btn{width:100%}
}

/* Profildeki "Yorumlarım" satırı: pfsatir iskeletini kullanıyor, tek farkı
   yorumun kendisinin alt satırda tam metin durması. */
/* Satırın kendisi ortalı (pfsatir'in varsayılanı): "Sil" düğmesi soldaki
   metin bloğunun ortasına denk gelsin. Yalnız avatar yukarı yaslı — o
   adın/rozetin hizasında durmalı, yorum uzadıkça ortaya kaçmamalı. */
.pfsatir.yrpf > .yrav{align-self:flex-start;margin-right:12px}
/* Başlık artık bağlantı: .pfsatirmet b ile aynı punto ve blok davranışı,
   farkı imleç ve üzerine gelince markanın moruna dönmesi. */
.yrpfbag{display:block;font-family:var(--nav);font-weight:700;font-size:15.5px;
  line-height:1.3;margin:5px 0 0;color:var(--ink);text-decoration:none}
.yrpfbag:hover{color:var(--brand)}
.yrpfbag:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.pfsatir.yrpf .yrpfm{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.pfpil.ozbek{background:#FFF1D6;color:#8A6A1F}