/* ===========================================================================
   radyocanlar.com — ON YUZ TEMASI (21.10.2026, sifirdan)
   ---------------------------------------------------------------------------
   Bu dosya temel.css'in yerini aliyor. Eskisi yamalana yamalana uc ayri
   kimligin (bej, kirmizi, lacivert) ustuste bindigi 3000 satirlik bir
   katmana donmustu; kullanicinin tarifi "atil, eski, ciddiyetsiz".

   REFERANS: passly.me (yumusak, ferah, yuvarlak, acik) + radivu.com (muzik
   uygulamasi iskeleti: kapakli kart raflari, canli rozeti, kalici oynatici).
   Hedef ikisinin arasi — ACIK ve YUMUSAK bir muzik uygulamasi.

   TASARIM KURALLARI
     1. Zemin acik kalir. Gece modu ayri bir mod; gunduzu koyulastirmak
        ikisini ayni sey yapar.
     2. Ayrim CIZGIYLE degil BOSLUK ve YUMUSAK GOLGE ile kurulur.
     3. Her kose yuvarlak; dugmeler hap, kartlar 20-24px.
     4. Tek doygun renk: kirmizi (canli/eylem). Geri kalan notr + cok soluk
        yikama.
     5. Tek transport dugmesi. Oynatici ust barda; baska yerde oynat/duraklat
        dugmesi CIZILMEZ.

   BOLUMLER
     0 Yazi tipi      5 Dugmeler        10 Raflar ve kartlar
     1 Degiskenler    6 Rozet/etiket    11 Sohbet
     2 Taban          7 Ust bar         12 Formlar ve tablolar
     3 Duzen          8 Oynatici        13 Alt bilgi
     4 Tipografi      9 Kapak (hero)    14 Yardimcilar / ekran genislikleri
   ======================================================================== */

/* --- 0. Yazi tipi --------------------------------------------------------
   Figtree: yumusak, geometrik, dost; "soft" tarifinin yazi karsiligi.
   Degisken font — tek dosya butun kalinliklari tasiyor (20 KB).
   Turkce harfler (Ğ ğ İ ı Ş ş ₺) ayri 2 KB'lik dosyada; unicode-range
   sayesinde o harfler gecmeyen sayfada hic indirilmiyor.
   Google'dan CANLI cekilmiyor: ucuncu sunucuya istek yok. */
@font-face {
  font-family: 'Figtree';
  font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('/varlik/font/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal; font-weight: 300 900; font-display: swap;
  src: url('/varlik/font/figtree-tr.woff2') format('woff2');
  unicode-range: U+011E-011F, U+0130-0131, U+015E-015F, U+20BA;
}

/* --- 1. Degiskenler ----------------------------------------------------- */

:root {
  color-scheme: light;

  /* NOTR RAMPA — serin, acik.
     21.10.2026 DUZELTMESI: sayfa zemini #fbfcfe idi, kartlar #ffffff.
     Aradaki fark %1'den azdi; kullanicinin tarifi "sayfa o kadar beyaz ki
     butun moduller birbirinin icine girmis gibi, goz yorucu". Yumusak
     tasarim demek FARKSIZ demek degil — kart ile sayfa arasinda gozle
     secilebilen bir ton farki olmali, yoksa ayrimi yalnizca 1px cizgi
     tasimaya calisiyor ve sayfa duz bir beyaz levhaya donuyor.
     Sayfa zemini bir basamak koyulastirildi; kartlar beyaz kaldi. */
  --zemin:    #eef2f8;
  --zemin-2:  #ffffff;
  --zemin-3:  #f2f6fb;
  --zemin-4:  #e3ebf5;
  --cizgi:    #e2e9f3;
  --cizgi-2:  #cfdae9;

  --metin:    #15202e;
  --metin-2:  #4d5e73;
  --metin-3:  #78879b;

  /* TEK DOYGUN RENK. Kirmizi yayincilikta "canli/kayit" demek; sitenin
     armasi da kirmizi. Dolgu tonu ile YAZI tonu ayri: #e03b3b beyaz
     uzerinde 3.9 kontrast veriyor, yazi olarak AA'yi gecmiyor. */
  --kirmizi:      #e03b3b;
  --kirmizi-koyu: #c0282f;
  --kirmizi-yazi: #c0282f;
  --kirmizi-sis:  #fdeeee;

  --yesil:      #16a06a;
  --yesil-yazi: #0f7a50;
  --yesil-sis:  #e8f7f0;

  --altin:      #b1811c;
  --altin-sis:  #fdf3e0;

  /* Yumusak yikama — kapak ve vurgulu bolumlerin zemini. Doygun degil;
     sayfanin "nefes aldigi" hissi buradan geliyor. */
  --yikama-1: #f1f1fc;
  --yikama-2: #fdf0f0;
  --yikama-3: #eef5fd;

  /* OLCU */
  --kose:    14px;
  --kose-l:  20px;
  --kose-xl: 26px;
  --hap:     999px;

  /* GOLGE — genis yayilim, cok dusuk alfa. Sert golge "yapistirilmis
     kagit" etkisi veriyor; yumusak tasarimda golge gorunmemeli, yalniz
     yuzeyi zeminden ayirmali. */
  --golge-1: 0 1px 2px rgba(21, 32, 46, .05), 0 6px 18px rgba(21, 32, 46, .06);
  --golge-2: 0 2px 6px rgba(21, 32, 46, .06), 0 14px 36px rgba(21, 32, 46, .08);
  --golge-3: 0 6px 16px rgba(21, 32, 46, .08), 0 28px 64px rgba(21, 32, 46, .12);

  --hiz:      .16s cubic-bezier(.4, 0, .2, 1);
  --hiz-yay:  .34s cubic-bezier(.22, 1, .36, 1);

  --yazi: 'Figtree', system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --ust-h:    92px;
  /* Ust bar + menu seridi birlikte (72 + 52 + 1px cizgi). Yan dikey
     reklamlar position:fixed oldugu icin kendi ustlerini bu degerden
     hesapliyor; kapagin ust dolgusu da ayni degiskene bagli, boylece
     "CANLI YAYIN" rozeti ile reklamlarin ust kenari AYNI HIZADA basliyor
     (kullanici istegi, 21.10.2026). */
  --bas-h:    145px;
  --kapak-ust: 1.65rem;
  --alt-h:    62px;
  --player-h: 64px;
  /* DINLE dairesinin alt seritten yukari tasma miktari. Oynatici seridi
     de ayni degeri alt dolgu olarak kullaniyor, yoksa daire parca adinin
     uzerine biniyor. */
  --dinle-tasma: 24px;
  /* DINLE dairesinin capi ve etiketinin seridin dibine uzakligi. Daire
     mutlak konumlu; merkezi seridin ust cizgisinde durdugu icin tasma
     capin yarisi kadar. */
  --daire-boy: 52px;
  --dinle-etiket-dip: 10px;
  /* Transport dugmeleri YouTube kirmizisi (kullanici istegi): "oynat"
     isareti her yerde ayni, taninan renkte. Sitenin kendi kirmizisi
     (--kirmizi) daha yumusak bir ton; o diger eylemlerde kaliyor. */
  --youtube:  #ff0000;
  --youtube-koyu: #d90000;
  --kap:      1180px;
}

/* --- GECE MODU ------------------------------------------------------------
   Ayri bir mod; gunduzun koyulastirilmis hali DEGIL. Ayni yumusaklik,
   ayni yuvarlaklik, yalniz rampa ters. */
:root[data-tema="koyu"] {
  color-scheme: dark;

  --zemin:    #0e1620;
  --zemin-2:  #16202c;
  --zemin-3:  #1c2835;
  --zemin-4:  #243141;
  --cizgi:    #243141;
  --cizgi-2:  #304052;

  --metin:    #f2f6fa;
  --metin-2:  #b9c7d6;
  --metin-3:  #8698a9;

  --kirmizi:      #f05252;
  --kirmizi-koyu: #d13a3a;
  --kirmizi-yazi: #ff8e8e;
  --kirmizi-sis:  rgba(240, 82, 82, .14);

  --yesil:      #25b57c;
  --yesil-yazi: #4fd49e;
  --yesil-sis:  rgba(37, 181, 124, .14);

  --altin:      #e2ac45;
  --altin-sis:  rgba(226, 172, 69, .14);

  --yikama-1: #161f2d;
  --yikama-2: #1d1a24;
  --yikama-3: #141e2b;

  --golge-1: 0 1px 2px rgba(0, 0, 0, .3),  0 6px 18px rgba(0, 0, 0, .28);
  --golge-2: 0 2px 6px rgba(0, 0, 0, .34), 0 14px 36px rgba(0, 0, 0, .34);
  --golge-3: 0 6px 16px rgba(0, 0, 0, .4), 0 28px 64px rgba(0, 0, 0, .44);
}

/* --- 2. Taban ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 400 16px/1.65 var(--yazi);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe, video { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--kirmizi);
  outline-offset: 2px;
  border-radius: 6px;
}
::selection { background: var(--kirmizi); color: #fff; }

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--kirmizi); color: #fff; padding: .8rem 1.3rem;
  border-radius: 0 0 var(--kose) 0; font-weight: 700;
}
.atla:focus { left: 0; }

.gizli-gorsel {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* --- 3. Duzen ----------------------------------------------------------- */

.kap {
  width: 100%; max-width: var(--kap);
  margin: 0 auto; padding-left: 20px; padding-right: 20px;
}
.kap-dar { max-width: 760px; }

.sayfa-kap { padding-top: 2rem; padding-bottom: 3.5rem; }

main { display: block; }

/* --- 4. Tipografi -------------------------------------------------------
   Tek aile, agirlik ve aralikla hiyerarsi. Yumusak tasarimda baslik
   "bagirmaz": buyur ama sakin kalir, satir araligi sikidir. */
h1, h2, h3, h4 {
  margin: 0 0 .6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.8rem, 1.35rem + 1.9vw, 2.7rem); letter-spacing: -.034em; }
h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem); letter-spacing: -.03em; }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; letter-spacing: -.015em; }
p  { margin: 0 0 1rem; }

time, .calan-saat, .kusak-saat, .sayi-hizali { font-variant-numeric: tabular-nums; }

.bos {
  margin: 0; padding: 1.5rem 1.25rem;
  color: var(--metin-3); font-size: .95rem;
}
.minik { font-size: .85rem; }

/* Sayfa basligi — ic sayfalarin girisi. */
.sayfa-ust { margin-bottom: 1.75rem; }
.sayfa-ust h1 { display: flex; align-items: center; gap: .65rem; margin-bottom: .4rem; }
.sayfa-ust h1 svg { color: var(--kirmizi); flex: 0 0 auto; }
.sayfa-ust p { margin: 0; color: var(--metin-2); font-size: 1.02rem; max-width: 62ch; }
.sayfa-ust .dugme { margin-top: 1.1rem; }

/* Bolum basligi — rafların ustu. */
.bolum { min-width: 0; }
.bolum-ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.bolum-ust h2 { display: flex; align-items: center; gap: .55rem; margin: 0; }
.bolum-ust h2 svg { color: var(--kirmizi); flex: 0 0 auto; }
.bolum-tumu, .panel-tumu {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--kirmizi-yazi); font-size: .92rem; font-weight: 700;
  transition: gap var(--hiz);
}
.bolum-tumu:hover, .panel-tumu:hover { gap: .55rem; }

/* Kirilma yolu */
/* Kirilma yolu <main>'in dogrudan cocugu, .kap icinde DEGIL — kendi
   sutununu kendi kuruyor; yoksa sayfanin sol kenarina yapisiyor. */
.kirilma {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  width: 100%; max-width: var(--kap); margin: 0 auto;
  padding: 1.1rem 20px 0;
  color: var(--metin-3); font-size: .86rem;
}
.kirilma a { color: var(--metin-2); }
.kirilma a:hover { color: var(--kirmizi-yazi); }
.kirilma li { list-style: none; }
.kirilma ol { display: contents; margin: 0; padding: 0; }

/* --- 5. Dugmeler ---------------------------------------------------------
   Hepsi hap. Birincil dolu kirmizi, ikincil beyaz yuzey + ince cerceve,
   sade yalniz yazi. Golge YOK; yukselme hissi hafif buyumeyle veriliyor. */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.3rem; border-radius: var(--hap);
  border: 1px solid transparent; cursor: pointer;
  font-size: .95rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap;
  transition: background var(--hiz), border-color var(--hiz),
              color var(--hiz), transform var(--hiz);
}
.dugme:active { transform: scale(.975); }
.dugme svg { flex: 0 0 auto; }

.dugme-birincil { background: var(--kirmizi); color: #fff; }
.dugme-birincil:hover { background: var(--kirmizi-koyu); color: #fff; }

.dugme-ikincil {
  background: var(--zemin-2); color: var(--metin);
  border-color: var(--cizgi-2);
}
.dugme-ikincil:hover { background: var(--zemin-3); border-color: var(--metin-3); color: var(--metin); }

.dugme-sade { background: transparent; color: var(--metin-2); }
.dugme-sade:hover { background: var(--zemin-3); color: var(--metin); }

.dugme-yesil { background: var(--yesil); color: #fff; }
.dugme-yesil:hover { background: var(--yesil-yazi); color: #fff; }

.dugme-buyuk { padding: .92rem 1.65rem; font-size: 1.02rem; }
.dugme[disabled], .dugme:disabled { opacity: .5; cursor: not-allowed; }

.dugme-sayi {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-left: .1rem; padding: .08rem .45rem; border-radius: var(--hap);
  background: rgba(255, 255, 255, .22); font-size: .78rem; font-weight: 800;
}
.dugme-ikincil .dugme-sayi { background: var(--yesil-sis); color: var(--yesil-yazi); }

/* --- 6. Rozet ve etiketler --------------------------------------------- */
.etiket {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .26rem .66rem; border-radius: var(--hap);
  background: var(--zemin-3); color: var(--metin-2);
  font-size: .76rem; font-weight: 700; line-height: 1.4;
}
.etiket-kirmizi { background: var(--kirmizi-sis); color: var(--kirmizi-yazi); }
.etiket-yesil   { background: var(--yesil-sis);   color: var(--yesil-yazi); }

.canli {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .72rem; border-radius: var(--hap);
  background: var(--kirmizi-sis); color: var(--kirmizi-yazi);
  font-size: .74rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap;
}
.canli.minik { padding: .16rem .5rem; font-size: .66rem; }

.canli-nokta {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--kirmizi);
  animation: nabiz 2s ease-in-out infinite;
}
@keyframes nabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 59, 59, .5); }
  60%      { box-shadow: 0 0 0 6px rgba(224, 59, 59, 0); }
}

/* Esitleyici — cubuk yukseklikleri calan sesin GERCEK frekanslarindan
   geliyor (bkz. kabuk.js SesTayf); cozumleme kurulamazsa asagidaki
   zamanli animasyon devrede kaliyor, yani hareket her halukarda var. */
.tayf { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; width: 24px; }
.tayf i {
  flex: 1 1 auto; height: 22%; border-radius: 2px;
  background: var(--kirmizi);
  transition: height 90ms linear;
  animation: tayf-zipla 1s ease-in-out infinite;
}
.tayf i:nth-child(2) { animation-delay: 120ms; }
.tayf i:nth-child(3) { animation-delay: 240ms; }
.tayf i:nth-child(4) { animation-delay: 360ms; }
.tayf i:nth-child(5) { animation-delay: 480ms; }
.tayf i:nth-child(6) { animation-delay: 600ms; }
.tayf i:nth-child(7) { animation-delay: 720ms; }
body.caliyor.tayf-acik .tayf i { animation: none; }

@keyframes tayf-zipla {
  0%, 100% { height: 22%; opacity: .7; }
  50%      { height: 100%; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tayf i { animation: none !important; transition: none; height: 58%; }
  .canli-nokta { animation: none; }
  html { scroll-behavior: auto; }
}

/* ===========================================================================
   7. UST BAR VE MENU
   ---------------------------------------------------------------------------
   ACIK ve yapiskan. Eskisi koyu lacivert bir bantti; yumusak tasarimda ust
   bar sayfadan ayri bir "bant" degil, sayfanin devami olmali — bu yuzden
   zeminle ayni renk, altinda cizgi yerine cok hafif bir golge.

   DIKKAT: .ust uzerinde transform / backdrop-filter / will-change
   KULLANILMAZ. Bunlardan biri yeni bir kapsam yaratir ve icindeki
   position:fixed oynaticiyi (telefonda alt serit) bozar.
   ======================================================================== */

.ust {
  position: sticky; top: 0; z-index: 80;
  background: var(--zemin-2);
  border-bottom: 1px solid var(--cizgi);
}

.ust-ic {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--ust-h);
}

/* --- Marka --------------------------------------------------------------- */
.marka { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 0 0 auto; }
/* 21.10.2026: logo once 33px'e indirildi, sonra "cok ufak, anlasilmiyor"
   denilince 60px'e cikarildi. 60px arma --ust-h 72px'lik bandin icinde
   6px pay birakiyordu; bant 92px'e acildi. */
.marka-logo { height: 60px; width: auto; }
/* KARE LOGO DAIRE CIZILIYOR (kullanici istegi, 21.10.2026). Yalniz kare
   olanlar: yatay bir logoyu daireye sokmak yaziyi keser. */
.marka-logo-kare { height: 60px; width: 60px; border-radius: 50%; object-fit: cover; }
.marka-isaret { display: flex; flex: 0 0 auto; }
.marka-yazi { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
/* MARKA YAZISI — OKUNAKLI OLCU (21.10.2026).
   Gun icinde once 2px kucultuldu (17.9 -> 15.9), sonra 13.9/7.5px'e
   indirildi; 7.5 piksellik slogan okunmuyordu ve kullanici "yanlislikla
   kuculttun, buyut, net okunakli olsun" dedi. 60 piksellik armanin
   yanindaki olcu buraya geri alindi: ad 18.4px, slogan 12.5px.
   Deger px degil rem — tarayici yazi boyutunu buyuten ziyaretcide px
   sabit kalir, rem olcekle birlikte buyur. */
.marka-yazi strong {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.028em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marka-yazi small {
  color: var(--metin-3); font-size: .78rem; font-weight: 600;
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Ana menu ------------------------------------------------------------
   Kutusuz, duz yazi baglantilar (passly dili). Etkin sayfa renkle VE
   altindaki kisa cizgiyle isaretli. */
.ana-menu { background: var(--zemin-2); border-bottom: 1px solid var(--cizgi); }
.ana-menu-ic {
  display: flex; align-items: center; gap: .15rem;
  overflow-x: auto; scrollbar-width: none;
}
.ana-menu-ic::-webkit-scrollbar { display: none; }

.ana-menu-oge {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .82rem .8rem;
  color: var(--metin-2); font-size: .95rem; font-weight: 600;
  white-space: nowrap;
  transition: color var(--hiz);
}
.ana-menu-oge::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 0;
  height: 2px; border-radius: 2px; background: transparent;
  transition: background var(--hiz);
}
.ana-menu-oge:hover { color: var(--metin); }
.ana-menu-oge.etkin { color: var(--kirmizi-yazi); font-weight: 800; }
.ana-menu-oge.etkin::after { background: var(--kirmizi); }

.menu-rozet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--hap);
  background: var(--kirmizi); color: #fff; font-size: .68rem; font-weight: 800;
}

/* --- Arama ---------------------------------------------------------------
   TEK HAP: alan ve dugme ayri ogelerdi, aralarinda bosluk vardi ve kirmizi
   daire seridin EN SAGINDA, icerik sutununun kenarina yapisik duruyordu
   (olculdu: dugme 1492-1530, sutun kenari 1530). Gozle "cizgiye yapismis"
   bir kirmizi nokta gibi okunuyordu.

   Artik ikisi tek bir yuzey; dugme o yuzeyin ICINDE, 4px dolgunun
   arkasinda. Boylece kenara degen sey doygun kirmizi degil, yumusak gri
   hapin kendisi. */
.ust-ara {
  margin-left: auto; flex: 0 1 300px; min-width: 0;
  display: flex; align-items: center; gap: .45rem;
  padding: 4px 4px 4px 1rem;
  border-radius: var(--hap);
  background: var(--zemin-3);
  border: 1px solid var(--cizgi);
  transition: background var(--hiz), border-color var(--hiz), box-shadow var(--hiz);
}
.ust-ara:focus-within {
  background: var(--zemin-2);
  border-color: var(--kirmizi);
  box-shadow: 0 0 0 3px var(--kirmizi-sis);
}
/* SECICIDE [type] SART: 12. bolumdeki genel input[type="search"] kurali
   bu dosyada DAHA SONRA geliyor ve ozgulluk esit oldugunda sonraki kazanir.
   Oyle olunca girdi kendi beyaz zeminini ve cercevesini geri aliyor, hap
   ikiye bolunmus gibi gorunuyordu. */
.ust-ara input[type="search"] {
  flex: 1 1 auto; min-width: 0; width: auto;
  padding: .4rem 0; border: 0; border-radius: 0; background: transparent;
  color: var(--metin); font: inherit; font-size: .9rem;
}
.ust-ara input[type="search"]::placeholder { color: var(--metin-3); }
.ust-ara input[type="search"]:focus {
  outline: none; background: transparent; border: 0; box-shadow: none;
}
/* Tarayicinin kendi "temizle" carpisi hapin icinde garip duruyor. */
.ust-ara input[type="search"]::-webkit-search-cancel-button { display: none; }
.ust-ara button {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--kirmizi); border: 0; color: #fff; cursor: pointer;
  transition: background var(--hiz);
}
.ust-ara button:hover { background: var(--kirmizi-koyu); }

/* --- Yuvarlak ust dugmeler ---------------------------------------------- */
/* Cerceve ARAMA HAPIYLA AYNI: ikisi de beyaz seritte duran kontrol ve
   --zemin-3 beyaza cok yakin; cercevesiz birakilinca tema dugmesi sag
   kenarda havada duruyor gibi gorunuyordu. */
.tema-dugme, .cekmece-dugme {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: var(--zemin-3); border: 1px solid var(--cizgi); color: var(--metin-2);
  transition: background var(--hiz), color var(--hiz), border-color var(--hiz);
}
.tema-dugme:hover, .cekmece-dugme:hover { background: var(--zemin-4); color: var(--metin); }
.cekmece-dugme { display: none; }

/* SAGA YASLAMAYI OYNATICI TASIYOR. Tema dugmesi 21.10'da oynaticidan
   SONRAYA alindi: once arasina girip sagdaki kumeyi ikiye boluyordu, artik
   oynatici + tema tek blok halinde sag kenara oturuyor.
   Telefonda oynatici position:fixed ile akistan ciktigi icin yaslamayi
   orada tema dugmesi devraliyor (bkz. 899px medya sorgusu). */
.player { margin-left: auto; }
/* DUGME HEDEFI GOSTERIR, MEVCUT DURUMU DEGIL: acik temadayken "aya"
   (gece moduna) basilir, gecedeyken "gunese". Tersi kafa karistiriyor. */
.tema-dugme .tema-gunes { display: none; }
.tema-dugme .tema-ay { display: grid; }
:root[data-tema="koyu"] .tema-dugme .tema-gunes { display: grid; }
:root[data-tema="koyu"] .tema-dugme .tema-ay { display: none; }

/* ===========================================================================
   8. OYNATICI
   ---------------------------------------------------------------------------
   TEK TRANSPORT. Sayfada baska hicbir yerde oynat/duraklat dugmesi yok.
   Masaustunde ust barin saginda yumusak bir hap; telefonda alt menunun
   ustune sabitlenmis serit. Ayni DOM ogesi, yalniz konum degisiyor —
   iki ayri oynatici iki <audio> demekti ve sesler ust uste binerdi.
   ======================================================================== */

.player {
  display: flex; align-items: center; gap: .7rem;
  flex: 1 1 300px; max-width: 420px; min-width: 0;
  padding: .32rem .5rem .32rem .32rem;
  border-radius: var(--hap);
  background: var(--zemin-3);
  border: 1px solid var(--cizgi);
}
.player-gomulu { padding: 0; background: transparent; border: 0; overflow: hidden; }
.player-cerceve { width: 100%; height: 56px; border: 0; display: block; }

.player-yok {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem; color: var(--altin); font-size: .85rem; font-weight: 600;
}

.player-dugme {
  position: relative; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--youtube); color: #fff;
  display: grid; place-items: center;
  transition: background var(--hiz), transform var(--hiz);
}
.player-dugme:hover { background: var(--youtube-koyu); }
.player-dugme:active { transform: scale(.94); }
.player-dugme svg { grid-area: 1 / 1; }

/* Ikon sarmalayici kendi kutusu olmali: icindeki <svg> satir-ici oldugu
   icin span bir satir kutusu kurar ve taban cizgisinin altinda bosluk
   birakir — daire icindeki ikon yukari kacar. */
.player-ikon-oynat, .player-ikon-duraklat, .ses-acik, .ses-kapali { display: grid; }
.player-ikon-oynat > svg, .player-ikon-duraklat > svg,
.ses-acik > svg, .ses-kapali > svg { display: block; }

/* OYNAT UCGENI OPTIK ORTALANIYOR. Ucgen kutusunun GEOMETRIK merkezi
   ortada ama agirligi solda topland1gi icin goz onu sola kacmis goruyor;
   daire gibi simetrik bir kapta bu fark belli oluyor. 1.5px saga kaydirmak
   standart duzeltme. Duraklat ikonu (iki dikdortgen) zaten simetrik,
   ona dokunulmuyor. */
.player-ikon-oynat > svg { transform: translateX(1.5px); }

/* Durum TEK YERDE: govde sinifi. Her dugmede ayri JS yerine CSS secici. */
.player-ikon-duraklat, .dugme-yazi-duraklat { display: none; }
body.caliyor .player-ikon-oynat,
body.caliyor .dugme-yazi-oynat { display: none; }
body.caliyor .player-ikon-duraklat { display: grid; }
body.caliyor .dugme-yazi-duraklat { display: inline-flex; }

.player-yukleniyor {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #fff;
  opacity: 0; pointer-events: none;
}
body.yukleniyor .player-yukleniyor { opacity: 1; animation: don .8s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

.player-bilgi { min-width: 0; flex: 1 1 auto; }
.player-ust { display: flex; align-items: center; gap: .45rem; }
.player-program {
  color: var(--metin-3); font-size: .74rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-parca {
  color: var(--metin); font-size: .88rem; font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Parca adi ile slogan arasinda SOLARAK geciyor (bkz. kabuk.js
   ParcaDonusu); sure oradaki SOLMA ile ayni olmali. */
[data-parca] { transition: opacity .3s ease; }
[data-parca].parca-solgun { opacity: 0; }

.player-sag { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.player-ses { display: flex; align-items: center; gap: .25rem; }
.player-ses-dugme, .player-pencere {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 0; cursor: pointer; color: var(--metin-3);
  transition: background var(--hiz), color var(--hiz);
}
.player-ses-dugme:hover, .player-pencere:hover { background: var(--zemin-4); color: var(--metin); }
.player-ses-dugme svg { grid-area: 1 / 1; }
.ses-kapali { display: none; }
body.sessiz .ses-acik { display: none; }
body.sessiz .ses-kapali { display: grid; }

.player-kaydirak { width: 74px; accent-color: var(--kirmizi); }

/* ===========================================================================
   ALT MENU (telefon) VE CEKMECE
   ======================================================================== */

.alt-menu {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  height: calc(var(--alt-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--zemin-2);
  border-top: 1px solid var(--cizgi);
  align-items: center;
}
.alt-oge {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 100%; padding: .3rem 0;
  background: transparent; border: 0; cursor: pointer;
  color: var(--metin-3); font-size: .66rem; font-weight: 700;
}
.alt-oge span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alt-oge.etkin { color: var(--kirmizi-yazi); }
.alt-haberler { display: none; }
body.uygulama-kurulu .alt-uygulama { display: none; }
body.uygulama-kurulu .alt-haberler { display: flex; }

/* Ortadaki DINLE dairesi — serie TASIYOR, tam daire.
   Tasma bir ara kaldirilmisti cunku daire ustteki oynatici seridinin
   icine girip calan parcanin adinin uzerine biniyordu. Dogru cozum
   tasmayi kaldirmak degil, seride YER ACMAK: serit --dinle-tasma kadar
   uzuyor ve o kadar alt dolgu aliyor, yani dairenin denk geldigi band
   bos kaliyor (bkz. 899px medya sorgusu).
   Halka seridin ust cizgisini kesiyor; daire "seridin uzerinde duruyor"
   gibi okunuyor. */
/* Daire her kosulda seridin UZERINDE boyansin: alt menu zaten oynatici
   seridinden yuksek bir katmanda, burada dugmenin kendisi de menu icinde
   en uste aliniyor.
   DAIRE MUTLAK KONUMLU: merkezi tam olarak seridin ust cizgisine
   oturuyor (top = -yaricap). Negatif margin + flex ortalama ile yapilinca
   ortalama tasmanin yarisini yutuyordu ve daire cizginin 9px altinda
   kaliyordu (olculdu). Mutlak konumda hesap birebir. */

.alt-dinle-ikon {
  position: absolute; left: 50%;
  /* 1px CIZGI PAYI: mutlak konum menunun DOLGU kutusuna gore hesaplaniyor,
     o da 1px'lik ust cizginin altindan basliyor. Cikarmazsak dairenin merkezi
     cizginin 1px altinda kaliyor (olculdu). */
  top: calc((var(--daire-boy) / -2) - 1px);
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: var(--daire-boy); height: var(--daire-boy); border-radius: 50%;
  background: var(--youtube); color: #fff;
  /* HALKA + KONTUR. Halka serit zeminiyle ayni renk (beyaz) ki daire
     seridin icine girdigi yerde ondan ayrilsin. Ama YALNIZ beyaz halka
     yetmiyor: dairenin ust kismi beyaz seridin uzerine denk geldiginde
     beyaz halka beyaz zeminde kayboluyor ve kirmizi disk "ustu kesilmis"
     gibi gorunuyor (kullanici cihazinda boyle goruldu).
     Halkanin disina 1px'lik ince bir kontur konuyor: daire hangi zeminin
     uzerine gelirse gelsin silueti tam gorunuyor. */
  border: 4px solid var(--zemin-2);
  box-shadow: 0 0 0 1px var(--cizgi-2), 0 4px 14px rgba(255, 0, 0, .35);
}
.alt-dinle-ikon svg { width: 24px; height: 24px; }
.alt-dinle-yazi { margin-top: 2px; font-size: .62rem; }

.cekmece-perde {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(21, 32, 46, .45);
}
.cekmece {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(320px, 86vw);
  background: var(--zemin-2);
  box-shadow: var(--golge-3);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--hiz-yay);
  overflow-y: auto;
}
.cekmece[data-acik] { transform: translateX(0); }
.cekmece-ust {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--cizgi);
}
.cekmece-kapat {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--zemin-3); border: 0; color: var(--metin-2); cursor: pointer;
}
.cekmece-menu { display: flex; flex-direction: column; padding: .6rem; gap: 2px; }
.cekmece-menu a {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem .85rem; border-radius: var(--kose);
  color: var(--metin-2); font-weight: 600;
}
.cekmece-menu a svg { color: var(--metin-3); flex: 0 0 auto; }
.cekmece-menu a:hover { background: var(--zemin-3); color: var(--metin); }
.cekmece-menu a.etkin { background: var(--kirmizi-sis); color: var(--kirmizi-yazi); }
.cekmece-menu a.etkin svg { color: var(--kirmizi); }
.cekmece-bolum {
  padding: .9rem 1.1rem .4rem;
  color: var(--metin-3); font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.cekmece-iletisim { padding: .6rem 1.1rem 1.4rem; color: var(--metin-2); font-size: .9rem; }
.cekmece-iletisim a { display: block; padding: .3rem 0; }

/* ===========================================================================
   9. KAPAK (ana sayfa girisi)
   ---------------------------------------------------------------------------
   passly'nin girisi gibi: cok soluk bir yikama, uzerinde buyuk ama sakin bir
   baslik, altinda iki hap dugme ve kucuk ozellik satirlari. Saginda ise
   radivu'nun dili: kapakli "simdi calan" karti.
   Yikama DOYGUN DEGIL — renk degil ISIK veriyor.
   ======================================================================== */

.kapak {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 520px at 12% -20%, var(--yikama-1), transparent 62%),
    radial-gradient(760px 480px at 88% 0%,  var(--yikama-3), transparent 58%),
    radial-gradient(620px 420px at 70% 110%, var(--yikama-2), transparent 60%),
    var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}

.kapak-ic {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  /* SUTUNLAR BIRLIKTE BASLAR VE BIRLIKTE BITER.
     align-items: center iken sag sutundaki kart (663px) sol sutundan
     (794px) kisa oldugu icin ortalaniyor, ustten 65px asagidan basliyor
     ve alttan 66px once bitiyordu (olculdu). stretch ikisini de ayni
     yuksekliga getiriyor; kart da kolon yonunde esneyip kalan yeri
     dolduruyor (bkz. .calan-kart). */
  align-items: stretch;
  /* UST DOLGU KISA, ALT DOLGU GENIS. Ustte yapiskan baslik duruyor; arada
     68px bosluk varken blok asagi kaciyordu ve yanindaki dikey reklamlarla
     hizasi tutmuyordu (olculdu: rozet 193px, reklam 150px). */
  padding-top: var(--kapak-ust);
  /* ALT DOLGU RITMIN YARISI. Olculdu: bandin alt kenari ile ilk bolum
     basligi arasi zaten 50px'ti (moduller arasiyla ayni), ama bandin KENDI
     68px'lik alt dolgusu da o boslugun icinde goruldugu icin toplam 118px
     bos alan olusuyor ve "kocaman bosluk" olarak okunuyordu.
     Simdi bandin alt dolgusu ile izgaranin ust dolgusu ritmi ikiye
     bolusuyor: icerikten baslia toplam bosluk = --bolum-bosluk, yani
     moduller arasiyla ayni. Bandin sinir cizgisi de tam ortasinda kaliyor. */
  padding-bottom: calc(var(--bolum-bosluk) / 2);
}

/* Eyebrow: beyaz hap, ince cerceve — passly'deki "Gelecegin kartvizit
   teknolojisi" rozetinin karsiligi, bizde CANLI bilgisi tasiyor. */
.rozet-hap {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1.4rem; padding: .5rem .95rem;
  border-radius: var(--hap);
  background: var(--zemin-2); border: 1px solid var(--cizgi-2);
  box-shadow: var(--golge-1);
  font-size: .84rem; font-weight: 700; color: var(--metin-2);
}
.rozet-hap b { color: var(--kirmizi-yazi); font-weight: 800; }
.rozet-hap .ayrac { color: var(--cizgi-2); }

.kapak-baslik {
  margin: 0 0 1.1rem;
  font-size: clamp(2rem, 1.25rem + 3.1vw, 3.45rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.04em;
  max-width: 15ch;
}
/* SLOGAN TEK SATIR (kullanici istegi). Marka adiyla ayni puntodayken
   "Turkulerin Kalbi / Burada Atiyor" diye ikiye boluniyordu.
   nowrap tek basina yetmez — punto sabit kalsa dar ekranda tasardi; bu
   yuzden punto gorunum genisligine bagli (clamp) ve degerler sutun
   genisligine gore secildi: 30 karakterlik metin Figtree 800'de yaklasik
   15.6 x punto kadar yer kapliyor. */
.kapak-baslik span {
  display: block;
  color: var(--kirmizi-yazi);
  white-space: nowrap;
  font-size: clamp(1.1rem, .25rem + 2.18vw, 2.3rem);
  letter-spacing: -.03em;
  margin-top: .15rem;
}

.kapak-oz {
  margin: 0 0 1.75rem; max-width: 52ch;
  color: var(--metin-2); font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
  line-height: 1.6;
}

.kapak-dugmeler { display: flex; flex-wrap: wrap; gap: .7rem; }

/* .kapak-ozellik (dort kucuk ozellik satiri) 21.10.2026'da kullanicinin
   istegiyle kaldirildi; kurallari da sahipsiz kalmasin diye silindi. */

/* --- Simdi calan karti --------------------------------------------------- */
.calan-kart {
  display: flex; flex-direction: column;
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-xl);
  box-shadow: var(--golge-2);
  padding: clamp(1rem, .7rem + .9vw, 1.5rem);
}

.calan-kapak {
  position: relative;
  width: 100%; aspect-ratio: 1; margin-bottom: 1.1rem;
  border-radius: var(--kose-l); overflow: hidden;
  background: var(--zemin-3);
}
.calan-kapak > img { width: 100%; height: 100%; object-fit: cover; }

/* Kapak yoksa: bos gri kutu degil, marka kompozisyonu. */
.calan-kapak-arma {
  display: grid; place-items: center;
  background:
    radial-gradient(70% 60% at 25% 15%, rgba(224, 59, 59, .14), transparent 62%),
    linear-gradient(150deg, var(--zemin-3), var(--zemin-4));
}
/* Kartin icindeki arma da daire (kullanici istegi). Kare gorselin
   koseleri kirpiliyor; arma zaten ortalanmis bir kompozisyon oldugu icin
   kenarlardan kayip olmuyor. */
.calan-kapak-arma img {
  width: min(62%, 62cqmin); height: auto; aspect-ratio: 1;
  max-width: 62%; max-height: 62%;
  border-radius: 50%; object-fit: cover;
}

.calan-rozet {
  position: absolute; top: 12px; left: 12px;
  background: var(--zemin-2); box-shadow: var(--golge-1);
}

.calan-etiket {
  display: block; margin-bottom: .2rem;
  color: var(--metin-3); font-size: .7rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.calan-ad {
  margin: 0 0 .7rem; font-size: 1.22rem; font-weight: 800; letter-spacing: -.025em;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.calan-alt {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  color: var(--metin-2); font-size: .9rem; font-weight: 600;
}
.calan-alt svg { color: var(--metin-3); flex: 0 0 auto; }
.calan-alt a:hover { color: var(--kirmizi-yazi); }

/* Kusak ilerlemesi — gercek: baslangic/bitis saatinden hesaplaniyor
   (bkz. ana-sayfa.php). Genislik CSP yuzunden satir ici stille degil
   CSSOM ile yaziliyor (bkz. kabuk.js Oranlar). */
.ilerleme {
  margin-top: 1rem; height: 6px; border-radius: var(--hap);
  background: var(--zemin-4); overflow: hidden;
}
.ilerleme > span {
  display: block; height: 100%; width: 0; border-radius: var(--hap);
  background: var(--kirmizi);
  transition: width .6s ease;
}
.ilerleme-saat {
  display: flex; justify-content: space-between; margin: .4rem 0 0;
  color: var(--metin-3); font-size: .78rem; font-weight: 700;
}

/* ===========================================================================
   10. RAFLAR, KARTLAR VE LISTELER
   ======================================================================== */

/* ---------------------------------------------------------------------------
   ANA SAYFA RITMI (21.10.2026)
   ---------------------------------------------------------------------------
   Once ".bolum + .bolum" ile bosluk veriliyordu. Iki sorun cikti:

   1) KOMSULUK ZINCIRI KOPUYOR. Iki sutunlu blok bir <div class="ikili">;
      ondan SONRA gelen bolumun onceki kardesi .bolum olmadigi icin kural
      eslesmiyor ve bosluk SIFIR kaliyordu (olculdu: Haberler bolumu
      margin-top 0px ile bir ustteki bloga yapisikti).
   2) IZGARANIN ICINE SIZIYOR. .ikili'nin iki cocugu da .bolum; ikincisi
      birincinin kardesi oldugu icin 40px ust bosluk aliyor ve yan yana iki
      modul AYNI HIZADAN BASLAMIYORDU (olculdu: 1304 ve 1344).

   Cozum: boslugu kardeslige degil KAPSAYICIYA baglamak. Tek deger, tek
   yer, hangi etiket gelirse gelsin ayni ritim. */
:root { --bolum-bosluk: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem); }

.ana-izgara {
  /* Ust dolgu ritmin yarisi; obur yarisi kapak bandinin alt dolgusunda
     (bkz. .kapak-ic). Ikisi birlikte moduller arasindaki boslugu veriyor. */
  padding-top: calc(var(--bolum-bosluk) / 2);
  padding-bottom: var(--bolum-bosluk);
}
.ana-izgara > * + * { margin-top: var(--bolum-bosluk); }

/* Izgara ICINDE komsuluk boslugu olmaz: hizayi grid kuruyor. */
.ikili > * + * { margin-top: 0; }

/* YAN YANA MODULLER BIRLIKTE BASLAR VE BIRLIKTE BITER.
   align-items: start iken ikisi kendi icerigi kadar uzuyordu ve altlari
   48px kayik kaliyordu (olculdu: 1872 / 1920). stretch ile ikisi de ayni
   yuksekligi aliyor; icerideki .panel de kalan yeri doldurdugu icin
   kartlarin ALTI da hizali bitiyor. */
.ikili {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--bolum-bosluk); align-items: stretch;
}
.ikili > .bolum { display: flex; flex-direction: column; }
.ikili > .bolum > .panel { flex: 1 1 auto; }

/* --- BUGUNUN AKISI — IZGARA, RAF DEGIL -----------------------------------
   Burada once yatay bir raf vardi: 190px'lik kare kapak kutulari ve kapak
   olmayan programlarda icinde tek bir harf. Sekiz bos kutu + sekiz harf
   amator duruyordu, ustelik raf ekrana sigmadigi icin altinda kaydirma
   cubugu kaliyordu.

   Simdi gunun tamami tek bakista: saran bir izgara, kaydirma yok. Satir
   kompakt — saat, ad, sunucu. GORSEL ZORUNLU DEGIL: kapak yoksa yerine
   bos bir kutu konmuyor, satir yalnizca daralir; kapak yuklenince kucuk
   bir resim olarak satira girer. */
.akis-izgara {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: .8rem;
}
.akis-oge > a {
  display: flex; align-items: center; gap: .8rem; height: 100%;
  padding: .8rem .95rem;
  border-radius: var(--kose-l);
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  color: inherit;
  transition: border-color var(--hiz), box-shadow var(--hiz), transform var(--hiz);
}
.akis-oge > a:hover {
  border-color: var(--cizgi-2); box-shadow: var(--golge-1);
  transform: translateY(-2px); color: inherit;
}
.akis-kapak { flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--kose); object-fit: cover; }
.akis-govde { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.akis-ust { display: flex; align-items: center; gap: .45rem; }
.akis-saat {
  padding: .1rem .45rem; border-radius: var(--hap);
  background: var(--zemin-3); color: var(--metin-2);
  font-size: .74rem; font-weight: 800;
}
.akis-govde strong {
  font-size: .97rem; font-weight: 700; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.akis-govde small {
  display: flex; align-items: center; gap: .25rem;
  color: var(--metin-3); font-size: .8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.akis-govde small svg { flex: 0 0 auto; }

/* Yayindaki kusak: kirmizi cerceve + hafif yikama. */
.akis-simdi > a {
  background: var(--kirmizi-sis);
  border-color: var(--kirmizi);
}
.akis-simdi .akis-saat { background: var(--zemin-2); color: var(--kirmizi-yazi); }
.akis-simdi .akis-govde strong { color: var(--kirmizi-yazi); }

/* --- Dikey liste (son calanlar, turku listesi) --------------------------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li + li { border-top: 1px solid var(--cizgi); }
.liste a, .liste > li > span {
  display: flex; align-items: center; gap: .85rem;
  padding: .72rem .25rem; color: inherit;
  transition: background var(--hiz);
}
.liste a:hover { background: var(--zemin-3); border-radius: var(--kose); }
.liste-saat {
  flex: 0 0 auto; padding: .18rem .5rem; border-radius: var(--hap);
  background: var(--zemin-3); color: var(--metin-2);
  font-size: .76rem; font-weight: 800;
}
.liste-govde { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.liste-govde strong {
  font-size: .94rem; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.liste-govde small { color: var(--metin-3); font-size: .8rem; }
.liste > li:first-child .liste-saat { background: var(--kirmizi-sis); color: var(--kirmizi-yazi); }

/* --- Yumusak kutu (panel / kart yuzeyi) --------------------------------- */
.kutu, .panel {
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-xl);
  box-shadow: var(--golge-1);
  overflow: hidden;
}
/* CIFT BOSLUK OLMASIN. Yan sutunlar flex kolon + gap kullaniyor; bu
   kenar bosluguyla toplaninca moduller arasi 1.25rem yerine 2.5rem
   oluyordu — kullanici "moduller arasi esit aralik" istedi.
   Kenar boslugu yalniz gap'siz kapsayicilar icin kaliyor. */
.panel + .panel { margin-top: var(--bolum-bosluk); }
.detay-yan > .panel + .panel,
.haber-yan > .panel + .panel,
.istek-yan > .panel + .panel,
.lobi-yan  > .panel + .panel,
.yan-sutun > .panel + .panel { margin-top: 0; }
/* Baslik seridi: ikon ust cizgiye ve yaziya yapismasin diye dolgu ve
   aralik biraz acildi. */
.panel-ust, .kutu-ust {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1.05rem 1.25rem .95rem;
  border-bottom: 1px solid var(--cizgi);
}
.panel-ust h2, .kutu-ust h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.panel-ust h2 svg, .kutu-ust h2 svg { color: var(--kirmizi); flex: 0 0 auto; }
.panel-ust h2, .kutu-ust h2 { gap: .55rem; }
.panel-govde, .kutu-govde { padding: 1.25rem; }
.panel-not, .kutu-not { margin: 0; color: var(--metin-3); font-size: .88rem; }
.panel-form { padding: 1.25rem; }

/* Kutu icindeki liste kenarlardan tasmasin. */
.panel .liste, .kutu .liste { padding: .35rem .75rem .75rem; }
.panel .liste a:hover, .kutu .liste a:hover { background: var(--zemin-3); }

/* --- Haber kartlari ------------------------------------------------------ */
.haber-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 1.25rem;
}
.haber-kart {
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-l);
  overflow: hidden;
  transition: transform var(--hiz-yay), box-shadow var(--hiz-yay);
}
.haber-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-2); }
.haber-kart a { display: flex; flex-direction: column; height: 100%; color: inherit; }
.haber-kart img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.haber-kapak-yok {
  display: grid; place-items: center; aspect-ratio: 16 / 10;
  background: var(--zemin-3); color: var(--cizgi-2);
}
.haber-govde { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.15rem; flex: 1 1 auto; }
.haber-govde > .etiket { align-self: flex-start; }
.haber-govde h2, .haber-govde h3 {
  margin: 0; font-size: 1.02rem; line-height: 1.3; letter-spacing: -.02em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.haber-govde p {
  margin: 0; color: var(--metin-3); font-size: .88rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.haber-govde time { margin-top: auto; color: var(--metin-3); font-size: .78rem; font-weight: 600; }

/* --- Istek seridi -------------------------------------------------------- */
.istek-serit { list-style: none; margin: 0; padding: 0; }
.istek-satir {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "bas kisi zaman" "bas mesaj mesaj" "bas durum durum";
  gap: .15rem .7rem;
  padding: .9rem .25rem;
}
.istek-satir + .istek-satir { border-top: 1px solid var(--cizgi); }
.istek-bas {
  grid-area: bas; align-self: start;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--kirmizi-sis); color: var(--kirmizi-yazi);
  font-weight: 800; font-size: .95rem;
}
.istek-kisi { grid-area: kisi; font-weight: 700; font-size: .94rem; }
.istek-zaman { grid-area: zaman; color: var(--metin-3); font-size: .78rem; }
.istek-mesaj {
  grid-area: mesaj; margin: 0; quotes: none;
  color: var(--metin-2); font-size: .9rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.istek-durum { grid-area: durum; justify-self: start; margin-top: .35rem; }

.liste-dip {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  flex-wrap: wrap; padding: .85rem .25rem 0; margin-top: .35rem;
  border-top: 1px solid var(--cizgi);
  color: var(--metin-3); font-size: .85rem;
}
.liste-dip a { color: var(--kirmizi-yazi); font-weight: 700; }

/* --- Sanatci seridi ------------------------------------------------------ */
.sanatci-serit {
  display: flex; gap: 1.25rem; overflow-x: auto;
  padding: .25rem .25rem 1rem; scrollbar-width: thin;
}
.sanatci-oge {
  flex: 0 0 auto; width: 104px;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center; color: inherit;
}
.sanatci-oge img, .sanatci-bas {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  box-shadow: var(--golge-1);
  transition: transform var(--hiz-yay), box-shadow var(--hiz-yay);
}
.sanatci-bas {
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--zemin-3), var(--zemin-4));
  color: var(--metin); font-size: 1.7rem; font-weight: 800;
}
.sanatci-oge:hover img, .sanatci-oge:hover .sanatci-bas { transform: translateY(-4px); box-shadow: var(--golge-2); }
.sanatci-oge strong {
  font-size: .88rem; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sanatci-oge small { color: var(--metin-3); font-size: .76rem; }

/* --- Yore etiketleri ----------------------------------------------------- */
.yore-serit { display: flex; flex-wrap: wrap; gap: .5rem; }
.yore-etiket {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .9rem; border-radius: var(--hap);
  background: var(--zemin-2); border: 1px solid var(--cizgi-2);
  color: var(--metin-2); font-size: .88rem; font-weight: 600;
  transition: background var(--hiz), border-color var(--hiz), color var(--hiz);
}
.yore-etiket:hover { background: var(--zemin-3); color: var(--metin); }
.yore-etiket.etkin { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.yore-etiket small { opacity: .7; font-size: .8em; }

/* ===========================================================================
   11. DETAY SAYFALARI (turku, sanatci, program, haber, sunucu)
   ======================================================================== */

/* ANA SUTUN GENIS, YAN SUTUN DAR. Once 1.55fr / 1fr idi, yani yan sutun
   sayfanin %39'unu aliyordu. O sutunda yalnizca kunye (etiket-deger
   ciftleri) ve kisa listeler var; asil icerik — turku sozleri — solda ve
   uzun satirlara ihtiyaci yok ama dar sutunda sozler kirilip merdiven
   gibi akiyordu. Yan sutun artik TAVANLI: en fazla 330px, altinda
   icerigin genisligi serbest. 1180'lik sutunda 829 / 319 oluyor. */
.detay-izgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 27%, 330px);
  gap: 2rem; align-items: start;
}
.detay-ana, .detay-yan { min-width: 0; }
.detay-yan { display: flex; flex-direction: column; gap: var(--bolum-bosluk); }

.detay-ust { margin-bottom: 1.75rem; }
.detay-ust-kapakli { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.detay-kapak {
  flex: 0 0 auto; width: 200px; height: 200px; object-fit: cover;
  border-radius: var(--kose-l); box-shadow: var(--golge-2);
}
.detay-kapak.yuvarlak { border-radius: 50%; }
.detay-ust-govde { flex: 1 1 320px; min-width: 0; }
.detay-ust-govde h1 { margin: .4rem 0 .5rem; }
.detay-ozet { margin: 0 0 1rem; color: var(--metin-2); font-size: 1.02rem; }
.detay-eylem { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.metin-blok { margin-bottom: 2rem; font-size: 1.03rem; }
.metin-blok h2 { margin: 1.9rem 0 .75rem; font-size: 1.3rem; }
.metin-blok h2:first-child { margin-top: 0; }
.metin-blok p { color: var(--metin-2); line-height: 1.75; }
.metin-blok p + p { margin-top: 0; }
.metin-blok ul { margin: .9rem 0 0; padding-left: 1.2rem; color: var(--metin-2); }
.metin-blok li { margin-bottom: .5rem; }
.metin-blok li::marker { color: var(--kirmizi); }
.metin-blok ul + p { margin-top: 1rem; }

.yazi { max-width: none; }
.yazi header h1 { margin-bottom: 1rem; }
.yazi-alt { padding-top: 1.25rem; border-top: 1px solid var(--cizgi); color: var(--metin-3); }

/* Turku sozleri — okunabilirlik icin genis satir araligi. */
.soz {
  margin: 0; padding: 1.25rem 1.4rem;
  background: var(--zemin-3); border-radius: var(--kose-l);
  color: var(--metin); font-size: 1.04rem; line-height: 2;
  white-space: pre-line;
}

/* Kunye — etiket/deger ciftleri. */
.kunye {
  margin: 0; padding: 1rem 1.25rem;
  display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem;
}
.kunye dt { color: var(--metin-3); font-size: .86rem; font-weight: 600; }
.kunye dd { margin: 0; font-weight: 700; font-size: .95rem; }

.turku-liste { list-style: none; margin: 0; padding: 0; }
.turku-satir { display: flex; align-items: center; gap: .85rem; padding: .75rem 1.25rem; }
.turku-satir + .turku-satir { border-top: 1px solid var(--cizgi); }
.turku-satir:hover { background: var(--zemin-3); }
.turku-nota { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--zemin-3); color: var(--kirmizi); flex: 0 0 auto; }
.turku-baglanti { min-width: 0; display: flex; flex-direction: column; color: inherit; }
.turku-baglanti strong { font-weight: 700; font-size: .98rem; }
.turku-baglanti small { color: var(--metin-3); font-size: .82rem; }
.turku-sira { flex: 0 0 auto; color: var(--metin-3); font-size: .82rem; font-weight: 700; }

.program-liste { list-style: none; margin: 0; padding: 0; }
/* strong (program adi) ve small (saat/sunucu) ALT ALTA. Flex satir
   oldugunda ikisi yan yana diziliyor, saat adin dibine yapisiyordu. */
.program-satir {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .85rem 1.25rem 1rem; color: inherit;
}
.program-satir strong { font-size: 1rem; font-weight: 700; }
.program-satir small { color: var(--metin-3); font-size: .85rem; }
.program-satir:hover { background: var(--zemin-3); color: inherit; }
.program-satir + .program-satir { border-top: 1px solid var(--cizgi); }

/* Yayin akisi — gun sekmeleri ve kusak satirlari */
.gun-sekmeleri { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem; }
.gun-sekme {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1rem; border-radius: var(--hap);
  background: var(--zemin-2); border: 1px solid var(--cizgi-2);
  color: var(--metin-2); font-size: .92rem; font-weight: 700;
}
.gun-sekme:hover { background: var(--zemin-3); color: var(--metin); }
.gun-sekme.etkin { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.gun-bugun-nokta { width: 6px; height: 6px; border-radius: 50%; background: var(--kirmizi); }
.gun-sekme.etkin .gun-bugun-nokta { background: #fff; }
.gun-kisa { display: none; }

.kusak-liste { display: flex; flex-direction: column; }
.kusak {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1.25rem; color: inherit;
  transition: background var(--hiz);
}
.kusak + .kusak { border-top: 1px solid var(--cizgi); }
.kusak:hover { background: var(--zemin-3); }
.kusak-saat {
  flex: 0 0 auto; display: flex; flex-direction: column; min-width: 54px;
  font-weight: 800; line-height: 1.2;
}
.kusak-saat strong { font-size: .98rem; }
.kusak-saat small { color: var(--metin-3); font-size: .76rem; font-weight: 600; }
.kusak-kapak { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--kose); object-fit: cover; }
.kusak-govde { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; }
.kusak-ad { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-weight: 700; }
.kusak-sunucu { display: flex; align-items: center; gap: .3rem; color: var(--metin-2); font-size: .84rem; }
.kusak-sunucu svg { color: var(--metin-3); flex: 0 0 auto; }
.kusak-ozet {
  color: var(--metin-3); font-size: .86rem;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.kusak-ok { flex: 0 0 auto; color: var(--cizgi-2); }
.kusak:hover .kusak-ok { color: var(--kirmizi); }
.kusak-simdi { background: var(--kirmizi-sis); box-shadow: inset 3px 0 0 var(--kirmizi); }
.kusak-simdi:hover { background: var(--kirmizi-sis); }
.kusak-liste.ince .kusak { padding: .6rem 1rem; }

/* Haftalik tablo */
/* KAYDIRMA DIS KUTUDA DEGIL IC KUTUDA: .hafta-tablo-kap bir <section>
   ve icinde once <h2> duruyor. Kaydirma ve cerceve disa verilince baslik
   de cercevenin icinde kaliyor, tablonun ustune biniyordu. */
.hafta-tablo-kap { margin-top: 2.5rem; }
.hafta-tablo-kap > .alt-baslik { margin-bottom: .9rem; }
.hafta-kaydir {
  overflow-x: auto; border-radius: var(--kose-l);
  border: 1px solid var(--cizgi); background: var(--zemin-2);
}
.hafta-tablo {
  width: 100%; border-collapse: collapse; font-size: .9rem;
  min-width: 760px; table-layout: fixed;
}
.hafta-tablo th, .hafta-tablo td {
  padding: .55rem .5rem; text-align: left; vertical-align: top;
}
.hafta-tablo thead th {
  padding: .7rem .8rem;
  background: var(--zemin-3); border-bottom: 1px solid var(--cizgi);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--metin-3); font-weight: 800;
}
/* Gunler dikey cizgiyle ayriliyor; tek satirlik bir tabloda yatay cizgi
   anlamsiz, sutunlar arasindaki sinir ise okumayi kolaylastiriyor. */
.hafta-tablo tbody td + td,
.hafta-tablo thead th + th { border-left: 1px solid var(--cizgi); }
.hafta-tablo .bugun { background: color-mix(in srgb, var(--kirmizi) 4%, transparent); }

/* KUSAK SATIRI BLOK OLMALI. Kural yazilmadigi icin <a>'lar satir ici
   kaliyor ve butun gun tek bir yazi blogu gibi birbirine giriyordu
   (kullanici ekran goruntusu). Her kusak kendi satirinda, saat solda. */
.hafta-kusak {
  display: flex; align-items: baseline; gap: .45rem;
  padding: .4rem .55rem; border-radius: var(--kose);
  color: inherit; line-height: 1.35;
  transition: background var(--hiz);
}
.hafta-kusak + .hafta-kusak { margin-top: .15rem; }
.hafta-kusak:hover { background: var(--zemin-3); color: inherit; }
.hafta-saat {
  flex: 0 0 auto; white-space: nowrap;
  font-weight: 800; font-size: .82rem; color: var(--metin-2);
}
.hafta-ad { min-width: 0; font-size: .86rem; }

/* Gun adi yalniz telefonda gorunuyor (bkz. 760px medya sorgusu). */
.hafta-gun { display: none; }

/* Yayindaki kusak: genel .kusak-simdi kurali (kirmizi yikama + sol serit)
   burada da gecerli; eskiden ".hafta-kusak.simdi" yazilmisti ama isaretde
   kullanilan sinif "kusak-simdi" — secici hic eslesmiyordu. */
.hafta-kusak.kusak-simdi .hafta-saat,
.hafta-kusak.kusak-simdi .hafta-ad { color: var(--kirmizi-yazi); }

/* ===========================================================================
   12. FORMLAR VE TABLOLAR
   ======================================================================== */

.form { display: flex; flex-direction: column; gap: 1.1rem; }
.alan { display: flex; flex-direction: column; gap: .4rem; }
.alan label { font-size: .9rem; font-weight: 700; color: var(--metin-2); }
.alan-not { color: var(--metin-3); font-size: .82rem; }
.zorunlu { color: var(--kirmizi-yazi); }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="tel"], input[type="number"], input[type="date"],
select, textarea {
  width: 100%; padding: .78rem 1rem;
  border-radius: var(--kose); border: 1px solid var(--cizgi-2);
  background: var(--zemin-2); color: var(--metin);
  font: inherit; font-size: .96rem;
  transition: border-color var(--hiz), box-shadow var(--hiz);
}
input::placeholder, textarea::placeholder { color: var(--metin-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--kirmizi);
  box-shadow: 0 0 0 3px var(--kirmizi-sis);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.alan-sira { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem; }
.form-alt { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
/* GUVENLIK KODU. .alan-kod normal bir alan (dikey); yatay dizilim
   icerideki .kod-sira'da. Bir ara .alan-kod'un kendisi flex yapilmisti ve
   etiket, gorsel, girdi ve yardim metni tek satira sikisip tasiyordu. */
.alan-kod { display: flex; flex-direction: column; gap: .4rem; }
.kod-sira { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kod-resim { flex: 0 0 auto; border-radius: var(--kose); border: 1px solid var(--cizgi-2); }
.kod-sira input {
  width: auto; flex: 0 0 120px;
  text-align: center; letter-spacing: .35em; font-weight: 700;
}
.kod-yenile {
  flex: 0 0 auto;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--zemin-3); border: 0; color: var(--metin-2); cursor: pointer;
  transition: background var(--hiz), color var(--hiz);
}
.kod-yenile:hover { background: var(--zemin-4); color: var(--metin); }
/* Yazi ekran okuyucu icin duruyor, gozle gorunmuyor — daire icine sigmaz. */
.kod-yenile span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.bal-kupu { position: absolute; left: -9999px; }

.uyari-blok {
  display: flex; gap: .65rem; padding: .9rem 1.1rem;
  border-radius: var(--kose); background: var(--kirmizi-sis);
  color: var(--kirmizi-yazi); font-size: .92rem;
}
.uyari-blok ul { margin: 0; padding-left: 1.1rem; }

.bildirim-alan { padding-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.bildirim {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.1rem; border-radius: var(--kose);
  background: var(--yesil-sis); color: var(--yesil-yazi); font-weight: 600;
}
.bildirim svg { flex: 0 0 auto; }
.bildirim-uyari { background: var(--altin-sis); color: var(--altin); }
.bildirim-kotu  { background: var(--kirmizi-sis); color: var(--kirmizi-yazi); }

.sayfalama { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; padding: 1.75rem 0 0; }
.sayfalama a, .sayfalama span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 .75rem; border-radius: var(--hap);
  background: var(--zemin-2); border: 1px solid var(--cizgi-2);
  color: var(--metin-2); font-weight: 700; font-size: .9rem;
}
.sayfalama a:hover { background: var(--zemin-3); color: var(--metin); }
.sayfalama .etkin { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }

.suzgec { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.suzgec input[type="search"] { flex: 1 1 260px; }
/* Yore suzgeci arama kutusunun yaninda; dar ekranda alta geciyor. */
.alan-yore { flex: 0 1 220px; min-width: 170px; }
.alan-yore select { width: 100%; }
.suzgec-bilgi { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.25rem; color: var(--metin-2); font-size: .92rem; }

/* ===========================================================================
   13. SOHBET
   ======================================================================== */

.sohbet-vitrin-kap { padding-top: 0; padding-bottom: var(--bolum-bosluk); }
.sohbet-vitrin {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 2rem; align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--kose-xl);
  background:
    radial-gradient(640px 320px at 90% -20%, var(--yikama-2), transparent 62%),
    radial-gradient(560px 340px at 5% 120%, var(--yikama-1), transparent 60%),
    var(--zemin-3);
  border: 1px solid var(--cizgi);
}
.vitrin-desen { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .05; color: var(--metin); pointer-events: none; }
.desen-nokta circle { animation: yaziyor 1.4s ease-in-out infinite; }
.desen-nokta circle:nth-child(2) { animation-delay: .2s; }
.desen-nokta circle:nth-child(3) { animation-delay: .4s; }
@keyframes yaziyor { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.vitrin-sol { position: relative; min-width: 0; }
.vitrin-etiket {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .9rem;
  padding: .3rem .75rem; border-radius: var(--hap);
  background: var(--zemin-2); border: 1px solid var(--cizgi-2);
  color: var(--kirmizi-yazi); font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.vitrin-sol h2 { margin: 0 0 .7rem; }
.vitrin-sol p { color: var(--metin-2); margin-bottom: 1.4rem; }
.vitrin-dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; }

.vitrin-sag {
  position: relative; min-width: 0;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--kose-l); box-shadow: var(--golge-1); overflow: hidden;
}
.vitrin-akis { list-style: none; margin: 0; padding: .6rem; display: flex; flex-direction: column; gap: .2rem; }
.vitrin-akis li { display: flex; align-items: flex-start; gap: .6rem; padding: .35rem .5rem; }
.vitrin-govde { min-width: 0; background: var(--zemin-3); border-radius: 4px 14px 14px 14px; padding: .45rem .75rem .5rem; }
.vitrin-ad { display: block; font-size: .84rem; font-weight: 800; color: var(--kirmizi-yazi); }
.vitrin-metin { display: block; color: var(--metin-2); font-size: .9rem; }
.vitrin-akis time { flex: 0 0 auto; margin-top: .45rem; color: var(--metin-3); font-size: .74rem; }
.vitrin-bos { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 2rem 1rem; text-align: center; }
.vitrin-bos svg { color: var(--cizgi-2); }
.vitrin-bos strong { font-size: 1rem; }
.vitrin-bos span { color: var(--metin-3); font-size: .88rem; }
.vitrin-tumu {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .7rem; border-top: 1px solid var(--cizgi);
  color: var(--kirmizi-yazi); font-size: .88rem; font-weight: 800;
}
.vitrin-tumu:hover { background: var(--zemin-3); }

/* Avatar madalyonlari — tek renk ailesi; sekiz ayri renk sayfayi
   "rengarenk" yapiyordu (kullanici geri bildirimi). */
/* .yazisma-avatar avatarin KENDISI degil, onu ve cevrimici noktasini
   saran kutu; avatar kurallarina dahil edilince daire icinde daire
   cikiyordu. */
.yazisma-avatar { position: relative; flex: 0 0 auto; display: block; }
.kisi-avatar, .sohbet-avatar, .benim-avatar {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--kirmizi-sis); color: var(--kirmizi-yazi);
  font-size: .82rem; font-weight: 800;
}
.kisi-buyuk { width: 46px; height: 46px; font-size: 1.05rem; }

/* ===========================================================================
   14. ALT BILGI, REKLAM, PWA, EKRAN GENISLIKLERI
   ======================================================================== */

.sponsor-serit { border-top: 1px solid var(--cizgi); background: var(--zemin-2); }
.sponsor-ic { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; padding: 1.5rem 20px; }
.sponsor img { max-height: 34px; width: auto; opacity: .75; transition: opacity var(--hiz); }
.sponsor:hover img { opacity: 1; }

.alt { background: var(--zemin-2); border-top: 1px solid var(--cizgi); margin-top: 3rem; }
.alt-ic {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem; padding-top: 3rem; padding-bottom: 2rem;
}
.alt-marka { min-width: 0; }
.alt-marka strong { display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .6rem; }
.alt-tanitim { color: var(--metin-2); font-size: .94rem; max-width: 42ch; }
.alt-bolum { min-width: 0; }
.alt-baslik {
  display: block; margin-bottom: .75rem;
  color: var(--metin-3); font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.alt-bolum a, .alt-adres { display: block; padding: .28rem 0; color: var(--metin-2); font-size: .92rem; }
.alt-bolum a:hover { color: var(--kirmizi-yazi); }
.alt-son {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; padding: 1.25rem 20px; border-top: 1px solid var(--cizgi);
  color: var(--metin-3); font-size: .85rem;
}
.alt-imza a { color: var(--metin-2); font-weight: 600; }

.sosyal-sira { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
/* Panel icindeki buyuk hal: ust bosluk alt bilgi icindi, burada panelin
   kendi dolgusu var. */
.sosyal-sira.buyuk { margin: 0; padding: 1rem 1.25rem 1.3rem; gap: .6rem; }
.sosyal-sira.buyuk a { width: 46px; height: 46px; }
.sosyal-sira a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--zemin-3); color: var(--metin-2);
  transition: transform var(--hiz), background var(--hiz), color var(--hiz);
}
.sosyal-sira a:hover { transform: translateY(-2px); background: var(--kirmizi); color: #fff; }

/* MARGIN TANIMLANMIYOR: ".reklam { margin: 0 }" ayni ozgullukte ama daha
   sonra geldigi icin .ana-izgara > * + * ritim kuralini eziyordu ve manset
   reklami bir ustteki boluma yapisiyordu (olculdu: margin-top 0px). */
.reklam { display: block; }
.reklam-kutu { display: flex; flex-direction: column; align-items: center; }
.reklam-kutu + .reklam-kutu { margin-top: 1rem; }
.reklam-etiket { color: var(--metin-3); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem; }
.reklam-gorsel { max-width: 100%; height: auto; border-radius: var(--kose-l); }
.reklam-baglanti { display: block; max-width: 100%; }
.reklam-cerceve { border: 0; display: block; max-width: 100%; background: transparent; }
/* MANSET REKLAMININ KENDI UST BOSLUGU YOK. Ritmi .ana-izgara > * + *
   kurali veriyor. Burada "margin: 0" yazmak da yanlisti: ayni ozgullukte
   ama DAHA SONRA geldigi icin kapsayici kuralini eziyor ve reklam bir
   ustteki boluma yapisiyordu (olculdu: margin-top 0px). Kural tamamen
   kaldirildi. */
.reklam-manset .reklam-gorsel { width: 100%; height: auto; }
.reklam-sol-dikey, .reklam-sag-dikey, .sosyal-yapisik { display: none; }

.uyg-davet {
  position: fixed; left: 50%; bottom: calc(var(--alt-h) + 16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 90;
  width: min(420px, calc(100vw - 32px));
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.1rem; border-radius: var(--kose-l);
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  box-shadow: var(--golge-3);
}
.uyg-davet-simge { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; }
.uyg-davet-govde { min-width: 0; flex: 1 1 auto; font-size: .9rem; }
.uyg-davet-govde strong { display: block; margin-bottom: .15rem; }
.uyg-davet-dugmeler { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.uyg-davet-kapat {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--zemin-3); border: 0; color: var(--metin-3); cursor: pointer;
  display: grid; place-items: center;
}
.uyg-adimlar { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.uyg-adimlar li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.uyg-adim-no {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--kirmizi-sis); color: var(--kirmizi-yazi); font-size: .74rem; font-weight: 800;
}

/* --- Ekran genislikleri -------------------------------------------------- */

/* DIKEY REKLAMLAR YALNIZ GERCEKTEN YER VARKEN.
   Esik hesapla bulundu: icerik sutunu 1180 + iki yanda 160px reklam +
   24px nefes payi = 1548. 1280'de aciliyordu ve reklam icerigin UZERINE
   biniyordu (olculdu: sutun 130px'ten basliyor, reklam 8px'te duruyor,
   168px genislikle ustune tasiyor). */
@media (min-width: 1560px) {
  .reklam-sol-dikey, .reklam-sag-dikey {
    display: block; position: fixed; z-index: 40; width: 160px;
    /* Kapagin ilk ogesiyle ayni cizgi: baslik yuksekligi + kapak ust
       dolgusu. Sabit 150px yazildiginda ikisi 43px kaciktir. */
    top: calc(var(--bas-h) + var(--kapak-ust));
  }
  .reklam-sol-dikey { left: calc((100vw - var(--kap)) / 2 - 184px); }
  .reklam-sag-dikey { right: calc((100vw - var(--kap)) / 2 - 184px); }
}

/* Kapak gorseli YALNIZ IKI SUTUNLU duzende esniyor: sutun yuksekligi
   soldaki icerikten geliyor, kart da onu dolduruyor. Tek sutuna dusunce
   (1039px alti) boyle bir referans yok, o yuzden kare oraniyla kaliyor. */
@media (min-width: 1040px) {
  .calan-kapak { aspect-ratio: auto; flex: 1 1 auto; min-height: 260px; }
}

@media (max-width: 1039px) {
  .kapak-ic { grid-template-columns: minmax(0, 1fr); }
  .ikili, .detay-izgara { grid-template-columns: minmax(0, 1fr); }
  .sohbet-vitrin { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 899px) {
  .ana-menu { display: none; }
  .cekmece-dugme { display: grid; }
  .ust-ara { display: none; }
  .alt-menu { display: flex; }

  /* Oynatici alt menunun hemen ustune sabitlenir. */
  .player {
    position: fixed; z-index: 65;
    left: 0; right: 0; bottom: calc(var(--alt-h) + env(safe-area-inset-bottom, 0px));
    width: 100%; max-width: none; flex: 0 0 auto;
    height: var(--player-h);
    margin: 0; border-radius: 0;
    border: 0; border-top: 1px solid var(--cizgi);
    background: var(--zemin-2);
    padding: .5rem 1rem;
  }
  /* Telefonda transport ALT MENUDEKI buyuk DINLE dairesi; seritte ikinci
     bir dugme hem tekrar hem de parca adindan yer caliyor. */
  .player-dugme, .player-yukleniyor, .player-sag { display: none; }

  /* DINLE DAIRESINE YER: serit tasma kadar uzuyor ve ayni kadar alt dolgu
     aliyor. Icerik ust bolumde toplaniyor, dairenin denk geldigi alt band
     bos kaliyor — parca adi artik dairenin arkasinda kalmiyor. */
  .player {
    height: calc(var(--player-h) + var(--dinle-tasma));
    /* Alt dolgu tasmadan 6px FAZLA: daire ile parca adi arasinda gozle
       gorulur bir nefes payi kaliyor, "yazinin arkasinda" izlenimi
       vermiyor. */
    padding: .4rem 1rem calc(.4rem + var(--dinle-tasma) + 6px);
  }
  /* Oynatici akistan ciktigi icin saga yaslamayi tema dugmesi devraliyor. */
  .tema-dugme { margin-left: auto; }

  body { padding-bottom: calc(var(--alt-h) + var(--player-h) + var(--dinle-tasma) + env(safe-area-inset-bottom, 0px)); }
  .uyg-davet { bottom: calc(var(--alt-h) + var(--player-h) + var(--dinle-tasma) + 14px + env(safe-area-inset-bottom, 0px)); }

  .gun-uzun { display: none; }
  .gun-kisa { display: inline; }
  .detay-kapak { width: 140px; height: 140px; }
}

@media (max-width: 560px) {
  .kap { padding-left: 16px; padding-right: 16px; }
  .kapak-dugmeler .dugme { flex: 1 1 auto; }
  .raf > li { width: 152px; }

  /* LOGO ELIPS OLMUSTU: burada yalniz height veriliyordu, genislik
     masaustu kuralindan (60px) kaliyordu — 60x48 bir oval cikiyordu.
     Daire icin IKISI de verilmeli. */
  .marka-logo { height: 48px; width: auto; }
  .marka-logo-kare { height: 48px; width: 48px; }

  /* SLOGAN TELEFONDA DA GORUNUYOR (kullanici istegi). Once gizliydi:
     12.5px'lik metin 48px logo + iki yuvarlak dugmeden artan ~170 piksele
     sigmiyor, uc noktayla kirpiliyordu. Punto kucultuldu, harf araligi
     sifirlandi — artik tamami goruluyor. */
  .marka-yazi strong { font-size: 1rem; }
  .marka-yazi small { display: block; font-size: .625rem; letter-spacing: 0; }
  .alt-ic { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* --- Ana sayfaya ozel iki yardimci ---------------------------------------
   SATIR ICI STIL KULLANILMIYOR: CSP style-src'de 'unsafe-inline' acik
   degil, style="..." sessizce engellenir. */
/* .bolum-arasi kalkti: bosluk artik .ana-izgara > * + * kuralindan
   geliyor; ayri bir sinifla ikinci bir ritim kurmak gerekmiyor. */
.istek-panelde { padding: .35rem 1.25rem .9rem; }

/* ===========================================================================
   15. SOHBET: LOBI, ODA, OZEL MESAJLAR
   ======================================================================== */

/* --- Lobi ---------------------------------------------------------------- */
.lobi-duzen {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 27%, 320px);
  gap: 2rem; align-items: start;
}
.lobi-ana, .lobi-yan { min-width: 0; }
.lobi-yan { display: flex; flex-direction: column; gap: var(--bolum-bosluk); }
.lobi-kutu { display: flex; flex-direction: column; }
.lobi-tumu {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .7rem; border-top: 1px solid var(--cizgi);
  color: var(--kirmizi-yazi); font-size: .88rem; font-weight: 700;
}
.lobi-tumu:hover { background: var(--zemin-3); }

.sohbet-giris-cagri, .sohbet-cagri {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.35rem; margin-bottom: 1.75rem;
  border-radius: var(--kose-l);
  background: var(--zemin-3); border: 1px solid var(--cizgi);
}
.sohbet-cagri-yazi { min-width: 0; color: var(--metin-2); font-size: .94rem; }
.sohbet-cagri-yazi strong { color: var(--metin); }
.sohbet-cagri-dugme { display: flex; gap: .6rem; flex-wrap: wrap; flex: 0 0 auto; }

/* --- Oda kartlari -------------------------------------------------------- */
.oda-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
}
.oda-kart {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.25rem;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--kose-xl); box-shadow: var(--golge-1);
  color: inherit;
  transition: transform var(--hiz-yay), box-shadow var(--hiz-yay);
}
.oda-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-2); color: inherit; }

.oda-ust { display: flex; align-items: flex-start; gap: .85rem; }
.oda-simge, .sohbet-oda-simge {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--kose);
  background: var(--kirmizi-sis); color: var(--kirmizi-yazi);
}
.oda-bas { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; }
.oda-bas strong, .oda-ad { font-size: 1.04rem; font-weight: 800; letter-spacing: -.02em; }
.oda-bas p, .oda-aciklama {
  margin: 0; color: var(--metin-3); font-size: .88rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.oda-son {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .7rem .85rem; border-radius: var(--kose);
  background: var(--zemin-3); min-width: 0;
}
.oda-son-ad { color: var(--kirmizi-yazi); font-size: .84rem; font-weight: 800; flex: 0 0 auto; }
.oda-son-metin {
  min-width: 0; color: var(--metin-2); font-size: .88rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oda-sessiz { color: var(--metin-3); font-size: .88rem; }

.oda-alt {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-top: auto;
  color: var(--metin-3); font-size: .84rem;
}
.oda-kisi { display: inline-flex; align-items: center; gap: .35rem; }
.oda-gir {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--kirmizi-yazi); font-weight: 700;
  transition: gap var(--hiz);
}
.oda-kart:hover .oda-gir { gap: .55rem; }

.cevrimici { display: inline-flex; align-items: center; gap: .35rem; color: var(--yesil-yazi); font-weight: 700; }
/* Liste satirinda nokta avatarin kosesine oturuyor; .cevrimici icindeki
   (yazi yanindaki) hali akista kaliyor. */
.cevrimici-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--yesil); flex: 0 0 auto; }
.yazisma-avatar .cevrimici-nokta {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  border: 2px solid var(--zemin-2);
}

/* --- Oda ici ------------------------------------------------------------- */
.sohbet-duzen {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1.25rem; align-items: start;
}
.sohbet-panel {
  display: flex; flex-direction: column;
  height: min(72vh, 680px);
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--kose-xl); box-shadow: var(--golge-1); overflow: hidden;
}
.sohbet-panel-ust {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--cizgi);
}
.sohbet-oda-bas { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.sohbet-oda-bas strong { font-size: 1rem; font-weight: 800; }
.sohbet-sayac { color: var(--metin-3); font-size: .8rem; }
.sohbet-geri {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--zemin-3); color: var(--metin-2); flex: 0 0 auto;
}
.sohbet-geri:hover { background: var(--zemin-4); color: var(--metin); }

.sohbet-akis {
  flex: 1 1 auto; overflow-y: auto; list-style: none;
  margin: 0; padding: 1rem; display: flex; flex-direction: column; gap: .75rem;
}
.sohbet-satir { display: flex; align-items: flex-start; gap: .65rem; }
.sohbet-govde { min-width: 0; }
.sohbet-bas { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.sohbet-ad { color: var(--kirmizi-yazi); font-size: .88rem; font-weight: 800; }
.sohbet-saat { color: var(--metin-3); font-size: .74rem; }
.sohbet-metin {
  display: inline-block; margin-top: .15rem;
  padding: .5rem .8rem; border-radius: 4px 14px 14px 14px;
  background: var(--zemin-3); color: var(--metin);
  font-size: .94rem; line-height: 1.55;
  overflow-wrap: anywhere;
}
.sohbet-bos { padding: 2.5rem 1rem; text-align: center; color: var(--metin-3); }
.sohbet-durum { padding: .5rem 1.1rem; color: var(--metin-3); font-size: .82rem; }
.sohbet-hata {
  margin: 0 1.1rem .6rem; padding: .6rem .85rem; border-radius: var(--kose);
  background: var(--kirmizi-sis); color: var(--kirmizi-yazi); font-size: .88rem;
}

.sohbet-yaz {
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .75rem; border-top: 1px solid var(--cizgi);
}
.sohbet-yaz textarea {
  flex: 1 1 auto; min-height: 44px; max-height: 120px;
  padding: .65rem .9rem; border-radius: var(--kose-l); resize: none;
}
.sohbet-emoji, .sohbet-gonder {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
}
.sohbet-emoji { background: var(--zemin-3); color: var(--metin-2); }
.sohbet-emoji:hover { background: var(--zemin-4); color: var(--metin); }
.sohbet-gonder { background: var(--kirmizi); color: #fff; }
.sohbet-gonder:hover { background: var(--kirmizi-koyu); }

.emoji-panel {
  position: absolute; bottom: 70px; right: 12px; z-index: 20;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .15rem;
  padding: .5rem; border-radius: var(--kose-l);
  background: var(--zemin-2); border: 1px solid var(--cizgi); box-shadow: var(--golge-2);
}
.emoji-panel button {
  width: 34px; height: 34px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; font-size: 1.1rem;
}
.emoji-panel button:hover { background: var(--zemin-3); }

.sohbet-kisiler { display: flex; flex-direction: column; gap: 1.25rem; }
.kisi-liste { list-style: none; margin: 0; padding: .35rem .75rem .9rem; }
.kisi-kart, .kisi-liste li { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: var(--kose); }
.kisi-liste li:hover { background: var(--zemin-3); }
.kisi-ad { min-width: 0; font-size: .92rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* .dinleyici-ad duz bir <span>; margin-left:auto orada islemiyordu.
   Rozet artik adin hemen yanina, satir ici hizali. */
.kisi-yetki {
  display: inline-flex; align-items: center; margin-left: .3rem;
  color: var(--altin); vertical-align: middle;
}
.kisi-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.dinleyici-liste { list-style: none; margin: 0; padding: .35rem .75rem .9rem; }
.dinleyici-liste li { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: var(--kose); }
.dinleyici-liste li:hover { background: var(--zemin-3); }
.dinleyici-ad { min-width: 0; flex: 1 1 auto; font-size: .92rem; font-weight: 650; }
.dinleyici-yaz {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--zemin-3); color: var(--kirmizi-yazi);
  font-size: 0;
}
.dinleyici-yaz:hover { background: var(--kirmizi); color: #fff; }
.dinleyici-ad { min-width: 0; font-size: .92rem; font-weight: 650; }
.dinleyici-yaz { margin-left: auto; color: var(--kirmizi-yazi); font-size: .8rem; font-weight: 700; }
/* Sayfa duzeyinde duran bir <p>; panelin ici degil. Kendi yumusak
   kutusuna alindi, yoksa sayfanin dibinde basibos bir yazi gibi duruyordu. */
.sohbet-kural {
  margin: var(--bolum-bosluk) 0 0;
  padding: 1rem 1.25rem; border-radius: var(--kose-l);
  background: var(--zemin-3); color: var(--metin-3); font-size: .88rem;
}
.sohbet-kural li { margin-bottom: .35rem; }
.sohbet-ust { margin-bottom: 1.25rem; }
.sohbet-eylem { display: flex; gap: .5rem; flex-wrap: wrap; }
.mini-eylem { padding: .4rem .8rem; font-size: .84rem; }
.rozet-sayi {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--hap);
  background: var(--kirmizi); color: #fff; font-size: .7rem; font-weight: 800;
}

/* --- Ozel mesajlar ------------------------------------------------------- */
.mesaj-duzen, .ozel-duzen {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 1.25rem; align-items: start;
}
.mesaj-yan { min-width: 0; }
.mesaj-ust { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.mesaj-ara-serit { padding: .75rem 1rem; border-bottom: 1px solid var(--cizgi); }
.mesaj-ara { width: 100%; }
.mesaj-simge { flex: 0 0 auto; color: var(--kirmizi); }
.mesaj-bas { min-width: 0; display: flex; flex-direction: column; }
.mesaj-secim { color: var(--metin-3); font-size: .86rem; padding: 2rem 1rem; text-align: center; }
.mesaj-bos-suzgec { padding: 1.25rem; color: var(--metin-3); font-size: .9rem; }

.yazisma-liste { list-style: none; margin: 0; padding: .35rem .5rem .75rem; }
.yazisma-liste a {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .75rem; border-radius: var(--kose); color: inherit;
}
.yazisma-liste a:hover, .yazisma-liste a.etkin { background: var(--zemin-3); }
.yazisma-govde { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.yazisma-bas { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.yazisma-bas strong { font-size: .94rem; font-weight: 700; }
.yazisma-bas time { color: var(--metin-3); font-size: .74rem; }
.yazisma-son { color: var(--metin-3); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yazisma-rozet {
  flex: 0 0 auto; display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--hap);
  background: var(--kirmizi); color: #fff; font-size: .7rem; font-weight: 800;
}
.ozel-eylem { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* --- Uye kutusu ---------------------------------------------------------- */
.uye-kutu {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.25rem;
}
.uye-rozet { margin-left: auto; }
.uye-cikis { color: var(--metin-3); font-size: .85rem; font-weight: 600; }
.uye-cikis:hover { color: var(--kirmizi-yazi); }

/* ===========================================================================
   16. KALAN BOLUMLER (haber yani, paylasim, iletisim, dinle penceresi)
   ======================================================================== */

/* HABER YAN SUTUNU.
   Kurallar bir ara gercek isaretlemeyle ortusmuyordu: .yan-sira bir SATIR
   kapsayicisi saniliyordu ama isaretlemede SIRA NUMARASI rozeti, .yan-govde
   de listenin dolgusu saniliyordu ama satirin yazi blogu. Sonuc: madde
   isaretleri gorunuyor, numaralar baslitan ayri bir satira dusuyor,
   kategoriler ve sayilari birbirine giriyordu (kullanici ekran goruntusu).
   Asagidaki kurallar duzen/haber-yan.php'deki yapinin birebir karsiligi. */
.haber-duzen { grid-template-columns: minmax(0, 1fr) clamp(250px, 27%, 320px); }
.haber-yan { display: flex; flex-direction: column; gap: var(--bolum-bosluk); min-width: 0; }

/* --- Kategoriler: hap etiketler ----------------------------------------- */
.yan-kategoriler {
  list-style: none; margin: 0; padding: 1rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.yan-kategoriler a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem; border-radius: var(--hap);
  background: var(--zemin-3); color: var(--metin-2);
  font-size: .86rem; font-weight: 600;
  transition: background var(--hiz), color var(--hiz);
}
.yan-kategoriler a:hover { background: var(--zemin-4); color: var(--metin); }
.yan-kategoriler a span { color: var(--metin-3); font-size: .76rem; font-weight: 800; }
.yan-kategoriler a.etkin { background: var(--kirmizi); color: #fff; }
.yan-kategoriler a.etkin span { color: rgba(255, 255, 255, .78); }

/* --- Haber listeleri (son haberler / en cok okunanlar) ------------------ */
.yan-haberler { list-style: none; margin: 0; padding: .4rem .7rem .8rem; }
.yan-haberler li { display: flex; align-items: flex-start; gap: .25rem; }
.yan-haberler li + li { border-top: 1px solid var(--cizgi); }
.yan-haberler a {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .6rem .55rem; border-radius: var(--kose); color: inherit;
  transition: background var(--hiz);
}
.yan-haberler a:hover { background: var(--zemin-3); color: inherit; }
.yan-haberler img {
  flex: 0 0 auto; width: 64px; height: 48px;
  border-radius: 10px; object-fit: cover;
}
.yan-govde { min-width: 0; display: flex; flex-direction: column; }
.yan-haberler strong {
  font-size: .89rem; font-weight: 650; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.yan-haberler small { margin-top: .2rem; color: var(--metin-3); font-size: .78rem; }

/* --- Sirali liste: numara rozeti ---------------------------------------- */
.yan-sira {
  flex: 0 0 auto; margin-top: .62rem;
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--zemin-3); color: var(--metin-2);
  font-size: .74rem; font-weight: 800;
}
.yan-sirali li:first-child .yan-sira { background: var(--kirmizi-sis); color: var(--kirmizi-yazi); }

/* HABER MAKALESI (haber.php).
   Bu dort sinif bir ara YAN SUTUNDAKI kucuk kart sanilip yatay flex
   yazilmisti: .yazi-kart flex satir, .yazi-kapak 64px kucuk resim,
   .yazi-ozet kolon. Oysa dordu de yalniz haber DETAY sayfasinda, makalenin
   kendisinde kullaniliyor. Sonuc: baslik dar bir sutuna sikisip kelime
   kelime aliniyor, kapak kucucuk bir simgeye donuyor, govde metni
   basligin yanina kaciyordu (kullanici ekran goruntusu).
   Asagidaki kurallar gercek yapinin karsiligi: makale bir KART, kapak tam
   genislikte, ozet omurgali bir giris paragrafi. */
.yazi-kart {
  display: block;
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  border-radius: var(--kose-xl);
  box-shadow: var(--golge-1);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.yazi-kart > header { margin-bottom: 1.25rem; }
.yazi-kart > header > .etiket { margin-bottom: .8rem; }
.yazi-ust-bilgi {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0; color: var(--metin-3); font-size: .85rem;
}
.yazi-kapak {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--kose-l); margin-bottom: 1.5rem;
}
/* Ozet: govdeden ayrilan giris paragrafi. */
.yazi-ozet {
  margin: 0 0 1.5rem; padding-left: 1rem;
  border-left: 3px solid var(--kirmizi);
  color: var(--metin-2); font-size: 1.06rem; line-height: 1.6;
}

/* PAYLASIM SERIDI. Dugmeler 40x40 DAIRE olarak yazilmisti ama her biri
   ikonun yaninda bir de YAZI tasiyor (WhatsApp, Facebook, Telegram,
   "Baglantiyi kopyala"); yazilar dairenin disina tasip birbirinin ve govde
   metninin uzerine biniyordu (kullanici ekran goruntusu).
   Dugmeler artik hap: ikon + yazi yan yana. Yalniz X'te yazi yok — agin
   logosu zaten "X" harfi — o yuzden tek basina kare/daire kaliyor. */
.paylas {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 1.75rem 0 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--cizgi);
}
.paylas-etiket {
  display: inline-flex; align-items: center; gap: .35rem; margin-right: .2rem;
  color: var(--metin-3); font-size: .85rem; font-weight: 700;
}
.paylas-dugme {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: var(--hap);
  background: var(--zemin-3); border: 0; color: var(--metin-2);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  white-space: nowrap;
  transition: background var(--hiz), color var(--hiz), transform var(--hiz);
}
.paylas-dugme svg { flex: 0 0 auto; }
.paylas-dugme:hover { background: var(--kirmizi); color: #fff; transform: translateY(-1px); }
/* Yazisiz dugme kare kalmasin, daire olsun. */
.paylas-x { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; }

/* ILETISIM LISTESI. Kural <li> hedefliyordu ama isaretlemede liste yok:
   .iletisim-liste bir <div>, cocuklari dogrudan <a> ve <span>. Secici hic
   eslesmedigi icin satirlar duz satir-ici kaliyor, ikon yaziya yapisiyor
   ve satirlar birbirinden ayrilmiyordu (kullanici ekran goruntusu). */
.iletisim-liste {
  margin: 0; padding: .5rem .7rem 1rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.iletisim-liste > a,
.iletisim-liste > span {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem; border-radius: var(--kose);
  color: inherit; font-size: .95rem;
  transition: background var(--hiz);
}
.iletisim-liste > a:hover { background: var(--zemin-3); color: inherit; }
.iletisim-liste svg { color: var(--kirmizi); flex: 0 0 auto; }
.iletisim-liste > .bos { padding: 1rem .6rem; }
.hat-dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0 1.25rem 1.25rem; }

/* Yan sutunlar her sayfada AYNI genislik ve AYNI aralik. */
.istek-duzen {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 27%, 320px);
  gap: 2rem; align-items: start;
}
.istek-yan { display: flex; flex-direction: column; gap: var(--bolum-bosluk); min-width: 0; }
.istek-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.istek-kart {
  display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem;
  background: var(--zemin-2); border: 1px solid var(--cizgi);
  border-radius: var(--kose-l); box-shadow: var(--golge-1);
}
.istek-kart blockquote {
  margin: 0; padding: .6rem .85rem; border-radius: var(--kose);
  background: var(--zemin-3); color: var(--metin-2); font-size: .92rem;
}
.istek-kart footer { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.istek-kart footer time { margin-left: auto; color: var(--metin-3); font-size: .78rem; }
.istek-turku { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 700; }
.istek-turku svg { color: var(--kirmizi); flex: 0 0 auto; }

.saat-liste { list-style: none; margin: 0; padding: .35rem 1.25rem 1.25rem; }
.saat-gun { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; }
.saat-aralik { color: var(--metin-2); font-weight: 700; }
/* Satirlarin ic duzeni hic yazilmamisti: <strong> ve <small> satir ici
   kaliyor, madde isaretleri gorunuyordu. */
.mini-istek-liste { list-style: none; margin: 0; padding: .5rem .7rem 1rem; }
.mini-istek-liste li {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .55rem .6rem; border-radius: var(--kose);
}
.mini-istek-liste li + li { border-top: 1px solid var(--cizgi); }
.mini-istek-liste strong { font-size: .92rem; font-weight: 700; }
.mini-istek-liste small {
  color: var(--metin-3); font-size: .85rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.yt-yer-tutucu {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--kose-l); overflow: hidden; background: var(--zemin-3);
}
.yt-yer-tutucu img { width: 100%; height: 100%; object-fit: cover; }

.orta-kutu { display: flex; align-items: center; gap: .6rem; padding: 1.25rem; color: var(--metin-2); }
.orta-kutu svg { color: var(--kirmizi); flex: 0 0 auto; }
.bosluk { height: 1.5rem; }
.genis { width: 100%; }
.alan-genis { grid-column: 1 / -1; }

/* Ayri dinleme penceresi (/dinle) — kendi kabugu, sade. */
.dinle-govde { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--zemin); }
.dinle-kutu {
  width: 100%; max-width: 420px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 2rem 1.75rem; border-radius: var(--kose-xl);
  background: var(--zemin-2); border: 1px solid var(--cizgi); box-shadow: var(--golge-2);
}
.dinle-marka { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.dinle-dugme {
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--kirmizi); color: #fff;
  box-shadow: 0 8px 24px rgba(224, 59, 59, .35);
}
.dinle-parca { font-size: 1.1rem; font-weight: 700; }
.dinle-program, .dinle-not { color: var(--metin-3); font-size: .88rem; }
.dinle-ses { display: flex; align-items: center; gap: .5rem; width: 100%; justify-content: center; }
.dinle-baglantilar { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.dinle-cerceve { width: 100%; border: 0; border-radius: var(--kose-l); }

/* --- Alt menudeki DINLE dugmesi (duzeltme) ------------------------------
   .alt-dinle bir <button>; .alt-oge sinifi yok, bu yuzden dizilimi burada
   kuruluyor. Golge de hafifletildi: genis ve koyu golge telefonda kirmizi
   bir dikdortgen gibi gorunuyordu. */
/* TEK YERDE TANIMLI. Bir ara ikinci bir .alt-dinle kurali daha vardi ve
   bu (daha sonraki) kural ustteki "justify-content: flex-end" degerini
   eziyordu; DINLE etiketi komsulariyla 15px kayik duruyordu (olculdu). */
.alt-dinle {
  position: relative; z-index: 2;
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 2px;
  padding: 0 0 var(--dinle-etiket-dip);
  background: transparent; border: 0; cursor: pointer;
  color: var(--kirmizi-yazi); font: inherit; font-size: .66rem; font-weight: 800;
}
/* Golge yukaridaki .alt-dinle-ikon kuralinda; burada tekrar edilmiyor. */

@media (max-width: 1039px) {
  .lobi-duzen, .sohbet-duzen, .mesaj-duzen, .ozel-duzen,
  .haber-duzen, .istek-duzen { grid-template-columns: minmax(0, 1fr); }
  .sohbet-kisiler { flex-direction: row; flex-wrap: wrap; }
  .sohbet-kisiler > * { flex: 1 1 260px; }
}

/* --- Son rotuslar --------------------------------------------------------- */

/* Suzgec formu: icinde tam yukseklikte bir .alan var; flex varsayilani
   "stretch" oldugu icin dugme o yuksekliga uzayip koca bir daire gibi
   duruyordu. */
.suzgec { align-items: flex-end; }
.suzgec .alan-genis { flex: 1 1 260px; }
.suzgec .dugme { flex: 0 0 auto; }

/* Simgeli girdi: simge kutunun ICINDE, solda. */
.alan-ikonlu { position: relative; display: flex; align-items: center; }
.alan-ikonlu svg {
  position: absolute; left: .95rem; color: var(--metin-3); pointer-events: none;
}
.alan-ikonlu input { padding-left: 2.7rem; }

/* OKUMA GENISLIGI SINIRLI AMA SOLA YASLI. Uzun metinler tam genislikte
   satir basina 140 karaktere cikiyordu; goz satir sonundan satir basina
   donerken kayboluyor. Ortalanmis dar sutun ISTENMIYOR (kullanicinin
   kalici tercihi) — bu yuzden yalniz tavan var, margin: auto yok. */
.metin-blok, .yazi .metin-blok { max-width: 74ch; }

/* --- Kapaktaki manset gorseli -------------------------------------------
   Sol sutunun dibinde, ozellik satirlarinin altinda duruyor. Kapagin geri
   kalaniyla ayni dilde: buyuk yuvarlak kose + yumusak golge.
   KIRPILMIYOR (object-fit: cover degil): gorsel bir afis, ustunden
   altindan kesilince sanatcilar gidiyor. Yukseklik tavani yok, genislik
   sutunu dolduruyor ve oran korunuyor. */
.kapak-sol .reklam-manset { margin-top: 2rem; }
.kapak-sol .reklam-manset .reklam-gorsel {
  border-radius: var(--kose-l);
  box-shadow: var(--golge-2);
}
.kapak-sol .reklam-manset .reklam-etiket { text-align: left; }

/* ===========================================================================
   SOHBET VITRINI — FOTOGRAFLI HAL (21.10.2026)
   ---------------------------------------------------------------------------
   Bolum yalniz soluk bir balon deseniyle duruyordu (opaklik .05, yani
   neredeyse gorunmez) ve kullanici "cok yavan, insanlari hic cekmiyor"
   dedi. Iki is yapildi:

   1) Panele gorsel alani eklendi (Ayarlar > Sohbet > Sohbet bolumu
      gorseli). Fotograf yuklenince blogun TAMAMINI kapliyor, uzerine
      soldan saga acilan bir perde biniyor: sol taraftaki yazi koyu zemine
      oturup beyazla okunuyor, sagdaki mesaj karti ise acik kalan tarafta
      duruyor. Boylece fotograf hem gorunuyor hem yaziyi bogmuyor.
   2) Fotograf yuklenmediginde desen gorunur hale getirildi ve canli
      dinleyici sayaci rozete tasindi — blok bos kalmiyor.
   ======================================================================== */

/* --- Fotografli hal ------------------------------------------------------ */
.vitrin-gorselli { position: relative; border-color: transparent; }

.vitrin-foto {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden;
}
.vitrin-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Perde: solda koyu, saga dogru aciliyor. Sol sutunda beyaz yazi
   okunacak, sag sutunda beyaz kart duracak. */
.vitrin-perde {
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10, 16, 26, .90) 0%,
    rgba(10, 16, 26, .78) 42%,
    rgba(10, 16, 26, .42) 100%
  );
}

.vitrin-gorselli > .vitrin-sol,
.vitrin-gorselli > .vitrin-sag { position: relative; z-index: 1; }

.vitrin-gorselli .vitrin-desen { display: none; }
.vitrin-gorselli .vitrin-sol h2 { color: #fff; }
.vitrin-gorselli .vitrin-sol p { color: rgba(255, 255, 255, .86); }
.vitrin-gorselli .vitrin-etiket {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.vitrin-gorselli .vitrin-etiket b { color: #fff; }
.vitrin-gorselli .dugme-sade,
.vitrin-gorselli .dugme-ikincil {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.vitrin-gorselli .dugme-sade:hover,
.vitrin-gorselli .dugme-ikincil:hover {
  background: rgba(255, 255, 255, .22); color: #fff;
}
.vitrin-gorselli .vitrin-sag { box-shadow: var(--golge-3); }

/* --- Fotograf yokken: desen gorunur olsun -------------------------------- */
.vitrin-desen { opacity: .13; color: var(--kirmizi); }
.sohbet-vitrin:not(.vitrin-gorselli) {
  background:
    radial-gradient(680px 340px at 88% -18%, var(--yikama-2), transparent 62%),
    radial-gradient(600px 360px at 4% 118%, var(--yikama-1), transparent 60%),
    var(--zemin-2);
}

/* Canli sayac rozetin icinde: "CANLI SOHBET · 12 kişi". */
.vitrin-etiket b {
  padding-left: .45rem; margin-left: .1rem;
  border-left: 1px solid currentColor;
  font-weight: 800;
}

/* ---------------------------------------------------------------------------
   HAFTALIK CIZELGE — TELEFONDA GUN GUN (21.10.2026)
   ---------------------------------------------------------------------------
   Yedi sutunlu bir tablo 390 piksele sigmaz: sutun basina ~108px kaliyor,
   program adlari ikiye ucune boluniyor ve tablo yatay kayiyordu.
   Telefonda tablo BLOK'a cevriliyor — her gun kendi basligi altinda, tam
   genislikte, alt alta. Yatay kaydirma tamamen kalkiyor.
   Masaustunde cizelge aynen duruyor.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .hafta-kaydir {
    overflow: visible; border: 0; background: transparent; border-radius: 0;
  }
  .hafta-tablo { display: block; min-width: 0; table-layout: auto; }
  .hafta-tablo thead { display: none; }
  .hafta-tablo tbody, .hafta-tablo tr { display: block; }

  .hafta-tablo td {
    display: block; padding: 0; border-left: 0;
    background: var(--zemin-2);
    border: 1px solid var(--cizgi); border-radius: var(--kose-l);
    overflow: hidden;
  }
  .hafta-tablo td + td { margin-top: .7rem; }
  .hafta-tablo .bugun { border-color: var(--kirmizi); background: var(--zemin-2); }

  .hafta-gun {
    display: block; padding: .7rem .9rem;
    background: var(--zemin-3); border-bottom: 1px solid var(--cizgi);
    font-size: .74rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--metin-3);
  }
  .hafta-tablo .bugun .hafta-gun {
    background: var(--kirmizi-sis); color: var(--kirmizi-yazi);
  }

  .hafta-kusak { padding: .55rem .9rem; border-radius: 0; }
  .hafta-kusak + .hafta-kusak { margin-top: 0; border-top: 1px solid var(--cizgi); }
  .hafta-saat { min-width: 48px; }
  .hafta-tablo td > .bos { display: block; padding: .9rem; }
}