/* ============================================================
   SIDATRA — Satu Data Transportasi
   Font di-host lokal (offline-ready, tidak perlu Google Fonts CDN)
   ============================================================ */

@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/space-grotesk/space-grotesk-latin-500-normal.woff2') format('woff2'),
      url('/fonts/space-grotesk/space-grotesk-latin-500-normal.woff') format('woff');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/space-grotesk/space-grotesk-latin-600-normal.woff2') format('woff2'),
      url('/fonts/space-grotesk/space-grotesk-latin-600-normal.woff') format('woff');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2') format('woff2'),
      url('/fonts/space-grotesk/space-grotesk-latin-700-normal.woff') format('woff');
}

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/inter/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/inter/inter-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/inter/inter-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/inter/inter-latin-700-normal.woff2') format('woff2');
}

@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/jetbrains-mono/jetbrains-mono-latin-500-normal.woff2') format('woff2'),
      url('/fonts/jetbrains-mono/jetbrains-mono-latin-500-normal.woff') format('woff');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/jetbrains-mono/jetbrains-mono-latin-600-normal.woff2') format('woff2'),
      url('/fonts/jetbrains-mono/jetbrains-mono-latin-600-normal.woff') format('woff');
}

:root{
  --navy-deep:#0B2545;
  --navy-mid:#153a63;
  --navy-mid-2:#1e4c7c;
  --beacon:#F2A93B;
  --beacon-soft:#f7c877;
  --route-teal:#3E8E8E;
  --foam:#F5F7FA;
  --ink:#0A1A2B;
  --muted:#5b6b7d;
  --line-dark:rgba(245,247,250,0.14);
  --line-light:#e3e8ef;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font-body); -webkit-font-smoothing:antialiased;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--beacon); outline-offset:3px;}

/* ================= LANDING PAGE ================= */
body.page-landing{ background:var(--navy-deep); color:var(--foam); overflow-x:hidden; }
.page{ position:relative; min-height:100vh; padding:40px clamp(20px,5vw,80px) 60px; overflow:hidden; }

.route-bg{ position:absolute; inset:0; z-index:0; opacity:0.55; pointer-events:none; }
.route-bg svg{ width:100%; height:100%; }
.route-path{ fill:none; stroke:var(--route-teal); stroke-width:1.4; stroke-dasharray:6 10; opacity:0.55; animation:sail 26s linear infinite; }
.route-path.alt{ stroke:var(--beacon); opacity:0.35; stroke-dasharray:3 9; animation-duration:34s; animation-direction:reverse; }
@keyframes sail{ to{ stroke-dashoffset:-400; } }
.port-node circle{ fill:var(--beacon); }
.port-node.dim circle{ fill:var(--route-teal); }
.port-node .pulse{ fill:none; stroke:var(--beacon); stroke-width:1; opacity:0.5; transform-origin:center; animation:pulse 3.2s ease-out infinite; }
.port-node.dim .pulse{ stroke:var(--route-teal); }
.port-node:nth-of-type(2) .pulse{ animation-delay:0.6s; }
.port-node:nth-of-type(3) .pulse{ animation-delay:1.2s; }
.port-node:nth-of-type(4) .pulse{ animation-delay:1.8s; }
.port-node:nth-of-type(5) .pulse{ animation-delay:2.4s; }
@keyframes pulse{ 0%{ r:5; opacity:0.6; } 100%{ r:18; opacity:0; } }
@media (prefers-reduced-motion: reduce){ .route-path, .port-node .pulse{ animation:none; } }

header.site-header{ position:relative; z-index:2; display:flex; align-items:center; gap:14px; margin-bottom:clamp(40px,8vh,90px); }
.logo-mark{ width:44px; height:44px; border-radius:12px; background:linear-gradient(155deg, var(--navy-mid-2), var(--navy-deep)); border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:0.02em; }
.brand-sub{ font-size:12.5px; color:#9fb3cc; margin-top:1px; }

.hero{ position:relative; z-index:2; display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,4vw,60px); align-items:start; }
.badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--beacon-soft); background:rgba(242,169,59,0.08); border:1px solid rgba(242,169,59,0.25); padding:7px 14px 7px 10px; border-radius:999px; margin-bottom:26px; }
.badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--beacon); box-shadow:0 0 0 3px rgba(242,169,59,0.2); }
h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px, 4.6vw, 58px); line-height:1.06; letter-spacing:-0.01em; margin:0 0 22px; max-width:15ch; }
h1 .accent{ color:var(--beacon); }
.lede{ font-size:16.5px; line-height:1.65; color:#c3d1e3; max-width:46ch; margin:0 0 34px; }
.cta{ display:inline-flex; align-items:center; gap:10px; background:var(--beacon); color:var(--ink); font-weight:600; font-size:15px; padding:14px 22px; border-radius:999px; text-decoration:none; transition:transform 0.15s ease, background 0.15s ease; }
.cta:hover{ background:var(--beacon-soft); transform:translateY(-1px); }
.cta svg{ transition:transform 0.15s ease; }
.cta:hover svg{ transform:translateX(3px); }

.summary{ position:relative; background:rgba(20,45,77,0.55); border:1px solid var(--line-dark); border-radius:22px; padding:28px; backdrop-filter:blur(6px); transition:width 0.35s ease, height 0.35s ease, padding 0.35s ease, border-radius 0.35s ease; }
.summary.collapsed{ width:44px; height:44px; padding:0; border-radius:14px; justify-self:end; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.summary-toggle{ position:absolute; top:18px; right:18px; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid var(--line-dark); color:#9fb3cc; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:background 0.15s ease, color 0.15s ease; }
.summary.collapsed .summary-toggle{ position:static; margin:0; }
.summary-toggle:hover{ background:rgba(255,255,255,0.14); color:var(--foam); }
.summary-body{ max-height:640px; opacity:1; overflow:hidden; transition:max-height 0.35s ease, opacity 0.25s ease; }
.summary.collapsed .summary-body{ max-height:0; opacity:0; }
.summary-eyebrow{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:#8fa3ba; margin-bottom:16px; }
.summary-number{ font-family:var(--font-display); font-size:clamp(38px,4vw,50px); font-weight:700; line-height:1; color:var(--foam); }
.summary-caption{ font-size:14px; color:#aebfd4; margin:10px 0 22px; line-height:1.5; }
.summary-caption b{ color:var(--foam); }
.mini-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.mini-card{ background:rgba(11,37,69,0.6); border:1px solid var(--line-dark); border-radius:16px; padding:16px; }
.mini-label{ font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:#8fa3ba; display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mini-value{ font-family:var(--font-display); font-size:24px; font-weight:700; }
.mini-unit{ font-family:var(--font-body); font-size:14px; font-weight:500; color:#c3d1e3; display:block; margin-top:2px; }
.summary-footnote{ font-size:12.5px; color:#7d92aa; line-height:1.5; border-top:1px solid var(--line-dark); padding-top:16px; }

@media (max-width:900px){ .hero{ grid-template-columns:1fr; } h1{ max-width:none; } }

/* ================= LOGIN PAGE ================= */
body.page-login{ height:100%; }
html.page-login-html, body.page-login{ height:100%; }
.wrap{ min-height:100vh; display:grid; grid-template-columns:1.15fr 1fr; }

.scene{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:44px clamp(24px,4vw,64px); color:var(--foam); }
.scene-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(0.55) contrast(1.15); z-index:0; }
.scene-tint{ position:absolute; inset:0; background:linear-gradient(150deg, rgba(11,37,69,0.9) 0%, rgba(30,76,124,0.55) 100%); mix-blend-mode:multiply; z-index:1; }
.scene-fade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,37,69,0.15) 0%, rgba(11,37,69,0.25) 40%, rgba(8,26,48,0.92) 100%); z-index:2; }
.scene svg.illustration{ position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:0.5; }
.scene-content{ position:relative; z-index:3; }
.scene-badge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--beacon-soft); background:rgba(242,169,59,0.1); border:1px solid rgba(242,169,59,0.28); padding:6px 13px 6px 9px; border-radius:999px; margin-bottom:22px; }
.scene-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--beacon); }
.scene-content h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3vw,38px); margin:0 0 12px; line-height:1.1; }
.scene-content p{ font-size:14.5px; color:#b9c8dc; max-width:38ch; line-height:1.6; margin:0 0 26px; }
.scene-divider{ width:52px; height:2px; background:var(--beacon); border:none; margin:0 0 18px; }
.scene-copyright{ font-size:12px; color:#7f92a8; }

.form-side{ background:var(--foam); display:flex; align-items:center; justify-content:center; padding:40px; }
.form-card{ width:100%; max-width:380px; }
.form-header{ display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; }
.form-logo{ width:56px; height:56px; border-radius:16px; background:linear-gradient(155deg, var(--navy-mid-2), var(--navy-deep)); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.form-title{ font-family:var(--font-display); font-weight:700; font-size:24px; text-align:center; color:var(--ink); margin:0 0 8px; }
.form-sub{ text-align:center; font-size:14px; color:var(--muted); margin:0 0 32px; line-height:1.5; }
label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.field{ margin-bottom:18px; }
input[type="email"], input[type="password"], input[type="text"]{ width:100%; padding:12px 14px; border:1px solid var(--line-light); border-radius:10px; font-size:14.5px; font-family:var(--font-body); color:var(--ink); background:#fff; transition:border-color 0.15s ease, box-shadow 0.15s ease; }
input::placeholder{ color:#9aa7b6; }
input:focus{ border-color:var(--navy-mid-2); box-shadow:0 0 0 3px rgba(30,76,124,0.12); outline:none; }
.row-between{ display:flex; align-items:center; justify-content:space-between; font-size:13.5px; margin:2px 0 24px; }
.remember{ display:flex; align-items:center; gap:8px; color:var(--ink); }
.remember input{ accent-color:var(--navy-mid-2); width:15px; height:15px; }
.forgot{ color:var(--navy-mid-2); text-decoration:none; font-weight:500; }
.forgot:hover{ text-decoration:underline; }
.submit{ width:100%; background:var(--navy-deep); color:var(--foam); border:none; border-radius:10px; padding:13px; font-size:15px; font-weight:600; font-family:var(--font-body); cursor:pointer; transition:background 0.15s ease; }
.submit:hover{ background:var(--navy-mid-2); }
.notice{ margin-top:18px; text-align:center; font-size:13px; color:var(--muted); background:#eef1f6; border-radius:10px; padding:12px; line-height:1.5; }
.notice b{ color:var(--ink); }
.error-msg{ color:#b3311f; font-size:12.5px; margin-top:6px; }

@media (max-width:860px){ .wrap{ grid-template-columns:1fr; } .scene{ min-height:280px; padding:32px 24px; } }