/* ==================================================================
   Baba Website — Custom Styles
   Pelengkap Tailwind CDN (utility-utility yang tidak ada di Tailwind)
   ================================================================== */

/* Reset & defaults */
html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    overflow-x: hidden;
}

/* Smooth-scroll offset agar judul section tidak ketutup navbar fixed */
section[id] {
    scroll-margin-top: 5rem;
}

/* === Navbar shadow on scroll (di-toggle dari JS) === */
#navbar.scrolled {
    box-shadow: 0 4px 24px -8px rgba(15, 44, 92, 0.12);
}

/* === Kalkulator paket: state "selected" untuk button === */
.kalk-opt.selected {
    background-color: #0F2C5C;
    color: #FFFFFF;
    border-color: #0F2C5C;
}

/* === Detail/summary FAQ: hilangkan marker default browser === */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* Animasi konten FAQ saat dibuka */
details[open] > div {
    animation: faqFadeIn 0.25s ease-out;
}

@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Form: matikan ring focus default Safari === */
input,
textarea,
select,
button {
    -webkit-appearance: none;
    appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230F2C5C' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem;
    padding-right: 2.75rem;
}

/* === Selection color === */
::selection {
    background: #F5B82E;
    color: #0F2C5C;
}

/* === Scrollbar (desktop) === */
@media (min-width: 1024px) {
    ::-webkit-scrollbar {
        width: 10px;
    }
    ::-webkit-scrollbar-track {
        background: #FAFAF7;
    }
    ::-webkit-scrollbar-thumb {
        background: #A6BBDA;
        border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #0F2C5C;
    }
}

/* === Animasi delay utilitas === */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* === Reduce motion preference === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === Print styles === */
@media print {
    #navbar,
    .fixed,
    [class*="floating"] {
        display: none !important;
    }
    body {
        color: #000;
        background: #fff;
    }
}