/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --c-primary:   #006FD6;
  --c-primary-d: #0057A8;
  --c-primary-l: #E8F2FF;
  --c-primary-xl:#F4F8FF;
  --c-accent:    #00C9A7;
  --c-accent-d:  #00A88A;
  --c-accent-l:  #E0FBF6;
  --c-warn:      #FF6B6B;
  --c-warn-l:    #FFF0F0;
  --c-gold:      #F5A623;
  --c-gold-l:    #FEF5E0;
  --c-ink:       #0A1628;
  --c-ink-mid:   #1A2C48;
  --c-ink-soft:  #2D4163;
  --c-muted:     #6B7FA3;
  --c-border:    #E4ECF7;
  --c-border-l:  #F0F5FC;
  --c-smoke:     #F7FAFF;
  --c-white:     #FFFFFF;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Sora', system-ui, sans-serif;
  --font-play:    'Playfair Display', Georgia, serif;
  --font-dm:      'DM Sans', system-ui, sans-serif;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 999px;
  --sh-xs:  0 1px 6px rgba(10,22,40,0.06);
  --sh-sm:  0 4px 16px rgba(10,22,40,0.08);
  --sh-md:  0 8px 32px rgba(10,22,40,0.10);
  --sh-lg:  0 16px 56px rgba(10,22,40,0.13);
  --sh-xl:  0 28px 80px rgba(10,22,40,0.16);
  --sh-blue: 0 8px 32px rgba(0,111,214,0.28);
  --sh-teal: 0 8px 32px rgba(0,201,167,0.28);
  --ease: all 0.3s cubic-bezier(0.4,0,0.2,1);
  --ease-spring: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  font-family: var(--font-body);
  background: var(--c-white);
  color: var(--c-ink-mid);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; transition: var(--ease); }
img { max-width: 100%; height: auto; }
section { padding: 96px 0; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--c-smoke); }
::-webkit-scrollbar-thumb { background: var(--c-primary); border-radius: 99px; }

/* ── UTILITIES ── */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-full);
  margin-bottom: 16px;
}
.tag-blue  { color: var(--c-primary); background: var(--c-primary-l); border: 1px solid rgba(0,111,214,0.2); }
.tag-teal  { color: var(--c-accent-d); background: var(--c-accent-l); border: 1px solid rgba(0,201,167,0.2); }
.tag-warn  { color: #c0392b; background: var(--c-warn-l); border: 1px solid rgba(255,107,107,0.2); }
.tag-gold  { color: #b7741a; background: var(--c-gold-l); border: 1px solid rgba(245,166,35,0.2); }
.tag .pulse { width: 5px; height: 5px; border-radius: 50%; display: inline-block; animation: pulse-dot 2.5s ease-in-out infinite; }
.tag-blue .pulse  { background: var(--c-primary); }
.tag-teal .pulse  { background: var(--c-accent); }
.tag-warn .pulse  { background: var(--c-warn); }
.tag-gold .pulse  { background: var(--c-gold); }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.5); } }

.sec-head { text-align: center; margin-bottom: 60px; }
.sec-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3rem); color: var(--c-ink); line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 12px; }
.sec-title em { font-style: italic; color: var(--c-primary); }
.sec-sub { font-size: 0.9rem; color: var(--c-muted); max-width: 440px; margin: 0 auto; line-height: 1.9; font-weight: 300; }
.divider { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.divider-line { width: 44px; height: 2px; border-radius: 2px; }
.divider-dot { width: 7px; height: 7px; border-radius: 50%; }
.divider-blue .divider-line, .divider-blue .divider-dot { background: var(--c-primary); }
.divider-teal .divider-line, .divider-teal .divider-dot { background: var(--c-accent); }
.divider-warn .divider-line, .divider-warn .divider-dot { background: var(--c-warn); }

/* ── NAVBAR ── */
#nav { position: fixed; top: 0; width: 100%; z-index: 1000; transition: var(--ease); }
#nav::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent), var(--c-primary)); background-size: 400%; animation: nav-shimmer 5s linear infinite; }
@keyframes nav-shimmer { 0%{background-position:0%} 100%{background-position:400%} }
.nav-glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8); border-bottom: 1px solid rgba(228,236,247,0.7); transition: var(--ease); }
#nav.scrolled .nav-glass { background: rgba(255,255,255,0.97); box-shadow: 0 4px 32px rgba(0,111,214,0.09); border-bottom-color: var(--c-border); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-brand { display: flex; align-items: center; gap: 13px; }
.nav-logo-box { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--c-primary-l), rgba(0,201,167,0.08)); border: 1.5px solid rgba(0,111,214,0.15); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; box-shadow: 0 2px 12px rgba(0,111,214,0.12); transition: var(--ease); }
.nav-logo-box:hover { transform: scale(1.05); box-shadow: var(--sh-blue); }
.nav-logo-box img { height: 27px; width: auto; object-fit: contain; }
.nav-brand-text strong { font-size: 0.97rem; font-weight: 700; color: var(--c-ink); display: block; letter-spacing: -0.015em; line-height: 1.2; }
.nav-brand-text span { font-size: 0.57rem; color: var(--c-primary); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.nav-brand-text span::before { content: ''; width: 14px; height: 1.5px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); border-radius: 2px; }
.nav-menu { display: flex; align-items: center; gap: 1px; list-style: none; }
.nav-menu li a { font-size: 0.80rem; font-weight: 500; color: var(--c-muted); padding: 8px 7px; border-radius: var(--radius-sm); display: block; position: relative; letter-spacing: 0.01em; }
.nav-menu li a::after { content: ''; position: absolute; bottom: 2px; left: 50%; right: 50%; height: 2px; background: var(--c-primary); border-radius: 2px; transition: left 0.3s, right 0.3s; }
.nav-menu li a:hover { color: var(--c-primary); background: var(--c-primary-xl); }
.nav-menu li a:hover::after { left: 14px; right: 14px; }
.nav-menu li.nav-active > a { color: var(--c-primary); background: var(--c-primary-xl); font-weight: 600; }
.nav-menu li.nav-active > a::after { left: 14px; right: 14px; }
.nav-menu .nav-profil a:hover { background: var(--c-primary-l); }
.nav-menu .nav-cta a { background: linear-gradient(135deg, var(--c-primary), #0057c8) !important; color: var(--c-white) !important; font-weight: 700; border-radius: var(--radius-sm); box-shadow: 0 4px 18px rgba(0,111,214,0.3); padding: 9px 20px !important; letter-spacing: 0.02em; }
.nav-menu .nav-cta a::after { display: none; }
.nav-menu .nav-cta a:hover { background: linear-gradient(135deg, #0057c8, var(--c-primary)) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(0,111,214,0.4) !important; }
.nav-emergency { display: flex; align-items: center; gap: 8px; background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.25); border-radius: var(--radius-full); padding: 5px 12px 5px 8px; font-size: 0.68rem; font-weight: 700; color: var(--c-warn); letter-spacing: 0.04em; margin-left: 4px; white-space: nowrap; margin-right: 10px; }
.nav-emergency-dot { width: 8px; height: 8px; background: var(--c-warn); border-radius: 50%; position: relative; flex-shrink: 0; }
.nav-emergency-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(255,107,107,0.4); animation: ugd-ring 2s infinite; }
@keyframes ugd-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); padding: 9px 13px; cursor: pointer; color: var(--c-ink); font-size: 0.9rem; transition: var(--ease); }
.nav-toggle:hover { background: var(--c-primary-l); border-color: var(--c-primary); color: var(--c-primary); }

/* ── HERO ── */
#hero { padding-top: 75px; min-height: 100svh; background: url('assets/img/11.jpeg') no-repeat center center / cover; display: flex; align-items: center; position: relative; overflow: hidden; }
#hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(3,12,35,0.96) 0%, rgba(5,18,48,0.88) 35%, rgba(5,18,48,0.55) 58%, rgba(3,12,35,0.20) 100%); }
#hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 220px; z-index: 2; background: linear-gradient(to top, rgba(3,12,35,0.85) 0%, transparent 100%); pointer-events: none; }
.hero-inner { position: relative; z-index: 3; width: 100%; padding-bottom: 40px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.80); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 8px 18px; border-radius: var(--radius-full); margin-bottom: 28px; backdrop-filter: blur(8px); }
.hero-kicker .dot { width: 5px; height: 5px; background: var(--c-accent); border-radius: 50%; animation: pulse-dot 2.5s ease-in-out infinite; }
.hero-h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5.5vw, 4.4rem); color: #fff; line-height: 1.12; font-weight: 400; margin-bottom: 22px; letter-spacing: -0.025em; text-shadow: 0 2px 20px rgba(0,0,20,0.3); }
.hero-h1 em { font-style: italic; display: block; background: linear-gradient(135deg, #7EC8FF, var(--c-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-desc { color: rgba(255,255,255,0.62); font-size: 0.93rem; max-width: 420px; margin-bottom: 40px; line-height: 1.95; font-weight: 300; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 13px; }
.btn-primary-hero { display: inline-flex; align-items: center; gap: 10px; background: var(--c-primary); color: #fff !important; font-weight: 700; font-size: 0.87rem; padding: 14px 30px; border-radius: var(--radius-md); box-shadow: var(--sh-blue); transition: var(--ease); }
.btn-primary-hero:hover { background: #0057c8; transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0,111,214,0.4); }
.btn-ghost-hero { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.08); color: #fff !important; font-weight: 600; font-size: 0.87rem; padding: 13px 28px; border-radius: var(--radius-md); border: 1.5px solid rgba(255,255,255,0.22); transition: var(--ease); backdrop-filter: blur(8px); }
.btn-ghost-hero:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.42); transform: translateY(-2px); }
.hero-stats { display: flex; gap: 0; margin-top: 48px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 28px; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: var(--radius-lg) !important; padding: 18px 24px !important; backdrop-filter: blur(10px); }
.hero-stat { flex: 1; padding-right: 24px; border-right: 1px solid rgba(255,255,255,0.1); margin-right: 24px; }
.hero-stat:last-child { border-right: none; padding-right: 0; margin-right: 0; }
.hero-stat strong { display: block; font-family: var(--font-display); font-size: 1.9rem; color: #7EC8FF; line-height: 1; letter-spacing: -0.03em; }
.hero-stat span { font-size: 0.63rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-top: 4px; display: block; }
.hero-live-clock { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,201,167,0.12); border: 1px solid rgba(0,201,167,0.25); color: var(--c-accent); border-radius: var(--radius-full); padding: 5px 14px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; }
.hero-live-clock i { font-size: 0.65rem; animation: spin-slow 8s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════
   PIMPINAN WALL — right column, rising photos
═══════════════════════════════════════════ */
.hero-pimpinan-col {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  height: 100%;
  position: relative;
  margin-top: auto;
  align-self: flex-end;
  overflow: visible;
  flex-wrap: nowrap;
}

/* Shared card */
.pimpinan-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: var(--ease-spring);
  cursor: default;
  /* pull cards slightly into each other for a unified group look */
  margin: 0 4px;
}
.pimpinan-figure:hover { transform: translateY(-10px) scale(1.02); z-index: 10 !important; }

/* Photo area — no box, just the cutout rising up */
.pimpinan-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  /* Glass edge glow */
  /* box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.10),
    0 -16px 60px rgba(0,111,214,0.22),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: var(--ease-spring); */
}

/* Sizes — square-ish (width ≈ height) + bupati in front */
.pimpinan-figure.p-bupati      { z-index: 9; margin: 0 -18px 0 0; }
.pimpinan-figure.p-wakil       { z-index: 8; margin: 0 0 0 0; }
.pimpinan-figure.p-direktur    { z-index: 7; }

.pimpinan-figure.p-bupati   .pimpinan-img-wrap { width: 230px; height: 290px; }
/* box-shadow: 0 0 0 2px rgba(126,200,255,0.40), 0 -20px 70px rgba(0,111,214,0.40), inset 0 1px 0 rgba(255,255,255,0.25);  */

.pimpinan-figure.p-wakil    .pimpinan-img-wrap { width: 208px; height: 268px; }
.pimpinan-figure.p-direktur .pimpinan-img-wrap { width: 160px; height: 186px; }

/* Photo image */
.pimpinan-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform 0.5s ease;
  filter: brightness(1.05) contrast(1.05);
}
.pimpinan-figure:hover .pimpinan-img-wrap img { transform: scale(1.04); }

/* Gradient overlay inside photo — fade bottom to blend with hero */
.pimpinan-img-wrap::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  /* background: linear-gradient(
    to top,
    rgba(3,12,35,0.75) 0%,
    rgba(3,12,35,0.10) 35%,
    transparent 60%
  ); */
}

/* Top shimmer line */
.pimpinan-img-wrap::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 5;
  /* background: linear-gradient(90deg, transparent, rgba(126,200,255,0.6), rgba(0,201,167,0.5), transparent); */
}
.pimpinan-figure.p-bupati .pimpinan-img-wrap::before {
  height: 3px;
  /* background: linear-gradient(90deg, transparent, #7EC8FF 30%, var(--c-accent) 70%, transparent); */
}

/* Placeholder silhouette (when no real photo) */
.pimpinan-silhouette {
  width: 100%; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 16px;
  background: linear-gradient(160deg, rgba(0,60,150,0.25) 0%, rgba(3,12,35,0.7) 100%);
}
.pimpinan-silhouette i {
  font-size: 5rem; color: rgba(126,200,255,0.25);
  display: block; text-align: center; line-height: 1;
}
.pimpinan-figure.p-direktur .pimpinan-silhouette i { font-size: 4rem; }

/* Name badge — floats below photo, semi-transparent */
.pimpinan-badge {
    position: relative;
    z-index: 5;
    background: linear-gradient(180deg, rgba(0, 40, 110, 0.90) 0%, rgba(3, 12, 35, 0.95) 100%);
    backdrop-filter: blur(57px);
    /* border: 1px solid rgba(126, 200, 255, 0.15); */
    border-top: none;
    /* border-radius: 0 0 14px 14px; */
    padding: 11px 14px 13px;
    text-align: center;
    width: 126%;
    max-width: 155%;
    /* border-radius: 0 0 12px 12px; */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.pimpinan-figure.p-bupati .pimpinan-badge {
  background: linear-gradient(180deg, rgba(0,60,160,0.95) 0%, rgba(3,12,45,0.98) 100%);
  border-color: rgba(126,200,255,0.35);
  padding: 13px 18px 16px;
}
.pimpinan-badge-role {
  display: block; font-size: 0.50rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: 4px;
}
.pimpinan-figure.p-bupati .pimpinan-badge-role { color: #7EC8FF; font-size: 0.54rem; }
.pimpinan-badge-name {
  display: block; font-size: 0.70rem; font-weight: 700;
  color: rgba(255,255,255,0.93); line-height: 1.3;
  letter-spacing: -0.01em;
}
.pimpinan-figure.p-bupati .pimpinan-badge-name { font-size: 0.76rem; }

/* Decorative line connecting three cards */
.pimpinan-base-line {
  position: absolute; bottom: 0; left: -30px; right: -30px; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(126,200,255,0.2), rgba(0,201,167,0.15), rgba(126,200,255,0.2), transparent);
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .pimpinan-figure.p-bupati   .pimpinan-img-wrap { width: 165px; height: 211px; }
  .pimpinan-figure.p-wakil    .pimpinan-img-wrap { width: 165px; height: 210px; }
  .pimpinan-figure.p-direktur .pimpinan-img-wrap { width: 135px; height: 153px; }
}
@media (max-width: 991px) {
  .hero-pimpinan-col {
    justify-content: center;
    padding-bottom: 0;
    margin-top: 32px;
  }
  .pimpinan-figure.p-bupati   .pimpinan-img-wrap { width: 184px;
        height: 232px; }
  .pimpinan-figure.p-wakil    .pimpinan-img-wrap { width: 184px;
        height: 232px; }
  .pimpinan-figure.p-direktur .pimpinan-img-wrap { width: 157px;
        height: 175px; }
  .pimpinan-figure.p-bupati  { margin: 0 -14px 0 0; }
  .pimpinan-figure.p-wakil   { margin: 0 0 0 0; }
  .hero-stats { display: none; }
}
@media (max-width: 575px) {
  .pimpinan-figure.p-bupati   .pimpinan-img-wrap { width: 130px; height: 165px; }
  .pimpinan-figure.p-wakil    .pimpinan-img-wrap { width: 130px; height: 165px; }
  .pimpinan-figure.p-direktur .pimpinan-img-wrap { width: 117px; height: 137px; }
  .pimpinan-figure.p-bupati  { margin: 0 -10px 0 0; }
  .pimpinan-figure.p-wakil   { margin: 0 0 0 0; }
  .pimpinan-badge-name { font-size: 0.58rem !important; }
  .pimpinan-badge-role { font-size: 0.42rem !important; letter-spacing: 0.10em; }
  .pimpinan-badge { padding: 8px 8px 10px !important; }
}

/* ── LAYANAN PUBLIK ── */
.publik-section { background: linear-gradient(135deg, #020b22 0%, #041230 50%, #060f28 100%); padding: 52px 0; position: relative; overflow: hidden; }
.publik-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 80% at 15% 50%, rgba(0,111,214,0.12) 0%, transparent 65%), radial-gradient(ellipse 40% 60% at 85% 50%, rgba(0,201,167,0.08) 0%, transparent 65%); pointer-events: none; }
.publik-section .container { position: relative; z-index: 2; }
.publik-title { font-family: var(--font-display); font-size: 1.4rem; color: rgba(255,255,255,0.85); text-align: center; margin-bottom: 32px; font-weight: 400; letter-spacing: -0.01em; }
.publik-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.publik-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 22px 18px; text-align: center; min-width: 130px; flex: 1; max-width: 170px; cursor: pointer; transition: var(--ease); text-decoration: none; display: block; position: relative; overflow: hidden; }
.publik-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s; }
.publik-card:hover { background: rgba(0,111,214,0.15); border-color: rgba(0,111,214,0.35); transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,0.4); }
.publik-card:hover::before { transform: scaleX(1); }
.publik-card iconify-icon { display: block; color: #7EC8FF; transition: var(--ease); }
.publik-card:hover iconify-icon { color: var(--c-accent); transform: scale(1.1); }
.publik-card p { margin-top: 10px; font-size: 0.74rem; font-weight: 600; color: rgba(255,255,255,0.65); line-height: 1.35; }
.publik-card:hover p { color: #fff; }

/* ── STATS ── */
.stats-section { background: var(--c-white); padding: 0; border-bottom: 1px solid var(--c-border-l); position: relative; }
.stats-strip { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent), var(--c-warn), var(--c-gold), var(--c-primary)); background-size: 400%; animation: shimmer 5s linear infinite; }
@keyframes shimmer { 0%{background-position:0%} 100%{background-position:400%} }
.stats-row { display: flex; }
.stat-item { flex: 1; padding: 48px 24px; text-align: center; border-right: 1px solid var(--c-border-l); position: relative; overflow: hidden; transition: all 0.3s ease; cursor: default; }
.stat-item:last-child { border-right: none; }
.stat-item::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; }
.stat-item:nth-child(1)::before { background: linear-gradient(135deg, rgba(0,111,214,0.04) 0%, transparent 70%); }
.stat-item:nth-child(2)::before { background: linear-gradient(135deg, rgba(0,201,167,0.04) 0%, transparent 70%); }
.stat-item:nth-child(3)::before { background: linear-gradient(135deg, rgba(255,107,107,0.04) 0%, transparent 70%); }
.stat-item:nth-child(4)::before { background: linear-gradient(135deg, rgba(245,166,35,0.04) 0%, transparent 70%); }
.stat-item::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; border-radius: 3px; transition: width 0.4s; }
.stat-item:nth-child(1)::after { background: linear-gradient(90deg, var(--c-primary), #7EC8FF); }
.stat-item:nth-child(2)::after { background: linear-gradient(90deg, var(--c-accent), #7EC8FF); }
.stat-item:nth-child(3)::after { background: linear-gradient(90deg, var(--c-warn), var(--c-gold)); }
.stat-item:nth-child(4)::after { background: linear-gradient(90deg, var(--c-gold), var(--c-warn)); }
.stat-item:hover { background: var(--c-smoke); }
.stat-item:hover::before { opacity: 1; }
.stat-item:hover::after { width: 60%; }
.stat-num { font-family: var(--font-display); font-size: 3rem; line-height: 1; letter-spacing: -0.04em; display: block; transition: transform 0.3s; }
.stat-item:hover .stat-num { transform: scale(1.05); }
.stat-item:nth-child(1) .stat-num { color: var(--c-primary); }
.stat-item:nth-child(2) .stat-num { color: var(--c-accent-d); }
.stat-item:nth-child(3) .stat-num { color: var(--c-warn); }
.stat-item:nth-child(4) .stat-num { color: var(--c-gold); }
.stat-label { display: block; margin-top: 8px; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }

/* ── DOKTER SLIDER ── */
#dokter { background: var(--c-smoke); position: relative; }
#dokter::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 70% at 100% 50%, rgba(0,111,214,0.04) 0%, transparent 70%); }
.slider-wrap { position: relative; }
.slider-viewport { overflow: hidden; border-radius: var(--radius-lg); }
.slider-track { display: flex; gap: 16px; transition: transform 0.45s cubic-bezier(0.25,0.8,0.25,1); will-change: transform; padding: 4px 4px 16px; }
.dok-card { flex: 0 0 215px; width: 215px; background: var(--c-white); border-radius: var(--radius-lg); border: 1.5px solid var(--c-border-l); overflow: hidden; box-shadow: var(--sh-xs); transition: var(--ease-spring); cursor: pointer; position: relative; }
.dok-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.dok-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: var(--sh-lg); border-color: rgba(0,111,214,0.2); }
.dok-card:hover::after { transform: scaleX(1); }
.dok-img-wrap { width: 100%; height: 215px; overflow: hidden; background: linear-gradient(145deg, var(--c-ink), var(--c-ink-mid)); position: relative; }
.dok-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 0.5s ease; }
.dok-card:hover .dok-img-wrap img { transform: scale(1.07); }
.dok-placeholder { width: 100%; height: 215px; background: linear-gradient(145deg, var(--c-primary-l), var(--c-accent-l)); display: flex; align-items: center; justify-content: center; font-size: 3.5rem; color: rgba(0,111,214,0.22); }
.dok-body { padding: 18px; }
.dok-name { font-weight: 700; font-size: 0.88rem; color: var(--c-ink); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dok-specialty { font-size: 0.7rem; color: var(--c-primary); font-weight: 600; margin-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dok-meta { display: flex; flex-direction: column; gap: 5px; }
.dok-meta-row { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; color: var(--c-muted); font-weight: 500; }
.dok-meta-row i { width: 11px; color: var(--c-primary); font-size: 0.7rem; flex-shrink: 0; }
.slider-arrow { position: absolute; top: 45%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--c-white); border: 1.5px solid var(--c-border); box-shadow: var(--sh-md); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-primary); font-size: 0.88rem; transition: var(--ease); z-index: 10; }
.slider-arrow:hover { background: var(--c-primary); color: #fff; border-color: transparent; box-shadow: var(--sh-blue); transform: translateY(-50%) scale(1.08); }
.slider-arrow.disabled { opacity: 0.25; pointer-events: none; }
.slider-arrow.prev { left: -24px; }
.slider-arrow.next { right: -24px; }
.slider-progress { margin: 22px 4px 0; height: 3px; background: var(--c-border-l); border-radius: 99px; overflow: hidden; }
.slider-progress-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); transition: width 0.4s; }
.btn-lihat-all { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--c-primary), #0057c8); color: #fff !important; font-weight: 700; font-size: 0.87rem; padding: 14px 32px; border-radius: var(--radius-md); box-shadow: var(--sh-blue); transition: var(--ease); }
.btn-lihat-all:hover { background: linear-gradient(135deg, #0057c8, var(--c-primary)); transform: translateY(-2px); box-shadow: 0 16px 44px rgba(0,111,214,0.45); }

/* ── MODAL DOKTER ── */
.modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(3,12,35,0.82); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-box { background: var(--c-white); border-radius: var(--radius-xl); width: 100%; max-width: 400px; overflow: hidden; transform: scale(0.92) translateY(24px); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); box-shadow: var(--sh-xl); }
.modal-overlay.show .modal-box { transform: scale(1) translateY(0); }
.modal-top { background: var(--c-ink); padding: 36px 24px 56px; position: relative; text-align: center; }
.modal-top-gradient { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--c-white)); }
.modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); cursor: pointer; color: #fff; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; transition: var(--ease); }
.modal-close:hover { background: var(--c-warn); border-color: var(--c-warn); }
.modal-avatar { width: 108px; height: 108px; border-radius: 50%; border: 3px solid var(--c-primary); overflow: hidden; margin: 0 auto; background: var(--c-primary-l); box-shadow: var(--sh-blue); display: flex; align-items: center; justify-content: center; }
.modal-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.modal-avatar i { font-size: 3.2rem; color: rgba(0,111,214,0.3); }
.modal-body-inner { padding: 22px 26px 30px; }
.modal-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--c-ink); font-weight: 400; text-align: center; margin-bottom: 6px; }
.modal-specialty-badge { display: block; width: fit-content; margin: 0 auto 22px; font-size: 0.65rem; font-weight: 700; color: var(--c-primary); background: var(--c-primary-l); border: 1px solid rgba(0,111,214,0.2); padding: 5px 14px; border-radius: var(--radius-full); letter-spacing: 0.08em; text-transform: uppercase; }
.modal-rows { display: flex; flex-direction: column; gap: 14px; }
.modal-row { display: flex; align-items: flex-start; gap: 12px; font-size: 0.85rem; color: var(--c-ink-mid); }
.modal-row i { color: var(--c-primary); width: 16px; margin-top: 2px; flex-shrink: 0; }

/* ── JADWAL ── */
#jadwal { background: var(--c-white); }
.jadwal-table-wrap { border-radius: var(--radius-lg); border: 1px solid var(--c-border-l); box-shadow: var(--sh-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jadwal-table-wrap table { width: 100%; border-collapse: collapse; min-width: 600px; }
.jadwal-table-wrap thead { background: var(--c-ink); }
.jadwal-table-wrap thead th { color: rgba(255,255,255,0.45); font-size: 0.68rem; font-weight: 700; padding: 16px 20px; text-align: left; letter-spacing: 0.14em; text-transform: uppercase; }
.jadwal-table-wrap thead th:first-child { color: rgba(255,255,255,0.9); }
.jadwal-table-wrap tbody tr { border-bottom: 1px solid var(--c-border-l); transition: background 0.15s; }
.jadwal-table-wrap tbody tr:last-child { border-bottom: none; }
.jadwal-table-wrap tbody tr:hover { background: var(--c-primary-xl); }
.jadwal-table-wrap tbody td { padding: 14px 20px; font-size: 0.84rem; color: var(--c-ink-mid); vertical-align: middle; }
.jadwal-table-wrap tbody td:first-child { font-weight: 700; color: var(--c-ink); }
.badge-hadir { display: inline-flex; align-items: center; gap: 5px; background: var(--c-primary-l); color: var(--c-primary); font-size: 0.67rem; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-full); border: 1px solid rgba(0,111,214,0.2); }
.badge-libur { display: inline-flex; align-items: center; gap: 5px; background: var(--c-warn-l); color: var(--c-warn); font-size: 0.67rem; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-full); border: 1px solid rgba(255,107,107,0.2); }

/* ── LAYANAN ── */
#layanan { background: var(--c-smoke); }
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.svc-card { background: var(--c-white); border-radius: var(--radius-lg); padding: 32px 26px; border: 1.5px solid var(--c-border-l); position: relative; overflow: hidden; transition: var(--ease-spring); }
.svc-card-line { position: absolute; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.svc-card:nth-child(3n+1) .svc-card-line { background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); }
.svc-card:nth-child(3n+2) .svc-card-line { background: linear-gradient(90deg, var(--c-accent), var(--c-gold)); }
.svc-card:nth-child(3n+3) .svc-card-line { background: linear-gradient(90deg, var(--c-gold), var(--c-warn)); }
.svc-card:hover { transform: translateY(-7px); box-shadow: var(--sh-md); border-color: var(--c-border); }
.svc-card:hover .svc-card-line { transform: scaleX(1); }
.svc-card-num { position: absolute; top: 14px; right: 18px; font-family: var(--font-display); font-size: 3.5rem; font-weight: 400; line-height: 1; opacity: 0.035; color: var(--c-ink); transition: all 0.4s ease !important; }
.svc-card:hover .svc-card-num { opacity: 0.07 !important; transform: scale(1.15) rotate(-8deg); }
.svc-icon { width: 50px; height: 50px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 20px; transition: var(--ease); }
.svc-card:nth-child(3n+1) .svc-icon { background: var(--c-primary-l); color: var(--c-primary); }
.svc-card:nth-child(3n+2) .svc-icon { background: var(--c-accent-l); color: var(--c-accent-d); }
.svc-card:nth-child(3n+3) .svc-icon { background: var(--c-gold-l); color: #b7741a; }
.svc-card:nth-child(3n+1):hover .svc-icon { background: var(--c-primary); color: #fff; box-shadow: var(--sh-blue); }
.svc-card:nth-child(3n+2):hover .svc-icon { background: var(--c-accent); color: #fff; box-shadow: var(--sh-teal); }
.svc-card:nth-child(3n+3):hover .svc-icon { background: var(--c-gold); color: #fff; }
.svc-card h5 { font-size: 0.96rem; font-weight: 700; color: var(--c-ink); margin-bottom: 9px; }
.svc-card p { font-size: 0.83rem; color: var(--c-muted); line-height: 1.8; }

/* ── JENIS (DARK) ── */
#jenis { background: var(--c-ink); padding: 88px 0; position: relative; overflow: hidden; }
#jenis::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 80% 10%, rgba(0,111,214,0.15) 0%, transparent 65%), radial-gradient(ellipse 40% 40% at 5% 85%, rgba(0,201,167,0.1) 0%, transparent 65%); }
#jenis .container { position: relative; z-index: 2; }
.jenis-head { text-align: center; margin-bottom: 52px; }
.jenis-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); color: #fff; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 10px; }
.jenis-title span { color: #7EC8FF; font-style: italic; }
.jenis-sub { color: rgba(255,255,255,0.38); font-size: 0.88rem; font-weight: 300; }
.jenis-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.jenis-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-md); padding: 13px 16px; display: flex; align-items: center; gap: 13px; transition: var(--ease); }
.jenis-item:hover { background: rgba(0,111,214,0.12); border-color: rgba(0,111,214,0.32); transform: translateX(5px); }
.j-num { width: 30px; height: 30px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.35); flex-shrink: 0; }
.jenis-item:hover .j-num { background: var(--c-primary); border-color: transparent; color: #fff; }
.j-text { font-size: 0.81rem; color: rgba(255,255,255,0.72); font-weight: 400; line-height: 1.4; }

/* ══ ARTIKEL KESEHATAN ══ */
/* ══ ARTIKEL SECTION ══ */
.ark-section {
  background: #06101c;
  padding: 96px 0 72px;
  position: relative;
  overflow: hidden;
}
.ark-bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ark-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(88px); }
.ark-orb-1 { width: 700px; height: 700px; top: -250px; left: -200px; background: radial-gradient(circle,rgba(0,111,214,.11) 0%,transparent 70%); }
.ark-orb-2 { width: 500px; height: 500px; bottom: -150px; right: -100px; background: radial-gradient(circle,rgba(0,212,170,.07) 0%,transparent 70%); }
 
.ark-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 48px;
}
.ark-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .60rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: #00d4aa; margin-bottom: 12px;
}
.ark-eyebrow-line { display: block; width: 26px; height: 1.5px; background: linear-gradient(90deg,#00d4aa,transparent); }
.ark-main-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem,4vw,3.2rem); color: #fff;
  font-weight: 400; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 10px;
}
.ark-em { font-style: italic; color: #00d4aa; }
.ark-sub { font-size: .87rem; color: rgba(200,220,240,.42); max-width: 400px; line-height: 1.8; font-weight: 300; }
.ark-all-btn {
  display: inline-flex; align-items: center; gap: 11px;
  border: 1.5px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5);
  font-size: .78rem; font-weight: 600; padding: 11px 20px; border-radius: 99px;
  text-decoration: none; transition: all .3s; white-space: nowrap;
  letter-spacing: .04em; flex-shrink: 0;
}
.ark-btn-icon {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.08); display: inline-flex;
  align-items: center; justify-content: center; font-size: .62rem; transition: all .3s;
}
.ark-all-btn:hover { border-color: #00d4aa; color: #00d4aa; background: rgba(0,212,170,.05); }
.ark-all-btn:hover .ark-btn-icon { background: #00d4aa; color: #06101c; transform: translateX(3px); }
 
.ark-empty { text-align: center; padding: 70px 0; color: rgba(200,220,240,.3); }
.ark-empty i { font-size: 2.5rem; display: block; margin-bottom: 14px; }
 
/* ── LAYOUT GRID ── */
.ark-layout {
  display: grid; grid-template-columns: 1.06fr 1fr;
  gap: 14px; margin-bottom: 14px;
}
 
/* ── HERO CARD ── */
.ark-hero-card {
  position: relative; border-radius: 16px; overflow: hidden;
  cursor: pointer; min-height: 520px; background: #0d1f33;
  transition: transform .35s, box-shadow .35s;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ark-hero-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.ark-hero-bg { position: absolute; inset: 0; }
.ark-hero-bg img { width:100%; height:100%; object-fit:cover; filter:brightness(.38); transition:transform .6s; display:block; }
.ark-hero-card:hover .ark-hero-bg img { transform: scale(1.05); }
.ark-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(6,16,28,.98) 0%,rgba(6,16,28,.58) 42%,transparent 80%); }
.ark-pill {
  position:absolute; top:15px; background:rgba(6,16,28,.78);
  backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.58); font-size:.62rem; font-weight:600;
  padding:5px 12px; border-radius:99px; display:flex; align-items:center; gap:4px;
}
.ark-pill-top-right { right: 15px; }
.ark-pill-top-left  { left:  15px; }
.ark-hero-body { position:relative; z-index:3; padding:26px; }
.ark-cat-badge {
  display:inline-block; font-size:.57rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:#06101c;
  padding:4px 12px; border-radius:4px; margin-bottom:11px;
}
.ark-hero-title {
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.3rem,2.2vw,1.85rem); color:#fff;
  font-weight:600; line-height:1.28; margin-bottom:11px; letter-spacing:-.02em;
}
.ark-hero-excerpt {
  font-size:.83rem; color:rgba(255,255,255,.5); line-height:1.75;
  margin-bottom:20px; font-weight:300;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ark-hero-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.ark-author { display:flex; align-items:center; gap:10px; }
.ark-av {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,#006fd6,#00c9a7);
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:700; color:#fff; flex-shrink:0;
}
.ark-author strong { display:block; font-size:.70rem; color:rgba(255,255,255,.80); }
.ark-author span   { font-size:.63rem; color:rgba(255,255,255,.35); }
.ark-read-cta {
  font-size:.72rem; font-weight:700; color:#7ec8ff;
  text-transform:uppercase; letter-spacing:.06em; display:flex; align-items:center; gap:6px;
  transition:color .3s;
}
.ark-hero-card:hover .ark-read-cta { color:#fff; }
 
/* ── RIGHT COLUMN ── */
.ark-right { display:flex; flex-direction:column; gap:14px; }
 
/* ── LIST ITEMS ── */
.ark-list { display:flex; flex-direction:column; gap:3px; }
.ark-list-item {
  background:#0d1829; border-radius:12px; padding:16px 18px;
  display:flex; align-items:center; gap:14px; cursor:pointer;
  transition:background .3s, transform .3s; text-decoration:none; position:relative; overflow:hidden;
}
.ark-list-item::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:transparent; transition:background .3s;
}
.ark-list-item:hover { background:#111f35; transform:translateX(4px); }
.ark-list-item:hover::before { background:#00d4aa; }
.ark-list-num {
  font-family:'Playfair Display',Georgia,serif; font-size:1.7rem; font-weight:700;
  line-height:1; color:rgba(255,255,255,.07); flex-shrink:0; width:26px;
  transition:color .3s;
}
.ark-list-item:hover .ark-list-num { color:rgba(0,212,170,.25); }
.ark-list-thumb {
  width:62px; height:62px; border-radius:10px; overflow:hidden; flex-shrink:0;
}
.ark-list-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.ark-list-item:hover .ark-list-thumb img { transform:scale(1.1); }
.ark-list-body { flex:1; min-width:0; }
.ark-list-cat {
  font-size:.54rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:5px; display:block;
}
.ark-list-title {
  font-family:'Playfair Display',Georgia,serif; font-size:.9rem;
  font-weight:600; color:rgba(255,255,255,.8); line-height:1.35;
  margin-bottom:6px; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .3s;
}
.ark-list-item:hover .ark-list-title { color:#fff; }
.ark-list-meta {
  font-size:.62rem; color:rgba(255,255,255,.28);
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
}
.ark-list-meta i { color:rgba(255,255,255,.2); font-size:.58rem; }
.ark-list-arrow {
  font-size:.7rem; color:rgba(255,255,255,.2); flex-shrink:0;
  transition:color .3s, transform .3s;
}
.ark-list-item:hover .ark-list-arrow { color:#00d4aa; transform:translateX(3px); }
 
/* ── SMALL GRID ── */
.ark-small-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ark-small-card {
  border-radius:12px; overflow:hidden; cursor:pointer;
  transition:transform .3s, box-shadow .3s;
}
.ark-small-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,.4); }
.ark-small-img { position:relative; height:90px; }
.ark-small-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.ark-small-card:hover .ark-small-img img { transform:scale(1.08); }
.ark-small-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(6,16,28,.88) 0%,transparent 60%);
}
.ark-small-cat {
  position:absolute; bottom:8px; left:8px;
  font-size:.48rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:#06101c; padding:3px 8px; border-radius:3px;
}
.ark-small-body { background:#0d1829; padding:10px 12px; }
.ark-small-title {
  font-size:.78rem; font-weight:600; color:rgba(255,255,255,.75);
  line-height:1.35; margin-bottom:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .3s;
}
.ark-small-card:hover .ark-small-title { color:#fff; }
.ark-small-meta { font-size:.58rem; color:rgba(255,255,255,.22); }
.ark-small-meta i { color:rgba(255,255,255,.18); }
 
/* ── TOPIC PILLS ── */
.ark-topics {
  display:flex; flex-wrap:wrap; gap:10px;
  padding: 22px 0 0;
}
.ark-topic-pill {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.55); font-size:.75rem; font-weight:600;
  padding:9px 18px; border-radius:99px; text-decoration:none;
  transition:all .3s; letter-spacing:.02em;
}
.ark-topic-pill i { color:var(--pc,#7ec8ff); font-size:.72rem; }
.ark-topic-pill:hover {
  background:rgba(255,255,255,.1); color:#fff;
  border-color:rgba(255,255,255,.25);
  transform:translateY(-2px);
}
 
/* ── VIEW ALL BTN ── */
.ark-viewall-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(0,212,170,.12); border:1.5px solid rgba(0,212,170,.3);
  color:#00d4aa; font-size:.84rem; font-weight:700;
  padding:13px 32px; border-radius:99px; text-decoration:none;
  transition:all .3s; letter-spacing:.04em;
}
.ark-viewall-btn:hover {
  background:rgba(0,212,170,.22); border-color:rgba(0,212,170,.6);
  color:#fff; transform:translateY(-2px);
}
.ark-viewall-btn .ark-btn-icon {
  width:28px; height:28px; border-radius:50%;
  background:rgba(0,212,170,.2); display:inline-flex;
  align-items:center; justify-content:center; font-size:.65rem;
  transition:all .3s;
}
.ark-viewall-btn:hover .ark-btn-icon { background:#00d4aa; color:#06101c; transform:translateX(4px); }
 
/* ══ ARTIKEL MODAL POPUP ══ */
.ark-backdrop {
  position:fixed; inset:0; z-index:9998;
  background:rgba(3,10,24,.88); backdrop-filter:blur(18px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none;
  transition:opacity .35s;
}
.ark-backdrop.open { opacity:1; pointer-events:auto; }
.ark-modal {
  background:#0d1829; border-radius:20px; width:100%;
  max-width:860px; max-height:90vh; overflow-y:auto;
  position:relative; box-shadow:0 40px 100px rgba(0,0,0,.6);
  transform:scale(0.95) translateY(20px);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  scroll-behavior:smooth;
}
.ark-backdrop.open .ark-modal { transform:scale(1) translateY(0); }
.ark-m-close {
  position:sticky; top:12px; left:100%; margin-right:12px;
  z-index:10; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff; cursor:pointer; font-size:.82rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s; float:right;
}
.ark-m-close:hover { background:rgba(255,107,107,.8); }
.ark-m-progress {
  position:sticky; top:0; left:0; right:0; height:3px;
  background:rgba(255,255,255,.07); z-index:9;
}
.ark-m-progress-bar { height:100%; width:0; background:linear-gradient(90deg,#006fd6,#00d4aa); transition:width .12s; }
.ark-m-hero { position:relative; height:280px; overflow:hidden; }
.ark-m-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.ark-m-hero-ov {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(13,24,41,1) 0%,rgba(13,24,41,.4) 50%,transparent 80%);
}
.ark-m-cat {
  position:absolute; bottom:18px; left:22px; z-index:3;
  font-size:.56rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:#06101c; padding:5px 14px; border-radius:4px;
}
.ark-m-hero-meta {
  position:absolute; bottom:18px; right:22px; z-index:3;
  display:flex; gap:10px; flex-wrap:wrap;
}
.ark-m-hero-meta span {
  font-size:.62rem; color:rgba(255,255,255,.6); font-weight:600;
  display:flex; align-items:center; gap:5px;
}
.ark-m-hero-meta i { font-size:.58rem; color:#00d4aa; }
 
.ark-m-layout { display:grid; grid-template-columns:1fr 280px; gap:0; }
 
/* Main content */
.ark-m-content { padding:28px 28px 32px; }
.ark-m-author-row {
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px; flex-wrap:wrap;
}
.ark-m-av {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,#006fd6,#00c9a7);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color:#fff; flex-shrink:0;
}
.ark-m-av-info strong { display:block; font-size:.78rem; color:rgba(255,255,255,.85); }
.ark-m-av-info span   { font-size:.65rem; color:rgba(255,255,255,.3); }
.ark-m-share {
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  border:1px solid rgba(255,255,255,.15); background:none;
  color:rgba(255,255,255,.55); font-size:.72rem; font-weight:600;
  padding:7px 14px; border-radius:99px; cursor:pointer;
  transition:all .3s; flex-shrink:0;
}
.ark-m-share:hover { border-color:#00d4aa; color:#00d4aa; }
.ark-m-title {
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.3rem,2.5vw,1.75rem); color:#fff;
  font-weight:600; line-height:1.3; margin-bottom:20px; letter-spacing:-.02em;
}
.ark-m-prose {
  font-size:.88rem; line-height:1.85; color:rgba(200,220,240,.7);
  font-weight:300; margin-bottom:28px;
}
.ark-m-prose p { margin-bottom:14px; }
.ark-m-fullbtn {
  display:inline-flex; align-items:center; gap:9px;
  background:linear-gradient(135deg,#006fd6,#0057c8);
  color:#fff; font-size:.82rem; font-weight:700; padding:12px 26px;
  border-radius:99px; text-decoration:none; letter-spacing:.04em;
  transition:all .3s; box-shadow:0 8px 24px rgba(0,111,214,.4);
}
.ark-m-fullbtn:hover { background:linear-gradient(135deg,#0057c8,#003f9e); color:#fff; transform:translateY(-2px); }
 
/* Sidebar */
.ark-m-sidebar {
  background:#081322; border-left:1px solid rgba(255,255,255,.07);
  padding:24px 20px;
}
.ark-m-sb-block { margin-bottom:24px; }
.ark-m-sb-label {
  font-size:.58rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.25); margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.ark-m-sb-label span { flex:1; height:1px; background:rgba(255,255,255,.07); }
.ark-m-rel-item {
  display:flex; align-items:flex-start; gap:10px; padding:10px 8px;
  border-radius:8px; cursor:pointer; transition:background .25s; margin-bottom:4px;
}
.ark-m-rel-item:hover { background:rgba(255,255,255,.05); }
.ark-m-rel-thumb {
  width:44px; height:44px; border-radius:7px; overflow:hidden; flex-shrink:0;
}
.ark-m-rel-thumb img { width:100%; height:100%; object-fit:cover; }
.ark-m-rel-cat  { font-size:.52rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; display:block; margin-bottom:3px; }
.ark-m-rel-title { font-size:.75rem; color:rgba(255,255,255,.7); font-weight:600; line-height:1.3; display:block; margin-bottom:3px; transition:color .25s; }
.ark-m-rel-item:hover .ark-m-rel-title { color:#fff; }
.ark-m-rel-date { font-size:.58rem; color:rgba(255,255,255,.22); display:flex; align-items:center; gap:4px; }
.ark-m-rel-date i { font-size:.55rem; }
 
.ark-m-tags { display:flex; flex-wrap:wrap; gap:6px; }
.ark-m-tag {
  font-size:.65rem; font-weight:600; color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  padding:5px 12px; border-radius:99px; transition:all .25s;
}
.ark-m-tag:hover { background:rgba(0,212,170,.12); border-color:rgba(0,212,170,.3); color:#00d4aa; }
 
.ark-m-ugd {
  background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.2);
  border-radius:12px; padding:16px; text-align:center; margin-top:16px;
}
.ark-m-ugd-icon { font-size:1.5rem; display:block; margin-bottom:8px; }
.ark-m-ugd strong { display:block; color:rgba(255,255,255,.85); font-size:.84rem; margin-bottom:6px; }
.ark-m-ugd p { font-size:.72rem; color:rgba(255,255,255,.38); line-height:1.6; margin-bottom:12px; }
.ark-m-ugd-btn {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,107,107,.2); border:1px solid rgba(255,107,107,.4);
  color:rgba(255,180,180,.9); font-size:.75rem; font-weight:700;
  padding:8px 18px; border-radius:99px; text-decoration:none;
  transition:all .3s; letter-spacing:.04em;
}
.ark-m-ugd-btn:hover { background:rgba(255,107,107,.35); color:#fff; }
 
.ark-toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(0,212,170,.95); color:#06101c; font-size:.78rem; font-weight:700;
  padding:10px 22px; border-radius:99px; opacity:0; pointer-events:none;
  transition:all .35s; z-index:10000; display:flex; align-items:center; gap:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.ark-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
 
/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .ark-layout { grid-template-columns: 1fr; }
  .ark-hero-card { min-height: 420px; }
  .ark-m-layout { grid-template-columns: 1fr; }
  .ark-m-sidebar { border-left: none; border-top: 1px solid rgba(255,255,255,.07); }
}
@media (max-width: 768px) {
  .ark-section { padding: 68px 0 52px; }
  .ark-small-grid { grid-template-columns: repeat(2,1fr); }
  .ark-m-hero { height: 200px; }
  .ark-m-content { padding: 20px; }
}
@media (max-width: 576px) {
  .ark-small-grid { grid-template-columns: 1fr; }
  .ark-topics { gap: 7px; }
  .ark-topic-pill { font-size: .68rem; padding: 7px 13px; }
}

/* ══════════════════════════════════════════
   BERITA & PENGUMUMAN — PREMIUM MAGAZINE
══════════════════════════════════════════ */
#pengumuman {
  background: #f4f7fc;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
#pengumuman::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #006fd6 0%, #00c9a7 50%, #006fd6 100%);
  background-size: 200%;
  animation: berita-shimmer 4s linear infinite;
}
@keyframes berita-shimmer { 0%{background-position:0%} 100%{background-position:200%} }
#pengumuman .container { position: relative; z-index: 2; }

.berita-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; gap: 24px; flex-wrap: wrap; }
.berita-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.60rem; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: #006fd6; margin-bottom: 12px; }
.berita-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #006fd6; animation: pulse-dot 2s infinite; }
.berita-title-main { font-family: var(--font-play); font-size: clamp(2rem, 4vw, 3.2rem); color: #0a1628; line-height: 1.1; font-weight: 400; letter-spacing: -0.03em; margin: 0; }
.berita-title-main em { font-style: italic; color: #006fd6; }
.berita-cta-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.77rem; font-weight: 700; letter-spacing: 0.05em; color: #006fd6; border: 1.5px solid #006fd6; padding: 10px 22px; border-radius: 99px; transition: all 0.3s ease; text-decoration: none; white-space: nowrap; }
.berita-cta-link:hover { background: #006fd6; color: #fff; }
.berita-cta-link i { font-size: 0.7rem; transition: transform 0.3s; }
.berita-cta-link:hover i { transform: translateX(4px); }

.berita-mega { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 20px; }

.brt-featured { position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; background: #0a1628; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 24px 60px rgba(0,0,0,0.15); transition: transform 0.4s ease, box-shadow 0.4s ease; text-decoration: none; }
.brt-featured:hover { transform: translateY(-6px); box-shadow: 0 36px 80px rgba(0,0,0,0.2); }
.brt-featured:hover .brt-feat-bg img { transform: scale(1.06); }
.brt-feat-bg { position: absolute; inset: 0; z-index: 0; }
.brt-feat-bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.45); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.brt-feat-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,13,26,0.97) 0%, rgba(6,13,26,0.6) 40%, rgba(6,13,26,0.1) 75%, transparent 100%); }
.brt-feat-content { position: relative; z-index: 3; padding: 32px; }
.brt-feat-cat { display: inline-block; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; background: #006fd6; color: #fff; padding: 5px 14px; border-radius: 4px; margin-bottom: 14px; }
.brt-feat-title { font-family: var(--font-play); font-size: clamp(1.2rem, 2.2vw, 1.75rem); color: #fff; font-weight: 600; line-height: 1.3; margin-bottom: 12px; letter-spacing: -0.02em; }
.brt-feat-excerpt { font-size: 0.82rem; color: rgba(255,255,255,0.52); line-height: 1.75; font-family: var(--font-dm); font-weight: 300; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.brt-feat-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brt-feat-date { display: flex; align-items: center; gap: 7px; font-size: 0.68rem; color: rgba(255,255,255,0.4); font-weight: 500; }
.brt-feat-date i { font-size: 0.65rem; color: #7ec8ff; }
.brt-feat-readmore { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 8px 18px; border-radius: 99px; cursor: pointer; transition: all 0.3s ease; letter-spacing: 0.04em; white-space: nowrap; }
.brt-feat-readmore:hover { background: #006fd6; border-color: #006fd6; }
.brt-live-badge { position: absolute; top: 20px; left: 20px; z-index: 4; display: flex; align-items: center; gap: 7px; background: rgba(6,13,26,0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); font-size: 0.62rem; font-weight: 700; padding: 6px 14px; border-radius: 99px; letter-spacing: 0.08em; text-transform: uppercase; }
.brt-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #00c9a7; animation: pulse-dot 2s infinite; }

.brt-right-stack { display: flex; flex-direction: column; gap: 12px; }
.brt-mini-card { background: #fff; border-radius: 16px; overflow: hidden; display: flex; gap: 0; cursor: pointer; border: 1.5px solid rgba(0,0,0,0.06); box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: all 0.35s ease; flex: 1; text-decoration: none; }
.brt-mini-card:hover { transform: translateX(6px); box-shadow: 0 8px 32px rgba(0,111,214,0.12); border-color: rgba(0,111,214,0.2); }
.brt-mini-img { width: 110px; min-width: 110px; overflow: hidden; position: relative; }
.brt-mini-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.brt-mini-card:hover .brt-mini-img img { transform: scale(1.1); }
.brt-mini-body { padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; }
.brt-mini-cat { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #006fd6; margin-bottom: 6px; }
.brt-mini-title { font-family: var(--font-play); font-size: 0.88rem; font-weight: 600; color: #0a1628; line-height: 1.4; margin-bottom: 8px; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brt-mini-card:hover .brt-mini-title { color: #006fd6; }
.brt-mini-date { font-size: 0.63rem; color: #6b7fa3; font-weight: 500; display: flex; align-items: center; gap: 5px; }

.brt-bottom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.brt-grid-card { background: #fff; border-radius: 18px; overflow: hidden; border: 1.5px solid rgba(0,0,0,0.06); box-shadow: 0 2px 16px rgba(0,0,0,0.06); cursor: pointer; transition: all 0.4s ease; text-decoration: none; display: flex; flex-direction: column; }
.brt-grid-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(0,111,214,0.13); border-color: rgba(0,111,214,0.2); }
.brt-grid-img { height: 180px; overflow: hidden; position: relative; }
.brt-grid-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.brt-grid-card:hover .brt-grid-img img { transform: scale(1.07); }
.brt-grid-cat-badge { position: absolute; bottom: 14px; left: 14px; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; background: #fff; color: #006fd6; padding: 5px 12px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.brt-grid-img::after { content: ''; position: absolute; bottom: 0; left: 0; right: 100%; height: 3px; background: linear-gradient(90deg, #006fd6, #00c9a7); transition: right 0.5s ease; }
.brt-grid-card:hover .brt-grid-img::after { right: 0; }
.brt-grid-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.brt-grid-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.brt-grid-date-badge { display: flex; align-items: center; gap: 5px; font-size: 0.65rem; color: #6b7fa3; font-weight: 500; }
.brt-grid-date-badge i { color: #006fd6; font-size: 0.62rem; }
.brt-grid-title { font-family: var(--font-play); font-size: 1.02rem; font-weight: 600; color: #0a1628; line-height: 1.4; margin-bottom: 10px; letter-spacing: -0.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s; }
.brt-grid-card:hover .brt-grid-title { color: #006fd6; }
.brt-grid-excerpt { font-size: 0.80rem; color: #6b7fa3; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 18px; flex: 1; font-family: var(--font-dm); font-weight: 300; }
.brt-grid-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.06); margin-top: auto; }
.brt-read-link { font-size: 0.72rem; font-weight: 700; color: #006fd6; letter-spacing: 0.04em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; text-decoration: none; transition: gap 0.3s; }
.brt-read-link i { font-size: 0.65rem; }
.brt-grid-card:hover .brt-read-link { gap: 10px; }
.brt-bookmark-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); background: none; display: flex; align-items: center; justify-content: center; color: #6b7fa3; font-size: 0.75rem; cursor: pointer; transition: all 0.3s; }
.brt-bookmark-btn:hover { background: rgba(0,111,214,0.08); color: #006fd6; border-color: rgba(0,111,214,0.2); }

/* ── PAKET ── */
#paket { background: var(--c-white); }
.paket-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }
.paket-tab-btn { font-size: 0.78rem; font-weight: 700; padding: 9px 22px; border-radius: var(--radius-full); border: 1.5px solid var(--c-border); background: var(--c-smoke); color: var(--c-muted); cursor: pointer; transition: var(--ease); letter-spacing: 0.03em; }
.paket-tab-btn.active, .paket-tab-btn:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--sh-blue); }
.paket-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.paket-card { background: var(--c-white); border-radius: var(--radius-xl); border: 2px solid var(--c-border-l); padding: 32px 26px 28px; position: relative; overflow: hidden; transition: var(--ease-spring); }
.paket-card.featured-paket { border-color: var(--c-primary); background: linear-gradient(145deg, var(--c-primary-xl), #fff); box-shadow: var(--sh-blue); }
.paket-ribbon { position: absolute; top: 18px; right: -24px; background: var(--c-primary); color: #fff; font-size: 0.60rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 36px; transform: rotate(40deg); }
.paket-icon-box { width: 54px; height: 54px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 18px; }
.paket-card:nth-child(1) .paket-icon-box { background: var(--c-primary-l); color: var(--c-primary); }
.paket-card:nth-child(2) .paket-icon-box { background: var(--c-accent-l); color: var(--c-accent-d); }
.paket-card:nth-child(3) .paket-icon-box { background: var(--c-gold-l); color: #b7741a; }
.paket-card.featured-paket .paket-icon-box { background: var(--c-primary); color: #fff; box-shadow: var(--sh-blue); }
.paket-kelas { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px; }
.paket-name { font-family: var(--font-display); font-size: 1.35rem; color: var(--c-ink); font-weight: 400; margin-bottom: 6px; letter-spacing: -0.02em; }
.paket-sub { font-size: 0.8rem; color: var(--c-muted); margin-bottom: 20px; line-height: 1.6; }
.paket-divider { height: 1px; background: var(--c-border-l); margin-bottom: 20px; }
.paket-features { list-style: none; margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.paket-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; color: var(--c-ink-mid); line-height: 1.5; }
.paket-features li i { color: var(--c-accent); font-size: 0.7rem; margin-top: 4px; flex-shrink: 0; }
.paket-features li.not-included { color: var(--c-muted); text-decoration: line-through; }
.paket-features li.not-included i { color: var(--c-border); }
.paket-cta-btn { display: block; text-align: center; padding: 12px 20px; border-radius: var(--radius-md); font-size: 0.83rem; font-weight: 700; transition: var(--ease); border: 1.5px solid var(--c-border); color: var(--c-ink-mid); background: var(--c-smoke); }
.paket-card.featured-paket .paket-cta-btn { background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--sh-blue); }
.paket-cta-btn:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); box-shadow: var(--sh-blue); }
.paket-card:hover { transform: translateY(-8px); box-shadow: var(--sh-md); }
.paket-card.featured-paket:hover { transform: translateY(-10px); box-shadow: var(--sh-lg); }
.paket-note { text-align: center; margin-top: 36px; font-size: 0.8rem; color: var(--c-muted); line-height: 1.8; }
.paket-note a { color: var(--c-primary); font-weight: 600; }

/* ── JAM ── */
#jam { background: var(--c-white); }
.jam-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.jam-card { background: var(--c-smoke); border-radius: var(--radius-lg); border: 1.5px solid var(--c-border-l); padding: 30px 24px; transition: var(--ease-spring); position: relative; overflow: hidden; }
.jam-card-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.35s; }
.jam-card:nth-child(1) .jam-card-accent { background: linear-gradient(90deg, var(--c-primary), #7EC8FF); }
.jam-card:nth-child(2) .jam-card-accent { background: linear-gradient(90deg, var(--c-accent), #7EC8FF); }
.jam-card:nth-child(3) .jam-card-accent { background: linear-gradient(90deg, var(--c-warn), var(--c-gold)); }
.jam-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); background: var(--c-white); border-color: var(--c-border); }
.jam-card:hover .jam-card-accent { transform: scaleX(1); }
.jam-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 18px; transition: var(--ease); }
.jam-card:nth-child(1) .jam-icon { background: var(--c-primary-l); color: var(--c-primary); }
.jam-card:nth-child(2) .jam-icon { background: var(--c-accent-l); color: var(--c-accent-d); }
.jam-card:nth-child(3) .jam-icon { background: var(--c-warn-l); color: var(--c-warn); }
.jam-card:nth-child(1):hover .jam-icon { background: var(--c-primary); color: #fff; }
.jam-card:nth-child(2):hover .jam-icon { background: var(--c-accent); color: #fff; }
.jam-card:nth-child(3):hover .jam-icon { background: var(--c-warn); color: #fff; }
.jam-card h5 { font-weight: 700; font-size: 0.92rem; color: var(--c-ink); margin-bottom: 16px; }
.jam-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--c-border-l); font-size: 0.82rem; }
.jam-row:last-child { border-bottom: none; }
.jam-day { color: var(--c-muted); font-weight: 400; }
.jam-time { color: var(--c-ink); font-weight: 700; }

/* ── KONTAK ── */
#kontak { background: var(--c-primary-xl); }
.kontak-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.kontak-card { background: var(--c-white); border-radius: var(--radius-lg); border: 1.5px solid var(--c-border-l); padding: 36px 26px; text-align: center; transition: var(--ease-spring); position: relative; overflow: hidden; }
.kontak-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: center; transition: transform 0.35s; }
.kontak-card:nth-child(1)::before { background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); }
.kontak-card:nth-child(2)::before { background: linear-gradient(90deg, var(--c-accent), var(--c-gold)); }
.kontak-card:nth-child(3)::before { background: linear-gradient(90deg, var(--c-gold), var(--c-warn)); }
.kontak-card:hover { transform: translateY(-7px); box-shadow: var(--sh-md); }
.kontak-card:hover::before { transform: scaleX(1); }
.kontak-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin: 0 auto 16px; transition: var(--ease); }
.kontak-card:nth-child(1) .kontak-icon { background: var(--c-primary-l); color: var(--c-primary); }
.kontak-card:nth-child(2) .kontak-icon { background: var(--c-accent-l); color: var(--c-accent-d); }
.kontak-card:nth-child(3) .kontak-icon { background: var(--c-gold-l); color: #b7741a; }
.kontak-card:nth-child(1):hover .kontak-icon { background: var(--c-primary); color: #fff; box-shadow: var(--sh-blue); }
.kontak-card:nth-child(2):hover .kontak-icon { background: var(--c-accent); color: #fff; box-shadow: var(--sh-teal); }
.kontak-card:nth-child(3):hover .kontak-icon { background: var(--c-gold); color: #fff; }
.kontak-card h5 { font-weight: 700; color: var(--c-ink); margin-bottom: 9px; font-size: 0.98rem; }
.kontak-card p, .kontak-card a { font-size: 0.84rem; color: var(--c-muted); line-height: 1.85; }
.kontak-card a:hover { color: var(--c-primary); }

/* ── FOOTER ── */
#footer { background: var(--c-ink); color: rgba(255,255,255,0.5); padding: 72px 0 28px; position: relative; overflow: hidden; }
#footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,111,214,0.4), rgba(0,201,167,0.3), transparent); }
.ft-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ft-logo-box { width: 38px; height: 38px; border-radius: 10px; background: rgba(0,111,214,0.1); border: 1px solid rgba(0,111,214,0.25); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ft-logo-box img { height: 34px; width: auto; object-fit: contain; }
.ft-brand-text strong { font-size: 1rem; font-weight: 700; color: #fff; display: block; }
.ft-brand-text span { font-size: 0.58rem; color: rgba(255,255,255,0.3); letter-spacing: 0.1em; text-transform: uppercase; }
.ft-desc { font-size: 0.84rem; color: rgba(255,255,255,0.36); line-height: 1.85; margin-bottom: 22px; }
.ft-social { display: flex; gap: 9px; }
.ft-social-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.42); display: flex; align-items: center; justify-content: center; font-size: 0.84rem; transition: var(--ease); }
.ft-social-btn:nth-child(1):hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.ft-social-btn:nth-child(2):hover { background: #E1306C; border-color: #E1306C; color: #fff; }
.ft-social-btn:nth-child(3):hover { background: #25D366; border-color: #25D366; color: #fff; }
#footer h6 { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.18); margin-bottom: 18px; font-weight: 700; }
#footer ul { list-style: none; }
#footer ul li { margin-bottom: 10px; }
#footer ul li a { color: rgba(255,255,255,0.44); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 9px; transition: var(--ease); }
#footer ul li a:hover { color: #7EC8FF; padding-left: 3px; }
#footer ul li a i { width: 12px; font-size: 0.73rem; color: rgba(0,111,214,0.55); }
.ft-hr { border-color: rgba(255,255,255,0.06); margin: 42px 0 22px; }
.ft-copy { text-align: center; font-size: 0.73rem; color: rgba(255,255,255,0.15); }

/* ── LOADING SCREEN ── */
#page-loader { position: fixed; inset: 0; z-index: 99999; background: var(--c-ink); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; transition: opacity 0.6s ease, visibility 0.6s ease; }
#page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo { display: flex; align-items: center; gap: 14px; animation: loaderFadeIn 0.5s ease forwards; }
.loader-logo img { height: 48px; width: auto; filter: brightness(1.2); }
.loader-logo-text strong { display: block; color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.loader-logo-text span { font-size: 0.58rem; color: var(--c-accent); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.loader-bar-wrap { width: 200px; height: 3px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
.loader-bar { height: 100%; background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); border-radius: 99px; width: 0; animation: loaderBar 1.2s cubic-bezier(0.4,0,0.2,1) forwards 0.3s; }
.loader-text { font-size: 0.65rem; color: rgba(255,255,255,0.3); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; animation: loaderFadeIn 0.5s ease 0.2s both; }
@keyframes loaderBar { 0%{width:0} 40%{width:60%} 70%{width:85%} 100%{width:100%} }
@keyframes loaderFadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ── INFO TICKER ── */
.info-ticker { background: linear-gradient(90deg, var(--c-primary-d) 0%, var(--c-primary) 100%); padding: 0; overflow: hidden; height: 36px; display: flex; align-items: center; position: relative; z-index: 999; }
.info-ticker::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 80px; z-index: 2; background: linear-gradient(-90deg, var(--c-primary), transparent); pointer-events: none; }
.ticker-label { flex-shrink: 0; background: var(--c-accent); color: var(--c-ink); font-size: 0.60rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; padding: 0 18px 0 20px; height: 100%; display: flex; align-items: center; gap: 7px; white-space: nowrap; position: relative; z-index: 3; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); padding-right: 26px; margin-right: 4px; }
.ticker-track-wrap { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center; }
.ticker-track { display: flex; gap: 0; animation: ticker-scroll 28s linear infinite; white-space: nowrap; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; font-size: 0.70rem; color: rgba(255,255,255,0.92); font-weight: 500; padding: 0 28px; }
.ticker-item i { color: #a8e6d4; font-size: 0.65rem; flex-shrink: 0; }
.ticker-sep { color: rgba(255,255,255,0.18); padding: 0 2px; display: inline-flex; align-items: center; }
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── HERO PARTICLES ── */
#hero-particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.reveal.reveal-left  { transform: translateX(-36px) translateY(0); }
.reveal.reveal-right { transform: translateX(36px) translateY(0); }
.reveal.reveal-scale { transform: scale(0.92) translateY(0); }
.reveal.visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
.reveal-d1{transition-delay:0.1s} .reveal-d2{transition-delay:0.2s} .reveal-d3{transition-delay:0.3s} .reveal-d4{transition-delay:0.4s}

/* ── FADE UP ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
.fade-up { opacity: 0; animation: fadeUp 0.65s ease forwards; }
.delay-1{animation-delay:0.1s} .delay-2{animation-delay:0.2s} .delay-3{animation-delay:0.3s} .delay-4{animation-delay:0.4s}

/* ── WA FLOAT ── */
.wa-float { position: fixed; bottom: 82px; right: 24px; z-index: 998; display: flex; align-items: center; gap: 10px; }
.wa-tooltip { background: var(--c-ink); color: rgba(255,255,255,0.9); font-size: 0.70rem; font-weight: 600; padding: 7px 14px; border-radius: var(--radius-md); white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: var(--sh-md); animation: wa-tooltip-blink 4s ease-in-out 3s 2 forwards; }
@keyframes wa-tooltip-blink { 0%,100%{opacity:0} 20%,80%{opacity:1} }
.wa-btn { width: 52px; height: 52px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 6px 24px rgba(37,211,102,0.45); transition: var(--ease); text-decoration: none; position: relative; }
.wa-btn::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(37,211,102,0.3); animation: wa-ring 2.5s ease-in-out infinite; }
.wa-btn:hover { background: #1ebe5b; transform: scale(1.1); box-shadow: 0 10px 32px rgba(37,211,102,0.55); color: #fff; }
@keyframes wa-ring { 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.6);opacity:0} }

/* ── TO TOP ── */
.to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 37px;
    height: 37px;
    border-radius: var(--radius-md);
    background: var(--c-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    box-shadow: var(--sh-blue);
    opacity: 0;
    pointer-events: none;
    transition: var(--ease);
    transform: translateY(12px);
}
.to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: var(--c-primary-d); color: #fff; transform: translateY(-2px); }

/* ── UGD MOBILE BAR ── */
.ugd-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 990; background: linear-gradient(90deg, #c0392b, var(--c-warn), #c0392b); background-size: 200%; animation: ugd-bar-anim 3s linear infinite; padding: 11px 20px; justify-content: center; align-items: center; gap: 12px; font-size: 0.82rem; font-weight: 700; color: #fff; box-shadow: 0 -4px 20px rgba(192,57,43,0.4); text-decoration: none; letter-spacing: 0.02em; }
@keyframes ugd-bar-anim { 0%{background-position:0%} 100%{background-position:200%} }
.ugd-cta-bar i { font-size: 1.05rem; }

/* ── TYPEWRITER ── */
.typewriter-cursor { display: inline-block; width: 2px; height: 0.9em; background: var(--c-accent); margin-left: 3px; vertical-align: text-bottom; border-radius: 2px; animation: blink-cursor 0.85s step-end infinite; }
@keyframes blink-cursor { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) { .nav-emergency { display: none; } }
@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2,1fr); }
  .art-layout { grid-template-columns: 1fr; }
  .art-hero-card { min-height: 420px; }
  .art-stack { grid-template-rows: unset; grid-template-columns: repeat(2,1fr); }
  .art-bottom-strip { border-radius: 0; }
}
@media (max-width: 991px) {
  .nav-menu { display: none; }
  .nav-toggle { display: block; }
  .nav-menu.open { display: flex; flex-direction: column; align-items: stretch; position: fixed; top: 75px; left: 0; right: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); border-bottom: 1px solid var(--c-border-l); padding: 12px 16px 18px; box-shadow: var(--sh-md); gap: 2px; z-index: 999; }
  .nav-menu.open li a { padding: 11px 14px !important; border-radius: var(--radius-sm); }
  .nav-menu.open .nav-cta a { text-align: center; margin-top: 6px; justify-content: center; }
  .jam-grid, .kontak-grid { grid-template-columns: repeat(2,1fr); }
  .jenis-grid { grid-template-columns: repeat(2,1fr); }
  .hero-pimpinan-col { gap: 0; }
  .pimpinan-figure.p-bupati   .pimpinan-img-wrap { width: 165px; height: 210px; }
  .pimpinan-figure.p-wakil    .pimpinan-img-wrap { width: 150px; height: 190px; }
  .pimpinan-figure.p-direktur .pimpinan-img-wrap { width: 130px; height: 165px; }
  .pimpinan-badge-name { font-size: 0.68rem; }
  .pimpinan-badge-role { font-size: 0.48rem; }
  .berita-mega { grid-template-columns: 1fr; }
  .brt-featured { min-height: 380px; }
  .brt-right-stack { flex-direction: row; }
  .brt-mini-card { flex-direction: column; }
  .brt-mini-img { width: 100%; height: 130px; }
  .brt-bottom-grid { grid-template-columns: repeat(2,1fr); }
  .hero-stats { display: none; }
}
@media (max-width: 767px) {
  section { padding: 68px 0; }
  #artikel, #pengumuman { padding: 68px 0; }
  .stats-row { flex-wrap: wrap; }
  .stat-item { flex: 0 0 50%; border-right: none; border-bottom: 1px solid var(--c-border-l); }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--c-border-l); }
  .stat-item:last-child, .stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .kontak-grid { grid-template-columns: 1fr; }
  .jam-grid { grid-template-columns: 1fr; }
  .art-layout { gap: 1px; }
  .art-stack { grid-template-columns: 1fr; }
  .art-bottom-strip { grid-template-columns: 1fr; border-radius: 0 0 16px 16px; }
  .brt-right-stack { flex-direction: column; }
  .brt-bottom-grid { grid-template-columns: 1fr; }
  .art-header, .berita-header { flex-direction: column; align-items: flex-start; }
  .ugd-cta-bar { display: flex; }
  .wa-float { bottom: 58px; }
  .to-top { bottom: 120px; }
}
@media (max-width: 575px) {
  section { padding: 52px 0; }
  .svc-grid { grid-template-columns: 1fr; }
  .jenis-grid { grid-template-columns: 1fr; }
  .hero-btns { flex-direction: column; }
  .hero-btns a { justify-content: center; }
  .publik-card { min-width: 120px; max-width: 160px; }
  .slider-arrow.prev { left: 0; }
  .slider-arrow.next { right: 0; }
  .dok-card { flex: 0 0 185px; width: 185px; }
  .dok-img-wrap, .dok-placeholder { height: 190px; }
  .pimpinan-figure.p-bupati   .pimpinan-img-wrap { width: 115px; height: 145px; }
  .pimpinan-figure.p-wakil    .pimpinan-img-wrap { width: 102px; height: 132px; }
  .pimpinan-figure.p-direktur .pimpinan-img-wrap { width: 88px; height: 112px; }
  .pimpinan-badge { width: 124%; padding: 7px 6px 9px; }
  .pimpinan-badge-name { font-size: 0.54rem !important; line-height: 1.3; }
  .pimpinan-badge-role { font-size: 0.38rem !important; letter-spacing: 0.08em; }
  .art-hero-card { min-height: 360px; }
  .art-hero-content { padding: 22px; }
  .brt-feat-content { padding: 22px; }
  .paket-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
.modal-content { border-radius: 20px !important; border: none !important; overflow: hidden; }