/* E-Paper Kota Tangerang: gaya bersama. Dua tema otomatis (terang/gelap mengikuti perangkat). */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#F6F7F9; --surface:#FFFFFF; --ink:#0E1116; --muted:#586070; --line:#DDE1E7; --chip:#ECEFF3;
  --accent:#0F6AE8; --accent-ink:#FFFFFF; --link:#0F6AE8; --focus:#0F6AE8;
  --stage:#E9ECF0; --stage-ink:#0E1116; --bar:#FFFFFF; --bar-line:#DDE1E7;
  --shadow:0 8px 30px rgba(14,17,22,.10); --cover-shadow:0 30px 60px rgba(14,17,22,.22),0 2px 6px rgba(14,17,22,.12);
  --danger:#B3261E; --danger-bg:#FDECEA; --ok:#1B7F4B; --info-bg:#EAF2FE;
  --logo-live-filter:brightness(0);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]){
    --bg:#0A0C10; --surface:#141820; --ink:#F3F5F8; --muted:#A0A9B8; --line:#262C36; --chip:#1B2230;
    --accent:#2F7BF0; --accent-ink:#FFFFFF; --link:#5C9DFF; --focus:#5C9DFF;
    --stage:#0A0C10; --stage-ink:#F3F5F8; --bar:#141820; --bar-line:#262C36;
    --shadow:0 8px 30px rgba(0,0,0,.5); --cover-shadow:0 30px 60px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
    --danger:#FF8A80; --danger-bg:#2A1A1C; --ok:#5FD39A; --info-bg:#1B2230;
    --logo-live-filter:none; color-scheme:dark;
  }
}
:root[data-mode="dark"]{
    --bg:#0A0C10; --surface:#141820; --ink:#F3F5F8; --muted:#A0A9B8; --line:#262C36; --chip:#1B2230;
    --accent:#2F7BF0; --accent-ink:#FFFFFF; --link:#5C9DFF; --focus:#5C9DFF;
    --stage:#0A0C10; --stage-ink:#F3F5F8; --bar:#141820; --bar-line:#262C36;
    --shadow:0 8px 30px rgba(0,0,0,.5); --cover-shadow:0 30px 60px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
    --danger:#FF8A80; --danger-bg:#2A1A1C; --ok:#5FD39A; --info-bg:#1B2230;
    --logo-live-filter:none; color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
[hidden]{display:none!important}

/* ---------- komponen umum ---------- */
.site-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:24px 48px}
.brand{display:flex;align-items:baseline;gap:8px;font-size:17px;letter-spacing:-.01em}
.brand b{font-weight:800}.brand span{font-weight:500;color:var(--muted)}
.pill-group{display:flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:999px}
.pill-group a,.pill-group button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-weight:600;font-size:14px}
.pill-group [aria-pressed="true"],.pill-group [aria-current="page"]{background:var(--ink);color:var(--bg)}
.hdr-tools{display:flex;align-items:center;gap:10px}
.mode-btn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.mode-btn:hover{background:var(--chip)}
.mode-btn .i-sun{display:none}
:root[data-mode="dark"] .mode-btn .i-sun{display:block}
:root[data-mode="dark"] .mode-btn .i-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-mode="light"]) .mode-btn .i-sun{display:block}:root:not([data-mode="light"]) .mode-btn .i-moon{display:none}}
.lang button{min-width:44px;min-height:40px;padding:0 14px;font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{min-height:44px;padding:0 20px;font-size:14px;border-radius:12px}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--chip);color:var(--muted)}
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:48px 24px;color:var(--ink)}
.state h2,.state h1{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.state p{margin:0;max-width:380px;color:var(--muted)}
.state .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.state svg{color:var(--muted)}
.logo-live{filter:var(--logo-live-filter)}

/* ---------- beranda ---------- */
.home{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;background:var(--bg)}
.corridor{position:absolute;inset:0;overflow:hidden;container-type:inline-size;pointer-events:none}
.corridor .persp{position:absolute;inset:0;perspective:30cqw;perspective-origin:50% 55%}
.corridor .scene{position:absolute;inset:0;transform-style:preserve-3d}
@keyframes fr{0%{transform:translate3d(-11cqw,0,-258.5cqw) rotateY(-6deg)}7%{transform:translate3d(.9cqw,0,-204.9cqw) rotateY(-7.6deg)}14%{transform:translate3d(10.9cqw,0,-161.4cqw) rotateY(-9.1deg)}21%{transform:translate3d(19.2cqw,0,-125.8cqw) rotateY(-10.7deg)}29%{transform:translate3d(25.9cqw,0,-96.9cqw) rotateY(-12.3deg)}36%{transform:translate3d(31.2cqw,0,-73.4cqw) rotateY(-13.9deg)}43%{transform:translate3d(35.3cqw,0,-54.2cqw) rotateY(-15.4deg)}50%{transform:translate3d(38.4cqw,0,-38.6cqw) rotateY(-17deg)}57%{transform:translate3d(40.6cqw,0,-25.9cqw) rotateY(-18.6deg)}64%{transform:translate3d(42.2cqw,0,-15.5cqw) rotateY(-20.1deg)}71%{transform:translate3d(43.1cqw,0,-7.1cqw) rotateY(-21.7deg)}79%{transform:translate3d(43.7cqw,0,-.2cqw) rotateY(-23.3deg)}86%{transform:translate3d(43.9cqw,0,5.4cqw) rotateY(-24.9deg)}93%{transform:translate3d(44cqw,0,10cqw) rotateY(-26.4deg)}100%{transform:translate3d(44cqw,0,13.7cqw) rotateY(-28deg)}}
@keyframes fl{0%{transform:translate3d(11cqw,0,-258.5cqw) rotateY(6deg)}7%{transform:translate3d(-.9cqw,0,-204.9cqw) rotateY(7.6deg)}14%{transform:translate3d(-10.9cqw,0,-161.4cqw) rotateY(9.1deg)}21%{transform:translate3d(-19.2cqw,0,-125.8cqw) rotateY(10.7deg)}29%{transform:translate3d(-25.9cqw,0,-96.9cqw) rotateY(12.3deg)}36%{transform:translate3d(-31.2cqw,0,-73.4cqw) rotateY(13.9deg)}43%{transform:translate3d(-35.3cqw,0,-54.2cqw) rotateY(15.4deg)}50%{transform:translate3d(-38.4cqw,0,-38.6cqw) rotateY(17deg)}57%{transform:translate3d(-40.6cqw,0,-25.9cqw) rotateY(18.6deg)}64%{transform:translate3d(-42.2cqw,0,-15.5cqw) rotateY(20.1deg)}71%{transform:translate3d(-43.1cqw,0,-7.1cqw) rotateY(21.7deg)}79%{transform:translate3d(-43.7cqw,0,-.2cqw) rotateY(23.3deg)}86%{transform:translate3d(-43.9cqw,0,5.4cqw) rotateY(24.9deg)}93%{transform:translate3d(-44cqw,0,10cqw) rotateY(26.4deg)}100%{transform:translate3d(-44cqw,0,13.7cqw) rotateY(28deg)}}
.corridor .c{position:absolute;left:50%;top:55%;width:18cqw;height:25cqw;margin-left:-9cqw;margin-top:-12.5cqw;border-radius:.4cqw;overflow:hidden;backface-visibility:hidden;background:var(--surface);box-shadow:0 .6cqw 2cqw rgba(14,17,22,.22);animation-timing-function:linear;animation-iteration-count:infinite}
.corridor .c img{display:block;width:100%;height:100%;object-fit:cover}
.corridor .c.fr{animation-name:fr}.corridor .c.fl{animation-name:fl}
.home .site-header{position:relative;z-index:3}
.home .hero{position:absolute;left:0;right:0;top:18vh;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px;padding:0 48px;text-align:center}
.home h1{margin:0;max-width:820px;font-size:clamp(40px,5.2vw,68px);line-height:1.02;font-weight:800;letter-spacing:-.04em;text-wrap:balance}
.home .hero p{margin:0;font-size:19px;font-weight:500;color:var(--muted)}
.home .ctas{position:absolute;left:0;right:0;bottom:56px;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;gap:16px;padding:0 48px}
.cta{display:flex;align-items:center;gap:18px;min-width:300px;padding:14px 22px 14px 20px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.cta img{height:38px;width:auto}
.cta .tx{display:flex;flex-direction:column;gap:2px;flex:1}
.cta .tx b{font-size:16px;letter-spacing:-.01em}.cta .tx span{font-size:13px;font-weight:500;color:var(--muted)}
.mobile-home{display:none}
@media (prefers-reduced-motion:reduce){.corridor .c{animation-play-state:paused!important}}

/* HP / layar sempit: tanpa animasi, sampul digeser */
@media (max-width:760px),(max-aspect-ratio:3/4){
  .corridor,.home .hero,.home .ctas{display:none}
  .home{min-height:0;overflow:visible}
  .mobile-home{display:block;padding:0 0 40px}
  .site-header{padding:16px 16px}
  .mh-head{padding:8px 16px 16px;display:flex;flex-direction:column;gap:6px}
  .mh-head h1{margin:0;font-size:32px;line-height:1.05;font-weight:800;letter-spacing:-.035em}
  .mh-head p{margin:0;color:var(--muted);font-size:15px;font-weight:500}
  .mh-tabs{display:flex;padding:0 16px 16px}
  .mh-tabs .pill-group{width:100%}.mh-tabs .pill-group button{flex:1}
  .mh-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 16px 24px;scroll-padding:0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mh-track::-webkit-scrollbar{display:none}
  .mh-card{flex:0 0 78%;max-width:340px;scroll-snap-align:center;display:flex;flex-direction:column;gap:14px}
  .mh-card .cv{display:block;border-radius:6px;box-shadow:var(--cover-shadow);overflow:hidden;aspect-ratio:3/4;background:var(--chip)}
  .mh-card .cv img{width:100%;height:100%;object-fit:cover;display:block}
  .mh-card .meta{display:flex;flex-direction:column;gap:2px}
  .mh-card .meta b{font-size:20px;letter-spacing:-.02em}.mh-card .meta span{color:var(--muted);font-size:14px;font-weight:500}
  .mh-card .btn{min-height:48px}
  .mh-dots{display:flex;justify-content:center;gap:6px}
  .mh-dots i{width:6px;height:6px;border-radius:99px;background:var(--line)}.mh-dots i.on{background:var(--ink);width:18px}
}

/* ---------- beranda: tema "coverflow" (sampul digeser manual) ---------- */
.cf-home{display:none}
.home:not([data-theme]) .hero,.home:not([data-theme]) .ctas{visibility:hidden}
.home[data-theme="coverflow"] .corridor,.home[data-theme="coverflow"] .hero,.home[data-theme="coverflow"] .ctas,.home[data-theme="coverflow"] .mobile-home{display:none}
.home[data-theme="coverflow"]{min-height:0;overflow:visible}
.home[data-theme="coverflow"] .cf-home{display:block;padding:0 0 56px}
.home .cf-head{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 24px 14px;text-align:center}
.home .cf-head h1{font-size:clamp(28px,3.6vw,46px)}
.home .cf-head p{margin:0;font-size:clamp(15px,1.5vw,18px);font-weight:500;color:var(--muted)}
.cf-tabs{display:flex;justify-content:center;padding:0 16px 4px}
.hdr-arc{height:46px;margin-right:0;white-space:nowrap;order:-1}
.hdr-arc .arc-s{display:none}
@media (max-width:420px){.hdr-arc{padding:0 12px}.hdr-arc .arc-l{display:none}.hdr-arc .arc-s{display:inline}}
.cf{--cf-card:clamp(150px,min(22vw,27vh),270px);position:relative;width:100%}
.cf-frame{overflow:hidden;padding:30px 0 54px;cursor:grab;outline:none;touch-action:pan-y;perspective:calc(var(--cf-card) * 3)}
.cf-frame:active{cursor:grabbing}
.cf-frame:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.cf-stage{position:relative;height:calc(var(--cf-card) * 4 / 3);transform-style:preserve-3d;user-select:none;-webkit-user-select:none}
.cf-card{position:absolute;left:50%;top:0;width:var(--cf-card);aspect-ratio:3/4;overflow:hidden;border-radius:8px;background:var(--chip);box-shadow:0 18px 38px rgba(14,17,22,.24),0 2px 6px rgba(14,17,22,.12);will-change:transform}
.cf-card img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;pointer-events:none}
.cf-stage .state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.cf-nav{position:absolute;top:50%;z-index:200;display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-top:-23px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);opacity:.92}
.cf-nav:hover{opacity:1}.cf-nav.prev{left:max(12px,2vw)}.cf-nav.next{right:max(12px,2vw)}.cf-nav[hidden]{display:none}
.cf-cap{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 24px;margin-top:-8px;text-align:center;min-height:120px}
.cf-cap>*{animation:cfin .32s ease both}
.cf-cap b{font-size:clamp(18px,1.8vw,22px);letter-spacing:-.02em}
.cf-cap span{color:var(--muted);font-size:15px;font-weight:500}
.cf-cap .btn{margin-top:14px;min-height:48px}

@keyframes cfin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:760px){.cf{--cf-card:clamp(140px,min(52vw,34vh),240px)}.cf-nav{display:none}.cf-frame{padding:28px 0 40px}.home .cf-head{padding:4px 16px 16px}}

/* ---------- katalog ---------- */
.catalog main{max-width:1200px;margin:0 auto;padding:24px 48px 96px}
.feature{display:flex;flex-wrap:wrap;align-items:center;gap:72px;padding:24px 0 80px}
.feature .cv{display:block;width:400px;max-width:100%;flex:none}
.feature .cv img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:var(--cover-shadow);background:var(--chip);aspect-ratio:3/4;object-fit:cover}
.feature .info{display:flex;flex-direction:column;align-items:flex-start;gap:20px;flex:1 1 320px;min-width:0}
.feature .info img.logo{height:60px;width:auto}
.feature h1{margin:0;font-size:clamp(44px,6vw,68px);line-height:1;font-weight:800;letter-spacing:-.04em}
.feature .sub{margin:0;font-size:20px;font-weight:500;color:var(--muted)}
.feature .desc{margin:0;font-size:15px;color:var(--muted);max-width:480px}
.feature .acts{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}
.archive-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-bottom:28px}
.archive-head h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.03em}
.filters{display:flex;flex-wrap:wrap;gap:12px}
.filters label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--muted)}
.filters select{min-height:44px;padding:0 36px 0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-weight:600;font-size:14px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23788' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:32px 24px}
.tile{display:flex;flex-direction:column;gap:12px}
.tile .pic{position:relative;display:block}
.tile img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:6px;background:var(--chip);box-shadow:0 10px 24px rgba(14,17,22,.14),0 1px 3px rgba(14,17,22,.10)}
.tile .pic .badge{position:absolute;left:8px;top:8px;background:rgba(14,17,22,.78);color:#fff}
.tile .t{display:flex;flex-direction:column;gap:2px}.tile .t b{font-size:15px}.tile .t span{font-size:13px;font-weight:500;color:var(--muted)}
.chat-fab{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:15px;font-weight:700;box-shadow:0 12px 32px rgba(14,17,22,.3)}
.note{margin:28px 0 0;font-size:13px;color:var(--muted)}
@media (max-width:760px){
  .catalog main{padding:8px 16px 96px}.feature{gap:28px;padding:8px 0 48px}.feature .cv{width:100%}
  .feature h1{font-size:44px}.feature .acts .btn{flex:1}.archive-head h2{font-size:24px}
  .grid{grid-template-columns:repeat(2,1fr);gap:24px 16px}
}

/* ---------- pembaca ---------- */
body.reader{height:100vh;height:100dvh;overflow:hidden;background:var(--stage);color:var(--stage-ink)}
.reader-app{position:relative;display:flex;flex-direction:column;height:100%;background:var(--stage)}
.r-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:60px;padding:6px 12px;background:var(--stage);z-index:5}
.r-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.r-title img{height:24px;width:auto;flex:none}
.r-title .nm{display:flex;flex-direction:column;min-width:0}
.r-title .nm b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-title .nm span{font-size:12px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-tools{display:flex;align-items:center;gap:2px;flex:none}
.ib{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--stage-ink)}
.ib:hover{background:var(--chip)}
.ib[aria-pressed="true"],.ib[aria-expanded="true"]{border-color:var(--focus);background:var(--chip)}
.ib[disabled]{opacity:.35;cursor:default}
.r-tabs{display:flex;gap:6px;padding:0 12px 6px}
.r-tabs button{min-height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--chip);color:var(--muted);font-weight:600;font-size:13px}
.r-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.r-banner{display:flex;align-items:center;gap:12px;margin:0 16px 8px;padding:10px 12px 10px 14px;border-radius:12px;background:var(--info-bg);border:1px solid var(--line);font-size:13px;font-weight:600}
.r-banner span.tx{flex:1}
.r-main{position:relative;flex:1;min-height:0;display:flex;overflow:hidden}
.r-stage{position:relative;flex:1;min-width:0;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.r-view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:2400px}
.r-book{position:relative;display:flex;align-items:stretch;transform-origin:50% 50%}
.r-pg{position:relative;display:block;background:var(--surface);overflow:hidden}
.r-pg img{display:block;width:100%;height:100%;object-fit:fill;-webkit-user-drag:none}
/* Punggung: pada ukuran layar tertentu sambungan dua halaman jatuh di setengah piksel dan latar terang menyembul sebagai garis. Halaman kiri dilebihkan 1px di bawah halaman kanan. */
.r-book:not(.single-pg) .r-pg:first-child{overflow:visible}
.r-book:not(.single-pg) .r-pg:first-child img{width:calc(100% + 1px);max-width:none}
.r-pg .ph{position:absolute;inset:0;background:var(--chip)}
.r-pg .lk{position:absolute;inset:0;pointer-events:none}
.r-pg .lk-a{position:absolute;display:block;pointer-events:auto;cursor:pointer;border-radius:4px;outline:2px solid transparent;outline-offset:1px;transition:background .15s,outline-color .15s}
.r-pg .lk-a:hover,.r-pg .lk-a:focus-visible{background:rgba(255,200,0,.22);outline-color:rgba(220,150,0,.85)}
.r-pg .lk-a::after{content:"";position:absolute;inset:calc(-16px / var(--z,1))}
.r-pg .lk-a.qr{background:rgba(255,200,0,.14);outline:1.5px dashed rgba(220,150,0,.7)}
.r-pg .lk-a.qr:hover,.r-pg .lk-a.qr:focus-visible{background:rgba(255,200,0,.32);outline:2px solid rgba(220,150,0,.95)}
.r-pg .hl{position:absolute;inset:0;pointer-events:none}
.r-pg .hl i{position:absolute;background:rgba(255,200,0,.45);mix-blend-mode:multiply;border-radius:2px;outline:1px solid rgba(220,150,0,.6)}
.r-book.shadowed{filter:drop-shadow(0 24px 48px rgba(0,0,0,.35))}
.r-book .spine{position:absolute;left:50%;top:0;bottom:0;width:30px;margin-left:-15px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.14) 50%,transparent);pointer-events:none;z-index:3}
.r-book.single-pg .spine{display:none}
.leaf{position:absolute;top:0;bottom:0;transform-style:preserve-3d;z-index:4}
.leaf .face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:var(--surface)}
.leaf .face img{display:block;width:100%;height:100%}
.leaf .back{transform:rotateY(180deg)}
.r-nav{position:absolute;top:50%;z-index:4;margin-top:-26px;width:52px;height:52px;border-radius:999px;border:1px solid var(--line);background:var(--bar);color:var(--stage-ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.r-nav.l{left:20px}.r-nav.r{right:20px}.r-nav[disabled]{opacity:.35;cursor:default}
.r-bottom{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 16px 12px;background:var(--stage);z-index:5}
.r-count{display:flex;align-items:center;gap:12px;font-size:14px}
.r-count b{font-weight:700}.r-count span{color:var(--muted);font-weight:500}
.r-slider{display:flex;align-items:center;gap:12px;width:min(640px,92vw)}
.r-slider input[type=range]{flex:1;height:44px;accent-color:var(--accent)}
.r-zoomctl{display:flex;align-items:center;gap:2px;position:absolute;right:16px;bottom:12px;z-index:4;padding:4px;border-radius:14px;background:var(--bar);border:1px solid var(--bar-line);box-shadow:var(--shadow)}
.r-zoomctl .zv{min-width:48px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.r-hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:12px;color:var(--muted);pointer-events:none}
.r-loading{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--stage)}
.r-loading .pair{display:flex;gap:6px}
.r-loading .sk{width:min(26vw,260px);aspect-ratio:3/4;border-radius:4px;background:linear-gradient(90deg,var(--chip),var(--surface),var(--chip));background-size:200% 100%;animation:sk 1.4s linear infinite;overflow:hidden}
.r-loading .sk img{width:100%;height:100%;object-fit:cover;filter:blur(14px);opacity:.55;transform:scale(1.05)}
@keyframes sk{to{background-position:-200% 0}}
.r-loading .bar{width:240px;height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.r-loading .bar i{display:block;height:100%;width:40%;background:var(--link);border-radius:99px;animation:ld 1.2s ease-in-out infinite}
@keyframes ld{0%{margin-left:-40%}100%{margin-left:100%}}
.r-loading p{margin:0;font-size:14px;font-weight:700}
.pg-fail{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;background:var(--chip);font-size:14px;font-weight:700}
.pg-fail small{font-size:12px;color:var(--muted);font-weight:500}

/* panel samping */
.r-main.with-drawer .r-stage{margin-right:min(380px,100%)}
.r-main.with-drawer .r-nav.r{right:calc(min(380px,100%) + 20px)}
.r-main.with-drawer .r-zoomctl{right:calc(min(380px,100%) + 16px)}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(380px,100%);z-index:8;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.18);transform:translateX(0)}
.drawer>header{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 18px;border-bottom:1px solid var(--line)}
.drawer>header h2{margin:0;font-size:16px;font-weight:800}
.drawer .body{flex:1;min-height:0;overflow:auto;padding:14px 18px}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px 12px}
.th{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border:2px solid transparent;border-radius:10px;background:transparent;text-align:center}
.th .imgs{display:flex}.th img{display:block;width:100%;height:auto;max-width:80px;background:var(--chip)}
.th .imgs.dbl img{max-width:54px}
.th span{font-size:12px;font-weight:600;color:var(--muted)}
.th[aria-current="true"]{border-color:var(--focus)}.th[aria-current="true"] span{color:var(--ink);font-weight:700}
.search-box{display:flex;gap:8px;padding:0 0 12px}
.search-box input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.hit{display:flex;flex-direction:column;gap:4px;width:100%;padding:12px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg);text-align:left}
.hit b{font-size:13px}.hit span{font-size:13px;color:var(--muted);line-height:1.45}.hit mark{background:rgba(255,200,0,.5);color:inherit;border-radius:2px}
.hit:hover{border-color:var(--focus)}
.muted{color:var(--muted);font-size:13px}

/* dialog bagikan */
.scrim{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:16px}
.dialog{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border-radius:20px;background:var(--surface);color:var(--ink);border:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.dialog>header{display:flex;align-items:center;justify-content:space-between}
.dialog h2{margin:0;font-size:18px;font-weight:800}
.seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--bg)}
.seg button{flex:1;min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:700;font-size:13px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.sh-card{display:flex;gap:14px;padding:12px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.sh-card img{height:84px;width:auto;border-radius:4px}
.sh-card .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.sh-card b{font-size:14px}.sh-card span{font-size:12px;color:var(--muted)}.sh-card .u{color:var(--link);overflow-wrap:anywhere;font-weight:600}
.sh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px}
.sh-grid a,.sh-grid button{display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:transparent;font-size:12px;font-weight:600;color:var(--ink);text-align:center}
.sh-grid .c{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;color:#fff;font-size:20px;font-weight:800}
.sh-note{padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.5}
.copyrow{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:12px;border:1px solid var(--line)}
.copyrow span{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copyrow button{min-height:40px;padding:0 16px;border:0;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px}
@media (max-width:760px){
  .scrim{align-items:flex-end;padding:0}.dialog{border-radius:20px 20px 0 0;width:100%}
  .sh-grid{grid-template-columns:repeat(4,1fr)}
}

/* chat */
.chat{display:flex;flex-direction:column;height:100%;min-width:0}
.chat .namebar{padding:0 18px 8px}
.chat .namebar input{width:100%;min-height:38px;font-size:13px}
.chat .msgs{flex:1;min-height:0;min-width:0;overflow:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:12px;padding:16px 18px}
.bub{max-width:92%;min-width:0;overflow-wrap:anywhere;padding:10px 14px;font-size:14px;line-height:1.55;font-weight:500;border:1px solid var(--line);background:var(--chip);border-radius:16px 16px 16px 4px;align-self:flex-start}
.bub.u{align-self:flex-end;background:#2A5FD0;color:#fff;border-color:transparent;border-radius:16px 16px 4px 16px}
.bub.err{background:var(--danger-bg)}
.bub .rich .maprow{display:block;margin:6px 0}.bub .rich a.maplink{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px;text-decoration:none}.bub .rich p{margin:0 0 8px}.bub .rich p:last-child{margin-bottom:0}
.bub .rich ul,.bub .rich ol{margin:0 0 8px;padding-left:20px}.bub .rich li{margin:0 0 4px}.bub .rich>:last-child{margin-bottom:0}
.refs{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px}
.refs button,.refs a{min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--link);font-weight:700;font-size:12px;display:inline-flex;align-items:center}
.mail{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.mail div{display:flex;flex-direction:column;min-width:0}.mail small{font-size:11px;font-weight:600;color:var(--muted)}.mail b{font-size:14px;overflow-wrap:anywhere;user-select:all}
.mail button{flex:none;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--link);font-weight:700;font-size:13px}
.rate{display:flex;align-items:center;gap:8px;padding-top:8px;font-size:12px;font-weight:600;color:var(--muted)}
.rate button{min-width:44px;min-height:36px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.rate button[aria-pressed="true"]{border-color:var(--focus);background:var(--chip)}
.chat .foot{padding:12px 18px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.chat .chips{display:flex;flex-wrap:wrap;gap:8px}
.chat .chips button{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;font-size:13px;font-weight:600}
.chat form{display:flex;gap:8px}
.chat input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.chat input:disabled{opacity:.5}
.chat form button{width:44px;height:44px;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}
.chat form button:disabled{opacity:.45}
.chat .disc{font-size:12px;color:var(--muted);line-height:1.4}
.typing{display:inline-flex;gap:4px}.typing i{width:6px;height:6px;border-radius:99px;background:var(--muted);animation:bl 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* HP / tablet portrait: panel jadi lembar penuh */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .drawer{width:100%;border-left:0}
  .r-nav{display:none}
  .r-zoomctl{bottom:8px;right:8px;display:none}
  .r-main.zoomed .r-zoomctl{display:flex}
  .r-title img{height:20px}
  .r-tools .ib{width:40px}
  .r-tools .hide-sm{display:none}
}
/* HP sempit: 8 tombol alat + tombol kembali + logo harus muat tanpa bertumpuk */
@media (max-width:480px){
  .r-top{padding:6px 8px;gap:4px}
  .r-title{gap:4px}
  .r-title .back{flex:none;width:36px}
  .r-title img{flex:none}
  .r-title .nm{display:none}   /* judul edisi tidak muat di antara tombol; nomor halaman tetap ada di bawah */
  .r-tools{gap:0}
  .r-tools .ib{width:35px}
}
@media (max-width:370px){.r-title img{display:none}.r-tools .ib{width:33px}}
@media (max-width:340px){.r-tools .hide-xxs{display:none}}   /* 9 tombol tidak muat di 320 px: "Bacakan halaman" disembunyikan di layar sesempit itu */
body.reader.embed .r-top .back,body.reader.embed .r-title img{display:none}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.corridor .c{animation-play-state:paused!important}}

.r-main.show-links .r-pg .lk-a{background:rgba(255,200,0,.38);outline:2.5px solid rgba(220,150,0,.95);animation:lkp 1.4s ease-in-out 2}
.ib.bl[aria-pressed=true]{background:rgba(255,200,0,.3)}
@keyframes lkp{50%{background:rgba(255,200,0,.6)}}
.ib[hidden]{display:none!important}

.r-book.fl{perspective:2200px}
.fl-sh{position:absolute;inset:0;pointer-events:none;opacity:0}
.leaf{will-change:transform}

.curl-cv{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:5}
.r-book.curl-bk{box-shadow:0 24px 48px rgba(0,0,0,.35)}
.curl-cv{will-change:transform;transform:translateZ(0)}

/* ---------- Aksesibilitas: menu, suara bacaan, ukuran, kontras, gerak ---------- */
.a11y-btn{color:var(--stage-ink)}
.hdr-tools .a11y-btn,.site-header>.a11y-btn{width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.hdr-tools .a11y-btn:hover,.site-header>.a11y-btn:hover{background:var(--chip)}
.a11y-btn[aria-expanded="true"]{background:var(--ink)!important;color:var(--bg)!important}
.a11y-fab{position:fixed;left:14px;bottom:14px;z-index:150;width:48px;height:48px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.a11y-panel{position:fixed;top:70px;right:12px;z-index:300;width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:6px 18px 18px;font-family:var(--font)}
.a11y-panel[hidden]{display:none}
.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0 6px}
.a11y-head h2{margin:0;font-size:17px;font-weight:800}
.a11y-x{color:var(--ink)}
.a11y-body{display:flex;flex-direction:column;gap:12px}
.a11y-hint{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.a11y-warn{color:var(--danger)}
.a11y-hr{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.a11y-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-weight:700;font-size:15px;text-align:left}
.a11y-sw-k{flex:none;width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;transition:background .15s}
.a11y-sw-k::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s}
.a11y-sw[aria-checked="true"] .a11y-sw-k{background:var(--accent)}
.a11y-sw[aria-checked="true"] .a11y-sw-k::after{transform:translateX(18px)}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:600}
.a11y-row.col{flex-direction:column;align-items:stretch}
.a11y-sel{min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 10px;max-width:60%}
.a11y-rg{display:flex;align-items:center;gap:8px;flex:1;max-width:60%}
.a11y-rg input{flex:1;min-width:0}
.a11y-out{min-width:36px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.a11y-sz{flex-wrap:wrap;border-radius:14px}
.a11y-sz button{flex:1 1 40%;min-height:44px;padding:0 10px}
.a11y-actions{display:flex;gap:8px}
.btn.ghost{background:transparent}
.a11y-speaking{outline:3px dashed var(--accent);outline-offset:3px;border-radius:6px}
.r-readbar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:4px;padding:6px 8px;background:var(--bar);color:var(--stage-ink);border:1px solid var(--bar-line);border-radius:999px;box-shadow:var(--shadow);max-width:calc(100% - 16px)}
.r-readbar[hidden]{display:none}
.r-readbar .rb-t{padding:0 10px;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36vw}
.r-pg .tts{position:absolute;inset:0;pointer-events:none}
.r-pg .tts i{position:absolute;background:rgba(255,200,0,.28);outline:2px solid rgba(220,150,0,.9);border-radius:3px}
.r-top .ib[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
/* ukuran tampilan */
html[data-a11y-size="1"] body:not(.reader){zoom:1.12}
html[data-a11y-size="2"] body:not(.reader){zoom:1.28}
html[data-a11y-size="3"] body:not(.reader){zoom:1.5}
html[data-a11y-size="1"] .reader .drawer,html[data-a11y-size="1"] .reader .a11y-panel{zoom:1.12}
html[data-a11y-size="2"] .reader .drawer,html[data-a11y-size="2"] .reader .a11y-panel{zoom:1.28}
html[data-a11y-size="3"] .reader .drawer,html[data-a11y-size="3"] .reader .a11y-panel{zoom:1.5}
/* kontras tinggi */
html:root[data-a11y-contrast="1"]{--bg:#000;--surface:#000;--ink:#fff;--muted:#fff;--line:#fff;--chip:#1a1a1a;--accent:#ffd400;--accent-ink:#000;--link:#ffd400;--focus:#ffd400;--stage:#000;--stage-ink:#fff;--bar:#000;--bar-line:#fff;--danger:#ff8a80;--danger-bg:#000;--ok:#7dffb0;--info-bg:#000;--shadow:none;--cover-shadow:none;color-scheme:dark}
html[data-a11y-contrast="1"] a:not(.cta):not(.brand):not(.ib):not(.skip){text-decoration:underline}
html[data-a11y-contrast="1"] .pill-group [aria-pressed="true"],html[data-a11y-contrast="1"] .pill-group [aria-current="page"]{background:#ffd400;color:#000}
html[data-a11y-contrast="1"] :focus-visible{outline:3px solid #ffd400!important;outline-offset:2px}
/* kurangi animasi */
html[data-a11y-motion="1"] *,html[data-a11y-motion="1"] *::before,html[data-a11y-motion="1"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
html[data-a11y-motion="1"] .corridor .c{animation-play-state:paused!important}
/* jarak teks */
html[data-a11y-spacing="1"] body{line-height:1.9;letter-spacing:.03em;word-spacing:.1em}
html[data-a11y-spacing="1"] p,html[data-a11y-spacing="1"] li{line-height:1.9}

/* edisi lainnya */
.ed-list{display:flex;flex-direction:column;gap:10px}
.ed-item{display:flex;gap:14px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;background:var(--surface)}
.ed-item:hover{background:var(--chip)}
.ed-item[aria-current="true"]{border-color:var(--ink)}
.ed-item img{width:64px;aspect-ratio:3/4;object-fit:cover;border-radius:6px;flex:none;background:var(--chip);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.ed-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.ed-meta b{font-size:15px;line-height:1.25}
.ed-meta small{font-size:13px;opacity:.7}
.ed-meta em{font-style:normal;font-size:12px;font-weight:700;margin-top:4px}
.ed-all{display:block;margin-top:16px;text-align:center;font-weight:700;color:var(--ink);padding:12px;border:1px solid var(--line);border-radius:999px;text-decoration:none}
.ed-all:hover{background:var(--chip)}

.r-arc{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;margin-right:6px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:700;font-size:14px;text-decoration:none}
.r-arc:hover{background:var(--chip)}
#arsip{scroll-margin-top:24px}

/* dibuka dari aplikasi seluler: nama situs disembunyikan (app punya judulnya sendiri); pilihan Koran/Majalah, bahasa, dan menu aksesibilitas tetap ada */
.in-app .site-header .brand{display:none}
.in-app .site-header{padding-top:12px;padding-bottom:12px}

/* Footer beranda dan katalog: ajakan kerja sama (kiri), sosial media + hak cipta (tengah) */
.site-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:16px 48px 22px}
.site-foot .mid{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:6px}
.site-foot .copy{margin:0;font-size:12px;color:var(--muted);font-weight:500;text-align:center}
.site-foot .soc{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--muted)}
.site-foot .soc a{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none}
.site-foot .soc a span{display:inline-flex}
.site-foot .soc a:hover{background:var(--chip)}
.hero-wait [data-i18n=homeTitle],.hero-wait [data-i18n=homeSub]{visibility:hidden}
.site-foot .soc .grp{display:inline-flex;align-items:center;gap:6px}
.site-foot .soc .sep{padding:0 4px;font-weight:700}
.site-foot .coop{grid-column:1;justify-self:start}
.coop{display:flex;align-items:center;gap:10px;max-width:360px;padding:8px 12px 8px 8px;border-radius:14px;color:var(--muted);text-decoration:none;font-size:12.5px;line-height:1.4}
.coop:hover{background:var(--chip)}
.coop .ic{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:#25D366;color:#fff}
.coop .tx{display:flex;flex-direction:column;min-width:0}
.coop b{color:var(--ink);font-weight:700;font-size:13px}
.coop .tag{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;background:#E7F7EE;color:#137A43;font-weight:800;font-size:10px;letter-spacing:.04em;vertical-align:1px}
.coop .go{color:#128C4A;font-weight:700}
:root[data-mode="dark"] .coop .tag{background:#123524;color:#7EE2A8}
@media (prefers-color-scheme:dark){:root:not([data-mode="light"]) .coop .tag{background:#123524;color:#7EE2A8}}
/* di pembaca: di bilah bawah, kiri (tidak pernah menutupi halaman). Lebar: kartu dua baris; sedang: satu baris di kiri; sempit: satu baris di tengah bawah */
.r-bottom{position:relative}
.r-coop,.r-coop-m{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
.r-coop{padding:6px 12px 6px 6px}.r-coop .ic{width:30px;height:30px}
.coop.mini{gap:7px;padding:2px 8px;font-size:12px}.coop.mini .ic{width:22px;height:22px}.coop.mini .ic svg{width:13px;height:13px}
.r-coop-m{display:none}
@media (max-width:1359px){.r-coop{display:none}.r-coop-m{display:flex}}
.r-acts{display:contents}
.r-ask{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;box-shadow:0 8px 22px rgba(14,17,22,.25);cursor:pointer}
.r-ask:hover{opacity:.9}
.r-main.with-drawer~.r-bottom .r-ask{display:none}
@media (max-width:1099px){
  .r-acts{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
  .r-coop-m,.r-ask{position:static;transform:none}
  .r-ask{height:34px;padding:0 12px 0 10px;font-size:12.5px;box-shadow:none}
}
@media (max-width:760px){.r-ask{display:none}}
.embed .r-coop,.embed .r-coop-m{display:none}
@media (max-width:760px){
  .site-foot{grid-template-columns:1fr;justify-items:center;padding:16px 16px 92px;gap:10px}
  .site-foot .mid,.site-foot .coop{grid-column:1}
  .site-foot .coop{justify-self:center;text-align:left}
  .site-foot .soc{flex-direction:column;gap:8px}
  .site-foot .soc .sep{display:none}
}
.catalog .site-foot{max-width:1200px;margin:0 auto}
.embed .site-foot,.in-app .site-foot{display:none}

/* ---- penanda halaman (pita pembatas buku) ---- */
:root{--bmc:#B42318}
@media (prefers-color-scheme:dark){:root:not([data-mode="light"]){--bmc:#F0786E}}
:root[data-mode="dark"]{--bmc:#F0786E}
.r-pg .bm-r{position:absolute;top:0;z-index:3;display:flex;justify-content:center;width:max(44px,calc(var(--u,6px)*8));height:max(52px,calc(var(--u,6px)*12));padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.r-pg .bm-r.bm-l{left:calc(var(--u,6px)*11 - max(44px,calc(var(--u,6px)*8)) / 2)}
.r-pg .bm-r.bm-rt{right:calc(var(--u,6px)*11 - max(44px,calc(var(--u,6px)*8)) / 2)}
.r-pg .bm-r i{display:block;width:calc(var(--u,6px)*4.4);height:calc(var(--u,6px)*10);background:#B42318;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);opacity:0;transition:opacity .15s}
.r-pg .bm-r:focus-visible i{opacity:.6}
.r-pg .bm-r:hover i{opacity:.75}
@media (hover:none){.r-pg .bm-r:not(.on){pointer-events:none}}
.r-pg .bm-r.on{filter:drop-shadow(0 3px 3px rgba(0,0,0,.28))}
.r-pg .bm-r.on i{opacity:1}
.bm-btn{position:relative}
.bm-btn.has{color:var(--bmc)}.bm-btn.has svg{fill:currentColor}
.bm-btn[aria-expanded="true"]{background:var(--ink);color:var(--bg)}
.bm-btn .bm-n{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--ink);color:var(--bg);font-size:10px;font-weight:800;line-height:16px;text-align:center}
.bm-btn[aria-expanded="true"] .bm-n{background:var(--bmc);color:#fff}
.r-rng{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.r-rng input{flex:1;width:100%}
.r-ticks{position:absolute;left:0;right:0;top:50%;height:0;pointer-events:none}
.r-ticks i{position:absolute;top:-17px;width:8px;height:20px;margin-left:-4px;background:var(--bmc);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.bm-toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:9;width:max-content;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);min-height:48px;padding:4px 6px 4px 16px;border-radius:14px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.bm-toast .tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-toast svg{flex:none;fill:#F0786E;color:#F0786E}
.bm-toast button{min-height:44px;padding:0 12px;border:0;background:transparent;color:inherit;font:inherit;font-weight:800;text-decoration:underline}
.r-main.with-drawer .bm-toast{left:calc((100% - min(380px,100%)) / 2)}
.bm-scrim{position:absolute;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center;background:rgba(14,17,22,.45)}
.bm-resume{width:min(440px,100%);padding:20px 20px 24px;border-radius:24px 24px 0 0;background:var(--surface);color:var(--ink);display:flex;flex-direction:column;gap:12px;box-shadow:0 -10px 40px rgba(0,0,0,.2)}
.bm-resume .row{display:flex;gap:16px;align-items:center;margin-bottom:4px}
.bm-resume img{width:72px;height:auto;flex:none;border-radius:4px;background:var(--chip);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.bm-resume h2{margin:0 0 4px;font-size:18px;font-weight:800;line-height:1.25}
.bm-resume p{margin:0;font-size:14px;color:var(--muted)}
.bm-resume .btn{width:100%}
@media (min-width:761px){.bm-scrim{align-items:center}.bm-resume{border-radius:20px;padding:24px}}
.bm-note{margin:0 0 14px;font-size:13px;color:var(--muted)}
.bm-last{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:18px;padding:12px;border:0;border-radius:14px;background:var(--ink);color:var(--bg);text-align:left;font:inherit}
.bm-last img{width:44px;height:auto;flex:none;border-radius:3px;background:var(--chip)}
.bm-last .tx{display:flex;flex-direction:column;gap:2px}.bm-last small{font-size:12px;opacity:.72}.bm-last b{font-size:14px}
.bm-h{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bm-empty{margin:0;font-size:14px;color:var(--muted)}
.bm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bm-list li{display:flex;align-items:center;gap:4px;border-radius:14px}
.bm-list li.now{background:rgba(180,35,24,.1);box-shadow:0 0 0 1.5px var(--bmc) inset}
.bm-go{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px;border:0;border-radius:14px;background:transparent;color:var(--ink);text-align:left;font:inherit}
.bm-go img{width:44px;height:auto;flex:none;border-radius:3px;background:var(--chip);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.bm-go .tx{display:flex;flex-direction:column;gap:2px;min-width:0}.bm-go b{font-size:14px}.bm-go small{font-size:12px;color:var(--muted)}
.bm-list li.now small{color:var(--bmc);font-weight:700}
.bm-del{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center}
.bm-clear{margin-top:18px;padding:12px 0;border:0;background:transparent;font:inherit;font-size:13px;font-weight:700;color:var(--bmc)}
@media (max-width:400px){.r-tools .hide-xs{display:none}}

.bm-now{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 8px;padding:12px 14px;border:1px solid var(--line,rgba(128,128,128,.3));border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:700;text-align:left;cursor:pointer}
.bm-now svg{flex:none;color:var(--bmc)}
.bm-now.on{background:color-mix(in srgb,var(--bmc) 10%,transparent);border-color:var(--bmc)}

/* Persetujuan cookie (hanya tampil bila Google Analytics diaktifkan di admin) */
.ck-banner{position:fixed;left:16px;right:16px;bottom:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;max-width:880px;margin:0 auto;padding:16px 18px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 48px rgba(14,17,22,.28)}
.ck-banner p{margin:0;flex:1 1 320px;min-width:0;font-size:14px;line-height:1.5}
.ck-banner .ck-act{display:flex;gap:10px;flex:0 0 auto}
.ck-banner .btn{min-height:44px;padding:0 22px;font-size:15px}
@media (max-width:520px){.ck-banner{padding:14px}.ck-banner .ck-act{width:100%}.ck-banner .btn{flex:1}}
.ck-link{background:none;border:0;padding:6px 4px;min-height:32px;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ck-link:hover{color:var(--ink)}
.ck-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

/* ---------- formulir pembaca (masukan, request majalah fisik) ---------- */
html.fm-lock{overflow:hidden}
.fm-wrap{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,12,16,.55)}
.fm-box{width:100%;max-width:480px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.4);outline:none}
.fm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 4px}
.fm-h{margin:0;font-size:18px;line-height:1.3}
.fm-x{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer}
.fm-x:hover{background:var(--chip)}
.fm-body{padding:8px 18px 18px}
.fm-form{display:flex;flex-direction:column;gap:14px}
.fm-form label,.fm-fs legend{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.fm-fs{border:0;margin:0;padding:0;min-width:0}
.fm-fs legend{padding:0}
.fm-f input[type=text],.fm-f input[type=tel],.fm-f textarea{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px}
.fm-f textarea{resize:vertical;min-height:110px;line-height:1.5}
.fm-f [aria-invalid="true"]{border-color:var(--danger)}
.fm-hint,.fm-cnt,.fm-note,.fm-attach{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
.fm-cnt{text-align:right;margin-top:-10px}
.fm-intro{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.fm-err{color:var(--danger);background:var(--danger-bg);border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.45;margin-top:6px}
.fm-err[hidden]{display:none}
.fm-seg{display:flex;flex-wrap:wrap;gap:8px}
.fm-opt{position:relative}
.fm-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.fm-opt label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin:0;font-weight:600;border:1px solid var(--line);border-radius:999px;background:var(--bg);cursor:pointer}
.fm-opt input:checked+label{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fm-opt input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}
.fm-form :focus-visible,.fm-x:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.fm-act{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px}
.fm-act .btn{min-height:44px}
.fm-more{display:inline-block;font-size:13.5px;font-weight:600;color:var(--link);text-decoration:underline;margin-top:-4px}
.fm-ok{display:flex;flex-direction:column;gap:14px}
.fm-ok p{margin:0;font-size:15px;line-height:1.6}
.fm-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.fm-menu{position:fixed;z-index:110;min-width:210px;padding:6px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.fm-menu button{min-height:44px;padding:0 14px;text-align:left;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:transparent;border:0;border-radius:10px;cursor:pointer}
.fm-menu button:hover,.fm-menu button:focus-visible{background:var(--chip);outline:none}
@media (max-width:640px){
  .fm-wrap{align-items:flex-end;padding:0}
  .fm-box{max-width:none;border-radius:18px 18px 0 0;max-height:92vh;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom)}
}
@media (prefers-reduced-motion:no-preference){.fm-box{animation:fmIn .18s ease-out}@keyframes fmIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}

/* kartu info (titik interaktif) */
.r-pg .ci{position:absolute;inset:0;pointer-events:none}
.r-pg .ci-b{position:absolute;display:block;pointer-events:auto;cursor:pointer;padding:0;margin:0;border:2px solid rgba(194,58,27,.0);border-radius:6px;background:rgba(194,58,27,.0);transition:background .15s,border-color .15s;font:inherit}
.r-pg .ci-b:hover,.r-pg .ci-b:focus-visible{background:rgba(194,58,27,.16);border-color:rgba(194,58,27,.85)}
.r-pg .ci-b::after{content:"";position:absolute;inset:calc(-12px / var(--z,1))}
.r-pg .ci-pin-old{position:absolute;right:calc(-8px / var(--z,1));top:calc(-8px / var(--z,1));width:calc(28px / var(--z,1));height:calc(28px / var(--z,1));min-width:20px;min-height:20px;border-radius:50%;background:#c23a1b;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(0,0,0,.35);border:2px solid #fff;box-sizing:border-box}
.r-pg .ci-pin svg{width:60%;height:60%}
.drawer.ci-d .body{display:flex;flex-direction:column;gap:12px}
.drawer.ci-d>header{gap:12px}
.ci-chip{font-size:12px;font-weight:700;padding:3px 10px;border-radius:12px;background:color-mix(in srgb,var(--c,#7a5a0e) 18%,var(--surface));color:var(--ink);border:1px solid color-mix(in srgb,var(--c,#7a5a0e) 55%,transparent)}
.ci-t{margin:0;font-size:20px;line-height:1.2;font-weight:800}
.ci-p{margin:0;font-size:15px;line-height:1.6;white-space:pre-line}
.ci-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ci-im{position:relative;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface);cursor:pointer;aspect-ratio:4/3}
.ci-im img{width:100%;height:100%;object-fit:cover;display:block}
.ci-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;font-weight:800;font-size:18px}
.ci-act{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:15px;text-decoration:none;cursor:pointer;text-align:left}
.ci-act:hover,.ci-act:focus-visible{border-color:#c23a1b}
.ci-act svg{color:#c23a1b;flex:none}
.ci-modal{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:rgba(10,9,8,.92);color:#f3efe8;padding:12px;box-sizing:border-box}
.ci-modal .ib{color:#f3efe8;background:rgba(255,255,255,.1)}
.ci-modal .ib:disabled{opacity:.3}
.ci-vid{align-items:center;justify-content:center}
.ci-vid .ci-x{position:absolute;right:12px;top:12px}
.ci-frame{width:min(960px,100%);aspect-ratio:16/9;background:#000}
.ci-frame iframe{width:100%;height:100%;border:0;display:block}
.ci-top{display:flex;align-items:center;justify-content:space-between;font-size:14px}
.ci-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 0}
.ci-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.ci-bot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ci-cap{flex:1;margin:0;text-align:center;font-size:14px;line-height:1.5}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .drawer.ci-d{top:auto;max-height:78%;border-radius:18px 18px 0 0;border-left:0;border-top:1px solid var(--line)}
}

.ci-stack{display:flex;flex-direction:column;gap:8px}
.ci-fan{position:relative;height:196px;display:block}
.ci-ph{position:absolute;left:50%;top:50%;width:132px;height:132px;padding:0;margin:-66px 0 0 -66px;border:5px solid var(--surface);border-radius:26px;overflow:hidden;background:var(--line);box-shadow:0 14px 34px rgba(0,0,0,.22);cursor:pointer;transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));transition:transform .45s cubic-bezier(.2,.8,.25,1.1),box-shadow .2s}
.ci-ph img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ci-stack:not(.open) .ci-ph:hover,.ci-stack:not(.open) .ci-ph:focus-visible{transform:translate(var(--x,0),calc(var(--y,0) - 10px)) rotate(calc(var(--r,0deg) * .8)) scale(1.05);z-index:9!important}
.ci-stack.open .ci-fan{height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ci-stack.open .ci-ph{position:relative;left:auto;top:auto;width:auto;height:auto;margin:0;aspect-ratio:1;transform:none;border-radius:24px;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.ci-stack.open .ci-ph:hover,.ci-stack.open .ci-ph:focus-visible{transform:scale(1.02)}
.ci-back{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 8px;border:0;border-radius:22px;background:var(--line);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
@media (prefers-reduced-motion:reduce){.ci-ph{transition:none}}

/* galeri aperture */
.ci-ap{padding:0;background:#0d0d0f}
.ap-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;color:#fff}
@media (hover:hover) and (pointer:fine){.ap-stage{cursor:none}}
.ap-layer{position:absolute;inset:0;overflow:hidden}
.ap-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;display:block;pointer-events:none;background:#0d0d0f}
.ap-ring{position:absolute;left:0;top:0;border-radius:50%;border:1px solid #fff;pointer-events:none;opacity:0}
.ap-shade{position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));pointer-events:none}
.ap-text{position:absolute;left:clamp(16px,4vw,48px);right:96px;bottom:84px;pointer-events:none}
.ap-line{display:block;overflow:hidden}
.ap-line>span{display:block;font:500 clamp(20px,3.2vw,36px)/1.25 ui-serif,Georgia,'Times New Roman',serif;animation:ap-rise .9s cubic-bezier(.2,.8,.2,1) both}
.ap-count{position:absolute;right:clamp(16px,4vw,48px);bottom:92px;font:500 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;pointer-events:none}
.ap-lens{position:absolute;left:0;top:0;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:1px solid #fff;display:grid;place-items:center;font:600 11px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;opacity:0;transition:opacity .25s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ap-lens.on{opacity:1}
.ap-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ap-close{position:absolute;right:12px;top:12px;z-index:5}
.ap-nav{position:absolute;left:0;right:0;bottom:16px;z-index:5;display:flex;justify-content:center;gap:16px}
.ap-nb{width:52px;height:44px;border:1px solid rgba(255,255,255,.4)}
@keyframes ap-rise{from{transform:translateY(105%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.ap-line>span{animation:none}}

/* tombol kartu: pil kaca */
.r-pg .ci-b{border:2px solid transparent;display:grid;place-items:center}
.r-pg .ci-pill{position:relative;display:inline-flex;align-items:center;gap:calc(8px / var(--z,1));height:calc(40px / var(--z,1));padding:0 calc(16px / var(--z,1)) 0 calc(10px / var(--z,1));border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(20,20,24,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:600 calc(13px / var(--z,1))/1 system-ui,-apple-system,'Segoe UI',sans-serif;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .2s,background .2s}
.r-pg .ci-pill i{width:calc(26px / var(--z,1));height:calc(26px / var(--z,1));border-radius:50%;background:#fff;color:#c23a1b;display:grid;place-items:center}
.r-pg .ci-pill i svg{width:55%;height:55%}
.r-pg .ci-b:hover .ci-pill,.r-pg .ci-b:focus-visible .ci-pill{transform:scale(1.06);background:rgba(20,20,24,.62)}
.r-pg .ci-b:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ukuran tombol dan tanpa kotak latar */
.r-pg .ci-b,.r-pg .ci-b:hover,.r-pg .ci-b:focus-visible{background:transparent!important;border-color:transparent!important;outline:0!important}
.r-pg .ci-b:focus-visible .ci-pill{outline:2px solid #fff;outline-offset:2px}
.r-pg .ci-pill{--h:30px;height:calc(var(--h) / var(--z,1));font-size:calc(12px / var(--z,1));padding:0 calc(13px / var(--z,1)) 0 calc(5px / var(--z,1));gap:calc(6px / var(--z,1))}
.r-pg .ci-pill i{width:calc((var(--h) - 8px) / var(--z,1));height:calc((var(--h) - 8px) / var(--z,1))}
.r-pg .ci-s0 .ci-pill{--h:24px;font-size:calc(11px / var(--z,1))}
.r-pg .ci-s2 .ci-pill{--h:38px;font-size:calc(14px / var(--z,1))}

/* ukuran tombol mengikuti lebar halaman, supaya posisi dan jarak sama dengan di editor */
.r-pg .ci{container-type:inline-size}
.r-pg .ci-pill{--h:max(22px,4.7cqw);height:calc(var(--h) / var(--z,1));font-size:calc(var(--h) * .4 / var(--z,1));gap:calc(var(--h) * .2 / var(--z,1));padding:0 calc(var(--h) * .42 / var(--z,1)) 0 calc(var(--h) * .16 / var(--z,1))}
.r-pg .ci-pill i{width:calc(var(--h) * .76 / var(--z,1));height:calc(var(--h) * .76 / var(--z,1))}
.r-pg .ci-s0 .ci-pill{--h:max(18px,3.6cqw)}
.r-pg .ci-s2 .ci-pill{--h:max(28px,5.9cqw)}
/* pil selalu tepat di tengah kotak, berapa pun lebarnya */
.r-pg .ci-b{display:block}
.r-pg .ci-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.r-pg .ci-b:hover .ci-pill,.r-pg .ci-b:focus-visible .ci-pill{transform:translate(-50%,-50%) scale(1.06)}
/* HP: logo tidak muat di antara 10 tombol (menjepit jadi gepeng), jadi disembunyikan di bawah 440 px */
@media (max-width:440px){.r-title img,.r-title .logo-live{display:none}.r-title{flex:1 1 0;min-width:0}}
/* HP: halaman sempit, tombol kartu jadi lingkaran berisi ikon saja agar tidak saling menimpa (nama tetap ada di aria-label) */
@container (max-width:480px){
  .r-pg .ci-pill,.r-pg .ci-s0 .ci-pill,.r-pg .ci-s2 .ci-pill{--h:28px;font-size:0;gap:0;padding:0 calc((var(--h) - var(--h) * .76) / 2 / var(--z,1));min-width:0}
  .r-pg .ci-s0 .ci-pill{--h:24px}.r-pg .ci-s2 .ci-pill{--h:34px}
}

/* menu garis tiga di HP */
.r-burger{display:none}
.r-menu-wrap{position:fixed;inset:0;z-index:70}
.r-menu-scrim{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.r-menu{position:absolute;right:8px;top:calc(env(safe-area-inset-top,0px) + 56px);width:min(280px,calc(100% - 16px));max-height:calc(100% - 72px);overflow:auto;padding:6px;border-radius:16px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:2px}
.r-mi{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:15px;text-align:left;cursor:pointer}
.r-mi:hover,.r-mi:focus-visible{background:var(--line)}
.r-mi[aria-pressed=true]{background:rgba(255,200,0,.28)}
.r-mi svg{flex:none}
.r-mlang{display:flex;gap:6px;padding:8px 6px 4px;border-top:1px solid var(--line);margin-top:4px}
.r-mlang button{flex:1;min-height:42px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.r-mlang button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:transparent}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .r-burger{display:inline-grid}
  .r-tools .mv{display:none!important}
}

/* filter arsip: daftar pilihan buatan sendiri */
.dd-row{display:flex;align-items:center;gap:10px}
.dd-lab{font-size:14px;font-weight:600;color:var(--muted)}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.dd-btn svg{color:var(--muted);transition:transform .2s}
.dd-btn[aria-expanded=true]{border-color:var(--accent,#0b6bf5);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#0b6bf5) 22%,transparent)}
.dd-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.dd-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:190px;max-height:min(60vh,360px);overflow:auto;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(20,28,45,.2);outline:0}
.dd-it{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;padding:0 12px;border-radius:10px;font-size:14px;cursor:pointer}
.dd-it small{font-size:12px;color:var(--muted)}
.dd-it.zero{color:var(--muted);opacity:.55}
.dd-it:hover,.dd-it.act{background:var(--chip,#f0f3f8)}
.dd-it.sel{background:color-mix(in srgb,var(--accent,#0b6bf5) 14%,transparent);color:var(--accent,#0b6bf5);font-weight:700}
.dd-pop:focus-visible{outline:2px solid var(--focus,#0b6bf5);outline-offset:2px}
@media (max-width:480px){.filters{width:100%}.dd-row{flex:1 1 0;min-width:0}.dd{flex:1;min-width:0}.dd-btn{width:100%;justify-content:space-between}.dd-pop{left:0;right:auto;min-width:100%}}