/* ════════════════════════════════════════════════════════════════
   OtoSEO — theme.css  ·  Işıltı/cam (glow/glass) token katmanı
   style.css'TEN SONRA yüklenir. Mevcut açık/koyu token'lara dokunmadan
   yalnızca glow/glass/ring token'larını ekler ve koyu tema için
   daha parlak değerlerle override eder. Mor accent kimliği korunur.
   ════════════════════════════════════════════════════════════════ */

/* ── Açık tema (Light Luxe) — yeni token'lar ──────────────────── */
:root {
  --glow-sm: 0 0 8px rgba(109, 94, 252, .18);
  --glow-md: 0 0 18px rgba(109, 94, 252, .24);
  --glow-lg: 0 0 34px rgba(109, 94, 252, .30);
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-border: rgba(214, 219, 232, .55);
  --glass-blur: 18px;
  --ring-accent: 0 0 0 3px rgba(109, 94, 252, .15);
}

/* ── Koyu tema — daha parlak mor glow + koyu cam yüzeyler ──────── */
:root[data-theme="dark"] {
  --glow-sm: 0 0 10px rgba(139, 123, 255, .30);
  --glow-md: 0 0 22px rgba(139, 123, 255, .38);
  --glow-lg: 0 0 42px rgba(139, 123, 255, .48);
  --glass-bg: rgba(26, 28, 46, .62);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-blur: 20px;
  --ring-accent: 0 0 0 3px rgba(139, 123, 255, .28);
}

/* ── Tema geçişi yumuşatma ────────────────────────────────────── */
html, body { transition: background-color .25s ease, color .25s ease; }


/* ===== Wave A: HEADER-TOP NAV ===== */
/* ════════════════════════════════════════════════════════════════
   HEADER-TOP NAV CSS
   Bu blok, mevcut style.css'in .topbar kuralını (satır 315-322)
   GENİŞLETİR/EZER. theme.css'e (style.css'ten SONRA yüklenen) veya
   effects.css'in altına eklenebilir — kazanması için style.css'ten
   sonra gelmeli. Tüm renkler var() token; ışıltı için fx-/glow token.
   ════════════════════════════════════════════════════════════════ */

:root { --header-h:60px; }

/* Header şeridi — sticky cam üst bar (.fx-glass markup'ta) */
.topbar.topbar-nav {
  position:relative; z-index:50;
  flex-shrink:0;
  height:var(--header-h);
  display:flex; align-items:center;
  gap:14px;
  padding:0 22px;
  /* .fx-glass zaten bg+blur+border veriyor; üst bar için fallback bg: */
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
/* Header alt kenarında akan mor ışık çizgisi (effects.css .fx-divider-glow) */
.topbar.topbar-nav::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(109,94,252,.30),#6d5efc,rgba(109,94,252,.30),transparent);
  background-size:200% 100%;
  animation:fx-line-sweep 6s linear infinite;
  pointer-events:none; opacity:.7;
}

/* ── Brand (sol) ──────────────────────────────── */
.hdr-brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; flex-shrink:0;
  position:relative;
}
.hdr-logo-glow {
  position:absolute; left:-4px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:12px;
  background:var(--grad); filter:blur(10px); opacity:.35;
  pointer-events:none; z-index:0;
}
.hdr-logo-icon {
  position:relative; z-index:1;
  width:34px; height:34px; flex-shrink:0;
  background:var(--grad); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -6px rgba(109,94,252,.5);
  border:1px solid rgba(255,255,255,.15);
}
.hdr-logo-icon svg { width:18px; height:18px; fill:#fff; }
.hdr-logo-text { font-size:18px; font-weight:700; letter-spacing:-.3px; }
@media (max-width:640px){ .hdr-logo-text{ display:none; } }

/* Dikey ayıraç */
.hdr-vsep { width:1px; height:24px; background:var(--border); flex-shrink:0; }
@media (max-width:980px){ .hdr-vsep{ display:none; } }

/* ── Yatay nav (orta) ─────────────────────────── */
.hdr-nav {
  display:flex; align-items:center; gap:4px;
  flex:0 1 auto; min-width:0;
  overflow:visible;   /* dropdown menüsü kırpılmasın (4 öğe masaüstünde sığar; mobilde alt panel ayrı) */
}

/* Header bağlamında nav-item'ı yatay pill'e dönüştür (sidebar dikey
   kurallarını ezer). .nav-item.active/hover renkleri style.css'ten gelir,
   burada sadece yerleşim+ışıltı override edilir. */
.hdr-nav .nav-item {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px;
  white-space:nowrap;
  color:var(--muted); font-size:13.5px; font-weight:500;
  transition:color var(--t), background var(--t), box-shadow var(--t);
}
.hdr-nav .nav-item:hover { background:var(--bg-2); color:var(--text); }
.hdr-nav .nav-item.active {
  background:var(--accent-soft); color:var(--accent); font-weight:600;
  box-shadow:var(--glow-sm);
}
/* sidebar'daki sol şerit ::before ve sağ nokta indicator header'da kapatılır */
.hdr-nav .nav-item.active::before { display:none; }
.hdr-nav .nav-item .nav-icon { width:18px; height:18px; }
.hdr-nav .nav-item .nav-icon svg { width:17px; height:17px; }

/* ── Dropdown grup ────────────────────────────── */
.hdr-group { position:relative; }
.hdr-group-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 11px; border-radius:10px;
  background:transparent; border:0; cursor:pointer;
  color:var(--muted); font-family:inherit; font-size:13.5px; font-weight:500;
  white-space:nowrap;
  transition:color var(--t), background var(--t);
}
.hdr-group-btn:hover { background:var(--bg-2); color:var(--text); }
.hdr-group-btn .nav-icon { width:18px; height:18px; display:inline-flex; }
.hdr-group-btn .nav-icon svg { width:17px; height:17px; stroke:currentColor; }
.hdr-caret { width:14px; height:14px; transition:transform var(--t); opacity:.7; }
/* Grup içinde aktif sayfa varsa veya açıkken buton vurgulanır */
.hdr-group.open > .hdr-group-btn,
.hdr-group.has-active > .hdr-group-btn {
  color:var(--accent); background:var(--accent-soft); font-weight:600;
}
.hdr-group.open > .hdr-group-btn .hdr-caret { transform:rotate(180deg); }

/* Dropdown panel (.fx-glass markup'ta verir; burası yerleşim+animasyon) */
.hdr-menu, .hdr-menu.fx-glass {
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:210px; padding:7px;
  border-radius:14px;
  background:var(--surface);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid var(--border-2);
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98);
  transform-origin:top left;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:60;
}
.hdr-group.open > .hdr-menu {
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
}
/* Menü içindeki nav-item'lar tam-genişlik satır */
.hdr-menu .nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:9px;
  color:var(--muted); font-size:13.5px; font-weight:500;
}
.hdr-menu .nav-item:hover { background:var(--bg-2); color:var(--text); }
.hdr-menu .nav-item.active {
  background:var(--accent-soft); color:var(--accent); font-weight:600;
  box-shadow:none;
}
.hdr-menu .nav-item.active::before { display:none; }
.hdr-menu .nav-item .nav-icon svg { width:17px; height:17px; }

/* ── Sağ aksiyonlar ───────────────────────────── */
.hdr-actions { margin-left:0; flex-shrink:0; }
.hdr-spacer { flex:1 1 auto; min-width:8px; }

/* Hamburger — sadece dar ekranda */
.hdr-burger {
  display:none; place-items:center;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface-2);
  color:var(--muted); cursor:pointer; transition:all var(--t);
}
.hdr-burger:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.hdr-burger svg { width:18px; height:18px; }

/* ── Responsive ──────────────────────────────────
   <=820px: yatay nav gizlenir, hamburger görünür; nav açılınca
   header altına açılan dikey panel olur. */
@media (max-width:820px){
  .hdr-burger { display:grid; }
  .hdr-vsep { display:none; }
  .hdr-nav {
    position:absolute; top:var(--header-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:3px;
    padding:10px 14px;
    background:var(--glass-bg);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.8);
    backdrop-filter:blur(var(--glass-blur)) saturate(1.8);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    overflow:visible;
    max-height:0; opacity:0; visibility:hidden; pointer-events:none;
    transition:max-height .25s ease, opacity .2s ease, visibility .2s;
  }
  #appHeader.nav-open .hdr-nav {
    max-height:80vh; opacity:1; visibility:visible; pointer-events:auto;
    overflow-y:auto;
  }
  .hdr-nav .nav-item, .hdr-group, .hdr-group-btn { width:100%; }
  /* mobilde dropdown akış içinde açılsın (absolute değil) */
  .hdr-menu {
    position:static; min-width:0; box-shadow:none; border:0;
    background:transparent; padding:0 0 0 14px;
    opacity:1; visibility:visible; transform:none; gap:0;
    max-height:0; overflow:hidden;
    transition:max-height .22s ease;
  }
  .hdr-group.open > .hdr-menu { max-height:400px; }
}

/* ===== Wave A: SIDEBAR NEUTRALIZE + LAYOUT ===== */
/* ════════════════════════════════════════════════════════════════
   SIDEBAR NEUTRALIZE + HEADER-TOP LAYOUT
   Mevcut layoutCss'i (style.css: .layout 197-202, .sidebar 207-215,
   .main-content 308-312, .topbar 315-322) header-üstte düzene çevirir.
   Bu blok style.css'ten SONRA yüklenmeli (theme.css/effects.css içinde).
   ════════════════════════════════════════════════════════════════ */

/* 1) Layout'u yatay-flex (sidebar+main) yerine DİKEY-flex (header üstte,
      içerik altta) yap. body.authed .layout{display:flex} (satır 202) korunur,
      sadece yönü değişir. */
body.authed .layout { flex-direction:column; }

/* 2) Sidebar tamamen kaldırılır. (index.html'de <aside class="sidebar">
      markup'ı silinecek; bu kural eski referans/artık için güvence.) */
.sidebar { display:none !important; }

/* 3) main-content artık tam genişlik tek kolon — header onun ÜSTÜNE
      konmaz; header .layout'un ilk çocuğu, main-content ikinci çocuğu olur.
      (Bkz. indexHtmlIntegration: <header> .layout içine, main-content'ten
      ÖNCE taşınır; .topbar main içinden ÇIKARILIR.) */
.main-content {
  flex:1; min-width:0; width:100%;
  display:flex; flex-direction:column;
  overflow:hidden;
}

/* 4) İçerik kayan gövdesi — header sabit, pages-wrap kayar.
      Padding mevcut (28px 32px, satır 357) korunur; üst boşluk header
      yüksekliğine göre değil (header ayrı satırda), normal kalır. */
.pages-wrap { flex:1; overflow-y:auto; padding:24px 32px; }

/* 5) Eski sidebar logosu/footer/divider artık kullanılmıyorsa görünmesin
      (markup silinince gereksiz ama güvence). */
.sidebar-logo, .sidebar-footer, .nav-divider { display:none !important; }

/* NOT: --sidebar-w token'ı (style.css 30) artık layout'u etkilemez;
   silmeye gerek yok (başka yerde kullanılmıyorsa zararsız). */