/* ==========================================================================
   SAPA — Sistem Akses Aplikasi Terintegrasi Kesekretariatan
   Pengadilan Negeri Purwokerto

   Arah desain: "institutional modernism" — bidang biru royal dengan pita
   diagonal hijau (mengikuti identitas SIGAP), kartu kaca bersudut asimetris
   yang meniru motif tab logo (0 30px 30px 0), dan penomoran monospace agar
   halaman terbaca sebagai registri resmi, bukan sekadar tumpukan tombol.
   ========================================================================== */

/* --------------------------------------------------------------- TOKENS -- */

:root {
    /* Warna diambil langsung dari assets/new_bg.png */
    --blue-950: #04164f;
    --blue-900: #062a7a;
    --blue-800: #0a34a0;
    --blue-700: #0f43c4;

    --green-600: #189234;
    --green-500: #22b14c;
    --green-400: #4fd640;

    --gold-400: #f2b53c;
    --gold-300: #ffcf5c;

    --sky-300: #7fb2ff;

    /* Tinta */
    --ink-100: rgba(255, 255, 255, .97);
    --ink-75: rgba(255, 255, 255, .75);
    --ink-55: rgba(255, 255, 255, .55);
    --ink-40: rgba(255, 255, 255, .40);

    /* Permukaan */
    --line: rgba(255, 255, 255, .14);
    --line-hi: rgba(255, 255, 255, .28);
    --glass: rgba(255, 255, 255, .055);
    --glass-hi: rgba(255, 255, 255, .11);

    /* Aksen default kartu — di-override per segmen */
    --accent: var(--green-400);

    /* Tipografi */
    --font-display: "Archivo", "Arial Narrow", sans-serif;
    --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    /* Motif sudut: gema dari tab logo SIGAP (0 30px 30px 0) */
    --corner-lg: 2px 26px 2px 26px;
    --corner-sm: 2px 12px 2px 12px;

    --ease: cubic-bezier(.2, .7, .25, 1);
    --lift: 0 24px 60px -22px rgba(2, 12, 45, .8);
}


/* --------------------------------------------------------------- RESET -- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--ink-100);
    background-color: var(--blue-800);
    background-image:
        linear-gradient(178deg, rgba(4, 22, 79, .58) 0%, rgba(4, 22, 79, .30) 38%, rgba(4, 22, 79, .82) 100%),
        url("../new_bg.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

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


/* ------------------------------------------------- TEKSTUR: GRAIN FILM -- */

.grain {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------- SHELL -- */

.shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* ------------------------------------------------------------ MASTHEAD -- */

/* Grid 3 kolom (1fr auto 1fr) — BerAKHLAK benar-benar di tengah halaman,
   tab SIGAP rata kiri, EVP rata kanan. Persis seperti referensi. */
.masthead {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    /* Tanpa padding kiri/kanan: tab menempel tepi kiri dan kolom tengah
       jatuh tepat di 50% halaman. Jarak kanan diberikan ke logo EVP. */
    padding: 1.75rem 0;
    animation: drop .7s var(--ease) both;
}

/* Tab putih rata kiri — motif asli dari referensi.
   justify-self: start supaya tab memeluk logo, tidak melar seluruh kolom. */
.masthead__tab {
    justify-self: start;
    background: #fff;
    border-radius: 0 30px 30px 0;
    padding: .9rem 2.75rem .9rem 2rem;
    box-shadow: 0 18px 40px -18px rgba(2, 12, 45, .6);
}

.masthead__sigap {
    width: clamp(150px, 18vw, 240px);
}

.masthead__mark {
    width: clamp(120px, 15vw, 215px);
    opacity: .96;
}

.masthead__mark--center {
    justify-self: center;
}

.masthead__mark--end {
    justify-self: end;
    margin-right: 2.5rem;
}


/* --------------------------------------------------------------- STAGE -- */

.stage {
    flex: 1;
    width: min(1240px, 100% - 3rem);
    margin-inline: auto;
    padding-block: clamp(2rem, 5vw, 4rem) 3rem;
}


/* ---------------------------------------------------------------- HERO -- */

.hero {
    text-align: center;
    margin-bottom: clamp(2.75rem, 6vw, 4.5rem);
}

.hero > * {
    animation: rise .8s var(--ease) both;
}

.hero__eyebrow {
    margin: 0;
    font-size: clamp(.66rem, 1vw, .78rem);
    font-weight: 600;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--ink-55);
    animation-delay: .10s;
}

/* Lockup judul: "SAPA Kesekretariatan" — SAPA berat, kata kedua ringan,
   satu baris seperti pada reference/image.png. */
.hero__wordmark {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .32em;
    margin: .6rem 0 0;
    line-height: 1;
    animation-delay: .18s;
}

.hero__word {
    font-family: var(--font-display);
    font-variation-settings: "wdth" 112, "wght" 900;
    font-size: clamp(2.15rem, 5.6vw, 5rem);
    letter-spacing: -.02em;
    text-transform: uppercase;
    background: linear-gradient(176deg, #ffffff 34%, #cfe0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 26px 60px rgba(2, 12, 45, .4);
}

.hero__word--thin {
    font-variation-settings: "wdth" 100, "wght" 400;
    letter-spacing: .012em;
}

.hero__expand {
    margin: .9rem 0 0;
    font-size: clamp(.86rem, 1.4vw, 1.1rem);
    font-weight: 400;
    letter-spacing: .015em;
    color: var(--ink-75);
    animation-delay: .26s;
}

.hero__rule {
    width: 132px;
    height: 3px;
    margin: 1.6rem auto;
    background: linear-gradient(90deg, transparent, var(--green-400) 22%, var(--green-500) 78%, transparent);
    transform-origin: center;
    animation: stretch .9s var(--ease) .42s both;
}

.hero__lede {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: "wdth" 108, "wght" 750;
    font-size: clamp(.92rem, 1.75vw, 1.32rem);
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--ink-100);
    animation-delay: .34s;
}

.hero__hint {
    margin: .85rem 0 0;
    font-size: clamp(.78rem, 1.1vw, .88rem);
    font-weight: 300;
    color: var(--ink-40);
    animation-delay: .42s;
}


/* ------------------------------------------------------------ SEGMENTS -- */

.segments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
    /* stretch: kartu sama tinggi walau jumlah aplikasinya berbeda */
    align-items: stretch;
}

.segment {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.35rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--corner-lg);
    background:
        linear-gradient(158deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .028) 62%);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: var(--lift);
    overflow: hidden;
    animation: rise .85s var(--ease) both;
    transition: border-color .45s var(--ease), transform .45s var(--ease);
}

.segment:nth-child(1) {
    animation-delay: .50s;
}

.segment:nth-child(2) {
    animation-delay: .60s;
}

.segment:nth-child(3) {
    animation-delay: .70s;
}

/* Pita diagonal aksen di sudut kanan atas kartu */
.segment::before {
    content: "";
    position: absolute;
    top: -58px;
    right: -78px;
    width: 190px;
    height: 116px;
    background: var(--accent);
    opacity: .16;
    transform: rotate(-24deg);
    transition: opacity .45s var(--ease);
    pointer-events: none;
}

.segment:hover {
    border-color: var(--line-hi);
}

.segment:hover::before {
    opacity: .28;
}

/* Aksen per segmen */
.segment--hijau {
    --accent: var(--green-400);
}

.segment--emas {
    --accent: var(--gold-300);
}

.segment--langit {
    --accent: var(--sky-300);
}


/* Kepala segmen ---------------------------------------------------------- */

.segment__head {
    position: relative;
    padding-bottom: 1.15rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--line);
}

.segment__no {
    display: block;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .2em;
    color: var(--accent);
    margin-bottom: .7rem;
}

.segment__title {
    margin: 0;
    font-family: var(--font-display);
    font-variation-settings: "wdth" 105, "wght" 800;
    font-size: clamp(1rem, 1.35vw, 1.16rem);
    line-height: 1.28;
    letter-spacing: .045em;
    text-transform: uppercase;
    /* Judul terpanjang tetap rapi tanpa memaksa tinggi kartu */
    min-height: 2.9em;
    display: flex;
    align-items: flex-end;
}

.segment__sub {
    margin: .55rem 0 0;
    font-size: .76rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--ink-40);
}


/* Daftar aplikasi -------------------------------------------------------- */

.segment__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block: .55rem;
}

.app {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .85rem;
    padding: .7rem .8rem;
    border-radius: var(--corner-sm);
    transition:
        background-color .32s var(--ease),
        transform .32s var(--ease);
}

/* Bilah aksen kiri yang tumbuh saat hover */
.app::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 2px;
    background: var(--accent);
    border-radius: 2px;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .32s var(--ease);
}

.app:hover,
.app:focus-visible {
    background: var(--glass-hi);
    transform: translateX(6px);
    outline: none;
}

.app:hover::before,
.app:focus-visible::before {
    transform: scaleY(1);
}

.app:focus-visible {
    box-shadow: 0 0 0 2px var(--accent);
}

.app__no {
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 400;
    color: var(--ink-40);
    transition: color .32s var(--ease);
}

.app:hover .app__no {
    color: var(--accent);
}

.app__body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.app__name {
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ink-100);
}

.app__desc {
    font-size: .715rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--ink-40);
}

.app__go {
    width: 16px;
    height: 16px;
    color: var(--accent);
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity .32s var(--ease),
        transform .32s var(--ease);
}

.app__go svg {
    width: 100%;
    height: 100%;
    display: block;
}

.app:hover .app__go,
.app:focus-visible .app__go {
    opacity: 1;
    transform: translateX(0);
}


/* Kaki segmen ------------------------------------------------------------ */

.segment__count {
    margin: auto 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-40);
}


/* -------------------------------------------------------------- FOOTER -- */

.footfall {
    padding: 1.75rem 1.5rem 2.5rem;
    animation: rise .8s var(--ease) .85s both;
}

.footfall__meta {
    margin: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-40);
}


/* --------------------------------------------------------- TOAST MOCK -- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1.1rem;
    border: 1px solid var(--line-hi);
    border-radius: var(--corner-sm);
    background: rgba(4, 22, 79, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--lift);
    /* Keadaan tersembunyi */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 14px);
    transition:
        opacity .35s var(--ease),
        transform .35s var(--ease),
        visibility .35s;
}

.toast.is-on {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.toast__badge {
    padding: .18rem .45rem;
    border-radius: 3px;
    background: var(--gold-300);
    color: var(--blue-950);
    font-family: var(--font-mono);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.toast__text {
    font-size: .82rem;
    font-weight: 400;
    color: var(--ink-75);
}


/* ----------------------------------------------------------- ANIMASI -- */

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes drop {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes stretch {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}


/* -------------------------------------------------------- RESPONSIVE -- */

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

    .segment__title {
        min-height: 0;
    }
}

@media (max-width: 900px) {

    /* Logo ditumpuk: tab tetap rata kiri, dua lambang sejajar di bawahnya */
    .masthead {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 1rem;
        padding: 1.25rem 0;
    }

    .masthead__mark--end {
        margin-right: 1.5rem;
    }

    .masthead__tab {
        grid-column: 1 / -1;
        padding: .7rem 1.75rem .7rem 1.25rem;
    }

    .masthead__mark--center {
        justify-self: start;
        margin-left: 1.5rem;
    }
}

@media (max-width: 720px) {
    .stage {
        width: min(1240px, 100% - 2rem);
    }

    .segments {
        grid-template-columns: 1fr;
    }

    .hero__eyebrow {
        letter-spacing: .28em;
    }

    .toast {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        transform: translate(0, 14px);
    }

    .toast.is-on {
        transform: translate(0, 0);
    }
}


/* ------------------------------------------------------- AKSESIBILITAS -- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    body {
        background: #fff;
        color: #000;
    }

    .grain,
    .toast {
        display: none;
    }
}