:root{
  --bg:#0b0f14; --elev:#121823; --muted:#99a3b3; --text:#e7eef7;
  --accent:#4f8cff; --card:#0f141b; --line:#1f2a38;
}

/* ====== Temel ====== */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial }
a{ color:inherit; text-decoration:none }

/* Scroll kilidi (drawer açıkken) */
html.no-scroll, html.no-scroll body{ overflow:hidden }

/* Sticky footer iskeleti */
html,body{ height:100% }
body{ min-height:100vh; display:flex; flex-direction:column }
main.container{ flex:1 0 auto }

/* Yardımcılar */
.muted{ color:var(--muted) }
.hidden{ display:none!important }

/* Container */
.container{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:16px;
}

/* ====== Butonlar & Form ====== */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--accent); color:#fff; border:none; border-radius:12px;
  padding:10px 14px; font-weight:600; transition:.15s ease;
}
.btn:hover{ filter:brightness(1.08) }
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ outline:2px solid rgba(79,140,255,.55); outline-offset:2px }
.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--text) }
.btn.small{ padding:6px 10px; font-size:14px }
.btn.ghost.small.active{ background:#142238; border-color:#274168 }
.btn.destructive{ background:#a83c3c }
.btn.destructive:hover{ filter:brightness(1.06) }

input, select, textarea{
  background:var(--card); color:var(--text); border:1px solid var(--line);
  padding:10px 12px; border-radius:10px; outline:none; transition:border-color .15s ease;
  font:inherit;
}
input:focus, select:focus, textarea:focus{ border-color:#29415f }
textarea{ min-height:120px; resize:vertical }

/* ====== Header / Nav ====== */
.sticky{ position:sticky; top:0; z-index:50; backdrop-filter:blur(6px) }
.site-header{
  position:relative;
  display:grid;
  grid-template-columns:auto 40px minmax(240px,1fr) max-content max-content;
  grid-template-areas: "brand burger nav search auth";
  align-items:center; gap:12px;
  padding:10px 16px; background:rgba(12,16,24,.9); border-bottom:1px solid #1b2735;
}
.brand{ grid-area:brand; display:flex; align-items:center; gap:10px; font-weight:700; color:#e6edf3 }
.brand i{ font-size:22px; color:#7aa2f7 }
.brand span{ letter-spacing:.3px }

.hamburger{ grid-area:burger; display:none; background:transparent; border:1px solid var(--line); border-radius:10px; padding:6px 8px; color:#9fb3c8 }
.hamburger.open{ background:#0e1622 }

.site-nav{ grid-area:nav; display:flex; gap:10px; align-items:center; min-width:260px }
.site-nav .nav-link{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:8px 10px; border-radius:10px; color:#a9b8c9; border:1px solid transparent;
}
.site-nav .nav-link:hover{ border-color:#243243; color:#dfe7ef; background:#0e1622 }
.only-desktop{ display:inline-flex }

.header-search{ grid-area:search; display:flex; gap:8px; align-items:center; justify-content:flex-start; width:auto; max-width:680px }
.header-search input[type="text"]{ min-width:220px; max-width:580px; width:32vw }

.auth{ grid-area:auth; display:flex; align-items:center; gap:10px; justify-self:end; position:relative }
.user{ position:relative }
.dropdown{
  display:none; position:absolute; right:0; top:calc(100% + 6px); min-width:190px;
  background:#0b1220; border:1px solid #253245; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.35);
  overflow:hidden; z-index:100;
}
.dropdown.open{ display:block }
.dropdown a{ display:flex; gap:8px; align-items:center; padding:10px 12px; color:#cdd6e4 }
.dropdown a:hover{ background:#0e1622 }
.dropdown .sep{ height:1px; background:#223148; margin:6px 0 }

/* Guest */
.site-header.guest{
  grid-template-columns:auto 1fr;
  grid-template-areas:"brand auth";
}
.site-header.guest .hamburger,
.site-header.guest .site-nav,
.site-header.guest .header-search{ display:none!important }

/* ====== Drawer (Mobil sol menü) ====== */
.drawer{ position:fixed; inset:0; display:none; z-index:60 }
.drawer.open{ display:block }
.drawer-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .2s ease;
}
.drawer.open .drawer-backdrop{ opacity:1 }
.drawer-panel{
  position:absolute; left:0; top:0; bottom:0;
  width:86vw; max-width:340px;
  background:#0b1220; border-right:1px solid var(--line);
  transform:translateX(-100%); transition:transform .25s ease;
  display:flex; flex-direction:column; padding:14px;
}
.drawer.open .drawer-panel{ transform:translateX(0) }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:6px }
.drawer-title{ display:flex; align-items:center; gap:10px; font-weight:700 }
.drawer-close{ background:transparent; border:1px solid var(--line); color:#cdd6e4; border-radius:10px; width:36px; height:36px }

/* gövde scroll */
.drawer-content{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 10px 2px;
}

.drawer-section{ display:flex; flex-direction:column; gap:10px }
.drawer-link{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:12px 14px; border-radius:12px;
  background:#0d141f; border:1px solid var(--line); color:#dfe7ef;
}
/* Drawer bölümleri arasında biraz boşluk */
.drawer-section + .drawer-section{ margin-top:30px }

.drawer-link:hover{ filter:brightness(1.06) }

.drawer-submenu{ display:none; padding-left:2px; gap:8px; flex-direction:column }
.drawer-submenu a{ display:block; padding:10px 12px; border-radius:10px; color:#cdd6e4; border:1px solid transparent; background:#0c1420 }
.drawer-submenu a:hover{ border-color:#2a3b56 }
.drawer-submenu.open{ display:flex }

.drawer-user{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px; background:#0d141f; border:1px solid var(--line);
  width:max-content;
}

/* ====== Bölüm başlıkları ====== */
.page-title{ margin:20px 0 12px; font-size:32px; line-height:1.2; text-align:left }
.row-block{ margin:18px 0 22px; max-width:1440px }
.row-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 2px 10px }
.row-title{ margin:0; font-size:22px; font-weight:750; letter-spacing:.2px }

/* ====== Kart ızgarası ====== */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column; min-height:100%;
}
.thumb{ position:relative; background:#0b1117; display:grid; place-items:center }
.thumb.landscape{ aspect-ratio:16/9 }
.thumb.portrait{  aspect-ratio:2/3  }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.placeholder i{ font-size:48px; color:var(--muted) }
.badge{
  position:absolute; left:8px; bottom:8px; background:#132032; color:#cfe2ff;
  border:1px solid #253245; border-radius:999px; padding:4px 8px; font-size:12px; pointer-events:none;
}
.badge.top{ top:8px; bottom:auto }
.badge.watched{ right:8px; left:auto; background:#14291a; color:#c6f6d5; border-color:#23412b }
.info{ padding:10px 12px }
.title{ font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.meta{ color:var(--muted); font-size:13px; margin-top:2px }

/* ====== Watch page: 2 kolon + sağ panel scroll ====== */
.watch-two-col{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(320px, 1fr);
  gap:18px;
}
#player{ width:100%; background:#000; border-radius:16px; border:1px solid var(--line) }
.details{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px;
  max-height:calc(100vh - 150px); overflow:auto;
}
.tags,.watched-info{ color:var(--muted) }
.watched-info{ margin-top:6px }
.vote-bar{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }

/* ====== Form kartları ====== */
.card-form{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px; margin:8px 0 24px;
}
.form-vertical{ display:grid; gap:12px }
.form-vertical label{ display:grid; gap:6px }
.form-vertical label span{ font-size:13px; color:var(--muted) }

.form-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }

/* Hata / bilgi */
.form-error{
  background:#291515; border:1px solid #4b2a2a; color:#ffd5d5;
  padding:10px 12px; border-radius:10px; margin-bottom:12px;
}
.empty{
  background:rgba(16,24,36,.35); border:1px dashed var(--line); border-radius:12px;
  padding:14px; color:#cdd6e4; text-align:left;
}

/* Tür çipleri */
.chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.chip{ position:relative; display:inline-flex; align-items:center }
.chip input{ position:absolute; opacity:0; pointer-events:none }
.chip span{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  background:#0c1420; border:1px solid var(--line);
  color:#c9d3e4; font-size:13px; line-height:1; transition:all .15s ease;
}
.chip span i{ font-size:16px; color:#87a9ff }
.chip:hover span{ border-color:#2a3b56 }
.chip input:checked + span{
  background:rgba(79,140,255,.14);
  border-color:#355a8e;
  color:#e7f0ff;
  box-shadow:0 0 0 1px rgba(79,140,255,.25) inset;
}

/* Tarama sayfası */
.stats{ list-style:none; padding:0; display:flex; gap:16px; flex-wrap:wrap }
.stats li{ background:#0c1420; border:1px solid var(--line); border-radius:10px; padding:8px 10px }
.log{
  background:var(--card); border:1px solid var(--line);
  padding:12px; border-radius:12px; white-space:pre-wrap; max-width:960px; overflow:auto;
}

/* Sayfalama */
.pagination{ display:flex; gap:8px; flex-wrap:wrap }
.pagination .page{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px; border-radius:10px;
  background:#0d141f; border:1px solid var(--line); color:#c7d3e6;
}
.pagination .page:hover{ filter:brightness(1.08) }
.pagination .page.active{ background:#142238; border-color:#274168; color:#e7f0ff }

/* Footer */
.site-footer{ margin-top:auto; border-top:1px solid #1b2735; background:#0b1220 }
.site-footer .footer-inner{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:16px }
.footer-links a{ color:#9fb3c8; margin-right:12px }
.footer-links a:hover{ color:#dfe7ef }
.footer-copy{ color:#6e7e93 }

/* Nav dropdown (masaüstü) */
.nav-dropdown{ position:relative }
.nav-dropdown .menu{
  display:none; position:absolute; left:0; top:calc(100% + 6px); min-width:220px;
  background:#0b1220; border:1px solid #253245; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.35); padding:6px; z-index:60;
}
.nav-dropdown.open .menu{ display:block }
.nav-dropdown .menu a{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; color:#cdd6e4;
}
.nav-dropdown .menu a:hover{ background:#0e1622 }
.nav-link.has-menu i{ margin-right:4px }

/* ====== Responsive ====== */
@media (max-width:960px){
  .site-header{
    /* 2 kolon: sol marka, sağ hamburger; arama alttaki ikinci satırda tam genişlik */
    grid-template-columns: 1fr 40px;
    grid-template-areas:
      "brand burger"
      "search search";
    row-gap: 10px;
  }

  /* Sadece hamburger görünsün ve sağa yaslansın */
  .hamburger{ display:inline-flex; justify-self:end }

  /* Masaüstü menü ve sağ üstteki auth mobilde gizli kalmaya devam */
  .site-nav{ display:none !important }
  .auth{ display:none !important }

  /* Arama çubuğu tam genişlik */
  .header-search{ width:100%; max-width:none; justify-content:stretch }
  .header-search input[type="text"]{ min-width:0; width:100% }

  /* Watch sayfası & footer mevcut davranış */
  .watch-two-col{ grid-template-columns:1fr }
  .details{ max-height:none }
  .site-footer .footer-inner{ grid-template-columns:1fr; text-align:center }
}


/* ==== Index carousel (Glider) ==== */
.row-scroller { position: relative; }
.glider { display: flex; gap: 12px; }
.glider-track { gap: 12px; }

.glider .card { min-width: 220px; max-width: 220px; }
@media (min-width: 1200px){
  .glider .card { min-width: 260px; max-width: 260px; }
}
@media (max-width: 640px){
  .glider .card { min-width: 200px; max-width: 200px; }
}

/* Oklar */
.row-controls{ display:flex; gap:6px }
.caro-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:#0d141f; color:#c7d3e6; cursor:pointer;
}
.caro-btn:hover{ filter:brightness(1.08) }
.caro-btn i{ font-size:20px }