/* ═══════════════════════════════════════════════════════════
   TEMA SİSTEMİ
   Renkler :root'ta değişken; tema yalnızca o değişkenleri
   değiştiriyor. Yeni tema eklemek = bir blok yazmak.

   Tema gövdedeki data-tema, arka plan data-arka ile seçiliyor.
   ═══════════════════════════════════════════════════════════ */

/* ── FREKANS (varsayılan) ───────────────────────────────────
   Saf siyah tuval, kömür yüzeyler, TEK kızıl vurgu.
   Vurgu rengi sayılı yerde kullanılıyor: birincil düğme, aktif
   sekme, canlı nokta. Renk içerikten (fotoğraf, afiş) geliyor —
   arayüzden değil. Mor/mavi gradient bilinçli olarak yok. */
[data-tema="frekans"] {
  /* 60-30-10 · zemin %60 · yüzeyler %30 · vurgular %10
     İki renk (siyah + kızıl) tek düze kalıyordu. Kehribar
     ikinci vurgu olarak girdi: kızıl EYLEM (düğme, canlı,
     uyarı), kehribar VERİ (sayı, etiket, ilerleme). Rol
     ayrımı olduğu için ikisi birbiriyle yarışmıyor. */
  --gece: #08080A;          /* zemin */
  --gece-2: #101013;        /* kart */
  --gece-3: #1A1A1F;        /* yükseltilmiş yüzey */
  --gece-4: #24242B;        /* kenar/ayırıcı yüzey */
  --metin: #FAFAFB; --metin-2: #C9C9CF; --metin-3: #92929C;

  --altin: #FF1E35;         /* birincil — eylem, canlı, marka */
  --altin-2: #FF5062; --altin-3: #C10015;
  --ikincil: #FFB020;       /* ikincil — sayı, etiket, ilerleme */
  --ikincil-2: #FFC95C;
  --pembe: #FF1E35; --mavi: #FFB020; --mor: #1A1A1F;

  --kenar: rgba(255,30,53,.26); --kenar-2: rgba(255,255,255,.11);
  --kenar-3: rgba(255,176,32,.28);
  --altin-rgb: 255,30,53; --ikincil-rgb: 255,176,32;
  --pembe-rgb: 255,30,53;  --mavi-rgb: 255,176,32; --mor-rgb: 26,26,31;
  --gece-rgb: 8,8,10; --gece2-rgb: 16,16,19; --gece3-rgb: 26,26,31;
}

/* ── GECE: eski lacivert + altın ─────────────────────────── */
[data-tema="gece"] {
  --gece: #060920; --gece-2: #0B1038; --gece-3: #141C52;
  --metin: #EDF0FF; --metin-2: #AEB7E4; --metin-3: #8B94C6;
  --altin: #FFC53D; --altin-2: #FFE9A8; --altin-3: #C98A0E;
  --pembe: #FF3D81; --mavi: #35E7FF; --mor: #7B3DFF;
  --kenar: rgba(255,197,61,.18); --kenar-2: rgba(232,236,255,.1);
  --altin-rgb: 255,197,61; --pembe-rgb: 255,61,129; --mavi-rgb: 53,231,255; --mor-rgb: 123,61,255;
  --gece-rgb: 6,9,32; --gece2-rgb: 11,16,56; --gece3-rgb: 20,28,82;
}

/* ── SAHNE: perde kırmızısı, tiyatro ─────────────────────── */
[data-tema="sahne"] {
  --gece: #14060A; --gece-2: #230A12; --gece-3: #3A1220;
  --metin: #FFEFF3; --metin-2: #E0B8C4; --metin-3: #B58A98;
  --altin: #FFB84D; --altin-2: #FFE0AD; --altin-3: #C97C12;
  --pembe: #FF4D6D; --mavi: #FF8A5B; --mor: #C9184A;
  --kenar: rgba(255,184,77,.22); --kenar-2: rgba(255,239,243,.12);
  --altin-rgb: 255,184,77; --pembe-rgb: 255,77,109; --mavi-rgb: 255,138,91; --mor-rgb: 201,24,74;
  --gece-rgb: 20,6,10; --gece2-rgb: 35,10,18; --gece3-rgb: 58,18,32;
}

/* ── STÜDYO: mürekkep moru + camgöbeği ───────────────────── */
[data-tema="studyo"] {
  --gece: #0A0618; --gece-2: #150C2E; --gece-3: #231348;
  --metin: #F0EBFF; --metin-2: #BCAEE4; --metin-3: #9182C4;
  --altin: #00E5C0; --altin-2: #9CFFEE; --altin-3: #00A98D;
  --pembe: #FF4FD8; --mavi: #4DA6FF; --mor: #8B3DFF;
  --kenar: rgba(0,229,192,.22); --kenar-2: rgba(240,235,255,.1);
  --altin-rgb: 0,229,192; --pembe-rgb: 255,79,216; --mavi-rgb: 77,166,255; --mor-rgb: 139,61,255;
  --gece-rgb: 10,6,24; --gece2-rgb: 21,12,46; --gece3-rgb: 35,19,72;
}

/* ── KAVAK: derin yeşil + misket limonu ──────────────────── */
[data-tema="kavak"] {
  --gece: #04140E; --gece-2: #082419; --gece-3: #0D3827;
  --metin: #E9FFF4; --metin-2: #A6D9C0; --metin-3: #7BAE97;
  --altin: #B8FF3D; --altin-2: #DEFF9C; --altin-3: #7FBE13;
  --pembe: #FF9B3D; --mavi: #3DFFD0; --mor: #2B9E6E;
  --kenar: rgba(184,255,61,.2); --kenar-2: rgba(233,255,244,.1);
  --altin-rgb: 184,255,61; --pembe-rgb: 255,155,61; --mavi-rgb: 61,255,208; --mor-rgb: 43,158,110;
  --gece-rgb: 4,20,14; --gece2-rgb: 8,36,25; --gece3-rgb: 13,56,39;
}

/* ── YAYIN: siyah + terminal yeşili ──────────────────────── */
[data-tema="yayin"] {
  --gece: #070707; --gece-2: #0F0F0F; --gece-3: #1A1A1A;
  --metin: #E8FFE8; --metin-2: #8FCf8F; --metin-3: #6A9A6A;
  --altin: #4DFF88; --altin-2: #B6FFCB; --altin-3: #25B85A;
  --pembe: #FF5C5C; --mavi: #5CE1FF; --mor: #B45CFF;
  --kenar: rgba(77,255,136,.2); --kenar-2: rgba(232,255,232,.09);
  --altin-rgb: 77,255,136; --pembe-rgb: 255,92,92; --mavi-rgb: 92,225,255; --mor-rgb: 180,92,255;
  --gece-rgb: 7,7,7; --gece2-rgb: 15,15,15; --gece3-rgb: 26,26,26;
}

/* ── KOR: siyah + kan kırmızısı ──────────────────────────── */
[data-tema="kor"] {
  --gece: #0A0505; --gece-2: #150808; --gece-3: #2A0F0F;
  --metin: #FFF0F0; --metin-2: #D9AFAF; --metin-3: #A67F7F;
  --altin: #FF2E4C; --altin-2: #FF8A9C; --altin-3: #B00D26;
  --pembe: #FF6B35; --mavi: #FF4D6D; --mor: #8B0A1F;
  --kenar: rgba(255,46,76,.24); --kenar-2: rgba(255,240,240,.1);
  --altin-rgb: 255,46,76; --pembe-rgb: 255,107,53; --mavi-rgb: 255,77,109; --mor-rgb: 139,10,31;
  --gece-rgb: 10,5,5; --gece2-rgb: 21,8,8; --gece3-rgb: 42,15,15;
}

/* ── SAROY: kraliyet moru + şampanya ─────────────────────── */
[data-tema="saray"] {
  --gece: #0D0620; --gece-2: #180C36; --gece-3: #281454;
  --metin: #F4EFFF; --metin-2: #C3B2E8; --metin-3: #9683C4;
  --altin: #E8C86A; --altin-2: #F7E6B0; --altin-3: #B08F2E;
  --pembe: #C77DFF; --mavi: #9D6BFF; --mor: #6A2FC9;
  --kenar: rgba(232,200,106,.24); --kenar-2: rgba(244,239,255,.11);
  --altin-rgb: 232,200,106; --pembe-rgb: 199,125,255; --mavi-rgb: 157,107,255; --mor-rgb: 106,47,201;
  --gece-rgb: 13,6,32; --gece2-rgb: 24,12,54; --gece3-rgb: 40,20,84;
}

/* ── KAĞIT: açık tema ────────────────────────────────────── */
[data-tema="kagit"] {
  --gece: #F5F2EA; --gece-2: #EBE6D9; --gece-3: #DED7C4;
  --metin: #14110C; --metin-2: #4A4437; --metin-3: #7C7462;
  --altin: #C2410C; --altin-2: #EA580C; --altin-3: #9A3412;
  --pembe: #BE123C; --mavi: #1D4ED8; --mor: #6D28D9;
  --kenar: rgba(194,65,12,.28); --kenar-2: rgba(20,17,12,.14);
  --altin-rgb: 194,65,12; --pembe-rgb: 190,18,60; --mavi-rgb: 29,78,216; --mor-rgb: 109,40,217;
  --gece-rgb: 245,242,234; --gece2-rgb: 235,230,217; --gece3-rgb: 222,215,196;
}
/* Açık temada koyu zemin varsayan yerler tersine dönsün */
[data-tema="kagit"] body::after { opacity: .06; mix-blend-mode: normal; }
[data-tema="kagit"] .dugme.birincil,
[data-tema="kagit"] .menu-cta,
[data-tema="kagit"] .avatar,
[data-tema="kagit"] .etk-tarih,
[data-tema="kagit"] .kurucu-harf,
[data-tema="kagit"] .kk-rozet { color: #FFF8F0 !important; }
[data-tema="kagit"] .krom {
  background: linear-gradient(180deg, #EA580C, #C2410C 55%, #7C2D12);
  -webkit-background-clip: text; background-clip: text;
}
[data-tema="kagit"] .serit span { -webkit-text-stroke-color: rgba(194,65,12,.55); }
[data-tema="kagit"] .dev-baslik .satir:not(.vurgu) > span {
  color: var(--metin);
  text-shadow: -1.4px 0 0 rgba(190,18,60,.3), 1.4px 0 0 rgba(29,78,216,.28);
}
[data-tema="kagit"] .hero-vignette {
  background:
    radial-gradient(62% 46% at 50% 40%, rgba(245,242,234,.8) 0%, rgba(245,242,234,.4) 55%, transparent 80%),
    linear-gradient(180deg, rgba(245,242,234,.8) 0%, transparent 26%, transparent 66%, var(--gece) 100%);
}
[data-tema="kagit"] .perde { background: var(--gece); }
[data-tema="kagit"] .perde-yazi { color: var(--altin); }

/* ═══════════════════════════════════════════════════════════
   ARKA PLAN SEÇENEKLERİ
   ═══════════════════════════════════════════════════════════ */

.arka-kat {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;                 /* ölçekli animasyon taşırıyordu */
  clip-path: inset(0);
  transition: opacity .7s ease;
}
/* Hareketli katman içeride: dışarı taşsa da kırpılıyor */
.arka-kat::before {
  content: ""; position: absolute; inset: -12%;
  background: inherit; background-size: inherit; background-position: inherit;
}

/* Izgara — synthwave ufku */
/* Eski hâli "matematik defteri" gibi duruyordu: çizgi çok
   belirgin, aralık çok sıktı. Artık seyrek ve neredeyse
   görünmez — yalnızca derinlik hissi bırakıyor. */
[data-arka="izgara"] .arka-kat {
  background-image:
    linear-gradient(color-mix(in srgb, var(--altin) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--altin) 5%, transparent) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: .55;
  mask-image: radial-gradient(80% 60% at 50% 25%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 25%, #000 10%, transparent 72%);
  animation: izgara-kay 40s linear infinite;
}
@keyframes izgara-kay-eski { to { background-position: 0 96px, 96px 0; } }
@keyframes izgara-kay { to { background-position: 0 96px, 96px 0; } }

/* Sis — yumuşak ışık huzmesi, en sakin seçenek */
[data-arka="sis"] .arka-kat { background: none; opacity: .6; }
[data-arka="sis"] .arka-kat::before {
  background:
    radial-gradient(60vmax 40vmax at 50% -10%, color-mix(in srgb, var(--altin) 16%, transparent), transparent 70%),
    radial-gradient(50vmax 40vmax at 10% 100%, color-mix(in srgb, var(--mor) 18%, transparent), transparent 70%);
  filter: blur(30px);
  animation: sis-gez 32s ease-in-out infinite;
}
@keyframes sis-gez {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3%) scale(1.06); }
}

/* Parçacık — yükselen noktalar */
[data-arka="parcacik"] .arka-kat {
  background-image:
    radial-gradient(circle, var(--altin) 1px, transparent 1.4px),
    radial-gradient(circle, var(--mavi) 1px, transparent 1.4px);
  background-size: 130px 130px, 190px 190px;
  background-position: 0 0, 60px 80px;
  opacity: .25;
  animation: parca-yuksel 28s linear infinite;
}
@keyframes parca-yuksel { to { background-position: 0 -130px, 60px -110px; } }

/* Aurora — yavaş dolaşan renk lekeleri */
[data-arka="aurora"] .arka-kat { background: none; opacity: .42; }
[data-arka="aurora"] .arka-kat::before {
  background:
    radial-gradient(40vmax 40vmax at 15% 20%, color-mix(in srgb, var(--mor) 30%, transparent), transparent 65%),
    radial-gradient(38vmax 38vmax at 85% 30%, color-mix(in srgb, var(--pembe) 22%, transparent), transparent 65%),
    radial-gradient(34vmax 34vmax at 50% 85%, color-mix(in srgb, var(--altin) 22%, transparent), transparent 65%);
  filter: blur(52px);
  animation: aurora-dolas 34s ease-in-out infinite;
}
@keyframes aurora-dolas {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(3%,-3%) scale(1.08); }
  66% { transform: translate(-3%,2%) scale(.95); }
}

/* Dalga — yatay ses dalgaları */
[data-arka="dalga"] .arka-kat {
  background-image: repeating-linear-gradient(
    0deg, transparent 0 38px,
    color-mix(in srgb, var(--altin) 9%, transparent) 38px 39px);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  animation: dalga-ak 14s linear infinite;
}
@keyframes dalga-ak { to { background-position: 0 38px; } }

/* Tarama — yoğun CRT */
[data-arka="tarama"] .arka-kat::before { content: none; }
[data-arka="tarama"] .arka-kat {
  background: repeating-linear-gradient(
    180deg, transparent 0 2px, color-mix(in srgb, var(--metin) 6%, transparent) 2px 4px);
  opacity: .6;
}

/* Kapalı */
[data-arka="yok"] .arka-kat { opacity: 0; }
[data-arka="yok"] .arka-kat::before { content: none; }

/* Tarama çizgisi tercihe bağlı */
[data-tarama="kapali"] body::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .arka-kat { animation: none !important; }
}