:root{--ink:#14263b;--muted:#64748b;--line:#dfe7f0;--blue:#1374bd;--green:#159b64;--bg:#f4f7fb;font-family:Inter,Arial,system-ui,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #6ab3f5;outline-offset:2px}.wrap{width:min(1160px,calc(100% - 36px));margin:auto}.sitehead{background:#0c2441;color:white}.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:10px}.brand{font-weight:900;letter-spacing:.045em;color:white;background:transparent;border:0;padding:0;font-size:17px}.brand-icon{color:#69c5ff;margin-right:6px}.brand-light{font-size:12px;color:#a7c8e4;margin-left:5px}.demo-badge{font-size:10px;background:#294561;color:#c3dbec;padding:8px 10px;border-radius:40px;letter-spacing:.05em;font-weight:800}.stepper{display:flex;align-items:center;gap:12px;color:#8391a5;margin:24px 0;font-size:12px;flex-wrap:wrap}.stepper [data-step].on{color:#0d70b1;font-weight:800}.step-sep{color:#c7d2df}.screen{display:none;min-height:65vh}.screen.active{display:block}.hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:58px 46px;background:linear-gradient(112deg,#0d2849,#14558a);color:white;border-radius:22px;margin:12px 0 35px;overflow:hidden}.hero-content{max-width:650px}.eyebrow{font-size:11px;font-weight:850;letter-spacing:.17em;color:#1478b6}.hero .eyebrow{color:#7bd2f7}.hero h1{font-size:clamp(30px,4vw,52px);line-height:1.1;margin:13px 0 18px;letter-spacing:-.045em}.hero p{color:#c1d6e8;line-height:1.7}.hero-visual{display:flex;align-items:center;gap:8px;font-size:55px;opacity:.85}.section-heading{margin:22px 0 25px}.section-heading h1,.section-heading h2{margin:8px 0;font-size:clamp(24px,3vw,35px);letter-spacing:-.04em}.section-heading p{color:var(--muted);line-height:1.6;margin:5px 0}.center{text-align:center}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.narrow{max-width:760px;margin:24px auto}.choice-card{display:flex;flex-direction:column;text-align:left;gap:13px;align-items:start;border:2px solid var(--line);background:white;padding:26px;border-radius:18px;box-shadow:0 8px 22px #10284008;color:inherit;min-height:180px;transition:border-color .15s,transform .15s}.choice-card:hover{border-color:#84bce5;transform:translateY(-2px)}.choice-card.selected{border-color:var(--blue);background:#eff8ff}.choice-card strong{font-size:20px}.choice-card>span:not(.choice-icon):not(.cta-text){font-size:14px;line-height:1.6;color:var(--muted)}.choice-icon{border-radius:14px;display:grid;place-items:center;width:56px;height:56px;font-size:29px}.choice-icon.blue{color:#1374bd;background:#e6f2ff}.choice-icon.green{color:#159b64;background:#e6f8ef}.cta-text{font-size:13px;font-weight:800;color:#136da9;margin-top:auto}.back{background:none;border:0;color:#3d6e96;padding:10px 0;font-weight:700}.panel{background:white;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 7px 18px #18304805}.hidden{display:none!important}#carrier-box{max-width:760px;margin:auto}.panel label{font-weight:800;font-size:14px;display:block;margin-bottom:9px}select,input[type=search]{border:1px solid #cbd8e6;border-radius:10px;width:100%;padding:12px;background:#fff;color:#23354b}.note{color:#718199;font-size:12px;line-height:1.5}.actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin:22px 0;flex-wrap:wrap}.primary,.secondary{border:0;border-radius:10px;padding:13px 21px;font-weight:800}.primary{background:#1272b4;color:#fff}.primary:hover:not(:disabled){background:#105f94}.primary:disabled{background:#9baec0;cursor:not-allowed}.secondary{background:#e7f1fb;color:#185d94}.wide{width:100%}.two-col{display:grid;grid-template-columns:minmax(240px,0.8fr) minmax(0,1.2fr);gap:18px}.location-list{max-height:470px;overflow:auto;display:grid;gap:6px;margin-top:13px}.location-item{border:1px solid #e7edf4;border-radius:10px;background:white;padding:11px 13px;text-align:left;font-weight:650;color:#203851}.location-item:hover,.location-item.chosen{background:#eaf5fc;border-color:#2d91cc}.location-item .tiny{display:block;color:#8491a3;font-size:11px;font-weight:400;margin-top:4px}.selected-msg{font-weight:650;color:#426b85;font-size:13px}.panel-title{font-weight:850;font-size:16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.tiny{font-size:11px;color:#8a9bad;font-weight:400}.map-frame{position:relative;width:100%;aspect-ratio:1253/848;overflow:hidden;border-radius:12px;border:1px solid #d1dbe5;background:#dfe5eb}.map-frame img{width:100%;height:100%;display:block;user-select:none}.map-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.map-overlay .clickspot{cursor:pointer}.map-overlay .clickspot:focus{outline:none}.map-overlay .pick-halo{fill:#1595ed;opacity:.2}.map-overlay .pick-dot{fill:#1a85c3;stroke:white;stroke-width:5}.map-overlay .chosen .pick-dot{fill:#ffb32a;stroke:#18354b}.map-overlay text{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;fill:#132a44;font-weight:850;pointer-events:none;font-size:19px}.map-overlay .route{fill:none;stroke:#fff;stroke-width:14;stroke-linejoin:round;stroke-linecap:round}.map-overlay .route-green{fill:none;stroke:#20b76a;stroke-width:8;stroke-linejoin:round;stroke-linecap:round}.map-overlay .you-dot{fill:#208bef;stroke:white;stroke-width:8}.map-overlay .goal-dot{fill:#14ad61;stroke:white;stroke-width:6}.map-overlay .goal-num{fill:white;stroke:none;font-size:20px;font-weight:850;text-anchor:middle;dominant-baseline:middle}.map-overlay .here-label{fill:#083c6a}.results-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(275px,.85fr);gap:18px}.map-toolbar{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:12px;font-size:12px;font-weight:800;color:#49637b}.alert{border-radius:12px;padding:13px 16px;background:#fff5db;border:1px solid #ecd7a7;color:#745717;margin:15px 0;font-size:13px;line-height:1.6}.important{margin-bottom:18px}.recommendations{display:flex;flex-direction:column;gap:12px}.rec-card{border:1px solid #e4eaf3;border-radius:12px;padding:13px}.rec-top{display:flex;justify-content:space-between;gap:8px;align-items:start}.rec-card strong{font-size:15px}.rec-rank{display:inline-grid;place-items:center;border-radius:30px;background:#dff7ea;color:#117c48;width:27px;height:27px;font-size:12px;font-weight:800;margin-right:7px}.rec-stats{font-size:12px;color:#687a8c;margin-top:9px;line-height:1.5}.rec-card small{color:#5e7084;display:block;margin-top:8px}.current-box{background:#f2f7fc;border-radius:12px;padding:12px;color:#46627a;font-size:12px;line-height:1.6;margin-top:auto}.test-panel{max-width:800px;margin:0 auto}.test-choice{min-height:140px}.test-choice strong{font-size:17px}.test-panel>.selected-msg{text-align:center}footer{font-size:11px;color:#8391a5;padding:45px 0 25px;line-height:1.7}@media(max-width:760px){.hero{padding:35px 24px}.hero-visual{display:none}.choice-grid,.two-col,.results-grid{grid-template-columns:1fr}.choice-card{min-height:150px;padding:20px}.location-list{max-height:230px}.map-panel,.map-select-panel{padding:12px}.map-overlay text{font-size:25px}.stepper{gap:7px;font-size:10px}.brand{font-size:15px}.brand-light{display:none}.demo-badge{font-size:9px}}

.source-panel{margin-bottom:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.source-panel label{margin:0}.source-panel select{max-width:270px}.source-panel .note{flex-basis:100%;margin:0}.source-panel button{font-size:12px;padding:9px 12px}



/* ==========================================
   FTUI NETWORK GUIDE
   CLEAN & MINIMAL DESIGN V1
   ========================================== */

:root {
  --ink: #142b4d;
  --muted: #64748b;
  --line: #e2e8f0;
  --blue: #2563eb;
  --green: #16a34a;
  --bg: #f8fbff;
}

body {
  background: var(--bg);
}

/* HEADER */
.sitehead {
  background: #142b4d;
  box-shadow: 0 3px 16px rgba(20,43,77,.10);
}

.nav {
  min-height: 76px;
}

.brand {
  font-size: 19px;
  letter-spacing: -.02em;
}

.demo-badge {
  background: #2563eb;
  color: white;
  border-radius: 999px;
}

/* HERO */
.hero {
  background: linear-gradient(
    120deg,
    #ffffff 0%,
    #edf6ff 100%
  );
  color: #142b4d;
  border: 1px solid #e3edf7;
  border-radius: 24px;
  padding: 56px 48px;
  box-shadow: 0 12px 36px rgba(20,43,77,.05);
}

.hero h1 {
  color: #142b4d;
  font-weight: 850;
  letter-spacing: -.045em;
}

.hero p {
  color: #50647e;
  font-size: 16px;
}

.hero .eyebrow {
  color: #2563eb;
}

.hero-visual {
  color: #2563eb;
  opacity: .85;
}

/* MAIN CARDS */
.choice-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(20,43,77,.06);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.choice-card:hover {
  transform: translateY(-4px);
  border-color: #93c5fd;
  box-shadow: 0 16px 36px rgba(37,99,235,.11);
}

.choice-card.selected {
  background: #eff6ff;
  border-color: #2563eb;
}

.choice-card strong {
  color: #142b4d;
  font-size: 21px;
}

.choice-icon {
  border-radius: 16px;
  width: 62px;
  height: 62px;
}

.choice-icon.blue {
  background: #e8f1ff;
  color: #2563eb;
}

/* BUTTONS */
.primary {
  background: #2563eb;
  color: white;
  border-radius: 12px;
  padding: 14px 24px;
  box-shadow: 0 5px 14px rgba(37,99,235,.15);
}

.primary:hover:not(:disabled) {
  background: #1d4ed8;
}

.secondary {
  background: #eaf2ff;
  color: #1d4ed8;
  border-radius: 12px;
}

.cta-text {
  color: #2563eb;
}

/* CONTENT PANELS */
.panel {
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 26px rgba(20,43,77,.05);
}

.section-heading h1,
.section-heading h2 {
  color: #142b4d;
}

/* PROGRESS INDICATOR */
.stepper [data-step].on {
  color: #2563eb;
}

.stepper {
  padding: 12px 0;
}

/* LOCATION LIST */
.location-item {
  border-radius: 12px;
}

.location-item:hover,
.location-item.chosen {
  background: #eff6ff;
  border-color: #2563eb;
}

/* MAP */
.map-frame {
  border-radius: 16px;
  border-color: #e2e8f0;
}

/* RECOMMENDATION CARDS */
.rec-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  padding: 16px;
}

/* FOOTER */
footer {
  color: #718096;
  text-align: center;
}

/* MOBILE */
@media (max-width: 760px) {
  .hero {
    padding: 34px 24px;
    border-radius: 18px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 14px;
  }

  .choice-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .choice-card {
    padding: 22px;
    min-height: 155px;
  }

  .brand {
    font-size: 15px;
  }

  .panel {
    padding: 16px;
  }
}

/* FTUI CLEAN DESIGN V2 */

/* Halaman lebih ringkas */
.wrap {
  width: min(1200px, calc(100% - 48px));
}

.stepper {
  margin: 18px 0;
}

/* Hero lebih kecil */
.hero {
  padding: 36px 44px;
  margin: 8px 0 24px;
  min-height: 260px;
  gap: 24px;
}

.hero-content {
  max-width: 720px;
}

.hero h1 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  margin: 12px 0;
}

.hero p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Ilustrasi lebih proporsional */
.hero-visual {
  font-size: 40px;
  gap: 14px;
  flex-shrink: 0;
}

/* Dua menu utama */
.choice-grid {
  gap: 18px;
}

.choice-card {
  min-height: 175px;
  padding: 24px;
}

.choice-card strong {
  font-size: 19px;
}

/* Jarak bagian */
.section-heading {
  margin: 18px 0;
}

/* Tampilan HP */
@media (max-width: 760px) {
  .wrap {
    width: calc(100% - 28px);
  }

  .hero {
    padding: 28px 22px;
    min-height: auto;
  }

  .hero h1 {
    font-size: 29px;
  }

  .hero-visual {
    display: none;
  }

  .choice-card {
    min-height: 145px;
    padding: 20px;
  }
}

/* FTUI DARK COLOR THEME */

:root {
  --ink: #f8fafc;
  --muted: #cbd5e1;
  --line: rgba(255,255,255,0.14);
  --blue: #818cf8;
  --green: #22c55e;
  --bg: #0f172a;
}

body {
  background: linear-gradient(
    135deg,
    #0f172a 0%,
    #1e1b4b 50%,
    #311042 100%
  );
  color: #f8fafc;
  min-height: 100vh;
}

/* HEADER */
.sitehead {
  background: rgba(15,23,42,0.9);
}

/* HERO */
.hero {
  background: rgba(30,41,59,0.7);
  color: #f8fafc;
  border-color: rgba(255,255,255,0.1);
}

.hero h1,
.section-heading h1,
.section-heading h2 {
  color: #f8fafc;
}

.hero p {
  color: #cbd5e1;
}

.hero .eyebrow {
  color: #38bdf8;
}

/* KARTU */
.choice-card,
.panel,
.rec-card {
  background: rgba(30,41,59,0.8);
  color: #f8fafc;
  border-color: rgba(255,255,255,0.12);
}

.choice-card strong,
.rec-card strong {
  color: #f8fafc;
}

.choice-card > span:not(.choice-icon):not(.cta-text),
.section-heading p,
.note {
  color: #cbd5e1;
}

.choice-card.selected {
  background: rgba(99,102,241,0.22);
  border-color: #818cf8;
}

.choice-card:hover {
  border-color: #818cf8;
}

/* TOMBOL */
.primary {
  background: linear-gradient(
    135deg,
    #6366f1,
    #a855f7
  );
  color: white;
}

.primary:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    #4f46e5,
    #9333ea
  );
}

.secondary {
  background: #312e81;
  color: #e0e7ff;
}

.cta-text,
.back,
.stepper [data-step].on {
  color: #38bdf8;
}

/* FORM */
select,
input[type="search"] {
  background: #0f172a;
  color: #f8fafc;
  border-color: #475569;
}

/* LOKASI DAN REKOMENDASI */
.location-item {
  background: #1e293b;
  color: #f8fafc;
  border-color: #475569;
}

.location-item:hover,
.location-item.chosen {
  background: #312e81;
  border-color: #818cf8;
}

.current-box {
  background: #0f172a;
  color: #cbd5e1;
}

.rec-stats,
.rec-card small,
.selected-msg,
.tiny {
  color: #cbd5e1;
}

/* FOOTER */
footer {
  color: #94a3b8;
}