/* =============================================================================
   web-gka — Frontend CSS (vanilla, di atas hasil build tailwind.css)
   ============================================================================= */

:root {
    --brand: #1c6a8f;
    --brand-dark: #0f4c6e;
    --forest: #1f5a3d;
    --forest-dark: #166534;
    --cream: #f8f5f0;
    --ink: #0f172a;
}

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: #1c6a8f;
    color: #fff;
}

/* ---- Navbar pill (floating) ---- */
.site-header {
    transition: padding-top .3s ease;
}
.nav-pill {
    position: relative;
    z-index: 20;
}

/* ---- Hero carousel: Ken Burns ---- */
.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s ease, visibility 1.1s;
    overflow: hidden;
}
.carousel-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}
.carousel-bg {
    transform: scale(1.08);
    transition: transform 7s ease-out;
    will-change: transform;
}
.carousel-slide.active .carousel-bg {
    transform: scale(1);
}

/* Entri teks hero per blok (animasi bertahap) */
.hero-anim-1,
.hero-anim-2,
.hero-anim-3 {
    opacity: 0;
    transform: translateY(22px);
}
.carousel-slide.active .hero-anim-1 {
    animation: heroIn .7s .15s ease forwards;
}
.carousel-slide.active .hero-anim-2 {
    animation: heroIn .7s .35s ease forwards;
}
.carousel-slide.active .hero-anim-3 {
    animation: heroIn .7s .55s ease forwards;
}
@keyframes heroIn {
    to { opacity: 1; transform: translateY(0); }
}
.carousel-slide .hero-anim {
    text-shadow: 0 2px 24px rgba(15, 23, 42, .6), 0 1px 3px rgba(15, 23, 42, .4);
}

/* Scrim lokal di belakang teks hero — gambar di luar area teks tetap cerah */
.carousel-scrim {
    background: linear-gradient(90deg,
        rgba(15, 23, 42, .82) 0%,
        rgba(15, 23, 42, .55) 30%,
        rgba(15, 23, 42, .22) 55%,
        rgba(15, 23, 42, .08) 72%,
        rgba(15, 23, 42, 0) 100%);
}

/* ---- Reveal on scroll ---- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* ---- Flash message ---- */
.animate-flash {
    animation: flashIn .45s cubic-bezier(.16, 1, .3, 1);
}
@keyframes flashIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Card image zoom on hover ---- */
.card-img {
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.group:hover .card-img {
    transform: scale(1.07);
}

/* ---- Ikon chip (rounded-warna) ---- */
.icon-chip {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}

/* ---- Field form kontak ---- */
.cont-field {
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.cont-field:focus {
    border-color: #1c6a8f;
    box-shadow: 0 0 0 4px rgba(28, 106, 143, .15);
    background: #fff;
}
.cont-field.has-error {
    border-color: #ef4444;
}

/* ---- Sembunyikan scrollbar halaman (scroll tetap berfungsi) ---- */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ---- Respek prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
    .hero-anim-1, .hero-anim-2, .hero-anim-3 { opacity: 1; transform: none; animation: none; }
    .carousel-bg { transition: none; transform: none; }
    .animate-ping { animation: none; }
}

/* ---- Typography pada artikel panjang (tentang, karir) ---- */
.about-cols p {
    margin-bottom: .75rem;
}
.about-cols ul {
    list-style: disc;
    padding-left: 1.25rem;
    margin: .5rem 0;
}
.about-cols strong {
    color: #1f5a3d;
}