/* Gene Besar Custom Styles — design system shared with gp-web (gbpass.net):
   brand palette #0078D4 + #3E3E3E, layered dark hero surface, elevated cards,
   blue CTA band, and a class-based dark theme. */

html {
    scroll-behavior: smooth;
}

/* Header scroll effect */
.header-scrolled {
    box-shadow: 0 4px 24px rgba(16, 24, 40, 0.07), 0 1px 0 rgba(16, 24, 40, 0.04);
}

/* Mobile menu animation */
#mobile-menu {
    transition: max-height 0.3s ease-out;
}

/* Material Symbols.
   font-family + ligature settings used to come from the Google Fonts CSS; now
   that the font is self-hosted (see static/css/fonts.css) they live here. The
   'liga' feature turns the icon-name text (e.g. "mail") into the glyph. */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.ms-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Honeypot field: visually removed, still submitted by naive bots */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* ============================================================
   Depth & elevation — 2026 redesign:
   light editorial pages with one dark band and one blue band.
   ============================================================ */

/* --- Dark band (replaces the old .hero-surface) ----------------- */
.dark-band {
    background-color: #1d2129;
    background-image:
        radial-gradient(90% 120% at 88% -10%, rgba(0, 120, 212, 0.38) 0%, rgba(0, 120, 212, 0) 58%),
        linear-gradient(150deg, #1b1e24 0%, #23272e 55%, #1c2a3a 100%);
}

/* --- Blue CTA band ---------------------------------------------- */
.blue-band {
    background-color: #0078D4;
    background-image:
        radial-gradient(110% 120% at 50% -25%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(135deg, #0d88e6 0%, #0078D4 48%, #005FAA 100%);
}

/* --- Hairline list rows ----------------------------------------- */
.row-link { transition: background .2s ease; }
.row-link:hover { background: #F8F9FA; }
.row-link:hover .row-arrow { transform: translateX(4px); color: #0078D4; }
.row-arrow { transition: transform .2s ease, color .2s ease; }

/* --- Card lift --------------------------------------------------- */
.lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lift:hover {
    transform: translateY(-2px);
    border-color: #cfd8e3;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.07);
}

/* Staggered fade-up on page load (hero copy) */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fadeUp 0.6s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.fade-up-1 { animation-delay: 0.08s; }
.fade-up-2 { animation-delay: 0.16s; }
.fade-up-3 { animation-delay: 0.24s; }
.fade-up-4 { animation-delay: 0.32s; }

/* Scroll reveal: sections/cards start slightly lowered and fade in when they
   enter the viewport (IntersectionObserver in main.js adds .reveal-visible).
   Without JS, everything stays visible (opacity only drops once JS tags the
   root with .js-reveal). */
html.js-reveal .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
html.js-reveal .reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Premium blue CTA surface (legacy, kept per handoff) -------- */
.cta-surface {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #0078D4;
    background-image:
        radial-gradient(120% 120% at 50% -20%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, #0d88e6 0%, #0078D4 46%, #005FAA 100%);
}
.cta-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(70% 130% at 100% 115%, rgba(0, 0, 0, 0.16) 0%, transparent 60%),
        radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: auto, 22px 22px;
}
/* Lift white/outline buttons sitting on the CTA surface */
.cta-surface a {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transition: transform .2s ease, box-shadow .25s ease;
}
.cta-surface a:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

/* --- Card elevation -------------------------------------------- */
.gb-card {
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 6px 18px rgba(16, 24, 40, 0.06);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.gb-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 120, 212, 0.35);
    box-shadow:
        0 2px 4px rgba(16, 24, 40, 0.06),
        0 18px 36px rgba(0, 120, 212, 0.13);
}

/* --- Primary button polish ------------------------------------- */
a.bg-gb-blue,
button.bg-gb-blue {
    box-shadow: 0 1px 2px rgba(0, 95, 170, 0.22), 0 6px 16px rgba(0, 120, 212, 0.20);
    transition: background-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
a.bg-gb-blue:hover,
button.bg-gb-blue:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 95, 170, 0.24), 0 10px 24px rgba(0, 120, 212, 0.28);
}

/* --- Language switch (header) ---------------------------------
   A pill that reads like a toggle: the flag is the knob and sits on the side
   of the active language (right for ID, left for EN), next to its code. It is
   a plain link to the same page in the other language, so there is nothing to
   animate on click; the hover nudge hints at the direction it will move. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 7px;
    height: 38px;
    padding: 0 4px 0 12px;
    border: 1px solid #E4E7EB;
    border-radius: 9999px;
    background-color: #F3F4F6;
    color: #282828;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    transition: border-color .2s ease, background-color .2s ease;
}
.lang-switch-en {
    flex-direction: row-reverse;
    padding: 0 12px 0 4px;
}
.lang-switch:hover { border-color: #0078D4; }
.lang-switch-flag {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    /* The ring keeps the white half of the Indonesian flag visible on the pill */
    box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.10), 0 1px 3px rgba(16, 24, 40, 0.20);
    transition: transform .2s ease;
}
.lang-switch-id:hover .lang-switch-flag { transform: translateX(-2px); }
.lang-switch-en:hover .lang-switch-flag { transform: translateX(2px); }
/* The shared focus ring below squares corners to 6px; keep the pill a pill */
.lang-switch:focus-visible { border-radius: 9999px; }

/* Very narrow phones: drop the code and keep the flag, so logo, switch, theme
   toggle and menu button still fit on one row at 320px. From 350px up (which
   covers the common 360px and 375px phones) the full pill fits. */
@media (max-width: 349px) {
    .lang-switch,
    .lang-switch-en { padding: 0 4px; }
    .lang-switch-code { display: none; }
}

/* --- Keyboard focus ring (brand blue) -------------------------- */
a:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(0, 120, 212, 0.65);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .fade-up-1,
    .fade-up-2,
    .fade-up-3,
    .fade-up-4 {
        animation: none !important;
    }
    html.js-reveal .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .lang-switch-flag,
    .lang-switch-id:hover .lang-switch-flag,
    .lang-switch-en:hover .lang-switch-flag,
    .lift,
    .lift:hover,
    .row-link,
    .row-arrow,
    .row-link:hover .row-arrow,
    .gb-card,
    .gb-card:hover,
    a.bg-gb-blue,
    a.bg-gb-blue:hover,
    button.bg-gb-blue,
    button.bg-gb-blue:hover,
    .cta-surface a,
    .cta-surface a:hover {
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Dark theme
   Toggled by adding .dark to <html> (boot script in base.html;
   toggleTheme() in main.js). Light is the default — dark is a
   manual, persisted choice only.

   Strategy: the templates are authored light-first with Tailwind
   utilities, so dark mode re-maps the small set of light-surface
   utilities here. This unlayered stylesheet wins over Tailwind's
   @layer utilities by cascade-layer rules. Sections that are
   always dark (hero-surface, cta-surface, footer) are untouched,
   with explicit exceptions where light artifacts inside them must
   stay light.

   Palette: page #1b1d21 · raised band #202226 · card #26282c ·
   hover #2c2e33 · text #f1f3f5 / #cfd3d8 / #9aa1a9 · accent
   #4DA3E8 (readable variant of gb-blue on dark).
   ============================================================ */

/* Logo + toggle-icon swaps (light defaults) */
.logo-dark { display: none; }
html.dark .logo-light { display: none; }
html.dark .logo-dark { display: block; }
.theme-icon-light { display: none; }
html.dark .theme-icon-dark { display: none; }
html.dark .theme-icon-light { display: inline-block; }

html.dark {
    color-scheme: dark;
}

/* Language switch on dark */
html.dark .lang-switch {
    background-color: #26282c;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f1f3f5;
}
html.dark .lang-switch:hover { border-color: #4DA3E8; }
html.dark .lang-switch-flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Surfaces -------------------------------------------------- */
html.dark .bg-white { background-color: #26282c; }
html.dark .bg-gb-bg { background-color: #202226; }
html.dark .bg-gray-50 { background-color: #2c2e33; }
html.dark .bg-gray-100 { background-color: #2c2e33; }
html.dark .bg-white\/95 { background-color: rgba(27, 29, 33, 0.95); }
html.dark .hover\:bg-gray-50:hover { background-color: #2c2e33; }
html.dark .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, 0.08); }

/* Tinted feature/status chips */
html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.12); }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12); }
html.dark .bg-gb-blue\/10 { background-color: rgba(0, 120, 212, 0.2); }

/* --- Text ------------------------------------------------------ */
html.dark .text-gb-gray-dark { color: #f1f3f5; }
html.dark .text-gb-gray { color: #cfd3d8; }
html.dark .text-gb-gray-light { color: #9aa1a9; }
html.dark .text-gb-blue { color: #4DA3E8; }
html.dark .hover\:text-gb-blue:hover { color: #4DA3E8; }
html.dark .text-gb-blue\/40 { color: rgba(77, 163, 232, 0.45); }
html.dark .text-green-500 { color: #4ade80; }
html.dark .text-red-700 { color: #f87171; }

/* --- Borders ---------------------------------------------------- */
html.dark .border-gray-100 { border-color: rgba(255, 255, 255, 0.08); }
html.dark .border-gray-200 { border-color: rgba(255, 255, 255, 0.12); }
html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.35); }

/* --- Forms (contact page) --------------------------------------- */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark select,
html.dark textarea {
    background-color: #26282c;
    color: #f1f3f5;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #7c828a;
}

/* --- Images ----------------------------------------------------- */
/* Client/tech logos sit bare on the page in the light design; in dark mode
   they get a light chip behind them so marks with dark text/linework
   (RSM, Efata, Gaya Teknik, ...) remain legible. */
html.dark .dark-logo-chip {
    background-color: #e9edf1;
    border-radius: 8px;
    padding: 4px 8px;
}
/* Technology-stack logo tiles keep a light face in dark mode so every mark
   stays in its brand colors and legible. */
html.dark .logo-tile {
    background-color: #e9edf1;
    border-color: transparent;
}

/* Partner logos are full-color on light; on dark, flatten to a light gray so
   mixed-color marks sit calmly on the dark surface (same trick as the old
   site's dark mode). Tech logos and gallery photos just dim slightly. */
html.dark img[src*="/team/"] { filter: brightness(0.8); }

/* --- Exceptions: light artifacts inside always-dark sections ----
   The blue CTA band keeps its white buttons with true gb-blue text. */
html.dark section.cta-surface .bg-white { background-color: #FFFFFF; }
html.dark section.cta-surface .text-gb-blue { color: #0078D4; }
html.dark section.cta-surface .hover\:bg-gray-100:hover { background-color: #f3f4f6; }
/* The featured GBpass shot panel is authored dark already */
html.dark .featured-shot { background-color: #1b1e24; }

/* Card elevation reads through borders (not shadows) on dark */
html.dark .gb-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
}
html.dark .header-scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* --- 2026 redesign: hairlines, rows, bands on dark --------------- */
html.dark .border-gb-line { border-color: rgba(255, 255, 255, 0.08); }
html.dark .border-gb-line-2 { border-color: rgba(255, 255, 255, 0.12); }
html.dark .bg-gb-line-2 { background-color: rgba(255, 255, 255, 0.12); }
html.dark .border-gb-gray-dark { border-color: rgba(255, 255, 255, 0.35); }
html.dark .row-link:hover { background: #2c2e33; }
html.dark .lift:hover { border-color: rgba(255, 255, 255, 0.22); }
/* The blue CTA band keeps its white button with true gb-blue text */
html.dark section.blue-band .bg-white { background-color: #FFFFFF; }
html.dark section.blue-band .text-gb-blue { color: #0078D4; }
html.dark section.blue-band .hover\:bg-gb-bg:hover { background-color: #F8F9FA; }