:root{
  /* Primary */
  --navy-900:#0D1B2A;
  --navy-700:#102A43;
  --navy-500:#1E3A5F;
  --navy-300:#40698F;
  --navy-100:#E6EEF7;
  /* Accent */
  --gold-600:#D6AB4F;
  --gold-500:#E3834E;
  --gold-300:#F5DB8A;
  --gold-100:#FFF4DA;
  /* Semantic */
  --success:#28A745;
  --info:#0D6EFD;
  --warning:#F59E0B;
  --danger:#DC3545;
  --neutral:#6C757D;
  /* Neutral */
  --gray-900:#212529;
  --gray-700:#495057;
  --gray-500:#ADB5BD;
  --gray-300:#DEE2E6;
  --gray-100:#F8F9FA;
  --white:#FFFFFF;
  /* Spacing (8pt grid) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --shadow-card:0 1px 2px rgba(13,27,42,0.06), 0 1px 3px rgba(13,27,42,0.08);
  --shadow-card-hover:0 16px 32px rgba(11,25,44,0.16);
  --shadow-float:0 12px 32px rgba(13,27,42,0.16);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html{
  max-width:100%;
}
body{
  font-family:'Poppins', sans-serif;
  color:var(--gray-900);
  background:var(--white);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  width:100%;
  overflow-x:hidden; /* cukup di body saja, TIDAK di html */
}
img,svg{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none;}
ul{list-style:none;}

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 var(--sp-4);
}

h1,h2,h3,h4{color:var(--navy-900); font-weight:700; word-wrap:break-word;}
.h1{font-size:32px; font-weight:700; line-height:1.2;}
.h2{font-size:24px; font-weight:600; line-height:1.3;}
.h3{font-size:20px; font-weight:600; color:var(--navy-700);}
.h4{font-size:16px; font-weight:600; color:var(--navy-700);}
.body-lg{font-size:16px; font-weight:400;}
.body-md{font-size:14px; font-weight:400;}
.body-sm{font-size:12px; font-weight:400; color:var(--neutral);}
.caption{font-size:11px; font-weight:400; color:var(--neutral);}

.icon{width:20px; height:20px; flex-shrink:0;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600;
  padding:12px 24px;
  border-radius:var(--radius-sm);
  transition:background-color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--navy-700); color:var(--white); }
.btn-primary:hover{ background:var(--navy-900); }
.btn-secondary{ background:var(--white); color:var(--navy-700); border:1px solid var(--gray-300); }
.btn-secondary:hover{ background:var(--gray-100); }
.btn-text{ background:none; color:var(--navy-700); padding:0; font-weight:600; }
.btn-text .icon{ width:16px; height:16px; }
.btn-text:hover{ color:var(--gold-600); }

/* ===== Badges ===== */
.badge{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:600;
  padding:3px 10px;
  border-radius:999px;
}
.badge-info{ background:var(--info); color:var(--white); }
.badge-gold{ background:var(--gold-500); color:var(--white); }
.badge-success{ background:var(--success); color:var(--white); }
.badge-neutral{ background:var(--gray-100); color:var(--gray-700); border:1px solid var(--gray-300); }

/* ===== Header ===== */
header{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--gray-300);
  width:100%;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  min-height:65px;
  padding-top:var(--sp-2); padding-bottom:var(--sp-2);
  gap:var(--sp-3);
}
.logo{ display:flex; flex-direction:column; gap:2px; justify-content:center; flex-shrink:0; }
.logo-mark{ display:flex; align-items:center; gap:2px; line-height:1; }
.logo-mark span{ font-size:24px; font-weight:700; color:var(--navy-900); letter-spacing:0.5px; }
.logo-mark .accent{ color:var(--gold-600); }
.logo-tag{ font-size:10px; color:var(--neutral); letter-spacing:0.3px; line-height:1; white-space:nowrap; }

.nav-links{ display:flex; align-items:center; gap:var(--sp-8); height:100%; flex-wrap:wrap; }
.nav-links a{
  font-size:14px; font-weight:500; color:var(--gray-700);
  padding:var(--sp-5) 0; position:relative;
  display:inline-flex; align-items:center;
}
.nav-links a.active{ color:var(--navy-900); font-weight:600; }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--navy-700); border-radius:2px;
}

.nav-right{ display:flex; align-items:center; gap:var(--sp-5); flex-shrink:0; }
.icon-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; background:transparent; color:var(--navy-900);
  flex-shrink:0;
}
.icon-btn:hover{ background:var(--gray-100); }
.notif-dot{
  position:absolute; top:4px; right:4px;
  min-width:16px; height:16px; padding:0 3px;
  border-radius:999px; background:var(--danger); color:var(--white);
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--white);
}
.auth-pill{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--gray-300); border-radius:999px;
  padding:8px 16px 8px 8px;
  font-size:14px; font-weight:500; color:var(--navy-900);
  white-space:nowrap;
}
.auth-pill:hover{ background:var(--gray-100); }
.avatar-circle{
  width:26px; height:26px; border-radius:50%;
  background:var(--navy-100); color:var(--navy-700);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* ===== Hero ===== */
.hero{
  background:linear-gradient(180deg, var(--navy-100) 0%, #F5F8FC 100%);
  padding:var(--sp-10) 0 var(--sp-12);
  overflow:hidden;
  width:100%;
}
.hero-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16);
  align-items:center;
}
.hero-copy p{ color:var(--gray-700); margin-top:var(--sp-4); max-width:44ch; font-size:16px; }
.search-bar{
  margin-top:var(--sp-8);
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--white);
  border:1px solid var(--gray-300);
  border-radius:var(--radius-sm);
  padding:6px 6px 6px 18px;
  max-width:520px;
  width:100%;
  box-shadow:var(--shadow-card);
  flex-wrap:wrap;
}
.search-bar input{
  border:none; outline:none; flex:1; min-width:120px; font-family:inherit; font-size:14px; color:var(--gray-900);
  background:transparent;
}
.search-bar input::placeholder{ color:var(--gray-500); }
.search-bar .icon{ color:var(--gray-500); }
.search-bar .btn{ padding:12px 28px; }

.popular-tags{ margin-top:var(--sp-6); display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.popular-tags .label{ font-size:13px; font-weight:600; color:var(--gray-700); }
.tag-pill{
  font-size:13px; font-weight:500; color:var(--navy-700);
  background:var(--white); border:1px solid var(--gray-300);
  border-radius:999px; padding:6px 16px;
  white-space:nowrap;
}

.hero-visual{ position:relative; height:420px; display:flex; align-items:center; justify-content:center; width:100%; }
.hero-illustration{ width:88%; max-width:460px; height:auto; object-fit:contain; filter:drop-shadow(0 20px 30px rgba(13,27,42,0.12)); }
.float-card{
  position:absolute;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-float);
  padding:var(--sp-5);
  max-width:90%;
}
.card-top{ top:6%; left:0; width:250px; }
.card-top .stats{ display:flex; gap:var(--sp-6); margin:var(--sp-3) 0 var(--sp-4); flex-wrap:wrap; }
.card-top .stat b{ display:block; font-size:20px; color:var(--navy-900); }
.card-top .stat.warn b{ color:var(--warning); }
.card-top .stat.ok b{ color:var(--success); }
.card-top .stat span{ font-size:11px; color:var(--neutral); }
.card-bottom{ bottom:4%; right:0; width:230px; }
.status-badge{ color:var(--success); font-weight:600; font-size:13px; }
.progress-track{
  height:6px; background:var(--gray-300); border-radius:999px; margin:var(--sp-3) 0; overflow:hidden;
}
.progress-fill{ height:100%; width:55%; background:var(--info); border-radius:999px; }

/* ===== Section shells ===== */
section{ padding:var(--sp-10) 0; width:100%; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:var(--sp-6);
  flex-wrap:wrap; gap:var(--sp-2);
}

/* ===== Service icon cards ===== */
.service-grid{
  display:grid; grid-template-columns:repeat(7, 1fr); gap:var(--sp-3);
}
.svc-card{
  display:flex; flex-direction:column; gap:0;
  border:1px solid var(--gray-300); border-radius:var(--radius-md);
  padding:var(--sp-4); background:var(--white);
  min-width:0;
  transition:box-shadow .22s cubic-bezier(0.16,1,0.3,1),
            border-color .22s cubic-bezier(0.16,1,0.3,1),
            transform .22s cubic-bezier(0.16,1,0.3,1);
}
.svc-card:hover{
  box-shadow:var(--shadow-card-hover);
  border-color:var(--navy-500);
  transform:translateY(-3px);
}

/* ===== Warna badge & hover border per kategori ===== */
.svc-card.cat-blue:hover, .pop-card.cat-blue:hover{ border-color:#006EFD; }
.svc-card.cat-green:hover, .pop-card.cat-green:hover{ border-color:#28A745; }
.svc-card.cat-amber:hover, .pop-card.cat-amber:hover{ border-color:#F59E0B; }
.svc-card.cat-purple:hover, .pop-card.cat-purple:hover{ border-color:#7C3AED; }
.svc-card.cat-teal:hover, .pop-card.cat-teal:hover{ border-color:#0284C7; }
.svc-card.cat-amber-dark:hover{ border-color:#D97706; }
.svc-card.cat-yellow:hover{ border-color:#EAB308; }

.svc-count-badge.badge-blue{ background:#EFF6FF; color:#1D4ED8; }
.svc-count-badge.badge-emerald{ background:#ECFDF5; color:#047857; }
.svc-count-badge.badge-amber{ background:#FFFBEB; color:#B45309; }
.svc-count-badge.badge-purple{ background:#FAF5FF; color:#7E22CE; }
.svc-count-badge.badge-cyan{ background:#ECFEFF; color:#0E7490; }
.svc-count-badge.badge-amber-dark{ background:#FFFBEB; color:#92400E; }
.svc-count-badge.badge-yellow{ background:#FEF9C3; color:#854D0E; }
.svc-icon{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.svc-icon .icon{ width:18px; height:18px; }
.svc-card .top-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.svc-count-badge{
  font-size:9.5px; font-weight:600; color:var(--gray-700);
  background:var(--gray-100); border:1px solid var(--gray-300);
  border-radius:999px; padding:2px 8px; white-space:nowrap;
}
.svc-card .txt{ margin-top:var(--sp-3); }
.svc-card .txt h4{ font-size:13px; font-weight:700; margin-bottom:3px; }
.svc-card .txt p{
  color:var(--neutral); font-size:11px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.svc-card .link-row{
  margin-top:var(--sp-3); padding-top:var(--sp-2);
  border-top:1px solid var(--gray-100);
  display:flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; color:var(--navy-700);
  transition:transform .15s ease, color .15s ease;
}
.svc-card:hover .link-row{ transform:translateX(4px); }

.ic-blue{ background:#EBF4FE; color:#006EFD; }
.ic-green{ background:#EAF7EE; color:#28A745; }
.ic-orange{ background:#FEF3C7; color:#F59E0B; }
.ic-purple{ background:#F3E8FF; color:#7C3AED; }
.ic-teal{ background:#E0F2FE; color:#0284C7; }
.ic-amber{ background:#FEF9C3; color:#D97706; }
.ic-yellow{ background:#FEF9C3; color:#CA8A04; }

/* ===== Pantau + Popular split ===== */
.split{
  display:grid; grid-template-columns:390px 1fr; gap:var(--sp-6);
}
.pantau-card{
  background:var(--navy-100);
  border-radius:var(--radius-lg);
  padding:var(--sp-8);
  color:var(--navy-900);
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column;
  min-width:0;
}
.pantau-card h3{ color:var(--navy-900); }
.pantau-card p{ color:var(--gray-700); margin-top:var(--sp-2); font-size:13px; }
.pantau-input{
  margin-top:var(--sp-6);
  background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius-sm);
  display:flex; align-items:center; gap:var(--sp-2); padding:4px 4px 4px 14px;
  flex-wrap:wrap;
}
.pantau-input input{
  border:none; outline:none; flex:1; min-width:100px; font-family:inherit; font-size:13px; padding:8px 0; color:var(--gray-900);
}
.pantau-input .btn{ padding:10px 18px; font-size:13px; white-space:nowrap; }
.pantau-card .btn-text{ color:var(--gold-600); margin-top:var(--sp-5); font-size:13px; }
.pantau-card .btn-text:hover{ color:var(--navy-700); }

.pantau-result{
  margin-top:auto;
  padding-top:var(--sp-8);
  display:flex; align-items:center; justify-content:center;
}
.pantau-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-2); color:#7C93AC; padding:var(--sp-4) 0;
}
.pantau-empty .pantau-empty-icon{
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid #22344A;
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.pantau-empty .pantau-empty-icon .icon{ width:18px; height:18px; color:#7C93AC; }
.pantau-empty span{ font-size:11.5px; line-height:1.4; max-width:22ch; }

.phone-mock{
  display:none;
  width:180px; max-width:100%; border-radius:22px;
  background:#0A1420; border:6px solid #1B2B3E;
  padding:var(--sp-4) var(--sp-3);
}
.phone-mock.is-visible{ display:block; }
.phone-mock .ph-head{ font-size:9px; color:#8FA3BB; margin-bottom:var(--sp-2); }
.phone-mock .ph-id{ font-size:11px; font-weight:600; color:var(--white); }
.phone-mock .ph-status{ font-size:10px; color:var(--success); margin-bottom:var(--sp-3); }
.ph-step{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.ph-dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ph-dot.done{ background:var(--success); }
.ph-dot.active{ background:var(--info); }
.ph-dot.pending{ background:#33475C; }
.ph-step span{ font-size:9px; color:#C6D2DE; }

.popular-col{ display:flex; flex-direction:column; height:100%; min-width:0; }
.popular-col .section-head{ margin-bottom:var(--sp-4); }
.popular-grid{
  flex:1;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-3);
  align-items:stretch;
}
.pop-card{
  border:1px solid var(--gray-300); border-radius:var(--radius-md);
  padding:var(--sp-4); background:var(--white);
  display:flex; flex-direction:column; gap:0;
  min-width:0;
  box-shadow:0 2px 8px rgba(11,25,44,0.04);
  transition:box-shadow .22s cubic-bezier(0.16,1,0.3,1),
             border-color .22s cubic-bezier(0.16,1,0.3,1),
             transform .22s cubic-bezier(0.16,1,0.3,1);
}
.pop-card:hover{
  box-shadow:var(--shadow-card-hover);
  border-color:var(--navy-300);
  transform:translateY(-3px);
}
.pop-card .top-row{ display:flex; align-items:center; gap:10px; }
.pop-card .svc-icon{ width:32px; height:32px; border-radius:8px; flex-shrink:0; }
.pop-card .svc-icon .icon{ width:16px; height:16px; }
.pop-card h4{ font-size:13px; font-weight:700; line-height:1.3; }
.pop-card p{
  color:var(--neutral); font-size:11px; margin-top:6px; line-height:1.4;
}
.pop-meta{
  display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--neutral);
  margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--gray-100);
  flex-wrap:wrap; justify-content:space-between;
}
.pop-card p{ margin-bottom:var(--sp-2); }
.pop-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--gray-500); }
.pop-meta .free{ color:var(--success); font-weight:600; }
.pop-card .lihat-btn{
  color:var(--navy-700); background:none; border:none; padding:0;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .15s ease, color .15s ease;
}
.pop-card:hover .lihat-btn{ color:var(--navy-900); transform:translateX(3px); }
.pop-card:hover .lihat-btn .icon{ display:block; }

/* ===== Feature strip ===== */
.strip{
  background:var(--gray-100);
  border-radius:var(--radius-lg);
  display:grid; grid-template-columns:repeat(4, 1fr) 1.4fr;
  overflow:hidden;
}
.strip-item{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-6) var(--sp-5);
  border-right:1px solid var(--gray-300);
  min-width:0;
}
.strip-item .ic{
  width:40px; height:40px; border-radius:50%; background:var(--white);
  display:flex; align-items:center; justify-content:center; color:var(--navy-700); flex-shrink:0;
  box-shadow:var(--shadow-card);
}
.strip-item b{ display:block; font-size:13.5px; color:var(--navy-900); }
.strip-item span{ font-size:11.5px; color:var(--neutral); }

.help-cell{
  background:var(--navy-900); color:var(--white);
  padding:var(--sp-3) var(--sp-4);   /* vertikal 20px, horizontal 24px — lebih longgar dari sp-2 tapi ga sebesar sp-6 semua */
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  flex-wrap:nowrap;
  min-width:340px;
}
.help-cell b{ display:block; font-size:14px; margin-bottom:2px; }
.help-cell span{ font-size:11.5px; color:#AFC0D2; }
.help-contacts{ display:flex; gap:var(--sp-4); margin-top:var(--sp-3); flex-wrap:wrap; }
.help-contacts a{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--white); }
.help-contacts .icon{ width:16px; height:16px; color:var(--gold-300); }
.help-avatar {
    width: 70px;
    height: 70px;
}

.help-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* ===== Modal: Status Pengajuan ===== */
.pantau-modal-overlay{
  display:none;
  position:fixed; inset:0; z-index:100;
  background:rgba(13,27,42,0.55);
  align-items:center; justify-content:center;
  padding:var(--sp-4);
}
.pantau-modal-overlay.is-open{ display:flex; }

.pantau-modal{
  position:relative;
  background:#0A1420;
  border-radius:var(--radius-lg);
  padding:var(--sp-8);
  box-shadow:var(--shadow-float);
  width:420px;
  max-width:90vw;
  max-height:85vh;
  overflow-y:auto;
}
.pantau-modal-close{
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.08); color:#B9C6D6;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.pantau-modal-close:hover{ background:rgba(255,255,255,0.16); color:#fff; }

.pantau-modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-bottom:var(--sp-5); margin-bottom:var(--sp-6);
  border-bottom:1px solid #22344A;
  flex-wrap:wrap;
}
.pantau-modal-ticket{
  font-size:13px; font-weight:700; color:var(--white);
  font-family:monospace; letter-spacing:0.3px;
  word-break:break-all;
}
.pantau-modal-status{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(13,110,253,0.15); color:#6EA8FE;
  font-size:11px; font-weight:600;
  padding:5px 12px; border-radius:999px;
  white-space:nowrap;
}
.pantau-modal-status .status-dot{
  width:7px; height:7px; border-radius:50%; background:#6EA8FE; flex-shrink:0;
}

.status-stepper{ display:flex; flex-direction:column; }
.stepper-item{ display:flex; gap:var(--sp-3); position:relative; padding-bottom:var(--sp-6); }
.stepper-item:last-child{ padding-bottom:0; }
.stepper-item:not(:last-child)::before{
  content:''; position:absolute; left:15px; top:32px; bottom:0;
  width:2px; background:#22344A;
}
.stepper-item.done:not(:last-child)::before{ background:var(--success); }
.stepper-icon{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; z-index:1;
}
.stepper-icon.done{ background:var(--success); color:var(--white); }
.stepper-icon.active{ background:var(--info); color:var(--white); }
.stepper-icon.pending{ background:#1B2B3E; color:#5C7292; border:1px solid #33475C; }
.stepper-content{ padding-top:4px; min-width:0; }
.stepper-content h5{ font-size:13px; font-weight:600; color:var(--white); margin-bottom:2px; }
.stepper-item.pending .stepper-content h5{ color:#7C93AC; }
.stepper-content span{ font-size:11px; color:#8FA3BB; }
.stepper-content .current-tag{
  display:inline-block; margin-top:6px; padding:3px 10px;
  background:rgba(13,110,253,0.15); color:#6EA8FE;
  border-radius:999px; font-size:10px; font-weight:600;
}

/* ===== Footer ===== */
footer{
  background:var(--navy-900); color:#B9C6D6;
  padding:var(--sp-10) 0 var(--sp-4);
  margin-top:var(--sp-10);
  width:100%;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr; gap:var(--sp-8);
  padding-bottom:var(--sp-6);
  border-bottom:1px solid #22344A;
}
.footer-logo .logo-mark span{ color:var(--white); }
.footer-logo .logo-tag{ color:#8AA0B8; }
.footer-col h4{ color:var(--white); font-size:13px; margin-bottom:var(--sp-4); }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:13px; color:#B9C6D6; }
.footer-col a:hover{ color:var(--gold-300); }
.social-row{ display:flex; gap:10px; margin-top:var(--sp-2); flex-wrap:wrap; }
.social-row a{
  width:34px; height:34px; border-radius:50%; background:#182A3E;
  display:flex; align-items:center; justify-content:center; color:var(--white);
}
.social-row a:hover{ background:var(--navy-700); }
/* Kunci ukuran tombol Google Play & App Store supaya tetap sama di semua device */
footer .space-y-2 > a{
  width:180px;
  max-width:180px;
  flex-shrink:0;
}
.store-btn span{ font-size:11px; color:var(--white); font-weight:500; }
.footer-bottom{
  padding-top:var(--sp-5); text-align:center; font-size:12px; color:#7C93AC;
}

/* ===== Device/Platform Switcher Toolbar (opsional) ===== */
.platform-switcher{
  position:sticky; top:0; z-index:60;
  background:#111827;
  display:flex; align-items:center; justify-content:center;
  gap:var(--sp-2);
  padding:8px var(--sp-4);
  font-size:12px;
  height:40px;
  box-sizing:border-box;
  flex-wrap:wrap;
}
.platform-switcher .ps-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px;
  border-radius:999px;
  color:#9CA3AF;
  font-weight:500;
  font-size:12.5px;
  transition:background-color .15s ease, color .15s ease;
}
.platform-switcher .ps-btn svg{ width:14px; height:14px; }
.platform-switcher .ps-btn:hover{ color:#fff; background:rgba(255,255,255,0.08); }
.platform-switcher .ps-btn.active{
  background:#fff; color:#111827; font-weight:600;
}

.service-grid > .svc-card,
.strip > .strip-item,
.popular-grid > .pop-card,
.split > * {
  min-width: 0;
}

/* =========================================================
   ===== Beranda: grid nama layanan (icon - judul - panah) ==
   ========================================================= */
#layanan .service-grid{
  grid-template-columns:repeat(4, 1fr);
}
#layanan .svc-card{
  flex-direction:row;
  align-items:center;
  gap:12px;
}
#layanan .svc-card .h4{
  flex:1;
  margin:0;
  text-align:left;
}
#layanan .svc-chevron{
  width:16px;
  height:16px;
  flex-shrink:0;
  color:var(--gray-500);
}

/* =========================================================
   ===== RESPONSIVE — mobile-first, breakpoint bertahap =====
   ========================================================= */

/* Tablet besar / laptop kecil */
@media (max-width:1080px){
  .service-grid{ grid-template-columns:repeat(4,1fr); }
  .split{ grid-template-columns:1fr; }
  .popular-col{ height:auto; }
  .popular-grid{ flex:none; grid-template-columns:repeat(2,1fr); }
  .strip{ grid-template-columns:repeat(2,1fr); }
  .help-cell{ grid-column:1 / -1; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-visual{ height:360px; }
}

/* Tablet kecil / iPad portrait */
@media (max-width:900px){
  .hero-grid{ gap:var(--sp-8); }
  .hero-visual{ height:320px; }
  .card-top{ width:220px; }
  .card-bottom{ width:200px; }
  .service-grid{ grid-template-columns:repeat(3,1fr); }
}

/* Mobile besar (HP landscape / small tablet) */
@media (max-width:760px){
  .container{ padding:0 var(--sp-4); }
  .nav-links{ display:none; }
  .logo-tag{ display:none; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ display:none; }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .popular-grid{ grid-template-columns:1fr; }
  .strip{ grid-template-columns:1fr; }
  .strip-item{ border-right:none; border-bottom:1px solid var(--gray-300); }
  .footer-grid{ grid-template-columns:1fr; }
  .h1{ font-size:26px; }
  .pantau-card{ padding:var(--sp-6); }
  section{ padding:var(--sp-8) 0; }
  .help-cell{ flex-wrap:wrap; min-width:0; }   /* tambahan */
}

/* Mobile standar (HP portrait) */
@media (max-width:600px){
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .search-bar{ padding:6px; flex-wrap:wrap; }
  .search-bar .btn{ width:100%; margin-top:6px; order:3; }
  .search-bar input{ width:100%; }
  .auth-pill span:not(.avatar-circle){ display:none; }
  .auth-pill{ padding:6px; }
  .nav-right{ gap:var(--sp-2); }
  .h1{ font-size:22px; }
  .h2{ font-size:20px; }
  .popular-tags{ gap:var(--sp-2); }
  .tag-pill{ font-size:12px; padding:5px 12px; }
  .pantau-modal{ padding:var(--sp-5); }
  #layanan .service-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Mobile kecil */
@media (max-width:400px){
  .service-grid{ grid-template-columns:1fr; }
  .h1{ font-size:20px; }
  .btn{ padding:10px 16px; font-size:13px; }
  .icon-btn{ width:36px; height:36px; }
  #layanan .service-grid{ grid-template-columns:1fr; }
}

/* Desktop besar: tambah padding container */
@media (min-width:640px){
  .container{ padding:0 var(--sp-6); }
}
@media (min-width:1024px){
  .container{ padding:0 var(--sp-10); }   /* diubah dari sp-8 (32px) jadi sp-10 (40px) */
}
@media (min-width:1440px){
  .container{ padding:0 var(--sp-16); }   /* baru: layar sangat lebar dapat 64px */
}

/* ===== Pantau: pesan error & status dinamis ===== */
.pantau-error{ color:var(--danger); font-size:12px; font-weight:500; margin-top:var(--sp-2); }
.pantau-error[hidden]{ display:none; }

.pantau-modal-title{
  color:#C6D2DE; font-size:12px; line-height:1.4;
  margin:calc(var(--sp-3) * -1) 0 var(--sp-6);
}
.pantau-modal-title:empty{ display:none; }

.pantau-modal-status.tone-wait{ background:rgba(245,158,11,0.15); color:#FBBF24; }
.pantau-modal-status.tone-wait .status-dot{ background:#FBBF24; }
.pantau-modal-status.tone-done{ background:rgba(40,167,69,0.15); color:#4ADE80; }
.pantau-modal-status.tone-done .status-dot{ background:#4ADE80; }

/* =====================================================================
   TAMBAHAN untuk public/css/landing.css
   1) Tempel seluruh isi file ini di PALING BAWAH landing.css
   2) Di rule .pantau-modal-overlay yang sudah ada, ubah z-index:100 -> z-index:1000
   ===================================================================== */

/* ===== Kartu status Pantau (landing) ===== */
.pantau-modal-header{ padding-right:36px; } /* biar tidak tertimpa tombol X */
.pantau-modal-foot{
  margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid #22344A;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-2) var(--sp-4);
  font-size:11px; color:#8FA3BB;
}
.pantau-modal-foot strong{ color:#C6D2DE; }
.pantau-modal-foot a{ color:#6EA8FE; font-weight:600; }
.pantau-modal-foot a:hover{ text-decoration:underline; }