/* ============================================================
   Maros+ — Design System
   Inspired by Lontara+ layout · Branding Kabupaten Maros (hijau)
   Responsive: HP · Tablet · Desktop
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap');

:root {
  /* Maros green identity */
  --maros-950: #06301C;
  --maros-900: #0A4A2A;
  --maros-800: #0D6B3C;
  --maros-700: #128C4E;
  --maros-600: #1AA85E;
  --maros-100: #E6F6EC;
  --maros-50: #F2FBF5;

  --gold-500: #D4A017;
  --gold-400: #E8B93A;
  --gold-100: #FBF3DC;

  --sky: #E8F4FF;
  --mist: #F4F7F5;
  --stone: #E2E8E4;
  --white: #FFFFFF;

  --text: #14241B;
  --text-muted: #5B6B62;
  --success: #0F8A4B;
  --warning: #C47B16;
  --danger: #C0392B;
  --info: #1A6FA0;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow: 0 6px 24px rgba(10, 74, 42, 0.08);
  --shadow-lg: 0 18px 48px rgba(6, 48, 28, 0.14);

  --font: 'Manrope', sans-serif;
  --display: 'Sora', sans-serif;

  --nav-h: 72px;
  --bottom-nav-h: 74px;
  /* Full-width fluid layout: HP · Tablet · Desktop */
  --container: 100%;
  --gutter: 1rem;
  --content-max: none;
}

@media (min-width: 640px) {
  :root { --gutter: 1.35rem; }
}
@media (min-width: 900px) {
  :root { --gutter: 1.75rem; }
}
@media (min-width: 1200px) {
  :root { --gutter: 2.25rem; }
}
@media (min-width: 1440px) {
  :root { --gutter: 2.75rem; }
}
@media (min-width: 1680px) {
  :root { --gutter: 3.25rem; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--mist);
  line-height: 1.55;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  padding-bottom: var(--bottom-nav-h);
}

@media (min-width: 1100px) {
  body { padding-bottom: 0; }
}

img { max-width: 100%; display: block; }
a { color: var(--maros-800); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold-500); }
ul { list-style: none; }
button, input, select, textarea { font: inherit; }

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

.page {
  padding: 1.25rem 0 3rem;
  min-height: calc(100vh - var(--nav-h) - 180px);
  width: 100%;
}

/* Full-bleed helpers (edge-to-edge background, content still guttered) */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ========== NAVBAR ========== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(226, 232, 228, .9);
  box-shadow: 0 8px 28px rgba(6, 48, 28, 0.05);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-h);
  gap: 1rem;
  position: relative;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--maros-900);
  flex-shrink: 0;
}
.brand:hover { color: var(--maros-900); }

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  padding: 3px;
  box-shadow:
    0 8px 20px rgba(8, 55, 40, 0.18),
    0 0 0 1px rgba(15, 90, 65, 0.08);
  background:
    linear-gradient(160deg, #ffffff 0%, #f3faf6 100%);
  border: 1px solid rgba(20, 90, 55, .12);
}
.brand-mark-lg {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  padding: 6px;
  box-shadow:
    0 12px 28px rgba(8, 55, 40, 0.2),
    0 0 0 1px rgba(15, 90, 65, 0.1);
}
.auth-brand-lockup {
  display: flex;
  justify-content: center;
  margin: 0 auto .35rem;
  text-decoration: none;
}
.brand-logo-lockup {
  width: min(220px, 72vw);
  height: auto;
  display: block;
  border-radius: 22px;
  background: #fff;
  padding: .55rem .7rem;
  box-shadow:
    0 18px 40px rgba(8, 40, 28, .12),
    0 0 0 1px rgba(15, 90, 65, .08);
  object-fit: contain;
}

.brand-text strong {
  display: block;
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--maros-950);
}

.brand-text span {
  display: block;
  margin-top: .12rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.nav-links {
  display: none;
}

.nav-sheet-head,
.nav-sheet-foot,
.nav-item-hint {
  display: none;
}

.nav-rail {
  display: flex;
  align-items: center;
  gap: .2rem;
}

.nav-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: .55rem .95rem;
  border-radius: 999px;
  color: #3d4f44;
  line-height: 1.15;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.nav-item-label {
  font-family: var(--display);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nav-item:hover {
  color: var(--maros-900);
  background: rgba(230, 246, 236, .85);
}

.nav-item.active {
  color: #fff;
  background: linear-gradient(135deg, var(--maros-800), var(--maros-600));
  box-shadow: 0 8px 18px rgba(13, 107, 60, 0.22);
}

.nav-item.active:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--maros-900), var(--maros-700));
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1.5px solid var(--stone);
  border-radius: 12px;
  cursor: pointer;
  color: var(--maros-900);
  padding: 0;
  box-shadow: 0 4px 12px rgba(6, 48, 28, 0.06);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.nav-toggle:hover {
  border-color: rgba(13, 107, 60, .35);
  box-shadow: 0 6px 16px rgba(13, 107, 60, 0.1);
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 17px;
  height: 2px;
  background: var(--maros-900);
  border-radius: 2px;
  position: relative;
  transition: transform .2s, opacity .2s, background .2s;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] {
  background: var(--maros-50);
  border-color: rgba(13, 107, 60, .28);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
  background: var(--maros-900);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
  background: var(--maros-900);
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0;
  background: rgba(6, 48, 28, .34);
  backdrop-filter: blur(2px);
  z-index: 190;
}
.nav-backdrop.show { display: block; }

/* Mobile / tablet sheet menu */
@media (max-width: 1099.98px) {
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid rgba(226, 232, 228, .95);
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 24px 56px rgba(6, 48, 28, 0.16);
    z-index: 210;
    max-height: min(78vh, 640px);
    overflow: hidden;
  }
  .nav-links.open { display: flex; }

  .nav-sheet-head {
    display: block;
    padding: 1.05rem 1.15rem .85rem;
    border-bottom: 1px solid var(--stone);
    background:
      linear-gradient(180deg, rgba(242, 251, 245, .95), rgba(255,255,255,.6));
  }
  .nav-sheet-head strong {
    display: block;
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--maros-950);
    letter-spacing: -0.02em;
  }
  .nav-sheet-head span {
    display: block;
    margin-top: .2rem;
    font-size: .82rem;
    color: var(--text-muted);
    font-weight: 500;
  }

  .nav-rail {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .65rem .65rem .35rem;
    overflow-y: auto;
    max-height: min(52vh, 420px);
  }

  .nav-item {
    width: 100%;
    border-radius: 14px;
    padding: .85rem 1rem;
    background: transparent;
    box-shadow: none;
  }
  .nav-item-label {
    font-size: 1rem;
    font-weight: 700;
    color: inherit;
  }
  .nav-item-hint {
    display: block;
    margin-top: .22rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: normal;
  }
  .nav-item:hover {
    background: var(--maros-50);
    color: var(--maros-900);
  }
  .nav-item.active {
    background: linear-gradient(135deg, var(--maros-800), var(--maros-600));
    color: #fff;
    box-shadow: 0 10px 22px rgba(13, 107, 60, 0.2);
  }
  .nav-item.active .nav-item-hint {
    color: rgba(255,255,255,.82);
  }

  .nav-sheet-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
    padding: .85rem 1rem 1rem;
    border-top: 1px solid var(--stone);
    background: #fbfcfb;
  }

  .nav-actions .nav-cta { display: none; }
}

@media (min-width: 1100px) {
  .nav-links {
    display: flex;
    position: static;
    flex: 1;
    justify-content: center;
    align-items: center;
    max-width: none;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .nav-rail {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .28rem;
    border-radius: 999px;
    background: rgba(244, 247, 245, .92);
    border: 1px solid rgba(226, 232, 228, .95);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  }

  .nav-sheet-head,
  .nav-sheet-foot,
  .nav-item-hint { display: none !important; }

  .nav-toggle { display: none; }
  .nav-backdrop { display: none !important; }

  .nav-item {
    padding: .58rem 1rem;
  }
  .nav-item-label {
    font-size: .9rem;
  }
}

@media (min-width: 1280px) {
  .nav-item {
    padding: .62rem 1.1rem;
  }
  .nav-item-label {
    font-size: .94rem;
  }
}

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .7rem 1.2rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--font);
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.btn-primary {
  background: var(--maros-800);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(13, 107, 60, 0.28);
}
.btn-primary:hover { background: var(--maros-900); color: var(--white); }

.btn-accent {
  background: var(--gold-500);
  color: var(--maros-950);
  box-shadow: 0 6px 16px rgba(212, 160, 23, 0.3);
}
.btn-accent:hover { background: var(--gold-400); color: var(--maros-950); }

.btn-outline {
  background: transparent;
  border-color: var(--maros-800);
  color: var(--maros-800);
}
.btn-outline:hover { background: var(--maros-800); color: var(--white); }

.btn-ghost {
  background: var(--maros-50);
  color: var(--maros-900);
  border-color: var(--stone);
}
.btn-ghost:hover { background: var(--maros-100); color: var(--maros-900); }

.btn-light {
  background: rgba(255,255,255,.18);
  color: var(--white);
  border-color: rgba(255,255,255,.35);
}
.btn-light:hover { background: rgba(255,255,255,.28); color: var(--white); }

.btn-danger { background: var(--danger); color: var(--white); }
.btn-sm { padding: .4rem .85rem; font-size: .78rem; }
.btn-block { width: 100%; }

/* ========== LANDING HERO (Lontara+ style) ========== */
.landing-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(232, 185, 58, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(26, 168, 94, 0.25), transparent 50%),
    linear-gradient(155deg, var(--maros-950) 0%, var(--maros-900) 40%, var(--maros-800) 100%);
  color: var(--white);
  padding: 2.5rem 0 3.5rem;
}

.landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.landing-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 48px;
  background: var(--mist);
  border-radius: 28px 28px 0 0;
}

.landing-hero .container {
  position: relative;
  z-index: 1;
}

.hero-simple {
  margin-bottom: 1rem;
}
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .55rem;
}
.hero-greet {
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}
.hero-clock {
  flex-shrink: 0;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: #E8B93A;
  color: #06301C;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.hero-brand-row {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2.5vw, 1.15rem);
  margin-top: .2rem;
}
.hero-pemda-mark {
  --mark: clamp(64px, 17vw, 96px);
  position: relative;
  width: var(--mark);
  height: var(--mark);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero-pemda-glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 185, 58, .38) 0%, rgba(26, 168, 94, .12) 42%, transparent 70%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
  animation: heroLogoPulse 4.5s ease-in-out infinite;
}
.hero-pemda-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 40%, rgba(232,185,58,.35)),
    rgba(255,255,255,.14);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -10px 22px rgba(6, 48, 28, .12);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  z-index: 1;
}
.hero-pemda-ring::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 185, 58, .55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  pointer-events: none;
}
.hero-pemda-logo {
  position: relative;
  z-index: 2;
  width: 72%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: contrast(1.05) saturate(1.08) drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
@keyframes heroLogoPulse {
  0%, 100% { opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.hero-brand-copy {
  min-width: 0;
  flex: 1;
}
.hero-pemda-label {
  margin: 0 0 .28rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: clamp(.68rem, 1.8vw, .78rem);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #F3D27A;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.hero-pemda-label::before {
  content: '';
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #E8B93A, #B8860B);
  box-shadow: 0 0 0 3px rgba(232, 185, 58, .22);
  flex-shrink: 0;
}
.hero-brand {
  font-family: var(--display);
  font-size: clamp(2.05rem, 7.5vw, 3.35rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
  text-shadow: 0 8px 28px rgba(0,0,0,.28);
}

.hero-brand .plus {
  color: var(--gold-400);
}

.hero-tag {
  margin: .45rem 0 0;
  font-size: clamp(.9rem, 2.3vw, 1.05rem);
  opacity: .92;
  max-width: 32ch;
  line-height: 1.4;
}
.hero-brand-copy .hero-tag {
  margin-top: .28rem;
}

@media (max-width: 640px) {
  .hero-brand-row {
    align-items: flex-start;
    gap: .7rem;
  }
  .hero-pemda-mark {
    --mark: 68px;
    margin-top: .15rem;
  }
  .hero-pemda-label {
    letter-spacing: .05em;
  }
  .hero-pemda-label::before {
    width: .45rem;
    height: .45rem;
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .hero-pemda-mark { --mark: 84px; }
}
@media (min-width: 1024px) {
  .hero-pemda-mark { --mark: 98px; }
  .hero-brand-row { gap: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pemda-glow { animation: none; }
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.1rem;
}

/* Satu bar cuaca ringkas */
.weather-bar {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: .7rem .85rem;
  margin: 0 0 .9rem;
  padding: .8rem 1rem;
  border-radius: 16px;
  background: #052618;
  border: 1px solid rgba(232, 185, 58, .3);
  box-shadow: 0 10px 26px rgba(6, 48, 28, .28);
  color: #fff;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.weather-bar:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(6, 48, 28, .34);
}
.weather-bar-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: rgba(255,255,255,.12);
  border-radius: 12px;
  padding: .25rem;
}
.weather-bar-temp {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800;
  color: #F5D76E;
  line-height: 1;
  letter-spacing: -0.03em;
}
.weather-bar-temp small {
  font-size: .5em;
  margin-left: .05rem;
}
.weather-bar-info {
  min-width: 0;
}
.weather-bar-info strong {
  display: block;
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.2;
}
.weather-bar-info span {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weather-bar-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
}
.weather-bar-side em {
  font-style: normal;
  font-size: .72rem;
  font-weight: 800;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
}

.weather-now {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.weather-now img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 16px;
  background: var(--maros-50);
  padding: .35rem;
}
.weather-now-temp {
  font-family: var(--display);
  font-size: 2.2rem;
  color: var(--maros-900);
  line-height: 1;
}
.weather-now-desc {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--maros-800);
  margin-top: .2rem;
}
.weather-now-loc,
.weather-now-meta {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: .25rem;
}

.weather-forecast {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (min-width: 700px) {
  .weather-forecast { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .weather-forecast { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.weather-forecast-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  text-align: center;
  padding: .85rem .55rem;
  border-radius: 14px;
  background: var(--maros-50);
  border: 1px solid var(--stone);
}
.weather-forecast-item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.weather-forecast-item strong {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--maros-900);
}
.weather-forecast-item span {
  font-size: .78rem;
  font-weight: 600;
  color: var(--maros-800);
  line-height: 1.25;
}
.weather-forecast-item small {
  font-size: .68rem;
  color: var(--text-muted);
}

.search-bar {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  background: var(--white);
  border-radius: 999px;
  padding: .35rem .35rem .35rem 1.1rem;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 520px;
}

.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: .92rem;
  color: var(--text);
  min-width: 0;
}

.search-bar .btn { flex-shrink: 0; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal { animation: rise .55s ease both; }

/* ========== SERVICE ICON GRID (super-app style) ========== */
.service-section {
  margin-top: -1.5rem;
  position: relative;
  z-index: 2;
  padding-bottom: 1.5rem;
  width: 100%;
}

.service-panel {
  background: var(--white);
  border-radius: 20px;
  padding: 1.25rem 1rem 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--stone);
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 900px) {
  .service-panel { padding: 1.45rem 1.35rem 1.75rem; }
}

.section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0 .35rem;
}

.section-label h2 {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--maros-900);
}

.section-label a {
  font-size: .8rem;
  font-weight: 700;
  color: var(--maros-700);
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem .5rem;
}

@media (min-width: 640px) {
  .icon-grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
}
@media (min-width: 900px) {
  .icon-grid { grid-template-columns: repeat(8, 1fr); }
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
  color: var(--text);
  padding: .35rem;
  border-radius: 12px;
  transition: transform .15s, background .15s;
}

.icon-item:hover {
  transform: translateY(-2px);
  background: var(--maros-50);
  color: var(--text);
}

.icon-bubble {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: var(--maros-100);
  color: var(--maros-800);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.04);
}

.icon-item[data-tone="gold"] .icon-bubble { background: var(--gold-100); color: #9A7508; }
.icon-item[data-tone="sky"] .icon-bubble { background: var(--sky); color: var(--info); }
.icon-item[data-tone="mint"] .icon-bubble { background: #D9F5E8; color: var(--success); }
.icon-item[data-tone="rose"] .icon-bubble { background: #FDE8E6; color: var(--danger); }
.icon-item[data-tone="lilac"] .icon-bubble { background: #EEE8FF; color: #5B4B9A; }
.icon-item[data-tone="sand"] .icon-bubble { background: #F3EDE4; color: #8A6A3E; }

.icon-item span {
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.25;
  max-width: 72px;
}

@media (min-width: 640px) {
  .icon-bubble { width: 58px; height: 58px; font-size: 1.45rem; }
  .icon-item span { font-size: .78rem; max-width: 90px; }
}

/* ========== PROMO / BANNER ========== */
.promo-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  width: 100%;
  padding: .15rem 0 .35rem;
  overflow: visible;
}

@media (min-width: 700px) {
  .promo-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
  }
}

.promo-card {
  width: 100%;
  min-width: 0;
  border-radius: 18px;
  padding: 1.2rem 1.25rem;
  color: var(--white);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box;
}

.promo-card:hover { color: var(--white); }
.promo-card h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  margin-bottom: .25rem;
  position: relative;
  z-index: 1;
}
.promo-card p {
  font-size: .82rem;
  opacity: .9;
  position: relative;
  z-index: 1;
  line-height: 1.45;
  max-width: none;
}

.promo-card.p1 {
  background: linear-gradient(135deg, #0D6B3C, #1AA85E 60%, #D4A017);
}
.promo-card.p2 {
  background: linear-gradient(135deg, #0A4A2A, #1565A8);
}
.promo-card.p3 {
  background: linear-gradient(135deg, #8A5A10, #D4A017 70%, #0D6B3C);
}

.promo-card::after {
  content: '';
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  right: -30px; top: -30px;
}

/* ========== SECTIONS ========== */
.section {
  padding: 1.5rem 0 2rem;
  width: 100%;
}
@media (min-width: 900px) {
  .section { padding: 1.85rem 0 2.35rem; }
}
.section-head {
  margin-bottom: 1.15rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  color: var(--maros-900);
}
.section-head p { color: var(--text-muted); font-size: .9rem; }

/* ========== NEWS / AGENDA ========== */
.news-section-head {
  align-items: flex-start;
  flex-direction: column;
  gap: .85rem;
}
.news-section-head > div { max-width: 36rem; }
.news-section-head h2 {
  margin: 0 0 .25rem;
  color: var(--maros-950);
  letter-spacing: -.01em;
}
.news-section-head p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
}
.news-all-btn {
  border-radius: 999px;
  border: 1px solid var(--stone);
  background: #fff;
  color: var(--maros-900);
  font-weight: 600;
  padding: .45rem 1rem;
  align-self: flex-start;
}
.news-all-btn:hover {
  background: var(--maros-50);
  color: var(--maros-950);
  border-color: var(--maros-200, #C8D9CF);
}

.news-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 82vw);
  gap: 1rem;
  overflow-x: auto;
  padding: .15rem .15rem 1rem;
  margin: 0 -.15rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.news-scroll::-webkit-scrollbar { display: none; }

@media (min-width: 700px) {
  .news-scroll {
    grid-auto-columns: minmax(300px, 46%);
    gap: 1.1rem;
  }
}
@media (min-width: 1024px) {
  .news-section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .news-scroll {
    grid-auto-flow: unset;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    grid-auto-columns: unset;
    padding-bottom: .25rem;
    margin: 0;
  }
}

.news-card {
  background: var(--white);
  border: 1px solid rgba(226, 232, 228, .95);
  border-radius: 18px;
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  color: inherit;
  height: 100%;
  min-width: 0;
  box-shadow: 0 10px 28px rgba(6, 48, 28, 0.07);
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(6, 48, 28, 0.11);
  color: inherit;
}

.news-thumb {
  height: 168px;
  background: linear-gradient(135deg, var(--maros-900), var(--maros-600));
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.45);
  font-family: var(--display);
  font-size: 1.8rem;
  overflow: hidden;
  flex-shrink: 0;
}
.news-thumb-img { padding: 0; }
.news-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-hero {
  margin: 0 0 1.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--stone);
  background: var(--stone);
  width: 100%;
}
.news-hero img {
  width: 100%;
  max-height: min(52vw, 520px);
  object-fit: cover;
  display: block;
}
@media (min-width: 900px) {
  .news-hero img { max-height: 480px; }
}
@media (min-width: 1200px) {
  .news-hero img { max-height: 560px; }
}
.bank-card-photo {
  margin: -1px -1px .85rem;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  height: 140px;
  background: var(--stone);
}
.bank-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wisata-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .wisata-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  .wisata-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
.wisata-card {
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.wisata-photo {
  height: 180px;
  background: var(--stone);
  overflow: hidden;
}
.wisata-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wisata-body { padding: 1rem 1.1rem 1.15rem; }
.wisata-body h3 { margin: 0 0 .4rem; color: var(--maros-900); font-size: 1.05rem; }
.wisata-body p { margin: 0 0 .75rem; font-size: .88rem; color: var(--text-muted); line-height: 1.5; }

/* —— Pariwisata Maros full-width shell —— */
.page--fluid {
  padding: 0 0 0;
  width: 100%;
  max-width: none;
}
.wisata-page-bar {
  width: 100%;
  padding: .65rem clamp(.9rem, 3vw, 2rem);
  box-sizing: border-box;
}
.wisata-app {
  --wisata-gutter: clamp(.9rem, 3.2vw, 2.5rem);
  width: 100%;
  max-width: none;
  margin: 0 0 0;
  background: #fff;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.wisata-app-top {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  padding: .75rem var(--wisata-gutter);
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: #fff;
  position: sticky;
  top: var(--nav-h, 64px);
  z-index: 5;
}
.wisata-app-top h1 {
  margin: 0;
  text-align: center;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 700;
  color: var(--maros-900);
  letter-spacing: -.01em;
}
.wisata-back,
.wisata-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  color: var(--maros-900);
  text-decoration: none;
  font-size: 1.15rem;
  background: transparent;
}
.wisata-back:hover { background: rgba(20, 90, 55, .08); }
.wisata-hero-banner {
  position: relative;
  width: 100%;
  min-height: clamp(180px, 42vw, 320px);
  background:
    linear-gradient(105deg, rgba(8, 36, 24, .78) 0%, rgba(8, 36, 24, .35) 48%, rgba(8, 36, 24, .55) 100%),
    var(--wisata-hero) center/cover no-repeat;
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.wisata-hero-banner-inner {
  width: 100%;
  max-width: 44rem;
  padding: clamp(1.25rem, 4vw, 2.75rem) var(--wisata-gutter);
  box-sizing: border-box;
}
.wisata-hero-kicker {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
}
.wisata-hero-banner h2 {
  margin: 0 0 .45rem;
  font-size: clamp(1.35rem, 4.2vw, 2.35rem);
  line-height: 1.2;
  font-weight: 800;
}
.wisata-hero-banner p {
  margin: 0;
  font-size: clamp(.88rem, 1.8vw, 1.05rem);
  line-height: 1.5;
  opacity: .94;
  max-width: 36rem;
}
.wisata-section {
  width: 100%;
  padding: clamp(1.1rem, 2.5vw, 1.75rem) var(--wisata-gutter) 0;
  box-sizing: border-box;
}
.wisata-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .95rem;
}
.wisata-section-head h3 {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--maros-900);
  font-weight: 700;
}
.wisata-section-head a {
  font-size: .82rem;
  font-weight: 600;
  color: var(--maros-600, #1f7a4d);
  text-decoration: none;
  white-space: nowrap;
}
.wisata-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem clamp(.55rem, 2vw, 1.25rem);
  max-width: 720px;
}
.wisata-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  text-align: center;
  text-decoration: none;
  color: var(--text-muted);
  font-size: clamp(.68rem, 1.6vw, .8rem);
  font-weight: 600;
  line-height: 1.25;
}
.wisata-cat-icon {
  width: clamp(3.1rem, 8vw, 4rem);
  height: clamp(3.1rem, 8vw, 4rem);
  border-radius: 1rem;
  display: grid;
  place-items: center;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  background: linear-gradient(160deg, #e8f6ee, #f4fbf7);
  border: 1px solid rgba(31, 122, 77, .12);
  box-shadow: 0 4px 14px rgba(20, 90, 55, .06);
}
.wisata-info-track {
  display: flex;
  gap: .85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .35rem;
  margin-inline: calc(var(--wisata-gutter) * -1);
  padding-inline: var(--wisata-gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wisata-info-track::-webkit-scrollbar { display: none; }
.wisata-info-card {
  flex: 0 0 min(78vw, 320px);
  scroll-snap-align: start;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--stone);
  background: #fff;
}
.wisata-info-photo {
  height: clamp(132px, 28vw, 180px);
  background: var(--stone);
}
.wisata-info-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wisata-info-body { padding: .75rem .85rem .9rem; }
.wisata-info-body h4 {
  margin: 0 0 .45rem;
  font-size: .9rem;
  line-height: 1.35;
  color: var(--maros-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wisata-info-body p {
  margin: 0;
  font-size: .75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.wisata-info-dots {
  display: flex;
  justify-content: center;
  gap: .35rem;
  margin: .65rem 0 .15rem;
}
.wisata-info-dots span {
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: #d5e5db;
}
.wisata-info-dots span.is-active {
  width: 1.15rem;
  background: var(--maros-600, #1f7a4d);
}
.wisata-reco {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}
.wisata-reco-card {
  border: 1px solid var(--stone);
  border-radius: 1.05rem;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wisata-reco-photo {
  position: relative;
  height: clamp(170px, 36vw, 220px);
  background: var(--stone);
}
.wisata-reco-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wisata-reco-tag {
  position: absolute;
  left: .7rem;
  top: .7rem;
  background: rgba(8, 36, 24, .78);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .28rem .55rem;
  border-radius: 999px;
}
.wisata-reco-body { padding: .9rem 1rem 1.05rem; }
.wisata-reco-body h4 {
  margin: 0 0 .35rem;
  font-size: clamp(.98rem, 1.6vw, 1.08rem);
  color: var(--maros-900);
}
.wisata-reco-body p {
  margin: 0 0 .7rem;
  font-size: .86rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.wisata-cta-row {
  padding: 1.25rem var(--wisata-gutter) clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  justify-content: center;
}
.wisata-ticket-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: clamp(1rem, 2.5vw, 1.35rem) clamp(1rem, 2.5vw, 1.5rem);
  border-radius: 1rem;
  background: linear-gradient(135deg, #e8f6ee, #f7fcf9);
  border: 1px solid rgba(31, 122, 77, .14);
  box-sizing: border-box;
}
.wisata-ticket-cta h3 {
  margin: 0 0 .25rem;
  color: var(--maros-900);
  font-size: clamp(1.02rem, 2vw, 1.2rem);
}
.wisata-ticket-cta p {
  margin: 0;
  color: var(--text-muted);
  font-size: .88rem;
  max-width: 40rem;
}

/* —— Pembayaran QRIS (pola koperasi) —— */
.wisata-pay-crumb {
  margin: 0 0 12px;
  font-size: .82rem;
  color: var(--text-muted);
}
.wisata-pay-crumb a { color: var(--maros-700); text-decoration: none; font-weight: 600; }
.qris-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 2rem;
}
.qris-summary,
.qris-pay,
.qris-success {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  border: 1px solid var(--stone);
  box-shadow: 0 10px 28px rgba(8, 40, 28, .05);
}
.qris-summary h2,
.qris-pay h2,
.qris-success h2 {
  margin: 0 0 14px;
  color: var(--maros-900);
  font-size: 1.2rem;
}
.qris-summary-photo {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
  display: block;
}
.qris-summary table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.qris-summary th,
.qris-summary td {
  padding: .55rem 0;
  border-bottom: 1px solid #f0f2f1;
  text-align: left;
  vertical-align: top;
}
.qris-summary th { color: var(--text-muted); font-weight: 600; font-size: .78rem; }
.qris-summary .right { text-align: right; white-space: nowrap; }
.qris-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-size: 1.05rem;
  gap: 1rem;
}
.qris-total b {
  color: var(--maros-700, #1f7a4d);
  font-size: 1.25rem;
}
.qris-pay { text-align: center; }
.qris-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #0d6b3c, #14945a);
  color: #fff;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: .78rem;
}
.qris-sandbox {
  letter-spacing: .06em;
  background: #fff4d6;
  color: #8a5a00;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
}
.qris-frame {
  width: 280px;
  height: 280px;
  margin: 16px auto;
  padding: 10px;
  border: 8px solid #14945a;
  border-radius: 12px;
  background: #fff;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}
.qris-frame img {
  width: 260px;
  height: 260px;
  object-fit: contain;
  display: block;
  background: #fff;
  image-rendering: pixelated;
}
.qris-amount {
  font-size: 28px;
  font-weight: 800;
  color: var(--maros-800, #0d6b3c);
  margin: .25rem 0 .5rem;
}
.qris-timer {
  font-weight: 700;
  color: var(--maros-700, #1f7a4d);
  margin: .35rem 0;
}
.qris-wait {
  font-weight: 800;
  color: var(--maros-800, #0d6b3c);
  margin: 0 0 8px;
  animation: qrisPulse 1.4s ease-in-out infinite;
}
@keyframes qrisPulse {
  50% { opacity: .55; }
}
.qris-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 12px 0 18px;
}
.qris-apps span {
  border: 1px solid #cfe8d9;
  background: #f3fbf6;
  color: #0d6b3c;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
}
.qris-success {
  max-width: 640px;
  margin: 0 auto 2rem;
  text-align: center;
}
.qris-ok {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #0f9d73;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 800;
}
.qris-ticket-code {
  display: inline-block;
  margin: .5rem 0 1rem;
  padding: .65rem 1rem;
  border-radius: .75rem;
  background: #f3faf6;
  border: 1px dashed rgba(31,122,77,.35);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--maros-900);
  letter-spacing: .04em;
}
.qris-summary .hint,
.qris-pay .hint,
.qris-pay .muted {
  color: var(--text-muted);
  font-size: .86rem;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .qris-layout { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .qris-frame { width: min(280px, 86vw); height: auto; aspect-ratio: 1; }
  .qris-frame img { width: 100%; height: auto; }
  .qris-amount { font-size: 1.45rem; }
}

/* Beli tiket + bayar QRIS */
.wisata-ticket-page { margin-bottom: 2rem; }
.wisata-ticket-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.wisata-ticket-head h1 {
  margin: .15rem 0 .35rem;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  color: var(--maros-900);
}
.wisata-ticket-head p { margin: 0; color: var(--text-muted); max-width: 36rem; }
.wisata-ticket-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}
@media (min-width: 900px) {
  .wisata-ticket-layout { grid-template-columns: 1.15fr .85fr; align-items: start; }
}
.wisata-ticket-list { display: grid; gap: .75rem; }
.wisata-ticket-option {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: .85rem;
  border: 1px solid var(--stone);
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.wisata-ticket-option input { position: absolute; opacity: 0; pointer-events: none; }
.wisata-ticket-option.is-selected,
.wisata-ticket-option:has(input:checked) {
  border-color: rgba(31, 122, 77, .55);
  box-shadow: 0 0 0 3px rgba(31, 122, 77, .12);
}
.wisata-ticket-option-photo {
  height: 88px;
  background: var(--stone);
}
.wisata-ticket-option-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wisata-ticket-option-body {
  padding: .7rem .7rem .7rem 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.wisata-ticket-option-body strong {
  color: var(--maros-900);
  font-size: .95rem;
}
.wisata-ticket-option-body span,
.wisata-ticket-option-body em {
  font-size: .78rem;
  color: var(--text-muted);
  font-style: normal;
}
.wisata-ticket-summary {
  margin: .25rem 0 1rem;
  border: 1px solid var(--stone);
  border-radius: .9rem;
  overflow: hidden;
}
.wisata-ticket-summary > div,
.wisata-pay-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .85rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
  font-size: .88rem;
}
.wisata-ticket-summary > div:last-child,
.wisata-pay-meta > div:last-child { border-bottom: 0; }
.wisata-ticket-summary span,
.wisata-pay-meta span { color: var(--text-muted); }
.wisata-ticket-summary .is-total,
.wisata-pay-meta .is-total {
  background: #f3faf6;
  font-size: 1rem;
}
.wisata-pay-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  margin-bottom: 2rem;
}
@media (min-width: 860px) {
  .wisata-pay-layout { grid-template-columns: 1.2fr .8fr; align-items: start; }
}
.wisata-qris-box {
  position: relative;
  text-align: center;
  padding: 1.15rem 1rem 1rem;
  border: 1px dashed rgba(31, 122, 77, .35);
  border-radius: 1rem;
  background: #fbfefc;
}
.wisata-qris-badge {
  display: inline-block;
  margin-bottom: .65rem;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: #123d28;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wisata-qris-merchant {
  margin: 0 0 .75rem;
  font-weight: 700;
  color: var(--maros-900);
  letter-spacing: .02em;
}
.wisata-qris-canvas {
  display: grid;
  place-items: center;
  min-height: 260px;
  margin: 0 auto;
}
.wisata-qris-box--stable {
  user-select: none;
  -webkit-user-select: none;
}
.wisata-qris-canvas--stable {
  min-height: 300px;
  padding: .75rem;
  background: #fff;
  border-radius: .85rem;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 24px rgba(6, 40, 24, .06);
}
.wisata-qris-canvas--stable img {
  display: block;
  width: min(300px, 72vw);
  height: auto;
  image-rendering: pixelated;
  background: #fff;
}
.wisata-qris-canvas canvas,
.wisata-qris-canvas img,
.qris-js-box img,
.qris-js-box canvas {
  border-radius: .5rem;
  background: #fff;
  max-width: 100%;
  height: auto;
}
.qris-js-box {
  display: inline-grid;
  place-items: center;
  padding: .5rem;
  background: #fff;
  border-radius: .65rem;
  border: 1px solid rgba(0,0,0,.06);
}
.wisata-qris-static {
  max-width: 280px;
  width: 100%;
  margin: .5rem auto;
  display: block;
  border-radius: .5rem;
}
.wisata-qris-payload {
  margin-top: .85rem;
  text-align: left;
}
.wisata-qris-payload summary {
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--maros-900);
}
.wisata-qris-payload textarea {
  margin-top: .5rem;
  font-size: .7rem;
  line-height: 1.4;
}
.wisata-qris-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  margin-top: .85rem;
}
.wisata-qris-amount {
  margin: .75rem 0 .35rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--maros-900);
}
.wisata-pay-side-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: .9rem;
  display: block;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* HP landscape / tablet kecil */
@media (min-width: 560px) {
  .wisata-reco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
  .wisata-info-card { flex: 0 0 min(46vw, 340px); }
  .wisata-cats { max-width: none; }
}

/* Tablet */
@media (min-width: 768px) {
  .wisata-hero-banner { min-height: clamp(240px, 34vw, 360px); }
  .wisata-info-card { flex: 0 0 min(38vw, 360px); }
  .wisata-cats {
    grid-template-columns: repeat(4, minmax(7rem, 10rem));
    justify-content: start;
    gap: 1rem 1.5rem;
  }
  .wisata-ticket-cta { flex-wrap: nowrap; }
}

/* Desktop */
@media (min-width: 1024px) {
  .wisata-reco { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .wisata-reco-photo { height: 210px; }
  .wisata-info-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .wisata-info-card { flex: none; width: 100%; }
  .wisata-info-dots { display: none; }
  .wisata-hero-banner-inner { max-width: 52rem; }
}

/* Desktop lebar */
@media (min-width: 1280px) {
  .wisata-reco { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wisata-section,
  .wisata-app-top,
  .wisata-cta-row,
  .wisata-hero-banner-inner {
    padding-left: max(var(--wisata-gutter), calc((100% - 1280px) / 2 + var(--wisata-gutter)));
    padding-right: max(var(--wisata-gutter), calc((100% - 1280px) / 2 + var(--wisata-gutter)));
  }
  .wisata-hero-banner-inner {
    padding-top: clamp(1.25rem, 4vw, 2.75rem);
    padding-bottom: clamp(1.25rem, 4vw, 2.75rem);
  }
  .wisata-info-track {
    padding-left: 0;
    padding-right: 0;
  }
}

/* HP sangat sempit */
@media (max-width: 380px) {
  .wisata-cats { gap: .35rem; }
  .wisata-cat-icon { border-radius: .85rem; }
  .wisata-ticket-cta .btn { width: 100%; text-align: center; }
}


.news-body {
  padding: 1rem 1.05rem 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: .15rem;
}
.news-chip {
  display: inline-flex;
  align-items: center;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: #EEF1EF;
  color: #5B6B63;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
}
.news-dot { opacity: .55; }
.news-body h3 {
  font-size: .98rem;
  margin: 0;
  color: var(--maros-950);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-body p {
  font-size: .84rem;
  color: var(--text-muted);
  flex: 1;
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.agenda-list {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: .25rem 1.1rem;
}

.agenda-item {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: .9rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--stone);
}
.agenda-item:last-child { border-bottom: none; }

.agenda-date {
  text-align: center;
  background: var(--maros-100);
  border-radius: var(--radius-sm);
  padding: .5rem .3rem;
  color: var(--maros-900);
}
.agenda-date .day {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
  display: block;
}
.agenda-date .mon {
  font-size: .65rem;
  text-transform: uppercase;
  font-weight: 700;
}

/* ========== BOTTOM NAV (mobile) ========== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 250;
  height: var(--bottom-nav-h);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-top: 1px solid rgba(226, 232, 228, .95);
  box-shadow: 0 -10px 30px rgba(6, 48, 28, 0.06);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .15rem;
  padding: .4rem .35rem calc(.4rem + env(safe-area-inset-bottom));
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #66756c;
  border-radius: 14px;
  padding: .4rem .2rem;
  transition: color .15s, background .15s, transform .15s;
}

.bottom-nav a .bn-ico {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: transparent;
  transition: background .15s, color .15s, box-shadow .15s;
}
.bottom-nav a .bn-ico svg {
  width: 20px;
  height: 20px;
}
.bottom-nav a .bn-label {
  line-height: 1;
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 700;
}

.bottom-nav a:hover {
  color: var(--maros-800);
  background: var(--maros-50);
}

.bottom-nav a.active {
  color: var(--maros-900);
  background: linear-gradient(180deg, #EAF8EF, #F7FBF8);
}
.bottom-nav a.active .bn-ico {
  color: #fff;
  background: linear-gradient(135deg, var(--maros-800), var(--maros-600));
  box-shadow: 0 6px 14px rgba(13, 107, 60, 0.26);
}

@media (min-width: 1100px) {
  .bottom-nav { display: none; }
}

/* ========== CARDS / PANELS ========== */
.panel {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 900px) {
  .panel { padding: 1.45rem 1.5rem; }
}
@media (min-width: 1200px) {
  .panel { padding: 1.6rem 1.75rem; }
}

.panel-title {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--maros-900);
  margin-bottom: 1rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  width: 100%;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; }
  .grid-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1600px) {
  .grid-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); }
}

.stat-box {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.stat-box .num {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--maros-900);
  line-height: 1.1;
}
.stat-box .lbl {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .2rem;
}

/* ========== FORMS ========== */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-weight: 700;
  font-size: .84rem;
  margin-bottom: .35rem;
  color: var(--maros-900);
}
.form-control {
  width: 100%;
  padding: .7rem .95rem;
  border: 1.5px solid var(--stone);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus {
  outline: none;
  border-color: var(--maros-700);
  box-shadow: 0 0 0 3px rgba(13, 107, 60, 0.12);
}
textarea.form-control { min-height: 100px; resize: vertical; }
.form-hint { font-size: .75rem; color: var(--text-muted); margin-top: .25rem; }

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  width: 100%;
}
@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  .form-row { gap: 1.1rem; }
}

/* ========== AUTH ========== */
.auth-page {
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: var(--gutter, 1.5rem);
  background:
    radial-gradient(ellipse at 15% 20%, rgba(212,160,23,.18), transparent 45%),
    radial-gradient(ellipse at 85% 80%, rgba(13,107,60,.14), transparent 45%),
    var(--mist);
  box-sizing: border-box;
}
.auth-card {
  width: 100%;
  max-width: 520px;
  background: var(--white);
  border-radius: 20px;
  padding: 1.75rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--stone);
}
.auth-card h1 {
  font-family: var(--display);
  font-size: 1.55rem;
  color: var(--maros-900);
  margin: .85rem 0 .3rem;
}
.auth-card .sub {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  font-size: .9rem;
}
.auth-footer {
  text-align: center;
  margin-top: 1.1rem;
  font-size: .88rem;
  color: var(--text-muted);
}

.auth-demo {
  margin-top: 1.15rem;
  border-radius: 14px;
  border: 1px solid var(--stone);
  background: var(--maros-50, #F2FBF5);
  overflow: hidden;
}
.auth-demo > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 1rem;
  font-size: .84rem;
  font-weight: 700;
  color: var(--maros-900);
  user-select: none;
}
.auth-demo > summary::-webkit-details-marker { display: none; }
.auth-demo > summary svg {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .2s ease;
}
.auth-demo[open] > summary svg { transform: rotate(180deg); }
.auth-demo[open] > summary {
  border-bottom: 1px solid rgba(20, 60, 40, .08);
}
.auth-demo-body { padding: .75rem .85rem 1rem; }
.auth-demo-note {
  margin: 0 0 .65rem;
  font-size: .78rem;
  color: var(--text-muted);
}
.auth-demo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.auth-demo-fill {
  width: 100%;
  display: grid;
  gap: .1rem;
  text-align: left;
  padding: .65rem .75rem;
  border-radius: 11px;
  border: 1px solid rgba(20, 60, 40, .08);
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.auth-demo-fill:hover {
  border-color: rgba(13, 107, 60, .28);
  box-shadow: 0 6px 16px rgba(6, 48, 28, .06);
}
.auth-demo-fill strong {
  font-size: .82rem;
  color: var(--maros-950);
}
.auth-demo-fill span {
  font-size: .74rem;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.auth-demo-hint {
  margin: .7rem 0 0;
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ========== TABLES ========== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  min-width: 520px;
}
table.data th, table.data td {
  padding: .75rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--stone);
}
table.data th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--maros-50);
}
table.data tr:hover td { background: rgba(230, 246, 236, 0.45); }

/* ========== BADGES ========== */
.badge {
  display: inline-block;
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
}
.badge-info { background: #E5F2FA; color: var(--info); }
.badge-warning { background: var(--gold-100); color: var(--warning); }
.badge-primary { background: var(--maros-100); color: var(--maros-800); }
.badge-success { background: #DDF3E9; color: var(--success); }
.badge-danger { background: #FDE8E6; color: var(--danger); }
.badge-muted { background: var(--mist); color: var(--text-muted); }

/* ========== ALERTS ========== */
.alert {
  padding: .85rem 1rem;
  border-radius: 14px;
  margin-bottom: .9rem;
  font-size: .88rem;
  border: 1px solid transparent;
  line-height: 1.45;
}
.alert-success { background: #DDF3E9; border-color: #B5E4CD; color: var(--success); }
.alert-error { background: #FDE8E6; border-color: #F5C4BE; color: var(--danger); }
.alert-info { background: #E5F2FA; border-color: #B8D9ED; color: var(--info); }
.alert-warning { background: #FFF6E5; border-color: #F0D7A3; color: #9A6700; }

.alert-premium {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .95rem 1rem;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(226, 232, 228, .95);
  box-shadow: 0 10px 28px rgba(6, 48, 28, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: alertIn .35s cubic-bezier(.22,1,.36,1);
}
.alert-premium.alert-success { border-color: rgba(13,107,60,.18); }
.alert-premium.alert-error { border-color: rgba(198,40,40,.18); }
.alert-premium.alert-info { border-color: rgba(33,120,180,.18); }
.alert-premium.alert-warning { border-color: rgba(154,103,0,.18); }
.alert-ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
}
.alert-success .alert-ico { background: #E4F7EE; color: #0D6B3C; }
.alert-error .alert-ico { background: #FDECEA; color: #C62828; }
.alert-info .alert-ico { background: #EAF4FC; color: #1E6FA8; }
.alert-warning .alert-ico { background: #FFF3D6; color: #9A6700; }
.alert-content { min-width: 0; flex: 1; }
.alert-content strong {
  display: block;
  font-size: .82rem;
  letter-spacing: .01em;
  margin-bottom: .15rem;
  color: var(--maros-950);
}
.alert-content p {
  margin: 0;
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ========== Toast premium ========== */
.toast-host {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  width: min(380px, calc(100vw - 1.5rem));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: start;
  padding: .95rem 1rem 1.05rem;
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(226, 232, 228, .95);
  box-shadow:
    0 18px 40px rgba(6, 48, 28, 0.12),
    0 2px 8px rgba(6, 48, 28, 0.05);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
.toast.toast-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.toast.toast-out {
  opacity: 0;
  transform: translateY(-8px) scale(.98);
}
.toast-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.toast-success .toast-ico { background: linear-gradient(145deg, #E8F7EF, #D4F0E2); color: #0D6B3C; }
.toast-error .toast-ico { background: linear-gradient(145deg, #FDECEA, #F8D7D4); color: #C62828; }
.toast-info .toast-ico { background: linear-gradient(145deg, #EAF4FC, #D7EAF8); color: #1E6FA8; }
.toast-warning .toast-ico { background: linear-gradient(145deg, #FFF6E5, #FCE8C2); color: #9A6700; }
.toast-body { min-width: 0; padding-top: .05rem; }
.toast-title {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--maros-950);
  margin-bottom: .2rem;
}
.toast-msg {
  margin: 0;
  font-size: .9rem;
  line-height: 1.4;
  color: #3F4F46;
  word-break: break-word;
}
.toast-close {
  border: 0;
  background: transparent;
  color: #7A8A81;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.toast-close:hover {
  background: rgba(6, 48, 28, 0.06);
  color: var(--maros-900);
}
.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  animation: toastProgress linear forwards;
  opacity: .85;
}
.toast-success .toast-progress { background: linear-gradient(90deg, #0D6B3C, #2EA86A); }
.toast-error .toast-progress { background: linear-gradient(90deg, #C62828, #E57373); }
.toast-info .toast-progress { background: linear-gradient(90deg, #1E6FA8, #64B5F6); }
.toast-warning .toast-progress { background: linear-gradient(90deg, #9A6700, #E0A800); }

@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
@keyframes alertIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 699.98px) {
  .toast-host {
    top: auto;
    bottom: calc(var(--bottom-nav-h, 64px) + .75rem + env(safe-area-inset-bottom));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 1.25rem));
  }
  body:has(.auth-page) .toast-host {
    top: calc(1rem + env(safe-area-inset-top));
    bottom: auto;
    transform: translateX(-50%);
  }
  .toast {
    transform: translateY(12px) scale(.98);
  }
  .toast.toast-in {
    transform: translateY(0) scale(1);
  }
  .toast.toast-out {
    transform: translateY(10px) scale(.98);
  }
}

/* ========== MAP ========== */
#map, .map-box {
  width: 100%;
  height: 260px;
  border-radius: var(--radius);
  border: 1px solid var(--stone);
  z-index: 1;
}
@media (min-width: 640px) {
  #map, .map-box { height: 340px; }
}
@media (min-width: 900px) {
  #map, .map-box { height: 420px; }
}
@media (min-width: 1200px) {
  #map, .map-box { height: 480px; }
}
.map-hint { font-size: .8rem; color: var(--text-muted); margin-top: .45rem; }

/* ========== TIMELINE ========== */
.timeline { position: relative; padding-left: 1.4rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: 5px; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--stone);
}
.timeline-item { position: relative; padding-bottom: 1.1rem; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.4rem; top: 5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--maros-700);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--maros-100);
}
.timeline-item .time { font-size: .75rem; color: var(--text-muted); }
.timeline-item .title { font-weight: 700; font-size: .9rem; }

/* ========== TABS ========== */
.tabs {
  display: flex;
  gap: .35rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid var(--stone);
  padding-bottom: .45rem;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: .5rem .9rem;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-weight: 700;
  font-size: .84rem;
  color: var(--text-muted);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-btn.active {
  background: var(--maros-800);
  color: var(--white);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: rise .3s ease; }

/* ========== PAGE HEADER ========== */
.page-header {
  margin-bottom: 1.35rem;
  width: 100%;
}
.page-header h1 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 4vw, 2rem);
  color: var(--maros-900);
}
.page-header p { color: var(--text-muted); margin-top: .25rem; font-size: .92rem; }
.breadcrumb { font-size: .78rem; color: var(--text-muted); margin-bottom: .4rem; }
.breadcrumb a { color: var(--maros-700); }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.spinner {
  width: 26px; height: 26px;
  border: 3px solid var(--stone);
  border-top-color: var(--maros-700);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 1rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== DOCTOR ========== */
.doctor-card {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.doctor-avatar {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--maros-800), var(--maros-600));
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* ========== ADMIN ========== */
.admin-layout {
  display: grid;
  grid-template-columns: 1fr;
  min-height: calc(100vh - var(--nav-h));
}
.sidebar {
  background: var(--maros-950);
  color: rgba(255,255,255,.8);
  padding: 1.25rem 1rem;
  display: none;
}
.sidebar a {
  display: block;
  padding: .6rem 1rem;
  border-radius: var(--radius-xs);
  color: rgba(255,255,255,.75);
  font-size: .88rem;
  margin-bottom: .15rem;
}
.sidebar a:hover, .sidebar a.active {
  background: rgba(255,255,255,.1);
  color: var(--white);
}
.admin-content { padding: 1.25rem; background: var(--mist); }

@media (min-width: 900px) {
  .admin-layout { grid-template-columns: 230px 1fr; }
  .sidebar { display: block; }
  .admin-content { padding: 1.75rem; }
}

/* ========== FOOTER ========== */
.footer {
  background: var(--maros-950);
  color: rgba(255,255,255,.72);
  padding: 2.5rem 0 1.25rem;
  margin-top: auto;
  width: 100%;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  width: 100%;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 1200px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
}
.footer h4 {
  color: var(--white);
  font-family: var(--display);
  margin-bottom: .85rem;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.footer p {
  font-size: .9rem;
  line-height: 1.65;
  max-width: 42ch;
}
.footer ul li {
  margin-bottom: .45rem;
}
.footer a {
  color: rgba(255,255,255,.78);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.45;
}
.footer a:hover { color: var(--gold-400); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1rem;
  font-size: .78rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem;
}

/* ========== SERVICE TILE (inner pages) ========== */
.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  width: 100%;
}
@media (min-width: 480px) {
  .service-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .service-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (min-width: 1200px) {
  .service-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
}

.service-tile {
  display: block;
  padding: 1.2rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--stone);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  color: inherit;
  height: 100%;
}
.service-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--maros-700);
  color: inherit;
}
.service-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: .85rem;
  font-size: 1.25rem;
  background: var(--maros-100);
  color: var(--maros-800);
}
.service-tile h3 { font-size: 1rem; margin-bottom: .3rem; color: var(--maros-900); }
.service-tile p { font-size: .84rem; color: var(--text-muted); }
.service-tile[data-tone="amber"] .service-icon { background: var(--gold-100); color: #9A7508; }
.service-tile[data-tone="teal"] .service-icon { background: #D9F5E8; color: var(--success); }
.service-tile[data-tone="coral"] .service-icon { background: #FDE8E6; color: var(--danger); }
.service-tile[data-tone="info"] .service-icon { background: var(--sky); color: var(--info); }

/* ========== DOWNLOAD CTA ========== */
.download-cta {
  background: linear-gradient(135deg, var(--maros-900), var(--maros-700));
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  color: var(--white);
  display: grid;
  gap: 1.25rem;
  align-items: center;
  margin: 1.5rem 0;
}
@media (min-width: 700px) {
  .download-cta {
    grid-template-columns: 1.3fr auto;
    padding: 2rem 2.25rem;
  }
}
.download-cta h2 {
  font-family: var(--display);
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  margin-bottom: .4rem;
}
.download-cta p { opacity: .88; font-size: .92rem; max-width: 42ch; }
.download-btns { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Legacy hero (inner pages fallback) */
.hero {
  background: linear-gradient(155deg, var(--maros-950), var(--maros-800));
  color: var(--white);
  padding: 3rem 0 3.5rem;
}
.hero-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
}
.hero p.lead { opacity: .88; max-width: 36ch; margin: .75rem 0 1.25rem; }
.hero-visual { position: relative; min-height: 160px; }
.hero-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 1.25rem;
}
.hero-stat {
  font-family: var(--display);
  font-size: 1.75rem;
  color: var(--gold-400);
  display: block;
}
.hero-card small { opacity: .75; font-size: .82rem; }

/* ========== PREMIUM AI ICONS & CATALOG ========== */
.landing-hero.has-photo {
  width: 100%;
  min-height: clamp(320px, 48vw, 560px);
  background:
    linear-gradient(105deg, rgba(6,48,28,.92) 0%, rgba(10,74,42,.72) 42%, rgba(13,107,60,.35) 70%, rgba(6,48,28,.55) 100%),
    var(--hero-photo) center/cover no-repeat;
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 5vw, 4.5rem);
}
@media (min-width: 1200px) {
  .landing-hero.has-photo { min-height: 520px; }
}

.landing-hero.has-photo::before { opacity: .35; }

.icon-bubble.img {
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  padding: 0;
  border-radius: 18px;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(13,107,60,.08);
}

.icon-bubble.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 640px) {
  .icon-bubble.img { width: 64px; height: 64px; border-radius: 20px; }
}

.icon-grid.premium {
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem .55rem;
}

@media (min-width: 700px) {
  .icon-grid.premium { grid-template-columns: repeat(4, 1fr); gap: 1.25rem 1rem; }
}
@media (min-width: 1024px) {
  .icon-grid.premium { grid-template-columns: repeat(8, 1fr); }
}

.service-panel.premium {
  padding: 1.5rem 1.15rem 1.75rem;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(6, 48, 28, 0.1);
  border: 1px solid rgba(226, 232, 228, .9);
  background:
    linear-gradient(180deg, #fff 0%, #f7fbf8 100%);
}

.icon-item.premium:hover .icon-bubble.img {
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(13, 107, 60, 0.18);
}
.icon-bubble.img { transition: transform .2s, box-shadow .2s; }

.svc-catalog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}
@media (min-width: 600px) {
  .svc-catalog { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .svc-catalog { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1400px) {
  .svc-catalog { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
}

.svc-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem;
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: 18px;
  color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  height: 100%;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--maros-600);
  color: inherit;
}
.svc-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(13,107,60,.12);
  border: 1px solid rgba(13,107,60,.06);
}
.svc-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-card h3 {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--maros-900);
  margin-bottom: .25rem;
}
.svc-card p {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.svc-card .chip {
  display: inline-block;
  margin-top: .55rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--maros-100);
  color: var(--maros-800);
}

.glass-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin-top: 0;
  width: 100%;
}
.glass-stats.compact .glass-stat {
  padding: .7rem .55rem;
  border-radius: 14px;
  text-align: center;
}
.glass-stat {
  background: rgba(5, 38, 24, .72);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: .85rem;
}
.glass-stat strong {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  color: #F5D76E;
  line-height: 1.1;
}
.glass-stat span {
  display: block;
  margin-top: .15rem;
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
}

.category-pills {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.category-pills button {
  border: 1px solid var(--stone);
  background: var(--white);
  color: var(--text-muted);
  padding: .45rem .9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
}
.category-pills button.active {
  background: var(--maros-800);
  border-color: var(--maros-800);
  color: #fff;
}

.promo-card.premium {
  min-height: 0;
  border-radius: 20px;
  padding: 1.2rem 1.2rem 1.25rem;
}
.promo-card.premium .promo-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: .75rem;
  border: 2px solid rgba(255,255,255,.35);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.promo-card.premium .promo-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 700px) {
  .promo-card.premium {
    min-height: 160px;
    border-radius: 22px;
    padding: 1.4rem 1.35rem;
  }
}

.page-hero-mini {
  background:
    linear-gradient(120deg, rgba(6,48,28,.88), rgba(13,107,60,.75)),
    var(--hero-photo, none) center/cover;
  color: #fff;
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1.15rem;
  align-items: center;
}
.page-hero-mini img {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  flex-shrink: 0;
}
.page-hero-mini h1 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  color: #fff;
  margin-bottom: .35rem;
}
.page-hero-mini p {
  opacity: .9;
  font-size: .92rem;
  color: rgba(255,255,255,.92);
}

/* ========== Google Auth ========== */
.btn-google {
  background: #fff;
  color: #3c4043;
  border: 1.5px solid #dadce0;
  box-shadow: 0 1px 2px rgba(60,64,67,.08);
  font-weight: 600;
}
.btn-google:hover {
  background: #f8f9fa;
  color: #202124;
  border-color: #c6c6c6;
}
.btn-google.is-disabled,
.btn-google[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.1rem 0;
  color: var(--text-muted);
  font-size: .78rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--stone);
}
.switch-label {
  display: flex !important;
  align-items: center;
  gap: .65rem;
  font-weight: 600 !important;
  cursor: pointer;
}
.switch-label input { width: 18px; height: 18px; accent-color: var(--maros-800); }
.maintenance-banner {
  background: linear-gradient(90deg, #8A5A10, #D4A017);
  color: #1a1408;
  text-align: center;
  padding: .65rem 1rem;
  font-size: .88rem;
  font-weight: 600;
}

/* ========== ADMIN SIDEBAR (selalu kiri) ========== */
body.admin-body { padding-bottom: 0; }
body.admin-body .bottom-nav { display: none !important; }
body.admin-body .footer { display: none; }

.admin-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - var(--nav-h));
  width: 100%;
}

.admin-sidebar {
  display: flex !important;
  flex-direction: column;
  background: linear-gradient(180deg, #06301C 0%, #0A4A2A 100%);
  color: rgba(255,255,255,.85);
  padding: 1.15rem .85rem 1.5rem;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  z-index: 120;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .35rem .65rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: .85rem;
  color: #fff;
}
.sidebar-brand strong { display: block; font-family: var(--display); font-size: .98rem; }
.sidebar-brand small { font-size: .68rem; opacity: .7; }

.sidebar-group {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .45;
  padding: .65rem .85rem .35rem;
  font-weight: 700;
}

.admin-sidebar a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .85rem;
  border-radius: 10px;
  color: rgba(255,255,255,.78);
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: .15rem;
}
.admin-sidebar a:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.admin-sidebar a.active {
  background: rgba(232, 185, 58, .18);
  color: var(--gold-400);
}
.admin-sidebar .nav-ico { width: 1.25rem; text-align: center; opacity: .9; }
.sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

.admin-content {
  padding: 1.5rem var(--gutter, 1.35rem) 2.5rem;
  background: var(--mist);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 1200px) {
  .admin-content { padding: 1.65rem 2rem 2.75rem; }
}

.admin-sidebar-toggle,
.admin-sidebar-backdrop { display: none; }

.svc-admin-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: .9rem 0;
  border-bottom: 1px solid var(--stone);
}
.svc-admin-row:last-child { border-bottom: none; }
.svc-admin-row img {
  width: 56px; height: 56px;
  border-radius: 14px;
  object-fit: cover;
}
.svc-admin-toggles {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  align-items: flex-end;
}
.svc-admin-toggles label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: fixed;
    left: 0; top: 0;
    height: 100vh;
    width: min(280px, 86vw);
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 300;
    padding-top: 1.25rem;
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-sidebar-toggle {
    display: grid !important;
    place-items: center;
    position: fixed;
    left: .85rem;
    bottom: 1.1rem;
    z-index: 280;
    width: 48px; height: 48px;
    border-radius: 14px;
    border: none;
    background: var(--maros-800);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
  }
  .admin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6,48,28,.45);
    z-index: 290;
  }
  .admin-sidebar-backdrop.show { display: block; }
}

/* ========== Bank Sampah search (segmented control) ========== */
.bank-search {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: 18px;
  padding: 1.35rem 1.25rem 1.2rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
  width: 100%;
  box-sizing: border-box;
}
.bank-search h2 {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  color: #1a1a1a;
  margin: 0 0 .45rem;
}
.bank-search > p {
  color: var(--text-muted);
  font-size: .92rem;
  margin: 0 0 1.15rem;
  max-width: min(64ch, 100%);
}

.seg-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
  background: #EEF0F2;
  border-radius: 12px;
  padding: .3rem;
  margin-bottom: 1.1rem;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 640px) {
  .seg-control { max-width: 420px; }
}
.seg-btn {
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: .7rem 1rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: .92rem;
  color: #1B2A41;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg-btn.active {
  background: #fff;
  color: #8B1E2D;
  box-shadow: 0 2px 8px rgba(27, 42, 65, 0.1);
}
.seg-btn:not(.active):hover {
  color: var(--maros-800);
}

.bank-search-panel { display: none; }
.bank-search-panel.active { display: block; animation: rise .3s ease; }

.bank-result-meta {
  margin-top: .9rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--maros-800);
}

/* ========== Map service icons ========== */
.svc-map-icon {
  background: transparent !important;
  border: none !important;
}
.leaflet-marker-icon.svc-map-icon {
  filter: drop-shadow(0 3px 6px rgba(6, 48, 28, 0.28));
}
.map-popup-bank {
  font-size: .88rem;
  line-height: 1.4;
  min-width: 140px;
}
.map-popup-bank strong {
  color: #0D6B3C;
  display: block;
  margin-bottom: .2rem;
}

/* ========== Pajak catalog ========== */
.pajak-catalog-panel .panel-title {
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  margin-bottom: 1.15rem;
}
.pajak-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem .75rem;
}
.pajak-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .45rem;
  color: inherit;
  padding: .35rem .2rem;
  border-radius: 14px;
  transition: transform .15s, background .15s;
  min-width: 0;
}
.pajak-tile:hover {
  color: inherit;
  background: var(--maros-50);
  transform: translateY(-2px);
}
.pajak-tile.active {
  background: var(--maros-50);
}
.pajak-tile-ico {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  background: #EEF2F0;
  border: 1px solid var(--stone);
  box-shadow: 0 8px 18px rgba(6, 48, 28, 0.08);
  display: grid;
  place-items: center;
}
.pajak-tile-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pajak-tile strong {
  font-family: var(--display);
  font-size: .88rem;
  color: var(--maros-950);
  line-height: 1.25;
}
.pajak-tile span {
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.3;
  max-width: 14ch;
}
.pajak-result-card {
  border: 1px solid var(--stone);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: .75rem;
  background: #fff;
}
.pajak-result-main {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pajak-result-main .muted {
  font-size: .85rem;
  color: var(--text-muted);
}
.pajak-result-pay {
  text-align: right;
}
.pajak-result-pay .amount {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--maros-900);
}

/* ========== Pajak service forms ========== */
.pajak-service-card {
  margin-top: 1rem;
  background: #fff;
  border: 1px solid var(--stone);
  border-radius: 18px;
  padding: 1.35rem 1.2rem 1.25rem;
  box-shadow: 0 10px 28px rgba(6, 48, 28, 0.06);
  max-width: 560px;
}
.pajak-svc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.pajak-svc-head h2 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--maros-950);
}
.pajak-count-pill {
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--maros-800);
  border: 1.5px solid var(--maros-600);
  border-radius: 999px;
  padding: .28rem .7rem;
  background: var(--maros-50);
}
.pajak-empty {
  text-align: center;
  padding: .5rem .25rem 1.1rem;
}
.pajak-empty-ico {
  width: 64px;
  height: 64px;
  margin: 0 auto .85rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #E8F5EE;
  color: var(--maros-800);
}
.pajak-empty-ico--coin {
  background: #EAF6EF;
}
.pajak-empty h3 {
  margin: 0 0 .45rem;
  font-size: 1.05rem;
  color: var(--maros-950);
}
.pajak-empty p {
  margin: 0 auto;
  max-width: 36ch;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.pajak-form {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.pajak-form label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--maros-950);
  margin-top: .55rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.pajak-form .form-control {
  border-radius: 12px;
  min-height: 46px;
}
.pajak-form .form-control.is-locked,
.pajak-form .form-control:disabled {
  background: #F3F4F3;
  color: var(--text-muted);
  cursor: not-allowed;
}
.pajak-form .btn-block {
  width: 100%;
  margin-top: 1rem;
  min-height: 48px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.pajak-lock {
  font-size: .75rem;
  opacity: .55;
}
.pajak-info-foot {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin-top: 1.15rem;
  padding-top: .85rem;
  border-top: 1px solid var(--stone);
}
.pajak-info-ico {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--maros-700);
  color: var(--maros-700);
  font-size: .72rem;
  font-weight: 700;
  font-style: italic;
  display: grid;
  place-items: center;
  margin-top: .1rem;
}
.pajak-info-foot p {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.pajak-hasil {
  margin-top: 1rem;
}
.pajak-riwayat-block {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--stone);
}
.pajak-riwayat-block h3 {
  margin: 0 0 .75rem;
  font-size: 1rem;
}

@media (min-width: 900px) {
  .pajak-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem 1rem;
  }
  .pajak-tile-ico {
    width: 84px;
    height: 84px;
    border-radius: 20px;
  }
  .pajak-tile strong { font-size: .95rem; }
  .pajak-tile span { max-width: 16ch; font-size: .76rem; }
}
@media (max-width: 699.98px) {
  .pajak-tile-ico {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
  .pajak-tile strong { font-size: .8rem; }
  .pajak-tile span {
    font-size: .68rem;
    max-width: 11ch;
  }
}

/* ========== MOBILE HP polish ========== */
@media (max-width: 699.98px) {
  :root {
    --gutter: .9rem;
    --nav-h: 64px;
    --bottom-nav-h: 72px;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    padding: 2px;
  }
  .brand-text strong { font-size: 1.02rem; }
  .brand-text span { font-size: .66rem; }

  .landing-hero {
    padding: 1.6rem 0 2.6rem;
  }
  .landing-hero.has-photo {
    min-height: auto;
    padding: 1.6rem 0 2.85rem;
  }
  .landing-hero::after {
    height: 28px;
    border-radius: 22px 22px 0 0;
  }

  .hero-simple { margin-bottom: .85rem; }
  .hero-tag {
    max-width: none;
    font-size: .92rem;
  }
  .hero-cta .btn {
    flex: 1 1 auto;
    min-width: calc(50% - .35rem);
  }
  .hero-clock {
    font-size: .72rem;
    padding: .26rem .58rem;
  }

  .weather-bar {
    grid-template-columns: auto auto 1fr;
    gap: .55rem .7rem;
    padding: .75rem .85rem;
    margin-bottom: .75rem;
  }
  .weather-bar-side {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
    gap: .35rem;
  }
  .weather-bar-temp { font-size: 1.55rem; }
  .weather-bar-info strong { font-size: .92rem; }

  .glass-stats { gap: .4rem; }
  .glass-stats.compact .glass-stat { padding: .65rem .4rem; }
  .glass-stat strong { font-size: 1.05rem; }
  .glass-stat span { font-size: .62rem; }

  .search-bar {
    width: 100%;
    max-width: none;
    margin-top: 1rem;
  }

  .service-section {
    margin-top: -1.1rem;
    padding-bottom: 1rem;
  }
  .service-panel,
  .service-panel.premium {
    padding: 1.1rem .85rem 1.25rem;
    border-radius: 20px;
  }
  .section-label {
    margin-bottom: .85rem;
    padding: 0 .15rem;
  }

  .icon-grid,
  .icon-grid.premium {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem .25rem;
  }
  .icon-item {
    padding: .2rem .1rem;
    min-width: 0;
  }
  .icon-item span,
  .icon-item.premium span {
    font-size: .68rem;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .icon-bubble.img {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }

  .section {
    padding: 1.1rem 0 1.35rem;
  }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .9rem;
  }
  .section-head .btn {
    align-self: flex-start;
  }

  .promo-card h3 { font-size: 1.02rem; }
  .promo-card p { font-size: .8rem; }

  .svc-card {
    padding: 1rem;
    gap: .85rem;
  }
  .svc-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
  }
  .svc-card h3 { font-size: .98rem; }
  .svc-card p { font-size: .8rem; }

  .news-scroll {
    grid-auto-columns: minmax(78vw, 300px);
    gap: .85rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 1rem;
  }
  .news-thumb { height: 156px; }
  .news-body { padding: .9rem .95rem 1.05rem; }
  .news-body h3 { font-size: .94rem; }

  .download-cta {
    padding: 1.25rem 1.1rem;
    border-radius: 18px;
  }

  .page-header h1 {
    font-size: clamp(1.25rem, 6vw, 1.55rem);
  }

  .panel {
    padding: 1.05rem 1rem;
    border-radius: 16px;
  }

  .bank-search {
    padding: 1.1rem 1rem 1rem;
  }

  .wisata-grid {
    grid-template-columns: 1fr;
  }
  .wisata-photo { height: 160px; }

  .bottom-nav a .bn-label {
    font-size: .62rem;
  }
}

@media (max-width: 379.98px) {
  .icon-grid,
  .icon-grid.premium {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .hero-cta .btn {
    width: 100%;
    min-width: 0;
  }
  .brand-text span { display: none; }
}

/* ========== Buat Aduan form ========== */
.aduan-buat-page { padding-bottom: 5rem; }
.aduan-buat-wrap { max-width: 560px; margin-inline: auto; }
.aduan-topbar {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  margin-bottom: 1rem;
  gap: .35rem;
}
.aduan-topbar h1 {
  margin: 0;
  text-align: center;
  font-size: 1.15rem;
  color: var(--maros-950);
}
.aduan-back {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--maros-950);
  background: #fff;
  border: 1px solid var(--stone);
}
.aduan-back:hover { color: var(--maros-800); background: var(--maros-50); }
.aduan-section {
  background: #fff;
  border: 1px solid var(--stone);
  border-radius: 16px;
  padding: 1.15rem 1rem 1.25rem;
  margin-bottom: .9rem;
}
.aduan-sec-head { margin-bottom: .65rem; }
.aduan-sec-head h2 {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
  color: var(--maros-950);
}
.aduan-sec-head p,
.aduan-hint {
  margin: 0;
  font-size: .84rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.aduan-hint { margin-bottom: .85rem; }
.aduan-opd-hint {
  margin: .55rem 0 0;
  padding: .55rem .75rem;
  border-radius: 10px;
  background: var(--maros-50, #f0f7f4);
  border: 1px solid rgba(13, 100, 72, .12);
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.aduan-opd-hint strong { color: var(--maros-800, #14532d); font-weight: 600; }
.aduan-label {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--maros-950);
  margin: .85rem 0 .4rem;
}
.aduan-label .req { color: #C62828; }
.aduan-lock { color: var(--text-muted); display: inline-flex; }
.aduan-form .form-control {
  border-radius: 12px;
  min-height: 46px;
}
.aduan-form .form-control.is-locked,
.aduan-form .form-control:disabled,
.aduan-form .form-control[readonly] {
  background: #F3F4F3;
  color: #555;
  cursor: default;
}
.aduan-textarea-wrap { position: relative; }
.aduan-textarea-wrap textarea {
  min-height: 110px;
  resize: vertical;
  padding-bottom: 1.6rem;
}
.aduan-counter {
  position: absolute;
  right: .7rem;
  bottom: .45rem;
  font-size: .72rem;
  color: var(--text-muted);
  pointer-events: none;
}

/* Upload */
.aduan-upload {
  border: 1.5px dashed #C5CEC8;
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  background: #FAFBFA;
}
.aduan-upload-ico {
  width: 52px;
  height: 52px;
  margin: 0 auto .65rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--maros-50);
  color: var(--maros-800);
}
.aduan-upload-link {
  border: 0;
  background: none;
  color: var(--maros-800);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  padding: 0;
}
.aduan-upload-meta {
  margin: .45rem 0 0;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.aduan-or {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .9rem 0;
  color: var(--text-muted);
  font-size: .8rem;
}
.aduan-or::before,
.aduan-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--stone);
}
.aduan-btn-camera {
  width: 100%;
  background: #fff;
  border: 1.5px solid #1a1a1a;
  color: #1a1a1a;
  border-radius: 12px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-weight: 600;
}
.aduan-btn-camera:hover { background: #f7f7f7; }
.aduan-upload-preview img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.aduan-preview-change {
  margin-top: .65rem;
  border: 0;
  background: none;
  color: var(--maros-800);
  font-weight: 600;
  cursor: pointer;
}

/* Search + map */
.aduan-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--stone);
  border-radius: 12px;
  padding: .55rem .8rem;
  background: #fff;
  margin-bottom: .75rem;
  color: var(--text-muted);
}
.aduan-search input {
  border: 0;
  outline: 0;
  width: 100%;
  font: inherit;
  background: transparent;
  color: var(--maros-950);
}
.aduan-search-results {
  border: 1px solid var(--stone);
  border-radius: 12px;
  overflow: hidden;
  margin: -.45rem 0 .75rem;
  background: #fff;
}
.aduan-search-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--stone);
  background: #fff;
  padding: .7rem .85rem;
  font-size: .82rem;
  color: var(--maros-950);
  cursor: pointer;
}
.aduan-search-item:last-child { border-bottom: 0; }
.aduan-search-item:hover { background: var(--maros-50); }
.aduan-map {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--stone);
  height: 260px;
}
.aduan-coords {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .65rem 0 .85rem;
  font-size: .85rem;
  color: var(--maros-900);
  font-weight: 600;
}
.aduan-confirm-loc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-bottom: .35rem;
}

.aduan-info-banner {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  background: #EAF4FF;
  border-radius: 10px;
  padding: .65rem .75rem;
  margin-bottom: .35rem;
}
.aduan-info-ico {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2B7DE9;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  font-style: italic;
  display: grid;
  place-items: center;
  margin-top: .1rem;
}
.aduan-info-banner p {
  margin: 0;
  font-size: .8rem;
  color: #1E4F8C;
  line-height: 1.4;
}
.aduan-phone {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: .5rem;
}
.aduan-phone-cc {
  display: grid;
  place-items: center;
  border: 1px solid var(--stone);
  border-radius: 12px;
  background: #F3F4F3;
  font-weight: 600;
  color: #555;
  min-height: 46px;
}

.aduan-actions {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin: 1rem 0 2rem;
}
.aduan-btn-draft {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  background: #EDEEEC;
  border: 1px solid var(--stone);
  color: var(--maros-950);
  font-weight: 600;
}
.aduan-btn-draft:hover { background: #E4E6E3; }
.aduan-actions .btn-accent {
  min-height: 48px;
  border-radius: 12px;
  font-weight: 700;
}
.aduan-cancel {
  text-align: center;
  color: var(--maros-800);
  font-weight: 600;
  padding: .35rem;
}
.aduan-cancel:hover { color: var(--maros-950); }

@media (min-width: 700px) {
  .aduan-map { height: 320px; }
}

/* ========== Peringatan dini & gempa BMKG ========== */
.alert-cuaca-card {
  background: linear-gradient(160deg, #C62828 0%, #B71C1C 100%);
  color: #fff;
  border-radius: 18px;
  padding: 1rem 1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: 0 12px 28px rgba(183, 28, 28, 0.22);
}
.alert-cuaca-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .85rem;
}
.alert-cuaca-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
.alert-cuaca-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
  color: #fff;
}
.alert-cuaca-box {
  background: rgba(255,255,255,.14);
  border-radius: 14px;
  padding: .9rem .95rem;
  margin-bottom: .65rem;
}
.alert-cuaca-box:last-child { margin-bottom: 0; }
.alert-cuaca-box strong {
  display: block;
  font-size: .98rem;
  line-height: 1.35;
  margin-bottom: .35rem;
}
.alert-cuaca-box span,
.alert-cuaca-box p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.5;
  color: rgba(255,255,255,.94);
}
.alert-cuaca-more {
  display: inline-block;
  margin-top: .7rem;
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.alert-cuaca-more:hover { color: #FFE082; }

.gempa-card {
  background: linear-gradient(160deg, #0E8A8A 0%, #0A6E6E 100%);
  color: #fff;
  border-radius: 18px;
  padding: 1rem 1rem 1.1rem;
  margin-bottom: 1rem;
  box-shadow: 0 12px 28px rgba(10, 110, 110, 0.22);
}
.gempa-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .85rem;
}
.gempa-head h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: #fff;
}
.gempa-head-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
}
.gempa-box {
  background: rgba(255,255,255,.14);
  border-radius: 14px;
  padding: .9rem .95rem;
  margin-bottom: .65rem;
}
.gempa-box:last-child { margin-bottom: 0; }
.gempa-box h3 {
  margin: 0 0 .45rem;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #fff;
}
.gempa-box p {
  margin: 0 0 .3rem;
  font-size: .86rem;
  line-height: 1.45;
  color: rgba(255,255,255,.95);
}
.gempa-box p:last-child { margin-bottom: 0; }
.gempa-box-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}
.gempa-mag {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gempa-mag strong {
  font-family: var(--display);
  font-size: 1.7rem;
}
.gempa-mag span {
  font-size: .72rem;
  font-weight: 700;
  margin-top: .2rem;
  opacity: .9;
}
.gempa-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.gempa-meta li {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  font-weight: 600;
}

.shakemap-card {
  background: #E6F4F4;
  border-radius: 18px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #C5E3E3;
}
.shakemap-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
  color: #0A6E6E;
}
.shakemap-head h2 {
  margin: 0;
  font-size: 1.02rem;
  color: #0A6E6E;
}
.shakemap-frame {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #D5E8E8;
}
.shakemap-frame img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 699.98px) {
  .gempa-box-main {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .gempa-mag { width: 76px; height: 76px; }
}

/* ========== Katalog layanan list ========== */
.svc-list { display: grid; gap: .85rem; }
.svc-list-item {
  border: 1px solid var(--stone);
  border-radius: 14px;
  padding: 1rem 1.05rem;
  background: #fff;
}
.svc-list-item h3 {
  margin: 0 0 .35rem;
  font-size: 1.02rem;
  color: var(--maros-950);
}
.svc-list-item p {
  margin: 0 0 .45rem;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.svc-list-item p.muted { font-size: .84rem; }
.svc-list-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }

/* ========== Admin statistik bars ========== */
.admin-bars { display: grid; gap: .7rem; }
.admin-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 140px) 1fr auto;
  gap: .65rem;
  align-items: center;
  font-size: .85rem;
}
.admin-bar-row span { color: var(--text-muted); }
.admin-bar-row strong { color: var(--maros-900); min-width: 1.5rem; text-align: right; }
.admin-bar-track {
  height: 10px;
  border-radius: 999px;
  background: #E7EEE9;
  overflow: hidden;
}
.admin-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--maros-600), var(--maros-800));
}
@media (max-width: 699.98px) {
  .admin-bar-row {
    grid-template-columns: 1fr auto;
  }
  .admin-bar-row span { grid-column: 1 / -1; }
}