/* =========================================================================
   YUDUM4 — TEMA İSKELETİ
   =========================================================================
   ⚠⚠ BU DOSYA SIFIRDAN YAZILDI. Eski temalardan (yudum, yudum-yeni, yudum3)
   tek satır taşınmadı; yazarken o dosyalar açılmadı. Denetim:
       python3 tools/tema_sifir_denetim.py yudum4
   Beş ölçünün beşi de 0 olmalı: kopya kural · jeton dışı renk · !important ·
   tanımsız/ölü sınıf · kopya widget.

   KURALLAR (bu dosyada bilerek uygulananlar):
   1. RENK YALNIZ JETONDA. Aşağıdaki :root blokları dışında hiçbir yerde
      hex/rgb yok. Açık mod koyudan TÜRETİLMEZ; iki palet de ayrı yazılır.
   2. SABİT PX YOK. Ölçüler rem, oran (aspect-ratio), clamp() ve ızgara ile.
      Tek istisna kenarlık kalınlığı (1px) — orantılanacak bir şey değil.
   3. !important YOK. Çakışma varsa seçici yanlıştır, ezme değil düzeltme.
   4. MOBİL ASIL DURUM. Taban kurallar dar ekrana yazıldı; geniş ekran
      min-width kırılımlarıyla EKLENİR. Tersi (masaüstü + max-width) her
      seferinde mobilde bir şeyi bozuyordu.
   5. TEK ÖN EK: y4-. Eski sınıf adlarıyla çakışmaz, karışmaz.
   ========================================================================= */

/* ── JETONLAR: AÇIK MOD (varsayılan) ─────────────────────────────────── */
:root {
  /* Zeminler — üç katman: sayfa, yüzey, yükseltilmiş yüzey.
     ⚠⚠ SAF BEYAZ YOK (Selçuk, defalarca): ilk sürümde zemin #f7f7fb,
     yüzey #ffffff idi ve ekran göz alıyordu. Açık tema "beyaz sayfa"
     değildir; kırık beyaz zemin + hafif daha açık yüzey, aralarında
     görülebilir ama sert olmayan fark. Parlaklık farkı kontrastla
     karıştırılmamalı — okunurluğu METİN jetonu sağlar, zemin değil. */
  /* ⚠⚠ PARLAKLIK DÜŞÜK TUTULUR (Selçuk: "gözlerim kamaşıyor"). Açık tema
     aydınlık olacak diye ekranı lamba yapmak, uzun süre bakılan bir sitede
     kullanılamaz. Zemin doygun gri; yüzey ondan açık ama beyaz değil. */
  --y4-zemin: #08080e;   /* sayfa — kamaştırmayan gri */
  --y4-yuzey: #15161f;   /* kart/kutu — zeminden açık, beyaz DEĞİL */
  --y4-yuzey-2: #1f2130; /* ikincil yüzey */
  --y4-cizgi: #333649;   /* kenarlık — net görünür (AYRAÇLAR için) */
  /* ⚠⚠ KART/KUTU KENARLIĞI AYRI JETON (17 Ağu 2026, Selçuk: "her şey kutu
     kutu"): her yüzeye net kenarlık çizilince sayfa çerçeve yığınına dönüyor.
     Kart ve kutular zeminden RENK FARKIYLA ayrılır; çizgi yalnız gerçek
     ayraçlarda (başlık altı, satır arası) kalır. */
  --y4-kart-cizgi: transparent;

  /* Metin — üç ağırlık. ⚠ Yazı okunmuyor şikâyetinin kaynağı soluk
     gri tonlardı; ikincil ve üçüncül renkler koyulaştırıldı. */
  /* ⚠ Alt bilgi ve ikincil yazılar OKUNMUYORDU: soluk griler koyulaştırıldı.
     Üçüncül renk "silik" demek değil, "biraz daha az baskın" demek. */
  /* Marka renkleri — tema modundan bağımsız (WhatsApp/X kendi rengi). */
  --y4-marka-whatsapp: #25d366;
  --y4-marka-x: #0c0e14;

  --y4-metin: #f2f2f8;
  --y4-metin-2: #b9b9cc;
  --y4-metin-3: #8888a0;

  /* Vurgu */
  --y4-vurgu: #9a5cff;
  --y4-vurgu-2: #c08bff;
  --y4-vurgu-zit: #08080e;

  /* Durum renkleri */
  --y4-olumlu: #3ddc90;
  --y4-uyari: #ffc061;
  --y4-olumsuz: #ff6b7a;
  --y4-canli: #ff4d64;

  /* ── ÇERÇEVE: ÜST ÇUBUK + ALT BİLGİ ──────────────────────────────
     ⚠⚠ SAYFA ZEMİNİNİ TAKİP ETMEZ (Selçuk, 16 Ağu: "her yeri beyaz veya
     gri yapmak sorunu çözmüyor — mesela footer, mesela header").
     Açık modda da KOYU kalırlar. Sebep hem karakter hem işlev: içerik
     alanı aydınlıkken çerçevenin koyu olması sayfayı çerçeveler, gözü
     içeriğe toplar ve "uçsuz beyaz düzlük" hissini kırar.
     ⚠ Bu yüzden çerçeve renkleri koyu mod bloklarında TEKRAR TANIMLANMAZ;
     iki modda da aynıdır. */
  --y4-cerceve: #131a2e;
  --y4-cerceve-2: #1b2440;      /* çerçeve içi yüzey (arama kutusu vb.) */
  --y4-cerceve-metin: #e8ecf8;
  --y4-cerceve-metin-2: #a9b4d0;
  --y4-cerceve-cizgi: #2b3760;

  /* Perde — görsel üstü karartma. ⚠ Kart yazısı fotoğrafın üstüne binince
     okunurluğu bu sağlıyor; serbest rgb yazmak yerine jeton, çünkü koyu
     modda da aynı kalması gerekiyor (fotoğraf zaten koyu zeminli). */
  --y4-perde-yok: rgb(8 6 16 / 0%);
  --y4-perde-tam: rgb(8 6 16 / 92%);
  /* Perdenin ÜSTÜNDEKİ yazı — iki modda da aynı, çünkü altındaki karartma
     iki modda da koyu. Serbest `#fff` yazmak yerine jeton: perde bir gün
     açılırsa metin rengi tek yerden döner. */
  --y4-perde-metin: #ffffff;
  /* ⚠⚠ KİMLİK KUTUSU YAZISI AYRI JETON (17 Ağu 2026, Selçuk: "açık mode
     css bir şey yapmamışsın"): radyo/maç/sinema/DJ kutuları marka yüzeyi
     taşıyor. Koyu modda zemin koyu → yazı beyaz. AÇIK MODDA zemin açık
     tona iniyor ve beyaz yazı okunmaz oluyordu. Perde metniyle aynı jetonu
     kullanmak ikisini birbirine bağlıyordu; ayrıldı. */
  --y4-kimlik-metin: #ffffff;
  /* Paylaşım markaları — ⚠ TEMA RENGİ DEĞİL, MARKA SABİTİ: WhatsApp yeşili
     açık/koyu moda göre değişmez. Yine de jeton olarak duruyor ki tema
     içinde serbest renk kalmasın (tools/tema_sifir_denetim.py). */
  --y4-marka-wa: #25d366;
  --y4-marka-fb: #4267b2;

  /* Radyo kutusu — kendi marka yüzeyi. ⚠ İki modda da aynı: YudumFM'in
     kimliği sayfanın açık/koyu tercihine göre değişmemeli. */
  --y4-radyo-1: #3b1178;
  --y4-radyo-2: #7c3aed;
  --y4-radyo-3: #d946a6;
  /* Kutunun üstündeki saydam katmanlar (ışık dairesi, ikinci düğme) */
  /* ⚠⚠ Manşet numaraları BANDIN üstünde duruyor (bant iki modda da koyu).
     Kutucuk zemini yüzey jetonundan alınıyordu; açık modda yüzey de açık
     olduğu için beyaz yazı beyaz kutuda kayboluyordu. Zemin artık bandın
     kendi metin renginden türeyen saydam bir katman — iki modda da okunur. */
  --y4-hero-no-zemin: rgb(255 255 255 / 16%);
  --y4-hero-no-zemin-2: rgb(255 255 255 / 30%);
  --y4-radyo-katman-1: rgb(255 255 255 / 12%);
  --y4-radyo-katman-2: rgb(255 255 255 / 18%);
  --y4-radyo-katman-3: rgb(255 255 255 / 28%);

  /* Maç kutusu — saha yüzeyi. ⚠ Radyo gibi kendi kimliği var, iki modda
     da aynı: yeşil saha "bugün maç var" demenin en kısa yolu. */
  --y4-mac-1: #06341f;
  --y4-mac-2: #0f6b3d;
  --y4-mac-cizgi: rgb(255 255 255 / 9%);
  --y4-mac-katman: rgb(255 255 255 / 12%);
  /* ⚠ Saha zemini üstünde YAZI OKUNURLUĞU: çim şeritleri açık/koyu
     dalgalandığı için düz beyaz yazı yer yer kayboluyordu. Satırın altına
     ince bir karartma + yazıya gölge konur. */
  --y4-mac-satir: rgb(0 0 0 / 22%);
  --y4-mac-golge: 0 1px 2px rgb(0 0 0 / 55%);

  /* Sinema kutusu — salon yüzeyi: koyu bordo perde + film şeridi.
     ⚠ Radyo/maç gibi kendi kimliği; iki modda da aynı kalır. */
  /* ⚠⚠ HER KUTUNUN KENDİ KİMLİK RENGİ (18 Ağu 2026): sinema perde bordosu,
     DJ stüdyo lacivertİ, radyo mor. Bir ara üçünü de mora çektim — Selçuk
     haklı olarak "sinemada bu renk miydi" dedi; renkler kimliğin parçası,
     birleştirilmez. ASIL sorun renk değil YAZIYDI: açık modda metin jetonu
     koyulaşıyordu ve koyu marka zemininde görünmez oluyordu.
     ⚠ Kutular iki modda da aynı: kimlik, açık/koyu tercihine göre değişmez. */
  --y4-sinema-1: #2a0713;
  --y4-sinema-2: #6d1230;
  --y4-sinema-delik: rgb(0 0 0 / 55%);
  --y4-sinema-katman: rgb(255 255 255 / 10%);
  --y4-sinema-golge: 0 1px 2px rgb(0 0 0 / 60%);

  /* DJ kutusu — stüdyo yüzeyi: gece mavisi + ekolayzır ışıkları.
     ⚠ Radyoyla akraba ama aynı değil: radyo yayın (mor-pembe), DJ kadro. */
  --y4-dj-1: #0a1a3c;
  --y4-dj-2: #1b3a7a;
  --y4-dj-vurgu: #38bdf8;
  --y4-dj-katman: rgb(255 255 255 / 10%);
  --y4-dj-golge: 0 1px 2px rgb(0 0 0 / 55%);

  /* Bant — ⚠ metin rengi zemin olarak KULLANILMAZ; kendi jetonu var.
     (Bir önceki temada bant zemini --metin'e bağlıydı ve koyu modda
     bembeyaz oluyordu.) */
  /* ⚠⚠ TERS TANIMLIYDI (17 Ağu 2026): bu blok KOYU modun jetonları, ama bant
     zemini açık (#f2f2f8) yazılmıştı — manşet başlığı koyu sayfanın ortasında
     BEMBEYAZ bir levha gibi duruyordu. Bant, yüzeyin bir ton üstü olmalı. */
  --y4-bant: #1f2130;
  --y4-bant-metin: #f2f2f8;

  /* Boşluk ölçeği — tek kaynak. Ara değer uydurulmaz. */
  --y4-bosluk-1: 0.25rem;
  --y4-bosluk-2: 0.5rem;
  --y4-bosluk-3: 0.75rem;
  --y4-bosluk-4: 1rem;
  --y4-bosluk-5: 1.5rem;
  --y4-bosluk-6: 2rem;

  /* Yuvarlaklık */
  --y4-yuvarlak-1: 0.5rem;
  --y4-yuvarlak-2: 0.875rem;
  --y4-yuvarlak-3: 1.25rem;

  /* Gölge */
  --y4-golge-1: 0 1px 2px rgb(0 0 0 / 45%);
  --y4-golge-2: 0 12px 32px rgb(0 0 0 / 55%);

  /* Yazı ölçeği */
  --y4-yazi-kucuk: 0.8125rem;
  --y4-yazi: 0.9375rem;
  --y4-yazi-orta: 1.0625rem;
  --y4-yazi-buyuk: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  --y4-yazi-dev: clamp(1.6rem, 1.1rem + 2.4vw, 2.75rem);

  /* Düzen ölçüleri */
  --y4-kabuk: 78rem;
  --y4-yan-genislik: 20rem;
  /* ⚠ Sol sütun İSTEĞE BAĞLI: yalnız 'sol' bölgesine widget konursa açılır
     (Selçuk, 17 Ağu: "sayfalar 3 sütun, istersek sol sidebar'ı açabiliyoruz").
     Sağdan dar: sol sütun gezinti/kısayol taşır, sağ sütun içerik kutuları. */
  --y4-sol-genislik: 16rem;
  /* ⚠ Manşet GÖRSELİNİN tavanı — satırın boyunu bu belirler (bant ve
     numaralar doğal boyunda eklenir). Yanındaki kart sütunu çıkan boyu
     eşit bölüşür. Manşeti büyütmek/küçültmek için TEK sayı burası.
     ⚠ Yazıya asla tavan konmaz: sabit yükseklik başlığı kırpıyor. */
  --y4-manset-gorsel-tavan: clamp(8rem, 16vw, 12rem);
  --y4-gecis: 160ms;
}

/* ── JETONLAR: KOYU MOD ───────────────────────────────────────────────
   ⚠ Sistem tercihi koyu ise, kullanıcı AÇIK'ı seçmediği sürece geçerli. */





/* ── AÇIK MOD — İSTEĞE BAĞLI ──────────────────────────────────────────
   ⚠⚠ VARSAYILAN KOYU (Selçuk, 16 Ağu: "sayfa bembeyaz!"). Sitenin kimliği
   koyu; açık temayı varsayılan yapmak, uzun süre bakılan bir sohbet/haber
   sitesinde gözü yoruyor. Açık mod yalnız kullanıcı SEÇERSE devreye girer
   ya da sistemi açık tercihliyse (aşağıdaki iki blok).
   ⚠ Çerçeve (üst çubuk/alt bilgi) burada TEKRARLANMAZ — iki modda da koyu. */
:root[data-tema="acik"] {
  --y4-zemin: #d3d9e6;
  --y4-yuzey: #f0f2f8;
  --y4-yuzey-2: #e0e4ef;
  --y4-cizgi: #a8b1c8;
  --y4-metin: #0c0e14;
  --y4-metin-2: #262b39;
  --y4-metin-3: #434a5e;
  --y4-vurgu: #6d3aed;
  --y4-vurgu-2: #9a5cff;
  --y4-vurgu-zit: #ffffff;
  --y4-olumlu: #157f4a;
  --y4-uyari: #a35a00;
  --y4-olumsuz: #c22a35;
  --y4-canli: #d81f3c;
  --y4-bant: #16161f;
  --y4-bant-metin: #f7f7fb;
  --y4-golge-1: 0 1px 3px rgb(22 26 45 / 14%);
  --y4-golge-2: 0 10px 28px rgb(22 26 45 / 22%);

  /* ── KİMLİK KUTULARI AÇIK MODDA ──
     ⚠⚠ GERİ ALINDI (18 Ağu 2026): bu blok bir ara "kutular iki modda da
     aynı olsun" diye kaldırıldı — sinema/DJ/radyo koyu kalınca sayfa
     Selçuk'un deyimiyle "saçma sapan" hâle geldi. Doğrusu buydu: açık
     modda kutular pastel tona iner, yazı koyulaşır; marka rengi korunur
     ama sayfayla aynı ışıkta durur.
     ⚠ ASIL SORUN buradaki renkler değil, widget BAŞLIĞININ rengiydi:
     .y4-kutu-bas dış sarmalayıcıda olduğu için kimlik metnini almıyordu.
     O ayrıca düzeltildi (tw-y4_* sarmalayıcılarına color verildi). */
  --y4-kimlik-metin: #12101c;
  --y4-radyo-1: #d9c8ff;
  --y4-radyo-2: #b79bff;
  --y4-radyo-3: #f0b6dd;
  --y4-radyo-katman-1: rgb(255 255 255 / 45%);
  --y4-radyo-katman-2: rgb(255 255 255 / 55%);
  --y4-radyo-katman-3: rgb(255 255 255 / 70%);
  --y4-sinema-1: #f2c3d2;
  --y4-sinema-2: #e39cb4;
  --y4-sinema-delik: rgb(255 255 255 / 60%);
  --y4-sinema-katman: rgb(255 255 255 / 45%);
  --y4-sinema-golge: none;
  --y4-dj-1: #c5d8f7;
  --y4-dj-2: #9dbdf0;
  --y4-dj-vurgu: #0b6ea8;
  --y4-dj-katman: rgb(255 255 255 / 45%);
  --y4-dj-golge: none;
  --y4-mac-1: #b9e2c9;
  --y4-mac-2: #8fd0ac;
  --y4-mac-cizgi: rgb(255 255 255 / 45%);
  --y4-mac-katman: rgb(255 255 255 / 40%);
  --y4-mac-satir: rgb(255 255 255 / 45%);
  --y4-mac-golge: none;
  --y4-hero-no-zemin: rgb(255 255 255 / 20%);
  --y4-hero-no-zemin-2: rgb(255 255 255 / 38%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="koyu"]) {
    --y4-zemin: #d3d9e6;
    --y4-yuzey: #f0f2f8;
    --y4-yuzey-2: #e0e4ef;
    --y4-cizgi: #a8b1c8;
    --y4-metin: #0c0e14;
    --y4-metin-2: #262b39;
    --y4-metin-3: #434a5e;
    --y4-vurgu: #6d3aed;
    --y4-vurgu-2: #9a5cff;
    --y4-vurgu-zit: #ffffff;
    --y4-olumlu: #157f4a;
    --y4-uyari: #a35a00;
    --y4-olumsuz: #c22a35;
    --y4-canli: #d81f3c;
    --y4-bant: #16161f;
    --y4-bant-metin: #f7f7fb;
    --y4-golge-1: 0 1px 3px rgb(22 26 45 / 14%);
    --y4-golge-2: 0 10px 28px rgb(22 26 45 / 22%);

    /* ── KİMLİK KUTULARI AÇIK MODDA (sistem tercihi) ──
       ⚠ Yukarıdaki :root bloğunun aynısı; ikisi birlikte değişir. */
    --y4-kimlik-metin: #12101c;
    --y4-radyo-1: #d9c8ff;
    --y4-radyo-2: #b79bff;
    --y4-radyo-3: #f0b6dd;
    --y4-radyo-katman-1: rgb(255 255 255 / 45%);
    --y4-radyo-katman-2: rgb(255 255 255 / 55%);
    --y4-radyo-katman-3: rgb(255 255 255 / 70%);
    --y4-sinema-1: #f2c3d2;
    --y4-sinema-2: #e39cb4;
    --y4-sinema-delik: rgb(255 255 255 / 60%);
    --y4-sinema-katman: rgb(255 255 255 / 45%);
    --y4-sinema-golge: none;
    --y4-dj-1: #c5d8f7;
    --y4-dj-2: #9dbdf0;
    --y4-dj-vurgu: #0b6ea8;
    --y4-dj-katman: rgb(255 255 255 / 45%);
    --y4-dj-golge: none;
    --y4-mac-1: #b9e2c9;
    --y4-mac-2: #8fd0ac;
    --y4-mac-cizgi: rgb(255 255 255 / 45%);
    --y4-mac-katman: rgb(255 255 255 / 40%);
    --y4-mac-satir: rgb(255 255 255 / 45%);
    --y4-mac-golge: none;
    --y4-hero-no-zemin: rgb(255 255 255 / 20%);
    --y4-hero-no-zemin-2: rgb(255 255 255 / 38%);
  }
}

/* ── TABAN ─────────────────────────────────────────────────────────────
   ⚠⚠ BOX-SIZING UNUTULMUŞTU (16 Ağu, Selçuk: "her kutu başka boyda"):
   varsayılan content-box'ta dolgu ve kenarlık GENİŞLİĞE EKLENİR, bu yüzden
   `inline-size:100%` verilen giriş alanları, aynı kaptaki düğmelerden geniş
   çıkıyordu. Tek satır, bütün hizasızlığın kaynağı. */
*, *::before, *::after { box-sizing: border-box; }

/* ⚠⚠ `hidden` HER ZAMAN GİZLER (17 Ağu 2026, Selçuk: "ya niye yorum açık?").
   HTML'in `hidden` özniteliği yalnızca `display:none` VARSAYILANIDIR; bir
   sınıfa `display:flex` yazdığın anda o varsayılanı ezersin ve öğe gizli
   sanılırken ekranda durur. Akıştaki yorum kutusu tam olarak böyle açık
   geliyordu — kutu `hidden` işaretliydi ama `.y4-gonderi-yorumlar` flex'ti.
   ⚠ TEK KURAL, HER YER: tek tek `[hidden]` düzeltmesi yazmak aynı hatanın
   onlarca kopyasını üretirdi. Panel, yanıt formu, önizleme, sekme — hepsi
   bu satırla korunuyor. */
/* ⚠ ÖZGÜLLÜK: `[hidden]` (0,1,0) ile `.bir-sinif` (0,1,0) EŞİT ağırlıkta;
   sınıf kuralı dosyada sonra geldiği için kazanıyordu ve öğe yine
   görünüyordu. Öznitelik iki kez yazılarak ağırlık (0,2,0) yapılır —
   `!important` YASAK (tema kuralı) ve gerekmiyor da. */
[hidden][hidden] { display: none; }

/* ── ESKİ TABAN ────────────────────────────────────────────────────────────── */
.y4-govde {
  margin: 0;
  /* ⚠⚠ YATAY TAŞMA (16 Ağu, mobilde ölçüldü): gizli açılır paneller
     `visibility:hidden` ile duruyor ama MUTLAK KONUMLU öğe kaydırma
     alanına dahil oluyor — sağa yaslı 17rem'lik giriş kartı dar ekranda
     sayfayı genişletip başlığı ve alt bilgiyi kırpıyordu.
     `clip` kaydırmayı keser ama yapışkan başlığı bozmaz (hidden bozardı). */
  overflow-x: clip;
  background: var(--y4-zemin);
  color: var(--y4-metin);
  font: var(--y4-yazi) / 1.55 system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.y4-kabuk {
  inline-size: min(100% - 2 * var(--y4-bosluk-4), var(--y4-kabuk));
  margin-inline: auto;
}

/* ── BÖLGE ŞEMASI: üst · sol · ana · yan · alt ────────────────────────
   ⚠ TEK ŞEMA. Eski temalarda bölge adları üç ayrı kalıptan karışmıştı
   (anasayfa_alt, hero, sag, sol, icerik_ici, sayfa_ust…). Aynı işin üç adı
   olunca hangi widget nereye düşecek kestirilemiyordu. Artık her sayfa
   yalnız bunları açar; hangisini açtığını sayfa kendi söyler.

   ⚠ SAĞ SÜTUN HER SAYFADA (kabuk basar, sayfa şablonu değil) — widget'ları
   `sayfa='*'` kaydıyla gelir, panelden yenisi eklenebilir.
   ⚠ SOL SÜTUN İSTEĞE BAĞLI: 'sol' bölgesinde widget yoksa sütun hiç
   açılmaz, düzen iki sütun kalır. Boş üçüncü sütun ana sütunu daraltıyor. */
.y4-duzen {
  display: grid;
  gap: var(--y4-bosluk-5);
  grid-template-areas: "ust" "ana" "yan" "sol" "alt";
  padding-block: var(--y4-bosluk-5);
}

@media (min-width: 60rem) {
  .y4-duzen {
    grid-template-columns: minmax(0, 1fr) var(--y4-yan-genislik);
    /* ⚠⚠ ALT BÖLGE SOL SÜTUNUN DEVAMI (18 Ağu 2026, Selçuk: "bu boşluk ne
       orada"): önce "alt alt" diye tam genişlik satırıydı. Yan sütun (11
       widget) ana sütundan uzun olduğu için ızgara o satırı ancak yan sütun
       bitince başlatıyor, aradaki fark ana sütunda KOCAMAN BOŞLUK olarak
       kalıyordu. Alt içerik artık ana sütunun devamı; yan sütun ikisinin
       yanında akıyor ve boşluk kapanıyor. */
    grid-template-areas:
      "ust ust"
      "ana yan"
      "alt yan"
      "sol sol";
    align-items: start;
  }
}

/* Üç sütun ancak GERÇEKTEN sığdığında: sol 16rem + sağ 20rem + ana en az
   ~24rem = 60rem içerik + kenar boşluğu. Daha dar ekranda sol sütun ana
   sütunun altına iner; sıkıştırıp üç sütun yapmak üçünü birden okunmaz
   kılıyor. */
@media (min-width: 78rem) {
  .y4-duzen-sol {
    grid-template-columns: var(--y4-sol-genislik) minmax(0, 1fr) var(--y4-yan-genislik);
    grid-template-areas:
      "ust ust ust"
      "sol ana yan"
      "alt alt alt";
  }
}

.y4-bolge-ust { grid-area: ust; }
.y4-bolge-ana { grid-area: ana; min-inline-size: 0; }
.y4-bolge-yan { grid-area: yan; }
.y4-bolge-sol { grid-area: sol; min-inline-size: 0; }
.y4-bolge-alt { grid-area: alt; }

/* Bölge içi dikey akış — tek boşluk kuralı, her bölgede aynı */
.y4-bolge-ust,
.y4-bolge-ana,
.y4-bolge-yan,
.y4-bolge-sol,
.y4-bolge-alt {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-5);
}

/* ── ÜST ÇUBUK ────────────────────────────────────────────────────────── */
.y4-ust {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  /* ⚠⚠ KAYDIRIRKEN ÇUBUK İKİ KEZ ÇİZİLİYORDU (17 Ağu 2026, Selçuk:
     "sayfayı aşağı kaydırınca yukarıda neler oluyor"): yapışkan çubuk
     kendi katmanına alınmayınca Chrome eski çizimi silmiyor ve menü/
     düğmeler hayalet gibi ikinci kez görünüyor. Kendi kompozit katmanı
     verilerek çözülür — DOM'da tek çubuk var, sorun boyamaydı.

     ⚠⚠ GERİ ALINDI (17 Ağu 2026, Selçuk: "mobilde üst menü aşağı çekince
     TAMAMEN KAYBOLUYOR"): o çözüm `transform: translateZ(0)` +
     `will-change: transform` idi. Chrome Android'de kendi kompozit
     katmanına alınmış yapışkan çubuk kaydırma sırasında katmandan
     düşüyor ve çubuk büsbütün yok oluyor — masaüstündeki hayaleti
     onarırken mobilde başlığı yok ettik.
     Hayaletin GERÇEK sebebi saydam zemindi; aşağıdaki düz yüzey rengi
     onu zaten çözüyor. Kompozit zorlaması gereksizdi, kaldırıldı.
     `isolation` katmanı ayırmaya yeter ve yapışkanlığı bozmaz. */
  isolation: isolate;
  /* ⚠ Saydam karışım açık modda başlığı sayfadan ayırmıyordu — üst çubuk
     düz yüzey rengi + belirgin alt çizgi + hafif gölge ile oturuyor. */
  background: var(--y4-cerceve);
  border-block-end: 1px solid var(--y4-cerceve-cizgi);
  box-shadow: var(--y4-golge-1);
}

.y4-ust-ic {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding-block: var(--y4-bosluk-3);
  min-inline-size: 0;
}

/* ⚠ Marka dar ekranda kısalabilsin; sabit genişlik taşmayı büyütüyordu */
.y4-ust-ic > * { min-inline-size: 0; }

.y4-marka {
  font-weight: 800;
  font-size: var(--y4-yazi-orta);
  color: var(--y4-cerceve-metin);
  text-decoration: none;
  white-space: nowrap;
}

.y4-marka-son { color: var(--y4-vurgu); }

/* Arama — dar ekranda gizli, geniş ekranda esner */
.y4-ara {
  display: none;
  flex: 1;
  min-inline-size: 0;
}

@media (min-width: 48rem) {
  .y4-ara { display: block; }
}

.y4-ara-alan {
  inline-size: 100%;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cerceve-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-cerceve-2);
  color: var(--y4-cerceve-metin);
  font: inherit;
}

.y4-ara-alan:focus-visible {
  outline: 2px solid var(--y4-vurgu);
  outline-offset: 1px;
}

/* Girişli kullanıcı araçları — ⚠ SÜREKLİ ATLANAN YER: bildirim, mesaj,
   kullanıcı menüsü, çıkış. Tema başlarken misafir ekranına bakıp bunlar
   unutuluyordu; iskelette baştan yerleri ayrıldı. */
.y4-araclar {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  margin-inline-start: auto;
}

.y4-arac {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid var(--y4-cerceve-cizgi);
  border-radius: 50%;
  background: var(--y4-cerceve-2);
  color: var(--y4-cerceve-metin-2);
  text-decoration: none;
  transition: border-color var(--y4-gecis), color var(--y4-gecis);
}

.y4-arac:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }

.y4-arac-sayi {
  position: absolute;
  inset-block-start: -0.15rem;
  inset-inline-end: -0.15rem;
  min-inline-size: 1.05rem;
  padding-inline: var(--y4-bosluk-1);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-canli);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}

.y4-kul {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-1) var(--y4-bosluk-3) var(--y4-bosluk-1) var(--y4-bosluk-1);
  border: 1px solid var(--y4-cerceve-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-cerceve-2);
  color: var(--y4-cerceve-metin);
  text-decoration: none;
}

.y4-kul-avatar {
  inline-size: 1.9rem;
  block-size: 1.9rem;
  border-radius: var(--y4-yuvarlak-1);
  object-fit: cover;
  display: block;
}

.y4-kul-ok { font-size: 0.65rem; opacity: 0.6; }

.y4-kul-ad {
  display: none;
  font-weight: 600;
  font-size: var(--y4-yazi-kucuk);
}

@media (min-width: 30rem) {
  .y4-kul-ad { display: inline; }
}

/* Misafir girişi */
.y4-giris {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 0;
  border-radius: var(--y4-yuvarlak-3);
  background: linear-gradient(135deg, var(--y4-vurgu), var(--y4-vurgu-2));
  color: var(--y4-vurgu-zit);
  font-weight: 700;
  font-size: var(--y4-yazi-kucuk);
  text-decoration: none;
  white-space: nowrap;
}

/* ── KART SÖZLEŞMESİ ──────────────────────────────────────────────────
   ⚠ TEK KART, DÖRT DÜZEN. Her bölüm kendi kartını yazınca biri düzeltilip
   ötekiler eskide kalıyordu. Artık aynı iskelet dört sınıfla biçim
   değiştirir: dik · yatay · şerit · liste.
   ⚠ KAPAK DÜZENİ BELİRLER: gerçek fotoğraf varsa başlık görselin ÜSTÜNE
   biner (y4-kart-ustyazi); üretilmiş başlık kartında adı zaten görselin
   içinde olduğu için başlık ALTA yazılmaz. Görsel yoksa kart basılmaz —
   bu kararı şablon değil, kapak çözücü verir. */
.y4-kart {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--y4-kart-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  box-shadow: var(--y4-golge-1);
  color: inherit;
  text-decoration: none;
  transition: transform var(--y4-gecis), box-shadow var(--y4-gecis);
}

.y4-kart:hover {
  transform: translateY(-0.2rem);
  box-shadow: var(--y4-golge-2);
}

.y4-kart-gorsel {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--y4-gecis);
}

.y4-kart:hover .y4-kart-gorsel { scale: 1.04; }

/* ⚠⚠ min-inline-size: 0 ŞART (17 Ağu 2026, Selçuk: "kategori başlığı neden
   sığmaz"): bu kutu bir grid hücresi ve grid/flex hücrelerinin varsayılan
   en küçük genişliği İÇERİĞİ kadardır (min-width:auto). Yani içindeki
   tek satırlık çip ("İnternet ve Bilgisayar") hücreyi kartın dışına
   genişletiyordu; çipin `max-inline-size:100%` kuralı da bu yüzden işe
   yaramıyordu — %100 zaten taşmış genişliğin kendisiydi. */
.y4-kart-ic {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-4);
  min-inline-size: 0;
}

.y4-kart-baslik {
  font-weight: 700;
  font-size: var(--y4-yazi-orta);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.y4-kart-ozet {
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ⚠ Çip TEK SATIR: uzun kategori adı ("İnternet ve Bilgisayar") iki satıra
   taşınca o kartın başlığı aşağı kayıyor ve satır dağınık görünüyordu. */
.y4-kart-cip {
  align-self: flex-start;
  max-inline-size: 100%;
  /* ⚠ KESME YOK: kategori adı tam yazılır. Tek satıra sığmazsa sarar —
     "İnternet ve …" gibi yarım bir etiket bilgi vermiyor. Taşma sorunu
     çipin değil, kabın min-inline-size'ıydı (bkz. .y4-kart-ic). */
  overflow-wrap: anywhere;
  padding: var(--y4-bosluk-1) var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Düzen 1 — DİK: görsel üstte, yazı altta */
.y4-kart-dik { grid-template-rows: auto 1fr; }
.y4-kart-dik > .y4-kart-medya { aspect-ratio: 16 / 10; }

/* Düzen 2 — YATAY: görsel solda, yazı sağda */
.y4-kart-yatay { grid-template-columns: 38% 1fr; align-items: stretch; }
.y4-kart-yatay > .y4-kart-medya { aspect-ratio: 4 / 3; }

/* Düzen 3 — ŞERİT: yazı görselin üstünde (kapak fotoğrafsa) */
.y4-kart-serit { aspect-ratio: 3 / 4; }
.y4-kart-serit > .y4-kart-medya {
  position: absolute;
  inset: 0;
}
.y4-kart-serit > .y4-kart-ic {
  position: relative;
  justify-content: flex-end;
  background: linear-gradient(to top, var(--y4-perde-tam) 12%, var(--y4-perde-yok) 62%);
  color: #fff;
  block-size: 100%;
}

/* Düzen 4 — LİSTE: ince satır, küçük görsel */
.y4-kart-liste {
  grid-template-columns: 4.5rem 1fr;
  gap: var(--y4-bosluk-3);
  align-items: center;
  border: 0;
  border-radius: var(--y4-yuvarlak-1);
  background: none;
}
.y4-kart-liste > .y4-kart-medya {
  aspect-ratio: 1 / 1;
  border-radius: var(--y4-yuvarlak-1);
  overflow: hidden;
}
.y4-kart-liste > .y4-kart-ic { padding: 0; }
.y4-kart-liste .y4-kart-baslik {
  font-size: var(--y4-yazi);
  -webkit-line-clamp: 2;
}
.y4-kart-liste:hover { transform: none; box-shadow: none; }
.y4-kart-liste:hover .y4-kart-baslik { color: var(--y4-vurgu); }

.y4-kart-medya {
  position: relative;
  overflow: hidden;
  background: var(--y4-yuzey-2);
}

/* ── IZGARA: sütun sayısı KART SAYISININ BÖLENİ ───────────────────────
   ⚠ auto-fill kullanılmıyor: 5 kart 2 sütuna girince son satır yarım
   kalıyor ve sayfa bozuk görünüyordu. Sütun sayısını şablon söyler
   (y4-izgara-2/3/4/5), böylece yarım satır oluşmaz. */
.y4-izgara {
  display: grid;
  gap: var(--y4-bosluk-4);
  grid-template-columns: 1fr;
}

@media (min-width: 30rem) {
  .y4-izgara-2, .y4-izgara-4 { grid-template-columns: repeat(2, 1fr); }
  .y4-izgara-3, .y4-izgara-5 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48rem) {
  .y4-izgara-3 { grid-template-columns: repeat(3, 1fr); }
  .y4-izgara-4 { grid-template-columns: repeat(4, 1fr); }
  .y4-izgara-5 { grid-template-columns: repeat(5, 1fr); }
}

/* ── BÖLÜM BAŞLIĞI ────────────────────────────────────────────────────── */
.y4-baslik-satir {
  display: flex;
  align-items: baseline;
  gap: var(--y4-bosluk-3);
}

.y4-baslik {
  margin: 0;
  font-size: var(--y4-yazi-buyuk);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.y4-baslik-cizgi {
  flex: 1;
  block-size: 1px;
  background: var(--y4-cizgi);
}

/* ── YAN SÜTUN KUTUSU ─────────────────────────────────────────────────── */
.y4-kutu {
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-kart-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}

.y4-kutu-bas {
  margin: 0 0 var(--y4-bosluk-3);
  font-size: var(--y4-yazi);
  font-weight: 800;
}

/* ── ÜYE LİSTESİ (yan sütun kutusu içi) ──────────────────────────────
   ⚠ Satır değil ızgara: 5-10 üye alt alta yazılınca kutu uzayıp yan sütunu
   şişiriyordu. Avatarı olmayan üye için harf UYDURULMAZ, boş daire kalır. */
.y4-uyeler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
  gap: var(--y4-bosluk-2);
}

.y4-uye {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--y4-yuzey-2);
  transition: transform var(--y4-gecis);
}

.y4-uye:hover { transform: translateY(-0.15rem) scale(1.06); }

.y4-uye-gorsel {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Ad yalnız ekran okuyucuya; kutuda görsel ızgara duruyor */
.y4-uye-ad {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}


/* ── GEZİNME ──────────────────────────────────────────────────────────
   ⚠ Menü maddeleri VERİDEN gelir; burada yalnız biçim var. Dar ekranda
   yatay kaydırır — sarmalayıp iki satıra düşürmek üst çubuğu bozuyordu. */
.y4-gez {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.y4-gez::-webkit-scrollbar { display: none; }

.y4-gez-bag {
  display: inline-flex;
  align-items: center;
  gap: var(--y4-bosluk-1);
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 0;
  border-radius: var(--y4-yuvarlak-1);
  background: none;
  color: var(--y4-cerceve-metin-2);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.y4-gez-bag:hover { background: var(--y4-cerceve-2); color: var(--y4-cerceve-metin); }

/* Açılır alt menü — ⚠ hover VE focus-within: klavyeyle de açılmalı */
.y4-gez-dd { position: relative; }

.y4-gez-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 50;
  display: grid;
  min-inline-size: 10rem;
  max-inline-size: calc(100vw - 1.5rem);
  padding: var(--y4-bosluk-1);
  border: 1px solid var(--y4-cerceve-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-cerceve);
  box-shadow: var(--y4-golge-2);
  font-size: var(--y4-yazi-kucuk);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--y4-gecis);
}

/* ⚠⚠ AÇILIR KUTU ARTIK <details> (18 Ağu 2026): önce yalnız `:hover`
   vardı — dokunmatikte hiç açılmıyordu; sonra tıklama tema.wasm'a
   bağlandı, o da kullanıcının tarayıcısında çalışmadı. <details> hiçbir
   koda bağlı değil, tarayıcının kendi davranışı.
   ⚠ İçerik details KAPALIYKEN de DOM'da kalmalı ki hover ile açılabilsin:
   tarayıcı varsayılanı gizliyor, burada geri açılıyor. */
/* ⚠ Masaüstünde hover ile açılabilsin diye içerik DOM'da kalır; mobilde
   (dar ekran çekmecesinde) kapalıyken GİZLENİR — yoksa bütün gruplar açık
   dökülüp menü uçsuz bir listeye dönüyor (18 Ağu 2026, aktif temada ölçüldü). */
.y4-gez-dd > .y4-gez-menu { display: grid; }
@media (max-width: 1024px) {
  .y4-gez-dd:not([open]) > .y4-gez-menu { display: none; }
  .y4-gez-dd[open] > .y4-gez-menu { display: grid; opacity: 1; visibility: visible; pointer-events: auto; }
}
/* ⚠⚠ display:list-item ŞART: summary'nin display'i değiştirilirse Chrome
   details'i açmıyor (18 Ağu 2026, aktif temada ölçüldü). */
.y4-gez-dd > summary { list-style: none; cursor: pointer; display: list-item; }
.y4-gez-dd > summary::-webkit-details-marker { display: none; }
.y4-gez-dd > summary::marker { content: ""; }
.y4-gez-dd > summary > a { color: inherit; text-decoration: none; }
.y4-gez-dd:hover .y4-gez-menu,
.y4-gez-dd:focus-within .y4-gez-menu,
.y4-gez-dd[open] .y4-gez-menu { opacity: 1; visibility: visible; pointer-events: auto; }

.y4-gez-alt {
  padding: var(--y4-bosluk-1) var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-1);
  color: var(--y4-cerceve-metin-2);
  line-height: 1.9;
  text-decoration: none;
  white-space: nowrap;
}

.y4-gez-alt:hover { background: var(--y4-cerceve-2); color: var(--y4-cerceve-metin); }

/* ── KULLANICI MENÜSÜ ─────────────────────────────────────────────────
   ⚠ Girişli hâlin araçları iskeletin parçası: akış, arkadaşlar, takipler,
   gruplar, profil, ayarlar, çıkış. Sonradan yamanan bir süs değil. */
.y4-kul-sar { position: relative; }

.y4-kul-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: 50;
  display: grid;
  min-inline-size: 10rem;
  max-inline-size: calc(100vw - 1.5rem);
  margin-block-start: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-1);
  border: 1px solid var(--y4-cerceve-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-cerceve);
  box-shadow: var(--y4-golge-2);
  font-size: var(--y4-yazi-kucuk);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--y4-gecis);
}

.y4-kul-sar:hover .y4-kul-menu,
.y4-kul-sar:focus-within .y4-kul-menu { opacity: 1; visibility: visible; pointer-events: auto; }

.y4-kul-menu a {
  padding: var(--y4-bosluk-1) var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-1);
  color: var(--y4-cerceve-metin-2);
  line-height: 1.9;
  text-decoration: none;
  white-space: nowrap;
}

.y4-kul-menu a:hover { background: var(--y4-cerceve-2); color: var(--y4-cerceve-metin); }

/* Eylem düğmeleri — dar ekranda gizlenir, menüde zaten var */
.y4-eylem {
  display: none;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border-radius: var(--y4-yuvarlak-3);
  background: linear-gradient(135deg, var(--y4-vurgu), var(--y4-vurgu-2));
  color: var(--y4-vurgu-zit);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.y4-eylem-2 {
  background: var(--y4-yuzey-2);
  color: var(--y4-metin);
}

@media (min-width: 64rem) {
  .y4-eylem { display: inline-block; }
}

/* ── MANŞET ───────────────────────────────────────────────────────────
   ⚠ Solda büyük şerit kart, sağda 2×2 dik kart. Dar ekranda alt alta.
   Yan kart sayısı ayar ama varsayılan 4: iki sütunda tam bölünür, yarım
   satır kalmaz (bölen kuralı). */
/* ⚠ Manşet ızgarası aşağıda, akışkan (flex-wrap) tanımlı — burada TEKRAR
   tanımlanmıyordu, iki ayrı `.y4-manset` bloğu birbirini eziyordu. */

/* ⚠ Büyük kart şerit düzeninde 3/4 dikey; manşette bu fazla uzun kaçıyor,
   burada 4/3'e çekiliyor — kartın kendi kuralı değişmiyor, yalnız bu
   bağlamdaki oranı. */
.y4-manset-buyuk > .y4-kart-serit { aspect-ratio: 4 / 3; }

.y4-manset-yan {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(2, 1fr);
}

/* ── GİRİŞ KARTI ──────────────────────────────────────────────────────
   ⚠ Kullanıcı sayfadan koparılmaz: form üst çubuğun altında açılır.
   Ayrı giriş sayfasına yönlendirmek, sohbete gelen kullanıcıyı yolda
   kaybediyordu. Google girişi popup ile (yGooglePopup). */
.y4-giris-sar { position: relative; }

.y4-giris-kutu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: 60;
  display: grid;
  gap: var(--y4-bosluk-2);
  inline-size: min(17rem, calc(100vw - 1.5rem));
  margin-block-start: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  box-shadow: var(--y4-golge-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--y4-gecis);
}

.y4-giris-sar:hover .y4-giris-kutu,
.y4-giris-sar:focus-within .y4-giris-kutu { opacity: 1; visibility: visible; pointer-events: auto; }

.y4-giris-form { display: grid; gap: var(--y4-bosluk-2); }
.y4-giris-kutu { font-size: var(--y4-yazi-kucuk); }

.y4-giris-alan {
  inline-size: 100%;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  font-size: var(--y4-yazi-kucuk);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin);
  font: inherit;
}

.y4-giris-alan:focus-visible { outline: 2px solid var(--y4-vurgu); outline-offset: 1px; }

.y4-giris-btn {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  font-size: var(--y4-yazi-kucuk);
  border: 0;
  border-radius: var(--y4-yuvarlak-1);
  background: linear-gradient(135deg, var(--y4-vurgu), var(--y4-vurgu-2));
  color: var(--y4-vurgu-zit);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.y4-giris-ayrac {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--y4-bosluk-2);
  align-items: center;
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
}

.y4-giris-ayrac::before,
.y4-giris-ayrac::after {
  content: "";
  block-size: 1px;
  background: var(--y4-cizgi);
}

.y4-giris-google {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  font-size: var(--y4-yazi-kucuk);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.y4-giris-google:hover { border-color: var(--y4-vurgu); }

.y4-giris-alt {
  display: grid;
  gap: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.7;
}

.y4-giris-alt a { color: var(--y4-metin-2); text-decoration: none; }
.y4-giris-alt a:hover { color: var(--y4-vurgu); }

/* ── MOBİL MENÜ ───────────────────────────────────────────────────────
   ⚠ Dar ekranda gezinme yatay kaydırma yerine PANEL olur: 10+ madde ve
   alt menüler tek satırda kullanılamıyordu. Düğme yalnız dar ekranda var. */
/* ⚠ HAM DÜĞME BEYAZ KUTU OLARAK ÇIKIYORDU (17 Ağu): menü düğmesine hiç
   biçim verilmemişti, tarayıcının varsayılan buton görünümü geliyordu.
   Diğer araç düğmeleriyle aynı kabuk — çerçeve paletinde, yuvarlak. */
.y4-mobil-dug {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  padding: 0;
  border: 1px solid var(--y4-cerceve-cizgi);
  border-radius: 50%;
  background: var(--y4-cerceve-2);
  color: var(--y4-cerceve-metin-2);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--y4-gecis), color var(--y4-gecis);
}

.y4-mobil-dug:hover { border-color: var(--y4-vurgu); color: var(--y4-cerceve-metin); }

@media (min-width: 55rem) {
  .y4-mobil-dug { display: none; }
}

@media (max-width: 54.99rem) {
  /* ⚠⚠ ÇEKMECE, TAM EKRAN DEĞİL (17 Ağu): panel bütün ekranı kaplayıp
     maddeleri gövde ölçüsünde basınca 20 satırlık dev bir liste çıkıyordu.
     Artık sağdan gelen dar bir çekmece; maddeler küçük ölçekte, alt menüler
     girintili ve soldan çizgili — hiyerarşi görünüyor, yer kaplamıyor. */
  .y4-gez {
    position: fixed;
    inset-block: 3.25rem 0;
    inset-inline-start: 0;
    z-index: 45;
    display: grid;
    align-content: start;
    gap: 0;
    inline-size: min(17rem, 82vw);
    padding: var(--y4-bosluk-2);
    overflow-y: auto;
    background: var(--y4-cerceve);
    border-inline-end: 1px solid var(--y4-cerceve-cizgi);
    box-shadow: var(--y4-golge-2);
    font-size: var(--y4-yazi-kucuk);
    translate: -100% 0;
    transition: translate var(--y4-gecis);
  }

  .y4-menu-acik .y4-gez { translate: 0 0; }

  .y4-gez-bag {
    padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
    line-height: 1.5;
  }

  /* Alt menü panelde açık durur ama girintili ve daha küçük */
  .y4-gez-menu {
    position: static;
    display: grid;
    min-inline-size: 0;
    max-inline-size: none;
    margin: 0 0 var(--y4-bosluk-2) var(--y4-bosluk-3);
    padding: 0 0 0 var(--y4-bosluk-3);
    border: 0;
    border-inline-start: 1px solid var(--y4-cerceve-cizgi);
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .y4-gez-alt { padding: 0.15rem var(--y4-bosluk-2); line-height: 1.6; }
}

/* Tema anahtarı — araç düğmesiyle aynı kabuk, ayrı sınıf (denetim
   tanımsız sınıf yakaladı: şablonda vardı, CSS'te yoktu). */
.y4-tema-dug { cursor: pointer; font: inherit; }

/* Alt menü — maddeler veriden gelir, aralarına ayraç konur */

/* Kayıt formu başlangıçta gizli; "Kayıt ol"a basınca giriş formuyla yer değişir */
.y4-kayit-form, .y4-unuttum-form { display: none; }
.y4-kayit-form:not([hidden]), .y4-unuttum-form:not([hidden]) { display: grid; }
.y4-giris-form

.y4-kural {
  display: flex;
  gap: var(--y4-bosluk-2);
  align-items: flex-start;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--y4-metin-2);
}

.y4-kural a { color: var(--y4-vurgu); }

.y4-giris-gec {
  padding: 0;
  line-height: 1.7;
  border: 0;
  background: none;
  color: var(--y4-metin-2);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  text-align: start;
  cursor: pointer;
}

.y4-giris-gec:hover { color: var(--y4-vurgu); }

/* ── BOŞ HÂL ──────────────────────────────────────────────────────────
   ⚠ Veri yoksa boş çerçeve basılmaz; ya davet edilir ya hiç basılmaz. */
.y4-bos {
  display: grid;
  place-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-6);
  border: 1px dashed var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  color: var(--y4-metin-3);
  text-align: center;
}

/* ── ALT BİLGİ ────────────────────────────────────────────────────────── */
.y4-alt {
  margin-block-start: var(--y4-bosluk-6);
  padding-block: var(--y4-bosluk-6);
  background: var(--y4-cerceve);
  border-block-start: 1px solid var(--y4-cerceve-cizgi);
  color: var(--y4-cerceve-metin-2);
  font-size: var(--y4-yazi);
}


.y4-alt a { color: var(--y4-cerceve-metin-2); text-decoration: none; }
.y4-alt a:hover { color: var(--y4-cerceve-metin); }

/* ── ERİŞİLEBİLİRLİK ──────────────────────────────────────────────────── */
.y4-gizli-metin {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .y4-kart, .y4-kart-gorsel, .y4-arac { transition: none; }
  .y4-kart:hover { transform: none; }
  .y4-kart:hover .y4-kart-gorsel { scale: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WIDGET KABUĞU

   ⚠ Widget motoru her kutuyu `tw-kutu tw-<tip> tw-g-<genislik>` sarmalıyla
   basar ve başlığı `tw-bas` içine koyar (web/render/tw_widget.go). Bu
   sınıfların GÖRÜNÜMÜ temanın işi; yudum4 kendi kurallarını yazar, ortak
   widget paketinin CSS'ini (tw-all.css) YÜKLEMEZ.
   ⚠ Kabuk bölgeye göre değişir: ana sütunda kutu yok (bölümler sayfanın
   kendi akışı gibi durur), yan sütunda kutu var.
   ═══════════════════════════════════════════════════════════════════════ */
.tw-bolge {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-5);
}

.y4-bolge-yan .tw-bolge { gap: var(--y4-bosluk-4); }

/* Başlık — bölüm adı; hedefi varsa motor onu bağlantı olarak basar. */
/* ⚠ BÖLÜM BAŞLIĞI — tek yerde, bütün bölümler için (Akış · Video · Oyna ·
   Bugün · yan kutular). Düz kalın yazı + ince çizgi fazla çıplaktı; şimdi
   solda vurgu çubuğu, sağda söne söne biten gradyan çizgi var. Süs değil:
   çubuk bölümün başladığı yeri, çizgi de nerede bittiğini gösteriyor. */
.tw-bas {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
  margin-block-end: var(--y4-bosluk-4);
  font-size: var(--y4-yazi-buyuk);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Sol vurgu çubuğu */
.tw-bas::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.25rem;
  block-size: 1.35em;
  border-radius: var(--y4-yuvarlak-1);
  background: linear-gradient(180deg, var(--y4-vurgu), var(--y4-vurgu-2));
}

/* Sağda sönen çizgi */
.tw-bas::after {
  content: "";
  flex: 1;
  block-size: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--y4-cizgi), transparent);
}

.tw-bas-ad { flex: 0 0 auto; }

.tw-bas-ad { color: inherit; text-decoration: none; }
.tw-bas-link:hover { color: var(--y4-vurgu); }

/* Yan sütun: kutu + küçük başlık */
.y4-bolge-yan .tw-kutu {
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-kart-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}

.y4-bolge-yan .tw-bas {
  font-size: var(--y4-yazi-orta);
  font-weight: 700;
}

/* Alt bölge kutusu — bant kendi zeminini taşır, kabuk saydam kalır. */
.y4-bolge-alt .tw-kutu { padding: 0; }

/* ── AVATAR ────────────────────────────────────────────────────────────
   ⚠ Fotoğraf yoksa BOŞ KUTU değil: addan türeyen kararlı renk + baş harf.
   Aynı kişi her yerde aynı rengi alır, tanınabilir olur. */
/* ⚠⚠ IMG'YE `display: grid` VERİLMEZ (17 Ağu 2026, Selçuk: "şu JacKaLs neden
   bozuk"): ortalamak için konmuştu ama grid, <img>'nin doğal boyutlandırmasını
   bozuyor — RASTER görselde (webp/jpg) fark edilmiyor, SVG avatarlar ise
   noktaya dönüyordu (havuz avatarlarının hepsi SVG). Ortalama yalnız BAŞ HARF
   kutusunun işi; resim block olarak durur. */
.y4-av {
  display: block;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--y4-yuzey-2);
  flex-shrink: 0;
}

.y4-av-harf {
  display: grid;
  place-items: center;
  color: var(--y4-perde-metin);
  font-weight: 800;
  font-size: var(--y4-yazi);
}

/* ── CANLI ROZETİ ──────────────────────────────────────────────────────
   ⚠ Bu rozet UYDURULMAZ; veriden hesaplanan bir durumun göstergesi. Rengi
   ayrı jeton (--y4-canli), çünkü vurgu rengiyle karışırsa "canlı" anlamını
   kaybediyor. */
.y4-rozet-canli {
  margin-inline-start: var(--y4-bosluk-2);
  color: var(--y4-canli);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ═══ BÖLÜMLER (kategori döşeme şeridi) ═══
   ⚠⚠ SÜTUN SAYISI SABİT KADEMELİ, auto-fit DEĞİL (17 Ağu 2026): auto-fit
   döşeme genişliğine göre 4 sütun seçince son satırda 2 tane kalıyor ve
   şerit kırık görünüyordu (ekranda ölçüldü). Kademeler döşeme sayısının
   BÖLENLERİ: 2 → 3 → 6.
   ⚠ Şerit ALÇAK (16/7): sayfanın ilk ekranında manşetin önüne geçmemeli,
   yalnız yön göstermeli. */
/* ⚠⚠ SÜTUN SAYISI SABİT YAZILMIŞTI (18 Ağu 2026, Selçuk: "tek başına
   dururken neden sabit, neden tüm sayfayı kaplamıyor"): ızgara
   `1fr 1fr` → `repeat(3,1fr)` → `repeat(6,1fr)` diye kademeleniyordu,
   yani KART SAYISINA hiç bakmıyordu. Şeritte tek kart kalınca o kart
   altıda bir genişlikte duruyor, yanındaki beş sütun boş kalıyordu.
   auto-fit + minmax: kartlar kaç taneyse o kadar sütun açılır, tek kart
   satırı komple kaplar. Kırılım noktası da gerekmez. */
.y4-bolumler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--y4-bosluk-3);
}

.y4-doseme {
  position: relative;
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: var(--y4-yuvarlak-2);
  color: var(--y4-perde-metin);
  text-decoration: none;
}

.y4-doseme-gorsel {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--y4-gecis);
}

.y4-doseme:hover .y4-doseme-gorsel { scale: 1.06; }

.y4-doseme-ic {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-1);
  padding: var(--y4-bosluk-3);
  background: linear-gradient(to top, var(--y4-perde-tam), var(--y4-perde-yok));
}

.y4-doseme-ad { font-weight: 800; line-height: 1.2; }
.y4-doseme-say { font-size: var(--y4-yazi-kucuk); opacity: 0.85; }

/* ═══ MANŞET ═══ */
/* ⚠⚠ AKIŞKAN — MEDYA SORGUSU YOK (17 Ağu 2026, Selçuk: "ilk kural responsive
   mobil/pc tasarım, nereden uydurdun masaüstü kuralını").
   Kırılım noktası bir SAYI değil, içeriğin TABANI: hero 26rem'e sığmadığı
   anda satır kendiliğinden sarar ve iki blok alt alta iner. "Şu genişlikte
   şöyle olsun" varsayımı yok; telefonda da masaüstünde de aynı kural. */
.y4-manset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-4);
  align-items: stretch;
}

/* Sol sütun: vitrin + alt şerit. Alt şerit kalan boyu doldurur, böylece
   sütun sağdaki kart dizisiyle aynı yerde biter. */
.y4-manset-sol {
  flex: 19 1 26rem;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-3);
}

.y4-manset-yan { flex: 10 1 15rem; min-inline-size: 0; }

.y4-manset-alt {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(7rem, (100% - 3 * var(--y4-bosluk-3)) / 4), 1fr));
  gap: var(--y4-bosluk-3);
  min-block-size: 0;
}

/* ⚠ Alt şerit kartları KOMPAKT: vitrinle yarışmaz, altını tamamlar. */
.y4-manset-alt > .y4-kart-dik > .y4-kart-medya { aspect-ratio: 4 / 3; }
.y4-manset-alt .y4-kart-ic { padding: var(--y4-bosluk-3); }
.y4-manset-alt .y4-kart-baslik {
  font-size: var(--y4-yazi-kucuk);
  -webkit-line-clamp: 3;
}

/* ⚠⚠ SATIRIN BOYUNU YAN KOLON BELİRLER (17 Ağu 2026):
   Önce hero doğal boyundaydı → yanındaki 4 kartın altında koca boşluk kaldı.
   Sonra kartlara hero'nun boyunu bölüştürdüm → kartlar DEV oldu (Selçuk:
   "dev gibi olur öyle"). İkisi de yanlış: ölçüyü KOMPAKT olan taraf verir.
   Kartlar kendi boyunda kalır, hero yüksekliği sütuna uyar; görsel kalan
   alanı doldurur (object-fit: cover ile kırpılır, bozulmaz). */

.y4-manset-yan {
  display: grid;
  grid-auto-rows: minmax(6.5rem, 1fr);
  gap: var(--y4-bosluk-2);
  grid-template-columns: 1fr;
  align-content: start;
}

/* ⚠ Sütun sayısı AKIŞKAN: kart 15rem'e sığmadığı anda tek sütuna iner,
   yer varsa ikiye çıkar. Genişlik eşiği yazmıyoruz — kartın kendi tabanı
   karar veriyor (medya sorgusu yok). */
.y4-manset-yan { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* ⚠ Manşetin yanındaki kartlar KOMPAKT: hero ile yarışmamalı.
   Görsel oranlı (%34) ve kart boyunca uzanır — sabit px görsel, kart
   daralınca başlığa yer bırakmıyordu (taslakta ölçülmüş hata). */
/* ⚠ Kart boyu SATIRIN ölçüsü: buradaki taban, hero'nun da yüksekliğini
   belirliyor. Çok küçük olursa manşet görseli ezilir, çok büyük olursa
   kartlar şişer — 6.5rem ikisini de dengeliyor. */
.y4-manset-yan > .y4-kart-yatay {
  grid-template-columns: 34% 1fr;
  min-block-size: 6.5rem;
  padding: var(--y4-bosluk-2);
  gap: var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-2);
}

.y4-manset-yan > .y4-kart-yatay > .y4-kart-medya {
  aspect-ratio: auto;
  border-radius: var(--y4-yuvarlak-1);
}

.y4-manset-yan > .y4-kart-yatay > .y4-kart-ic {
  padding: 0;
  justify-content: center;
  gap: var(--y4-bosluk-1);
}

.y4-manset-yan .y4-kart-baslik {
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
  -webkit-line-clamp: 3;
}

/* ⚠ Özet burada BASILMAZ: dört kartın özeti hero'nun yanında duvar gibi
   duruyor ve başlıkları eziyordu. */
.y4-manset-yan .y4-kart-ozet { display: none; }

.y4-manset-yan .y4-kart-cip {
  font-size: 0.6rem;
  padding: 2px var(--y4-bosluk-2);
}

/* ── HERO: JS'SİZ DÖNEN VİTRİN ────────────────────────────────────────
   ⚠ Radyo düğmesi + label ile çalışır; JS yok. Slaytlar üst üste durur,
   yalnız seçili olan görünür.
   ⚠ Kural sayısı slayt sayısını sınırlar: aşağıda 1..10 tanımlı. Panelden
   daha fazla slayt seçilirse 10'dan sonrası gösterilmez (görünmeyen slayt
   sayfayı bozmaz, yalnız erişilemez olur). */
/* ⚠ Yuvarlatma/kırpma KUTUYA ait, hero'ya değil: numaralar kutunun ALTINDA
   akışta duruyor, hero'yu kırpmak onları da kesiyordu. */
.y4-hero { position: relative; }

/* ⚠ Slaytlar ÜST ÜSTE (grid 1/1) ama yükseklik SABİT DEĞİL: görsel tavanlı,
   altında başlık bandı doğal boyunda. Bant görselin üstüne binmiyor — kapağın
   kendi yazısı olan haberlerde iki yazı üst üste geliyordu (ekranda ölçüldü:
   "F-22 ve F-35'i" görseli + başlık iç içe). */
/* ⚠ Yuvarlatma ÜST köşelerde: alt köşeleri numara şeridi kapatıyor
   (ikisi tek blok). */
.y4-hero-kutu {
  position: relative;
  display: grid;
  border-start-start-radius: var(--y4-yuvarlak-3);
  border-start-end-radius: var(--y4-yuvarlak-3);
  overflow: hidden;
  background: var(--y4-yuzey-2);
}

.y4-hero-slayt {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--y4-gecis);
}

.y4-hero-r:nth-of-type(1):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(1),
.y4-hero-r:nth-of-type(2):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(2),
.y4-hero-r:nth-of-type(3):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(3),
.y4-hero-r:nth-of-type(4):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(4),
.y4-hero-r:nth-of-type(5):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(5),
.y4-hero-r:nth-of-type(6):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(6),
.y4-hero-r:nth-of-type(7):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(7),
.y4-hero-r:nth-of-type(8):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(8),
.y4-hero-r:nth-of-type(9):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(9),
.y4-hero-r:nth-of-type(10):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(10),
.y4-hero-r:nth-of-type(11):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(11),
.y4-hero-r:nth-of-type(12):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(12),
.y4-hero-r:nth-of-type(13):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(13),
.y4-hero-r:nth-of-type(14):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(14),
.y4-hero-r:nth-of-type(15):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(15),
.y4-hero-r:nth-of-type(16):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(16),
.y4-hero-r:nth-of-type(17):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(17),
.y4-hero-r:nth-of-type(18):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(18),
.y4-hero-r:nth-of-type(19):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(19),
.y4-hero-r:nth-of-type(20):checked ~ .y4-hero-kutu > .y4-hero-slayt:nth-child(20) {
  opacity: 1;
  visibility: visible;
}

.y4-hero-r:nth-of-type(1):checked ~ .y4-hero-no > label:nth-child(1),
.y4-hero-r:nth-of-type(2):checked ~ .y4-hero-no > label:nth-child(2),
.y4-hero-r:nth-of-type(3):checked ~ .y4-hero-no > label:nth-child(3),
.y4-hero-r:nth-of-type(4):checked ~ .y4-hero-no > label:nth-child(4),
.y4-hero-r:nth-of-type(5):checked ~ .y4-hero-no > label:nth-child(5),
.y4-hero-r:nth-of-type(6):checked ~ .y4-hero-no > label:nth-child(6),
.y4-hero-r:nth-of-type(7):checked ~ .y4-hero-no > label:nth-child(7),
.y4-hero-r:nth-of-type(8):checked ~ .y4-hero-no > label:nth-child(8),
.y4-hero-r:nth-of-type(9):checked ~ .y4-hero-no > label:nth-child(9),
.y4-hero-r:nth-of-type(10):checked ~ .y4-hero-no > label:nth-child(10),
.y4-hero-r:nth-of-type(11):checked ~ .y4-hero-no > label:nth-child(11),
.y4-hero-r:nth-of-type(12):checked ~ .y4-hero-no > label:nth-child(12),
.y4-hero-r:nth-of-type(13):checked ~ .y4-hero-no > label:nth-child(13),
.y4-hero-r:nth-of-type(14):checked ~ .y4-hero-no > label:nth-child(14),
.y4-hero-r:nth-of-type(15):checked ~ .y4-hero-no > label:nth-child(15),
.y4-hero-r:nth-of-type(16):checked ~ .y4-hero-no > label:nth-child(16),
.y4-hero-r:nth-of-type(17):checked ~ .y4-hero-no > label:nth-child(17),
.y4-hero-r:nth-of-type(18):checked ~ .y4-hero-no > label:nth-child(18),
.y4-hero-r:nth-of-type(19):checked ~ .y4-hero-no > label:nth-child(19),
.y4-hero-r:nth-of-type(20):checked ~ .y4-hero-no > label:nth-child(20) {
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
}

/* ⚠⚠ YÜKSEKLİK EKRANLA ÖLÇEKLENİR, ORAN DEĞİL (17 Ağu 2026):
   `aspect-ratio` + yükseklik sınırı birlikte çalışmıyor (tarayıcı oranı
   korumak için GENİŞLİĞİ kısıyor, görsel sola sıkışıyordu). Onun yerine tek
   akışkan ölçü: clamp(9rem, 20vw, 15rem) — telefonda alçak, masaüstünde
   tavana takılır, arada ekranla birlikte büyür. Medya sorgusu YOK. */
.y4-hero-gor {
  position: relative;
  display: block;
  block-size: var(--y4-manset-gorsel-tavan);
  overflow: hidden;
}

.y4-hero-gor img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.y4-hero-cip {
  position: absolute;
  inset-block-start: var(--y4-bosluk-3);
  inset-inline-start: var(--y4-bosluk-3);
}

/* ⚠ Vurgu bandı GÖRSELİN SOL ALTINDA ve DİKKAT RENGİNDE: başlığın tekrarı
   değil, özetten gelen gerçek bir cümle parçası (başlık zaten altta bantta).
   Yarım cümle çıkacaksa veri katmanı boş döner ve bant hiç basılmaz. */
.y4-hero-vurgu {
  position: absolute;
  inset-block-end: var(--y4-bosluk-4);
  inset-inline-start: var(--y4-bosluk-4);
  max-inline-size: min(74%, 35rem);
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-canli);
  color: var(--y4-perde-metin);
  font-weight: 850;
  font-size: clamp(0.875rem, 0.8rem + 0.5vw, 1.3rem);
  line-height: 1.28;
  text-transform: uppercase;
  box-shadow: var(--y4-golge-2);
}

/* ⚠ BANT GÖRSELİN ALTINDA, DÜZ ZEMİNDE — üstüne binmiyor. Kapağın kendi
   yazısı olan haberlerde (bizde çok) perde üstü başlık okunmuyordu. */
.y4-hero-bant {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-1);
  padding: var(--y4-bosluk-3) var(--y4-bosluk-4) var(--y4-bosluk-4);
  background: var(--y4-bant);
  color: var(--y4-bant-metin);
  text-decoration: none;
}

/* ⚠⚠ BANDIN BOYU SABİT KALIR, MANŞET BÜYÜMEZ (17 Ağu 2026):
   "yazı sığmıyorsa kutuyu büyüt" yanlış yoldu — uzun başlıklı bir haber
   gelince manşet sayfayı kaplıyordu. Doğrusu: başlık İKİ, özet BİR satır;
   uzunsa "…" ile biter. Metin kesilmiyor, düzgün kırpılıyor; kutu her
   haberde aynı boyda. */
.y4-hero-bas {
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  font-weight: 850;
  line-height: 1.22;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.y4-hero-oz {
  font-size: var(--y4-yazi-kucuk);
  opacity: 0.72;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* ⚠ Oklar GÖRSELİN dikey ortasında (bant hariç): bandın yüksekliği slayta
   göre değişiyor, %50 verilince oklar yazının üstüne kayıyordu. */
.y4-hero-ok {
  position: absolute;
  inset-block-start: calc(28.125% - 1.3rem); /* 16/9 görselin yarısı */
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-perde-tam);
  color: var(--y4-perde-metin);
  font-size: 1.5rem;
  cursor: pointer;
  user-select: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--y4-gecis), background var(--y4-gecis);
}

.y4-hero:hover .y4-hero-ok,
.y4-hero:focus-within .y4-hero-ok { opacity: 0.9; }

.y4-hero-ok:hover { opacity: 1; background: var(--y4-vurgu); }
.y4-hero-sol { inset-inline-start: var(--y4-bosluk-3); }
.y4-hero-sag { inset-inline-end: var(--y4-bosluk-3); }

/* ⚠⚠ NUMARA ŞERİDİ BANDIN DEVAMI (17 Ağu 2026, Selçuk: "bu boşluk niye"):
   şerit ayrı bir blok gibi durunca manşetin altında kopuk bir boşluk
   kalıyordu. Aynı zemin, aynı blok: görsel → bant → numaralar tek parça. */
.y4-hero-no {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2);
  justify-content: center;
  margin: 0;
  padding: 0 var(--y4-bosluk-4) var(--y4-bosluk-4);
  background: var(--y4-bant);
  border-end-start-radius: var(--y4-yuvarlak-3);
  border-end-end-radius: var(--y4-yuvarlak-3);
}

.y4-hero-no > label {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-hero-no-zemin);
  color: var(--y4-bant-metin);
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  transition: background var(--y4-gecis), color var(--y4-gecis);
}

.y4-hero-no > label:hover { background: var(--y4-hero-no-zemin-2); }

/* ⚠ Dokunmatikte oklar görünmüyor (hover yok) — numaralar tek gezinme
   yolu, o yüzden orada oklar tamamen gizlenir. */
@media (hover: none) {
  .y4-hero-ok { display: none; }
}

/* ═══ AKIŞ ═══ */
.y4-akis { display: flex; flex-direction: column; gap: var(--y4-bosluk-4); }

/* ⚠ Sekmeler TEK KUTUDA (segment): ayrı ayrı hap düğmeler sayfayı düğme
   tarlasına çeviriyordu; bunlar bir süzgecin seçenekleri, ayrı eylemler
   değil — birlikte durmaları bunu anlatıyor. */
/* ⚠⚠ TEK SEKME DİLİ (17 Ağu 2026, Selçuk kapsül çubuğu gösterip "düzelt
   şunları her yerde" dedi): akış widget'ındaki kapsül çubuk ARTIK STANDART.
   Sayfa sekmeleri (.y4-sekme) ve süzgeç şeridi (.y4-suzgec) aynı kuralları
   kullanır — üç ayrı sekme görünümü vardı, biri düzelince ötekiler eskide
   kalıyordu. */
.y4-akis-sekme,
.y4-sekme,
.y4-suzgec {
  display: flex;
  gap: var(--y4-bosluk-1);
  padding: var(--y4-bosluk-1);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  overflow-x: auto;
  scrollbar-width: none;
}

.y4-akis-sekme::-webkit-scrollbar,
.y4-sekme::-webkit-scrollbar,
.y4-suzgec::-webkit-scrollbar { display: none; }

.y4-akis-s,
.y4-sekme > a,
.y4-suzgec-dug {
  display: inline-flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 0;
  border-radius: var(--y4-yuvarlak-1);
  background: none;
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 650;
  white-space: nowrap;
  text-decoration: none;
}

.y4-akis-s:hover,
.y4-sekme > a:hover,
.y4-suzgec-dug:hover { background: var(--y4-yuzey-2); color: var(--y4-metin); }

.y4-akis-aktif, .y4-akis-aktif:hover,
.y4-sekme-ak, .y4-sekme-ak:hover,
.y4-suzgec-aktif, .y4-suzgec-aktif:hover {
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
}

/* ── DURUM ŞERİDİ ─────────────────────────────────────────────────────
   ⚠ Yalnız gerçek durum varken basılır (veri katmanı). Yatay kaydırma
   çubuğu gizli: şerit parmakla kaydırılır, masaüstünde de sürüklenir. */
.y4-durumlar {
  display: flex;
  gap: var(--y4-bosluk-3);
  overflow-x: auto;
  padding-block-end: var(--y4-bosluk-1);
  scrollbar-width: none;
}

.y4-durumlar::-webkit-scrollbar { display: none; }

/* ⚠ Durum kartı taslak ölçüsünde (108×164): daha küçüğünde avatar, ad ve
   kapak aynı kareye sığmıyor, şerit "küçük renkli kutular" gibi duruyordu. */
.y4-durum {
  position: relative;
  flex: 0 0 auto;
  inline-size: 6.75rem;
  block-size: 10.25rem;
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  color: var(--y4-perde-metin);
  text-decoration: none;
}

.y4-durum-arka {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Medyasız durum: kapak yerine sahibinin renginden dolgu (inline gradient). */
.y4-durum-renk { display: block; }

/* "Durum ekle" — şeridin ilk kartı; paylaş kutusunu açar (JS aynı widget'ta). */
.y4-durum-ekle {
  display: grid;
  place-items: center;
  gap: var(--y4-bosluk-2);
  border: 1px dashed var(--y4-cizgi);
  background: var(--y4-yuzey);
  color: var(--y4-metin-2);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  cursor: pointer;
}

.y4-durum-ekle:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }

.y4-durum-arti {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font-size: 1.25rem;
  font-weight: 700;
}

/* ⚠ Ekle kartında metin şeridi yok: yazı kartın ortasında duruyor. */
.y4-durum-ekle > .y4-durum-ad {
  position: static;
  padding: 0;
  background: none;
}

/* ⚠ ŞERİT BOŞKEN: kart tam genişliğe yayılır, yatay durur ve alçalır —
   yanında boşluk kalmaz, "kimse yok" gibi değil "ilk sen paylaş" gibi
   görünür. */
.y4-durumlar-bos > .y4-durum-ekle {
  flex: 1 1 auto;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: var(--y4-bosluk-3);
  inline-size: auto;
  block-size: 6rem;
}

.y4-durumlar-bos > .y4-durum-ekle > .y4-durum-ad { font-size: var(--y4-yazi); }

.y4-durum-av {
  position: absolute;
  inset-block-start: var(--y4-bosluk-2);
  inset-inline-start: var(--y4-bosluk-2);
}

.y4-durum-av .y4-av {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 2px solid var(--y4-vurgu);
}

.y4-durum-ad {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--y4-bosluk-3) var(--y4-bosluk-2) var(--y4-bosluk-2);
  background: linear-gradient(to top, var(--y4-perde-tam), var(--y4-perde-yok));
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
}

/* ── PAYLAŞ KUTUSU ────────────────────────────────────────────────────
   ⚠ Misafirde bu kutunun yerine giriş daveti basılır (aynı sınıf, farklı
   içerik) — çalışmayan bir kutu göstermek en kötü seçenek. */
.y4-paylas {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-kart-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}

.y4-paylas-ust {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
}

.y4-paylas-alan {
  flex: 1;
  min-inline-size: 0;
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-zemin);
  color: var(--y4-metin);
  font: inherit;
}

.y4-paylas-alan:focus-visible {
  outline: 2px solid var(--y4-vurgu);
  outline-offset: 1px;
}

.y4-paylas-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--y4-bosluk-3);
  flex-wrap: wrap;
}

.y4-paylas-ek {
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  text-decoration: none;
  cursor: pointer;
}

.y4-paylas-ek:hover { color: var(--y4-vurgu); }

/* ⚠ Dosya alanı GİZLİ ama VAR: seçim etiketten tetiklenir, tarayıcının
   kendi "Dosya seç" düğmesi tasarımı bozuyordu. */
.y4-paylas-dosya { display: none; }

.y4-paylas-durum {
  display: inline-flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  cursor: pointer;
}

.y4-paylas-durum:hover { color: var(--y4-vurgu); }

/* Seçilen medyanın önizlemesi — yükleme YAPILMADAN önce, aynı kutuda. */
.y4-paylas-onizleme {
  position: relative;
  border-radius: var(--y4-yuvarlak-1);
  overflow: hidden;
  background: var(--y4-yuzey-2);
}

.y4-paylas-onizleme img,
.y4-paylas-onizleme video {
  display: block;
  inline-size: 100%;
  max-block-size: 18rem;
  object-fit: cover;
}

.y4-paylas-kaldir {
  position: absolute;
  inset-block-start: var(--y4-bosluk-2);
  inset-inline-end: var(--y4-bosluk-2);
  padding: 2px var(--y4-bosluk-2);
  border: 0;
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-perde-tam);
  color: var(--y4-perde-metin);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  cursor: pointer;
}

.y4-paylas-gonder {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-5);
  border: 0;
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.y4-paylas-gonder:hover { background: var(--y4-vurgu-2); }
.y4-paylas-gonder:disabled { opacity: 0.6; cursor: default; }

.y4-paylas-davet {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  color: var(--y4-metin-2);
}

/* ── GÖNDERİLER ──────────────────────────────────────────────────────── */
.y4-gonderiler { display: flex; flex-direction: column; gap: var(--y4-bosluk-4); }

.y4-gonderi {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-kart-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}

.y4-gonderi-ust {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
  color: inherit;
  text-decoration: none;
}

.y4-gonderi-kim { display: flex; flex-direction: column; min-inline-size: 0; }
.y4-gonderi-nick { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-gonderi-metin { margin: 0; overflow-wrap: anywhere; }

.y4-gonderi-medya {
  inline-size: 100%;
  max-block-size: 26rem;
  object-fit: cover;
  border-radius: var(--y4-yuvarlak-1);
  display: block;
}

.y4-gonderi-medya-bag { display: block; }

.y4-gonderi-alt {
  display: flex;
  gap: var(--y4-bosluk-5);
  padding-block-start: var(--y4-bosluk-2);
  border-block-start: 1px solid var(--y4-cizgi);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  text-decoration: none;
}

.y4-gonderi-alt:hover { color: var(--y4-vurgu); }

.y4-akis-daha {
  align-self: center;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-5);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
  text-decoration: none;
}

.y4-akis-daha:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }

/* ═══ VİDEO ═══
   ⚠ Liste, oynatıcının boyunu AŞMAZ: kabuk mutlak konumlu, içi kaydırılır.
   Sabit yükseklik yazmak masaüstünde tutup mobilde patlıyordu. */
.y4-video { display: block; }
.y4-video-duzen { display: grid; gap: var(--y4-bosluk-3); }

@media (min-width: 55rem) {
  .y4-video-duzen { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.y4-video-ana {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  background: var(--y4-yuzey-2);
  cursor: pointer;
}

.y4-video-ana > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.y4-video-cerceve {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

.y4-video-oynat {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font-size: 1.25rem;
}

.y4-video-oynuyor > .y4-video-oynat,
.y4-video-oynuyor > .y4-video-ana-ic,
.y4-video-oynuyor > .y4-video-sure { display: none; }

.y4-video-sure {
  position: absolute;
  inset-block-end: var(--y4-bosluk-3);
  inset-inline-end: var(--y4-bosluk-3);
  padding: 0 var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-perde-tam);
  color: var(--y4-perde-metin);
  font-size: 0.6875rem;
  font-weight: 700;
}

.y4-video-sure-k {
  inset-block-end: var(--y4-bosluk-1);
  inset-inline-end: var(--y4-bosluk-1);
}

.y4-video-ana-ic {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--y4-bosluk-5) var(--y4-bosluk-4) var(--y4-bosluk-3);
  background: linear-gradient(to top, var(--y4-perde-tam), var(--y4-perde-yok));
}

.y4-video-ana-bas {
  color: var(--y4-perde-metin);
  font-weight: 700;
  text-decoration: none;
}

.y4-video-kabuk { position: relative; min-block-size: 12rem; }

.y4-video-liste {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
}

/* ⚠⚠ KAYDIRMA ÇUBUĞU YOK (17 Ağu 2026): liste oynatıcıdan uzun olunca
   yanda çubuk çıkıyordu. Satırlar alanı EŞİT BÖLÜŞÜR (grid 1fr): kaç video
   olursa olsun liste oynatıcının boyunda biter, taşma kırpılır.
   ⚠ Sabit yükseklik yazılmaz — ölçüyü oynatıcının 16/9 oranı verir. */
@media (min-width: 55rem) {
  .y4-video-liste {
    position: absolute;
    inset: 0;
    display: grid;
    grid-auto-rows: 1fr;
    overflow: hidden;
  }

  /* Satır alanı daraldıkça kapak ve başlık birlikte küçülür. */
  .y4-video-sat { min-block-size: 0; align-items: stretch; }
  .y4-video-kucuk { aspect-ratio: auto; block-size: 100%; }
  .y4-video-sat-bas { -webkit-line-clamp: 2; align-self: center; }
}

.y4-video-sat {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--y4-bosluk-3);
  align-items: center;
  padding: var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-1);
  cursor: pointer;
}

.y4-video-sat:hover, .y4-video-secili { background: var(--y4-yuzey-2); }

.y4-video-kucuk {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--y4-yuvarlak-1);
  overflow: hidden;
}

.y4-video-kucuk > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.y4-video-sat-bas {
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* ═══ OYNA ═══
   ⚠ Kapakta oyunun adı ZATEN VAR (ürettiğimiz kimlik kartı); kartta ikinci
   kez yazılmaz. Adı görselinde olmayan tek oyun kartında şerit basılır. */
/* ⚠ Kart sayısı sütun sayısına bölünmediğinde son kart tek başına kalıyor
   ("4 + 1" görüntüsü). Yetim kart iki sütuna yayılır, satır boş kalmaz. */
.y4-oyna {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(7rem, (100% - 4 * var(--y4-bosluk-3)) / 5), 1fr));
  gap: var(--y4-bosluk-3);
}

/* ⚠ "Yetim kartı iki sütuna yay" denendi ve GERİ ALINDI: Pong kartı
   iki kat genişleyip kare kapağı esnetti, satır daha da bozuk göründü.
   Kartlar eşit kalır; son satırda boşluk kalması, dev kart olmasından iyi. */

.y4-oyun {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  background: var(--y4-yuzey-2);
  text-decoration: none;
  transition: transform var(--y4-gecis);
}

.y4-oyun:hover { transform: translateY(-0.2rem); }

.y4-oyun-gorsel {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.y4-oyun-rozet {
  position: absolute;
  inset-block-start: var(--y4-bosluk-2);
  inset-inline-start: var(--y4-bosluk-2);
  padding: 0 var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-perde-tam);
  color: var(--y4-perde-metin);
  font-size: 0.625rem;
  font-weight: 700;
}

.y4-oyun-serit {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--y4-bosluk-4) var(--y4-bosluk-2) var(--y4-bosluk-2);
  background: linear-gradient(to top, var(--y4-perde-tam), var(--y4-perde-yok));
  color: var(--y4-perde-metin);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
  text-align: center;
}

/* ═══ BUGÜN (dörtlü) ═══
   ⚠ Dört FARKLI tür tek satırda; renk türden gelir, kart içeriğinden değil. */
/* ⚠ SÜTUN SAYISI SABİT (2 → 4): auto-fit dar ekranda 3 sütun seçip dördüncü
   kartı tek başına alt satıra düşürüyordu — dörtlü, dörtlü görünmeli. */
/* ⚠⚠ AKIŞKAN, EŞİK YOK (17 Ağu 2026): "2 sütun / 48rem'den sonra 4 sütun"
   kuralı 800px dolayında iki DEV kart üretiyordu (ölçüldü: 400×530px).
   Sütun sayısını kartın tabanı belirler; ekran ne kadar genişse o kadar
   kart sığar, kart boyu sabit kalır. */
.y4-bugun {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(8rem, (100% - 3 * var(--y4-bosluk-4)) / 4), 1fr));
  gap: var(--y4-bosluk-4);
}

.y4-bugun-kart {
  container-type: inline-size;
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  color: var(--y4-perde-metin);
  text-decoration: none;
}

.y4-bugun-medya { display: block; block-size: 100%; }

.y4-bugun-medya > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--y4-gecis);
}

.y4-bugun-kart:hover .y4-bugun-medya > img { scale: 1.05; }

.y4-bugun-etiket {
  position: absolute;
  inset-block-start: var(--y4-bosluk-3);
  inset-inline-start: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-1) var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font-size: 0.6875rem;
  font-weight: 800;
}

/* Tür renkleri — jeton üstünden, tek tek renk kodu yazılmaz.
   ⚠ Tür SINIF ADINA gömülmez, `data-tur` ile gelir: panelden yeni tür
   eklendiğinde uydurulmuş bir sınıf değil, tanımsız bir data değeri olur
   ve kart varsayılan rengiyle basılır (stilsiz kalmaz). */
/* ⚠ Metin rengi --y4-vurgu-zit: bant jetonu manşet bandına ait ve orada
   ZEMİN; etiketlerde zemin türün rengi, yazı onun zıttı olmalı. */
.y4-bugun-kart[data-tur="tarif"] > .y4-bugun-etiket { background: var(--y4-uyari); color: var(--y4-vurgu-zit); }
.y4-bugun-kart[data-tur="oyun"] > .y4-bugun-etiket { background: var(--y4-olumlu); color: var(--y4-vurgu-zit); }
.y4-bugun-kart[data-tur="kimdir"] > .y4-bugun-etiket { background: var(--y4-vurgu-2); color: var(--y4-vurgu-zit); }

.y4-bugun-ic {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-1);
  padding: var(--y4-bosluk-5) var(--y4-bosluk-3) var(--y4-bosluk-3);
  background: linear-gradient(to top, var(--y4-perde-tam) 15%, var(--y4-perde-yok));
}

.y4-bugun-bas {
  font-weight: 800;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.y4-bugun-oz {
  font-size: var(--y4-yazi-kucuk);
  opacity: 0.9;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ⚠⚠ MOBİLDE 3/4 KART DEVASA (17 Ağu 2026, ölçüldü: 700px ekranda iki sütun
   → 340×450px kart, ekranın yarısını bir kart kaplıyor). Dar ekranda kare
   orana düşer ve özet basılmaz; kartın işi orada "bugün ne var" demek. */
/* ⚠ Dar kartta özet okunmuyor; kabın genişliğine göre gizlenir — ekran
   genişliğine göre DEĞİL (kart yan sütunda da olabilir). */
@container (max-width: 13rem) {
  .y4-bugun-oz { display: none; }
}

/* ═══ RADYO ═══ */
/* ⚠⚠ RADYO KENDİ ZEMİNİNİ TAŞIR (17 Ağu 2026, Selçuk: "YudumFM widget'ine
   arka plan koy"): kutu düz yüzeydeydi, yanındaki liste kutularından
   ayrılmıyordu. Radyo bir yayın; sayfada da öyle görünmeli. */
.y4-radyo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
}

/* Dekoratif ışık — köşede yumuşak daire; görsel indirmeden derinlik. */
.y4-radyo::before {
  content: "";
  position: absolute;
  inline-size: 11rem;
  block-size: 11rem;
  border-radius: 50%;
  background: var(--y4-radyo-katman-1);
  inset-block-start: -4rem;
  inset-inline-end: -3rem;
}

.y4-radyo > * { position: relative; }

/* ⚠ Panelden arka plan görseli verilirse (radyo.arka_gorsel) gradyanın
   üstüne biner; verilmezse hiçbir istek yapılmaz. */
.y4-radyo-gorselli { background-size: cover; background-position: center; }

.y4-radyo-ust {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  font-size: var(--y4-yazi-kucuk);
  color: var(--y4-kimlik-metin);
  opacity: 0.85;
}

.y4-radyo-canli { color: var(--y4-kimlik-metin); font-weight: 800; font-size: 0.625rem; }

/* Dinleyici sayısı canlı uçtan gelir; veri gelmeden BOŞ durur, sıfır
   yazmaz — "0 dinleyici" yazan bir radyo kutusu yanlış bilgi verir. */
.y4-radyo-dinleyici { margin-inline-start: auto; }

.y4-radyo-dalga {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  block-size: 1rem;
}

.y4-radyo-dalga i {
  inline-size: 3px;
  border-radius: 2px;
  background: var(--y4-kimlik-metin);
  animation: y4-radyo-salin 1s infinite ease-in-out;
}

.y4-radyo-dalga i:nth-child(1) { block-size: 40%; animation-delay: 0s; }
.y4-radyo-dalga i:nth-child(2) { block-size: 90%; animation-delay: 0.15s; }
.y4-radyo-dalga i:nth-child(3) { block-size: 60%; animation-delay: 0.3s; }
.y4-radyo-dalga i:nth-child(4) { block-size: 100%; animation-delay: 0.45s; }

@keyframes y4-radyo-salin {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.y4-radyo-sarki { font-weight: 700; line-height: 1.35; }
.y4-radyo-dj { color: var(--y4-kimlik-metin); opacity: 0.8; font-size: var(--y4-yazi-kucuk); }
.y4-radyo-dj:empty { display: none; }

.y4-radyo-dugmeler {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
  flex-wrap: wrap;
  margin-block-start: var(--y4-bosluk-1);
}

.y4-radyo-dinle {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-kimlik-metin);
  color: var(--y4-radyo-1);
  font-weight: 700;
  font-size: var(--y4-yazi-kucuk);
  text-decoration: none;
}

.y4-radyo-dinle:hover { background: var(--y4-bant); color: var(--y4-radyo-2); }

.y4-radyo-istek {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-radyo-katman-2);
  color: var(--y4-kimlik-metin);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
  text-decoration: none;
}

.y4-radyo-istek:hover { background: var(--y4-radyo-katman-3); }

/* ═══ CANLI YAYINLAR / DJ'LER — ortak satır iskeleti ═══
   ⚠ İki liste de "avatar + iki satır yazı + rozet" düzeninde; ayrı ayrı
   yazmak yerine iskelet ortak, farklar altta. */
.y4-yayinlar, .y4-djler {
  position: relative;
}

.y4-yayin, .y4-dj {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-1);
  color: inherit;
  text-decoration: none;
}

.y4-yayin:hover, .y4-dj:hover { background: var(--y4-yuzey-2); }

.y4-yayin-ic, .y4-dj-ic {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1;
}

.y4-yayin-ad, .y4-dj-ad { font-weight: 700; }

.y4-yayin-kanal, .y4-dj-unvan, .y4-dj-prog {
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.y4-yayin-son { color: var(--y4-metin-3); font-size: 0.6875rem; }
.y4-yayin-canli { background: var(--y4-yuzey-2); }

/* ═══ MAÇLAR ═══ */
/* ⚠⚠ SAHA ZEMİNİ (17 Ağu 2026): kutu düz yüzeydeyken yanındaki liste
   kutularından ayrılmıyordu. Çim şeritleri ve orta yuvarlak SAF CSS —
   tek bir görsel indirilmiyor, koyu/açık modda aynı duruyor. */
.y4-maclar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-1);
}

/* Orta yuvarlak + orta çizgi — sahayı bir bakışta anlatır. */
.y4-maclar::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 7rem;
  block-size: 7rem;
  translate: -50% -50%;
  border: 2px solid var(--y4-mac-cizgi);
  border-radius: 50%;
}

.y4-maclar > * { position: relative; }

.y4-mac {
  background: var(--y4-mac-satir);
  text-shadow: var(--y4-mac-golge);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-1);
  color: inherit;
  text-decoration: none;
}

.y4-mac:hover { background: var(--y4-mac-katman); }

.y4-mac-takim {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  min-inline-size: 0;
}

.y4-mac-sag { flex-direction: row-reverse; text-align: end; }

.y4-mac-arma {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

/* ⚠ Arma bulunamadıysa yer TUTULUR: aksi hâlde satırlar birbirine göre
   kayıyor ve liste eğri görünüyor. */
.y4-mac-arma-bos { display: inline-block; }

.y4-mac-ad {
  color: var(--y4-kimlik-metin);
  font-weight: 650;
  font-size: var(--y4-yazi-kucuk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.y4-mac-saat {
  color: var(--y4-kimlik-metin);
  font-weight: 800;
  font-size: var(--y4-yazi-kucuk);
  padding: 2px var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-mac-katman);
}

/* Armasız takımın yer tutucusu saha üstünde belli olmasın */
.y4-mac-arma-bos { opacity: 0.35; }

/* ═══ SİNEMA ═══ */
/* ⚠⚠ SALON ZEMİNİ (17 Ağu 2026): kutu düz yüzeydeydi. Üst ve alt kenarda
   film şeridi delikleri, arkada perde gradyanı — hepsi saf CSS, tek görsel
   indirilmiyor. Afişler bunun üstünde durur. */
.y4-sinema {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-3);
}

.y4-sinema > * { position: relative; }

.y4-sinema-buyuk {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  background: var(--y4-yuzey-2);
  color: var(--y4-kimlik-metin);
  text-decoration: none;
}

.y4-sinema-buyuk > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.y4-sinema-bos {
  display: grid;
  place-items: center;
  block-size: 100%;
  font-size: 2rem;
}

.y4-sinema-ic {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-1);
  padding: var(--y4-bosluk-4) var(--y4-bosluk-3) var(--y4-bosluk-2);
  background: linear-gradient(to top, var(--y4-perde-tam), var(--y4-perde-yok));
}

.y4-sinema-rozet { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.04em; }
.y4-sinema-oynuyor > .y4-sinema-ic > .y4-sinema-rozet { color: var(--y4-canli); }
.y4-sinema-ad { font-weight: 700; line-height: 1.25; }

.y4-sinema-sat {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--y4-bosluk-3);
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.y4-sinema-kucuk {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--y4-yuvarlak-1);
  overflow: hidden;
  background: var(--y4-yuzey-2);
}

.y4-sinema-kucuk > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.y4-sinema-kucuk-bos { display: grid; place-items: center; }

.y4-sinema-sat-ic { display: flex; flex-direction: column; min-inline-size: 0; }
.y4-sinema-sat-ad { font-size: var(--y4-yazi-kucuk); font-weight: 600; }
.y4-sinema-sat-alt { color: var(--y4-kimlik-metin); opacity: 0.75; font-size: 0.6875rem; }
.y4-sinema-sat {
  padding: var(--y4-bosluk-1);
  border-radius: var(--y4-yuvarlak-1);
}

.y4-sinema-sat:hover { background: var(--y4-sinema-katman); }

/* ═══ EN ÇOK OKUNANLAR ═══ */
.y4-populer {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.y4-populer-sat > a {
  display: grid;
  grid-template-columns: auto 3.5rem 1fr;
  gap: var(--y4-bosluk-3);
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.y4-populer-no {
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-orta);
  font-weight: 800;
}

.y4-populer-gorsel {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--y4-yuvarlak-1);
  overflow: hidden;
  background: var(--y4-yuzey-2);
}

.y4-populer-gorsel > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.y4-populer-bas {
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
  line-height: 1.35;
}

.y4-populer-sat > a:hover .y4-populer-bas { color: var(--y4-vurgu); }
.y4-populer-sat > a:hover .y4-populer-no { color: var(--y4-vurgu); }

/* ═══ NASIL YAPILIR ═══ */
.y4-nasil { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); }

/* ═══ MARKA BANDI (alt bölge) ═══ */
.y4-marka-bant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--y4-bosluk-5);
  padding: var(--y4-bosluk-6) var(--y4-bosluk-5);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-cerceve);
  color: var(--y4-cerceve-metin);
}

.y4-marka-kim { min-inline-size: 0; }
.y4-marka-ad { font-size: var(--y4-yazi-buyuk); font-weight: 800; }

.y4-marka-slogan {
  margin: var(--y4-bosluk-1) 0 0;
  color: var(--y4-cerceve-metin-2);
  font-size: var(--y4-yazi-kucuk);
  max-inline-size: 28rem;
}

.y4-marka-sayilar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-5);
}

.y4-marka-sayi { display: flex; flex-direction: column; align-items: center; }
.y4-marka-sayi > b { font-size: var(--y4-yazi-orta); }

.y4-marka-sayi > span {
  color: var(--y4-cerceve-metin-2);
  font-size: var(--y4-yazi-kucuk);
}

.y4-marka-dugmeler { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-3); }

.y4-marka-dug {
  padding: var(--y4-bosluk-3) var(--y4-bosluk-5);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font-weight: 700;
  font-size: var(--y4-yazi-kucuk);
  text-decoration: none;
}

.y4-marka-dug:hover { background: var(--y4-vurgu-2); }

.y4-marka-dug-2 {
  background: transparent;
  border: 1px solid var(--y4-cerceve-cizgi);
  color: var(--y4-cerceve-metin);
}

.y4-marka-dug-2:hover { background: var(--y4-cerceve-2); }

/* ⚠ Hareket azaltma tercihi: dalga ve büyütme animasyonları durur. */
@media (prefers-reduced-motion: reduce) {
  .y4-radyo-dalga i { animation: none; }
  .y4-doseme:hover .y4-doseme-gorsel,
  .y4-bugun-kart:hover .y4-bugun-medya > img { scale: 1; }
  .y4-oyun:hover { transform: none; }
  .y4-hero-slayt { transition: none; }
}

/* ═══ LİSTE WIDGET'I (tek widget, her düzen) ═══
   ⚠ Düzen ve sütun sayısı PANELDEN gelir; burada yalnız o seçimlerin
   karşılığı var. Sütun verilmezse (y4-liste-sN yok) ızgara akışkandır:
   kartın tabanı kaç sütun sığacağını belirler, eşik yazılmaz. */
.y4-liste {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(auto-fit, minmax(max(9rem, (100% - 4 * var(--y4-bosluk-3)) / 5), 1fr));
}

/* Yatay ve liste düzeni tek sütuna iner: satır kartları yan yana okunmuyor. */
.y4-liste-yatay,
.y4-liste-liste { grid-template-columns: 1fr; gap: var(--y4-bosluk-2); }

/* Şerit: dik kapaklar, biraz daha dar taban — tavanı 6 (tavansız bırakınca
   geniş ekranda kapaklar pul boyutuna iniyor). */
.y4-liste-serit {
  grid-template-columns: repeat(auto-fit, minmax(max(9rem, (100% - 5 * var(--y4-bosluk-3)) / 6), 1fr));
}

/* Sabit sütun seçildiyse (panelden) EN ÇOK o kadar sütun; dar ekranda sarar.
   ⚠⚠ ÖLÇÜLDÜ (tools/y4_izgara_olc.py, 17 Ağu): yalnız taban yazınca TAVAN
   olmuyordu — "3 sütun" seçilen liste 1280px'te 6, 1600px'te 6 sütuna
   çıkıyordu, yani paneldeki sütun ayarı geniş ekranda hiç işlemiyordu.
   Kalıp: minmax(max(taban, (100% - (N-1)*gap)/N), 1fr) → hem taban hem tavan.
   Böylece dar ekranda kart tabanı kadar sarar, geniş ekranda N'i AŞMAZ. */
.y4-liste-s1 { grid-template-columns: 1fr; }
.y4-liste-s2 { grid-template-columns: repeat(auto-fit, minmax(max(9rem, (100% - 1 * var(--y4-bosluk-3)) / 2), 1fr)); }
.y4-liste-s3 { grid-template-columns: repeat(auto-fit, minmax(max(8rem, (100% - 2 * var(--y4-bosluk-3)) / 3), 1fr)); }
.y4-liste-s4 { grid-template-columns: repeat(auto-fit, minmax(max(7rem, (100% - 3 * var(--y4-bosluk-3)) / 4), 1fr)); }
.y4-liste-s5 { grid-template-columns: repeat(auto-fit, minmax(max(6rem, (100% - 4 * var(--y4-bosluk-3)) / 5), 1fr)); }
.y4-liste-s6 { grid-template-columns: repeat(auto-fit, minmax(max(5rem, (100% - 5 * var(--y4-bosluk-3)) / 6), 1fr)); }

/* ⚠ Kapağı olmayan bölüm (panelden elle eklenen: oyun, sohbet…): görsel
   yerine ikon + yüzey zemini. Uydurma kapak konmaz, kutu da boş kalmaz. */
.y4-doseme-ikonlu { background: var(--y4-yuzey-2); }

.y4-doseme-ikon {
  display: grid;
  place-items: center;
  block-size: 100%;
  font-size: 1.75rem;
}

.y4-doseme-ikonlu > .y4-doseme-ic { background: none; }

/* ── AKIŞ: YORUMLAR ───────────────────────────────────────────────────
   ⚠ Gönderi kartında yalnız yorum SAYISI vardı; sohbet sitesinde akış
   yorumsuz yarım kalıyor. Son N yorum kartın altında, tamamı gönderi
   sayfasında. */
.y4-yorumlar {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
  padding-block-start: var(--y4-bosluk-2);
}

.y4-yorum { display: flex; gap: var(--y4-bosluk-2); align-items: flex-start; }

.y4-yorum .y4-av { inline-size: 1.75rem; block-size: 1.75rem; font-size: 0.75rem; }

.y4-yorum-ic {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey-2);
}

.y4-yorum-kim { color: var(--y4-metin-3); font-size: 0.6875rem; font-weight: 700; }
.y4-yorum-metin { font-size: var(--y4-yazi-kucuk); overflow-wrap: anywhere; }

.y4-yorum-tumu {
  align-self: flex-start;
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  text-decoration: none;
}

.y4-yorum-tumu:hover { color: var(--y4-vurgu); }

.y4-yorum-yaz { display: flex; gap: var(--y4-bosluk-2); }

.y4-yorum-alan {
  flex: 1;
  min-inline-size: 0;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-zemin);
  color: var(--y4-metin);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
}

.y4-yorum-alan:focus-visible { outline: 2px solid var(--y4-vurgu); outline-offset: 1px; }

.y4-yorum-gonder {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 0;
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
  cursor: pointer;
}

.y4-yorum-gonder:hover { background: var(--y4-vurgu); color: var(--y4-vurgu-zit); }
.y4-yorum-gonder:disabled { opacity: 0.6; cursor: default; }

/* ⚠⚠ KAPAĞINDA ADI YAZAN KART (üretilmiş kapak): yazı bloğu basılmaz, bu
   yüzden kartın altı boş kalıyordu (ızgara yüksekliği komşu karta göre
   eşitleniyor). Görsel kartı tamamen doldurur — boşluk kalmaz, kapak da
   kırpılmaz (cover). */
/* ⚠ Başlık artık HER kartta basılıyor; "yazılı kapak kartı tamamen
   doldursun" kuralı geri alındı — o kural kartı başlıksız bırakıyordu. */


/* ⚠⚠ ÜRETİLMİŞ KAPAK ARTIK ÖZEL DEĞİL (17 Ağu 2026, son karar):
   Bu kapaklara ayrı kurallar yazdıkça (kare oran, contain, dolu zemin) yan
   yana duran kartlar iki ayrı tasarıma bölündü — Selçuk haklı olarak "2'si
   neden farklı CSS" dedi. Kapaklar 1200x630 üretiliyor, yani normal bir
   kapak görseliyle aynı; ortak kart kuralları yeterli, tek fark kalmadı.
   `y4-kart-yazili` sınıfı şablonda duruyor ama görünümü DEĞİŞTİRMİYOR. */

/* ── AKIŞ: GÖNDERİ EYLEMLERİ ─────────────────────────────────────────
   ⚠ Beğeni artık gerçek bir düğme (POST /begen); yanındaki bağlantılarla
   aynı görünmesi gerekiyor ki satır bölünmüş görünmesin. */
.y4-gonderi-eylem {
  display: inline-flex;
  align-items: center;
  gap: var(--y4-bosluk-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--y4-metin-2);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  text-decoration: none;
  cursor: pointer;
}

.y4-gonderi-eylem:hover { color: var(--y4-vurgu); }
.y4-gonderi-eylem:disabled { opacity: 0.6; cursor: default; }
.y4-begendim { color: var(--y4-canli); }

/* Beğeni düğmesi ve sayacı — eylem satırının parçası; ayrı görünmez,
   yalnız beğenilmiş hâlde renk değiştirir (.y4-begendim). */
.y4-begen { font-variant-numeric: tabular-nums; }
.y4-begeni-sayi { min-inline-size: 1ch; }

/* ⚠ Radyo kendi zeminini taşıdığı için widget kabuğu saydam kalır; aksi
   hâlde kutu içinde kutu görünüyordu. */






/* ═══ SON YORUMLAR ═══
   ⚠ Yorumun kendisi asıl içerik: metin öne çıkar, kim/nerede/ne zaman
   altında küçük durur. */
.y4-son-yorumlar { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); }

.y4-sy {
  display: flex;
  gap: var(--y4-bosluk-3);
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
}

.y4-sy .y4-av { inline-size: 2rem; block-size: 2rem; font-size: 0.8rem; }
.y4-sy-ic { display: flex; flex-direction: column; min-inline-size: 0; gap: 2px; }

/* ⚠ Yorum bir KONUŞMA: düz satır yerine balon. Balon hem okunurluğu
   artırıyor hem de "burada biri konuşmuş" hissini veriyor; kutu da düz
   liste olmaktan çıkıyor. */
.y4-sy-metin {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-2);
  border-start-start-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  border-inline-start: 3px solid var(--y4-vurgu);
  font-size: var(--y4-yazi-kucuk);
  line-height: 1.45;
  overflow-wrap: anywhere;
  transition: border-color var(--y4-gecis), background var(--y4-gecis);
}

.y4-sy-alt {
  color: var(--y4-metin-3);
  font-size: 0.6875rem;
  padding-inline-start: var(--y4-bosluk-2);
}

.y4-sy-alt b { color: var(--y4-metin-2); }

.y4-sy:hover .y4-sy-metin {
  border-inline-start-color: var(--y4-vurgu-2);
  background: var(--y4-vurgu-hafif, var(--y4-yuzey));
}

/* ⚠ Satırlar birbirinden ayrılsın: art arda gelen balonlar tek blok gibi
   görünüyordu. */
.y4-son-yorumlar { gap: var(--y4-bosluk-4); }

/* ═══ DJ KUTUSU — STÜDYO ZEMİNİ ═══
   ⚠ Ekolayzır çubukları saf CSS (tekrar eden gradyan): tek görsel
   indirilmiyor, iki modda da aynı duruyor. */
.y4-djler {
  position: relative;
  padding: var(--y4-bosluk-4);
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  color: var(--y4-kimlik-metin);
  text-shadow: var(--y4-dj-golge);
  background:
    repeating-linear-gradient(90deg,
      var(--y4-dj-katman) 0 0.25rem, transparent 0.25rem 0.9rem) bottom / 100% 2.5rem no-repeat,
    linear-gradient(155deg, var(--y4-dj-1), var(--y4-dj-2));
}

.y4-djler > * { position: relative; }

/* DJ kartları geniş: biyografi dört sütunda okunmuyordu. */
.y4-dj-izgara {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.y4-djler .y4-dj:hover { background: var(--y4-dj-katman); }
.y4-djler .y4-dj-ad { color: var(--y4-kimlik-metin); }
.y4-djler .y4-dj-unvan { color: var(--y4-dj-vurgu); font-weight: 650; }
.y4-djler .y4-dj-prog { color: var(--y4-kimlik-metin); opacity: 0.75; }



/* ═══ REKLAM ALANLARI ═══
   ⚠ Reklam kutusu SAYFANIN PARÇASI gibi durur ama içeriğe karışmaz: kendi
   nefes payı var, yüzey rengi yok (reklamın kendi zemini gelir).
   ⚠ Boş bölge hiç basılmıyor (şablonda koşullu) — bekleyen boş kutu, sayfayı
   zıplatan en büyük sebep. */
.y4-reklam {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.y4-reklam-ust { margin-block-end: var(--y4-bosluk-5); }
.y4-reklam-alt { margin-block-start: var(--y4-bosluk-5); }

/* AdSense otomatik reklamlarının widget kutularının İÇİNE yerleşip kutuları
   şişirmesi engelli (adsbygoogle-noablate motorda ekleniyor); burada yalnız
   taşma kesiliyor. */
.y4-reklam > * { max-inline-size: 100%; }

/* ── AKIŞ: MODERASYON ────────────────────────────────────────────────
   ⚠ Sahibi ve moderatör için; sunucu yetkiyi ayrıca doğruluyor. Düğmeler
   eylem satırının sağında, sönük durur — yanlışlıkla basılmasın diye
   dikkat çekmez ama aranınca bulunur. */
.y4-mod { display: inline-flex; gap: var(--y4-bosluk-3); margin-inline-start: auto; }
.y4-mod-form { display: inline; }
.y4-mod-dug { opacity: 0.55; }
.y4-mod-dug:hover { opacity: 1; color: var(--y4-olumsuz); }

/* ═══ KENDİ KİMLİĞİ OLAN YAN KUTULAR ═══
   ⚠⚠ ZEMİN KUTUNUN TAMAMINDA (17 Ağu 2026, Selçuk: "YudumFM niye dışarda"):
   önce zemin iç sarmaldaydı, başlık kutunun dışında beyaz zeminde kalıyordu —
   kutu ikiye bölünmüş görünüyordu. Artık başlık da zeminin içinde.
   ⚠ Desenler HAFİF: dört kutuda da aynı kaba çizgi vardı ("hepsi aynı kara
   kalemle fırçalanmış gibi"). Her kutunun kendi işareti var ve hepsi soluk;
   asıl iş içerikte, zemin yalnız kimlik veriyor. */
.y4-bolge-yan .tw-y4_radyo,
.y4-bolge-yan .tw-y4_maclar,
.y4-bolge-yan .tw-y4_sinema,
.y4-bolge-yan .tw-y4_djler {
  position: relative;
  overflow: hidden;
  border: 0;
  color: var(--y4-kimlik-metin);
}

/* Başlık zeminin üstünde: ayraç çizgisi de zemine göre soluk beyaz. */
.y4-bolge-yan .tw-y4_radyo > .tw-bas,
.y4-bolge-yan .tw-y4_maclar > .tw-bas,
.y4-bolge-yan .tw-y4_sinema > .tw-bas,
.y4-bolge-yan .tw-y4_djler > .tw-bas {
  color: var(--y4-kimlik-metin);
  position: relative;
}

.y4-bolge-yan .tw-y4_radyo > .tw-bas::after,
.y4-bolge-yan .tw-y4_maclar > .tw-bas::after,
.y4-bolge-yan .tw-y4_sinema > .tw-bas::after,
.y4-bolge-yan .tw-y4_djler > .tw-bas::after {
  background: linear-gradient(90deg, var(--y4-radyo-katman-2), transparent);
}

/* Renkli zeminde vurgu çubuğu da zeminden: mor çubuk orada kayboluyor. */
.y4-bolge-yan .tw-y4_radyo > .tw-bas::before,
.y4-bolge-yan .tw-y4_maclar > .tw-bas::before,
.y4-bolge-yan .tw-y4_sinema > .tw-bas::before,
.y4-bolge-yan .tw-y4_djler > .tw-bas::before {
  background: var(--y4-kimlik-metin);
  opacity: 0.85;
}

/* — RADYO: yayın. Köşede yumuşak ışık; çizgi/desen yok. */
.y4-bolge-yan .tw-y4_radyo {
  background:
    radial-gradient(120% 90% at 85% -10%, var(--y4-radyo-katman-2), transparent 60%),
    linear-gradient(140deg, var(--y4-radyo-1), var(--y4-radyo-2) 55%, var(--y4-radyo-3));
}

/* — MAÇ: saha. Çim şeritleri ÇOK soluk, orta yuvarlak silik. */
.y4-bolge-yan .tw-y4_maclar {
  background:
    repeating-linear-gradient(90deg,
      var(--y4-mac-cizgi) 0 2.5rem, transparent 2.5rem 5rem),
    radial-gradient(60% 55% at 50% 55%, var(--y4-mac-katman), transparent 70%),
    linear-gradient(160deg, var(--y4-mac-1), var(--y4-mac-2));
}

/* ⚠⚠ BAŞLIK DA BEYAZ OLMALI (18 Ağu 2026, Selçuk: "neresi düzeldi"):
   kutunun İÇİNDEKİ metinler --y4-kimlik-metin ile beyazdı ama widget
   BAŞLIĞI (.y4-kutu-bas) dış sarmalayıcıda duruyor ve rengini sayfadan
   miras alıyordu — açık modda koyu metin, koyu marka zemininde görünmez
   oluyordu. Renk sarmalayıcıya veriliyor: içerideki her şey devralır. */
.y4-bolge-yan .tw-y4_sinema,
.y4-bolge-yan .tw-y4_djler,
.y4-bolge-yan .tw-y4_radyo,
.y4-bolge-yan .tw-y4_maclar { color: var(--y4-kimlik-metin); }

/* — SİNEMA: perde. Delik şeridi yalnız ALT kenarda, ince. */
.y4-bolge-yan .tw-y4_sinema {
  background:
    repeating-linear-gradient(90deg,
      var(--y4-sinema-delik) 0 0.4rem, transparent 0.4rem 1.4rem) bottom / 100% 0.4rem no-repeat,
    radial-gradient(90% 70% at 50% 0%, var(--y4-sinema-katman), transparent 65%),
    linear-gradient(165deg, var(--y4-sinema-1), var(--y4-sinema-2));
}

/* — DJ: stüdyo. Ekolayzır yalnız alt köşede, silik. */
.y4-bolge-yan .tw-y4_djler {
  background:
    repeating-linear-gradient(90deg,
      var(--y4-dj-katman) 0 0.2rem, transparent 0.2rem 1.1rem) bottom / 60% 1.6rem no-repeat,
    linear-gradient(155deg, var(--y4-dj-1), var(--y4-dj-2));
}

/* Eski konumlandırma artefaktları: iç sarmallar artık zeminsiz. */
.y4-maclar::before, .y4-radyo::before { content: none; }

/* Yorum aç/kapa düğmesi ve "tümünü göster" — eylem satırıyla aynı dilde. */
.y4-yorum-ac { font-variant-numeric: tabular-nums; }
.y4-yorum-tumu {
  align-self: flex-start;
  border: 0;
  background: none;
  color: var(--y4-metin-2);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  cursor: pointer;
  padding: 0;
}
.y4-yorum-tumu:hover { color: var(--y4-vurgu); }
.y4-yorum-tumu:disabled { opacity: 0.6; cursor: default; }
.y4-yorum-sayi { font-weight: 700; }

/* ═══ MİSAFİR DAVETİ (akış altı) ═══
   ⚠ Sayfanın en ikna edici yeri: kullanıcı akışı okumuş, aşağı inmiştir.
   Bu yüzden kutu sayfadan ayrışır (kendi zemini) ama bağırmaz. */
.y4-davet {
  border-radius: var(--y4-yuvarlak-3);
  padding: var(--y4-bosluk-6) var(--y4-bosluk-5);
  background:
    radial-gradient(90% 120% at 50% -20%, var(--y4-radyo-katman-2), transparent 60%),
    linear-gradient(135deg, var(--y4-vurgu), var(--y4-vurgu-2));
  color: var(--y4-kimlik-metin);
  text-align: center;
}

.y4-davet-ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--y4-bosluk-3);
  max-inline-size: 34rem;
  margin-inline: auto;
}

.y4-davet-bas {
  margin: 0;
  font-size: var(--y4-yazi-buyuk);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.y4-davet-aciklama { margin: 0; font-size: var(--y4-yazi-kucuk); opacity: 0.9; }

.y4-davet-dugmeler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--y4-bosluk-3);
  margin-block-start: var(--y4-bosluk-2);
}

.y4-davet-dug {
  padding: var(--y4-bosluk-3) var(--y4-bosluk-6);
  border: 1px solid var(--y4-radyo-katman-3);
  border-radius: var(--y4-yuvarlak-3);
  color: var(--y4-kimlik-metin);
  font-weight: 750;
  text-decoration: none;
  transition: background var(--y4-gecis), transform var(--y4-gecis);
}

.y4-davet-dug:hover { background: var(--y4-radyo-katman-2); transform: translateY(-1px); }

.y4-davet-dug-ana {
  background: var(--y4-kimlik-metin);
  border-color: var(--y4-kimlik-metin);
  color: var(--y4-vurgu);
}

.y4-davet-dug-ana:hover { background: var(--y4-bant); color: var(--y4-vurgu-2); }

.y4-davet-alt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--y4-bosluk-2);
  font-size: var(--y4-yazi-kucuk);
  opacity: 0.9;
}

.y4-davet-alt a { color: var(--y4-kimlik-metin); text-decoration: underline; }
.y4-davet-alt a:hover { opacity: 0.8; }
.y4-bolge-ana .tw-y4_giris { padding: 0; background: none; border: 0; }
/* Google ile devam — alt satırdaki ikincil yol; düğme değil, bağlantı. */
.y4-davet-google { font-weight: 650; }

/* ── AKIŞ: KİŞİ EYLEMLERİ (arkadaş ekle · takip et) ──────────────────
   ⚠ Gönderi başlığının sağında, küçük ve sessiz: kartın konusu gönderi,
   bu düğmeler yan iş. Kendi gönderinde ve misafirde hiç basılmaz. */
.y4-gonderi-ust { justify-content: space-between; }
.y4-gonderi-kisi {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
  min-inline-size: 0;
  color: inherit;
  text-decoration: none;
}
.y4-kisi-eylem { display: flex; gap: var(--y4-bosluk-2); flex-shrink: 0; }
.y4-kisi-dug {
  padding: 2px var(--y4-bosluk-2);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  cursor: pointer;
  transition: border-color var(--y4-gecis), color var(--y4-gecis);
}
.y4-kisi-dug:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
.y4-kisi-dug:disabled { opacity: 0.6; cursor: default; }
.y4-kisi-oldu { color: var(--y4-olumlu); border-color: var(--y4-olumlu); }
/* İki kişi eylemi aynı iskelette; ayrım yalnız ikonda ve JS hedefinde. */
.y4-arkadas-ekle, .y4-takip-et { font-variant-emoji: text; }

/* Misafire yorum kutusu yerine giriş bağlantısı (yorumlar açıldığında). */
.y4-yorum-giris {
  align-self: flex-start;
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  text-decoration: none;
}
.y4-yorum-giris:hover { color: var(--y4-vurgu); }

/* ⚠ Dar ekranda hero vurgu bandı basılmaz: görselin yarısını kaplıyor ve
   kapağın kendi yazısıyla çakışıyor — başlık bandı altta zaten var. */
@media (max-width: 34rem) {
  .y4-hero-vurgu { display: none; }
  .y4-bugun-kart { aspect-ratio: 4 / 5; }
}

/* ══ BİLDİRİM & MESAJ PANELLERİ ═══════════════════════════════════════
   ⚠ SAYFA DEĞİL, PANEL. Zil ve zarf açılır kutu açar; adres değişmez.
   ⚠ Mobilde açılır kutu ekranı taşırdığı için tam genişliğe sabitlenir
     (sağdan taşma = yatay kaydırma = Selçuk'un "scroll çıkıyor" hatası). */
.y4-panel-sar { position: relative; display: inline-flex; }

.y4-panel {
  position: absolute;
  inset-block-start: calc(100% + var(--y4-bosluk-2));
  inset-inline-end: 0;
  inline-size: min(22rem, calc(100vw - var(--y4-bosluk-4)));
  max-block-size: min(28rem, 70vh);
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  background: var(--y4-yuzey);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  box-shadow: var(--y4-golge-2);
  z-index: 60;
  overflow: hidden;
}
.y4-panel

.y4-panel-ust {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border-block-end: 1px solid var(--y4-cizgi);
  background: var(--y4-yuzey-2);
}
.y4-panel-bas {
  flex: 1;
  min-inline-size: 0;
  font-weight: 600;
  font-size: var(--y4-yazi-orta);
  color: var(--y4-metin);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.y4-panel-oku, .y4-panel-kapat, .y4-panel-geri {
  flex: none;
  border: 0;
  background: none;
  color: var(--y4-metin-2);
  cursor: pointer;
  font-size: var(--y4-yazi-orta);
  line-height: 1;
  padding: var(--y4-bosluk-1);
  border-radius: var(--y4-yuvarlak-1);
  transition: var(--y4-gecis);
}
.y4-panel-oku:hover, .y4-panel-kapat:hover, .y4-panel-geri:hover {
  background: var(--y4-vurgu-hafif);
  color: var(--y4-metin);
}
.y4-panel-geri[hidden], .y4-panel-yaz

.y4-panel-govde {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.y4-panel-bos {
  display: block;
  padding: var(--y4-bosluk-5) var(--y4-bosluk-3);
  text-align: center;
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  text-decoration: none;
}
a.y4-panel-bos { color: var(--y4-vurgu); }

/* ── bildirim satırı ── */
.y4-bildirim {
  display: block;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border-block-end: 1px solid var(--y4-cizgi);
  color: var(--y4-metin);
  text-decoration: none;
  transition: var(--y4-gecis);
}
.y4-bildirim:hover { background: var(--y4-yuzey-2); }
.y4-bildirim-yeni { border-inline-start: 3px solid var(--y4-vurgu); }
.y4-bildirim-metin {
  display: block;
  font-size: var(--y4-yazi-kucuk);
  line-height: 1.4;
}
.y4-bildirim-alt {
  display: block;
  margin-block-start: var(--y4-bosluk-1);
  font-size: var(--y4-yazi-kucuk);
  color: var(--y4-metin-3);
}

/* ── konuşma satırı ── */
.y4-konusma {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  inline-size: 100%;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 0;
  border-block-end: 1px solid var(--y4-cizgi);
  background: none;
  color: var(--y4-metin);
  text-align: start;
  cursor: pointer;
  transition: var(--y4-gecis);
}
.y4-konusma:hover { background: var(--y4-yuzey-2); }
.y4-konusma-ic { flex: 1; min-inline-size: 0; }
.y4-konusma-ad {
  display: block;
  font-weight: 600;
  font-size: var(--y4-yazi-kucuk);
}
.y4-konusma-son {
  display: block;
  font-size: var(--y4-yazi-kucuk);
  color: var(--y4-metin-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.y4-konusma-rozet {
  flex: none;
  min-inline-size: 1.25rem;
  padding: 0 var(--y4-bosluk-1);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font-size: var(--y4-yazi-kucuk);
  text-align: center;
}

/* ── sohbet balonları ── */
.y4-msj {
  max-inline-size: 80%;
  margin: var(--y4-bosluk-2) var(--y4-bosluk-3);
  padding: var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin);
  font-size: var(--y4-yazi-kucuk);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.y4-msj-benim {
  margin-inline-start: auto;
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
}

/* ── yazma kutusu ── */
.y4-panel-yaz {
  display: flex;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-2);
  border-block-start: 1px solid var(--y4-cizgi);
  background: var(--y4-yuzey-2);
}
.y4-panel-alan {
  flex: 1;
  min-inline-size: 0;
  padding: var(--y4-bosluk-2);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
}
.y4-panel-gonder {
  flex: none;
  padding: 0 var(--y4-bosluk-3);
  border: 0;
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  cursor: pointer;
  transition: var(--y4-gecis);
}
.y4-panel-gonder:hover { background: var(--y4-vurgu-2); }

/* Panel açıkken düğme "basılı" görünür — hangi kutunun açık olduğu belli olsun.
   ⚠ Konumlandırma .y4-arac'ta zaten var, burada tekrarlanmaz. */
.y4-bildirim-dug[aria-expanded="true"],
.y4-mesaj-dug[aria-expanded="true"] {
  border-color: var(--y4-vurgu);
  color: var(--y4-vurgu);
}
/* Sohbet paneli listeden geniş: balonlar dar kutuda okunmuyor. */
.y4-mesaj-panel { inline-size: min(24rem, calc(100vw - var(--y4-bosluk-4))); }
/* Bildirimler kısa satırlar; gövdesi ayrıca boşluk almaz. */
.y4-bildirim-panel .y4-panel-govde { padding-block: 0; }

/* ═══ SAYFA İSKELETİ (ana sayfa dışındaki ~80 sayfa) ══════════════════
   ⚠ Bu bölüm parcalar.html'deki sayfa parçalarının karşılığı. Her sayfa
   kendi CSS'ini yazmaz; yazsaydı yudum3'teki 57 kopya kural tekrarlanırdı. */

.y4-sayfa-bas {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
}
.y4-kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-1);
  font-size: var(--y4-yazi-kucuk);
  color: var(--y4-metin-3);
}
.y4-kirinti a { color: var(--y4-metin-2); text-decoration: none; }
.y4-kirinti a:hover { color: var(--y4-vurgu); }

.y4-sayfa-baslik {
  margin: 0;
  /* ⚠ Akışkan: sabit px başlık dar ekranda satır taşırıyor. */
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  line-height: 1.15;
  color: var(--y4-metin);
}
.y4-sayfa-aciklama {
  margin: 0;
  /* ⚠⚠ 60ch SINIRI KALDIRILDI (17 Ağu 2026): özet başlığın yarısı kadar
     dar bir sütunda kalıyor, altındaki tam genişlik görselle hizasız
     duruyordu. Sayfa zaten yan sütunla daraltılmış — ikinci sınır fazla. */
  max-inline-size: none;
  /* ⚠ Özet SEO metnidir: sayfanın ikinci en önemli cümlesi. Soluk gri
     (metin-3) "dipnot" gibi duruyordu. Başlıktan bir ton düşük, ama
     hâlâ koyu ve okunur. */
  color: var(--y4-metin-2);
  font-size: 1.12rem;
  font-weight: 450;
  line-height: 1.55;
}
.y4-sayfa-sayi {
  align-self: start;
  padding: var(--y4-bosluk-1) var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
}

/* ── liste sayfası kartı: görselsiz de basılır ── */
.y4-kart-sayfa {
  display: flex;
  flex-direction: column;
  background: var(--y4-yuzey);
  border: 1px solid var(--y4-kart-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--y4-gecis), transform var(--y4-gecis);
}
.y4-kart-sayfa:hover { border-color: var(--y4-vurgu); }
.y4-kart-sayfa .y4-kart-medya {
  display: block;
  /* Kapak oranı sabit; yükseklik akışkan değil ki ızgara satırları
     birbirini bozmasın (ölçüldü: oranla kırpınca kart genişliği kayıyor). */
  block-size: clamp(7rem, 18vw, 10rem);
  background: var(--y4-yuzey-2);
}
.y4-kart-sayfa .y4-kart-gorsel {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* ⚠ ÜRETİLMİŞ KAPAK (başlık görselin İÇİNDE): kırpılınca yazı kesiliyor.
   Gerçek fotoğrafta `cover` doğru (çerçeveyi doldurur), yazılı kapakta
   `contain` şart. Ayrımı kart çevirici yapıyor (Yazili bayrağı). */
.y4-kart-yazili .y4-kart-gorsel { object-fit: contain; background: var(--y4-yuzey-2); }
.y4-kart-sayfa .y4-kart-ic {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-1);
  min-inline-size: 0;
  padding: var(--y4-bosluk-3);
}
/* Görselsiz kart: yazı nefes alsın, kutu boş görünmesin. */
.y4-kart-yazi .y4-kart-ic { padding-block: var(--y4-bosluk-4); }
.y4-kart-yazi { background: var(--y4-yuzey-2); }

/* ── sayfalama ── */
.y4-sayfalama {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--y4-bosluk-2);
  padding-block: var(--y4-bosluk-3);
}
.y4-sayfalama-dug {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
  font-size: var(--y4-yazi-kucuk);
  transition: var(--y4-gecis);
}
a.y4-sayfalama-dug:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
.y4-sayfalama-pasif { opacity: 0.4; }
.y4-sayfalama-no { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }


/* ── detay gövdesi ──
   ⚠ Okuma genişliği sınırlı (65ch): tam genişlik metin satır sonunu
   kaybettiriyor. Ölçü karakterle, px ile değil. */
.y4-detay { display: flow-root; }
/* ⚠⚠ KAPAK SOLA, YAZI ETRAFINDAN AKSIN (17 Ağu 2026, Selçuk: "sola alıp
   yazıyı yukarı çekmeyi, resmi sarmasını beceremedin mi"):
   1) `cover` idi → portrede kafayı kesiyordu;
   2) `contain` yaptım → bu sefer ortada dar görsel, iki yanında koca
      boşluk kaldı ve metin görselin ALTINDAN başlıyordu.
   Doğrusu klasik makale düzeni: kapak sola yaslanır, metin sağından akar
   ve boşluk kalmaz. Görselin tamamı görünür (kırpma yok).
   ⚠ `flow-root`: float'ın kapsayıcıdan taşmasını engeller (clearfix). */
/* ⚠⚠ FLOAT KALDIRILDI (17 Ağu 2026, Selçuk: "haber detay sayfası da mı
   böyle? Başlık - özet + resim + tam yazıdır"): kapağı sola yaslayıp metni
   sardırmak KİMDİR gibi ansiklopedik sayfada iş görüyor, HABERDE görmüyor —
   haberin düzeni bellidir: başlık, özet, tam genişlik görsel, yazı.
   ⚠ Bir sayfada doğru olan başka sayfada yanlış olabilir: ortak parçayı
   her yere aynı dayatmak bu hatanın kaynağıydı. Sarmalı düzen isteyen
   sayfa `.y4-detay-sarmal` sınıfını kendi ekler. */
.y4-detay-medya {
  margin: 0 0 var(--y4-bosluk-4);
}
/* Sarmalı düzen — yalnız isteyen sayfa (kimdir gibi) açar. */
.y4-detay-sarmal .y4-detay-medya {
  float: inline-start;
  inline-size: min(18rem, 38%);
  margin: 0 var(--y4-bosluk-4) var(--y4-bosluk-3) 0;
}
@media (max-width: 40rem) {
  .y4-detay-sarmal .y4-detay-medya {
    float: none;
    inline-size: 100%;
    margin: 0 0 var(--y4-bosluk-3);
  }
}
.y4-detay-medya img {
  /* ⚠⚠ KIRPMA YOK (17 Ağu 2026, Selçuk: "resimleri kes kes, ortalıkta
     anlaşılır bir şey yok"): `cover` görseli çerçeveye zorla oturtuyor ve
     portrede KAFAYI KESİYOR. Kimdir sayfasında kişinin yüzü yarıydı.
     Artık görselin tamamı görünür; artan yer zeminle dolar. Yükseklik de
     düşürüldü — dev kapak metni ekrandan itiyordu. */
  /* ⚠⚠ YÜKSEKLİK SINIRI ŞART (17 Ağu 2026): kırpmayı kaldırınca bu sefer
     kare/dikey kapaklar ekranı boydan boya kapladı — yazıya ulaşmak için
     bir ekran kaydırmak gerekiyordu. Kırpma YOK ama yükseklik sınırlı:
     görsel kendi oranını korur, tavana değince genişlik kendiliğinden
     küçülür ve ORTALANIR. */
  /* ⚠⚠ SON KARAR — HABER KAPAĞI 16/9 VE DOLU (17 Ağu 2026): üç deneme
     yapıldı ve üçü de yanlıştı:
       1) cover + sabit yükseklik → portrede kafa kesiliyordu;
       2) contain + auto yükseklik → kare kapak ekranı boydan boya kaplıyordu;
       3) contain + tavan → görsel ortada küçük kaldı, kabın İKİ YANI BOŞ
          GRİ göründü (ekran görüntüsüyle sabit).
     Haber kapağı yatay bir alandır: kap 16/9, görsel onu DOLDURUR. Kırpma
     kenarlardan olur, kapağın odağı ortadadır.
     ⚠ Portre/ansiklopedik görseller için `.y4-detay-sarmal` düzeni var —
     orada kırpma yok. Her sayfa kendi düzenini seçer. */
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}
.y4-detay-medya {
  aspect-ratio: 16 / 9;
  max-block-size: 26rem;
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  background: var(--y4-yuzey-2);
}
/* Sarmalı (kimdir) düzende oran dayatılmaz: portre kendi boyunda kalır. */
.y4-detay-sarmal .y4-detay-medya { aspect-ratio: auto; }
.y4-detay-sarmal .y4-detay-medya img { block-size: auto; object-fit: contain; }
.y4-detay-govde {
  /* ⚠⚠ OKUMA GENİŞLİĞİ SINIRI YOK (17 Ağu 2026): ana sütun zaten yan
     sütunla daraltılıyor; buraya ikinci bir sınır koyunca metin ortada
     sıkışıp sağda koca boşluk kalıyordu. Buraya `max-inline-size` yazma. */
  color: var(--y4-metin);
  font-size: var(--y4-yazi-orta);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.y4-detay-govde h2, .y4-detay-govde h3 {
  margin-block: var(--y4-bosluk-5) var(--y4-bosluk-2);
  line-height: 1.25;
}
.y4-detay-govde p { margin-block: 0 var(--y4-bosluk-3); }
.y4-detay-govde a { color: var(--y4-vurgu); }
.y4-detay-govde img {
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--y4-yuvarlak-1);
}
.y4-detay-govde ul, .y4-detay-govde ol { padding-inline-start: var(--y4-bosluk-5); }
.y4-detay-govde li { margin-block-end: var(--y4-bosluk-2); }
.y4-detay-govde blockquote {
  margin: 0 0 var(--y4-bosluk-3);
  padding-inline-start: var(--y4-bosluk-3);
  border-inline-start: 3px solid var(--y4-vurgu);
  color: var(--y4-metin-2);
}
/* Geniş içerik (tablo, kod) SAYFAYI değil kendini kaydırsın. */
.y4-detay-govde table, .y4-detay-govde pre {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
}

/* ── etiketler ── */
.y4-etiketler { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }
.y4-etiket {
  padding: var(--y4-bosluk-1) var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  text-decoration: none;
  font-size: var(--y4-yazi-kucuk);
}
.y4-etiket:hover { color: var(--y4-vurgu); }

/* ── BENZER İÇERİK (detay sayfası yan sütunu) ─────────────────────────
   ⚠ Küçük kapak + iki satır başlık. Kapak sabit kare: farklı oranlardaki
   görseller satırları birbirine göre kaydırıyordu. */
.y4-benzer { display: flex; flex-direction: column; }
.y4-benzer-sat {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-2) 0;
  border-block-end: 1px solid var(--y4-cizgi);
  color: var(--y4-metin);
  text-decoration: none;
  transition: var(--y4-gecis);
}
.y4-benzer-sat:last-child { border-block-end: 0; }
.y4-benzer-sat:hover { color: var(--y4-vurgu); }
.y4-benzer-medya {
  flex: none;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: var(--y4-yuvarlak-1);
  overflow: hidden;
  background: var(--y4-yuzey-2);
}
.y4-benzer-medya img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.y4-benzer-bas {
  min-inline-size: 0;
  font-size: var(--y4-yazi-kucuk);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Görselsiz satır: başlık tek başına kalınca sola yapışmasın. */
.y4-benzer-yazi { padding-inline-start: var(--y4-bosluk-1); }

/* ── ARAMA KUTUSU (arama sayfası) ─────────────────────────────────────
   ⚠ Üst çubuktaki arama ile aynı jetonlar; ayrı bir görünüm yaratılmadı. */
.y4-ara-form {
  display: flex;
  gap: var(--y4-bosluk-2);
  max-inline-size: 34rem;
}
.y4-ara-alan {
  flex: 1;
  min-inline-size: 0;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  font: inherit;
}
.y4-ara-dug {
  flex: none;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 0;
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font: inherit;
  cursor: pointer;
  transition: var(--y4-gecis);
}
.y4-ara-dug:hover { background: var(--y4-vurgu-2); }

/* ═══ DETAY SAYFASI PARÇALARI ═════════════════════════════════════════ */

/* Künye — tarif/isim/yapım gibi sayfalarda "Süre · Porsiyon · Köken".
   ⚠ SARAR: dar ekranda tek satırda tutmaya çalışmak taşma üretiyordu. */
.y4-kunye {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-4);
  margin: 0;
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey-2);
  font-size: var(--y4-yazi-kucuk);
  color: var(--y4-metin-2);
}
.y4-kunye span { display: flex; flex-direction: column; gap: 0.15rem; }
.y4-kunye b { color: var(--y4-metin-3); font-weight: 600; font-size: var(--y4-yazi-kucuk); }

.y4-detay-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-3);
  padding-block: var(--y4-bosluk-2);
  border-block-end: 1px solid var(--y4-cizgi);
  /* ⚠ Tarih ve okunma soluktu, ekranda seçilmiyordu: künye taban rengi
     ana metne çekildi, tarih/okunma yarı kalın. */
  color: var(--y4-metin);
  font-size: var(--y4-yazi-kucuk);
}
.y4-detay-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--y4-metin);
  font-weight: 550;
}
.y4-detay-meta > span a { color: var(--y4-vurgu); }
.y4-kaynak { margin: 0; color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-kaynak a { color: var(--y4-vurgu); }

/* Şiir: satır sonları anlamın parçası. */
.y4-siir { white-space: pre-wrap; }

/* ── puan kutusu ── */
.y4-puan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-3);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-puan-bas { font-weight: 600; color: var(--y4-metin); }
.y4-puan-yildizlar { display: flex; gap: 0.15rem; }
.puan-yildiz {
  border: 0;
  background: none;
  color: var(--y4-metin-3);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color var(--y4-gecis), scale var(--y4-gecis);
}
.puan-yildiz:hover { scale: 1.15; }
.puan-yildiz.dolu { color: var(--y4-uyari); }
.y4-puan-ozet { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-puan-ozet .puan-deger { color: var(--y4-metin); }
.y4-puan-mesaj { color: var(--y4-olumlu); font-size: var(--y4-yazi-kucuk); }
.y4-puan-mesaj.hata { color: var(--y4-olumsuz); }
/* Oyu geri çekme yalnız oy verilmişse anlamlı; betik gizler/gösterir. */
.y4-puan-sil {
  margin-inline-start: auto;
  border: 0;
  background: none;
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  cursor: pointer;
  text-decoration: underline;
}

/* ── YORUMLAR — TEK MOTOR ─────────────────────────────────────────────
   ⚠⚠ İÇERİĞİ /varlik/yorum.js ÇİZER ve kendi <style>'ını enjekte eder.
   O dosyadaki renkler artık `var(--yrm-*, eski değer)` biçiminde; burada
   YALNIZ JETON EŞLEMESİ yapıyoruz. Yorumlar için ikinci bir CSS yazmıyoruz
   (Selçuk, 17 Ağu 2026: "ayrı ayrı CSS yazmak değil, tek motorla kurtarmak").
   Açık/koyu ayrımı da kendiliğinden gelir: jetonlar zaten moda göre değişir. */
.y4-yorum-bolum {
  --yrm-vurgu: var(--y4-vurgu);
  --yrm-vurgu2: var(--y4-vurgu-2);
  --yrm-vurgu-zit: var(--y4-vurgu-zit);
  --yrm-vurgu-hafif: var(--y4-vurgu-hafif);
  --yrm-vurgu-cizgi: var(--y4-cizgi);
  --yrm-soluk: var(--y4-metin-3);
  --yrm-cizgi: var(--y4-cizgi);
  --yrm-zemin: var(--y4-zemin);
  --yrm-yuzey: var(--y4-yuzey);
  --yrm-teh: var(--y4-olumsuz);
  --yrm-teh-zemin: var(--y4-yuzey-2);

  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-3);
}
/* Kabuk: yorum listesi de sayfanın kart diliyle aynı yüzeyde dursun. */
.y4-yorumlar {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
/* ⚠⚠ YERLEŞİM: "İşlemler" ve "Bildir" alt alta duruyordu (Selçuk: "neden
   yan yana değil"). Yorum gövdesi SATIR AKIŞLI bir kap: nick+tarih ilk
   satır, metin tam genişlik, eylemler tek satırda yan yana.
   ⚠ Sıra `order` ile: metin 1, eylemler 2 — DOM sırası ne olursa olsun
   görünüm aynı kalır (yorum.js düğmeleri sonradan ekliyor). */
.yrm-item > div:last-child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--y4-bosluk-1) var(--y4-bosluk-3);
  min-inline-size: 0;
  flex: 1;
}
.yrm-nick, .yrm-tarih { order: 0; }
.yrm-metin { order: 1; flex-basis: 100%; }
.yrm-mod, .yrm-ey-satir { order: 2; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--y4-bosluk-2); }
.yrm-yanitlar { order: 3; flex-basis: 100%; padding-inline-start: var(--y4-bosluk-4); border-inline-start: 2px solid var(--y4-cizgi); }
/* Beğen düğmesi dolu hâli — sayaç hizalı dursun. */
.yrm-begen.dolu { color: var(--y4-vurgu); }
.yrm-begen-sayi { font-variant-numeric: tabular-nums; }
.yrm-yanit { padding-block: var(--y4-bosluk-2); }
.yrm-yanit-form { flex-basis: 100%; margin-block-start: var(--y4-bosluk-2); }

/* ── önceki / sonraki ── */
.y4-gezinme {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-3);
}
.y4-gezinme-dug {
  flex: 1 1 14rem;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-1);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
  transition: var(--y4-gecis);
}
.y4-gezinme-dug:hover { border-color: var(--y4-vurgu); }
.y4-gezinme-sag { text-align: end; }
/* ⚠⚠ OKUNMUYORDU (17 Ağu 2026, Selçuk defalarca aynı ekranı attı):
   yön etiketi ve başlık ikisi de soluk gri, küçük punto ve kart zeminiyle
   neredeyse aynı tondaydı. Yön vurgu rengiyle, başlık ANA METİN rengiyle
   ve normal punto ile basılır. */
.y4-gezinme-yon {
  color: var(--y4-vurgu);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
}
.y4-gezinme-bas {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--y4-metin);
  font-size: var(--y4-yazi-orta);
  font-weight: 600;
  line-height: 1.35;
}
.y4-gezinme-dug:hover .y4-gezinme-bas { color: var(--y4-vurgu); }

/* ── içindekiler (özel sayfa) ── */
.y4-icindekiler { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }
.y4-icindekiler a {
  padding: var(--y4-bosluk-1) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  color: var(--y4-metin-2);
  text-decoration: none;
  font-size: var(--y4-yazi-kucuk);
}
.y4-icindekiler a:hover { color: var(--y4-vurgu); border-color: var(--y4-vurgu); }
.y4-sayfa-bolum { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); }

/* ── adım adım (nasıl yapılır) ── */
.y4-adimlar { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); margin: 0; padding-inline-start: var(--y4-bosluk-5); }
.y4-adim { display: flex; flex-direction: column; gap: var(--y4-bosluk-1); }
.y4-adim-bas { color: var(--y4-metin); }
.y4-adim-metin { color: var(--y4-metin-2); line-height: 1.6; }
.y4-adim-ipucu { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-gerekenler { margin: 0; padding-inline-start: var(--y4-bosluk-5); color: var(--y4-metin-2); }
.y4-gerekenler li { margin-block-end: var(--y4-bosluk-1); }

/* ═══ TEST SAYFASI ════════════════════════════════════════════════════
   ⚠ ts-* SINIFLARI KANCADIR: /varlik/t-test-1.js onları arıyor. Görünüm
   y4-* sınıflarından gelir; ts-* yalnız davranış için duruyor ve buradaki
   kuralları en aza indirilmiştir (adları değiştirme). */
.y4-test-kapak {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--y4-yuvarlak-3);
  overflow: hidden;
  background: var(--y4-yuzey-2);
}
.ts-kapak-gorsel {
  inline-size: 100%;
  block-size: clamp(10rem, 30vw, 20rem);
  object-fit: cover;
}
.y4-test-kapak-ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-4);
}
.y4-test-rozet { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-test-basla {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-5);
  border: 0;
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.y4-test-not { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }

.y4-test { display: flex; flex-direction: column; gap: var(--y4-bosluk-4); }
.y4-test-ilerleme {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
}
.y4-test-cubuk {
  flex: 1;
  block-size: 0.4rem;
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-vurgu);
  transition: inline-size var(--y4-gecis);
}
.y4-test-sayac { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-test-akis { display: flex; flex-direction: column; gap: var(--y4-bosluk-4); }
.y4-test-soru { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); }
.y4-test-soru-metin { margin: 0; font-size: var(--y4-yazi-buyuk); line-height: 1.3; }
/* Şıklar: dar ekranda alt alta, geniş ekranda ikişerli — kendiliğinden. */
.y4-test-siklar {
  display: grid;
  gap: var(--y4-bosluk-2);
  grid-template-columns: repeat(auto-fit, minmax(max(14rem, (100% - var(--y4-bosluk-2)) / 2), 1fr));
}
.y4-test-sik {
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: var(--y4-gecis);
}
.y4-test-sik:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
/* Kanca sınıfları — davranış için; görünümü y4-* taşıyor. */
.ts-kapak, .ts-kapak-ust, .ts-rozet, .ts-btn, .ts-basla, .ts-sarmal,
.ts-akis, .ts-ilerleme, .ts-cubuk, .ts-sayac, .ts-soru, .ts-soru-metin,
.ts-siklar, .ts-sik, .ts-uye-not, .ts-sonuc-ust, .ts-sonuc-kart,
.ts-cozmedin { box-sizing: border-box; }

/* ── test sonucu ── */
.y4-sonuc {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-5);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  border: 1px solid var(--y4-cizgi);
}
.y4-sonuc-etiket { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-sonuc-ad { margin: 0; font-size: clamp(1.4rem, 1rem + 2vw, 2rem); color: var(--y4-vurgu); }
.y4-sonuc-metin { margin: 0; color: var(--y4-metin-2); line-height: 1.6; }

.y4-hedef {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
}
.y4-hedef:hover { border-color: var(--y4-vurgu); }
.y4-hedef-gorsel {
  flex: none;
  inline-size: 5rem;
  block-size: 5rem;
  object-fit: cover;
  border-radius: var(--y4-yuvarlak-1);
}
/* ⚠ Burçların görseli YOK; Unicode sembol büyük basılır (çapa görevi). */
.y4-hedef-sembol { flex: none; font-size: 3rem; line-height: 1; color: var(--y4-vurgu); }
.y4-hedef-ic { display: flex; flex-direction: column; gap: var(--y4-bosluk-1); min-inline-size: 0; }
.y4-hedef-ad { font-size: var(--y4-yazi-orta); }
.y4-hedef-metin, .y4-hedef-gunluk { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); line-height: 1.5; }

.y4-paylas-satir { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }
.y4-paylas-dug {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  font: inherit;
  cursor: pointer;
  transition: var(--y4-gecis);
}
.y4-paylas-dug:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }

/* ── tek video (video detay) ── */
.y4-video-tek {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  background: var(--y4-yuzey-2);
  cursor: pointer;
}
.y4-video-tek > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.y4-video-tek iframe { inline-size: 100%; block-size: 100%; border: 0; }

/* ── puanlama kanca sınıfları ── */
.puan-kutu { box-sizing: border-box; }
.puan-adet, .puan-mesaj, .puan-sil { font-size: var(--y4-yazi-kucuk); }

/* ═══ SOSYAL: PROFİL · AKIŞ · GRUPLAR ════════════════════════════════
   ⚠ Yerleşim onaylı taslaktan (web/static/tema-profil.html); DEĞERLER
   buranın jetonlarından — taslağın kendi renk değişkenleri kopyalanmadı. */

/* KAPAK — ⚠ fotoğraf alanı YOK; renk kişiye göre kararlı üretilir.
   Sabit bir gradyan herkese aynı kapağı verirdi. */
/* ⚠⚠ KAPAK ARTIK ZEMİN, BOŞ BLOK DEĞİL (17 Ağu 2026): önce ayrı bir renk
   bloğuydu ve altında avatar/bilgiler duruyordu — kutu hiçbir işe
   yaramıyor, ekranın üçte birini yiyordu. Şimdi kimliğin tamamı bu zeminin
   ÜSTÜNDE: avatar, ad, sayılar, düğmeler.
   ⚠ Kapak fotoğrafı YOK (veride alan yok); marka gradyanı kullanılıyor.
   ⚠ Yazı rengi perde metni: gradyan iki modda da koyu. */
.y4-profil-ust {
  position: relative;
  overflow: hidden;
  padding: var(--y4-bosluk-5);
  border-radius: var(--y4-yuvarlak-3);
  background:
    radial-gradient(circle at 82% 18%, var(--y4-perde-yok), transparent 55%),
    linear-gradient(115deg, var(--y4-vurgu), var(--y4-vurgu-2));
  color: var(--y4-perde-metin);
}

.y4-kimlik {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-4);
  align-items: flex-end;
  /* Kimlik kapak zemininin İÇİNDE; taşma/negatif marj yok. */
  margin: 0;
}
.y4-kimlik-av {
  flex: none;
  inline-size: clamp(5.5rem, 14vw, 8.25rem);
  block-size: clamp(5.5rem, 14vw, 8.25rem);
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--y4-zemin);
  background: var(--y4-yuzey-2);
  box-shadow: var(--y4-golge-2);
  display: grid;
  place-items: center;
}
.y4-kimlik-av img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.y4-kimlik-harf {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--y4-vurgu);
}
.y4-kimlik-yazi { flex: 1 1 16rem; min-inline-size: 0; }
.y4-kimlik-ad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--y4-bosluk-2); }
.y4-kimlik-ad h1 { margin: 0; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); }
.y4-unvan {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: var(--y4-bosluk-1) var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-vurgu-hafif);
  color: var(--y4-vurgu);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
}
.y4-kimlik-nick { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-sayilar { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-4); margin-block-start: var(--y4-bosluk-2); }
.y4-sayilar div { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-sayilar b { color: var(--y4-metin); font-size: var(--y4-yazi-orta); font-weight: 800; }
.y4-kimlik-eylem { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); align-items: center; }

.y4-dug {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--y4-gecis);
}
.y4-dug:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
.y4-dug-ana {
  background: var(--y4-vurgu);
  border-color: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
}
.y4-dug-ana:hover { background: var(--y4-vurgu-2); color: var(--y4-vurgu-zit); }

.y4-bio { margin: 0; max-inline-size: 70ch; line-height: 1.65; color: var(--y4-metin); }
.y4-bio-alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-4);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
}
.y4-bio-alt a { color: var(--y4-vurgu); }


.y4-profil-duzen { display: grid; gap: var(--y4-bosluk-5); grid-template-columns: 1fr; }
@media (min-width: 62rem) {
  .y4-profil-duzen { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}
.y4-profil-ana, .y4-profil-yan { display: flex; flex-direction: column; gap: var(--y4-bosluk-4); min-inline-size: 0; }

.y4-kutu {
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-kutu h3 { margin: 0 0 var(--y4-bosluk-3); font-size: var(--y4-yazi-orta); }
.y4-kutu-metin { margin: 0; color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-rozetler { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }
.y4-rozet {
  padding: var(--y4-bosluk-1) var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
}
.y4-grup-listesi { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
.y4-grup-listesi a { color: var(--y4-metin); text-decoration: none; font-size: var(--y4-yazi-kucuk); }
.y4-grup-listesi a:hover { color: var(--y4-vurgu); }
.y4-grup-listesi span { color: var(--y4-metin-3); }

/* ── gönderi kartı (akış · profil · tek gönderi) ── */
.y4-akis-liste { display: flex; flex-direction: column; gap: var(--y4-bosluk-4); }
.y4-gonderi {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  box-shadow: var(--y4-golge-1);
}
.y4-gonderi-ust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--y4-bosluk-2); }
.y4-gonderi-kim { display: flex; align-items: center; gap: var(--y4-bosluk-2); color: inherit; text-decoration: none; min-inline-size: 0; }
.y4-gonderi-kim-ic { display: flex; flex-direction: column; min-inline-size: 0; }
.y4-gonderi-nick, .y4-gonderi-zaman { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
/* Zaman damgası bağlantı: altı çizili değil, üstüne gelince belirginleşir. */
a.y4-gonderi-zaman { text-decoration: none; }
a.y4-gonderi-zaman:hover { color: var(--y4-vurgu); }
.y4-gonderi-grup {
  margin-inline-start: auto;
  padding: var(--y4-bosluk-1) var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  text-decoration: none;
  font-size: var(--y4-yazi-kucuk);
}
.y4-gonderi-metin { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.y4-gonderi-medya { border-radius: var(--y4-yuvarlak-2); overflow: hidden; }
.y4-gonderi-medya img, .y4-gonderi-medya video {
  inline-size: 100%;
  max-block-size: 26rem;
  object-fit: cover;
  display: block;
}
.y4-gonderi-eylem {
  display: flex;
  gap: var(--y4-bosluk-5);
  padding-block-start: var(--y4-bosluk-2);
  border-block-start: 1px solid var(--y4-cizgi);
}
.y4-gonderi-eylem button, .y4-gonderi-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: none;
  color: var(--y4-metin-2);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}
.y4-gonderi-eylem button:hover, .y4-gonderi-link:hover { color: var(--y4-vurgu); }
.y4-begendim { color: var(--y4-canli); }
/* ⚠⚠ VARSAYILAN GİZLİ (17 Ağu 2026): `hidden` özniteliğine güvenmek
   kırılgan çıktı — `display:flex` onu eziyordu, ağırlık düzeltmesi de
   tarayıcı önbelleğine takıldı. Artık MANTIK TERS: kutu varsayılan olarak
   yok; yalnız `hidden` KALKINCA görünür. Böylece hangi kural sonra gelirse
   gelsin kapalı başlar. */
/* ⚠ Sınıf adı wasm sözleşmesi: .y4-yorumlar (akış widget'ıyla ortak). */
.y4-yorumlar { display: none; }
.y4-yorumlar:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
}
.y4-yorum { font-size: var(--y4-yazi-kucuk); color: var(--y4-metin-2); overflow-wrap: anywhere; }
.y4-yorum b { color: var(--y4-metin); }
.y4-yorum-yaz { display: flex; gap: var(--y4-bosluk-2); }
.y4-yorum-alan {
  flex: 1;
  min-inline-size: 0;
  padding: var(--y4-bosluk-2);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
}
.y4-yorum-gonder {
  border: 0;
  border-radius: var(--y4-yuvarlak-1);
  padding-inline: var(--y4-bosluk-3);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font: inherit;
  cursor: pointer;
}
.y4-yorum-giris { color: var(--y4-vurgu); font-size: var(--y4-yazi-kucuk); }

/* ── paylaşım kutusu ── */
.y4-paylas {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-paylas-alan {
  inline-size: 100%;
  padding: var(--y4-bosluk-2);
  border: 0;
  background: none;
  color: var(--y4-metin);
  font: inherit;
  resize: vertical;
}
.y4-paylas-gonder {
  margin-inline-start: auto;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 0;
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font: inherit;
  cursor: pointer;
}

/* ── gruplar ── */
.y4-satir-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--y4-bosluk-3); }
.y4-grup-izgara {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(auto-fit, minmax(max(15rem, (100% - 2 * var(--y4-bosluk-3)) / 3), 1fr));
}
.y4-grup-kart {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
  transition: var(--y4-gecis);
}
.y4-grup-kart:hover { border-color: var(--y4-vurgu); }
.y4-grup-ic { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
.y4-grup-oz, .y4-grup-uye { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-grup-oz {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.y4-duyuru {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-3);
  border-inline-start: 3px solid var(--y4-vurgu);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
}
.y4-duyuru-kim { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-olaylar { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
.y4-olay {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey);
}
.y4-olay-tarih { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }

/* ── kişi listeleri ── */
.y4-kisi-izgara {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(auto-fit, minmax(max(12rem, (100% - 3 * var(--y4-bosluk-3)) / 4), 1fr));
}
.y4-kisi {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
}
.y4-kisi:hover { border-color: var(--y4-vurgu); }
.y4-kisi-ic { display: flex; flex-direction: column; min-inline-size: 0; gap: 0.1rem; }
.y4-kisi-nick { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-kisi-eylem { margin-inline-start: auto; display: flex; gap: var(--y4-bosluk-1); }

/* ── mesajlar sayfası ── */
.y4-msj-duzen { display: grid; gap: var(--y4-bosluk-4); grid-template-columns: 1fr; }
@media (min-width: 55rem) {
  .y4-msj-duzen { grid-template-columns: 18rem minmax(0, 1fr); align-items: start; }
}
/* ⚠ Dar ekranda İKİSİ BİRDEN görünmez: konuşma seçiliyse sohbet, değilse
   liste. İkisini sıkıştırmak ikisini de okunmaz yapıyordu. */
@media (max-width: 54.99rem) {
  .y4-msj-acik .y4-msj-liste { display: none; }
}
.y4-msj-liste {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  overflow: hidden;
}
.y4-msj-liste .y4-konusma { text-decoration: none; }
.y4-konusma-ak { background: var(--y4-yuzey-2); }
.y4-msj-sohbet {
  display: flex;
  flex-direction: column;
  min-block-size: 24rem;
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  overflow: hidden;
}
.y4-msj-bas {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-3);
  border-block-end: 1px solid var(--y4-cizgi);
  background: var(--y4-yuzey-2);
}
.y4-msj-bas a { color: var(--y4-metin); text-decoration: none; }
.y4-msj-geri { font-size: 1.4rem; line-height: 1; color: var(--y4-metin-2); }
@media (min-width: 55rem) { .y4-msj-geri { display: none; } }
.y4-msj-govde { flex: 1; min-block-size: 0; overflow-y: auto; padding-block: var(--y4-bosluk-2); }
.y4-msj-yaz {
  display: flex;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-2);
  border-block-start: 1px solid var(--y4-cizgi);
  background: var(--y4-yuzey-2);
}
.y4-msj-not { margin: 0; padding: var(--y4-bosluk-3); color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-nokta {
  display: inline-block;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 50%;
  background: var(--y4-olumlu);
}

/* ── form ── */
.y4-form {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-3);
  max-inline-size: 34rem;
}
.y4-form-alan { display: flex; flex-direction: column; gap: var(--y4-bosluk-1); }
.y4-form-alan > span { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-form-alan input, .y4-form-alan textarea, .y4-form-alan select {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  font: inherit;
}
.y4-form .y4-dug { align-self: start; }
.y4-hata {
  margin: 0;
  padding: var(--y4-bosluk-3);
  border-inline-start: 3px solid var(--y4-olumsuz);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  color: var(--y4-olumsuz);
}

/* ── eylem düğmesi kancaları (davranış wasm'da) ──
   ⚠ Bu sınıflar wasm tarafından okunuyor; görünümleri .y4-dug'dan gelir,
   burada yalnız duruma özel farklar var. */
.y4-takip-dug[data-durum="1"], .y4-arkadas-dug[data-durum="arkadas"] {
  background: var(--y4-yuzey-2);
  border-color: var(--y4-cizgi);
  color: var(--y4-metin-2);
}
.y4-grup-katil, .y4-grup-onay { cursor: pointer; }
.y4-grup-ret { color: var(--y4-olumsuz); }
.y4-begeni-sayi { font-variant-numeric: tabular-nums; }

/* ── moderasyon / sahip eylemleri (gönderi kartı) ─────────────────────
   ⚠ Sessiz durur: kırmızı düğme yığını içeriği bastırıyordu. Küçük, gri,
   üstüne gelince belirginleşir. Silme rengi ayrı — geri dönüşü yok. */
.y4-mod-satir { display: flex; }
.y4-mod-satir form { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }
.y4-mod-dug {
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: none;
  color: var(--y4-metin-3);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  padding: var(--y4-bosluk-1) var(--y4-bosluk-2);
  cursor: pointer;
  transition: var(--y4-gecis);
}
.y4-mod-dug:hover { color: var(--y4-metin); border-color: var(--y4-vurgu); }
.y4-mod-sil:hover { color: var(--y4-olumsuz); border-color: var(--y4-olumsuz); }

/* ═══ HESAP SAYFALARI (giriş · kayıt · şifre · aktivasyon) ═══════════
   ⚠ Dar ve ortalanmış: tek işi olan sayfada geniş düzen dikkat dağıtıyor. */
.y4-hesap {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-4);
  inline-size: 100%;
  max-inline-size: 26rem;
  margin-inline: auto;
  padding: var(--y4-bosluk-5);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
  box-shadow: var(--y4-golge-1);
}
.y4-hesap-bas { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
.y4-hesap-bas h1 { margin: 0; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); }
.y4-hesap-bas p { margin: 0; color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-hesap .y4-form { max-inline-size: none; }
.y4-hesap .y4-dug-ana { align-self: stretch; text-align: center; }
.y4-hesap-not { margin: 0; color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-hesap-alt {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
  padding-block-start: var(--y4-bosluk-3);
  border-block-start: 1px solid var(--y4-cizgi);
}
.y4-hesap-alt a { color: var(--y4-vurgu); text-decoration: none; font-size: var(--y4-yazi-kucuk); }
.y4-hesap-alt a:hover { text-decoration: underline; }
/* "veya" ayracı — iki yanında çizgi. */
.y4-hesap-ayrac {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
}
.y4-hesap-ayrac::before, .y4-hesap-ayrac::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--y4-cizgi);
}
.y4-google { text-align: center; }
.y4-kural { display: flex; gap: var(--y4-bosluk-2); align-items: flex-start; font-size: var(--y4-yazi-kucuk); color: var(--y4-metin-2); }
.y4-kural a { color: var(--y4-vurgu); }
.y4-serit {
  margin: 0;
  padding: var(--y4-bosluk-3);
  border-inline-start: 3px solid var(--y4-vurgu);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
}
.y4-serit-hata { border-inline-start-color: var(--y4-olumsuz); color: var(--y4-olumsuz); }
.y4-oneriler { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); align-items: center; font-size: var(--y4-yazi-kucuk); color: var(--y4-metin-3); }
.y4-oneri {
  padding: var(--y4-bosluk-1) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  cursor: pointer;
}
.y4-oneri:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
.y4-ipuclari { margin: 0; padding-inline-start: var(--y4-bosluk-5); color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }


/* ⚠ Geri alınamaz işlem: kırmızı çerçeve + ayrı düğme rengi. */
.y4-tehlike { border: 1px solid var(--y4-olumsuz); border-radius: var(--y4-yuvarlak-2); padding: var(--y4-bosluk-4); }
.y4-tehlike-not { margin: 0; color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-dug-tehlike { background: var(--y4-olumsuz); border-color: var(--y4-olumsuz); color: var(--y4-vurgu-zit); }

/* ── serbest yazı widget'ı ────────────────────────────────────────────
   ⚠ Satır araları korunur: panelde alt alta yazılan satırlar <br> yazmadan
   aynen görünsün. */
.y4-metin { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); }
.y4-metin-govde {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.7;
  color: var(--y4-metin);
  overflow-wrap: anywhere;
}
.y4-metin-orta { align-items: center; text-align: center; }
.y4-metin-vurgulu {
  padding: var(--y4-bosluk-4);
  border-inline-start: 3px solid var(--y4-vurgu);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey-2);
}
.y4-metin .y4-dug-ana { align-self: start; }
.y4-metin-orta .y4-dug-ana { align-self: center; }

/* ── oyun ekran görüntüsü şeridi ──────────────────────────────────────
   ⚠ YATAY KAYDIRIR, sayfayı uzatmaz: dikey liste oyun sayfasını
   metrelerce uzatıyordu. Kaydırma KUTUNUN içinde (gövde kaymaz). */
.y4-ekran-serit {
  display: flex;
  gap: var(--y4-bosluk-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block-end: var(--y4-bosluk-2);
}
.y4-ekran-serit img {
  flex: none;
  inline-size: clamp(14rem, 40vw, 22rem);
  block-size: auto;
  border-radius: var(--y4-yuvarlak-2);
}

/* ── görsel kartı / afiş widget'ı ─────────────────────────────────────
   Görsel + üstünde yazı + bağlantı. Yükseklik, yazı konumu ve karartma
   panelden seçilir; burada yalnız o seçimlerin karşılığı var.
   ⚠ KARARTMA ŞART: açık renkli fotoğrafın üstünde beyaz yazı kayboluyor.
   Panelden "Yok" seçilebilir ama varsayılan açık. */
.y4-afis {
  position: relative;
  display: block;
  border-radius: var(--y4-yuvarlak-3);
  overflow: hidden;
  color: var(--y4-kimlik-metin);
  text-decoration: none;
  background: var(--y4-yuzey-2);
}
.y4-afis-gorsel {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.y4-afis-kisa { block-size: clamp(8rem, 18vw, 11rem); }
.y4-afis-orta { block-size: clamp(11rem, 26vw, 16rem); }
.y4-afis-uzun { block-size: clamp(14rem, 36vw, 22rem); }

.y4-afis-ic {
  position: absolute;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-4);
}
.y4-afis-kalt .y4-afis-ic { inset-block-end: 0; }
.y4-afis-kust .y4-afis-ic { inset-block-start: 0; }
.y4-afis-korta .y4-afis-ic {
  inset-block: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Karartma perdesi — yazının olduğu yönden koyulaşır. */
.y4-afis-phafif .y4-afis-ic { background: linear-gradient(to top, var(--y4-perde-yok), transparent); }
.y4-afis-porta .y4-afis-ic { background: linear-gradient(to top, var(--y4-perde-tam), transparent); }
.y4-afis-pkoyu .y4-afis-ic { background: var(--y4-perde-tam); }
.y4-afis-pyok .y4-afis-ic { background: none; }
/* Ortada yazı varken tek yönlü gradyan işe yaramaz: her yönden eşit perde. */
.y4-afis-korta.y4-afis-porta .y4-afis-ic,
.y4-afis-korta.y4-afis-phafif .y4-afis-ic { background: var(--y4-perde-tam); }

.y4-afis-bas {
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}
.y4-afis-alt { font-size: var(--y4-yazi-kucuk); line-height: 1.5; opacity: 0.92; }
/* ⚠ <span>, <a> DEĞİL: kartın tamamı zaten bağlantı; iç içe bağlantı
   geçersiz HTML ve tıklama hedefini bozuyor. */
.y4-afis-dug {
  align-self: start;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
}
.y4-afis-korta .y4-afis-dug { align-self: center; }

/* ═══ YUDUMFM ════════════════════════════════════════════════════════ */
/* ⚠⚠ İki dev kutu tek panele indi (bkz. yudumfm.html'deki not).
   Akışkan: dar ekranda oynatıcı ve bilgi alt alta geçer — nowrap +
   tek media query yerine flex-wrap + taban genişlik. */
.y4-fm-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--y4-bosluk-3) var(--y4-bosluk-4);
}
.y4-fm-bilgi { flex: 1 1 18rem; min-inline-size: 0; }
/* ⚠ 13rem'di: Azura gömülü oynatıcısının kendi içeriği ~7rem, kalanı
   iframe'in boş zemini olarak duruyordu — kutuyu dev gösteren buydu. */
.y4-fm-player {
  flex: 1 1 20rem;
  min-inline-size: 0;
  block-size: 7.5rem;
  border: 0;
  border-radius: var(--y4-yuvarlak-2);
}
.y4-fm-dugmeler { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); margin-block-start: var(--y4-bosluk-3); }
/* Sıradaki satırı tek parça: iki uca yaslanacak ikinci öğe kalmadı. */
.y4-fm-sirada { justify-content: flex-start; }
.y4-fm-simdi { display: flex; gap: var(--y4-bosluk-3); align-items: center; }
.y4-fm-kapak {
  flex: none;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: var(--y4-yuvarlak-1);
  object-fit: cover;
  background: var(--y4-yuzey-2);
}
.y4-fm-simdi-ic { min-inline-size: 0; flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
.y4-fm-sarki { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.y4-fm-satir {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--y4-bosluk-2);
  margin-block-start: var(--y4-bosluk-2);
  font-size: var(--y4-yazi-kucuk);
  color: var(--y4-metin-2);
}
.y4-fm-satir a { color: var(--y4-vurgu); text-decoration: none; }
/* ⚠ Genişliği betik yazar (çalan sürenin oranı); başlangıç sıfır. */
.y4-fm-cubuk {
  block-size: 0.3rem;
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  overflow: hidden;
  margin-block-start: var(--y4-bosluk-3);
}
.y4-fm-cubuk > span { display: block; block-size: 100%; inline-size: 0; background: var(--y4-vurgu); transition: inline-size 1s linear; }
.y4-fm-canli { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--y4-olumlu); font-weight: 600; }
.y4-fm-sonuc { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); margin-block-start: var(--y4-bosluk-3); }
.y4-fm-mesaj { margin-block-start: var(--y4-bosluk-2); font-size: var(--y4-yazi-kucuk); color: var(--y4-metin-2); }
.y4-fm-top { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); margin: 0; padding: 0; list-style: none; }
.y4-fm-top-satir {
  display: flex;
  align-items: center;
  /* ⚠ Üç sütuna bölününce satır daraldı: boşluk ve kapak küçültüldü,
     yoksa şarkı adına yer kalmıyor. */
  gap: var(--y4-bosluk-2);
  padding: 0.4rem var(--y4-bosluk-2);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey);
}
.y4-fm-top-no {
  flex: none;
  inline-size: 1.1rem;
  text-align: center;
  font-weight: 800;
  font-size: var(--y4-yazi-kucuk);
  color: var(--y4-vurgu);
}
.y4-fm-top-kapak { flex: none; inline-size: 2rem; block-size: 2rem; border-radius: var(--y4-yuvarlak-1); object-fit: cover; background: var(--y4-yuzey-2); }
/* ⚠ Tek satırda kesilir (iki satıra sarsa listedeki satırlar eşit
   yükseklikte durmuyor, sütunlar kaykılıyordu). */
.y4-fm-top-ad {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--y4-yazi-kucuk);
}
.y4-fm-top-soz { text-decoration: none; }
.y4-dj-panel { border-color: var(--y4-vurgu); }
/* ⚠⚠ `flex-wrap: wrap` AVATARI KENDİ SATIRINA ATIYORDU (17 Ağu 2026,
   ekran görüntüsü): kart "yuvarlak · altında yazı" diye iki kata
   bölünüyor, komşu kartla hizası kaçıyordu. Avatar SOLDA sabit, bilgi
   sağda tek sütun; biyografi de o sütunun içinde akar. */
.y4-dj { align-items: flex-start; }
.y4-dj .y4-kisi-ic { gap: 0.15rem; }
/* Bildirim balonu — betik konumlandırıp gösteriyor. */
.y4-toast {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: 1.5rem;
  translate: -50% 8rem;
  z-index: 90;
  max-inline-size: 90vw;
  padding: var(--y4-bosluk-3) var(--y4-bosluk-5);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  box-shadow: var(--y4-golge-2);
  transition: translate 0.35s;
  text-align: center;
}

/* ═══ SİNEMA · RADYO · YAYIN ═════════════════════════════════════════ */
.y4-seans {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-vurgu);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-seans-rozet { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--y4-olumlu); font-weight: 700; font-size: var(--y4-yazi-kucuk); }
.y4-seans-ic { display: flex; align-items: center; gap: var(--y4-bosluk-3); color: var(--y4-metin); text-decoration: none; }
.y4-seans-afis { inline-size: 4rem; block-size: 6rem; object-fit: cover; border-radius: var(--y4-yuvarlak-1); }
.y4-seans-ad { display: block; }

.y4-radyo-kart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-4);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-radyo-logo { inline-size: 5rem; block-size: 5rem; object-fit: contain; border-radius: var(--y4-yuvarlak-1); }
.y4-radyo-ic { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); flex: 1; min-inline-size: 12rem; }
.y4-radyo-ses { inline-size: 100%; }
.y4-sss { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
.y4-sss-madde {
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey);
  padding: var(--y4-bosluk-3);
}
.y4-sss-madde > summary { cursor: pointer; font-weight: 600; }

/* ⚠⚠ SINIF ADI ÇAKIŞMASI (17 Ağu 2026, Selçuk: "sağ sidebar hâlâ koyu"):
   canlı yayın İZLEME sayfasının oynatıcı kabuğuna ".y4-yayin" demiştim;
   yan sütundaki yayıncı SATIRLARI da aynı adı taşıyor. Sonuç: açık modda
   sağ sütundaki satırlar oynatıcının koyu zeminini alıyordu.
   Oynatıcı kabuğu ayrı ada geçti — satır kendi yüzeyinde kaldı. */
.y4-yayin-kutu { border-radius: var(--y4-yuvarlak-2); overflow: hidden; background: var(--y4-perde-tam); }
.y4-yayin-video { inline-size: 100%; aspect-ratio: 16 / 9; display: block; background: var(--y4-perde-tam); }

/* ═══ OYUN LOBİSİ · MASA · TEK KİŞİLİK ═══════════════════════════════ */
.y4-oyun-izgara {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(auto-fit, minmax(max(7rem, (100% - 5 * var(--y4-bosluk-3)) / 6), 1fr));
}
.y4-oyun-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
  text-align: center;
  transition: var(--y4-gecis);
}
.y4-oyun-kart:hover { border-color: var(--y4-vurgu); transform: translateY(-2px); }
/* ⚠ İkon emoji YA DA görsel olabilir (HariciOyun.Ikon tek alan). */
.y4-oyun-ikon { font-size: 2rem; line-height: 1; }
.y4-oyun-ad {
  font-size: var(--y4-yazi-kucuk);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.y4-oyun-cerceve {
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  background: var(--y4-yuzey-2);
  aspect-ratio: 4 / 3;
}
.y4-oyun-cerceve > iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }

.y4-masa-izgara {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(auto-fit, minmax(max(14rem, (100% - 3 * var(--y4-bosluk-3)) / 4), 1fr));
}
.y4-oyna-alt {
  display: grid;
  gap: var(--y4-bosluk-4);
  grid-template-columns: repeat(auto-fit, minmax(max(16rem, (100% - var(--y4-bosluk-4)) / 2), 1fr));
}
.y4-oyna-form {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-vurgu);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-oyna-form h3 { margin: 0; }
.y4-oyna-form textarea { resize: vertical; }

.y4-masa { display: grid; gap: var(--y4-bosluk-4); grid-template-columns: 1fr; }
@media (min-width: 62rem) {
  .y4-masa { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}
.y4-masa-ana, .y4-masa-yan { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); min-inline-size: 0; }
/* ⚠ Tahtanın kendi ölçüleri tabla.css'ten gelir; burası yalnız kabuk. */
.y4-masa-tabla {
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  background: var(--y4-yuzey-2);
}
.y4-masa-satir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--y4-bosluk-3); }
.y4-masa-sohbet { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
.y4-masa-akis {
  max-block-size: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-1);
  font-size: var(--y4-yazi-kucuk);
}

/* ═══ FUTBOL · TV ════════════════════════════════════════════════════ */
.y4-mac-gun { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
.y4-mac-gun-bas { margin: 0; font-size: var(--y4-yazi-orta); color: var(--y4-metin-2); }
.y4-mac-liste { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
/* ⚠ Satır SARAR: takım adları uzun (Galatasaray – Fenerbahçe + kanal +
   lig) ve dar ekranda tek satıra sığmıyor. nowrap taşma üretiyordu. */
.y4-mac-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-3);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
  transition: var(--y4-gecis);
}
.y4-mac-satir:hover { border-color: var(--y4-vurgu); }
.y4-mac-saat { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); font-variant-numeric: tabular-nums; }
.y4-mac-takim { font-weight: 600; }
.y4-mac-vs { color: var(--y4-metin-3); }
.y4-mac-skor {
  padding: var(--y4-bosluk-1) var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.y4-mac-kanal, .y4-mac-lig {
  margin-inline-start: auto;
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
}
.y4-mac-bitti { opacity: 0.85; }
.y4-hafta-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--y4-bosluk-3); }
.y4-hafta-form .y4-form-alan { min-inline-size: 12rem; }

/* Tablo — ⚠ KENDİ İÇİNDE kayar, sayfayı kaydırmaz. Sütun gizlemek
   bilgiyi yok ediyordu; puan durumunda her sütun anlamlı. */
.y4-tablo-kabuk {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-tablo { inline-size: 100%; border-collapse: collapse; font-size: var(--y4-yazi-kucuk); }
.y4-tablo th, .y4-tablo td {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  text-align: center;
  white-space: nowrap;
  border-block-end: 1px solid var(--y4-cizgi);
}
.y4-tablo th { color: var(--y4-metin-3); font-weight: 600; }
.y4-tablo-ad { text-align: start; }
.y4-tablo-ad a { color: var(--y4-metin); text-decoration: none; }
.y4-tablo-ad a:hover { color: var(--y4-vurgu); }
.y4-tablo-puan { font-weight: 800; color: var(--y4-vurgu); }

.y4-tanitim {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-4);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-tanitim-gorsel { inline-size: 5rem; block-size: 5rem; object-fit: contain; }
.y4-tanitim-ozet { margin: var(--y4-bosluk-2) 0; color: var(--y4-metin-2); line-height: 1.6; max-inline-size: 60ch; }

.y4-tv-liste { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
.y4-tv-satir {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
}
.y4-tv-canli { border-color: var(--y4-canli); }
.y4-tv-logo { inline-size: 2.5rem; block-size: 2.5rem; object-fit: contain; }
.y4-tv-saat { color: var(--y4-metin-3); font-variant-numeric: tabular-nums; font-size: var(--y4-yazi-kucuk); }
.y4-tv-ic { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; flex: 1; }
.y4-tv-tur, .y4-tv-oz { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-tv-oz {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ⚠ Davranış kancası: seçim değişince formu gönderir (wasm). Görünüm
   farkı YOK — ama sınıf CSS'te tanımlı olsun ki tema denetimi "tanımsız
   sınıf" saymasın ve gerçek eksikler gürültüde kaybolmasın. */
.y4-oto-gonder { cursor: pointer; }

/* ── LİSTE KARTI DENGESİ (17 Ağu 2026, ölçüldü) ───────────────────────
   ⚠⚠ SORUN: "İlgili haberler" ızgarasında görseli olmayan kart, görselli
   kartlarla aynı yüksekliğe geriliyor ve içi KOCAMAN BOŞLUK kalıyordu;
   başlıklar 2/3 satır arasında oynayınca kartlar dengesiz duruyordu.
   ÇÖZÜM: kart hücreyi doldurur, içerik dikeyde yayılır, başlık ve özet
   sabit satır sayısında kırpılır. Yükseklik sabitlenmez — kırpma satır
   sayısıyla yapılır, px ile değil. */
.y4-liste > .y4-kart-sayfa { block-size: 100%; }
.y4-kart-sayfa .y4-kart-ic { flex: 1; }
/* Görselsiz kart: yazı ortada dursun, üstte asılı kalmasın. */
.y4-kart-yazi .y4-kart-ic { justify-content: center; }
/* ⚠ Görselsiz kartın yer tutucusu: komşularla AYNI yükseklik.
   Boyu `.y4-kart-sayfa .y4-kart-medya` kuralından gelir. */
.y4-kart-medya-bos {
  display: grid;
  place-items: center;
  color: var(--y4-metin-3);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
/* ⚠ Özet İKİ SATIRDA kesilir: serbest bırakınca uzun özetli kart
   komşusundan uzun oluyor ve satır dip hizası kayıyordu. */
.y4-kart-sayfa .y4-kart-ozet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.y4-kart-sayfa .y4-kart-baslik {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.y4-kart-sayfa .y4-kart-ozet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  line-height: 1.45;
}
/* Çip başlıktan önce gelir ve büyümez. */
.y4-kart-sayfa .y4-kart-cip { align-self: start; }

/* ── DETAY GÖVDESİ ANA SÜTUNU DOLDURUR ────────────────────────────────
   ⚠⚠ İKİ KEZ YANLIŞ YAPTIM, ÜÇÜNCÜSÜ DOĞRUSU (17 Ağu 2026):
   1) gövdeye 68ch sınırı koydum → metin dar, görsel geniş, hizasız;
   2) sınırı bloğa taşıdım → bu sefer BAŞLIK, GÖRSEL VE METİN birlikte
      daraldı; ana sütunun sağında koca boşluk kaldı ve içerik yan sütuna
      kadar gitmedi (Selçuk: "yazı niye bir alana sıkışmış?").
   Doğrusu: ana sütun ZATEN yan sütun tarafından daraltılıyor; ikinci bir
   okuma-genişliği sınırı GEREKMİYOR. Yalnız yan sütunun olmadığı çok geniş
   ekranlarda satır aşırı uzamasın diye kabuk genişliği devrede.
   ⚠ Buraya bir daha `max-inline-size` yazma. */
.y4-detay { max-inline-size: none; }

/* ── PAYLAŞ ──
   ⚠⚠ "hepsi beyaz gri" (Selçuk, 17 Ağu 2026): dört düğme de aynı soluk
   kutuydu, hangisinin ne olduğu ancak yazısı okunarak anlaşılıyordu.
   Paylaşım düğmesi TANINDIĞI İÇİN tıklanır: her biri kendi markasının
   rengini taşır, üstüne gelince dolu hâle geçer. */
.y4-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding-block: var(--y4-bosluk-2);
}
.y4-pay-bas {
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
}
.y4-pay-dug {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 1px solid currentColor;
  border-radius: var(--y4-yuvarlak-3);
  background: none;
  color: var(--y4-metin-2);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--y4-gecis), color var(--y4-gecis), transform var(--y4-gecis);
}
/* Marka renkleri — jetondan değil, markanın kendi rengi (WhatsApp yeşili
   tema rengiyle değişmez). ⚠ Bunlar tema jetonu DEĞİL, marka sabiti. */
.y4-pay-wa { color: var(--y4-marka-wa); }
.y4-pay-x  { color: var(--y4-metin); }
.y4-pay-fb { color: var(--y4-marka-fb); }
.y4-pay-kopyala { color: var(--y4-vurgu); }
.y4-pay-dug:hover {
  background: currentColor;
  transform: translateY(-1px);
}
/* Dolu hâlde yazı zeminden ayrışsın. */
.y4-pay-dug:hover > span { color: var(--y4-yuzey); }

/* Paylaş: kopyala düğmesi davranış kancası (wasm). */
.y4-pay-kopyala { font: inherit; }

/* ── SÜZGEÇ: KATLANIR PANEL (7'den çok madde) ─────────────────────────
   ⚠ Kapalıyken tek satır: sayfanın üstü 12 düğmeyle dolmasın. Seçili
   bölüm özette yazılı olduğu için açmadan da nerede olduğun belli. */
.y4-suzgec-kat > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: var(--y4-gecis);
}
.y4-suzgec-kat > summary::-webkit-details-marker { display: none; }
.y4-suzgec-kat > summary:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
/* Açıkken liste altında; kapalıyken hiç yer kaplamaz. */
.y4-suzgec-kat[open] > summary { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
.y4-suzgec-kat > .y4-suzgec { margin-block-start: var(--y4-bosluk-2); }

/* ═══ ETKİLEŞİM KARTI (puan + paylaş TEK KUTUDA) ═════════════════════
   ⚠⚠ Önce ikisi ayrı kutuydu ve sayfa altı dağınıktı (Selçuk, 17 Ağu:
   "bu mu güzel görsel görünüş"). Aynı işi yapıyorlar: okuyucunun tepkisi.
   Dar ekranda alt alta, geniş ekranda yan yana — arada ince ayraç. */
.y4-etkilesim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-4);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
}
.y4-etkilesim-puan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-3);
  flex: 1 1 16rem;
  min-inline-size: 0;
}
.y4-etkilesim-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-3);
  padding-inline-start: var(--y4-bosluk-4);
  border-inline-start: 1px solid var(--y4-cizgi);
}
/* Dar ekranda ayraç yatay olsun (dikey çizgi anlamsız kalıyordu). */
@media (max-width: 48rem) {
  .y4-etkilesim-pay {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: var(--y4-bosluk-3);
    border-block-start: 1px solid var(--y4-cizgi);
    inline-size: 100%;
  }
}
/* ⚠ EŞİT GENİŞLİK: "X" tek harf olduğu için düğme daireye dönüyordu. */
.y4-pay-sira { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }
.y4-pay-sira > .y4-pay-dug { min-inline-size: 7.5rem; justify-content: center; }

/* ═══ PAYLAŞIM KUTUSU — YENİDEN ══════════════════════════════════════
   ⚠⚠ Önceki hâli çıplak onay kutusu + düz yazıydı (Selçuk, 17 Ağu 2026:
   "3 yaşında yeni öğrenen çocuk gibi dizaynlar"). Şimdi: solda avatar,
   yanında yazı alanı, altında hap araç düğmeleri ve sağda Paylaş.
   ⚠ Onay kutusu GİZLİ, durumu hapın DOLGUSU anlatıyor (:has ile). */
.y4-paylas {
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
  transition: border-color var(--y4-gecis), box-shadow var(--y4-gecis);
}
/* Yazarken kutu öne çıksın — nereye yazdığın belli olsun. */
.y4-paylas:focus-within { border-color: var(--y4-vurgu); box-shadow: var(--y4-golge-1); }
.y4-paylas-ust { display: flex; gap: var(--y4-bosluk-3); align-items: flex-start; }
.y4-paylas-ust > .y4-av { flex: none; inline-size: 2.5rem; block-size: 2.5rem; }
.y4-paylas .y4-paylas-alan {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 3rem;
  padding: var(--y4-bosluk-2) 0;
  font-size: var(--y4-yazi-orta);
  line-height: 1.5;
}
.y4-paylas-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding-block-start: var(--y4-bosluk-3);
  border-block-start: 1px solid var(--y4-cizgi);
}
.y4-paylas-arac {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
  cursor: pointer;
  transition: var(--y4-gecis);
}
.y4-paylas-arac:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
/* Seçili durum: hap dolu — açık mı kapalı mı bir bakışta belli. */
.y4-paylas-arac:has(input:checked) {
  background: var(--y4-vurgu);
  border-color: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
}
.y4-paylas-gonder {
  margin-inline-start: auto;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-5);
  font-weight: 700;
}
.y4-paylas-onizleme img, .y4-paylas-onizleme video {
  inline-size: 100%;
  max-block-size: 18rem;
  object-fit: cover;
  border-radius: var(--y4-yuvarlak-2);
}
/* Akış sekmeleri sayfanın başında: üstünde başlık yok, nefes alsın. */
.y4-bolge-ana > .y4-sekme:first-child { margin-block-start: var(--y4-bosluk-2); }

/* ═══ OYNA LOBİSİ — /varlik/t-oyna-1.js'in bastığı içerik ═════════════
   ⚠⚠ SINIFLAR JS SÖZLEŞMESİ (om-* ve oyna-*). Bu tema oyna.css'i
   YÜKLEMİYOR (eski temanın görünümü gelmesin diye), dolayısıyla o sınıflar
   biçimsiz kalıyordu: "962derece 1galibiyet 5mağlubiyet" yan yana yapışık,
   sıralama satırları düz metin (Selçuk, 17 Ağu 2026: "bu mu oyunlar ana
   sayfası"). Görünüm burada, JETONLARLA veriliyor — ikinci bir CSS dosyası
   yok. */
.om-kart {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.om-kart-ust { display: flex; align-items: center; gap: var(--y4-bosluk-2); }
.om-kart-oyun { font-weight: 700; }
.om-kart-kisi { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.om-kart-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2);
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
}
.om-kart-hata { color: var(--y4-olumsuz); font-size: var(--y4-yazi-kucuk); }
.om-rozet {
  padding: var(--y4-bosluk-1) var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-vurgu-hafif);
  color: var(--y4-vurgu);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
}
.om-kod-satir { font-family: ui-monospace, monospace; font-size: var(--y4-yazi-kucuk); }

/* Boş durum: dev başlık altında çıplak cümle duruyordu. */
.oyna-bos {
  padding: var(--y4-bosluk-4);
  border: 1px dashed var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  text-align: center;
}
.oyna-btn {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: var(--y4-gecis);
}
.oyna-btn:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
.oyna-btn-ana { background: var(--y4-vurgu); border-color: var(--y4-vurgu); color: var(--y4-vurgu-zit); }

/* ⚠ İSTATİSTİK SATIRI: "962derece" gibi yapışık çıkıyordu — sayı ile
   etiket arasında boşluk YOK'tu çünkü ikisi ayrı <span> ve stil yoktu. */
.oyna-ist-satir {
  display: flex;
  align-items: baseline;
  gap: var(--y4-bosluk-2);
  padding-block: var(--y4-bosluk-2);
  border-block-end: 1px solid var(--y4-cizgi);
}
.oyna-ist-satir:last-child { border-block-end: 0; }
.oyna-ist-sira {
  inline-size: 1.5rem;
  color: var(--y4-vurgu);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.oyna-ist-ad { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oyna-ist-deger { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── SİNEMA DETAY: sohbet daveti + canlı şerit ───────────────────────
   ⚠ Film sayfası bilgi sayfası DEĞİL, sohbete giriş kapısı: davet kutusu
   sayfanın en görünür öğelerinden biri. */
.y4-sinema-davet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-4);
  border-radius: var(--y4-yuvarlak-3);
  background: linear-gradient(135deg, var(--y4-vurgu), var(--y4-vurgu-2));
  color: var(--y4-vurgu-zit);
  text-align: center;
}
.y4-sinema-davet b { font-size: var(--y4-yazi-buyuk); }
.y4-sinema-davet span { max-inline-size: 46ch; line-height: 1.5; }
.y4-sinema-davet .y4-dug-ana {
  background: var(--y4-yuzey);
  border-color: var(--y4-yuzey);
  color: var(--y4-vurgu);
}
.y4-sinema-canli {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-canli);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
  font-size: var(--y4-yazi-kucuk);
}
.y4-sinema-canli:hover { border-color: var(--y4-vurgu); }
.y4-sinema-canli .y4-nokta { background: var(--y4-canli); }

/* ⚠ `adsbygoogle-noablate` GOOGLE'IN SÖZLEŞMESİ, bizim süsümüz değil:
   otomatik reklamın bu bölgeye yerleşmesini engeller. Görünüm kuralı yok —
   sınıf burada yalnız tema denetimi "tanımsız sınıf" saymasın diye
   belgeleniyor (gerçek eksikler gürültüde kaybolmasın). */
.adsbygoogle-noablate { position: relative; }

/* ── BÖLÜM TANITIM METNİ ──────────────────────────────────────────────
   Liste sayfalarının altındaki açıklama/SEO metni. ⚠ Eski temada şablona
   gömülüydü, panele taşındı (Sayfalar → "bolum/<ad>"): tema değişince
   kaybolmasın ve iki yerde iki farklı metin olmasın. */
.y4-bolum-metin {
  max-inline-size: 72ch;
  color: var(--y4-metin-2);
  line-height: 1.75;
}
.y4-bolum-metin p { margin: 0 0 var(--y4-bosluk-3); }
.y4-bolum-metin a { color: var(--y4-vurgu); }
.y4-bolum-metin strong { color: var(--y4-metin); }

/* ═══ AYARLAR — BLOK DÜZENİ ══════════════════════════════════════════
   ⚠⚠ Önceki hâli: her alan ayrı çerçeveli kutu + her kutuda ayrı "Kaydet".
   Sekiz kutu, sekiz düğme, hiçbiri hizalı değil (Selçuk: "eski hâli bile
   bundan güzel"). Şimdi: konuya göre bloklar, blok içinde iki sütunlu
   akışkan ızgara, blok başına TEK eylem satırı. */
.y4-ayar-blok {
  padding: var(--y4-bosluk-5);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
}
/* Bölüm başlığı sayfa başlığıyla yarışmasın: küçük, sakin, üstte ayraç. */
.y4-ayar-bas {
  margin: 0 0 var(--y4-bosluk-4);
  padding-block-end: var(--y4-bosluk-2);
  border-block-end: 1px solid var(--y4-cizgi);
  font-size: var(--y4-yazi-orta);
  font-weight: 700;
  color: var(--y4-metin-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.y4-ayar-form {
  display: grid;
  gap: var(--y4-bosluk-3) var(--y4-bosluk-4);
  grid-template-columns: repeat(auto-fit, minmax(max(15rem, (100% - var(--y4-bosluk-4)) / 2), 1fr));
  align-items: start;
}
/* Uzun metin alanı satırın tamamını kaplar. */
.y4-form-genis { grid-column: 1 / -1; }
.y4-ayar-alt {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2);
  padding-block-start: var(--y4-bosluk-3);
  border-block-start: 1px solid var(--y4-cizgi);
}
.y4-ayar-ikili {
  display: grid;
  gap: var(--y4-bosluk-5);
  grid-template-columns: repeat(auto-fit, minmax(max(16rem, (100% - var(--y4-bosluk-5)) / 2), 1fr));
}
.y4-ayar-ikili .y4-ayar-form { grid-template-columns: 1fr; }
/* ⚠ Ham "Dosya Seç / Dosya seçilmedi" düğmesi gizlendi: tarayıcı
   varsayılanı hem çirkin hem de temayla uyumsuz. Etiket düğme gibi. */
.y4-avatar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-3);
}
.y4-avatar-onizleme {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--y4-yuzey-2);
}

/* ⚠ Uzun metin alanı satırın tamamını kaplar. Sınıf yerine `data-tur`:
   şablonda koşullu sınıf yazımı ("class=a{{if}} b{{end}}") tema denetiminde
   sahte sınıf üretiyordu. */
.y4-form-alan[data-tur="uzunmetin"] { grid-column: 1 / -1; }

/* Künye ek alanı: etiket koyu, değer normal — ham URL yığını olmasın. */
.y4-kunye-ek b { color: var(--y4-metin-3); font-weight: 600; }

/* Kapak zemini üstündeki yazılar: gradyan koyu, metin açık. */
.y4-profil-ust .y4-kimlik-ad h1,
.y4-profil-ust .y4-kimlik-nick,
.y4-profil-ust .y4-sayilar div,
.y4-profil-ust .y4-sayilar b { color: var(--y4-perde-metin); }
.y4-profil-ust .y4-unvan {
  background: var(--y4-perde-yok);
  color: var(--y4-perde-metin);
}
/* Eylem düğmeleri zeminin üstünde: dolu beyaz / saydam çerçeve. */
.y4-profil-ust .y4-dug {
  border-color: var(--y4-perde-metin);
  background: none;
  color: var(--y4-perde-metin);
}
.y4-profil-ust .y4-dug-ana {
  background: var(--y4-yuzey);
  border-color: var(--y4-yuzey);
  color: var(--y4-vurgu);
}
.y4-profil-ust .y4-kimlik-av { border-color: var(--y4-perde-metin); }

/* ── PROFİL KÜNYESİ: KART IZGARASI ───────────────────────────────────
   ⚠ Önce tek satır düz metindi ve okunmuyordu (konum, site, takım, yaş,
   e-posta, Discord bağlantısı yan yana). Her bilgi kendi kartında:
   ikon · etiket · değer. Kart sayısı arttıkça ızgara kendi sarar. */
.y4-kunye-izgara {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(auto-fit, minmax(max(12rem, (100% - 3 * var(--y4-bosluk-3)) / 4), 1fr));
}
.y4-kunye-kart {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-kunye-ikon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  font-size: 1.1rem;
}
.y4-kunye-ic { display: flex; flex-direction: column; min-inline-size: 0; }
/* Etiket küçük ve soluk, değer okunur — tablo hissi veren şey bu ayrım. */
.y4-kunye-ic b {
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
}
.y4-kunye-ic span, .y4-kunye-ic a {
  color: var(--y4-metin);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.y4-kunye-ic a { color: var(--y4-vurgu); text-decoration: none; }

/* ── PROFİL YAN KUTULARI: mini kişi listesi + gelen yorumlar ─────────
   ⚠ Kutu başlığında SAYI: "Arkadaşları 12" — listeyi açmadan büyüklüğü
   görünsün. */
.y4-bio-kart .y4-bio { margin: 0; }
.y4-kutu h3 { display: flex; align-items: center; gap: var(--y4-bosluk-2); }
.y4-kutu-sayi {
  margin-inline-start: auto;
  padding: 0 var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
}
/* Kişi listesi: sarmalayan hap satırları — dikey liste yan sütunu
   gereksiz uzatıyordu. */
.y4-mini-liste { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }
.y4-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-1) var(--y4-bosluk-2) var(--y4-bosluk-1) var(--y4-bosluk-1);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
  font-size: var(--y4-yazi-kucuk);
  transition: var(--y4-gecis);
}
.y4-mini:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
.y4-mini .y4-av { inline-size: 1.5rem; block-size: 1.5rem; font-size: 0.7rem; }

.y4-yorum-mini { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
.y4-yorum-mini-sat {
  display: flex;
  gap: var(--y4-bosluk-2);
  padding-block: var(--y4-bosluk-2);
  border-block-end: 1px solid var(--y4-cizgi);
  color: var(--y4-metin);
  text-decoration: none;
}
.y4-yorum-mini-sat:last-child { border-block-end: 0; }
.y4-yorum-mini-sat .y4-av { inline-size: 2rem; block-size: 2rem; flex: none; }
.y4-yorum-mini-ic { display: flex; flex-direction: column; min-inline-size: 0; font-size: var(--y4-yazi-kucuk); }
.y4-yorum-mini-ic span { color: var(--y4-metin-2); line-height: 1.4; }

/* ── EDİTÖR MASASI KARTI (haber detayı) ──────────────────────────────
   ⚠ Künyedeki masa adı kısa bir etiket; bu kart içeriğin KAYNAĞINI
   açıklar. Sahte yazar adı yerine editör masası kimliği. */
.y4-masa-kart {
  display: flex;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-masa-ikon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
  font-size: 1.2rem;
}
.y4-masa-ic { min-inline-size: 0; }
.y4-masa-ad { color: var(--y4-metin); }
.y4-masa-metin {
  margin: var(--y4-bosluk-1) 0 0;
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  line-height: 1.6;
}
.y4-masa-metin a { color: var(--y4-vurgu); }

/* Künye satırındaki hızlı paylaş: sessiz, küçük, sağa yaslı. */
.y4-kunye-pay {
  margin-inline-start: auto;
  display: inline-flex;
  gap: var(--y4-bosluk-1);
  padding-block: 0;
}
/* ⚠⚠ AÇIK TEMA (17 Ağu 2026, Selçuk: "paylaş butonlarını koyu temadaki
   gibi kullanmak yerine açık temaya uygun yapsan"): düğmeler koyu zemin
   varsayımıyla çizilmişti — açık modda gri daireler olarak kalıyor,
   tıklanabilir görünmüyordu. Artık ikincil yüzey + net kenarlık; üstüne
   gelince her düğme KENDİ MARKA RENGİNE dönüyor (WhatsApp yeşili,
   X siyahı, kopyala vurgu rengi) — hangisi olduğu renkten anlaşılıyor. */
.y4-kunye-pay-dug {
  display: grid;
  place-items: center;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  /* ⚠⚠ GÖRÜNÜRLÜK (18 Ağu 2026, Selçuk: "allah rızasına şunları görünür
     yap"): düğmeler açık temada solup kayboluyordu. İki sebep vardı:
     ikonlar EMOJİ — rengi CSS'ten etkilenmez, açık zeminde silik kalır;
     üstelik zemin (yüzey-2) ile kenarlık (çizgi) birbirine çok yakındı,
     daire hiç okunmuyordu. Kenarlık metin tonuna, zemin ana yüzeye
     çekildi: daire her iki modda da net bir çerçeve olarak görünüyor.
     ⚠ "Her yerde aynı renk" yok: jetonlar zaten moda göre değişiyor —
     burada YANLIŞ jeton seçilmişti. */
  border: 1px solid var(--y4-metin-3);
  border-radius: 50%;
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--y4-gecis), border-color var(--y4-gecis),
              color var(--y4-gecis), transform var(--y4-gecis);
}
.y4-kunye-pay-dug:hover {
  border-color: var(--y4-vurgu);
  background: var(--y4-vurgu);
  color: #fff;
  transform: translateY(-1px);
}
.y4-kunye-pay-dug[data-ag="whatsapp"]:hover { background: var(--y4-marka-whatsapp); }
.y4-kunye-pay-dug[data-ag="x"]:hover { background: var(--y4-marka-x); }

/* ── YORUM ÇAĞRISI ────────────────────────────────────────────────────
   Yazının sonunda, yorum kutusuna götüren tek satırlık kart.
   ⚠ Dar ekranda sarılır (flex-wrap): metin ve düğme alt alta geçer,
   nowrap + tek media query yerine akışkan kural. */
.y4-yorum-cagri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-3);
  margin-block-start: var(--y4-bosluk-4);
  padding: var(--y4-bosluk-3) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-inline-start: 3px solid var(--y4-vurgu);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-yorum-cagri-ikon { font-size: 1.5rem; line-height: 1; }
.y4-yorum-cagri-metin {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 12rem;
  min-inline-size: 0;
}
.y4-yorum-cagri-metin b { color: var(--y4-metin); font-size: var(--y4-yazi-orta); }
.y4-yorum-cagri-metin small { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-yorum-cagri-dug {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-4);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-vurgu);
  color: #fff;
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--y4-gecis), transform var(--y4-gecis);
}
.y4-yorum-cagri-dug:hover { background: var(--y4-vurgu-2); transform: translateY(-1px); }

/* ── BURÇLAR ──────────────────────────────────────────────────────────
   Bölüm ana sayfası (ızgara + element kartları) ve detay (künye, şerit).
   ⚠ Sabit px yok: kartlar auto-fit ile sığdığı kadar diziliyor. */
.y4-burc-izgara {
  display: grid;
  gap: var(--y4-bosluk-3);
  /* ⚠⚠ 12 BURÇ = 6×2 (17 Ağu 2026, Selçuk: "şunları 2 karta sığacak
     şekilde yapamadın mı"): 9.5rem taban ana sütunda 5 sütun veriyordu,
     12 kart 5+5+2 diziliyor ve son satırda iki öksüz kalıyordu.
     8.5rem taban aynı genişlikte 6 sütun verir → 6+6, tam iki satır.
     ⚠ 12'nin böleni olan sütun sayıları: 6 · 4 · 3 · 2. Taban daraldıkça
     auto-fit bunlara iner, hiçbirinde artan kart kalmaz. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}
.y4-burc-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--y4-gecis), transform var(--y4-gecis);
}
.y4-burc-kart:hover { border-color: var(--y4-vurgu); transform: translateY(-2px); }
.y4-burc-kart-sembol { font-size: 2rem; line-height: 1; color: var(--y4-vurgu); }
.y4-burc-kart-ad { font-weight: 600; }
.y4-burc-kart-tarih { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-burc-kart-meta { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }

.y4-burc-element {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.y4-burc-element-kart {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-inline-start: 3px solid var(--y4-vurgu);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-burc-element-kart b { color: var(--y4-metin); }
.y4-burc-element-kart span { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); font-weight: 600; }
.y4-burc-element-kart small { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); line-height: 1.5; }

/* ── burç detay ── */
/* Burç başlığı: sembol ve ad yan yana, dar ekranda alt alta. */
.y4-burc-bas { gap: var(--y4-bosluk-2); }
.y4-burc-bas-ic { display: flex; flex-wrap: wrap; align-items: center; gap: var(--y4-bosluk-3); }
.y4-burc-sembol { font-size: 3rem; line-height: 1; color: var(--y4-vurgu); }
.y4-burc-tarih { margin: 0; color: var(--y4-metin-2); font-size: var(--y4-yazi-orta); }

.y4-burc-kunye {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2);
  margin-block-start: var(--y4-bosluk-3);
}
.y4-burc-kunye-kart {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 8rem;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-burc-kunye-kart small { color: var(--y4-metin-3); font-size: 0.68rem; letter-spacing: 0.06em; }
.y4-burc-kunye-kart b { color: var(--y4-metin); }

.y4-burc-gunluk {
  padding: var(--y4-bosluk-3) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-inline-start: 3px solid var(--y4-vurgu);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-burc-gunluk-tarih {
  display: inline-block;
  margin-block-end: var(--y4-bosluk-2);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
}
.y4-burc-madde { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.3rem; }
.y4-burc-madde li { color: var(--y4-metin); }

.y4-burc-serit { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }
.y4-burc-serit-bag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  flex: 1 1 4.5rem;
  padding: var(--y4-bosluk-2);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin-2);
  text-decoration: none;
  font-size: var(--y4-yazi-kucuk);
  transition: border-color var(--y4-gecis), color var(--y4-gecis);
}
.y4-burc-serit-bag:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
.y4-burc-serit-bag.y4-secili { border-color: var(--y4-vurgu); color: var(--y4-vurgu); font-weight: 600; }
.y4-burc-serit-sembol { font-size: 1.3rem; line-height: 1; }
.y4-burc-serit-ad { font-size: 0.72rem; }

/* ── yan sütun widget'ı: ince ─────────────────────────────────────────
   ⚠ Kart değil SEMBOL IZGARASI: 12 kart yan sütunu sayfa boyu uzatıyordu.
   Kutunun tamamı ~9rem kalır. */
.y4-brc { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); }
.y4-brc-one {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin);
  text-decoration: none;
  transition: background var(--y4-gecis);
}
.y4-brc-one:hover { background: var(--y4-yuzey-3, var(--y4-yuzey-2)); }
.y4-brc-one-sembol { flex: none; font-size: 1.8rem; line-height: 1; color: var(--y4-vurgu); }
.y4-brc-one-ic { display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; }
.y4-brc-one-ic b { font-size: var(--y4-yazi-kucuk); }
.y4-brc-one-ic small { color: var(--y4-metin-2); font-size: 0.72rem; }
.y4-brc-one-ic em {
  color: var(--y4-metin-2);
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.45;
}
.y4-brc-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.y4-brc-sem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.35rem 0.2rem;
  border-radius: var(--y4-yuvarlak-1);
  color: var(--y4-metin-2);
  text-decoration: none;
  transition: background var(--y4-gecis), color var(--y4-gecis);
}
.y4-brc-sem:hover { background: var(--y4-yuzey-2); color: var(--y4-vurgu); }
.y4-brc-sem > span { font-size: 1.15rem; line-height: 1; }
.y4-brc-sem > small { font-size: 0.6rem; line-height: 1.2; }

/* ── yazılı bölüm + SSS (bölüm ana sayfalarında) ────────────────────── */
.y4-yazi-blok { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); line-height: 1.7; }
.y4-yazi-blok p { margin: 0; color: var(--y4-metin); }
.y4-yazi-blok b { color: var(--y4-metin); }
.y4-yazi-not {
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
}
.y4-sss { display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
.y4-sss-madde {
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-sss-madde > summary {
  padding: var(--y4-bosluk-3);
  color: var(--y4-metin);
  font-weight: 600;
  cursor: pointer;
}
.y4-sss-madde > summary:hover { color: var(--y4-vurgu); }
.y4-sss-madde > p {
  margin: 0;
  padding: 0 var(--y4-bosluk-3) var(--y4-bosluk-3);
  color: var(--y4-metin-2);
  line-height: 1.7;
}

/* ── YAPIM DETAY (film / dizi) ────────────────────────────────────────
   ⚠ Afiş sabit px DEĞİL: taban genişlik + oran. Dar ekranda afiş ve
   bilgi alt alta geçer (flex-wrap), tek media query yazılmaz. */
.y4-yd-ust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-4);
  align-items: flex-start;
}
.y4-yd-afis {
  position: relative;
  flex: 0 1 14rem;
  min-inline-size: 10rem;
  aspect-ratio: 2 / 3;
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  background: var(--y4-yuzey-2);
  display: grid;
  place-items: center;
}
.y4-yd-afis img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.y4-yd-harf { font-size: 3rem; font-weight: 700; color: var(--y4-metin-3); }
.y4-yd-etiket {
  position: absolute;
  inset-block-start: var(--y4-bosluk-2);
  inset-inline-start: var(--y4-bosluk-2);
  padding: 0.15rem var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-vurgu);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
.y4-yd-bilgi { flex: 1 1 18rem; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
.y4-yd-orijinal { margin: 0; color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-yd-cipler { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }
.y4-yd-puan { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--y4-metin); }
.y4-yd-puan b { font-size: 1.25rem; }
.y4-yd-puan small { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.y4-yd-dugmeler { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }

.y4-yd-kunye {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2);
  margin-block-start: var(--y4-bosluk-4);
}
.y4-yd-kv {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 8rem;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-yd-kv small { color: var(--y4-metin-3); font-size: 0.68rem; letter-spacing: 0.06em; }
.y4-yd-kv b { color: var(--y4-metin); overflow-wrap: anywhere; }
.y4-yd-kv a { color: var(--y4-vurgu); }

.y4-yd-platform { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }
.y4-yd-pcip {
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
}

.y4-yd-kadro {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
.y4-yd-kisi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: var(--y4-bosluk-3) var(--y4-bosluk-2);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--y4-gecis);
}
.y4-yd-kisi:hover { border-color: var(--y4-vurgu); }
/* ⚠ Sayfası olmayan kişi tıklanabilir görünmez: 404 üretmesin. */
.y4-yd-kisi-pasif { cursor: default; }
.y4-yd-kisi b { font-size: var(--y4-yazi-kucuk); overflow-wrap: anywhere; }
.y4-yd-kisi small { color: var(--y4-metin-3); font-size: 0.7rem; }
.y4-yd-av {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: 50%;
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  font-weight: 700;
}

.y4-yd-fragman {
  aspect-ratio: 16 / 9;
  border-radius: var(--y4-yuvarlak-2);
  overflow: hidden;
  background: var(--y4-yuzey-2);
}
.y4-yd-fragman iframe { inline-size: 100%; block-size: 100%; border: 0; }

/* ── YUDUMFM: üç liste yan yana ───────────────────────────────────────
   ⚠ Akışkan: dar ekranda üçü alt alta düşer (auto-fit + taban genişlik),
   sabit üç sütun yazılmaz. */
.y4-fm-uclu {
  display: grid;
  gap: var(--y4-bosluk-3) var(--y4-bosluk-4);
  /* ⚠ Üç EŞİT sütun; taban 13rem'in altına düşerse ikiye, sonra teke
     iner. `1fr` üçü de aynı genişlikte tutar — içerik uzunluğu sütun
     genişliğini değiştirmez (minmax'in min'i 0 olmasa taşardı). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  align-items: start;
}
.y4-fm-liste { min-inline-size: 0; }
.y4-fm-top-adet {
  margin-inline-start: auto;
  color: var(--y4-metin-3);
  font-size: 0.72rem;
  font-weight: 600;
}
.y4-dj-bio {
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  line-height: 1.5;
}

/* ── YAZAR SAYFASI ────────────────────────────────────────────────────
   ⚠ Avatar sabit px değil rem: kullanıcı yazı boyutunu büyütünce
   künye de büyür, hizası bozulmaz. */
.y4-yzr-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-3) var(--y4-bosluk-4);
  margin-block-start: var(--y4-bosluk-2);
}
.y4-yzr-av {
  flex: none;
  inline-size: 5rem;
  block-size: 5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--y4-yuzey-2);
}
.y4-yzr-av-harf {
  display: grid;
  place-items: center;
  color: var(--y4-metin-2);
  font-size: 2rem;
  font-weight: 700;
}
.y4-yzr-ic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--y4-bosluk-2);
  flex: 1 1 16rem;
  min-inline-size: 0;
}
.y4-yzr-bio { margin: 0; color: var(--y4-metin-2); line-height: 1.6; }
.y4-yzr-sayi { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); font-weight: 600; }

/* ── PROGRAM DETAY ────────────────────────────────────────────────── */
.y4-prg-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-3);
  margin-block-start: var(--y4-bosluk-2);
}
.y4-prg-ikon {
  flex: none;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: var(--y4-yuvarlak-2);
  object-fit: contain;
  background: var(--y4-yuzey-2);
}
.y4-prg-harf {
  display: grid;
  place-items: center;
  color: var(--y4-metin-2);
  font-size: 2rem;
  font-weight: 700;
}
.y4-prg-ic { flex: 1 1 14rem; min-inline-size: 0; }
.y4-prg-gelistirici { margin: 0; color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }
.y4-prg-gelistirici a { color: var(--y4-vurgu); }

.y4-prg-rozet { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); margin-block-start: var(--y4-bosluk-3); }
.y4-prg-r {
  padding: 0.25rem var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
}
.y4-prg-r b { color: var(--y4-metin); }

.y4-prg-indir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-3);
  margin-block-start: var(--y4-bosluk-3);
}
.y4-prg-guven { color: var(--y4-olumlu); font-size: var(--y4-yazi-kucuk); font-weight: 600; }
.y4-prg-intro { margin-block: var(--y4-bosluk-4) 0; color: var(--y4-metin); line-height: 1.7; }
.y4-prg-etiketler { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); }
.y4-prg-etiket {
  padding: 0.2rem var(--y4-bosluk-3);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
}
.y4-prg-sha {
  margin: 0;
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  overflow-wrap: anywhere;
}
.y4-prg-sha code { font-family: ui-monospace, "SFMono-Regular", monospace; }

/* ── YAZILIM TİPİ MAKALE KUTUSU ─────────────────────────────────────── */
.y4-yzl-kutu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-4);
  margin-block: var(--y4-bosluk-4);
  padding: var(--y4-bosluk-3) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-inline-start: 3px solid var(--y4-vurgu);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-yzl-ic { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 12rem; min-inline-size: 0; }
.y4-yzl-ad { color: var(--y4-metin); font-size: var(--y4-yazi-orta); }
.y4-yzl-bilgi { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-3); color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); }

/* ── KEŞFET ŞERİDİ ──────────────────────────────────────────────────── */
.y4-kesfet {
  display: grid;
  gap: var(--y4-bosluk-3);
  /* ⚠⚠ 12rem TABAN 4+2 ÜRETİYORDU (17 Ağu 2026, ekran görüntüsü): Keşfet
     her türden BİR kayıt getiriyor — bugün 6 tür var. Dört sütunda alt
     sıra iki kartla yarım kalıyor, sağı boşluk oluyordu.
     22rem taban geniş ekranda 3 sütuna oturur (3+3), dar ekranda 2, en
     darda 1 — hepsi TAM SIRA. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.y4-kesfet-kart {
  display: flex;
  align-items: flex-start;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
  transition: border-color var(--y4-gecis), transform var(--y4-gecis);
}
.y4-kesfet-kart:hover { border-color: var(--y4-vurgu); transform: translateY(-2px); }
.y4-kesfet-ikon { flex: none; font-size: 1.35rem; line-height: 1.2; }
.y4-kesfet-ic { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
.y4-kesfet-tur { color: var(--y4-vurgu); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; }
.y4-kesfet-ic b { font-size: var(--y4-yazi-kucuk); line-height: 1.35; }
/* ⚠ Özet İKİ SATIRDA kesilir: kart boyları eşitlensin. Serbest bırakınca
   uzun özetli kart komşusundan iki kat uzun oluyor, ızgara kaykılıyordu. */
.y4-kesfet-ic small {
  color: var(--y4-metin-2);
  font-size: 0.72rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ⚠ Başlık da iki satır: uzun haber başlığı kartı şişiriyordu. */
.y4-kesfet-ic b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── TEK KİŞİLİK OYUN: oynanış ve künye ─────────────────────────────── */
.y4-oyn-detay {
  display: grid;
  gap: var(--y4-bosluk-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: start;
}
.y4-oyn-blok { min-inline-size: 0; }
.y4-oyn-kontrol { margin: 0; display: flex; flex-direction: column; gap: var(--y4-bosluk-2); }
.y4-oyn-kontrol-sat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-3);
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-oyn-kontrol-sat dt { flex: 0 0 6rem; color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); font-weight: 700; }
.y4-oyn-kontrol-sat dd { margin: 0; flex: 1 1 8rem; min-inline-size: 0; color: var(--y4-metin); font-size: var(--y4-yazi-kucuk); }
.y4-oyn-ipucu { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.35rem; }
.y4-oyn-ipucu li { color: var(--y4-metin); line-height: 1.6; }

.y4-oyn-kunye {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2);
  margin-block-start: var(--y4-bosluk-4);
}
.y4-oyn-et {
  padding: 0.2rem var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  text-decoration: none;
}
a.y4-oyn-et:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }

/* Kart meta satırı: türe göre tek bilgi (yıl · süre · köken · sürüm).
   ⚠ Özetin ÜSTÜNDE ve küçük: başlıkla yarışmasın, ama okunsun. */
.y4-kart-meta {
  color: var(--y4-metin-3);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── LİSTE ARAMA FORMU ────────────────────────────────────────────────
   ⚠ Akışkan: dar ekranda düğme alta geçer (flex-wrap + taban genişlik). */
.y4-ara-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2);
  margin-block-end: var(--y4-bosluk-3);
}
.y4-ara-form .y4-ara-alan { flex: 1 1 14rem; min-inline-size: 0; }

/* Ek kırılım şeridi (kategori şeridinden ayrı: Tümü / Yerli gibi). */
.y4-suzgec-ek {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2);
  margin-block-end: var(--y4-bosluk-3);
}

/* ── GRUP: duyuru & etkinlik satırı ──────────────────────────────── */
.y4-olay-tip { flex: none; font-size: 1.2rem; line-height: 1.3; }
.y4-olay-ic { display: flex; flex-direction: column; gap: 0.2rem; min-inline-size: 0; }
.y4-olay-ic b { color: var(--y4-metin); }
.y4-olay-alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2);
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
}
.y4-olay-kim { font-weight: 600; }
/* Sabitlenmiş duyuru: sıradan satırdan ayrılsın. */
.y4-olay-sabit { border-inline-start: 3px solid var(--y4-vurgu); }
.y4-olay-sabit-et { color: var(--y4-vurgu); font-weight: 700; }

/* Grup kartı alt satırı: üye sayısı + katılım tipi + durum. */
.y4-grup-alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--y4-bosluk-2); }
.y4-grup-rozet {
  padding: 0.1rem var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  font-size: 0.7rem;
  font-weight: 600;
}
/* Pasif grup: henüz 5 üyeye ulaşmamış, kanalı açılmamış. */
.y4-grup-pasif { color: var(--y4-uyari, var(--y4-metin-3)); }

/* ── MAÇ KARTI ────────────────────────────────────────────────────────
   Tek tanım, dört sayfa (fikstür · takım · lig · arama).
   ⚠ Akışkan: flex-wrap + taban genişlik. Dar ekranda skor/kanal alta
   geçer; nowrap + media query yazılmaz. */
.y4-mac-kart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-3) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  transition: border-color var(--y4-gecis), box-shadow var(--y4-gecis);
}
.y4-mac-kart:hover { border-color: var(--y4-vurgu); box-shadow: var(--y4-golge-1); }
/* Oynanmış maç geri planda kalsın ama okunaklı olsun. */
.y4-mac-bitti { background: transparent; }

.y4-mac-zaman {
  flex: 0 0 auto;
  min-inline-size: 3.5rem;
  text-align: center;
  color: var(--y4-metin);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
}
.y4-mac-zaman small {
  display: block;
  margin-block-start: 0.15rem;
  color: var(--y4-metin-2);
  font-size: 0.7rem;
  font-weight: 600;
}

.y4-mac-orta { flex: 1 1 14rem; min-inline-size: 0; }
.y4-mac-eslesme {
  display: block;
  color: var(--y4-metin);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}
.y4-mac-eslesme:hover { color: var(--y4-vurgu); }
.y4-mac-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--y4-bosluk-3);
  margin-block-start: 0.25rem;
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
}
.y4-mac-meta a {
  color: var(--y4-metin-2);
  text-decoration: none;
  border-block-end: 1px dotted var(--y4-cizgi);
}
.y4-mac-meta a:hover { color: var(--y4-vurgu); border-block-end-color: var(--y4-vurgu); }

.y4-mac-sag { flex: 0 0 auto; margin-inline-start: auto; display: flex; align-items: center; gap: var(--y4-bosluk-2); }
.y4-mac-skor {
  padding: 0.35rem var(--y4-bosluk-4);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-vurgu);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}
/* ⚠ nowrap YOK: kanal adları uzayabiliyor ("beIN Sports 1"), dar ekranda
   kartı taşırıyordu. */
.y4-mac-kanal {
  padding: 0.35rem var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
  max-inline-size: 100%;
}
.y4-mac-kanal::before { content: "📺 "; opacity: 0.75; }

/* Gün içindeki "Bitti" alt başlığı: oynanacaklardan ayırır. */
.y4-mac-gun-alt {
  margin-block: var(--y4-bosluk-3) var(--y4-bosluk-2);
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Lig kuralları kutusu (puan durumu altında). */
.y4-lig-kural {
  margin-block-start: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-3) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-lig-kural b { display: block; margin-block-end: var(--y4-bosluk-2); color: var(--y4-metin); }
.y4-lig-kural ul { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.3rem; }
.y4-lig-kural li { color: var(--y4-metin-2); font-size: var(--y4-yazi-kucuk); line-height: 1.6; }

/* ── İLETİŞİM: kanal kartları ───────────────────────────────────────── */
.y4-kanal-izgara {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.y4-kanal-kart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-kanal-kart b { color: var(--y4-metin); font-size: var(--y4-yazi-orta); }
.y4-kanal-kart p { margin: 0; color: var(--y4-metin-2); line-height: 1.65; }

/* Grup ayar formu — davranış kancası (wasm: grupAyarKaydet).
   ⚠ Görünümü .y4-form'dan gelir; bu sınıf yalnız hedefleme içindir. */
.y4-grup-ayar-form { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); }

/* ── ADIM LİSTESİ (rehber sayfaları) ────────────────────────────────── */
.y4-adim-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-3);
}
.y4-adim {
  display: flex;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-adim-no {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  border-radius: 50%;
  background: var(--y4-vurgu);
  color: #fff;
  font-weight: 800;
}
.y4-adim-ic {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--y4-bosluk-2);
  min-inline-size: 0;
}
.y4-adim-ic b { color: var(--y4-metin); font-size: var(--y4-yazi-orta); }
.y4-adim-ic p { margin: 0; color: var(--y4-metin-2); line-height: 1.65; }

/* Konuşma listesinde son mesaj zamanı. */
.y4-konusma-zaman {
  flex: none;
  align-self: flex-start;
  color: var(--y4-metin-3);
  font-size: 0.7rem;
  white-space: nowrap;
}
/* Kişi kartında takipçi sayısı (sıralamanın ölçüsü). */
.y4-kisi-sayi { color: var(--y4-metin-3); font-size: 0.72rem; font-weight: 600; }

/* ── ALT BİLGİ: grup sütunları ────────────────────────────────────────
   ⚠ Footer menüsü GRUP bazlı (bkz. base.html'deki not): her grup bir
   sütun — başlık + altındaki bağlantılar. Akışkan: sütunlar sığdığı
   kadar dizilir, dar ekranda alt alta geçer. */
.y4-alt-izgara {
  display: grid;
  gap: var(--y4-bosluk-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.y4-alt-grup { display: flex; flex-direction: column; gap: 0.3rem; min-inline-size: 0; }
.y4-alt-bas {
  margin-block-end: 0.2rem;
  color: var(--y4-cerceve-metin);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.y4-alt-grup a { font-size: var(--y4-yazi-kucuk); line-height: 1.7; }
.y4-alt-son {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-4);
  margin-block-start: var(--y4-bosluk-5);
  padding-block-start: var(--y4-bosluk-4);
  border-block-start: 1px solid var(--y4-cerceve-cizgi);
  color: var(--y4-cerceve-metin-2);
  font-size: var(--y4-yazi-kucuk);
}
.y4-alt-slogan { color: var(--y4-cerceve-metin-2); opacity: 0.85; }

/* Son çalınanlar: numara yerine sessiz nokta — sıralama değil, zaman. */
.y4-fm-no-bos { color: var(--y4-metin-3); font-weight: 400; }

/* ── ESKİ JETON KÖPRÜSÜ ───────────────────────────────────────────────
   ⚠⚠ NEDEN VAR (17 Ağu 2026, DJ panelinde görüldü): /varlik/*.js ortak
   DAVRANIŞ dosyalarıdır (yorum, yudumfm, oyna…) ve ürettikleri düğümlere
   SATIR İÇİ stil yazarken eski temanın değişkenlerini kullanıyorlar:
   --mor · --panel · --input · --kenar · --metin-2 · --metin-3.
   yudum4'te bu adlar tanımsız olduğu için tarayıcı stili düşürüyor:
   "Yayın Başlat" düğmesi zeminsiz kalıp okunmuyor, "Onayla" ham yeşil
   çıkıyordu (ekran görüntüsüyle sabit).

   ⚠ BU KOPYA DEĞİL, KÖPRÜ: eski temadan kural taşınmıyor — eski ADLAR
   yudum4 jetonlarına bağlanıyor. Tek yer, altı satır; JS'lerin hepsi
   birden düzelir.
   ⚠ Yeni kod bu adları KULLANMAZ; --y4-* jetonları esastır. */
:root {
  --mor: var(--y4-vurgu);
  --panel: var(--y4-yuzey);
  --input: var(--y4-yuzey-2);
  --kenar: var(--y4-cizgi);
  --metin-2: var(--y4-metin-2);
  --metin-3: var(--y4-metin-3);
  /* ⚠ Ortak JS'ler onay/iptal düğmesini SATIR İÇİ stille boyuyordu ve
     renk dosyada SABİTTİ (#16a34a / #ef4444) — CSS ezemez, tema ne olursa
     olsun aynı ham yeşil/kırmızı çıkıyordu (DJ paneli, ekran görüntüsü).
     JS artık `var(--olumlu)` / `var(--olumsuz)` yazıyor; karşılığı burada.
     ⚠ Eski temada bu adlar yok — JS'te yedek literal duruyor, orada
     görünüm değişmez. */
  --olumlu: var(--y4-olumlu);
  --olumsuz: var(--y4-olumsuz);
}

/* ── YUDUMFM: şarkı isteği kutusu ───────────────────────────────────── */
.y4-istek { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); }
.y4-istek-bas { display: flex; align-items: flex-start; gap: var(--y4-bosluk-3); }
.y4-istek-ikon { flex: none; font-size: 1.6rem; line-height: 1.2; }
.y4-istek-bas h3 { margin: 0 0 0.15rem; }
.y4-istek-alan { display: block; }
.y4-istek-alan .y4-ara-alan { inline-size: 100%; }
.y4-istek-ipucu {
  margin: 0;
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  line-height: 1.6;
}

/* ── YAYIN KAPALI HÂLİ ──────────────────────────────────────────────── */
.y4-yayin-kapali {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--y4-bosluk-3) var(--y4-bosluk-4);
  padding: var(--y4-bosluk-5) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-yayin-kapali-ikon { flex: none; font-size: 2rem; line-height: 1; }
.y4-yayin-kapali-ic {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
  flex: 1 1 18rem;
  min-inline-size: 0;
}
.y4-yayin-kapali-ic b { color: var(--y4-metin); font-size: var(--y4-yazi-orta); }
.y4-yayin-kapali-ic p { margin: 0; color: var(--y4-metin-2); line-height: 1.65; }
.y4-yayin-durum { color: var(--y4-metin); font-size: var(--y4-yazi-kucuk); font-weight: 700; }

/* Boş sohbet / boş liste satırı: sessiz kalmasın. */
.y4-msj-bos, .y4-fm-bos {
  margin: 0;
  padding: var(--y4-bosluk-3);
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  text-align: center;
  list-style: none;
}

/* ── DB İÇERİK SINIFLARI ──────────────────────────────────────────────
   ⚠⚠ NEDEN VAR (17 Ağu 2026, Selçuk: "bu mu yardım sayfası", "sağlam
   sayfa yok ki"): panelden yazılan sayfaların (yardım merkezi, servis
   komutları, SSS, kurallar…) gövdesi kendi HTML'ini taşıyor ve eski
   temanın AYRI CSS dosyalarına bağlıydı (t-yardim-1.css, t-servisler-1.css).
   yudum4 o dosyaları yüklemiyor → kart ızgaraları düz link yığınına,
   komut tabloları arka arkaya paragrafa çöküyordu. Ölçüldü: sayfa
   gövdelerinde 111 tanımsız sınıf.

   ⚠ ESKİ CSS KOPYALANMADI: sınıf ADLARI içeriğin sözleşmesi (yüzlerce
   sayfada yazılı, değiştirilemez); kurallar burada yudum4 jetonlarıyla
   sıfırdan yazıldı.
   ⚠ Yeni sayfa yazarken bu adlar KULLANILMAZ — y4 parçaları var. Bunlar
   yalnız mevcut içeriği ayakta tutar. */

/* Sayfa girişi (yardım merkezi karşılama metni). */
.yh-hero, .sayfa-hero {
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-inline-start: 3px solid var(--y4-vurgu);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.yh-hero p, .sayfa-hero p { margin: 0 0 var(--y4-bosluk-2); line-height: 1.7; }
.yh-hero p:last-child, .sayfa-hero p:last-child { margin-block-end: 0; }

.yh-bolum { margin-block-start: var(--y4-bosluk-5); }
.yh-not {
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
}

/* ── Kart ızgarası: yardım konuları ───────────────────────────────── */
.sayfa-kart-izgara {
  display: grid;
  gap: var(--y4-bosluk-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-block: var(--y4-bosluk-3);
}
.sayfa-kart {
  display: flex;
  align-items: flex-start;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  text-decoration: none;
  transition: border-color var(--y4-gecis), transform var(--y4-gecis);
}
.sayfa-kart:hover { border-color: var(--y4-vurgu); transform: translateY(-2px); }
.sayfa-kart-ikon { flex: none; font-size: 1.5rem; line-height: 1.2; }
.sayfa-kart-ad {
  display: block;
  color: var(--y4-metin);
  font-weight: 700;
  line-height: 1.35;
}
.sayfa-kart-alt {
  display: block;
  margin-block-start: 0.2rem;
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  line-height: 1.55;
}

/* ── Servis komut listesi (/servisler) ─────────────────────────────── */
.srv2-cmd {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--y4-bosluk-3) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  margin-block-end: var(--y4-bosluk-2);
}
.srv2-cmd-bas { color: var(--y4-vurgu); font-weight: 800; font-size: var(--y4-yazi-orta); }
.srv2-syn, .srv2-ex {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: var(--y4-yazi-kucuk);
  color: var(--y4-metin);
  background: var(--y4-yuzey-2);
  padding: 0.2rem var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-1);
  overflow-wrap: anywhere;
}
.srv2-ex { color: var(--y4-metin-2); }
.srv2-desc { color: var(--y4-metin-2); line-height: 1.6; }

/* ── SÜZGEÇ ŞERİDİ: tek satır ───────────────────────────────────────
   Öne çıkanlar solda, "Diğer" katlanır kutusu aynı satırın sonunda. */
.y4-suzgec-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2);
  margin-block-end: var(--y4-bosluk-3);
}
.y4-suzgec-satir .y4-suzgec { margin-block-end: 0; }
.y4-suzgec-satir .y4-suzgec-kat { margin-block-end: 0; }

/* ── GÜN SATIRI: tarih solda, puan durumu sağ uçta ─────────────────── */
.y4-mac-gun-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2) var(--y4-bosluk-3);
  margin-block: var(--y4-bosluk-4) var(--y4-bosluk-2);
}
.y4-mac-gun-satir .y4-mac-gun-bas { margin: 0; }
/* ⚠ Esnek boşluk yerine margin: ::after hilesi flex-wrap'te alt satıra
   düşünce boşluk kalıyordu. */
.y4-mac-gun-puan {
  margin-inline-start: auto;
  padding: 0.3rem var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--y4-gecis), color var(--y4-gecis), border-color var(--y4-gecis);
}
.y4-mac-gun-puan:hover { background: var(--y4-vurgu); border-color: var(--y4-vurgu); color: #fff; }

/* ── ORTAK WIDGET: ARKADAŞ YÖNETİMİ (tw-arky-*) ───────────────────────
   ⚠⚠ NEDEN VAR (17 Ağu 2026, Selçuk: "90'larda butonlar ilk çıktığında
   bunlar vardı"): `arkadas_yonetim` tema-bağımsız ortak bir widget ve
   kendi markup'ını üretiyor; görünümü eski temanın stil dosyasındaydı.
   yudum4 onu yüklemediği için tarayıcının HAM düğmeleri çıkıyordu —
   beyaz kutu, siyah yazı, çerçevesiz arama alanı.

   ⚠ ESKİ CSS KOPYALANMADI: sınıf ADLARI widget'ın sözleşmesi (Go'da
   üretiliyor, değiştirilemez); kurallar burada y4 jetonlarıyla yazıldı. */
.tw-arky { display: flex; flex-direction: column; gap: var(--y4-bosluk-3); }

.tw-arky-sekmeler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2);
}
.tw-arky-sekme {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey);
  color: var(--y4-metin-2);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--y4-gecis), border-color var(--y4-gecis), color var(--y4-gecis);
}
.tw-arky-sekme:hover { border-color: var(--y4-vurgu); color: var(--y4-vurgu); }
.tw-arky-sekme.aktif {
  background: var(--y4-vurgu);
  border-color: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
}
/* Sekmedeki sayaç rozeti. */
.tw-arky-n {
  padding: 0 0.4rem;
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  font-size: 0.7rem;
  font-weight: 700;
}
.tw-arky-sekme.aktif .tw-arky-n {
  /* ⚠ Serbest renk yok: seçili sekmede rozet, sekmenin kendi zemininden
     ayrılsın diye yarı saydam ZİT renk kullanır. */
  background: color-mix(in srgb, var(--y4-vurgu-zit) 25%, transparent);
  color: var(--y4-vurgu-zit);
}

.tw-arky-ara {
  inline-size: 100%;
  max-inline-size: 22rem;
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
}
.tw-arky-ara::placeholder { color: var(--y4-metin-3); }
.tw-arky-ara:focus-visible { outline: 2px solid var(--y4-vurgu); outline-offset: 1px; }

/* Liste gövdesi: kişi satırları. */
.tw-arky-govde {
  display: grid;
  gap: var(--y4-bosluk-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.tw-arky-sat {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-3);
  padding: var(--y4-bosluk-2) var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.tw-sk-av {
  flex: none;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--y4-yuzey-2);
}
.tw-arky-bil { display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; flex: 1; }
.tw-arky-ad { color: var(--y4-metin); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.tw-arky-ad:hover { color: var(--y4-vurgu); }
.tw-arky-durum { color: var(--y4-metin-3); font-size: var(--y4-yazi-kucuk); }
.tw-arky-rozet {
  padding: 0.1rem var(--y4-bosluk-2);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  font-size: 0.68rem;
  font-weight: 700;
}
.tw-arky-eylem { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); margin-inline-start: auto; }
.tw-arky-btn {
  padding: 0.3rem var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-3);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  font: inherit;
  font-size: var(--y4-yazi-kucuk);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--y4-gecis), color var(--y4-gecis), border-color var(--y4-gecis);
}
.tw-arky-btn:hover { background: var(--y4-vurgu); border-color: var(--y4-vurgu); color: var(--y4-vurgu-zit); }

/* Boş liste ve yükleniyor: "..." diye çıplak nokta bırakmasın. */
.tw-arky-bos, .tw-yukleniyor {
  padding: var(--y4-bosluk-4);
  border: 1px dashed var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  color: var(--y4-metin-3);
  font-size: var(--y4-yazi-kucuk);
  text-align: center;
}
.tw-ay-giris-uyari {
  padding: var(--y4-bosluk-3);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin-2);
  font-size: var(--y4-yazi-kucuk);
}

/* ── SİNEMA: seans durum rozeti ───────────────────────────────────────
   ⚠ Saat tek başına "geçti mi geçmedi mi" sorusunu cevaplamıyordu. */
.y4-sinema-rozet {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  margin-inline-end: 0.35rem;
  border-radius: var(--y4-yuvarlak-3);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.y4-sinema-canli { background: var(--y4-canli); color: #fff; }
.y4-sinema-sirada { background: var(--y4-yuzey-2); color: var(--y4-metin-2); }
.y4-sinema-bitti { background: transparent; border: 1px solid var(--y4-cizgi); color: var(--y4-metin-3); }
/* Biten seans satırı geri planda kalsın ama okunur olsun. */
.y4-sinema-sat:has(.y4-sinema-bitti) { opacity: 0.72; }

/* Sinema: oyuncu şeridi — ham virgüllü satır yerine okunur kutu. */
.y4-oyuncu-serit {
  padding: var(--y4-bosluk-3) var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: var(--y4-metin-2);
  line-height: 1.9;
}
.y4-oyuncu-serit a {
  color: var(--y4-vurgu);
  text-decoration: none;
  border-block-end: 1px dotted var(--y4-cizgi);
}
.y4-oyuncu-serit a:hover { border-block-end-color: var(--y4-vurgu); }

/* ═══════════════════════════════════════════════════════════════
   SOHBET GİRİŞ KARTI — /sohbet/* ve /radyo/* sayfalarının kapısı.
   ⚠ Bu sayfalarda gömülü webchat YOK (14 Ağu 2026 kararı); kart tek
     görünür eylem olduğu için radyo kimlik yüzeyini taşıyor —
     kaybolmasın diye. Renkler --y4-radyo-* jetonlarından, serbest
     hex YAZILMAZ (tools/tema_sifir_denetim.py bunu ölçüyor).
   ⚠ Yazı rengi --y4-kimlik-metin: zemin iki modda da koyu marka
     yüzeyi, açık modda beyaz yazı kaybolmasın diye ayrı jeton.
   ⚠ SABİT PX YOK: düğmeler flex-wrap ile akar (mobil ASIL durum).
   ══════════════════════════════════════════════════════════════ */
.y4-sohbet-giris {
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-3);
  margin: var(--y4-bosluk-5) 0;
  padding: var(--y4-bosluk-5);
  border-radius: var(--y4-yuvarlak-3);
  background: linear-gradient(135deg, var(--y4-radyo-1), var(--y4-radyo-2) 60%, var(--y4-radyo-3));
  box-shadow: var(--y4-golge-2);
  color: var(--y4-kimlik-metin);
}
.y4-sg-dugmeler { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-3); }
.y4-sg-ana, .y4-sg-alt {
  display: inline-flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: 0.8rem 1.5rem;
  border-radius: var(--y4-yuvarlak-2);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.y4-sg-ana { background: var(--y4-kimlik-metin); color: var(--y4-radyo-1); }
.y4-sg-alt { background: var(--y4-radyo-katman-2); color: var(--y4-kimlik-metin); }
.y4-sg-ana:hover, .y4-sg-alt:hover { transform: translateY(-1px); }
.y4-sg-alt:hover { background: var(--y4-radyo-katman-3); }
.y4-sg-not { font-size: 0.85rem; opacity: 0.92; }
.y4-sg-not a { color: var(--y4-kimlik-metin); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   ODA BULUTU — sohbet/radyo sayfalarının iç bağlantı ağı.
   ⚠⚠ SÜZGEÇ ŞERİDİ KULLANMA (18 Ağu 2026, Selçuk: "81 şehir nerede"):
      .y4-suzgec yatay kaydırmalı bir şerit ve kaydırma çubuğu gizli —
      81 şehrin yalnız ilk 6-7'si görünüyordu, gerisi ekran dışında
      kalıyordu. Bu listeler SÜZGEÇ DEĞİL, sayfanın kardeş bağlantıları:
      hepsi görünmek zorunda (hem kullanıcı hem arama motoru için).
      Bu yüzden sarar (flex-wrap), kaydırmaz.
   ══════════════════════════════════════════════════════════════ */
.y4-oda-bulut {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-2);
  margin: var(--y4-bosluk-3) 0 var(--y4-bosluk-5);
}
.y4-oda-etiket {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  font-size: 0.875rem;
  text-decoration: none;
}
.y4-oda-etiket:hover {
  background: var(--y4-vurgu);
  border-color: var(--y4-vurgu);
  color: var(--y4-vurgu-zit);
}

/* ═══════════════════════════════════════════════════════════════
   /yudumsosyal — platform tanıtım sayfası.
   ⚠ yudum-yeni'deki .sis-* bloklarının yudum4 karşılığı (18 Ağu 2026).
     Hero marka yüzeyini taşır (radyo kutusuyla aynı jetonlar), kutular
     normal yüzey. Serbest hex yok, hepsi jeton.
   ══════════════════════════════════════════════════════════════ */
.y4-sis-hero {
  margin: var(--y4-bosluk-5) 0;
  padding: var(--y4-bosluk-6, 2rem);
  border-radius: var(--y4-yuvarlak-3);
  background: linear-gradient(135deg, var(--y4-radyo-1), var(--y4-radyo-2) 55%, var(--y4-radyo-3));
  box-shadow: var(--y4-golge-2);
  color: var(--y4-kimlik-metin);
}
.y4-sis-h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 var(--y4-bosluk-3); }
.y4-sis-slogan { font-size: 1.05rem; line-height: 1.65; margin: 0 0 var(--y4-bosluk-4); opacity: 0.95; }
.y4-sis-surum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--y4-bosluk-2); margin-bottom: var(--y4-bosluk-3); }
.y4-sis-etiket { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.y4-sis-surum code {
  padding: 0.2rem 0.6rem;
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-radyo-katman-2);
  font-size: 0.85rem;
}
.y4-sis-alt { font-size: 0.9rem; opacity: 0.9; margin: 0; }

.y4-sis-yenilik {
  display: flex;
  align-items: center;
  gap: var(--y4-bosluk-4);
  margin-bottom: var(--y4-bosluk-5);
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: inherit;
  text-decoration: none;
}
.y4-sis-yenilik:hover { border-color: var(--y4-vurgu); }
.y4-sis-yenilik-ikon { font-size: 1.6rem; }
.y4-sis-yenilik-ic { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 12rem; }
.y4-sis-yenilik-ic span { color: var(--y4-metin-2); font-size: 0.9rem; }
.y4-sis-yenilik-ok { color: var(--y4-vurgu); font-size: 1.2rem; }

/* ⚠ SABİT SÜTUN SAYISI YOK: auto-fit ile akar, mobilde tek sütuna iner. */
.y4-sis-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--y4-bosluk-4);
  margin-bottom: var(--y4-bosluk-5);
}
.y4-sis-kutu {
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-sis-kutu h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 var(--y4-bosluk-2); }
.y4-sis-kutu p { color: var(--y4-metin-2); line-height: 1.7; margin: 0; font-size: 0.94rem; }
.y4-sis-baglanti { margin-top: var(--y4-bosluk-3); }
.y4-sis-baglanti a { color: var(--y4-vurgu); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   JETON KÖPRÜSÜ — ortak varlık CSS'leri için (y-sosyal.css vb.)
   ⚠⚠ NEDEN (18 Ağu 2026, Selçuk: "içerik kopyalayıp style css"):
      DB'den gelen sayfa metinleri kendi sınıflarını taşıyor (ys-giris,
      ys-cta, ys-btn…) ve o kurallar TEMA BAĞIMSIZ ortak dosyada
      (/varlik/y-sosyal.css) duruyor. O dosya eski jeton adlarını
      kullanıyor: --y-vurgu, --zemin, --y-r-*, --y-g-*. yudum4'te bu
      adların HİÇBİRİ tanımlı değildi; kurallar fallback değerlerle
      çalışıyor, temanın rengine/ritmine hiç uymuyordu.
      Kuralları temaya KOPYALAMAK yerine adları köprüledik — tek kaynak
      ortak dosyada kalır, görünüm yudum4 jetonlarından gelir.
      (Aynı desen 17 Ağu'da DJ paneli için kurulmuştu.)
   ══════════════════════════════════════════════════════════════ */
:root {
  --y-vurgu: var(--y4-vurgu);
  --y-vurgu-hafif: var(--y4-vurgu-2);
  --y-vurgu-dolgu: var(--y4-vurgu-zit);
  --y-g-vurgu: var(--y4-golge-2);
  --y-g-1: var(--y4-golge-1);
  --y-g-2: var(--y4-golge-2);
  --y-gecis: 0.15s ease;
  --y-r-s: var(--y4-yuvarlak-1);
  --y-r-m: var(--y4-yuvarlak-2);
  --y-r-l: var(--y4-yuvarlak-3);
  --y-r-tam: 999px;
  --y-bosluk-1: var(--y4-bosluk-2);
  --y-bosluk-2: var(--y4-bosluk-3);
  --y-bosluk-3: var(--y4-bosluk-4);
  --zemin: var(--y4-zemin);
  --zemin-2: var(--y4-yuzey);
  --zemin-3: var(--y4-yuzey-2);
  --cizgi: var(--y4-cizgi);
  --metin: var(--y4-metin);
}

/* ═══════════════════════════════════════════════════════════════
   SÜRÜM NOTU — /yudumsosyal/yenilikler/<slug>
   ⚠ Sayfa "başlık + düz satır" hâlindeydi (18 Ağu 2026, Selçuk:
     "güzel bir dizayn yapmaya bile üşenmişsin"): sürüm ve tarih tek
     gri satırdı, tarih ham ISO damgasıydı, özet gövdeden ayrışmıyordu.
     Künye rozetlere, özet lead'e, gezinme iki gerçek karta çevrildi.
   ══════════════════════════════════════════════════════════════ */
.y4-not-kunye { display: flex; flex-wrap: wrap; gap: var(--y4-bosluk-2); margin-bottom: var(--y4-bosluk-4); }
.y4-not-rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey-2);
  color: var(--y4-metin-2);
  font-size: 0.82rem;
}
.y4-not-ozet {
  margin: 0 0 var(--y4-bosluk-5);
  padding: var(--y4-bosluk-4);
  border-inline-start: 3px solid var(--y4-vurgu);
  border-radius: var(--y4-yuvarlak-1);
  background: var(--y4-yuzey);
  color: var(--y4-metin);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* ⚠ İKİ KART YAN YANA, TEK SÜTUNA İNER: sabit genişlik yok. Yalnız
   biri varsa (en eski / en yeni not) tek kart tam satırı kaplamaz —
   yönü belli olsun diye sağdaki sağa yaslanır. */
.y4-not-gezinme {
  display: flex;
  flex-wrap: wrap;
  gap: var(--y4-bosluk-3);
  margin: var(--y4-bosluk-5) 0;
}
.y4-not-gez {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 15rem;
  padding: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  color: inherit;
  text-decoration: none;
}
.y4-not-gez:hover { border-color: var(--y4-vurgu); }
.y4-not-gez-sag { text-align: end; margin-inline-start: auto; }
.y4-not-gez-yon { color: var(--y4-vurgu); font-size: 0.82rem; font-weight: 600; }
.y4-not-gez-bas { color: var(--y4-metin); font-weight: 700; }

/* ═══ ÜST ÇUBUK SOHBET DÜĞMESİ ═══════════════════════════════════════
   ⚠ Sitenin en görünür sohbet kapısı. Eski temada vardı, yudum4'e
   taşınmamıştı (18 Ağu 2026). Marka yüzeyini taşır ki menüde kaybolmasın.
   ⚠ Dar ekranda gizlenmez — asıl giriş yolu bu; yalnız yazısı kısalır. */
/* ⚠⚠ MOBİLDE TAŞIRIYORDU (18 Ağu 2026, Selçuk ekran görüntüsüyle:
   "bu mobilde nasıl olur, responsive ne oldu"): düğmeye `white-space:
   nowrap` yazıp "dar ekranda gizlenmez" notu düşmüştüm — marka, hamburger,
   düğme ve üç ikon aynı satıra sığmayınca marka kırpılıyor, çubuk taşıyordu.
   Projenin kendi kuralı bunun tersi: "nowrap + tek media query = kesin
   hata; akışkan kural kullan".
   Çözüm: düğme dar ekranda YAZISINI bırakır, ikonla kalır — kaybolmaz,
   sıkıştırmaz. Geniş ekranda yazı geri gelir. */
.y4-ust-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--y4-bosluk-2);
  flex: 0 0 auto;
  padding: 0.5rem 1.1rem;
  border-radius: var(--y4-yuvarlak-2);
  background: linear-gradient(135deg, var(--y4-radyo-2), var(--y4-radyo-3));
  color: var(--y4-kimlik-metin);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
/* Dar ekran: yazı düşer, düğme ikon olarak kalır (44px dokunma hedefi). */
@media (max-width: 54.99rem) {
  .y4-ust-cta {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    font-size: 0;
  }
  .y4-ust-cta::before {
    content: "💬";
    font-size: 1.15rem;
    line-height: 1;
  }
}
.y4-ust-cta:hover { filter: brightness(1.08); }

/* ═══════════════════════════════════════════════════════════════
   MAÇ VİDEOLARI — content/spor_video.go'nun bastığı blok.
   ⚠⚠ HİÇBİR TEMADA STİLİ YOKTU (18 Ağu 2026, Selçuk ekran görüntüsüyle:
      "kod çalacağım tembellik edeceğim diye yaptığın iframe"): Go tarafı
      `mac-videolar / mv-kutu / mv-bas / mv-not` sınıflarıyla iframe
      basıyor ama bu adlar ne yudum4'te ne eski temada tanımlıydı —
      oynatıcı tarayıcının varsayılan 300×150 kutusunda, sayfanın
      ortasında küçük ve çerçevesiz duruyordu.
   ⚠ SABİT YÜKSEKLİK YOK: 16:9 oran (aspect-ratio) ile ekrana uyar;
      mobilde de kırpılmaz.
   ══════════════════════════════════════════════════════════════ */
/* ⚠⚠ TEK SÜTUN, TAM GENİŞLİK (18 Ağu 2026, Selçuk: "video haber resmi tam
   satırı kaplayacak, futbolda yaptığın salaklığı yapmadın di mi"): burada
   `auto-fit minmax(20rem)` yazılıydı, geniş ekranda maç videoları iki-üç
   sütuna bölünüp küçücük kalıyordu. Video sayfanın ana içeriğidir; yazı
   genişliğinde, tek sütunda durur. */
.mac-videolar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--y4-bosluk-4);
  margin-block: var(--y4-bosluk-4);
}
.mv-kutu {
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  overflow: hidden;
}
.mv-kutu iframe {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  block-size: auto;
  border: 0;
}
.mv-bas {
  padding: var(--y4-bosluk-3) var(--y4-bosluk-4);
  color: var(--y4-metin);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
}
.mv-not {
  color: var(--y4-metin-2);
  font-size: 0.82rem;
  margin-block-end: var(--y4-bosluk-5);
}

/* ═══ DETAY: GÖRSEL SOLDA (kişi portresi) ═══════════════════════════════
   ⚠ Kimdir sayfası için: portre tam genişlik basılınca sayfa "dev fotoğraf
   + altında metin" oluyordu; eski temada fotoğraf solda, yazı sağında
   üstten başlıyordu (18 Ağu 2026). Yalnız `.y4-detay-yan` işaretli
   sayfalar etkilenir — haber/tarif düzeni değişmez.
   ⚠ Dar ekranda tek sütuna iner; sabit genişlik yok. */
@media (min-width: 48rem) {
  .y4-detay-yan {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: var(--y4-bosluk-5);
    align-items: start;
  }
  .y4-detay-yan > .y4-detay-medya { margin: 0; }
  .y4-detay-yan > .y4-detay-medya img { inline-size: 100%; block-size: auto; border-radius: var(--y4-yuvarlak-2); }
  .y4-detay-yan > .y4-detay-govde { margin-block-start: 0; }
}

/* ═══ GÜNÜN TESTİ (sağ sütun) ═══════════════════════════════════════════
   ⚠ Tek kart, tek davet: kapak görseli zemin, testin adı üstünde.
   Kategori/etiket yok (18 Ağu 2026, Selçuk'un isteği).
   ⚠ Yazı okunurluğu PERDEYLE: kapak açık renkli olsa da alt yarıya inen
   karartma metni taşır — jetondan gelir, serbest renk yazılmaz.
   ⚠ SABİT YÜKSEKLİK YOK: 4/5 oran, dar sütunda da kırpılmaz. */
.y4-test-kart {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--y4-yuvarlak-2);
  aspect-ratio: 4 / 5;
  text-decoration: none;
  box-shadow: var(--y4-golge-1);
}
.y4-test-gorsel {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale 0.35s ease;
}
.y4-test-kart:hover .y4-test-gorsel { scale: 1.04; }
.y4-test-perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--y4-perde-yok) 35%, var(--y4-perde-tam));
}
.y4-test-ic {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--y4-bosluk-2);
  padding: var(--y4-bosluk-4);
  color: var(--y4-perde-metin);
}
.y4-test-baslik {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.32;
  text-shadow: var(--y4-mac-golge);
}
.y4-test-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--y4-bosluk-2);
  font-size: 0.78rem;
}
.y4-test-sayi {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--y4-radyo-katman-2);
  font-weight: 700;
}
.y4-test-cagri { font-weight: 700; opacity: 0.95; }

/* ═══ SOHBETE GİR — DAVET KARTI (üst bölge) ═════════════════════════════
   ⚠ Sayfanın en üstündeki kapı: tıklanan her yer sohbete götürür.
   ⚠ Görsel varsa zemin olur, yoksa marka gradyanı — kart her hâlükârda
     basılır (18 Ağu 2026, Selçuk: "ilk görsel sohbetle ilgili cıvıl cıvıl").
   ⚠ Yazı okunurluğu perdeyle; jetondan gelir, serbest renk yok. */
.y4-sohbet-davet {
  position: relative;
  display: block;
  overflow: hidden;
  margin-block-end: var(--y4-bosluk-4);
  border-radius: var(--y4-yuvarlak-3);
  background: linear-gradient(120deg, var(--y4-radyo-1), var(--y4-radyo-2) 55%, var(--y4-radyo-3));
  box-shadow: var(--y4-golge-2);
  text-decoration: none;
}
.y4-sohbet-gorsel {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.y4-sohbet-gorselli::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--y4-perde-tam), var(--y4-perde-yok));
}
.y4-sohbet-ic {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--y4-bosluk-3) var(--y4-bosluk-5);
  padding: var(--y4-bosluk-5);
  color: var(--y4-kimlik-metin);
}
.y4-sohbet-gorselli .y4-sohbet-ic { color: var(--y4-perde-metin); }
.y4-sohbet-metin { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 16rem; }
.y4-sohbet-baslik { font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 800; line-height: 1.25; }
.y4-sohbet-alt { font-size: 0.92rem; opacity: 0.92; }
.y4-sohbet-dug {
  display: inline-flex;
  align-items: center;
  gap: var(--y4-bosluk-2);
  padding: 0.7rem 1.4rem;
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-kimlik-metin);
  color: var(--y4-radyo-1);
  font-weight: 800;
  white-space: nowrap;
}
.y4-sohbet-davet:hover .y4-sohbet-dug { transform: translateY(-1px); }

/* ═══ REKLAM ALANLARI ═══════════════════════════════════════════════════
   ⚠ Konum adları eski temayla aynı (header_bottom / content_top /
     content_bottom / footer) — panelde tanımlı reklamlar yeni temada da
     aynı yere düşsün diye. Yudum4'te bu alanların HİÇBİRİ yoktu.
   ⚠ Yükseklik sabitlenmez: reklam gelmezse blok hiç basılmaz ({{with}}),
     boş yer tutucu bırakılmaz. */
.y4-reklam {
  display: flex;
  justify-content: center;
  margin-inline: auto;
  inline-size: min(100%, var(--y4-kabuk));
  padding-inline: var(--y4-bosluk-4);
}
.y4-reklam-ust { margin-block: var(--y4-bosluk-3) 0; }
.y4-reklam-icerik { margin-block: var(--y4-bosluk-4); }
.y4-reklam-alt { margin-block: var(--y4-bosluk-5) var(--y4-bosluk-3); }
.y4-reklam > * { max-inline-size: 100%; }

/* ═══ VİDEO AÇIKLAMASI ══════════════════════════════════════════════════
   ⚠ YouTube açıklaması tek yığın metin gelir (şarkı sözü olan videolarda
     yüzlerce kelime). Başlıkla oynatıcı arasına konunca sayfa okunmaz
     oluyordu — artık oynatıcının ALTINDA ve okunur ölçüde.
   ⚠ Satır sonları korunur: metin tek paragraf olsa da nefes alsın. */
/* ⚠⚠ İÇ KAYDIRMA YOK (18 Ağu 2026, Selçuk: "scroll çıkardın video
   açıklamasında, tüm kodları pc ile sabitlemişsin"): önce sabit
   `max-block-size: 22rem` + `overflow-y: auto` konmuştu — sayfa içinde
   ikinci bir kaydırma alanı, mobilde iç içe kaydırma demek. Uzun
   açıklama artık KATLANIR: kapalı başlar, tıklayınca tamamı akar.
   Sabit yükseklik yok, kaydırma yok. */
.y4-video-aciklama {
  margin-block-end: var(--y4-bosluk-4);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
}
.y4-video-aciklama > summary {
  padding: var(--y4-bosluk-3) var(--y4-bosluk-4);
  color: var(--y4-metin);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: list-item;
}
.y4-video-aciklama > summary::-webkit-details-marker { display: none; }
.y4-video-aciklama > summary::after { content: " ▾"; color: var(--y4-vurgu); }
.y4-video-aciklama[open] > summary::after { content: " ▴"; }
.y4-video-aciklama-metin {
  padding: 0 var(--y4-bosluk-4) var(--y4-bosluk-4);
  white-space: pre-line;
  color: var(--y4-metin-2);
  font-size: 0.95rem;
  line-height: 1.75;
}

/* Video sayfası: süre satırı — künye şeridinin altında ince bilgi. */
.y4-video-sure-satir {
  margin-block: calc(-1 * var(--y4-bosluk-2)) var(--y4-bosluk-4);
  color: var(--y4-metin-3);
  font-size: 0.85rem;
}


/* ═══ GÖVDEYE GÖMÜLÜ VİDEO ══════════════════════════════════════════════
   ⚠ İçerikten gelen <iframe> (YouTube gömme) tarayıcı varsayılanında
     300×150 kutuda kalıyordu — haberin ortasında minik bir pencere.
     Yazı genişliğinde, 16:9 oranında basılır. */
.y4-detay-govde iframe,
.y4-yazi-blok iframe {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  block-size: auto;
  margin-block: var(--y4-bosluk-4);
  border: 0;
  border-radius: var(--y4-yuvarlak-2);
}

/* Yan sütun reklamı — widget'ların altında, sütun genişliğinde. */
.y4-reklam-yan {
  padding-inline: 0;
  inline-size: 100%;
  margin-block-start: var(--y4-bosluk-3);
}

/* ═══ SÜZGEÇ AÇILIR MENÜSÜ ══════════════════════════════════════════════
   ⚠ Tek düğme: seçili süzgecin adı; tıklayınca kategoriler açılır.
   Düğme şeridi 12 kategoride mobilde taşıyordu (18 Ağu 2026).
   ⚠ <details> — JS'siz, dokunmatikte çalışır. */
.y4-suzgec-menu {
  position: relative;
  margin-block-end: var(--y4-bosluk-4);
  inline-size: fit-content;
  max-inline-size: 100%;
}
.y4-suzgec-menu > summary {
  cursor: pointer;
  list-style: none;
  display: list-item;
}
.y4-suzgec-menu > summary::-webkit-details-marker { display: none; }
.y4-suzgec-menu > summary::after { content: " ▾"; }
.y4-suzgec-menu[open] > summary::after { content: " ▴"; }
.y4-suzgec-liste {
  position: absolute;
  z-index: 40;
  inset-inline-start: 0;
  margin-block-start: var(--y4-bosluk-2);
  display: grid;
  gap: var(--y4-bosluk-1);
  min-inline-size: 12rem;
  max-inline-size: min(90vw, 22rem);
  max-block-size: 60vh;
  overflow-y: auto;
  padding: var(--y4-bosluk-2);
  border: 1px solid var(--y4-cizgi);
  border-radius: var(--y4-yuvarlak-2);
  background: var(--y4-yuzey);
  box-shadow: var(--y4-golge-2);
}