/* senci — file statis ber-versi (AppSupportAsset::url). Sumber dulu inline: partials/senci-style. JANGAN taruh variabel Blade di sini. */
    :root{
        /* Warna brand senci = MERAH senci #E8443B (sama dgn app Flutter) (--red dipertahankan sbg nama var). */
        --red:#E8443B; --red-soft:#fdeaea; --ink:#20242e; --muted:#6b717a; --line:#ecedf2;
        --bg:#f3f4f8; --card:#ffffff; --soft:#f2f3f5; --sidebar-w:238px; --rail-w:294px; --topbar-h:64px;
        --radius:16px;
    }
    *{ box-sizing:border-box; }
    html,body{ margin:0; padding:0; overflow-x:hidden; max-width:100%; overscroll-behavior-x:none; }
    body{ background:var(--bg); color:var(--ink);
        font-family:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
        font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
    a{ color:inherit; text-decoration:none; }
    img{ display:block; max-width:100%; }
    ::-webkit-scrollbar{ width:8px; height:8px; }
    /* Aksesibilitas: fokus keyboard selalu terlihat (jangan outline:0 tanpa pengganti) */
    :focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
    /* Tombol bergaya tautan (pengganti <a> tanpa href) */
    .linkbtn{ background:none; border:0; padding:0; font:inherit; color:var(--red); font-weight:700; cursor:pointer; }
    .linkbtn:hover{ text-decoration:underline; }
    ::-webkit-scrollbar-thumb{ background:#d7d9e0; border-radius:4px; }

    .shell{ display:flex; min-height:100vh; max-width:1600px; margin:0 auto; }

    /* ===== SIDEBAR ===== */
    /* Tinggi fix = 100vh, TANPA scrollbar (overflow:hidden). Spasi disetel muat semua item. */
    .sidebar{ width:var(--sidebar-w); flex:none; position:sticky; top:0; height:100vh; overflow:hidden;
        background:var(--card); border-right:1px solid var(--line); padding:12px 12px 35px; display:flex; flex-direction:column; }
    /* Layar pendek: item terakhir jangan terpotong — boleh digulir, scrollbar tetap tak terlihat. */
    .sidebar{ overflow-y:auto; scrollbar-width:none; }
    .sidebar::-webkit-scrollbar{ display:none; }
    .brand{ display:flex; align-items:center; gap:10px; padding:2px 8px 6px; }
    .brand .logo{ display:inline-flex; align-items:flex-end; font-size:42px; font-weight:800; color:var(--red);
        letter-spacing:-.4px; line-height:1; margin-top:-6px; margin-bottom:10px; }
    .brand .logo::after,.m-topbar .logo::after{ content:''; display:inline-block; border-radius:50%; background:var(--ink); }
    .brand .logo::after{ width:9px; height:9px; margin-left:4px; margin-bottom:3px; }
    .nav{ display:flex; flex-direction:column; gap:2px; }
    .nav a{ display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:10px; color:#3b4150; font-size:14px; font-weight:500; line-height:1.25; transition:background .12s,color .12s; }
    .nav a .ic{ width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center; }
    .nav a .ic svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
    .nav a .emo{ font-size:16px; filter:grayscale(1) opacity(.75); }
    .nav a:hover{ background:#f5f6fa; color:var(--ink); }
    .nav a.on{ background:none; color:var(--red); font-weight:700; }
    .nav a.on .emo{ filter:none; opacity:1; }
    .nav-sep{ height:1px; background:var(--line); margin:9px 8px; }
    .nav-label{ font-size:11px; font-weight:700; color:#9aa0aa; text-transform:uppercase; letter-spacing:.4px; padding:5px 12px 5px; }

    /* ===== BODY (topbar + cols) ===== */
    .body{ flex:1; min-width:0; }
    .topbar{ position:sticky; top:0; z-index:40; background:rgba(243,244,248,.85); backdrop-filter:blur(10px);
        height:var(--topbar-h); display:flex; align-items:center; gap:16px; padding:0 26px; border-bottom:1px solid var(--line); }
    .search{ flex:1; max-width:640px; display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
        border-radius:24px; height:42px; padding:0 18px; color:var(--muted); }
    .search svg{ width:18px; height:18px; flex:none; stroke:#9aa0aa; fill:none; stroke-width:2; }
    .search input{ flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:14px; color:var(--ink); }
    .search:focus-within{ border-color:var(--red); }
    .topbar .spacer{ flex:1; }
    /* Halaman Lokal: chip pilih kota di DALAM form search (1 pill), search +80px */
    .search--lokal{ max-width:720px; padding-right:8px; }
    .loc-in{ display:flex; align-items:center; gap:6px; flex:none; margin-left:10px; padding:0 4px 0 14px;
        border:0; border-left:1px solid var(--line); background:none; font:inherit; font-weight:700; font-size:14px;
        color:var(--ink); cursor:pointer; white-space:nowrap; height:24px; }
    .loc-in:hover{ color:var(--red); }
    .loc-in .pin{ width:16px; height:16px; flex:none; }
    .loc-in .cav{ width:15px; height:15px; flex:none; stroke:#9aa0aa; fill:none; stroke-width:2.2; }
    .ic-btn{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--card);
        border:1px solid var(--line); cursor:pointer; position:relative; color:#4b5160; }
    .ic-btn svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.8; }
    .ic-btn .dot{ position:absolute; top:9px; right:10px; width:7px; height:7px; background:var(--red); border-radius:50%; border:1.5px solid var(--card); }
    .user-chip{ display:flex; align-items:center; gap:8px; cursor:pointer; font:inherit; color:var(--ink); padding:4px 8px 4px 4px; border-radius:22px; border:1px solid var(--line); background:var(--card); }
    .user-chip .uava{ width:32px; height:32px; border-radius:50%; overflow:hidden; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
    .user-chip .uava img{ width:100%; height:100%; object-fit:cover; }
    .user-chip .uname{ font-size:13.5px; font-weight:600; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .user-chip .cav{ width:14px; height:14px; stroke:#9aa0aa; fill:none; stroke-width:2; }
    .user-chip.guest .uava{ display:none; } .user-chip.guest .cav{ display:none; }
    /* Guest = tombol "Masuk" (web-auth mengganti isi chip jadi teks polos, jadi style di chip-nya langsung) */
    .user-chip.guest{ display:flex; align-items:center; justify-content:center; text-align:center;
        background:var(--red); border:0; border-radius:12px; gap:0;
        color:#fff; font-weight:700; font-size:15px; line-height:1; padding:12px 40px; cursor:pointer; }
    .user-chip.guest .uname{ color:#fff; font-weight:700; font-size:15px; max-width:none; padding:0; overflow:visible; }
    .user-chip.guest:hover{ filter:brightness(.94); }

    .cols{ display:grid; grid-template-columns:1fr var(--rail-w); gap:24px; padding:20px 26px 60px; align-items:start; }
    .main{ min-width:0; }

    /* ===== HERO ===== */
    .hero{ display:grid; grid-template-columns:1.9fr 1fr; gap:18px; margin-bottom:30px; }
    .hero-main{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; background:#e9ebf0; }
    .hero-main img{ width:100%; height:100%; object-fit:cover; }
    .hero-main .shade{ position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.28) 45%,transparent 70%); }
    .hero-main .body{ position:absolute; left:0; right:0; bottom:0; padding:24px; color:#fff; }
    .badge{ display:inline-block; background:rgba(255,255,255,.16); backdrop-filter:blur(4px); color:#fff; font-size:11px; font-weight:700;
        letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; border-radius:6px; margin-bottom:10px; }
    .badge.solid{ background:var(--red); }
    .hero-main h1{ margin:0 0 8px; font-size:26px; line-height:1.25; font-weight:800; }
    .hero-main p{ margin:0 0 12px; font-size:14px; color:rgba(255,255,255,.86); max-width:88%; }
    .hero-main .meta, .card .meta{ font-size:12.5px; color:rgba(255,255,255,.8); display:flex; align-items:center; gap:8px; }
    .src-ava{ width:20px; height:20px; border-radius:50%; background:#fff; overflow:hidden; flex:none; display:inline-flex; }
    .src-ava img{ width:100%; height:100%; object-fit:contain; }
    .hero-main .dots{ position:absolute; left:24px; bottom:20px; display:flex; gap:6px; }
    .hero-nav{ position:absolute; right:16px; bottom:16px; display:flex; gap:8px; }
    .hero-nav button{ width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.9); cursor:pointer; font-size:15px; color:#333; }
    .hero-side{ display:flex; flex-direction:column; gap:18px; }
    .hero-scard{ position:relative; border-radius:var(--radius); overflow:hidden; flex:1; min-height:130px; background:#e9ebf0; }
    .hero-scard img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
    .hero-scard .shade{ position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.8),transparent 65%); }
    .hero-scard .body{ position:absolute; left:0; right:0; bottom:0; padding:14px; color:#fff; }
    .hero-scard h3{ margin:0; font-size:15px; line-height:1.3; font-weight:700; }
    .hero-scard .meta{ margin-top:6px; font-size:11.5px; }

    /* ===== SECTION ===== */
    .sec-head{ display:flex; align-items:baseline; gap:12px; margin:0 0 16px; }
    .sec-head h2{ margin:0; font-size:20px; font-weight:800; }
    .sec-head .sub{ font-size:13px; color:var(--muted); flex:1; }
    .sec-head .more{ font-size:13px; color:var(--red); font-weight:600; white-space:nowrap; }
    section.block{ margin-bottom:34px; }

    /* Untuk Kamu cards */
    .cards4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
    .ucard{ background:var(--card); border-radius:14px; overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column; transition:box-shadow .15s,transform .15s; }
    .ucard:hover{ box-shadow:0 8px 22px rgba(20,24,40,.08); transform:translateY(-2px); }
    .ucard .thumb{ position:relative; aspect-ratio:16/10; background:#e9ebf0; }
    .ucard .thumb img{ width:100%; height:100%; object-fit:cover; }
    .ucard .thumb .badge{ position:absolute; top:10px; left:10px; margin:0; }
    .ucard .uc-body{ padding:12px 13px 14px; flex:1; display:flex; flex-direction:column; }
    .ucard h3{ margin:0 0 auto; font-size:14.5px; line-height:1.35; font-weight:700;
        display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .ucard .uc-meta{ margin-top:10px; font-size:12px; color:var(--muted); }

    /* Berita Terbaru list */
    .tabs{ display:flex; gap:22px; margin-left:auto; }
    .tabs button{ border:0; background:none; font:inherit; font-size:13.5px; color:var(--muted); cursor:pointer; padding:0 0 6px; position:relative; }
    .tabs button.on{ color:var(--red); font-weight:700; }
    .tabs button.on::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2.5px; background:var(--red); border-radius:2px; }
    /* Feed "Berita Terbaru" — desain lama senci: thumbnail KANAN + selipan grid acak. */
    .feed .card{ display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); }
    .feed .card:hover .card__title{ color:var(--red); }
    .card__body{ flex:1; min-width:0; display:flex; flex-direction:column; }
    .card__title{ font-size:17px; line-height:1.45; font-weight:700; margin:2px 0 0; color:var(--ink);
        display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .card__meta{ margin-top:auto; padding-top:14px; display:flex; gap:16px; align-items:center; color:var(--muted); font-size:13px; }
    .card__meta .src{ color:#5f6570; }
    /* ✕ "Tidak tertarik": area sentuh 32px tanpa mengubah tinggi baris meta (margin negatif). */
    .card__meta .x{ margin:-8px -9px -8px auto; opacity:.4; width:32px; height:32px; flex:none; display:inline-flex; align-items:center; justify-content:center;
        border-radius:50%; cursor:pointer; }
    .card__meta .x:hover,.card__meta .x:focus-visible{ opacity:1; background:var(--soft); }
    .card__thumb{ position:relative; width:184px; height:118px; flex:none; border-radius:10px; overflow:hidden; background:#e9ebf0; }
    .card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .card__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
    .card__dur{ position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; padding:1px 6px; border-radius:3px; }
    .grid-row{ display:grid; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
    .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); }
    .gcell{ display:block; }
    .gcell__img{ position:relative; width:100%; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:#e9ebf0; }
    .gcell__img img{ width:100%; height:100%; object-fit:cover; display:block; }
    .gcell__title{ margin:9px 0 3px; font-size:14.5px; line-height:1.35; font-weight:700; color:var(--ink);
        display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .grid-4 .gcell__title{ font-size:13.5px; }
    .gcell__meta{ color:var(--muted); font-size:12px; }
    .gcell:hover .gcell__title{ color:var(--red); }
    .bigcard{ display:block; padding:18px 0; border-bottom:1px solid var(--line); }
    .bigcard__img{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#e9ebf0; margin-bottom:12px; }
    .bigcard__img img{ width:100%; height:100%; object-fit:cover; display:block; }
    .bigcard__title{ font-size:19px; line-height:1.4; font-weight:700; margin:0 0 8px; color:var(--ink); }
    .bigcard:hover .bigcard__title{ color:var(--red); }
    .bigcard .card__meta{ margin-top:0; padding-top:0; }
    .noimg{ background:#f2f3f5 url('/news-fallback.webp') center/cover no-repeat!important; }
    .feed-sentinel{ text-align:center; padding:22px; }
    .feed-sentinel.done{ display:none; }
    /* Sentinel: gagal muat = "Ketuk untuk coba lagi"; skeleton tampil = spinner disembunyikan */
    .feed-retry{ display:none; background:none; border:0; font:inherit; font-size:13.5px; color:var(--muted); cursor:pointer; padding:10px 16px; }
    .feed-sentinel.fail .spin,.feed-sentinel.sk .spin{ display:none; }
    .feed-sentinel.fail .feed-retry{ display:inline-block; }
    .feed-sentinel.fail-big{ padding:56px 16px; }
    /* Skeleton muatan awal feed */
    .feed-skel .sk-card{ display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); }
    .sk-l{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; padding-top:4px; }
    .sk-l i{ display:block; height:16px; border-radius:4px; background:var(--line); }
    .sk-l i:nth-child(2){ width:72%; }
    .sk-l i.s{ width:38%; height:12px; margin-top:auto; }
    .sk-th{ width:184px; height:118px; flex:none; border-radius:10px; background:var(--line); }
    .feed-skel i,.feed-skel .sk-th{ animation:skp 1.2s ease-in-out infinite; }
    @keyframes skp{ 50%{ opacity:.5; } }
    /* Judul sudah dibaca = abu (localStorage senci_read) */
    .card.is-read .card__title,.gcell.is-read .gcell__title,.bigcard.is-read .bigcard__title,
    .mc.is-read .mc-title,.mbig.is-read .mbig-title,.mgc.is-read .mgc-title,.mrow.is-read .mrow-t{ color:var(--muted); }
    /* Banner "senci merekomendasikan N berita baru" (muat ulang feed) */
    .feed-banner{ position:fixed; left:50%; top:calc(var(--topbar-h) + 10px); z-index:60; transform:translate(-50%,-12px); opacity:0; pointer-events:none;
        background:var(--red-soft); color:var(--red); font-size:13px; font-weight:600; padding:8px 18px; border-radius:18px;
        box-shadow:0 4px 14px rgba(0,0,0,.08); transition:opacity .22s,transform .22s; white-space:nowrap; }
    .feed-banner.show{ opacity:1; transform:translate(-50%,0); }
    /* ✕ alasan: desktop = popover di dekat ✕, HP = sheet bawah */
    .dk{ position:fixed; inset:0; z-index:230; }
    .dk[hidden]{ display:none; }
    .dk-bg{ position:absolute; inset:0; }
    .dk-card{ position:fixed; width:290px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px;
        box-shadow:0 12px 32px rgba(0,0,0,.16); padding:6px 0; }
    .dk-grab{ display:none; }
    .dk-h{ font-size:13px; font-weight:700; color:var(--muted); padding:8px 14px 6px; }
    .dk-opt{ display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:8px 14px; border:0; background:none;
        font:inherit; font-size:14px; color:var(--ink); cursor:pointer; text-align:left; }
    .dk-opt:hover,.dk-opt:focus-visible{ background:var(--soft); }
    .dk-opt:focus-visible{ outline-offset:-2px; }
    .dk-card:focus{ outline:0; }
    .dk-opt svg{ width:20px; height:20px; flex:none; stroke:var(--muted); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .dk-opt span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .dk-gone{ transition:height .28s ease,opacity .28s ease,padding .28s ease; opacity:0; padding-top:0!important; padding-bottom:0!important; border-bottom-width:0!important; }
    /* Toast feed */
    .sx-toast{ position:fixed; left:50%; bottom:40px; transform:translate(-50%,20px); background:rgba(0,0,0,.82); color:#fff; padding:10px 18px;
        border-radius:20px; font-size:14px; z-index:999; opacity:0; transition:.28s; pointer-events:none; max-width:calc(100vw - 32px); text-align:center; }
    .sx-toast.show{ opacity:1; transform:translate(-50%,0); }
    .spin{ display:inline-block; width:22px; height:22px; border:2.5px solid var(--line); border-top-color:var(--red); border-radius:50%; animation:spin .7s linear infinite; }
    @keyframes spin{ to{ transform:rotate(360deg); } }

    /* ===== RIGHT RAIL ===== */
    .rail{ width:var(--rail-w); position:sticky; top:calc(var(--topbar-h) + 20px); display:flex; flex-direction:column; gap:18px; }
    .rc{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
    .rc-head{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px; margin-bottom:14px; }
    .rc-head .more{ margin-left:auto; color:#9aa0aa; }
    .weather{ background:linear-gradient(135deg,#eaf3ff,#f3f0ff); }
    .weather .wtop{ display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:14px; }
    .weather .wtop .loc{ display:flex; align-items:center; gap:6px; }
    .weather .wmain{ display:flex; align-items:center; gap:14px; margin-top:10px; }
    .weather .wmain .emo{ font-size:38px; }
    .weather .wtemp{ font-size:34px; font-weight:800; }
    .weather .wdesc{ font-size:12.5px; color:var(--muted); }
    .weather .whl{ font-size:12.5px; color:var(--muted); margin-top:2px; }
    .hotlist{ display:flex; flex-direction:column; gap:13px; }
    .hotlist a{ display:flex; gap:12px; align-items:flex-start; }
    .hotlist .rank{ font-weight:800; font-size:15px; color:#c9ccd4; width:18px; flex:none; }
    .hotlist a:nth-child(1) .rank,.hotlist a:nth-child(2) .rank,.hotlist a:nth-child(3) .rank{ color:var(--red); }
    .hotlist .ht{ font-size:13.5px; line-height:1.4; font-weight:600; }
    .hotlist a:hover .ht{ color:var(--red); }
    .chips{ display:flex; flex-wrap:wrap; gap:9px; }
    .chip{ display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--card); font:inherit; border-radius:20px; padding:7px 12px; font-size:13px; cursor:pointer; color:#3b4150; }
    .chip .pm{ width:16px; height:16px; border-radius:50%; background:var(--red-soft); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; line-height:1; }
    .chip.on{ background:var(--red-soft); border-color:#f6c9c5; color:var(--red); font-weight:600; }
    .chip.on .pm{ background:var(--red); color:#fff; }
    .rc-quote{ background:linear-gradient(135deg,#f5f0ff,#fdeceb); }
    .rc-quote .q{ font-size:14px; font-style:italic; line-height:1.55; color:#3b4150; }
    .rc-quote .a{ font-size:12.5px; color:var(--muted); margin-top:10px; font-weight:600; }
    .tonton{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:150px; display:block; background:#20242e; color:#fff; }
    .tonton img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
    .tonton .shade{ position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,.15)); }
    .tonton .body{ position:absolute; left:0; right:0; bottom:0; padding:16px; }
    .tonton h4{ margin:0 0 3px; font-size:15px; }
    .tonton p{ margin:0; font-size:12px; color:rgba(255,255,255,.82); }
    .tonton .play{ position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:18px; }

    /* ===== MOBILE NAV (hidden desktop) ===== */
    .m-topbar,.m-catstrip,.m-catwrap,.m-dethead,.bottomnav{ display:none; }

    /* Tombol "+ Posting" (topbar desktop) — merah solid */
    .post-btn{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 18px 0 14px; border-radius:20px;
        background:var(--red); color:#fff; font-weight:700; font-size:14px; white-space:nowrap; flex:none; }
    .post-btn svg{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; }
    .post-btn:hover{ filter:brightness(.94); }

    /* Sheet serbaguna (Channel Saya / Pilih Kota): desktop = modal tengah, HP = sheet bawah */
    .sx-sheet{ position:fixed; inset:0; z-index:210; display:none; }
    .sx-sheet.show{ display:block; }
    .sx-bg{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
    .sx-card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:440px; max-width:calc(100vw - 32px);
        height:min(560px,82vh); background:var(--card); color:var(--ink); border-radius:14px; display:flex; flex-direction:column; overflow:hidden;
        box-shadow:0 18px 50px rgba(0,0,0,.22); }
    .sx-grab{ display:none; }
    .sx-head{ display:flex; align-items:center; padding:14px 16px 12px; font-size:16px; border-bottom:1px solid var(--line); }
    .sx-x{ margin-left:auto; background:none; border:0; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px; }
    .sx-search{ display:flex; align-items:center; gap:8px; margin:12px 16px 4px; height:40px; padding:0 14px; border-radius:20px; background:var(--soft); }
    .sx-search svg{ width:17px; height:17px; flex:none; stroke:#9aa0aa; fill:none; stroke-width:2; }
    .sx-search input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:15px; color:var(--ink); }
    .sx-search:focus-within{ box-shadow:0 0 0 2px var(--red); }
    .sx-card:focus{ outline:0; }
    .sx-body{ flex:1; overflow-y:auto; padding:6px 16px 18px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
    .sx-note{ color:var(--muted); font-size:13.5px; text-align:center; padding:28px 8px; }
    .sx-note a,.sx-note button{ color:var(--red); font-weight:700; background:none; border:0; font:inherit; cursor:pointer; }
    .sx-sec{ font-size:12.5px; font-weight:700; color:var(--muted); margin:14px 0 8px; }
    .sx-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .sx-grid a{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:40px; padding:6px 6px; border-radius:8px;
        background:var(--soft); font-size:14px; color:var(--ink); line-height:1.2; }
    .sx-grid a.on{ background:var(--red-soft); color:var(--red); font-weight:700; }
    .sx-city{ display:flex; align-items:center; gap:10px; width:100%; padding:13px 2px; border:0; border-bottom:1px solid var(--line); background:none;
        font:inherit; font-size:15px; color:var(--ink); cursor:pointer; text-align:left; }
    .sx-city:hover{ color:var(--red); }
    .sx-city.on{ color:var(--red); font-weight:700; }
    .sx-city .ck{ margin-left:auto; color:var(--red); font-weight:700; }
    .sx-geo{ display:flex; align-items:center; gap:8px; margin:8px 16px 2px; padding:10px 14px; min-height:42px; border:1px solid var(--line); border-radius:20px;
        background:var(--card); color:var(--red); font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; text-align:left; }
    .sx-geo:hover{ border-color:var(--red); }
    .sx-geo:disabled{ opacity:.7; cursor:progress; }

    /* "Topik hangat" (berita berkembang) di feed — desktop & HP */
    .tpk{ display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 16px 6px; margin:4px 0 16px; }
    .tpk[hidden]{ display:none; }
    .tpk-h{ margin-bottom:4px; }
    .tpk-h b{ font-size:15.5px; font-weight:700; color:var(--ink); }
    .tpk-it{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
    .tpk-h + .tpk-it{ border-top:0; }
    .tpk-t{ flex:1; min-width:0; font-size:14.5px; line-height:1.4; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .tpk-n{ flex:none; font-size:12.5px; color:var(--red); font-weight:600; white-space:nowrap; }
    .tpk-it:hover .tpk-t{ color:var(--red); }

    /* Empty state feed (channel Mengikuti: tamu / belum mengikuti) */
    .feed-empty{ text-align:center; padding:48px 16px 40px; color:var(--muted); font-size:14px; line-height:1.6; }
    .feed-empty .fe-ic{ font-size:38px; line-height:1; margin-bottom:10px; }
    .feed-empty b{ display:block; color:var(--ink); font-size:16px; margin-bottom:4px; }
    .feed-empty .fe-btn{ display:inline-block; margin-top:14px; background:var(--red); color:#fff; border:0; border-radius:20px; padding:10px 28px;
        font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; }

    /* ===== RESPONSIVE ===== */
    @media(max-width:1180px){
        :root{ --rail-w:264px; }
        .cards4{ grid-template-columns:repeat(2,1fr); }
    }
    @media(max-width:980px){
        .rail{ display:none; }
        .cols{ grid-template-columns:1fr; }
        .hero{ grid-template-columns:1fr; }
        .hero-side{ flex-direction:row; }
    }
    @media(max-width:760px){
        :root{ --mh:calc(56px + env(safe-area-inset-top)); --bnh:calc(56px + env(safe-area-inset-bottom)); }
        .sidebar,.topbar{ display:none; }
        .body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
        .cols{ padding:12px 14px 40px; }
        /* Header merah (= app Flutter): logo gambar 34, pill cari → /cari, tombol tulis bulat 38 */
        .m-topbar{ display:flex; position:sticky; top:0; z-index:45; align-items:center; gap:10px; background:var(--red);
            height:var(--mh); padding:calc(8px + env(safe-area-inset-top)) 12px 10px; border:0; }
        .m-logo{ flex:none; width:34px; height:34px; border-radius:7px; overflow:hidden; display:block; }
        .m-logo img{ width:34px; height:34px; object-fit:cover; }
        .m-search{ flex:1; min-width:0; height:38px; border-radius:19px; background:var(--card); display:flex; align-items:center; padding:0 6px 0 14px; }
        .m-search-link{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:100%; color:#9aa0aa; font-size:14px; }
        .m-search-link span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .m-search-link svg{ width:18px; height:18px; flex:none; stroke:#9aa0aa; fill:none; stroke-width:2; }
        .m-loc{ flex:none; display:flex; align-items:center; gap:3px; max-width:46%; height:28px; padding:0 4px 0 8px; margin-left:4px;
            border:0; border-left:1px solid var(--line); background:none; font:inherit; font-size:13px; font-weight:700; color:var(--ink); cursor:pointer; }
        .m-loc span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .m-loc .pin{ width:15px; height:15px; flex:none; }
        .m-loc .cav{ width:14px; height:14px; flex:none; stroke:#9aa0aa; fill:none; stroke-width:2.2; }
        .m-write{ flex:none; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
        .m-write svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round; }
        .m-ava{ width:36px; height:36px; min-width:36px; border-radius:50%; border:none; cursor:pointer; background:none; padding:0; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
        .m-ava svg{ width:36px; height:36px; border-radius:50%; display:block; }
        .m-ava.senci-avatar{ background:var(--red); }
        .m-ava.senci-avatar .ava-ini{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#fff; font-weight:700; font-size:15px; }
        .m-ava.senci-avatar img{ position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; }
        /* Strip tab channel: tinggi 44, label 16, aktif w600 merah + indikator 2.5px selebar teks; ☰ di kanan */
        .m-catwrap{ display:flex; align-items:stretch; position:sticky; top:var(--mh); z-index:44; height:44px; background:var(--card); border-bottom:1px solid var(--line); }
        .m-catstrip{ flex:1; min-width:0; display:flex; gap:20px; overflow-x:auto; padding:0 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
            /* Petunjuk visual "bisa digeser" — tanpa ini strip terasa seperti layout longgar/nge-bug, bukan tab kategori yang sengaja discroll (dilaporkan Robby: "masih bisa digeser sedikit"). */
            -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
            mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
            /* Tahan scroll-chaining: tanpa ini, geseran sampai ujung strip "bocor" jadi
               terasa seperti SELURUH HALAMAN ikut bergeser (rubber-band khas mobile Safari/
               Chrome) — inilah yang dilaporkan Robby sbg "browser masih bisa digeser". */
            overscroll-behavior-x:contain;
        }
        .m-catstrip::-webkit-scrollbar{ display:none; }
        .m-catstrip a{ position:relative; flex:none; display:flex; align-items:center; white-space:nowrap; font-size:16px; color:#4b5160; font-weight:400; }
        .m-catstrip a.on{ color:var(--red); font-weight:600; }
        .m-catstrip a.on::after{ content:""; position:absolute; left:0; right:0; bottom:5px; height:2.5px; border-radius:2px; background:var(--red); }
        .m-catmore{ flex:none; width:44px; border:0; background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); padding:0; }
        .m-catmore svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
        /* Header detail (← + judul) utk halaman akun: Atur feed, Jeni, Notifikasi, Pesan, Disimpan… */
        body.m-detail .m-topbar, body.m-detail .m-catwrap, body.m-saya .m-topbar, body.m-saya .m-catwrap{ display:none; }
        .m-dethead{ display:flex; align-items:center; gap:6px; position:sticky; top:0; z-index:45; background:var(--red); color:#fff;
            height:var(--mh); padding:env(safe-area-inset-top) 12px 0 4px; }
        .m-dethead b{ font-size:18px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .m-back{ width:44px; height:44px; border:0; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
        .m-back svg{ width:24px; height:24px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
        body.m-jeni .bottomnav,body.m-read .bottomnav{ display:none; }
        /* Sheet = bottom sheet HP (70dvh, radius atas 16) */
        .sx-card{ left:0; right:0; top:auto; bottom:0; transform:none; width:auto; max-width:none; height:70vh; height:70dvh; max-height:92dvh;
            border-radius:16px 16px 0 0; padding-bottom:env(safe-area-inset-bottom); animation:sxUp .22s ease-out; }
        .sx-grab{ display:block; width:38px; height:4px; border-radius:2px; background:var(--line); margin:8px auto 0; }
        .sx-head{ padding:10px 16px 10px; }
        @keyframes sxUp{ from{ transform:translateY(40%); opacity:.4; } to{ transform:none; opacity:1; } }
        .hero-main h1{ font-size:20px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
        .hero-main p{ display:none; } /* HP: ringkasan disembunyikan agar judul tak terpotong */
        .hero-main .body{ padding:16px; }
        .hero-side{ flex-direction:column; }
        .cards4{ grid-template-columns:1fr 1fr; gap:12px; }
        .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); }
        .card__thumb{ width:120px; height:82px; } .card__title{ font-size:16px; }
        /* Bottom nav = app Flutter: Beranda / Video / Movie / Saya; ikon 24, label 11, aktif merah, pasif #9AA0A6 */
        .bottomnav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--card); border-top:1px solid var(--line);
            height:var(--bnh); padding-bottom:env(safe-area-inset-bottom); }
        .bottomnav a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; line-height:1.2; color:#9AA0A6; -webkit-tap-highlight-color:transparent; }
        .bottomnav a.on{ color:var(--red); }
        .bottomnav svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; display:block; }
        .bottomnav svg.fill{ fill:currentColor; stroke:none; }
        .bottomnav svg .f{ fill:currentColor; stroke:none; }
        .bn-ic{ position:relative; display:block; font-style:normal; }
        .bn-badge{ position:absolute; top:-5px; left:15px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--red); color:#fff;
            font-size:10.5px; font-weight:700; line-height:17px; text-align:center; border:1.5px solid var(--card); box-sizing:content-box; }
        .bn-badge[hidden]{ display:none; }
    }

    /* ===== HP: kartu feed = app Flutter (PK5). Markup .mc/.mbig/.mgrid/.mblk hanya dirender di HP. ===== */
    :root{ --mdiv:#EDEDED; }
    @media(max-width:760px){
        .m-hide{ display:none!important; }
        .feed{ margin:0 -14px; }
        .mc,.mbig,.mgrid,.mblk{ display:block; background:var(--card); border-bottom:.5px solid var(--mdiv); -webkit-tap-highlight-color:transparent; }
        .mc{ padding:12px 4px 0 14px; }
        .mc-row{ display:flex; gap:10px; align-items:flex-start; padding-right:10px; }
        .mc-title{ flex:1; min-width:0; margin:0; font-size:16.5px; line-height:1.3; font-weight:600; color:var(--ink);
            display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
        .mc-thumb{ position:relative; flex:none; width:116px; height:78px; border-radius:6px; overflow:hidden; background:var(--soft); }
        .mc-thumb img,.mbig-img img,.mgc-img img,.mrow-img img{ width:100%; height:100%; object-fit:cover; display:block; }
        .mc-meta{ display:flex; align-items:center; height:40px; min-width:0; font-size:12px; color:var(--muted); }
        .mc-ava{ width:18px; height:18px; border-radius:50%; object-fit:cover; flex:none; margin-right:6px; background:var(--soft); }
        .mc-by{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .mc-like{ flex:none; display:inline-flex; align-items:center; gap:3px; margin-left:12px; white-space:nowrap; }
        .mc-like svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round; }
        .mc-cm{ flex:none; margin-left:12px; white-space:nowrap; }
        .mc-time{ flex:none; margin-left:auto; padding-left:8px; font-size:11px; white-space:nowrap; }
        .mc .x{ flex:none; width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--muted); cursor:pointer; }
        .mc .card__play,.mbig .card__play,.mgc .card__play{ font-size:26px; }
        .mbig{ padding:12px 14px 10px; }
        .mbig-img{ position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--soft); }
        .mbig-title{ margin:10px 0 6px; font-size:17px; line-height:1.3; font-weight:600; color:var(--ink);
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .mg-meta{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .mgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; padding:12px 14px; }
        .mgc{ display:block; min-width:0; }
        .mgc-img{ position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:var(--soft); }
        .mgc-title{ margin:7px 0 4px; font-size:14px; line-height:1.3; font-weight:600; color:var(--ink);
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        /* HARI INI & 🔥 Terpanas senci */
        .mblk{ padding:14px 14px 8px; }
        .tpk{ border:0; border-bottom:.5px solid var(--mdiv); border-radius:0; margin:0; padding:14px 14px 6px; }
        .tpk-h b{ font-size:16px; }
        .mhot:empty{ display:none; }
        .mblk-h{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
        .mblk-h b{ font-size:16px; font-weight:700; color:var(--ink); }
        .mtoday{ background:var(--red); color:#fff; font-size:12px; font-weight:700; padding:3px 8px; border-radius:4px; line-height:1.3; }
        .mblk-sub{ color:var(--muted); font-size:13px; }
        .mrow{ display:flex; align-items:flex-start; gap:10px; padding:6px 0; }
        .mrow-rk{ flex:none; width:22px; margin-right:-10px; padding-top:1px; font-size:17px; font-weight:800; font-style:italic; color:var(--muted); line-height:1.2; }
        .mrow-rk.top{ color:var(--red); }
        .mrow-img{ position:relative; flex:none; width:80px; height:60px; border-radius:6px; overflow:hidden; background:var(--soft); }
        .mrow-t{ flex:1; min-width:0; font-size:14px; line-height:1.35; color:var(--ink);
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .tr{ display:inline-block; margin-right:6px; padding:0 5px; border:.6px solid; border-radius:3px; font-size:10.5px; font-weight:700; line-height:16px; vertical-align:1px; }
        .tr-panas{ color:var(--red); background:rgba(232,68,59,.12); border-color:rgba(232,68,59,.6); }
        .tr-naik{ color:#F97316; background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.6); }
        .tr-baru{ color:#2F80ED; background:rgba(47,128,237,.12); border-color:rgba(47,128,237,.6); }
        /* Ujung list & skeleton HP */
        .feed-sentinel.done.end{ display:block; color:var(--muted); font-size:13px; }
        .feed-sentinel.end .spin{ display:none; }
        .feed-sentinel.end::after{ content:"Semua berita sudah ditampilkan"; }
        .feed-skel .sk-card{ gap:10px; padding:12px 14px; background:var(--card); border-bottom:.5px solid var(--mdiv); }
        .sk-th{ width:116px; height:78px; border-radius:6px; }
        /* Banner berita baru: bar penuh di bawah strip tab */
        .feed-banner{ left:0; right:0; top:calc(var(--mh) + 44px); z-index:43; height:34px; padding:0; border-radius:0; box-shadow:none;
            display:flex; align-items:center; justify-content:center; transform:translateY(-100%); }
        .feed-banner.show{ transform:none; }
        /* ✕ alasan = sheet bawah */
        .dk-bg{ background:rgba(0,0,0,.45); }
        .dk-card{ left:0!important; right:0; top:auto!important; bottom:0; width:auto; border:0; border-radius:16px 16px 0 0;
            padding:0 0 calc(8px + env(safe-area-inset-bottom)); animation:sxUp .22s ease-out; }
        .dk-grab{ display:block; width:40px; height:4px; border-radius:2px; background:var(--line); margin:10px auto 0; }
        .dk-h{ font-size:16px; color:var(--ink); padding:14px 18px 6px; }
        .dk-opt{ min-height:52px; padding:0 18px; gap:16px; font-size:15px; }
        .sx-toast{ bottom:calc(var(--bnh) + 16px); }
    }

    /* ============ DARK MODE ============ */
    :root[data-theme="dark"]{
        --red:#ff5a5b; --red-soft:#3a2325; --ink:#e7e9ee; --muted:#98a0ac; --line:#2a2e37;
        --bg:#0f1116; --card:#181b21; --soft:#1c2029; --mdiv:#2a2e37;
    }
    :root[data-theme="dark"] .dk-card{ box-shadow:0 12px 32px rgba(0,0,0,.55); }
    :root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:#3a3f4a; }
    :root[data-theme="dark"] .nav a{ color:#c2c7d0; }
    :root[data-theme="dark"] .nav a:hover{ background:#23272f; color:var(--ink); }
    :root[data-theme="dark"] .nav-label,
    :root[data-theme="dark"] .rc-head .more{ color:#7b818c; }
    :root[data-theme="dark"] .topbar{ background:rgba(15,17,22,.85); }
    :root[data-theme="dark"] .ic-btn{ color:#c2c7d0; }
    :root[data-theme="dark"] .search svg,
    :root[data-theme="dark"] .loc-in .cav,
    :root[data-theme="dark"] .user-chip .cav{ stroke:#7b818c; }
    :root[data-theme="dark"] .card__meta .src{ color:#aeb4be; }
    :root[data-theme="dark"] .hero-main,
    :root[data-theme="dark"] .hero-scard,
    :root[data-theme="dark"] .ucard .thumb,
    :root[data-theme="dark"] .card__thumb,
    :root[data-theme="dark"] .gcell__img,
    :root[data-theme="dark"] .bigcard__img{ background:#242832; }
    :root[data-theme="dark"] .noimg{ background:#232730 url('/news-fallback.webp') center/cover no-repeat!important; }
    :root[data-theme="dark"] .chip{ background:#20242c; color:#c2c7d0; }
    :root[data-theme="dark"] .weather{ background:linear-gradient(135deg,#1b2432,#221f33); }
    :root[data-theme="dark"] .rc-quote{ background:linear-gradient(135deg,#221f33,#2c2024); }
    :root[data-theme="dark"] .rc-quote .q{ color:#c2c7d0; }
    :root[data-theme="dark"] .hotlist .rank{ color:#565b66; }
    :root[data-theme="dark"] .m-catstrip a{ color:#aeb4be; }
    :root[data-theme="dark"] .m-catstrip a.on{ color:var(--red); }
    :root[data-theme="dark"] .sx-card{ box-shadow:0 18px 50px rgba(0,0,0,.6); }
    /* Halaman artikel (style di-push terpisah) */
    :root[data-theme="dark"] .article__body{ color:#c9ced7; }
    :root[data-theme="dark"] .rail-btn{ background:#23272f; color:#c2c7d0; }
    :root[data-theme="dark"] .rail-btn:hover,
    :root[data-theme="dark"] .rail-btn.on{ color:var(--red); }
    :root[data-theme="dark"] .src-follow{ background:transparent; }
    :root[data-theme="dark"] .comment-item__head{ color:#aeb4be; }
    :root[data-theme="dark"] .comment-form textarea{ background:#20242c; color:var(--ink); }
    :root[data-theme="dark"] .comment-login{ background:#20242c; color:#aeb4be; }