/* ═══════════════════════════════════════════════════════════
   KOMUT ROTASI — ROTA-THEME.CSS  v2.0
   Merkezi Tema Sistemi — 2 Tema × Bölüm Renkleri

   Yükleme: <link rel="stylesheet" href="/assets/css/rota-theme.css">
   Kullanım: <html data-theme="siber" data-module="yz">

   TEMALAR:  siber (koyu) | corporate (açık)
   BÖLÜMLER: yz (Yapay Zeka) | rk (Robotik Kodlama) | mp (Mobil Programlama)
             td (Teknik Destek) | pe (Programlama Eğitimi) | bd (Bilişim Defteri)
             om (Öğrenci Merkezi) | anasayfa / genel / giris (ortak sayfalar)
   Koyu temada her bölümün kendi ana rengi vardır; açık temada hepsi
   kurumsal maviyi kullanır.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   1. VARSAYILAN TEMA (Siber Neon / Atölye Karanlık)
   ═══════════════════════════════════════════════════════════ */
:root,
[data-theme=""],
[data-theme="siber"] {
  /* ── Ortak Arkaplanlar (3 bölümde aynı) ── */
  --bg1: #0a0e1a;
  --bg2: #0f1628;
  --bg3: #131929;
  --bg4: #1a2035;
  --card: #111827;
  --card2: #1a2340;

  /* ── Ortak Kenarlıklar ── */
  --border:  rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.12);

  /* ── Ortak Metinler ── */
  /* DENEME: ana yazı net beyaz (kullanıcı isteği); text2/3 aynı beyazın
     soluk kademeleri (önceki rgba(226,232,240,...) yerine). */
  --text1: #ffffff;
  --text2: rgba(255,255,255,.70);
  /* .60: düz zeminlerde (bg1…card2) rahatça eşik üstü; .55'te bölüm renkli
     degrade başlık alanlarının açık ucunda 3.9–4.1'e düşüyordu (25 Eylül
     2026). text2 (.70) ile kademe farkı korunur. */
  --text3: rgba(255,255,255,.60);
  /* Kimlik renkli yazıda rengin payı: koyuda %100 (renk aynen kalır).
     Kullanım: color-mix(in srgb, <renk> var(--kimlik-yazi-orani, 100%), var(--text1)) */
  --kimlik-yazi-orani: 100%;
  /* Ana renkli (--primary) yazıda aynı düzen; koyuda %100. */
  --birincil-yazi-orani: 100%;
  /* Rozet/etiket metni: kimlik rengi kendi soluk tonlu zemininde
     (ör. rgba(--mod-rgb,.12)) okunmuyordu; koyuda %65 renk + %35
     var(--text1) en kötü durumda ≥4.78 verir. Yalnız bu kalıptaki
     (aynı renk hem metin hem soluk zemin) küçük bileşenlerde kullanılır;
     kimlik-yazi-orani/birincil-yazi-orani genel metinde 100% kalır. */
  --rozet-yazi-orani: 65%;

  /* ── Ortak Header ── */
  --header-bg:  rgba(10,14,26,.95);
  --nav-hover:  rgba(255,255,255,.06);

  /* ── Grid ── */
  --grid: rgba(255,255,255,.022);
  --logo-slogan-color: rgba(226,232,240,.76);
}


/* ── Bölüm-Özel Renkler: Varsayılan (Siber) ──
   Koyu temada --accent bölüme göre DEĞİŞMEZ: tüm bölümler rota-compat.css'teki
   tek tip hub vurgusunu (#00d4ff) kullanır. Buradaki bölüm bloklarında eskiden
   duran --accent satırları compat tarafından her sayfada ezildiği için hiç
   görünmemişti; 25 Eylül 2026'da ölü tanım olarak kaldırıldı. */

[data-module="yz"] {
  --primary: #00f5c4;
  --primary-rgb: 0,245,196;
  --secondary: #8b6fff;
  --nav-active: rgba(0,245,196,.08);

  /* Pipeline kart renkleri */
  --c1: #ff4fa0; --c2: #f0a500; --c3: #5BAD6F; --c4: #3DAAA0;
  --c5: #2D7A90; --c6: #7c3aed; --c7: #00cfff; --c8: #f97316;

  /* Glow */
  --glow1: rgba(255,79,160,.07);
  --glow2: rgba(45,122,144,.08);

  /* Logo gradient */
  --logo-grad: linear-gradient(90deg, #7c3aed 0%, #c026d3 52%, #f472b6 100%);
}

[data-module="rk"] {
  --primary: #22c55e;
  --primary-rgb: 34,197,94;
  --secondary: #f97316;
  --nav-active: rgba(34,197,94,.08);

  --c1: #6366f1; --c2: #f97316; --c3: #06b6d4; --c4: #10b981;
  --c5: #8b5cf6; --c6: #f59e0b; --c7: #14b8a6; --c8: #ef4444;

  --glow1: rgba(34,197,94,.10);
  --glow2: rgba(249,115,22,.07);

  --logo-grad: linear-gradient(90deg, #16a34a 0%, #22c55e 48%, #fb923c 100%);
}

[data-module="mp"] {
  --primary: #6366f1;
  --primary-rgb: 99,102,241;
  --secondary: #f97316;
  --nav-active: rgba(99,102,241,.08);

  --c1: #6366f1; --c2: #f97316; --c3: #06b6d4; --c4: #10b981;
  --c5: #8b5cf6; --c6: #f59e0b; --c7: #14b8a6; --c8: #ef4444;

  --glow1: rgba(99,102,241,.10);
  --glow2: rgba(249,115,22,.07);

  --logo-grad: linear-gradient(90deg, #4f46e5 0%, #6366f1 52%, #22d3ee 100%);
}

[data-module="td"] {
  --primary: #f97316;
  --primary-rgb: 249,115,22;
  --secondary: #fb923c;
  --nav-active: rgba(249,115,22,.08);

  --glow1: rgba(249,115,22,.10);
  --glow2: rgba(251,146,60,.08);

  --logo-grad: linear-gradient(90deg, #c2410c 0%, #f97316 52%, #fdba74 100%);
}

[data-module="genel"],
[data-module="anasayfa"],
[data-module="giris"] {
  --primary: #00d4ff;
  --primary-rgb: 0,212,255;
  --secondary: #7c3aed;
  --nav-active: rgba(0,212,255,.08);

  --c1: #00d4ff; --c2: #7c3aed; --c3: #ff4fa0; --c4: #22c55e;
  --c5: #f97316; --c6: #06b6d4; --c7: #6366f1; --c8: #f59e0b;

  --glow1: rgba(0,212,255,.08);
  --glow2: rgba(124,58,237,.06);
  --logo-grad: linear-gradient(90deg, #00d4ff 0%, #7c3aed 54%, #ff4fa0 100%);
}

[data-module="om"] {
  --primary: #a78bfa;
  --primary-rgb: 167,139,250;
  --secondary: #60a5fa;
  --nav-active: rgba(167,139,250,.08);

  --c1: #a78bfa; --c2: #60a5fa; --c3: #f472b6; --c4: #22c55e;
  --c5: #f97316; --c6: #06b6d4; --c7: #6366f1; --c8: #f59e0b;

  --glow1: rgba(167,139,250,.08);
  --glow2: rgba(96,165,250,.06);
  --logo-grad: linear-gradient(90deg, #7c3aed 0%, #a78bfa 54%, #60a5fa 100%);
}

[data-module="pe"] {
  --primary: #fbbf24;
  --primary-rgb: 251,191,36;
  --secondary: #16a34a;
  --nav-active: rgba(251,191,36,.08);

  --c1: #fbbf24; --c2: #16a34a; --c3: #0891b2; --c4: #ff6b35;
  --c5: #6366f1; --c6: #7c3aed; --c7: #22c55e; --c8: #ef4444;

  --glow1: rgba(251,191,36,.08);
  --glow2: rgba(22,163,74,.06);
  --logo-grad: linear-gradient(90deg, #fbbf24 0%, #16a34a 54%, #0891b2 100%);
}

[data-module="bd"] {
  --primary: #3b82f6;
  --primary-rgb: 59,130,246;
  --secondary: #22c55e;
  --nav-active: rgba(59,130,246,.08);

  --c1: #ef4444; --c2: #f97316; --c3: #3b82f6; --c4: #22c55e;
  --c5: #8b5cf6; --c6: #a855f7; --c7: #06b6d4; --c8: #f59e0b;

  --glow1: rgba(59,130,246,.08);
  --glow2: rgba(34,197,94,.06);
  --logo-grad: linear-gradient(90deg, #2563eb 0%, #3b82f6 54%, #06b6d4 100%);
}


/* ═══════════════════════════════════════════════════════════
   2. KURUMSAL TEMA (Corporate Açık)
   ═══════════════════════════════════════════════════════════ */
[data-theme="corporate"] {
  /* DENEME (24 Eylül 2026, 4. tur): kullanıcı "net kenarlıklar,
     silik kareli desen, net renkler" istedi. Zemin "ilk hali"ndeki
     griliğini koruyor; kenarlıklar belirginleşti, kareli desen soluk
     kaldı, kimlik/rozet renk oranları %100 (karışımsız) yapıldı. */
  --bg1: #eef1f6;
  --bg2: #e3e8f0;
  --bg3: #d4e0ee;
  --bg4: #d7e4f3;
  --card: #ffffff;
  --card2: #f5f7fb;
  /* Net kenarlık: kart/bölüm ayrımı görünsün. */
  --border:  rgba(37,99,235,.35);
  --border2: rgba(37,99,235,.18);
  /* Net siyah (kullanıcı isteği, korunuyor). */
  --text1: #000000;
  /* text2/3 aynı siyahın soluk kademeleri. */
  --text2: rgba(0,0,0,.76);
  --text3: rgba(0,0,0,.66);
  /* Net renk: karışım yok, renkler kendi doygunluğunda. */
  --kimlik-yazi-orani: 100%;
  --birincil-yazi-orani: 100%;
  --rozet-yazi-orani: 100%;
  --header-bg: rgba(238,241,246,.96);
  --nav-hover: rgba(0,0,0,.05);
  /* Kareli defter: orijinali .04 idi, biraz daha soluk olsun istendi. */
  --grid: rgba(0,0,0,.028);
  --logo-slogan-color: rgba(30, 58, 90, .72);
}

/* Corporate: tüm bölümlerde aynı kurumsal renkler */
[data-theme="corporate"][data-module="yz"],
[data-theme="corporate"][data-module="rk"],
[data-theme="corporate"][data-module="mp"],
[data-theme="corporate"][data-module="td"],
[data-theme="corporate"][data-module="om"],
[data-theme="corporate"][data-module="bd"],
[data-theme="corporate"][data-module="pe"],
[data-theme="corporate"][data-module="genel"],
[data-theme="corporate"][data-module="anasayfa"],
[data-theme="corporate"][data-module="giris"] {
  --primary: #2563eb;
  --primary-rgb: 37,99,235;
  --secondary: #16a34a;
  --accent: #3b82f6;
  --nav-active: rgba(37,99,235,.08);

  --c1: #2563eb; --c2: #16a34a; --c3: #ee658e; --c4: #22c55e;
  --c5: #0ea5e9; --c6: #f97316; --c7: #8b5cf6; --c8: #ef4444;

  --glow1: rgba(37,99,235,.06);
  --glow2: rgba(22,163,74,.04);
  --logo-grad: linear-gradient(90deg, #1d4ed8 0%, #2563eb 58%, #60a5fa 100%);
}


/* ═══════════════════════════════════════════════════════════
   3. ORTAK TEMA STİLLERİ — Tüm temalar & bölümler
   ═══════════════════════════════════════════════════════════ */

/* ── Body ── */
html,
body {
  background-color: var(--bg1) !important;
  color: var(--text1) !important;
}

/* ── Header ── */
header {
  background: var(--header-bg) !important;
  border-bottom-color: var(--border) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .4s, border-color .4s;
}

.header-nav a:hover,
.hnav a:hover {
  color: var(--primary);
  background: var(--nav-hover);
}

/* Aktif bağlantı kendi soluk zemininde AA: tema yazı rengiyle karıştırılır. */
.header-nav a.active, .header-nav a.act,
.hnav a.active, .hnav a.act {
  color: color-mix(in srgb, var(--primary) 85%, var(--text1));
  background: var(--nav-active);
}

/* ── Linkler ── */
a:hover { color: var(--primary); }

/* ── Logo başlık gradient ── */
.header-logo-ad {
  background: var(--logo-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Tema FAB ── */
.theme-fab-btn {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), .35);
}
.theme-fab-btn:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,.4);
}

/* ── Tema tray ── */
.theme-tray,
.tray {
  background: var(--bg3);
  border-color: var(--border2);
}
.tray-opt.act {
  background: rgba(var(--primary-rgb), .12);
  outline: 1px solid var(--border2);
}
.tray-opt:hover {
  background: var(--nav-hover, rgba(255,255,255,.06));
}

/* ── İlerleme çubuğu ── */
.mod-il-fill,
.progress-fill {
  background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
}

/* ── Badge ── */
.badge-dot {
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}

.hero-badge {
  color: color-mix(in srgb, var(--primary) var(--rozet-yazi-orani, 100%), var(--text1));
  border-color: rgba(var(--primary-rgb), .35);
  background: rgba(var(--primary-rgb), .10);
}

/* ── Hero underline ── */
.hero-underline,
.mod-hero-underline {
  background: linear-gradient(90deg, var(--primary), var(--secondary), transparent);
}

/* ── Hero orb'lar ── */
.hero-orb.orb1 {
  background: radial-gradient(circle, var(--glow1) 0%, transparent 65%);
}
.hero-orb.orb2 {
  background: radial-gradient(circle, var(--glow2) 0%, transparent 65%);
}

/* ── Subnav ── */
.subnav,
.mod-subnav {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  transition: background .4s, border-color .4s;
}

/* ── h1-glow gradient ── */
.h1-glow {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Butonlar (Hub sayfaları) ──
   Bazı bölümlerin --primary'si çok parlak (ör. YZ turkuaz), beyaz yazı
   üstünde okunmuyordu (en kötü 1.41). Gradyanın iki ucu da %50 siyahla
   karıştırılır; en kötü durum 5.27'ye çıkar, kimlik rengi korunur. */
.btn-primary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 50%, black),
    color-mix(in srgb, var(--secondary) 50%, black));
  color: #fff;
  box-shadow: 0 4px 20px rgba(var(--primary-rgb), .3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(var(--primary-rgb), .45);
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), .05);
}

/* ── Terminal prompt rengi ── */
.tl-p  { color: var(--primary); }
.tl-hi { color: var(--primary); }
.tl-cursor { background: var(--primary); }

/* Terminal koyu kaldığı için koyu tema renklerini parlak override et */
.terminal-body .tl-hi { color: #00f5c4; }

/* ── Terminal scrollbar ── */
.terminal-body::-webkit-scrollbar-thumb {
  background: var(--primary);
}

/* ── Ticker label rengi ── */
.ticker-label {
  background: var(--primary);
  color: #fff;
}

/* ── Back button ── */
.back-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Section gradient başlık ── */
.pt-h1 .g,
.mod-hero-h1 .grad {
  background: linear-gradient(110deg, var(--primary) 0%, var(--secondary) 60%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sn-anchor.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ── Konu tamamla chip ── */
.chip-tamamla {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
}

/* ── Seviye tab ── */
.lv-tab.lv-aktif {
  background: rgba(var(--primary-rgb), .15);
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ── Step nav ── */
.step-nav-btn:hover {
  border-color: var(--primary);
}
.step-nav-btn.next {
  background: linear-gradient(135deg,
    rgba(var(--primary-rgb), .12),
    rgba(var(--secondary-rgb, 249,115,22), .08));
  border-color: rgba(var(--primary-rgb), .25);
}

/* ── Pipeline sidebar ── */
.pipe-item.pipe-active .pipe-name {
  color: var(--primary);
}
.pipe-pulse {
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}


/* ═══════════════════════════════════════════════════════════
   4. AÇIK TEMA DÜZELTMELERİ (Corporate)
   ═══════════════════════════════════════════════════════════ */
[data-theme="corporate"] header {
  box-shadow: 0 1px 10px rgba(0,0,0,.07);
}

[data-theme="corporate"] .subnav {
  background: rgba(238,241,246,.97);
}

[data-theme="corporate"] .hero {
  background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 60%, var(--bg1) 100%) !important;
}

[data-theme="corporate"] .hero-desc {
  color: var(--text2) !important;
}

[data-theme="corporate"] .btn-secondary {
  background: rgba(var(--primary-rgb), .08) !important;
  color: color-mix(in srgb, var(--primary) var(--birincil-yazi-orani, 100%), var(--text1)) !important;
  border-color: rgba(var(--primary-rgb), .45) !important;
}

/* Beyaz yazı yeşil uçta 3.3 kalıyordu; açık temada uç koyulaşır (≥ 4.9).
   Header düğmesinin kendi, daha özgül kuralı vardır (rota-compat.css). */
[data-theme="corporate"] .btn-primary {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--secondary) 80%, #000));
}

[data-theme="corporate"] .back-btn {
  color: var(--text2) !important;
  border-color: var(--border) !important;
  background: rgba(0,0,0,.04) !important;
}

/* ── Terminal her temada koyu kalır ── */
.hero-terminal,
.terminal-body {
  background: #12151f !important;
  color: #cdd5e0 !important;
}
.terminal-bar {
  background: #1e2232 !important;
}


/* ═══════════════════════════════════════════════════════════
   5. SCROLLBAR (Tema uyumlu)
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), .35);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--primary-rgb), .60);
}