:root{
      --bg:#300000;
      --panel:#3b0000;
      --panel-2:#240000;
      --text:#ffecec;
      --muted:#ffbaba;
      --brand:#ff5b5b;
      --brand-2:#ff9a3c;
      --accent:#5a0000;
      --line:#5b1010;
      --shadow:rgba(0,0,0,.55);
    }
    *{box-sizing:border-box}
    html,body{background:var(--bg);color:var(--text);font:15px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial}
    a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
    .container{max-width:1360px;margin:0 auto;padding:0 18px}

    /* ======= MASTHEAD ======= */
    .masthead{
      position:sticky;top:0;z-index:60;
      background:rgba(32,0,0,.95);
      backdrop-filter:saturate(115%) blur(8px);
      border-bottom:1px solid var(--line)
    }
    .mast-row{
      display:grid;grid-template-columns:44px 1fr 44px;
      align-items:center;gap:8px;
      padding:10px 14px;min-height:60px
    }
    .icon-btn{
      display:inline-grid;place-items:center;
      width:40px;height:40px;
      border-radius:10px;
      border:1px solid #6a1515;
      background:#3f0000;
      color:#ffd3d3;
      font-weight:900
    }
    .brand{justify-self:center;display:flex;align-items:center;justify-content:center;min-height:40px}
    .brand-logo{
      height:32px;width:auto;object-fit:contain;
      image-rendering:auto;-webkit-user-drag:none;user-select:none;
      filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))
    }
    .actions{justify-self:end;display:flex;gap:8px}
    .desktop-only{display:none}

    .search-drop{
      display:none;
      border-top:1px solid var(--line);
      background:#240000;
      padding:10px 14px
    }
    .search-form{display:flex;gap:8px}
    .search-form input{
      flex:1;
      background:#3f0000;
      border:1px solid #6a1515;
      border-radius:12px;
      color:var(--text);
      padding:11px 12px
    }
    .crimson-pulse-suggest-box {
      scrollbar-width: thin;
      scrollbar-color: #6a1515 #3a0000;
    }
    .crimson-pulse-suggest-box::-webkit-scrollbar {
      width: 6px;
    }
    .crimson-pulse-suggest-box::-webkit-scrollbar-track {
      background: #3a0000;
      border-radius: 0 0 12px 0;
    }
    .crimson-pulse-suggest-box::-webkit-scrollbar-thumb {
      background: #6a1515;
      border-radius: 6px;
    }
    .btn{
      background:linear-gradient(135deg,var(--brand),var(--brand-2));
      color:#fff;
      padding:10px 14px;
      border-radius:12px;
      font-weight:800;
      border:0
    }
    .btn-small{padding:9px 12px;border-radius:10px}

    .tabbar{
      border-top:1px solid #1b0000;
      border-bottom:1px solid var(--line);
      background:#3a0000;
    }
    .tabbar-scroll{
      display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
      padding:10px 14px;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none; /* Firefox */
    }
    .tabbar-scroll::-webkit-scrollbar{display:none} /* Chrome/Safari */
    .tabbar-scroll a{
      padding:8px 14px;
      border-radius:999px;
      background:#400000;
      border:1px solid #6a1515;
      color:#ffdede;
      white-space:nowrap;
      font-weight:800;
      flex-shrink:0;
    }
    .tabbar-scroll a.active, .tabbar-scroll a:hover{background:#5a0000;border-color:#8a1515}
    .tabbar-scroll a.more-btn{background:transparent;border:1px dashed #6a1515;color:#ffbaba}

    /* ======= RUNNING TEXT (TIKER) DI BAWAH TABBAR ======= */
    .ticker-bar{
      border-top:1px solid #1b0000;
      border-bottom:1px solid var(--line);
      background:#2a0000;
      overflow:hidden;
    }
    .ticker-inner{
      display:flex;
      align-items:center;
      gap:10px;
      padding:6px 14px;
      font-size:13px;
    }
    .ticker-label{
      font-size:11px;
      font-weight:800;
      color:#ffc857;
      padding:3px 9px;
      border-radius:999px;
      background:#4a0000;
      flex-shrink:0;
    }
    .ticker-viewport{
      overflow:hidden;
      flex:1;
    }
    .ticker-track{
      display:inline-flex;
      white-space:nowrap;
      will-change:transform;
    }
    .ticker-text{
      margin-right:48px;
      color:#ffe0e0;
    }
    .ticker-url{
      color:#ffb3b3;
      font-weight:700;
    }

    /* Drawer */
    .drawer{
      position:fixed;inset:0 30% 0 0;
      background:#260000;
      border-right:1px solid #6a1515;
      transform:translateX(-102%);
      transition:transform .28s ease;
      z-index:80;
      display:flex;flex-direction:column
    }
    .drawer.open{transform:translateX(0)}
    .drawer-hd{
      padding:14px;
      border-bottom:1px solid #6a1515;
      display:flex;justify-content:space-between;align-items:center
    }
    .drawer-body{padding:12px;overflow:auto}
    .drawer a{
      display:block;
      background:#3a0000;
      border:1px solid #6a1515;
      border-radius:12px;
      padding:10px 12px;
      margin-bottom:10px;
      color:#ffe0e0
    }
    .scrim{
      position:fixed;inset:0;
      background:rgba(0,0,0,.45);
      opacity:0;pointer-events:none;
      transition:opacity .28s ease;
      z-index:70
    }
    .scrim.show{opacity:1;pointer-events:auto}

    @media(min-width:980px){
      .mast-row{grid-template-columns:220px 1fr;min-height:68px}
      .desktop-only{display:flex}
      .brand{justify-self:center}
      .brand-logo{height:42px}
      .icon-btn{display:none}
      .search-drop{display:none!important}
      .top-search{display:flex;gap:10px}
      .top-search input{
        flex:1;
        background:#3f0000;
        border:1px solid #6a1515;
        border-radius:12px;
        color:var(--text);
        padding:11px 12px
      }
      .actions{display:none}
      .tabbar-scroll{padding-left:18px;padding-right:18px}
    }

    /* ======= LAYOUT & CARDS ======= */
    .layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;margin-top:16px}
    @media(max-width:1100px){.layout{grid-template-columns:1fr}}
    .main{min-width:0}
    .section-title{font-weight:900;margin:10px 0 12px;font-size:clamp(16px,2.1vw,19px)}
    .subhead{color:var(--muted);margin:2px 0 12px}

    /* ======= HERO ======= */
    .hero{
      position:relative;border-radius:16px;overflow:hidden;
      background:#200000;
      box-shadow:0 10px 26px rgba(0,0,0,.7);
      margin:0 0 16px;
      border:1px solid rgba(255,255,255,.08);
      aspect-ratio: 16 / 9;
    }
    .hero .bg{
      position:absolute;inset:0;
      background:#000 center/cover no-repeat;
      filter:brightness(.96) saturate(1.02);
      transform:scale(1.02);
      transition:transform .6s ease;
    }
    .hero:hover .bg{ transform:scale(1.06); }
    .hero .shade{
      position:absolute;inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.10) 38%, rgba(0,0,0,.75) 72%, rgba(0,0,0,.9) 100%);
      z-index:1;
    }
    .hero .content{
      position:absolute;left:0;right:0;bottom:0;z-index:2;
      padding:18px 18px 16px;
      display:flex;justify-content:flex-start;align-items:flex-end;
    }
    .hero .meta{max-width:min(620px,92%);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
    .hero h1{
      margin:0 0 2px 0;
      font-size:clamp(18px,2.1vw,24px);
      line-height:1.25;
      text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 1px rgba(0,0,0,.7);
      letter-spacing:.2px;
    }
    .hero .chips{display:flex;gap:8px;flex-wrap:wrap}
    .chip{
      background:rgba(0,0,0,.45);
      border:1px solid rgba(255,255,255,.24);
      color:#ffe7e7;
      font-weight:800;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px
    }

    /* ===== Fancy CTA button ===== */
    .btn-cta{
      position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      width: auto; min-width: unset; padding: 8px 14px 8px 12px;
      border-radius: 14px; font-size: 14px; font-weight: 800; letter-spacing: .2px; color: #fff;
      border: 1px solid rgba(255,255,255,.28);
      background: linear-gradient(135deg, rgba(255,91,91,.45), rgba(255,154,60,.5));
      backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%);
      box-shadow: 0 6px 16px rgba(0,0,0,.55), 0 0 0 0 rgba(255,154,60,.0);
      transition: transform .15s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
      overflow: hidden;
    }
    .btn-cta::after{ content:"›"; font-size:16px; line-height:1; transform: translateX(0); transition: transform .2s ease, opacity .2s ease; opacity: .9; }
    .btn-cta::before{
      content:""; position:absolute; inset:0;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.45) 45%, transparent 60%);
      mix-blend-mode: screen; transform: skewX(-20deg) translateX(-120%);
      transition: transform .6s ease; pointer-events: none; opacity: .55;
    }
    .btn-cta:hover{
      border-color: rgba(255,255,255,.4);
      background: linear-gradient(135deg, rgba(255,91,91,.6), rgba(255,154,60,.65));
      box-shadow: 0 10px 22px rgba(0,0,0,.65), 0 0 0 6px rgba(255,154,60,.16);
    }
    .btn-cta:hover::after{ transform: translateX(3px); }
    .btn-cta:hover::before{ transform: skewX(-20deg) translateX(120%); }
    .btn-cta:active{
      transform: translateY(1px) scale(.98);
      box-shadow: 0 6px 16px rgba(0,0,0,.55), 0 0 0 0 rgba(255,154,60,.0);
    }
    @keyframes ctaPulse {
      0%,100% { box-shadow: 0 6px 16px rgba(0,0,0,.55), 0 0 0 0 rgba(255,154,60,.0);}
      50%{ box-shadow: 0 8px 18px rgba(0,0,0,.7), 0 0 0 6px rgba(255,154,60,.18);}
    }
    .btn-cta{ animation: ctaPulse 4.5s ease-in-out infinite; }

    .grid{
      display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px
    }
    .grid-lg{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
    @media(max-width:560px){.grid{grid-template-columns:repeat(2,1fr);gap:12px}}
    @media(max-width:380px){.grid{grid-template-columns:1fr}}
    .card{
      display:block;
      background:var(--panel);
      border-radius:14px;
      overflow:hidden;
      box-shadow:0 6px 18px var(--shadow);
      transition:transform .22s ease, box-shadow .22s ease
    }
    .card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.7)}
    .thumb{
      position:relative;
      background:#1a0000 center/cover no-repeat;
      border-bottom:1px solid #5b1010;
      aspect-ratio: var(--fv-thumb-aspect-ratio, 16/9);
    }
    .thumb-overlay{
      position:absolute;inset:0;
      background:linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.12) 70%)
    }
    .duration{
      position:absolute;right:8px;bottom:8px;
      background:rgba(0,0,0,.7);
      padding:4px 7px;border-radius:7px;
      font-size:12px;font-weight:800
    }
    .badge-hd{
      position:absolute;left:8px;top:8px;
      padding:4px 8px;border-radius:8px;
      font:800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
      color:#ffecec;
      border:1px solid rgba(255,255,255,.35);
      background:rgba(255,255,255,.12);
      backdrop-filter: blur(6px) saturate(120%);
      -webkit-backdrop-filter: blur(6px) saturate(120%);
    }
    .title{
      font-weight:800;
      padding:10px 10px 3px;
      letter-spacing:.2px;
      font-size:13px;line-height:1.25
    }
    .meta{
      color:var(--muted);
      font-size:12px;
      padding:0 10px 12px
    }

    /* Sidebar */
    .sidebar{position:sticky;top:182px;align-self:start}
    .sidebar .panel{
      background:var(--panel-2);
      border:1px solid #6a1515;
      border-radius:14px;
      padding:12px
    }
    .sidebar .section-title{margin-bottom:10px}
    .cat-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    @media(max-width:680px){ .cat-list{grid-template-columns:1fr} }
    .cat-pill{
      display:block;
      background:#3a0000;
      border:1px solid #6a1515;
      border-radius:999px;
      padding:8px 12px;
      color:#ffe0e0;
      font-weight:700
    }
    .cat-more{
      margin-top:10px;width:100%;
      background:#400000;
      border:1px solid #6a1515;
      color:#ffe0e0;
      border-radius:12px;
      padding:10px;
      font-weight:800;cursor:pointer
    }

    .ad-card{
      position:relative;overflow:hidden;
      border-radius:14px;
      background:#340000;
      border:1px solid #6a1515;
      box-shadow:0 10px 26px rgba(0,0,0,.7);
      transition:transform .22s ease, box-shadow .22s ease
    }
    .ad-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.8)}
    .ad-card img{
      width:100%;height:auto;display:block;
      transition:opacity .38s ease, transform .32s ease
    }
    .ad-label{
      position:absolute;top:8px;left:8px;
      background:rgba(0,0,0,.8);
      color:#fff;
      font:800 10px/1 system-ui;
      padding:4px 7px;border-radius:6px
    }
    .sidebar-banners{margin-top:8px;display:flex;flex-direction:column;gap:12px}

    /* WATCH */
    .watch{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px}
    @media(max-width:1100px){.watch{grid-template-columns:1fr}}
    .player-wrap{
      background:#000;
      border-radius:16px;
      overflow:hidden;
      box-shadow:0 10px 28px rgba(0,0,0,.8)
    }
    .player{width:100%;display:block}
    .embed-wrapper{position:relative;padding-top:56.25%}
    .embed-wrapper iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
    .watch-title{font-size:clamp(18px,2.6vw,26px);font-weight:900;margin:12px 0 4px}
    .watch-meta{color:var(--muted);font-size:13px;margin-bottom:10px}
    .pill{
      display:inline-block;margin:0 6px 6px 0;
      background:#3a0000;
      border:1px solid #6a1515;
      color:#ffe0e0;
      padding:6px 10px;border-radius:999px;
      font-weight:800;font-size:12px
    }
    .actionbar{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px;align-items:center}
    .ab-btn{
      display:inline-flex;align-items:center;gap:8px;
      background:#3a0000;
      border:1px solid #6a1515;
      color:#ffe0e0;
      padding:9px 12px;border-radius:12px;
      font-weight:900;cursor:pointer;
      transition:background .18s ease, border-color .18s ease
    }
    .ab-btn:hover{background:#5a0000;border-color:#8a1515}
    .ab-btn svg{flex-shrink:0}

    /* Like button */
    .ab-like .like-icon{transition:fill .2s ease, stroke .2s ease}
    .ab-like.liked{background:#5a0000;border-color:var(--brand)}
    .ab-like.liked .like-icon{fill:var(--brand);stroke:var(--brand)}

    /* Server group — wrap as a unit */
    .ab-servers{
      display:inline-flex;gap:6px;flex-shrink:0
    }
    .server-btn.active{
      background:var(--brand);border-color:var(--brand);color:#fff
    }
    @media(max-width:600px){
      .ab-servers{width:100%;justify-content:center}
    }
    .channel{
      display:flex;gap:12px;align-items:center;
      background:var(--panel-2);
      border:1px solid #6a1515;
      padding:12px;border-radius:14px;margin-top:10px
    }
    .avatar{
      width:44px;height:44px;border-radius:999px;
      background:#4a0000;
      display:grid;place-items:center;
      font-weight:900
    }
    .desc{
      background:var(--panel-2);
      border:1px solid #6a1515;
      border-radius:14px;
      padding:12px;margin-top:10px
    }
    .rail{
      position:sticky;top:182px;align-self:start;
      display:flex;flex-direction:column;gap:14px
    }
    .rail .panel{
      background:var(--panel-2);
      border:1px solid #6a1515;
      border-radius:14px;padding:12px
    }

    .watch-ads-top{
      display:grid;grid-template-columns:repeat(3,1fr);
      gap:12px;margin:4px 0 12px
    }
    @media (max-width:980px){
      .watch-ads-top{ grid-template-columns:1fr; }
      .watch-ads-top .slot-1, .watch-ads-top .slot-2{ display:none; }
    }
    .watch-ads{
      display:grid;grid-template-columns:repeat(3,1fr);
      gap:12px;margin:12px 0 16px
    }
    @media (max-width:980px){ .watch-ads{ grid-template-columns:1fr; } }
    @media (max-width:768px){ .watch-ads .slot-1, .watch-ads .slot-2{ display:none; } }

    /* ========== Pagination (bar style, scrollable on mobile) ========== */
    .pager-wrap{position:relative;margin:16px 0;display:flex;justify-content:center}
    .pager-scroll{
      display:flex; align-items:stretch; gap:0;
      overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
      border:1px solid var(--line); border-radius:16px; background:#3a0000;
      padding:4px; max-width:100%;
      scroll-snap-type:x mandatory;
      white-space:nowrap;
    }
    .pager-scroll::-webkit-scrollbar{height:10px}
    .pager-scroll::-webkit-scrollbar-thumb{background:#6a1515;border-radius:999px}
    .page-btn{
      display:inline-flex; align-items:center; justify-content:center;
      min-width:46px; padding:9px 14px; height:40px;
      border-right:1px solid #6a1515;
      font-weight:800; color:#ffdede; background:transparent;
      text-decoration:none; scroll-snap-align:start;
    }
    .page-btn:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
    .page-btn:last-child{ border-right:0; border-top-right-radius:12px; border-bottom-right-radius:12px; }
    .page-btn:hover{ background:#5a0000; }
    .page-btn.active{ background:var(--brand); color:#fff; }
    .page-btn.disabled{ opacity:.35; pointer-events:none; }
    .page-ellipsis{ display:inline-flex; align-items:center; padding:0 12px; color:var(--muted); }

    /* mobile: keep it inside viewport, no cut */
    @media (max-width:520px){
      .pager-wrap{ margin:12px -10px; }
      .pager-scroll{ border-radius:0; }
    }

    @media (max-width:768px){
      .hero{border-radius:12px;margin:8px 0 12px}
      .hero .content{padding:14px}
      .hero h1{font-size:18px}
      .chip{padding:5px 8px;font-size:12px;border-radius:999px}
      .btn-cta{padding:8px 12px;border-radius:12px;font-size:14px}
    }

    .agegate-logo{
      display:block;margin:0 auto 14px;
      width:min(360px,75vw);height:auto;
      object-fit:contain;
      filter:drop-shadow(0 4px 16px rgba(0,0,0,.6))
    }

    /* ========== Ultra-narrow fix (Galaxy Z Fold narrow ≤380px) ========== */
    @media (max-width: 380px){
      .container{ padding: 0 10px; }
      .layout{ gap: 14px; }

      /* Masthead */
      .mast-row{ grid-template-columns: 36px 1fr 36px; padding: 6px 8px; min-height: 52px; }
      .icon-btn{ width:36px; height:36px; border-radius:9px; }
      .brand-logo{ height:24px; }

      /* Tabbar */
      .tabbar-scroll{ padding: 6px 8px; gap: 8px; }
      .tabbar-scroll a{ padding: 6px 9px; font-size: 12.5px; }

      /* Hero */
      .hero{ border-radius: 12px; margin: 0 0 10px; aspect-ratio:16/9; }
      .hero .content{ padding: 10px 10px 12px; }
      .hero h1{ font-size: 15px; line-height: 1.25; }
      .chip{ padding: 3px 7px; font-size: 10.5px; border-radius: 999px; }
      .btn-cta{ padding: 6px 10px; font-size: 12.5px; border-radius: 11px; }

      /* Cards / grid */
      .grid{ grid-template-columns: 1fr 1fr; gap: 8px; }
      .card{ border-radius: 12px; }
      .badge-hd{ font-size:10px; padding:3px 7px; border-radius:7px; }
      .duration{ font-size:10.5px; padding:2px 5px; }
      .title{ font-size:11.75px; padding:8px 8px 3px; }
      .meta{ font-size:11px; padding:0 8px 10px; }

      /* Sidebar fallback on single column */
      .sidebar{ position: static; top: auto; }
    }

    /* ===== Floating Telegram Button ===== */
    .tg-float{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:120;
      text-decoration:none;
    }
    .tg-float-btn{
      width:54px;
      height:54px;
      border-radius:999px;
      display:grid;
      place-items:center;
      /* biarkan Telegram biru supaya tetap dikenali */
      background:radial-gradient(circle at 30% 0,#62d4ff,#0088cc);
      box-shadow:0 10px 24px rgba(0,0,0,.7);
      border:1px solid rgba(255,255,255,.45);
      transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }
    .tg-float-btn .tg-icon{
      width:26px;
      height:26px;
      fill:#ffffff;
    }
    .tg-float:hover .tg-float-btn{
      transform:translateY(-2px) scale(1.03);
      box-shadow:0 14px 32px rgba(0,0,0,.85);
    }
    .tg-float:active .tg-float-btn{
      transform:translateY(0) scale(.97);
      box-shadow:0 8px 18px rgba(0,0,0,.7);
    }
    @media(max-width:480px){
      .tg-float{
        right:14px;
        bottom:14px;
      }
      .tg-float-btn{
        width:48px;
        height:48px;
      }
    }
/* ===== FIX TITLE: maksimal 2 baris + ... ===== */
.title{
  font-weight:800;
  padding:10px 10px 3px;
  letter-spacing:.2px;
  font-size:13px;
  line-height:1.25;

  /* 2 lines clamp + ellipsis */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;

  /* tinggi konsisten 2 baris */
  min-height:2.5em; /* 2 * 1.25em */
}

/* (Opsional) kalau judul "Up next" mau sama */
.up-title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.25;
  min-height:2.5em;
}