/* VatanMillet Radyo — v2 (2026-08-23)
   Klasor yapisina gecis + gorsel yenileme (glassmorphism/katmanli derinlik,
   2026 muzik-uygulamasi arastirmasina dayanarak: koyu-mod-oncelikli, alt-sheet
   deseni, oynatici uzerinde "surgical" cam efekti, istasyonun kendi rengini
   arka planda yansitan "spatial" simdi-calan paneli). Marka kimligi (siyah+
   kirmizi, Playfair/Inter/JetBrains Mono) DEGISMEDI, sadece derinlik/malzeme
   dili zenginlestirildi. */

:root{
  --glass-bg: rgba(18,18,22,.62);
  --glass-bg-strong: rgba(10,10,12,.78);
  --glass-border: rgba(255,255,255,.09);
  --glass-blur: 22px;
  --sheet-radius: 22px;
}

*{box-sizing:border-box;}
body.vm{background:#000;}
.app{max-width:460px;margin:0 auto;min-height:100vh;background:#000;position:relative;
  padding-bottom:150px;display:flex;flex-direction:column;}

/* Ust bar — kullanici sikayeti (2026-08-23): "logoyu degistir" (emoji+yazi
   idi, gercek bir marka isareti degildi) + "sol ustteki 3 cizgi ne ise
   yariyor orada duruyor" (Ana Sayfa artik kalici bir alt-nav sekmesi
   oldugu icin ☰'nin "ana sayfaya don" islevi anlamsizlasti - buton
   TAMAMEN kaldirildi). Yeni logo: gercek bir SVG isaret (radyo dalgasi +
   nokta), emoji degil. */
.app-topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 6px;}
.app-logo{display:flex;align-items:center;gap:9px;}
.app-logo-isaret{flex-shrink:0;color:var(--red-bright);}
.app-logo-yazi{font-family:'Playfair Display',serif;color:var(--white);font-size:17px;letter-spacing:.06em;font-weight:700;}
.avatar-btn{width:30px;height:30px;border-radius:15px;background:var(--bg3);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;
  font-size:13px;color:var(--white);font-weight:700;overflow:hidden;}

/* Baglam etiketi — kullanici istegi (2026-08-23): Ruh Halim'deki statik
   "Şu an nasılsın..." yazisi "öylece duruyor, saçma" - o metnin rolünü
   artik bu ustlendi: her ekran acilisinda "Radyo" yazisinin yanindan
   interaktif belirip ~6.5sn sonra kendiliginden kaybolan bir etiket (Ana
   Sayfa'da kisisel selamlama, digerlerinde ekran adi - bkz. ekranlar.js
   topbarBaglamEtiketiGoster). JS sadece metni yazip '.gorunur' sinifini
   yeniden ekliyor, gorunme/kaybolma tamamen bu tek CSS animasyonunda. */
.topbar-baglam-etiket{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;
  color:var(--text-secondary);background:var(--bg3);border:1px solid var(--border2);
  border-radius:20px;padding:4px 11px;white-space:nowrap;opacity:0;pointer-events:none;}
.topbar-baglam-etiket.gorunur{animation:baglamEtiketiGoster 6.5s ease forwards;}
@keyframes baglamEtiketiGoster{
  0%{opacity:0;transform:translateX(-7px);}
  8%{opacity:1;transform:translateX(0);}
  82%{opacity:1;transform:translateX(0);}
  100%{opacity:0;transform:translateX(-4px);}
}

/* Ekran icerigi - artik GERCEK ayri dosyalardan (ekranlar/*.html) fetch
   edilip buraya yazilir (bkz. ekranlar.js), .ekran/.acik sinif-tabanli
   sahte gizle/goster sistemi degil. */
#ekranIcerik{padding:0 20px;flex:1;}

.karsilama{font-family:'JetBrains Mono',monospace;color:var(--text-secondary);font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;margin:4px 0 14px;}

/* Kayan yazi (uzun baslik/istasyon adlari icin) - metin kutuya sigmiyorsa
   JS 'tasiyor' sinifini ekler, CSS animasyonu devreye girer. */
.marquee-sarici{overflow:hidden;white-space:nowrap;position:relative;}
.marquee-sarici.tasiyor > *{display:inline-block;padding-right:32px;animation:marquee-kaydir 9s linear infinite;}
@keyframes marquee-kaydir{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.simdi-baslik-sarici h2{margin:0 0 6px;}

/* Ruh Halim / Aktivite kartlari */
/* Kullanici istegi (2026-08-23): "her satirda 4 tane olsun, 3 satir yeterli"
   - her Ruh Halim grubunda TAM 4 madde var (RUH_GRUPLARI), eskiden
   auto-fill(minmax 100px) dar ekranlarda 3 sutuna dusup 4.'yu yalniz
   birakiyordu (dagınık gorunum). Artik sabit 4 sutun - her grup tam bir
   satira sigiyor, tüm ekran 3 duzenli satirdan olusuyor. */
.ruh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px;}
.ruh-kart{background:var(--bg4);border:1px solid var(--border2);border-radius:13px;padding:12px 5px;
  text-align:center;cursor:pointer;transition:border-color .15s,transform .15s;}
.ruh-kart:active{transform:scale(.96);}
.ruh-kart .emoji{font-size:20px;margin-bottom:5px;}
.ruh-kart .etiket{font-size:11px;line-height:1.25;font-weight:700;color:var(--white);font-family:'Inter',sans-serif;}
.ruh-kart.renkli{border-color:var(--red-line);background:linear-gradient(160deg,#1c0508,#0a0203);}

/* Sizin Icin Onerilen — kullanici acikca istedi: "4 tane olsun buyuk
   resimlerle altina" (eskiden 10 tane kucuk kisayol-istasyon kartiydi). */
.oneri-buyuk-izgara{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px;}
.oneri-buyuk-kart{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;cursor:pointer;
  background:var(--bg3);box-shadow:0 8px 20px rgba(0,0,0,.35);}
.oneri-buyuk-kart .gorsel{position:absolute;inset:0;background-size:cover;background-position:center;}
.oneri-buyuk-kart .karartma{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85));}
.oneri-buyuk-kart .harf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:44px;color:#fff;opacity:.85;}
.oneri-buyuk-kart .ad{position:absolute;left:11px;right:11px;bottom:10px;color:#fff;font-weight:700;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Bugun Populer — GERCEK oynatma sayisina gore siralanmis liste (bkz.
   RadyoRepository::bugunPopuler); sira numarasi da gercek siralamayi
   yansitiyor, dekoratif degil. */
.populer-istasyon{flex:0 0 auto;width:76px;text-align:center;cursor:pointer;position:relative;}
.populer-istasyon .kisayol-amblem{width:60px;height:60px;margin:0 auto 6px;}
.populer-sira{position:absolute;top:-4px;left:50%;transform:translateX(14px);width:19px;height:19px;border-radius:50%;
  background:var(--red-bright);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg);}
.populer-oynatma{font-size:9px;color:var(--muted);font-family:'JetBrains Mono',monospace;}

/* Kategoriye gore yatay siralar (Ana Sayfa) */
.kategori-sira-baslik{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin:14px 0 8px;}

/* Muzik ritmine tepki veren gorselleyici - AnalyserNode veriyi verirse
   gercek genlik cubuklari, CORS/erisim engeliyse (cogu radyo akisi 3.
   taraf sunucudan, cross-origin analiz izni vermeyebilir) sade bir nabiz
   animasyonuna dusuyor - hicbir zaman "sahte veri okuyormus" gibi durmaz. */
.simdi-amblem-sarici{position:relative;width:220px;margin-bottom:22px;}
.simdi-amblem-sarici .simdi-amblem{margin-bottom:0;}
/* Kullanici istegi (2026-08-23): "su damlacigini kaldir, cubuklari
   buyut" - yukseklik 36px'ten 64px'e cikti, JS'de su-damlasi halkalari
   kaldirildi. */
.gorselleyici{display:block;width:100%;height:64px;margin-top:14px;}

/* Hero: Su An Calan/Senin Icin — katmanli derinlik: kendi amblem rengi
   bulanik bir "glow" olarak arkada, karti icerigine gore canlandirir. */
.hero-kart{position:relative;background:linear-gradient(160deg,#1c0508,#0a0203);border:1px solid var(--red-line);
  border-radius:18px;padding:16px;margin-bottom:20px;cursor:pointer;overflow:hidden;isolation:isolate;}
.hero-kart::before{content:'';position:absolute;inset:-40% -20% auto auto;width:70%;aspect-ratio:1;
  background:var(--hero-glow, radial-gradient(circle, rgba(232,16,42,.35), transparent 70%));
  filter:blur(30px);z-index:-1;pointer-events:none;}
.hero-etiket{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--red-bright);
  text-transform:uppercase;margin:0 0 10px;}
.hero-canli{position:absolute;top:14px;right:16px;background:var(--red-bright);color:#fff;font-size:9px;
  font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:5px;}
.hero-icerik{display:flex;align-items:center;gap:14px;}
.hero-amblem{width:60px;height:60px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;color:#fff;font-size:24px;box-shadow:0 6px 18px rgba(200,0,10,.35);object-fit:cover;}
.hero-bilgi{flex:1;min-width:0;}
.hero-baslik{font-family:'Inter',sans-serif;font-weight:700;color:var(--white);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-alt{color:var(--text-secondary);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hero-cal-btn{width:46px;height:46px;border-radius:23px;background:var(--red-bright);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;box-shadow:0 4px 14px rgba(232,16,42,.4);}

/* Su An Dinleyenler — platform genelinde su an radyo dinleyen herkesin
   canli sosyal-kanit seridi (2026-08-29/30 gece bulundu: backend baştan
   beri vardi, hicbir arayuz gostermiyordu). Kimse dinlemiyorsa TAMAMEN
   gizli - "0 kisi dinliyor" yalniz/bozuk hissettirir. */
.su-an-dinleyenler-karti{background:var(--bg2);border:1px solid var(--border2);border-radius:14px;
  padding:12px 14px;margin-bottom:20px;}
.su-an-dinleyenler-baslik{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text);
  font-weight:600;margin-bottom:10px;}
.canli-nokta{width:8px;height:8px;border-radius:50%;background:var(--red-bright);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(232,16,42,.6);animation:canliNoktaNabiz 2s infinite;}
@keyframes canliNoktaNabiz{0%{box-shadow:0 0 0 0 rgba(232,16,42,.5);}70%{box-shadow:0 0 0 7px rgba(232,16,42,0);}100%{box-shadow:0 0 0 0 rgba(232,16,42,0);}}
.su-an-dinleyenler-avatarlar{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
.su-an-dinleyenler-avatarlar::-webkit-scrollbar{height:0;}
.sad-avatar{flex:0 0 auto;width:44px;text-align:center;}
.sad-avatar-resim{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;color:#fff;font-size:14px;margin:0 auto 4px;border:1.5px solid var(--red-line);object-fit:cover;}
.sad-avatar-ad{font-size:8.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Hizli erisim */
.bolum-baslik{display:flex;justify-content:space-between;align-items:center;margin:20px 0 12px;}
.bolum-baslik h2{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-secondary);margin:0;}
.bolum-baslik a{font-size:11.5px;color:var(--red-bright);text-decoration:none;font-weight:600;}

.yatay-kaydir{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
.yatay-kaydir::-webkit-scrollbar{height:0;}
.kisayol-istasyon{flex:0 0 auto;width:64px;text-align:center;cursor:pointer;}
.kisayol-amblem{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;color:#fff;font-size:20px;margin:0 auto 6px;border:1px solid var(--border2);object-fit:cover;}
.kisayol-ad{font-size:9.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;}

/* Seri karti */
.seri-karti{background:linear-gradient(120deg,#2a0004,#0a0002);border:1px solid var(--red-line);border-radius:16px;
  padding:16px;margin:20px 0 4px;display:none;}
.seri-ust{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.seri-metin{font-family:'Inter',sans-serif;font-weight:700;color:var(--white);font-size:14px;}
.seri-metin span{color:var(--red-bright);}
.seri-alt{color:var(--text-secondary);font-size:11.5px;margin-top:2px;}
.hafta-satiri{display:flex;justify-content:space-between;}
.hafta-gun{display:flex;flex-direction:column;align-items:center;gap:5px;}
.hafta-nokta{width:24px;height:24px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:10px;}
.hafta-nokta.aktif{background:var(--red-bright);border-color:var(--red-bright);}
.hafta-nokta.bugun{border-width:1.5px;border-color:var(--white);}
.hafta-etiket{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:8.5px;}

/* Genel istasyon satiri */
.satir{display:flex;align-items:center;gap:12px;background:var(--bg4);border:1px solid var(--border2);
  border-radius:13px;padding:11px 12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s;}
.satir:active{background:var(--bg3);}
.satir.calan{border-color:var(--red-bright);background:var(--red-soft);}
.amblem{width:42px;height:42px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;color:#fff;font-size:17px;background:var(--bg3);border:1px solid var(--border2);object-fit:cover;}
.satir-bilgi{flex:1;min-width:0;}
.satir-baslik{font-family:'Inter',sans-serif;font-weight:700;color:var(--white);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.satir-alt{color:var(--text-secondary);font-size:11.5px;margin-top:1px;}
.satir-canli{background:var(--red-bright);color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.05em;padding:3px 7px;border-radius:5px;flex-shrink:0;}
.satir-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);flex-shrink:0;}
.satir-btn.aktif-yildiz{color:#e0a020;}
.cal-ikon{font-size:18px;color:var(--text-secondary);flex-shrink:0;}
.cal-ikon.aktif{color:var(--red-bright);}

/* Arama + cip */
.arama-cubugu{background:var(--bg4);border:1px solid var(--border2);border-radius:12px;padding:11px 15px;
  color:var(--white);width:100%;font-size:13.5px;margin:14px 0 12px;}
.arama-cubugu::placeholder{color:var(--muted);}
.cip-satiri{display:flex;gap:7px;overflow-x:auto;padding-bottom:12px;}
.cip-satiri::-webkit-scrollbar{height:0;}
.cip{flex:0 0 auto;background:var(--bg3);border:1px solid var(--border2);border-radius:20px;padding:7px 15px;
  font-size:12px;color:var(--text-secondary);font-weight:600;cursor:pointer;white-space:nowrap;}
.cip.aktif{background:var(--red-bright);border-color:var(--red-bright);color:#fff;}

/* Alt navigasyon — kullanici sikayeti (2026-08-23): "menunun ustune cikan
   cubuk istemiyorum" (eski .mini-player kaldirildi, artik menude YOK) +
   "alt menu orta kisim ozel bir yer oldugu icin diğerlerinden daha farkli
   olsun, canli radyo/podcast acildiginda hareket etsin ve etrafinda
   birseyler hareket etsin". Orta buton artik kabartilmis (FAB benzeri) bir
   daire; caliyor olan icerigin amblemini gosterir, caliyorken pulslayan bir
   halka + hafif "nefes alma" animasyonu var - "oynatiyor gibi" hissettirir. */
.alt-nav{position:fixed;left:0;right:0;bottom:0;max-width:460px;margin:0 auto;display:flex;align-items:flex-end;
  background:rgba(8,8,10,.88);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-top:1px solid var(--border2);padding:9px 4px calc(env(safe-area-inset-bottom,0px) + 9px);z-index:41;}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;
  color:var(--muted);cursor:pointer;padding:4px 0;}
.nav-btn .ikon{display:flex;align-items:center;justify-content:center;height:20px;}
.nav-btn .etiket{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.03em;
  max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-btn.aktif{color:var(--red-bright);}

.nav-btn-merkez{gap:5px;margin-top:-30px;}
.nav-merkez-daire{position:relative;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(150deg,var(--red-bright),#7a0007);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(232,16,42,.45),0 0 0 4px #000;transition:transform .2s;
  animation:navBosNabiz 3.4s ease-in-out infinite;}
/* Hicbir sey calmiyorken de tamamen hareketsiz/"cansiz" durmasin diye hafif
   bir parlama nabzi - .caliyor'un GERCEK "calıyor" animasyonuyla (asagida,
   daha guclu, halkali) karistirilmasin diye sadece golge yumusakca titriyor,
   olcek/halka yok (yanlis "su an calıyor" izlenimi vermemek icin). */
@keyframes navBosNabiz{
  0%,100%{box-shadow:0 6px 18px rgba(232,16,42,.4),0 0 0 4px #000;}
  50%{box-shadow:0 6px 22px rgba(232,16,42,.65),0 0 0 4px #000;}
}
.nav-merkez-amblem{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fff;background-size:cover;background-position:center;}
.nav-merkez-halka{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);
  pointer-events:none;opacity:0;}
.nav-merkez-halka circle{fill:none;stroke:var(--red-bright);stroke-width:1.6;}
.nav-btn-merkez.caliyor .nav-merkez-daire{animation:navNefes 2.2s ease-in-out infinite;}
.nav-btn-merkez.caliyor .nav-merkez-halka{opacity:1;animation:navHalka 1.8s ease-out infinite;}
@keyframes navNefes{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
@keyframes navHalka{0%{transform:scale(.85);opacity:.7;}100%{transform:scale(1.35);opacity:0;}}

/* Simdi Calan tam ekran — "spatial" arka plan: caliyor olan istasyonun
   kendi rengi (amblemden turetilen degrade) bulanik biçimde arka planda,
   uzerine koyu bir cam katmani. Yalnizca burada kullaniliyor (surgical),
   diger yuzeyler duz siyah kaliyor. */
.simdi-panel{position:fixed;inset:0;background:#000;z-index:70;overflow-y:auto;display:none;}
.simdi-panel.acik{display:block;}
.simdi-panel-arkaplan{position:fixed;inset:0;z-index:-1;background:var(--simdi-glow,#000);opacity:.55;
  filter:blur(60px) saturate(1.3);transform:scale(1.2);transition:background .6s ease;}
.simdi-panel-karartma{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.92) 60%);}
.simdi-ust{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 4px;}
.simdi-ust button{background:none;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer;}
.simdi-canli-etiket{font-family:'JetBrains Mono',monospace;color:var(--red-bright);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;}
.simdi-icerik{display:flex;flex-direction:column;align-items:center;padding:16px 28px 40px;text-align:center;}
.simdi-amblem{width:220px;height:220px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;color:#fff;font-size:80px;margin-bottom:22px;box-shadow:0 20px 54px rgba(0,0,0,.5);object-fit:cover;}
.simdi-icerik h2{font-family:'Inter',sans-serif;font-weight:700;color:var(--white);font-size:22px;margin:0 0 6px;}
.simdi-alt{color:var(--text-secondary);font-size:13.5px;margin:0 0 12px;}
.simdi-rozetler{display:flex;gap:8px;margin-bottom:26px;}
.simdi-rozet{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:5px 12px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text-secondary);}
.simdi-rozet.canli{background:var(--red-bright);color:#fff;border-color:var(--red-bright);font-weight:700;}
/* Ilerleme cubugu - SADECE bolum (podcast) calarken gorunur, canli yayinin
   suresi/pozisyonu olmadigi icin radyoda gosterilmez. Kullanici acikca
   istedi: "podcastlar icin durum cubugu yok, kullanici tam kontrol
   edebilmeli" - ileri/geri sarma + surukleme. */
.ilerleme-alani{width:100%;max-width:400px;margin:6px 0 14px;}
.ilerleme-cubugu{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:var(--bg3);cursor:pointer;outline:none;}
.ilerleme-cubugu::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;
  border-radius:50%;background:var(--red-bright);box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer;}
.ilerleme-cubugu::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--red-bright);cursor:pointer;}
.ilerleme-zamanlar{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;color:var(--muted);margin-top:5px;}

.simdi-kontroller{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:8px;}
.yan-btn{background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;width:40px;}
.yan-btn.aktif-yildiz{color:#e0a020;}
.yan-btn.kucuk{font-size:19px;}
.yan-btn.sarma{font-size:13px;font-family:'JetBrains Mono',monospace;font-weight:700;width:44px;}
.cal-buyuk{width:64px;height:64px;border-radius:14px;background:var(--red-bright);border:none;color:#fff;
  font-size:22px;cursor:pointer;box-shadow:0 8px 22px rgba(232,16,42,.4);}

/* Arac Modu - araba ikonuna tiklayinca gercekten bir sey degismiyordu
   (kullanici sikayeti), artik butonlari/yaziyi buyutup goz atmasi/dokunmasi
   kolay hale getiren gercek bir mod. */
.simdi-panel.arac-modu .simdi-amblem-sarici{width:170px;}
.simdi-panel.arac-modu .simdi-icerik h2{font-size:28px;}
.simdi-panel.arac-modu .simdi-alt{font-size:16px;}
.simdi-panel.arac-modu .cal-buyuk{width:88px;height:88px;border-radius:20px;font-size:30px;}
.simdi-panel.arac-modu .yan-btn{font-size:30px;width:54px;}
.simdi-panel.arac-modu .yan-btn.kucuk{font-size:26px;}
.simdi-panel.arac-modu .yan-btn.sarma{font-size:17px;width:56px;}
#aracModuBtn.aktif{color:var(--red-bright);}

/* Uyku Zamanlayici - eskiden panelin YARISINI kaplayan 200x200 daire her
   zaman goruluyordu ("kocaman yer kapliyor, asil on planda olmasi gereken
   yer orasi degil" sikayeti). Artik kompakt bir dugme; tam UI kendi alt-sheet'inde. */
.uyku-ozet-btn{display:flex;align-items:center;gap:8px;background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:20px;padding:9px 16px;margin-top:22px;font-family:'Inter',sans-serif;font-weight:600;
  font-size:12.5px;color:var(--text);cursor:pointer;}
.uyku-ozet-btn .rozet{background:var(--red-bright);color:#fff;border-radius:10px;padding:1px 7px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;}

/* Su An Ne Calsin (anket) */
.anket-alani{width:100%;max-width:400px;margin-top:32px;text-align:left;background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);border-radius:14px;padding:16px;}
.anket-baslik-satiri{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.anket-baslik{font-family:'JetBrains Mono',monospace;color:var(--text-secondary);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;}
.anket-oy-sayisi{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:10px;}
.anket-secenek{margin-bottom:10px;cursor:pointer;}
.anket-secenek:last-child{margin-bottom:0;}
.anket-secenek-ust{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text);margin-bottom:5px;}
.anket-secenek.secili .anket-secenek-ust{color:var(--white);font-weight:700;}
.anket-bar-zemin{height:6px;border-radius:3px;background:var(--bg3);overflow:hidden;}
.anket-bar-dolu{height:100%;border-radius:3px;background:var(--red-bright);transition:width .3s;}

/* Uyku */
.uyku-alani{margin-top:32px;width:100%;display:flex;flex-direction:column;align-items:center;}
.uyku-daire{position:relative;width:200px;height:200px;margin-bottom:18px;}
.uyku-daire svg{width:100%;height:100%;transform:rotate(-90deg);}
.uyku-daire-zemin{fill:none;stroke:var(--bg3);stroke-width:8;}
.uyku-daire-dolu{fill:none;stroke:var(--red-bright);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s ease;}
.uyku-daire-icerik{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.uyku-daire-icerik .buyuk{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--white);font-size:28px;}
.uyku-daire-icerik .kucuk{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:10px;text-transform:uppercase;}
.uyku-chip-satiri{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:18px;}
.uyku-chip{border:1px solid var(--border2);border-radius:20px;padding:8px 14px;background:none;color:var(--text);
  font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;cursor:pointer;}
.uyku-chip.aktif{background:var(--red-dim);border-color:var(--red-bright);color:var(--red-bright);}
.uyku-baslat-btn{background:var(--red-bright);border:none;color:#fff;border-radius:12px;padding:14px;width:100%;
  font-weight:700;font-size:14.5px;cursor:pointer;max-width:400px;}
.uyku-iptal-btn{background:none;border:none;color:var(--text-secondary);margin-top:12px;font-size:12.5px;cursor:pointer;}

/* Alt-sheet ekranlar (Sohbet/Ayarlar/Liste) — 2026 arastirmasi: ikincil
   icerik icin ust koseleri yuvarlatilmis, tutamacli "bottom sheet" deseni,
   opak tam-sayfa panel yerine. */
.sheet-ekran{position:fixed;left:0;right:0;bottom:0;top:8vh;background:var(--glass-bg-strong);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);border-top-left-radius:var(--sheet-radius);border-top-right-radius:var(--sheet-radius);
  z-index:80;display:none;flex-direction:column;max-width:460px;margin:0 auto;
  transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);}
.sheet-ekran.acik{display:flex;transform:translateY(0);}
.sheet-tutamac{width:36px;height:4px;border-radius:2px;background:var(--border3);margin:10px auto 0;flex-shrink:0;}
.sohbet-ust{padding:14px 20px 0;flex-shrink:0;}
.sohbet-ust-satir{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.sohbet-ust-satir button{background:none;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer;}
.sohbet-ust-baslik{font-family:'Inter',sans-serif;font-weight:700;color:var(--white);font-size:15px;flex:1;}
.sohbet-dinleyici{font-family:'JetBrains Mono',monospace;color:var(--text-secondary);font-size:11px;}
.sohbet-sekmeler{display:flex;gap:18px;border-bottom:1px solid var(--border2);margin-top:8px;}
.sohbet-sekme{background:none;border:none;color:var(--text-secondary);font-size:12.5px;font-weight:600;
  padding:10px 0;cursor:pointer;border-bottom:2px solid transparent;}
.sohbet-sekme.aktif{color:var(--red-bright);border-color:var(--red-bright);}
.sohbet-govde{flex:1;overflow-y:auto;padding:16px 20px;}
.sohbet-mesaj-satiri{display:flex;gap:10px;margin-bottom:16px;}
.sohbet-avatar{width:32px;height:32px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-weight:700;color:#fff;font-size:12px;}
.sohbet-mesaj-govde{flex:1;min-width:0;}
.sohbet-mesaj-ust{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.sohbet-kullanici{font-weight:700;color:var(--white);font-size:12.5px;}
.sohbet-zaman{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:10px;flex-shrink:0;}
.sohbet-mesaj-metin{color:var(--text);font-size:13px;margin-top:2px;line-height:1.4;}
.sohbet-mesaj-satiri.dj .sohbet-mesaj-govde{background:var(--red-soft);border:1px solid var(--red-line);
  border-radius:10px;padding:8px 10px;}
.sohbet-dj-rozeti{background:var(--red-bright);color:#fff;font-size:8px;font-weight:700;padding:2px 5px;border-radius:4px;margin-left:5px;}
.sohbet-bos{color:var(--text-secondary);font-size:13px;text-align:center;margin-top:40px;}
.sohbet-giris-alani{padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 20px);border-top:1px solid var(--border2);
  display:flex;gap:10px;flex-shrink:0;}
.sohbet-giris{flex:1;background:var(--bg4);border:1px solid var(--border2);border-radius:22px;
  padding:11px 16px;color:var(--white);font-size:13.5px;}
.sohbet-gonder-btn{width:42px;height:42px;border-radius:21px;background:var(--red-bright);border:none;color:#fff;
  font-size:16px;cursor:pointer;flex-shrink:0;}

/* Profil */
.profil-karti{background:linear-gradient(160deg,#1a0509,#0a0203);border:1px solid var(--red-line);border-radius:18px;
  padding:20px;text-align:center;margin-bottom:18px;}
.profil-avatar{width:76px;height:76px;border-radius:38px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;color:#fff;font-size:30px;position:relative;}
.profil-seviye-rozeti{position:absolute;bottom:-4px;right:-4px;width:26px;height:26px;border-radius:13px;background:var(--red-bright);
  color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;display:flex;align-items:center;
  justify-content:center;border:2px solid #0a0203;}
.profil-ad{font-family:'Inter',sans-serif;font-weight:700;color:var(--white);font-size:17px;}
.profil-etiket{color:var(--text-secondary);font-size:12px;margin:2px 0 12px;}
.profil-xp-zemin{height:6px;border-radius:3px;background:var(--bg3);overflow:hidden;margin-bottom:8px;}
.profil-xp-dolu{height:100%;border-radius:3px;background:var(--red-bright);}
.profil-xp-metin{font-family:'JetBrains Mono',monospace;color:var(--text-secondary);font-size:10.5px;}
.profil-stat-satiri{display:grid;grid-template-columns:1fr 1fr 1fr;margin:18px 0 4px;}
.profil-stat{text-align:center;}
.profil-stat .deger{font-family:'Playfair Display',serif;color:var(--white);font-size:19px;}
.profil-stat .etiket{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:9px;text-transform:uppercase;margin-top:2px;}
.rozet-satiri{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
.rozet-ikon-kart{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:var(--bg4);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:22px;}
.profil-menu{margin-top:18px;}
.profil-menu-satir{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--border);
  cursor:pointer;}
.profil-menu-satir:last-child{border-bottom:none;}
.profil-menu-satir .ikon{font-size:17px;width:22px;text-align:center;color:var(--text-secondary);}
.profil-menu-satir .etiket{flex:1;color:var(--white);font-size:14px;font-weight:600;}
.profil-menu-satir .ok{color:var(--muted);font-size:14px;}
.profil-menu-satir.cikis .etiket{color:var(--red-bright);}

/* Arkadaslar */
.arkadas-sekmeler{display:flex;gap:8px;margin:14px 0 14px;}
.arkadas-sekme{flex:1;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:9px;
  color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;text-align:center;}
.arkadas-sekme.aktif{background:var(--red-bright);border-color:var(--red-bright);color:#fff;}
.arkadas-satiri{display:flex;align-items:center;gap:12px;background:var(--bg4);border:1px solid var(--border2);
  border-radius:13px;padding:12px;margin-bottom:8px;}
.arkadas-durum{font-size:11.5px;color:var(--text-secondary);margin-top:1px;}
.arkadas-durum.canli{color:var(--red-bright);}
.arkadas-play-btn{width:34px;height:34px;border-radius:17px;background:var(--red-dim);border:1px solid var(--red-line);
  color:var(--red-bright);font-size:14px;flex-shrink:0;}
.arkadas-btn-kucuk{background:var(--red-bright);border:none;color:#fff;border-radius:8px;padding:8px 13px;
  font-size:11.5px;font-weight:700;cursor:pointer;margin-left:6px;}
.arkadas-btn-kucuk.reddet{background:var(--bg3);color:var(--text-secondary);}
.davet-btn{background:var(--red-bright);border:none;color:#fff;border-radius:12px;padding:14px;width:100%;
  font-weight:700;font-size:14px;cursor:pointer;margin-top:6px;}
.yakinda-kart{background:var(--bg4);border:1px dashed var(--border3);border-radius:14px;padding:24px;text-align:center;}
.yakinda-kart .ikon{font-size:30px;margin-bottom:8px;}
.yakinda-kart .baslik{color:var(--white);font-weight:700;font-size:14px;margin-bottom:4px;}
.yakinda-kart .aciklama{color:var(--text-secondary);font-size:12px;}

.vm-empty2{color:var(--text-secondary);font-size:13px;text-align:center;padding:24px 0;}

.ekran-baslik{font-size:15px;text-transform:none;letter-spacing:0;color:var(--white);
  font-family:'Inter',sans-serif;font-weight:700;}

.podcast-geri-btn{background:none;border:none;color:var(--red-bright);font-size:13.5px;font-weight:600;
  padding:16px 0 4px;cursor:pointer;}
.podcast-detay-ust{display:flex;align-items:center;gap:14px;margin:8px 0 18px;}
.podcast-detay-bilgi{min-width:0;flex:1;}
.podcast-detay-ad{font-family:'Inter',sans-serif;font-weight:800;color:var(--white);font-size:17px;}
.podcast-detay-aciklama{color:var(--text-secondary);font-size:12px;margin-top:3px;}