/* Tampilan HP: terasa seperti aplikasi Android (app bar, kartu membulat, menu bawah). Dimuat hanya di layar <= 48rem. */
:root{--tab-h:3.9rem;--radius:1.1rem;--bayang:0 2px 10px rgba(23,70,60,.12)}
html{font-size:100%;scroll-padding-top:4rem}
body{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + .5rem);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
a,button{touch-action:manipulation}
.wrap{padding-inline:.9rem}

/* app bar */
.site-header{background:linear-gradient(135deg,#17463C,#1F5C4D);border-bottom:0;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.bar{flex-wrap:nowrap;padding-block:.55rem;gap:.6rem}
.brand picture{display:none}
.brand-hp{display:block;height:2.1rem;width:auto;border-radius:.5rem}
.bar-cari{display:inline-flex;margin-left:auto;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(255,255,255,.14);color:#fff}
.nav-toggle{display:none!important}
.ik{display:block}

/* menu penuh ("Lainnya") sebagai lembar layar penuh */
html.js .nav{display:none}
html.js .nav.open{display:flex;position:fixed;inset:0 0 calc(var(--tab-h) + env(safe-area-inset-bottom)) 0;z-index:45;flex-direction:column;align-items:stretch;
  gap:.4rem;justify-content:flex-start;color:var(--text);background:var(--bg);overflow-y:auto;padding:0 1rem 1.2rem;overscroll-behavior:contain}
.sheet-kepala{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg);padding:calc(.8rem + env(safe-area-inset-top)) 0 .6rem;z-index:1}
.sheet-kepala strong{font-family:var(--serif);font-size:1.3rem}
.sheet-tutup{background:var(--surface);border:0;border-radius:50%;width:2.6rem;height:2.6rem;display:inline-flex;align-items:center;justify-content:center;color:var(--text)}
.nav>ul{gap:.35rem;flex:none}
.nav>ul>li>a{background:var(--card);border:1px solid var(--border);border-radius:.9rem;padding:.7rem 1rem;font-weight:600}
.nav .sub a{font-weight:400}
.nav .cari{margin-top:.6rem}
html.sheet-buka{overflow:hidden}

/* menu bawah */
.tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:1px solid var(--border);
  box-shadow:0 -2px 12px rgba(0,0,0,.08);padding-bottom:env(safe-area-inset-bottom)}
.tabbar>a,.tabbar>button{flex:1;min-width:0;height:var(--tab-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  background:none;border:0;color:var(--muted);font:inherit;font-size:.72rem;font-weight:600;text-decoration:none;cursor:pointer;position:relative}
.tabbar span{line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tabbar .ik{width:1.5rem;height:1.5rem}
.tabbar [aria-current=page],.tabbar [aria-expanded=true]{color:var(--hijau)}
.tabbar [aria-current=page]::before,.tabbar [aria-expanded=true]::before{content:"";position:absolute;top:0;width:2.2rem;height:.22rem;border-radius:0 0 .3rem .3rem;background:var(--emas)}
@media (prefers-color-scheme:dark){.tabbar [aria-current=page],.tabbar [aria-expanded=true]{color:var(--emas)}}
.cookie{bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));z-index:39;border-radius:var(--radius) var(--radius) 0 0}

/* beranda: kartu menu bergaya aplikasi */
.hero{background:linear-gradient(160deg,#17463C,#1F5C4D 70%,#2A6B5A);color:#fff;margin:0 -.9rem 1rem;padding:1.3rem .9rem 3.2rem;border-radius:0 0 1.6rem 1.6rem}
.hero h1{font-size:1.45rem;margin:0 0 .4rem;color:#fff}
.hero .lead{font-size:.95rem;color:rgba(255,255,255,.88);margin-bottom:.9rem}
.hero .cari input{border:0;border-radius:1.5rem;padding-inline:1rem}
.hero .cari button{border-radius:1.5rem;background:var(--emas);color:#1B2623}
.ubin{grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:-2.3rem;position:relative}
.ubin a{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--bayang);padding:.9rem .8rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.25rem;border-left-width:1px}
.ubin a:hover{background:var(--card)}
.ubin a:active{transform:scale(.97)}
.ubin-lebar{grid-column:1/-1}
.ubin .ubin-ik{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:.9rem;background:#DCEBE5;color:var(--hijau);margin-bottom:.15rem}
.ubin-ik .ik{width:1.6rem;height:1.6rem}
.ubin li:nth-child(2) .ubin-ik{background:#F3E6BF;color:#5A4410}
.ubin li:nth-child(3) .ubin-ik{background:#E3E8EE;color:#243447}
.ubin li:nth-child(4) .ubin-ik{background:#EADFF5;color:#4B2A73}
.ubin li:nth-child(5) .ubin-ik{background:#F9E1DB;color:#7A2E1F}
@media (prefers-color-scheme:dark){.ubin-ik{background:#1D3A32;color:#BFE8D9}.ubin li:nth-child(n+2) .ubin-ik{background:#2A3532;color:#F0DCA0}}
.ubin strong{font-family:var(--sans);font-size:.95rem;color:var(--text)}
.ubin .ubin-ket{font-size:.76rem;opacity:1;color:var(--muted);margin:0;line-height:1.35}
h2{font-family:var(--sans);font-size:1.15rem;font-weight:700}

/* kartu & umum */
.grid{grid-template-columns:1fr;gap:.8rem}
.kartu,.janji{border-radius:var(--radius);box-shadow:var(--bayang)}
.btn,.cari button{border-radius:.8rem}
.site-footer{margin-bottom:0;border-radius:var(--radius) var(--radius) 0 0}
.foot-grid{gap:1rem}

/* bagikan: satu baris yang bisa digeser */
.bagikan ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-.9rem;padding-inline:.9rem;-webkit-overflow-scrolling:touch}
.bagikan ul::-webkit-scrollbar{display:none}
.bagikan li{flex:none}