/* Genel: yatay scroll'u kökten engelle */
html, body { overflow-x: hidden; }
* { outline-color: var(--brand); }

/* ===== Tema Değişkenleri ===== */
:root{
  --bg:#0b0c0f;
  --panel:#12141a;
  --muted:#7a8699;
  --text:#e9eef5;
  --brand:#14b8a6;
  --brand-2:#38bdf8;
  --card:#0f1116;
  --border:#1e2530;
  --hover:rgba(255,255,255,.06);
  --shadow: 0 8px 24px rgba(0,0,0,.22);
  --backdrop: rgba(0,0,0,.12);
  --focus: 0 0 0 3px rgba(20,184,166,.35);
  --transition: 180ms ease;
}

/* Sistem teması light ise başlangıçta root’u buna çek (JS de bunu yönetiyor) */
@media (prefers-color-scheme: light){
  :root { color-scheme: light; }
}

[data-theme="light"]{
  color-scheme: light;
  --bg:#ffffff;
  --panel:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#4b5563;
  --border:#e5e7eb;
  --hover:rgba(2,6,23,.04);
  --shadow: 0 8px 24px rgba(15,23,42,.08);
  --backdrop: rgba(0,0,0,.08);
  --focus: 0 0 0 3px rgba(56,189,248,.35);
}

html { scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  transition: background var(--transition), color var(--transition);
}

/* Linkler */
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Butonlar */
.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  transition: background var(--transition), border-color var(--transition);
}
.btn-ghost:hover{ background:var(--hover); text-decoration:none; }

.btn-brand{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border:0; color:#001018; font-weight:600;
  box-shadow: var(--shadow);
}
.btn-brand:hover{ filter:brightness(.98); }

/* Odak görünürlüğü */
button:focus-visible, a:focus-visible, .form-control:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}

/* Topbar & Navbar */
.topbar{
  background:linear-gradient(90deg,var(--card),var(--panel));
  border-bottom:1px solid var(--border);
}
.topbar nav .nav { overflow: visible !important; } /* dropdown kesilmesin */
.brand{ font-weight:800; letter-spacing:.3px; }
.nav-link{ color:var(--text)!important; opacity:.9; }
.nav-link:hover{ opacity:1; text-decoration:none; }

.badge-cat{
  background:rgba(20,184,166,.15); color:#10b981;
  border:1px solid rgba(16,185,129,.25);
}

.search-input{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

/* Ticker (opsiyonel) */
.ticker{
  background:var(--panel);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.ticker .label{
  background:var(--brand); color:#00221d; font-weight:700;
  padding:.35rem .7rem; border-radius:.35rem
}
.ticker-track{ white-space:nowrap; overflow:hidden }
.ticker-items{ display:inline-block; padding-left:100%; animation:slide 30s linear infinite }
@keyframes slide{ 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }

/* Kartlar */
.hero-card{ position:relative; border-radius:1.25rem; overflow:hidden; background:var(--card); border:1px solid var(--border) }
.hero-media{ aspect-ratio:16/9; background:#0a0c10; }
.hero-media img{ width:100%; height:100%; object-fit:cover }
.hero-overlay{
  position:absolute; inset:auto 0 0 0; padding:1.25rem;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.85) 100%);
  color:#fff
}
.hero-title{ font-size:clamp(1.25rem,2.5vw,1.8rem); font-weight:800 }

.story-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:1rem; overflow:hidden; transition: transform .2s ease, background var(--transition), border-color var(--transition);
}
.story-card:hover{
  transform:translateY(-2px);
  background:color-mix(in srgb, var(--card) 95%, white 5%);
}
.story-thumb{ aspect-ratio:16/9; background:#0a0c10 }
.story-thumb img{ width:100%; height:100%; object-fit:cover }
.story-body{ padding:1rem }
.story-title{ font-weight:700; font-size:1.05rem; line-height:1.35 }
.story-meta{ font-size:.85rem; color:var(--muted) }

.ad-slot{ background:var(--panel); border:1px dashed var(--border); border-radius:.75rem; padding:1rem; color:var(--muted); text-align:center }
.side-widget{ background:var(--card); border:1px solid var(--border); border-radius:1rem }
.side-widget .widget-title{ font-weight:800; padding:1rem 1rem .5rem }

.footer{ background:var(--panel); border-top:1px solid var(--border) }
.tag{ display:inline-block; font-size:.8rem; padding:.25rem .5rem; border:1px solid var(--border); border-radius:999px; margin:.25rem; color:var(--muted) }

.sticky-header{ position:sticky; top:0; z-index:1040; backdrop-filter:saturate(1.2) blur(3px); }

/* Kicker */
.kicker{ font-size:.8rem; letter-spacing:.2px; color:#93c5fd }

/* Dropdown – hover ile aç (lg+) */
@media (min-width: 992px){
  .navbar .dropdown:hover > .dropdown-menu{ display:block; margin-top:0 }
  .nav .dropdown-toggle::after{ vertical-align: middle; }
}

/* Dropdown menü teması */
.dropdown-menu{
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius:.75rem;
  padding:.35rem;
}
.dropdown-item{ color: var(--text); border-radius:.5rem; }
.dropdown-item:hover{ background: var(--hover); color:var(--text); text-decoration:none; }
.dropdown-divider{ border-color:var(--border); }
.nav.nav-underline .dropdown-menu{ margin-top:.35rem; }

/* Çok kolonlu dropdown */
.dropdown-menu.columns-2{ width: 460px; column-count: 2; column-gap: .5rem; }
.dropdown-menu.columns-3{ width: 680px; column-count: 3; column-gap: .5rem; }
.dropdown-menu a.dropdown-item{ white-space: normal; break-inside: avoid; }

/* ===== MEGA PANEL ===== */
.mega-backdrop{
  position:fixed; inset:0;
  background:var(--backdrop);
  backdrop-filter:blur(1px);
  z-index:1029;
  display:none;
}
.mega-backdrop.open{ display:block; }

.mega-panel{
  position:absolute; left:0; right:0; top:100%;
  background:var(--panel);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow);
  z-index:1030;
  display:none; opacity:0; transform:translateY(-8px);
  transition:opacity var(--transition), transform var(--transition);
  max-height:72vh; overflow:auto;
  overscroll-behavior: contain;
}
.mega-panel.open{ display:block; opacity:1; transform:translateY(0); }

.mega-inner{ width:min(1200px,96vw); margin:0 auto; padding:16px 20px 18px; }

/* Ok (caret) */
.mega-caret{
  position:absolute; width:12px; height:12px;
  background:var(--panel);
  border-left:1px solid var(--border);
  border-top:1px solid var(--border);
  transform:rotate(45deg);
  top:-6px; left:50%;
}

/* Başlık ve kapat */
.mega-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.5rem;
}
#megaClose{ font-size:.875rem; }

/* Grid düzenleri (bootstrap row kullanılıyor) */
.mega-panel a{ color:inherit; text-decoration:none; }
.mega-panel a:hover{ text-decoration:underline; }

/* Responsive iyileştirme */
@media (max-width: 1199.98px){
  .dropdown-menu.columns-3{ width: 560px; }
}
@media (max-width: 991.98px){
  .dropdown-menu.columns-2,
  .dropdown-menu.columns-3{ width: 320px; column-count: 1; }
  .mega-inner{ width:96vw; }
}
@media (max-width: 575.98px){
  .mega-inner{ padding:12px 14px; }
}

/* Navbar taşmayı bırakmalı */
.no-x-overflow{ overflow:visible !important; }

/* Daha Fazla link boşluğu */
#moreToggle{ padding-inline:10px; }

/* Autocomplete */
#suggestDropdown .list-group-item{
  background:var(--panel);
  color:var(--text);
  border:0;
  border-bottom:1px solid var(--border);
  padding:.55rem .75rem;
  display:flex; align-items:center; gap:.5rem;
}
#suggestDropdown .list-group-item:last-child{ border-bottom:0; }
#suggestDropdown .list-group-item.active{ background:var(--hover); }
#suggestDropdown small{ color:var(--muted); }

/* Kaydırma çubukları (göz yormayan) */
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--border) 70%, var(--text) 30%); }