/* ─────────────────────────────────────────────────────────────
   Yasha Records — css/variables.css
   CSS değişkenleri ve tema tanımları.
   Her iki sayfanın <style> bloğundaki :root tanımının
   tek yetkili kaynağıdır.
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   ÖLÇEK VE KAPSAM

   Site 1500px'lik bir kutuya sıkışıyordu. 2K bir ekranda bu, sağda
   solda kocaman boşluk bırakıyor ve her şeyi küçük gösteriyordu;
   tarayıcıyı %140 zoomlayınca "doğru" hissettirmesinin sebebi buydu.
   Zoom iki şey birden yapıyor: kutuyu ekranın daha büyük bir kısmına
   yayıyor ve içindeki her şeyi büyütüyor. Burada ikisini de zoomsuz
   yapıyoruz ki ekran ne olursa olsun herkes aynı oranları görsün.

   --kapsam : içeriğin yaslandığı genişlik.
   font-size: ekran büyüdükçe kök yazı boyu da büyüyor. Sitedeki
              ölçüler rem cinsinden olduğu için kart, boşluk ve yazı
              hepsi birlikte ölçekleniyor. 1440px'de 16px (eski hal),
              2560px'de 22px, yani eski %140 zoom'un karşılığı.

   Kırılma noktaları (media query) piksel kalıyor: onlar kök yazı
   boyundan etkilenmez, etkilenseydi mobil eşikleri kayardı.
   ───────────────────────────────────────────────────────────── */
html {
  font-size: clamp(16px, 0.57vw + 7.8px, 22px);
}

:root {
  --kapsam: 2280px;
  --yan-bosluk: 3.2vw;

  --pr: #ff4500;
  --pr-d: #cc3700;
  --pr-s: rgba(255, 69, 0, .12);
  --bg: #060606;
  --surf: #0c0c0c;
  --card: #111;
  --card-h: #161616;
  --text: #f0f0f0;
  --text-s: rgba(240, 240, 240, .7);
  --muted: rgba(240, 240, 240, .4);
  --border: rgba(255, 255, 255, .07);
  --border-h: rgba(255, 255, 255, .13);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gold: #f59e0b;
  --green: #22c55e;
  --blue: #3b82f6;
  --red: #ef4444;
  --purple: #a855f7;
  --cyan: #06b6d4;
  --tap: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Yüzey tonları. Paneller bunları sabit beyaz/siyah olarak yazıyordu
     (girdi zemini rgba(255,255,255,.04), modal rgba(14,14,14,.97) gibi);
     açık temada beyaz üstüne beyaz yazı çıkıyordu. */
  --input-bg: rgba(255, 255, 255, .04);
  --hover-bg: rgba(255, 255, 255, .03);
  --modal-bg: rgba(14, 14, 14, .97);
  --bar-bg:   rgba(10, 10, 10, .96);   /* yapışkan üst/alt çubuklar */
  --scrim:    rgba(0, 0, 0, .82);
}

[data-theme="oled"] {
  --modal-bg: rgba(8, 8, 8, .97);
  --bar-bg:   rgba(4, 4, 4, .96);
  --bg: #000;
  --surf: #050505;
  --card: #0a0a0a;
  --card-h: #0f0f0f;
}

[data-theme="light"] {
  /* Vurgu renkleri açık zeminde bir tık koyu: #a855f7 gibi tonlar beyaz
     üstünde yazı olarak soluk kalıyordu. Rozet zeminlerinde de beyaz
     metinle kontrast artıyor, iki yönde de kazanç. */
  --gold:   #b45309;
  --green:  #15803d;
  --blue:   #1d4ed8;
  --red:    #dc2626;
  --purple: #7e22ce;
  --cyan:   #0e7490;
  --input-bg: rgba(0, 0, 0, .045);
  --hover-bg: rgba(0, 0, 0, .035);
  --modal-bg: rgba(255, 255, 255, .98);
  --bar-bg:   rgba(250, 250, 252, .96);
  --scrim:    rgba(0, 0, 0, .45);
  --bg: #f5f5f7;
  --surf: #fff;
  --card: #fff;
  --card-h: #f0f0f2;
  --text: #111;
  --text-s: rgba(0, 0, 0, .7);
  --muted: rgba(0, 0, 0, .45);
  --border: rgba(0, 0, 0, .08);
  --border-h: rgba(0, 0, 0, .14);
}
[data-theme="light"] nav.main-nav { background: rgba(245, 245, 247, .92); }
[data-theme="light"] .user-menu,
[data-theme="light"] .notif-dropdown { background: rgba(255, 255, 255, .97); }
[data-theme="light"] .search-input-wrap,
[data-theme="light"] .search-results { background: rgba(255, 255, 255, .95); }
[data-theme="light"] .bottom-nav { background: rgba(245, 245, 247, .96); }
[data-theme="light"] .locked-overlay { background: linear-gradient(180deg, transparent 0%, rgba(245, 245, 247, .8) 40%, rgba(245, 245, 247, .95) 100%); }
[data-theme="light"] .prof-modal,
[data-theme="light"] .supp-box,
[data-theme="light"] .apply-box,
[data-theme="light"] .gen-box,
[data-theme="light"] .auth-box,
[data-theme="light"] .custom-box,
[data-theme="light"] .settings-box { background: rgba(255, 255, 255, .97); }


/* ── SİTE DUYURU ŞERİDİ ─────────────────────────────────────── */
.site-notice{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--pr-s),transparent);
  border-bottom:1px solid var(--border);padding:9px 16px;font-size:.78rem;font-weight:700;color:var(--text-s);
  position:relative;z-index:90}
.site-notice > i{color:var(--pr);font-size:.82rem;flex-shrink:0}
.site-notice span{flex:1;min-width:0;line-height:1.45}
.sn-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.82rem;padding:4px 6px;
  border-radius:5px;flex-shrink:0;font-family:inherit;transition:color .2s,background .2s}
.sn-close:hover{color:var(--text);background:var(--hover-bg)}
@media(max-width:600px){.site-notice{font-size:.72rem;padding:8px 12px}}

/* ─────────────────────────────────────────────────────────────
   EK TEMALAR

   Hepsi yalnız DEĞİŞKEN değiştiriyor, kural eklemiyor: tema başına
   ayrı stil yazmaya başlarsak her yeni bileşende hepsini tekrar
   gözden geçirmek gerekir. Vurgu rengi (--pr) ve zemin tonları
   değişiyor, geri kalan her şey aynı kalıyor.

   Katmanlar js/theme.js'te: herkes / vip / ekip / sezon.
   ───────────────────────────────────────────────────────────── */

/* ── HERKESE AÇIK ───────────────────────────────────────────── */
/* Gece Moru: mor zemin, turuncu vurgu, bembeyaz yazı. Düz mor
   yerine üç renk: yüzeyler koyu mor, düğmeler ve vurgular sitenin
   turuncusu, geçişlerde mordan turuncuya degrade (polish.css). */
[data-theme="mor"] {
  --pr:   #ff6a2b;
  --pr-d: #e24f14;
  --pr-s: rgba(255, 106, 43, .14);
  --mor:  #8b5cf6;
  --mor-s: rgba(139, 92, 246, .18);
  --bg:   #0c0816;
  --surf: #130d22;
  --card: #191130;
  --card-h: #21173d;
  --text: #ffffff;
  --text-s: rgba(255, 255, 255, .8);
  --muted: rgba(235, 225, 255, .5);
  --border:   rgba(167, 139, 250, .16);
  --border-h: rgba(167, 139, 250, .3);
  --input-bg: rgba(167, 139, 250, .07);
  --hover-bg: rgba(167, 139, 250, .06);
  --modal-bg: rgba(20, 13, 36, .97);
  --bar-bg:   rgba(14, 9, 26, .95);
}

/* ── VIP ────────────────────────────────────────────────────── */
/* Küllük: sıcak, altın vurgulu, gözü yormayan koyu kahve. */
[data-theme="kul"] {
  --pr:   #d9a441;
  --pr-d: #a87a22;
  --pr-s: rgba(217, 164, 65, .14);
  --bg:   #100d0a;
  --surf: #17130f;
  --card: #1c1712;
  --card-h: #241d17;
  --border:   rgba(255, 224, 170, .09);
  --border-h: rgba(255, 224, 170, .17);
  --modal-bg: rgba(26, 21, 16, .97);
  --bar-bg:   rgba(16, 13, 10, .96);
}
/* Derin: mavi-gri, neredeyse renksiz. Uzun izleme için en sakini. */
[data-theme="derin"] {
  --pr:   #4f8ff7;
  --pr-d: #2c62c4;
  --pr-s: rgba(79, 143, 247, .14);
  --bg:   #080b11;
  --surf: #0d1219;
  --card: #10161f;
  --card-h: #161d28;
  --border:   rgba(170, 200, 255, .09);
  --border-h: rgba(170, 200, 255, .17);
  --modal-bg: rgba(14, 19, 27, .97);
  --bar-bg:   rgba(9, 12, 18, .96);
}

/* ── EKİP ───────────────────────────────────────────────────── */
/* Stüdyo: kayıt odasının kırmızı ışığı. Yalnız ekip üyelerinde. */
[data-theme="studyo"] {
  --pr:   #e2483d;
  --pr-d: #b02a20;
  --pr-s: rgba(226, 72, 61, .13);
  --bg:   #0c0908;
  --surf: #120d0c;
  --card: #171110;
  --card-h: #1f1715;
  --border:   rgba(255, 190, 185, .09);
  --border-h: rgba(255, 190, 185, .17);
  --modal-bg: rgba(22, 16, 15, .97);
  --bar-bg:   rgba(12, 9, 8, .96);
}

/* Yasha Mavisi: ekibin kendi rengi. Gece laciverti, buz mavisi vurgu. */
[data-theme="yasha"] {
  --pr:   #38bdf8;
  --pr-d: #0284c7;
  --pr-s: rgba(56, 189, 248, .13);
  --bg:   #060b18;
  --surf: #0a1224;
  --card: #0e1830;
  --card-h: #142040;
  --border:   rgba(125, 185, 255, .11);
  --border-h: rgba(125, 185, 255, .22);
  --input-bg: rgba(125, 185, 255, .06);
  --hover-bg: rgba(125, 185, 255, .05);
  --modal-bg: rgba(12, 20, 40, .97);
  --bar-bg:   rgba(6, 11, 24, .96);
}

/* ── SEZONLUK ───────────────────────────────────────────────── */
/* Proje temaları. Admin panelinden açılıp kapanıyor, kalıcı değil.
   Kapatıldığında o temayı seçmiş olan kullanıcı koyu temaya düşer. */
/* Yoshiwara: fener ışığı, gece kırmızısı ve altın. */
[data-theme="yoshiwara"] {
  --pr:   #e8434f;
  --pr-d: #a81f2e;
  --pr-s: rgba(232, 67, 79, .13);
  --gold: #e8b23c;
  --bg:   #0d0709;
  --surf: #150b0e;
  --card: #1a0e12;
  --card-h: #231419;
  --border:   rgba(255, 190, 200, .09);
  --border-h: rgba(255, 190, 200, .18);
  --modal-bg: rgba(26, 14, 18, .97);
  --bar-bg:   rgba(13, 7, 9, .96);
}
/* Bocchi: tam siyah sahne, gradyan yok. Renk yalnız kontürlerde:
   Kessoku Band'in dört rengi (Bocchi pembe, Nijika sarı, Ryo mavi,
   Kita kırmızı) kartlara sırayla dağılıyor. Kurallar polish.css'te. */
[data-theme="bocchi"] {
  --pr:   #ff5fa2;
  --pr-d: #d63a80;
  --pr-s: rgba(255, 95, 162, .12);
  --k-pembe: #ff5fa2;
  --k-sari:  #ffd23f;
  --k-mavi:  #3d8bff;
  --k-kirmizi: #ff4747;
  --bg:   #000;
  --surf: #000;
  --card: #000;
  --card-h: #070707;
  --border:   rgba(255, 255, 255, .14);
  --border-h: rgba(255, 255, 255, .24);
  --modal-bg: rgba(0, 0, 0, .98);
  --bar-bg:   rgba(0, 0, 0, .97);
}

/* Açılır listeler: tarayıcı seçenek listesini beyaz zeminde açıp temanın
   açık renkli yazısını kullanınca seçenekler okunmuyordu. Liste de temanın
   kart rengi ve yazı rengiyle açılsın (her temada, her sayfada). */
select option, select optgroup{background-color:var(--card,#151515);color:var(--text,#f1f1f1)}
select option:checked{background-color:var(--pr,#ff4500);color:#fff}
select option:disabled{color:var(--muted,#888)}