:root{
      --bg:#0b0d12;           /* sayfa arka planı */
      --bg-elev:#10141c;      /* yükseltilmiş yüzey */
      --card:#141924;         /* kart arka planı */
      --text:#e9ecf1;         /* ana metin */
      --muted:#aab0bd;        /* ikincil metin */
      --primary:#d62a4b;      /* vurgu kırmızı */
      --primary-700:#b11f3b;
      --chip:#1a2030;         /* filtre chip */
      --line:#21283a;         /* ince çizgi */
      --gold:#f3d36e;         /* VIP */
      --shadow: 0 6px 18px rgba(0,0,0,.35);
      --radius:16px;
      --radius-sm:10px;
      --radius-xs:8px;
      --w-container:1200px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      background: var(--bg); color: var(--text);
    }

    /* ===== ÜST BANT ===== */
    .top-announce{
      background: linear-gradient(90deg, var(--primary) 0%, #e64061 100%);
      text-align:center; font-weight:600; font-size:.95rem; padding:8px 12px; letter-spacing:.1px;
    }

    /* ===== HEADER ===== */
    .header{ position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.2) blur(6px); background:rgba(10,12,17,.8); border-bottom:1px solid rgba(255,255,255,.04);} 
    .nav{ max-width:var(--w-container); margin:0 auto; display:flex; align-items:center; gap:14px; padding:12px 18px; }
    .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; }
    .brand .logo{
      display:inline-flex; align-items:center; gap:4px; padding:8px 10px; border-radius:10px; background:#0f1218; border:1px solid #20283a;
    }
    .brand .logo b{ background:var(--primary); color:#fff; padding:2px 6px; border-radius:6px; margin-left:4px; font-size:.9rem; }
    .brand a{ color:#fff; text-decoration:none; }

    .actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
    .btn{ border:none; cursor:pointer; font-weight:600; padding:10px 14px; border-radius:10px; transition:transform .12s ease, background .2s ease, color .2s ease; }
    .btn:hover{ transform:translateY(-1px) }
    .btn-primary{ background:var(--primary); color:#fff; }
    .btn-outline{ background:transparent; color:#fff; border:1px solid #2a3347; }

    .burger{ display:none; background:#151b29; border:1px solid #222a3b; color:#dfe3ea; padding:10px 12px; border-radius:10px; }
    .burger i{ font-size:1.1rem }

    /* ===== KEŞİF MENÜ (KATEGORİ BAR) ===== */
    .tabs-wrap{ background:rgba(17,22,31,.9); border-top:1px solid rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.04); }
    .tabs{ max-width:var(--w-container); margin:0 auto; display:flex; align-items:center; gap:8px; padding:10px 18px; overflow:auto; scrollbar-width:none; }
    .tabs::-webkit-scrollbar{ display:none }
    .tab{ white-space:nowrap; color:#cfd5df; text-decoration:none; font-weight:600; font-size:.92rem; padding:8px 12px; border-radius:10px; }
    .tab:hover{ background:#1a2131; color:#fff }
    .tab.active{ background:var(--primary); color:#fff }

    /* ===== ANA ALAN ===== */
    .layout{ max-width:var(--w-container); margin:18px auto; padding:0 18px; position:relative; }

    /* sol/sağ banner alanı (sadece desktop) */
    .side-banner{ position:fixed; top:120px; width:164px; height:600px; border-radius:22px; box-shadow:var(--shadow); background:#121827; overflow:hidden; display:none; align-items:center; justify-content:center; text-align:center; }
    .side-banner .inner{ padding:14px }
    .side-banner .badge40{ font-size:48px; font-weight:800; line-height:1; margin:10px 0; }
    .side-banner p{ margin:0; color:#c9cfda; font-size:.95rem }
    .side-left{ left:18px }
    .side-right{ right:18px }

    /* Filtre çipleri */
    .filters{ display:flex; gap:10px; flex-wrap:wrap; padding:6px 0 16px }
    .chip{ background:var(--chip); border:1px solid #242c3f; color:#dfe3ea; padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:600; font-size:.9rem; }
    .chip.active{ background:var(--primary); border-color:var(--primary); color:#fff }

    /* Video grid */
    .grid{ display:grid; gap:12px; grid-template-columns: repeat(6, 1fr); }
    @media (max-width:1200px){ .grid{ grid-template-columns: repeat(5, 1fr);} }
    @media (max-width:992px){ .grid{ grid-template-columns: repeat(4, 1fr);} }
    @media (max-width:768px){ .grid{ grid-template-columns: repeat(3, 1fr);} }
    @media (max-width:560px){ .grid{ grid-template-columns: repeat(2, 1fr);} }

    .card{ background:var(--card); border:1px solid #1f2536; border-radius:14px; overflow:hidden; box-shadow: 0 6px 14px rgba(0,0,0,.2); transition: transform .18s ease, box-shadow .18s ease; }
    .card:hover{ transform: translateY(-4px); box-shadow: 0 12px 22px rgba(0,0,0,.35); }
    .thumb{ position:relative; height: 168px; background:#0f1320; }
    .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .vip{ position:absolute; top:8px; right:8px; background: linear-gradient(180deg, #ffe384, #f1c45a); color:#321; font-weight:800; font-size:.72rem; padding:4px 7px; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,.3); }
    .duration{ position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,.55); color:#f5f7fa; font-weight:700; font-size:.82rem; padding:4px 6px; border-radius:8px; }
    .fav{ position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.55); color:#fff; font-size:.82rem; padding:4px 7px; border-radius:8px; display:flex; align-items:center; gap:6px; }
    .fav i{ color:#ff4d7a }

    .info{ padding:10px 12px 12px }
    .title{ font-weight:600; font-size:.95rem; line-height:1.25rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
    .meta{ margin-top:6px; display:flex; justify-content:space-between; color:#98a1b3; font-size:.83rem }

    /* Pagination */
    .pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin:22px 0 36px }
    .page{ background:#141b2a; color:#cfd5df; border:1px solid #25314a; padding:8px 12px; border-radius:10px; font-weight:700; cursor:pointer; }
    .page:hover{ background:#1a2131; color:#fff }
    .page.active{ background:var(--primary); color:#fff; border-color:var(--primary) }

    /* Footer */
    footer{ border-top:1px solid #1e2639; padding:26px 18px 40px; color:#b9c1cf; background: #0b0f17; }
    .footer-inner{ max-width:var(--w-container); margin:0 auto; text-align:center }
    .foot-brand{ display:inline-flex; gap:6px; align-items:center; padding:6px 10px; background:#0f1218; border:1px solid #232c41; border-radius:10px; margin-bottom:12px }
    .foot-brand b{ background:var(--primary); color:#fff; border-radius:6px; padding:2px 6px }
    .fine{ color:#8d96a8; font-size:.92rem }

    /* ===== DRAWER (MOBİL MENÜ) ===== */
    .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px); opacity:0; visibility:hidden; transition: .2s; z-index:70; }
    .overlay.show{ opacity:1; visibility:visible }

    .drawer{ position:fixed; inset:0 auto 0 0; width:320px; max-width:87vw; background: linear-gradient(180deg, #0f1218, #0b0e14); border-right:1px solid #1f2638; transform: translateX(-100%); transition: transform .24s ease; z-index:80; display:flex; flex-direction:column }
    .drawer.open{ transform: translateX(0) }
    .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px; border-bottom:1px solid #1f2638 }
    .drawer-title{ display:flex; align-items:center; gap:10px; font-weight:800 }
    .drawer-body{ padding:8px 0; overflow:auto }
    .menu-list{ list-style:none; margin:0; padding:0 }
    .menu-item{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #161c2b; color:#e5e9f2; text-decoration:none; }
    .menu-item .left{ display:flex; gap:10px; align-items:center }
    .menu-item .icon{ width:26px; height:26px; display:inline-grid; place-items:center; background:#121a2a; border:1px solid #1e273b; border-radius:8px }
    .menu-item:hover{ background:#131a2a }
    .menu-section{ color:#8c95a6; padding:12px 16px; font-weight:700; text-transform:uppercase; font-size:.85rem }

    /* RWD */
    @media (max-width:1024px){
      .side-banner{ display:none }
    }
    @media (min-width:1180px){
      .side-banner{ display:flex }
    }
    @media (max-width:860px){
      .burger{ display:inline-flex }
      .actions .btn{ padding:9px 12px }
    }
    @media (max-width:760px){
      .brand .desktop-only{ display:none }
    }