/*
 * base.css — pengganti Tailwind CSS (tanpa build step).
 * Isinya: reset (preflight) + hanya utility class yang benar-benar dipakai.
 * Dipakai dalam @layer supaya prioritasnya sama seperti Tailwind v4
 * (CSS lain yang tidak berlayer tetap menang).
 */
@layer base, utilities;

:root {
    --spacing: 0.25rem;
}

/* ------------------------------ Preflight ------------------------------ */
@layer base {
    *, ::after, ::before, ::backdrop, ::file-selector-button {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0 solid;
    }

    html, :host {
        line-height: 1.5;
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        -webkit-tap-highlight-color: transparent;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit;
    }

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

    b, strong { font-weight: bolder; }

    small { font-size: 80%; }

    ol, ul, menu { list-style: none; }

    img, svg, video, canvas, audio, iframe, embed, object {
        display: block;
        vertical-align: middle;
    }

    img, video {
        max-width: 100%;
        height: auto;
    }

    button, input, select, optgroup, textarea, ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        border-radius: 0;
        background-color: transparent;
        opacity: 1;
    }

    button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
        appearance: button;
    }

    [hidden]:where(:not([hidden="until-found"])) {
        display: none !important;
    }
}

/* ------------------------------ Utilities ------------------------------ */
@layer utilities {
    /* display & position */
    .hidden { display: none; }
    .flex { display: flex; }
    .absolute { position: absolute; }
    .relative { position: relative; }
    .visible { visibility: visible; }
    .overflow-hidden { overflow: hidden; }
    .pointer-events-none { pointer-events: none; }

    /* flexbox */
    .flex-col { flex-direction: column; }
    .items-center { align-items: center; }
    .justify-center { justify-content: center; }
    .gap-2 { gap: calc(var(--spacing) * 2); }

    /* offsets */
    .top-0 { top: 0; }
    .left-0 { left: 0; }
    .top-1\/2 { top: 50%; }
    .left-1\/2 { left: 50%; }
    .top-\[20\%\] { top: 20%; }
    .bottom-\[10\%\] { bottom: 10%; }
    .left-\[50\%\] { left: 50%; }
    .left-6 { left: calc(var(--spacing) * 6); }
    .right-6 { right: calc(var(--spacing) * 6); }
    .-top-5 { top: calc(var(--spacing) * -5); }
    .-left-4 { left: calc(var(--spacing) * -4); }
    .-bottom-40 { bottom: calc(var(--spacing) * -40); }

    .z-0 { z-index: 0; }
    .z-10 { z-index: 10; }

    /* sizing */
    .w-full { width: 100%; }
    .h-screen { height: 100vh; }
    .w-6 { width: calc(var(--spacing) * 6); }
    .h-6 { height: calc(var(--spacing) * 6); }
    .w-7 { width: calc(var(--spacing) * 7); }
    .h-7 { height: calc(var(--spacing) * 7); }
    .w-13 { width: calc(var(--spacing) * 13); }
    .h-13 { height: calc(var(--spacing) * 13); }
    .w-\[110px\] { width: 110px; }
    .h-\[200px\] { height: 200px; }

    /* transforms (Tailwind v4 memakai properti `translate` & `rotate` terpisah) */
    .-translate-x-1\/2 {
        --tw-translate-x: -50%;
        translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);
    }
    .-translate-y-1\/2 {
        --tw-translate-y: -50%;
        translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);
    }
    .rotate-180 { rotate: 180deg; }
    .-rotate-50 { rotate: -50deg; }

    /* opacity */
    .opacity-0 { opacity: 0; }
    .opacity-100 { opacity: 1; }

    /* typography */
    .text-sm { font-size: 0.875rem; line-height: 1.4285714; }
    .text-lg { font-size: 1.125rem; line-height: 1.5555556; }
    .text-xl { font-size: 1.25rem; line-height: 1.4; }
    .italic { font-style: italic; }
    .text-white { color: #fff; }
    .text-black { color: #000; }
    .font-sriracha { font-family: "Sriracha", "cursive"; }
    .font-dancingScript { font-family: "Dancing Script", "cursive"; }

    /* background */
    .bg-\[\#8b0000\] { background-color: #8b0000; }
    .bg-\[\#ee9ca7\] { background-color: #ee9ca7; }
    .bg-\[\#14101d\] { background-color: #14101d; }

    /* responsive: md >= 768px */
    @media (min-width: 48rem) {
        .md\:flex-row { flex-direction: row; }
        .md\:gap-2 { gap: calc(var(--spacing) * 2); }
        .md\:gap-y-2 { row-gap: calc(var(--spacing) * 2); }
        .md\:left-20 { left: calc(var(--spacing) * 20); }
        .md\:right-20 { right: calc(var(--spacing) * 20); }
        .md\:left-\[45\%\] { left: 45%; }
        .md\:-bottom-26 { bottom: calc(var(--spacing) * -26); }
        .md\:w-\[150px\] { width: 150px; }
        .md\:text-\[1rem\] { font-size: 1rem; }
        .md\:text-2xl { font-size: 1.5rem; line-height: 1.3333333; }
        .md\:text-3xl { font-size: 1.875rem; line-height: 1.2; }
    }
}