/* senci — file statis ber-versi (AppSupportAsset::url). Sumber dulu inline: article.blade (style). JANGAN taruh variabel Blade di sini. */
    .art{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 32px; margin-bottom:26px; }
    .article__title{ font-size:calc(28px * var(--fz,1)); line-height:1.32; font-weight:800; margin:0 0 14px; color:var(--ink); }
    .art-topic{ display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; margin:-4px 0 14px; padding:9px 12px; border-radius:10px;
        background:var(--red-soft); color:var(--red); font-size:13.5px; line-height:1.4; text-decoration:none; }
    .art-topic b{ font-weight:700; color:var(--ink); }
    .art-topic:hover b{ color:var(--red); }
    .article__meta{ color:var(--muted); font-size:13px; display:flex; gap:14px; align-items:center; flex-wrap:wrap;
        margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line); }
    .article__meta .src{ color:var(--ink); font-weight:600; }
    .article__meta .src-link{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:600; text-decoration:none; }
    .article__meta .src-link:hover{ color:var(--red); }
    .article__meta .src-ava{ width:24px; height:24px; border-radius:50%; overflow:hidden; flex:none; background:var(--red);
        color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; position:relative; }
    .article__meta .src-ava img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .src-follow{ border:1px solid var(--red); background:var(--card); color:var(--red); border-radius:16px;
        padding:4px 12px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; line-height:1; white-space:nowrap; }
    .src-follow.on{ background:var(--red-soft); }
    .article__cover{ width:100%; border-radius:12px; display:block; margin:4px 0 20px; }
    /* Foto isi artikel: rasio asli, foto vertikal tidak dipotong (dibatasi tinggi, rata tengah). */
    .article__photo{ display:block; max-width:100%; max-height:620px; width:auto; height:auto; margin:6px auto 20px; border-radius:12px; }
    .article__cover[data-user]{ width:auto; max-width:100%; max-height:620px; margin-left:auto; margin-right:auto; }
    /* Desktop: gambar kiri + deskripsi kanan (2 kolom) */
    @media(min-width:761px){
        .art-lead.has-media{ display:grid; grid-template-columns:1fr minmax(0,44%); gap:26px; align-items:start; }
        .art-lead.has-media .art-lead__media{ order:2; }
        .art-lead.has-media .art-lead__text{ order:1; }
        .art-lead.has-media .article__cover,
        .art-lead.has-media .video-embed{ margin:0; }
        .art-lead__text{ min-width:0; }
        .art-lead__text > :first-child{ margin-top:0; }
        .art-lead__text .article__body{ font-size:calc(16px * var(--fz,1)); line-height:1.8; }
    }
    .video-embed{ position:relative; width:100%; aspect-ratio:16/9; margin:4px 0 20px; border-radius:12px; overflow:hidden; background:#000; }
    .video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
    .ai-tag{ font-size:12px; color:var(--muted); margin-left:10px; white-space:nowrap; }
    .article__body{ font-size:calc(17px * var(--fz,1)); line-height:1.85; color:#2b2f38; }
    .article__body p{ margin:0 0 17px; }
    .article__src{ margin-top:8px; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
    .src-credit{ font-size:13px; color:var(--muted); width:100%; }
    .article__src a{ display:inline-block; background:var(--red); color:#fff; padding:10px 22px; border-radius:20px; font-size:14px; }

    /* Bar aksi horizontal */
    .art-actions{ display:flex; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
    .rail-btn{ display:flex; align-items:center; gap:7px; background:#f5f6fa; border:1px solid var(--line); cursor:pointer;
        color:#3b4150; font:inherit; font-size:13px; font-weight:600; text-decoration:none; padding:8px 16px; border-radius:20px; }
    .rail-btn svg{ width:18px; height:18px; fill:currentColor; display:block; }
    .rail-btn:hover{ color:var(--red); border-color:#f6c9c5; }
    .rail-btn.on{ color:var(--red); background:var(--red-soft); border-color:#f6c9c5; }

    /* Komentar */
    .comments{ margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
    .comments__head{ font-size:17px; margin:0 0 14px; font-weight:800; }
    .comment-form{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
    .comment-form textarea{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; outline:none; min-height:66px; resize:vertical; }
    .comment-form textarea:focus{ border-color:var(--red); }
    .comment-form button{ align-self:flex-end; background:var(--red); color:#fff; border:0; padding:8px 22px; border-radius:18px; font-size:14px; cursor:pointer; }
    .comment-form button:disabled{ opacity:.6; }
    .comment-item{ padding:12px 0; border-top:1px solid var(--line); }
    .comment-item__head{ font-size:13px; color:#555; margin-bottom:4px; }
    .comment-item__head b{ color:var(--ink); }
    .comment-item__time{ color:var(--muted); margin-left:8px; }
    .comment-item__body{ font-size:15px; line-height:1.5; }
    .comment-empty{ color:var(--muted); font-size:14px; padding:10px 0; }
    .cm-actions{ display:flex; gap:18px; margin-top:6px; }
    .cm-like,.cm-reply{ background:none; border:0; color:var(--muted); font:inherit; font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; padding:0; }
    .cm-like svg{ width:14px; height:14px; fill:currentColor; }
    .cm-like.on{ color:var(--red); }
    .cm-reply:hover,.cm-like:hover{ color:var(--red); }
    .cm-replies{ margin:8px 0 0 14px; padding-left:12px; border-left:2px solid var(--line); }
    .cm-replies .comment-item{ border-top:0; padding:8px 0; }
    .comment-item--reply{ border-top:0; }
    .reply-indicator{ display:none; }
    .reply-indicator.show{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:8px; }
    .reply-indicator button{ background:none; border:0; color:var(--red); cursor:pointer; font-size:17px; line-height:1; }
    .comment-login{ padding:16px; background:var(--soft); border-radius:10px; text-align:center; color:#555; font-size:14px; margin-bottom:14px; }
    .comment-login a,.comment-login .linkbtn{ color:var(--red); font-weight:600; cursor:pointer; }
    .comments:focus{ outline:0; }
    /* ===== Fitur baca (desktop & HP) ===== */
    .rail-btn .aa{ font-weight:800; font-size:14px; line-height:18px; letter-spacing:-.3px; }
    .article__cover:not(.noz),.article__photo{ cursor:zoom-in; }
    /* Komentar teratas (3) inline di bawah isi */
    .top-cm{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
    .top-cm[hidden]{ display:none; }
    .top-cm__h{ font-size:15px; font-weight:800; margin-bottom:6px; }
    .top-cm__it{ display:flex; gap:10px; padding:10px 0; }
    .top-cm__ava{ position:relative; width:30px; height:30px; flex:none; border-radius:50%; overflow:hidden; background:var(--red); color:#fff;
        display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
    .top-cm__ava img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .top-cm__b{ flex:1; min-width:0; }
    .top-cm__n{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); }
    .top-cm__lk{ margin-left:auto; display:inline-flex; align-items:center; gap:3px; font-weight:400; font-size:12.5px; }
    .top-cm__lk svg{ width:13px; height:13px; fill:currentColor; }
    .top-cm__lk.on{ color:var(--red); }
    .top-cm__t{ margin-top:3px; font-size:15px; line-height:1.5; color:var(--ink); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .top-cm__all{ display:block; width:100%; margin-top:6px; padding:10px; border:0; border-radius:10px; background:var(--soft); color:var(--ink);
        font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
    .top-cm__all:hover{ color:var(--red); }
    /* Berita terkait */
    .rel{ margin-bottom:26px; }
    .rel[hidden]{ display:none; }
    /* Pilih ukuran huruf */
    .fz-pop{ position:fixed; z-index:240; display:flex; gap:6px; padding:8px; background:var(--card); border:1px solid var(--line); border-radius:12px;
        box-shadow:0 12px 32px rgba(0,0,0,.16); }
    .fz-pop[hidden]{ display:none; }
    .fz-pop button{ min-width:46px; height:38px; padding:0 8px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink);
        font:inherit; font-weight:700; cursor:pointer; }
    .fz-pop button.on{ border-color:var(--red); color:var(--red); background:var(--red-soft); }
    /* Penampil foto layar penuh */
    .pv{ position:fixed; inset:0; z-index:300; background:#000; }
    .pv[hidden]{ display:none; }
    .pv-track{ position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none;
        overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
    .pv-track::-webkit-scrollbar{ display:none; }
    .pv-slide{ flex:none; width:100%; height:100%; scroll-snap-align:center; scroll-snap-stop:always; display:flex; align-items:center; justify-content:center; }
    .pv-slide img{ max-width:100%; max-height:100%; object-fit:contain; }
    .pv-x,.pv-nav{ position:absolute; z-index:2; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff;
        font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .pv-x{ top:calc(10px + env(safe-area-inset-top)); right:10px; }
    .pv-nav{ top:50%; margin-top:-22px; }
    .pv-nav.prev{ left:14px; } .pv-nav.next{ right:14px; }
    .pv-nav[hidden]{ display:none; }
    .pv-n{ position:absolute; z-index:2; top:calc(22px + env(safe-area-inset-top)); left:0; right:0; text-align:center; color:#fff; font-size:14px; pointer-events:none; }
    /* Elemen khusus HP (bar aksi, sheet komentar) disembunyikan di desktop */
    .m-actbar,.m-cbg,.m-cgrab,.m-cclose{ display:none; }
    @media(max-width:760px){
        /* 4 tombol (Suka/Komentar/Simpan/Bagikan) teks-lengkap dlm 1 baris TANPA wrap
           bikin total lebar > 375px → halaman baca kena overflow horizontal (bisa
           digeser kanan-kiri, dilaporkan Robby). Bagi rata lebar biar pasti muat. */
        .art-actions{ gap:6px; }
        .rail-btn{ flex:1 1 0; min-width:0; min-height:40px; justify-content:center; padding:8px 6px; font-size:12px; gap:4px; }
        .rail-btn svg{ width:16px; height:16px; flex:none; }
        /* PK6 (= app Flutter, spec §5): media di atas full-bleed, judul 22 w700, byline merah, isi 16/1.7 */
        body.m-read .cols{ padding:0 0 24px; }
        body.m-read .feed{ margin:0; }
        .art{ display:flex; flex-direction:column; padding:0 0 4px; margin:0 0 8px; border:0; border-radius:0; }
        .art-lead{ display:contents; }
        .art-lead__media{ order:-1; }
        .article__cover,.article__cover[data-user]{ width:100%; max-width:none; height:210px; max-height:none; object-fit:cover; border-radius:0; margin:0; }
        .video-embed{ border-radius:0; margin:0; }
        .article__title{ font-size:calc(22px * var(--fz,1)); font-weight:700; line-height:1.35; margin:14px 16px 10px; }
        .article__meta{ margin:0 16px 14px; padding-bottom:12px; gap:10px; font-size:12.5px; }
        .art-topic{ margin:0 16px 12px; font-size:13px; }
        .article__meta .src,.article__meta .src-link{ color:var(--red); }
        .art-lead__text{ padding:0 16px; }
        .article__body{ font-size:calc(16px * var(--fz,1)); line-height:1.7; }
        .article__photo{ border-radius:8px; }
        .art-actions{ display:none; }
        .top-cm{ margin:16px 16px 0; }
        body.m-read .sec-head{ margin:0; padding:14px 16px 4px; background:var(--card); }
        body.m-read .sec-head h2{ font-size:17px; font-weight:700; }
        .rel{ margin-bottom:8px; }
        /* Aa di header detail */
        .m-aa{ margin-left:auto; width:44px; height:44px; border:0; background:none; color:#fff; font:inherit; font-size:17px; font-weight:700; cursor:pointer; padding:0; }
        /* Bar aksi FIXED bawah (54 + safe-area) */
        .m-actbar{ display:flex; align-items:center; gap:2px; position:fixed; left:0; right:0; bottom:0; z-index:50; height:calc(54px + env(safe-area-inset-bottom));
            padding:0 4px env(safe-area-inset-bottom) 12px; background:var(--card); border-top:1px solid var(--line); }
        .mab-pill{ flex:1; min-width:0; height:36px; margin-right:4px; padding:0 14px; border:0; border-radius:18px; background:var(--soft); color:var(--muted);
            font:inherit; font-size:14px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
        .mab-btn{ flex:none; min-width:42px; height:44px; padding:0 5px; border:0; background:none; color:var(--ink); display:flex; align-items:center; justify-content:center;
            gap:3px; font:inherit; font-size:12px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
        .mab-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
        .mab-btn.on{ color:var(--red); }
        .mab-btn.on svg{ fill:currentColor; }
        .mab-btn span:empty{ display:none; }
        /* Komentar = sheet bawah 75dvh (logika JS komentar tetap) */
        .comments{ position:fixed; left:0; right:0; bottom:0; z-index:220; height:75vh; height:75dvh; margin:0; padding:0 16px calc(16px + env(safe-area-inset-bottom));
            border:0; border-radius:16px 16px 0 0; background:var(--card); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
            transform:translateY(105%); visibility:hidden; transition:transform .25s ease, visibility 0s linear .25s; }
        .comments.show{ transform:none; visibility:visible; transition:transform .25s ease, visibility 0s; }
        .m-cgrab{ display:block; width:38px; height:4px; border-radius:2px; background:var(--line); margin:8px auto 0; }
        .comments__head{ position:sticky; top:0; z-index:1; display:flex; align-items:center; margin:0 -16px 10px; padding:10px 8px 10px 16px; background:var(--card);
            font-size:16px; border-bottom:1px solid var(--line); }
        .m-cclose{ display:flex; align-items:center; justify-content:center; margin-left:auto; width:40px; height:40px; border:0; background:none; color:var(--muted);
            font-size:26px; line-height:1; cursor:pointer; padding:0; }
        .m-cbg{ display:block; position:fixed; inset:0; z-index:219; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s; }
        .m-cbg.show{ opacity:1; pointer-events:auto; }
        /* Target sentuh ≥40px tanpa menggeser tata letak (margin negatif menyerap padding) */
        .cm-actions{ gap:6px; }
        .cm-like,.cm-reply{ min-height:40px; min-width:40px; padding:0 8px; margin:-4px 0 -4px -8px; justify-content:center; }
        .cm-reply{ margin-left:0; }
        .pv-nav{ display:none; }
    }