:root {
  --bg: #eef4ff;
  --bg-soft: #f7f9fc;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #2563eb;
  --primary-dark: #123b9f;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #eab308;
  --card: rgba(255,255,255,.78);
  --border: rgba(148,163,184,.22);
  --shadow: 0 16px 40px rgba(15,23,42,.08);
  --radius: 24px;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background:
      radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 30%),
      radial-gradient(circle at bottom right, rgba(56,189,248,.14), transparent 35%),
      var(--bg);
  min-height:100vh;
}
a { color: var(--primary); text-decoration: none; }
p { color: var(--muted); line-height: 1.7; }
img { max-width: 100%; display:block; }
.wadah { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.area-utama { padding: 28px 0 80px; }
.bilah-atas { position: sticky; top:0; z-index: 20; backdrop-filter: blur(20px); background: rgba(255,255,255,.62); border-bottom: 1px solid var(--border); }
.bilah-dalam { display:flex; align-items:center; justify-content:space-between; gap: 16px; min-height: 78px; }
.merek { display:flex; align-items:center; gap:12px; color: var(--text); }
.logo-kotak { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; font-weight:800; background: linear-gradient(135deg, #2563eb, #38bdf8); box-shadow: 0 14px 28px rgba(37,99,235,.3); }
.merek small { display:block; color:var(--muted); }
.menu-atas { display:flex; align-items:center; gap: 12px; flex-wrap: wrap; }
.menu-atas a { color: var(--text); font-weight: 600; }
.tombol { display:inline-flex; align-items:center; justify-content:center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight:700; border:1px solid transparent; transition: .2s ease; }
.tombol:hover { transform: translateY(-1px); }
.tombol-utama { color:#fff; background: linear-gradient(135deg, var(--primary-dark), #2563eb 60%, #38bdf8); box-shadow: 0 18px 30px rgba(37,99,235,.22); }
.tombol-tipis { color: var(--text); background: rgba(255,255,255,.72); border-color: rgba(15,23,42,.12); }
.tombol-penuh { width:100%; }
.hero { display:grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items:center; min-height: calc(100vh - 180px); }
.label-kecil { display:inline-block; padding: 9px 14px; border-radius:999px; color: var(--primary); background: rgba(37,99,235,.08); font-size: 13px; font-weight:700; margin-bottom: 18px; }
.hero h1 { margin:0 0 14px; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -0.05em; max-width: 720px; }
.teks-besar { font-size: 17px; max-width: 620px; }
.grup-tombol { display:flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.stat-ringkas { display:flex; gap: 36px; flex-wrap:wrap; margin-top: 28px; }
.stat-ringkas strong { display:block; font-size: 1.55rem; }
.stat-ringkas span { color:var(--muted); font-size: .95rem; }
.kartu-putih, .kartu-glass, .kartu-gradien { border-radius: var(--radius); box-shadow: var(--shadow); }
.kartu-putih { background: rgba(255,255,255,.85); border:1px solid var(--border); padding: 24px; }
.kartu-glass { background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.64)); border:1px solid rgba(255,255,255,.55); padding: 24px; }
.hero-visual { display:flex; justify-content:flex-end; }
.panel-besar { width:min(500px,100%); padding: 20px; }
.mockup-app { position:relative; min-height: 360px; border-radius: 32px; background: linear-gradient(160deg, rgba(37,99,235,.08), rgba(255,255,255,.55)); border:1px solid rgba(37,99,235,.1); overflow:hidden; padding: 20px; }
.mockup-app::before { content:''; position:absolute; right:-70px; top:-50px; width:220px; height:220px; background: radial-gradient(circle, rgba(37,99,235,.18), transparent 70%); }
.ilustrasi-hero { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position:center; opacity:.92; }
.mockup-kartu { background:#fff; border-radius:24px; padding: 20px; width: min(300px, 100%); box-shadow: 0 14px 28px rgba(15,23,42,.08); }
.mockup-kartu h3 { margin:8px 0 10px; font-size: 1.9rem; line-height: 1.15; letter-spacing: -.03em; }
.mockup-kartu ul { padding-left: 18px; color: var(--muted); line-height:1.8; }
.badge-mini { position:absolute; bottom:22px; padding: 12px 16px; border-radius:999px; background: rgba(255,255,255,.9); border:1px solid rgba(37,99,235,.12); font-weight:700; color: var(--primary-dark); box-shadow: 0 10px 20px rgba(15,23,42,.06); font-size: 13px; }
.badge-kiri { left: 90px; }
.badge-tengah { left: 220px; }
.badge-kanan { right: 18px; }
.grid-fitur, .grid-zona, .grid-statistik, .grid-dua, .grid-tiga { display:grid; gap: 20px; }
.grid-fitur { grid-template-columns: repeat(3, 1fr); margin: 18px 0 20px; }
.grid-zona { grid-template-columns: repeat(4, 1fr); }
.grid-dua { grid-template-columns: 1fr 1fr; }
.grid-tiga { grid-template-columns: repeat(3, 1fr); }
.grid-statistik { grid-template-columns: repeat(4, 1fr); margin-bottom: 22px; }
.kartu-gradien { color: #fff; padding: 24px; position:relative; overflow:hidden; }
.kartu-gradien::after { content:''; position:absolute; inset:auto -30px -30px auto; width:140px; height:140px; border-radius:50%; background: rgba(255,255,255,.14); }
.kartu-gradien strong { display:block; font-size: 2rem; margin: 10px 0 6px; }
.kartu-gradien span, .kartu-gradien small { position:relative; z-index:2; }
.kartu-gradien.biru { background: linear-gradient(135deg, #1d4ed8, #38bdf8); }
.kartu-gradien.ungu { background: linear-gradient(135deg, #6d28d9, #a855f7); }
.kartu-gradien.hijau { background: linear-gradient(135deg, #15803d, #22c55e); }
.kartu-gradien.jingga { background: linear-gradient(135deg, #ea580c, #f59e0b); }
.ikon-bulat { width: 44px; height: 44px; display:grid; place-items:center; border-radius: 14px; background: rgba(37,99,235,.08); color: var(--primary); font-size: 1.2rem; font-weight: 700; }
.ikon-bulat.kecil { width: 36px; height: 36px; border-radius: 12px; font-size: .9rem; }
.kartu-zona h4, .kartu-putih h3, .kartu-putih h2 { margin: 14px 0 10px; }
.blok-zona { margin-top: 12px; }
.judul-baris, .judul-halaman { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap: wrap; }
.judul-halaman { margin-bottom: 24px; }
.judul-halaman h1 { margin: 6px 0 10px; font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -.04em; }
.filter-bar { display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { display:inline-flex; align-items:center; min-height: 42px; padding: 0 16px; border-radius:999px; background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.1); color: var(--primary-dark); font-weight:700; }
.form-rapi { display:grid; gap: 16px; }
.form-grid-besar { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.kolom-form { display:grid; gap: 16px; }
.kolom-form.full { grid-column: 1 / -1; }
label span { display:block; font-size: .95rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
input, textarea, select {
  width:100%; min-height: 50px; border-radius: 16px; border:1px solid rgba(148,163,184,.35); background: rgba(255,255,255,.92);
  padding: 14px 16px; font: inherit; color: var(--text); outline:none;
}
textarea { resize: vertical; min-height: 120px; }
input:focus, textarea:focus, select:focus { border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 4px rgba(37,99,235,.08); }
.aksi-form { display:flex; justify-content:flex-end; gap: 12px; grid-column:1 / -1; }
.peringatan { padding: 16px 18px; border-radius: 18px; margin-bottom: 18px; font-weight:600; }
.peringatan-sukses { background: rgba(34,197,94,.12); color:#166534; }
.peringatan-bahaya { background: rgba(239,68,68,.12); color:#991b1b; }
.peringatan-primer { background: rgba(37,99,235,.12); color:#1d4ed8; }
.tabel-wrap { overflow:auto; }
.tabel-modern { width:100%; border-collapse: collapse; min-width: 760px; }
.tabel-modern th, .tabel-modern td { padding: 15px 14px; border-bottom: 1px solid rgba(148,163,184,.18); text-align:left; vertical-align:top; }
.tabel-modern th { color: var(--muted); font-size: .88rem; font-weight:800; text-transform: uppercase; letter-spacing: .05em; }
.tabel-modern tr:hover td { background: rgba(37,99,235,.035); }
.lencana { display:inline-flex; align-items:center; min-height: 34px; padding: 0 12px; border-radius:999px; font-size:.84rem; font-weight:800; }
.lencana-primer { background: rgba(37,99,235,.12); color:#1d4ed8; }
.lencana-info { background: rgba(14,165,233,.12); color:#0369a1; }
.lencana-sukses { background: rgba(34,197,94,.12); color:#166534; }
.lencana-bahaya { background: rgba(239,68,68,.12); color:#991b1b; }
.lencana-sekunder { background: rgba(148,163,184,.18); color:#334155; }
.lencana-peringatan { background: rgba(234,179,8,.15); color:#854d0e; }
.lencana-gelap { background: rgba(15,23,42,.12); color:#0f172a; }
.login-wrap { align-items: stretch; min-height: 72vh; }
.login-promo { padding: 34px; display:flex; flex-direction:column; justify-content:center; }
.login-box { max-width: 520px; width:100%; margin-left:auto; }
.ceklist-bagus { padding-left: 18px; line-height: 2; color: var(--muted); }
.akun-demo { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(148,163,184,.18); }
.timeline { display:grid; gap: 16px; margin-top: 16px; }
.timeline-item { display:grid; grid-template-columns: 18px 1fr; gap: 14px; align-items:flex-start; }
.timeline-titik { width: 14px; height: 14px; border-radius:50%; margin-top: 6px; background: linear-gradient(135deg, #2563eb, #38bdf8); box-shadow: 0 0 0 6px rgba(37,99,235,.09); }
.timeline-item small { display:block; color: var(--muted); margin-top: 6px; }
.ringkasan-ongkir { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ringkasan-ongkir > div, .daftar-detail > div { padding: 18px; border-radius: 18px; background: rgba(37,99,235,.04); border: 1px solid rgba(37,99,235,.07); }
.ringkasan-ongkir span, .daftar-detail span { display:block; color: var(--muted); margin-bottom: 8px; }
.daftar-detail { display:grid; gap: 12px; }
.kolom-samping { display:grid; gap: 20px; }
.item-kurir, .mini-angka { display:flex; justify-content:space-between; align-items:center; gap: 12px; flex-wrap: wrap; }
.daftar-kartu-mini { display:grid; gap: 14px; }
.item-kurir { padding: 16px 18px; border-radius: 18px; background: rgba(248,250,252,.9); border:1px solid rgba(148,163,184,.18); }
.mini-angka span { display:inline-flex; align-items:center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(37,99,235,.08); color: var(--primary-dark); font-weight:700; font-size: .84rem; }
.mini-angka.dua-kolom { display:grid; grid-template-columns: 1fr; }
.avatar-kurir { width: 58px; height: 58px; display:grid; place-items:center; border-radius: 18px; font-weight: 800; background: linear-gradient(135deg, #2563eb, #38bdf8); color: #fff; box-shadow: 0 14px 28px rgba(37,99,235,.2); }
.tautan-aksi { font-weight: 800; }
.gambar-bukti { border-radius: 18px; margin-top: 12px; border:1px solid rgba(148,163,184,.22); }
.kartu-order-kurir { display:grid; gap: 14px; }
.kecil-form { margin-top: 10px; }
.footer-aplikasi { padding: 26px 0 44px; }
.footer-dalam { display:flex; justify-content:space-between; gap: 18px; flex-wrap: wrap; color: var(--muted); }
.footer-dalam p { margin: 6px 0 0; max-width: 540px; }
.footer-kanan { display:grid; gap: 6px; text-align:right; }
hr { border:0; border-top:1px solid rgba(148,163,184,.18); margin: 20px 0; }
.latar-blur { position: fixed; border-radius: 999px; filter: blur(70px); pointer-events:none; opacity:.38; z-index:-1; }
.latar-1 { width: 240px; height:240px; background:#93c5fd; top: 6%; left: 4%; }
.latar-2 { width: 260px; height:260px; background:#a5b4fc; right: 6%; bottom: 4%; }

@media (max-width: 1100px) {
  .hero, .grid-dua, .grid-statistik, .grid-zona, .grid-fitur, .grid-tiga, .form-grid-besar { grid-template-columns: 1fr 1fr; }
  .hero { min-height: auto; padding: 24px 0 10px; }
  .hero-visual { justify-content:stretch; }
  .panel-besar { width:100%; }
}
@media (max-width: 760px) {
  .wadah { width: min(100% - 20px, 1000px); }
  .bilah-dalam, .judul-baris, .judul-halaman, .footer-dalam { flex-direction: column; align-items:flex-start; }
  .hero, .grid-dua, .grid-statistik, .grid-zona, .grid-fitur, .grid-tiga, .form-grid-besar { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.45rem; }
  .menu-atas { width:100%; }
  .menu-atas a { font-size: .95rem; }
  .badge-kiri, .badge-tengah, .badge-kanan { position: static; display:inline-flex; margin-top: 10px; }
  .mockup-app { min-height: auto; }
  .ilustrasi-hero { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position:center; opacity:.92; }
.mockup-kartu { width:100%; }
  .ringkasan-ongkir { grid-template-columns: 1fr; }
  .login-box { margin-left: 0; }
}


.hero-baru h1 { max-width: 760px; }
.panel-hero-baru { padding: 18px; }
.mockup-hero-baru { min-height: 420px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(237,244,255,.95)); }
.ilustrasi-baru { object-fit: contain; object-position: center; opacity: 1; padding: 18px; }
.peta-live { width: 100%; min-height: 380px; border-radius: 24px; background: linear-gradient(135deg, #eaf2ff, #f8fbff); border: 1px solid rgba(37,99,235,.12); margin: 14px 0 18px; }
.daftar-kurir-live { grid-template-columns: repeat(2, 1fr); display:grid; }
.item-live { background: rgba(37,99,235,.04); }
.panel-live-kurir { margin-bottom: 20px; }
.status-live-wrap { display:flex; gap:10px; flex-wrap:wrap; }
.catatan-live { margin-top: -6px; }
.grup-live-kecil { margin-top: 4px; }
.kartu-peta-live { align-self: start; }
@media (max-width: 760px) {
  .hero-baru h1 { font-size: 2.6rem; }
  .mockup-hero-baru { min-height: 320px; }
  .daftar-kurir-live { grid-template-columns: 1fr; }
  .peta-live { min-height: 300px; }

}


.kartu-tracking-live {
    background: #ffffff;
    border: 1px solid #e5edf8;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06);
}

.kepala-tracking {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.kepala-tracking h3 {
    margin: 0 0 6px;
    font-size: 24px;
    color: #0f172a;
}

.kepala-tracking p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
}

#peta-kurir-live {
    width: 100%;
    height: 460px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #dbe7f7;
    margin-bottom: 18px;
}

.info-tracking-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.info-tracking-item {
    background: #f8fbff;
    border: 1px solid #e4edf8;
    border-radius: 18px;
    padding: 16px;
}

.info-tracking-item.info-full {
    grid-column: 1 / -1;
}

.label-info {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.info-tracking-item strong {
    font-size: 18px;
    color: #0f172a;
    line-height: 1.5;
}

@media (max-width: 992px) {
    .info-tracking-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #peta-kurir-live {
        height: 380px;
    }
}

@media (max-width: 576px) {
    .kartu-tracking-live {
        padding: 18px;
        border-radius: 22px;
    }

    .info-tracking-grid {
        grid-template-columns: 1fr;
    }

    #peta-kurir-live {
        height: 320px;
    }
}

.marker-kurir-wrapper{display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 8px 12px rgba(0,0,0,.18));}
.marker-kurir-gambar{display:block;will-change:transform;}
#peta-lacak-publik,#peta-kurir-driver{width:100%;height:420px;border-radius:24px;overflow:hidden;border:1px solid #dbe7f7;margin-top:16px;}
.panel-peta-kurir-driver{margin-bottom:18px;}
.instruksi-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,#0f9d58,#198754);color:#fff;padding:14px 18px;border-radius:20px;margin-top:16px;margin-bottom:12px;}
.instruksi-nav strong{display:block;font-size:1rem;}
.instruksi-nav small{color:rgba(255,255,255,.82);}
.kotak-peta-publik{margin-top:16px;}
@media (max-width: 576px){#peta-lacak-publik,#peta-kurir-driver{height:320px;}}

.leaflet-kurir-icon,.leaflet-tujuan-icon{background:transparent;border:none;}
.leaflet-container{font-family:Inter,Arial,sans-serif;}
.pesan-fallback-peta{margin:10px 0 0;color:#475569;font-size:.92rem;}