/* ==========================================================================
   Landing Procmone, sebelum login. Shadcn neutral terang, sama dengan aplikasi.

   Satu aksen bermakna: hijau "Selesai" di akhir jalur routing dan kanvas.
   Gerak menceritakan proses yang dipantau: dokumen melewati tahap, batang
   tahap terisi berurutan, percakapan KAYSA muncul bergiliran. Semua diam bila
   pengguna memilih gerak dikurangi (lihat landing.js).
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Grid 12 lajur dengan lebar maksimum 1200px, rata kiri di dalam container. */
.landing-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 24px;
}

/* --- Navigasi ------------------------------------------------------------- */

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(1.4) blur(12px);
}

.landing-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.landing-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }

.landing-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 13px;
}

/* Tombol ghost: halaman tracking terbuka tanpa login. */
.landing-link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    color: var(--muted-foreground-strong);
    font-size: 13px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.landing-link:hover { background: var(--muted); color: var(--foreground); }

/* --- Hero ----------------------------------------------------------------- */

.landing-hero {
    position: relative;
    overflow: hidden;
    padding: 88px 0 104px;
}

.landing-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: 24px;
}

.landing-copy { grid-column: 1 / span 6; min-width: 0; }

.landing-copy h1 {
    max-width: 12ch;
    font-size: clamp(40px, 5.6vw, 68px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.landing-lede {
    max-width: 46ch;
    margin-top: 24px;
    color: var(--muted-foreground-strong);
    font-size: 17px;
    line-height: 1.6;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 32px;
}

/* Tombol primer ukuran lg (h-10). */
.landing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 22px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 14px;
    font-weight: 500;
    transition: background-color .15s ease, transform .15s ease;
}

.landing-cta:hover { background: color-mix(in srgb, var(--primary) 90%, var(--background)); }
.landing-cta:active { transform: scale(.98); }

.landing-hint { color: var(--muted-foreground); font-size: 13px; }

/* --- Kartu alur ----------------------------------------------------------- */

.landing-route {
    grid-column: 7 / -1;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-lift);
}

/* Segmented control, sama dengan .tabs di aplikasi. */
.panel-tabs {
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: var(--radius-md);
    background: var(--muted);
}

.panel-tab {
    flex: 1;
    min-height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-foreground-strong);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.panel-tab:hover { color: var(--foreground); }
.panel-tab[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }

/* Panel ditumpuk di sel yang sama; tinggi kartu mengikuti panel tertinggi. */
.panels {
    position: relative;
    display: grid;
    margin-top: 16px;
    padding-top: 14px;
}

/* Garis waktu rotasi: terisi selama satu putaran panel (REPLAY_MS). */
.panels::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--muted);
}

.panel {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .5s var(--ease-out), visibility .35s;
}

.panel.is-active { opacity: 1; visibility: visible; transform: none; }

.panel-head { display: grid; gap: 4px; padding: 0 4px 14px; }
.panel-head strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.panel-head span { color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }

.route-steps { display: grid; gap: 2px; list-style: none; }

.route-step {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) minmax(72px, 34%) 18px;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    padding: 0 4px;
    border-radius: var(--radius-md);
}

/* Keadaan akhir tampil diam; animasi panel (setelah tombol ditekan) mulai dari
   penanda netral (@keyframes index-done). */
.route-index {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--foreground);
    border-radius: 50%;
    background: var(--foreground);
    color: var(--primary-foreground);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.route-name { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.route-bar { position: relative; height: 4px; overflow: hidden; border-radius: 999px; background: var(--muted); }

.route-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--foreground);
    transform: scaleX(1);
    transform-origin: left;
}

.route-state { display: grid; place-items: center; }

.route-check {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--success);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.is-final .route-fill { background: var(--success); }
.is-final .route-index { border-color: var(--success); background: var(--success); }

/* SLA: kolom terakhir batas hari kerja, isian sepanjang --fill. */
.sla-row { grid-template-columns: minmax(0, 1fr) minmax(72px, 38%) 48px; }
.sla-row .route-fill { transform: scaleX(var(--fill)); }
.sla-limit { color: var(--muted-foreground); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }

.panel-caption { margin-top: 14px; padding: 12px 4px 0; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 12px; }

/* Panel yang diputar setelah tombolnya ditekan: baris muncul berurutan, batang
   terisi, penanda tahap menghitam (hijau untuk "Selesai") setelah batangnya
   penuh, dan centang muncul terakhir. */
.panel.is-playing .route-step { animation: rise-in .5s var(--ease-out) calc(var(--step) * 70ms) both; }
.panel.is-playing .route-fill { animation: fill .7s var(--ease-out) calc(200ms + var(--step) * 160ms) both; }
.panel.is-playing .sla-row .route-fill { animation-name: fill-to; }
.panel.is-playing .route-index { animation: index-done .3s ease calc(700ms + var(--step) * 160ms) both; }
.panel.is-playing .route-check { animation: check-pop .45s var(--ease-out) calc(900ms + var(--step) * 160ms) both; }

/* --- Daftar modul --------------------------------------------------------- */

.landing-modules {
    border-block: 1px solid var(--border);
    background: var(--muted-subtle);
}

/* Daftar modul diam, membungkus di dalam container. */
.module-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 32px;
    padding-block: 18px;
    list-style: none;
}

.module-list li { color: var(--muted-foreground-strong); font-size: 14px; font-weight: 500; white-space: nowrap; }

/* --- KAYSA ---------------------------------------------------------------- */

.landing-kaysa { padding: 104px 0; }

.kaysa-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: 24px;
}

.kaysa-content { grid-column: 1 / span 6; min-width: 0; }

.kaysa-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted-foreground-strong);
    font-size: 12px;
    font-weight: 500;
}

.kaysa-signal { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

.kaysa-heading {
    max-width: 18ch;
    margin-top: 20px;
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.kaysa-desc {
    max-width: 56ch;
    margin-top: 16px;
    color: var(--muted-foreground-strong);
    font-size: 15px;
    line-height: 1.7;
}

.kaysa-topics { display: grid; gap: 12px; margin-top: 28px; list-style: none; }

.kaysa-topics li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }

.kaysa-topics svg {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kaysa-visual { grid-column: 8 / -1; min-width: 0; }

.chat-window {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    box-shadow: var(--shadow-lift);
}

.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.chat-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 13px;
    font-weight: 600;
}

.chat-title { display: grid; gap: 1px; }
.chat-title strong { font-size: 14px; font-weight: 600; }
.chat-title span { color: var(--muted-foreground); font-size: 12px; }

.chat-body { display: grid; gap: 10px; min-height: 300px; align-content: start; padding: 18px 16px 22px; background: var(--muted-subtle); }

.chat-message { display: flex; }
.chat-user { justify-content: flex-end; }

.chat-bubble {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
}

.chat-bot .chat-bubble { border: 1px solid var(--border); border-bottom-left-radius: 4px; background: var(--card); }
.chat-user .chat-bubble { border-bottom-right-radius: 4px; background: var(--primary); color: var(--primary-foreground); }

/* --- Footer --------------------------------------------------------------- */

.landing-footer { border-top: 1px solid var(--border); }

.landing-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-block: 24px;
    color: var(--muted-foreground);
    font-size: 13px;
}

/* --- Keyframes ------------------------------------------------------------ */

/* Hanya untuk animasi panel setelah tombol kartu alur ditekan. */
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fill-to { from { transform: scaleX(0); } to { transform: scaleX(var(--fill)); } }
@keyframes index-done { from { border-color: var(--border); background: var(--card); color: var(--muted-foreground); } }
@keyframes check-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* --- Responsif ------------------------------------------------------------ */

@media (max-width: 960px) {
    .landing-hero { padding: 56px 0 72px; }
    .landing-copy, .landing-route, .kaysa-content, .kaysa-visual { grid-column: 1 / -1; }
    .landing-route { margin-top: 24px; }
    .landing-kaysa { padding: 72px 0; }
    .kaysa-visual { margin-top: 16px; }
}

@media (max-width: 600px) {
    .landing-container { padding-inline: 16px; }
    .landing-lede { font-size: 16px; }
    .landing-cta { width: 100%; height: 44px; }
    .landing-link { height: 44px; }
    .route-step { grid-template-columns: 22px minmax(0, 1fr) 64px 18px; gap: 10px; }
    .sla-row { grid-template-columns: minmax(0, 1fr) 64px 44px; }
    .panel-tab { min-height: 40px; }
}

/* Gerak dikurangi: panel kartu alur berganti tanpa animasi. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}