/* =========================================================
   IKETAN.ID
   Global Stylesheet
   ---------------------------------------------------------
   Scope:
   - Design tokens
   - CSS reset
   - Base document
   - Typography
   - Layout primitives
   - Buttons
   - Navigation
   - Footer
   - Forms
   - Reusable components
   - Accessibility
   - Global animation primitives

   Responsive rules:
   /assets/css/responsive/global-responsive.css

   Brand:
   Iketan
   "Berdiri Sejak Kepepet"
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

:root {

    /* -----------------------------------------------------
       Brand Colors
       ----------------------------------------------------- */

    --iketan-maroon: #5C0D0D;
    --iketan-maroon-dark: #3D0A0A;
    --iketan-red: #B9282E;
    --iketan-yellow: #F4B740;


    /* -----------------------------------------------------
       Neutral Colors
       ----------------------------------------------------- */

    --iketan-cream: #FFF8F1;
    --iketan-soft: #F5E9DD;
    --iketan-white: #FFFFFF;

    --iketan-ink: #211818;
    --iketan-muted: #746563;
    --iketan-border: #E7D8CE;


    /* -----------------------------------------------------
       Supporting Colors
       ----------------------------------------------------- */

    --color-success: #387A4A;
    --color-warning: #B87814;
    --color-danger: #B9282E;


    /* -----------------------------------------------------
       Transparent Colors
       ----------------------------------------------------- */

    --maroon-04: rgba(92, 13, 13, 0.04);
    --maroon-06: rgba(92, 13, 13, 0.06);
    --maroon-08: rgba(92, 13, 13, 0.08);
    --maroon-10: rgba(92, 13, 13, 0.10);
    --maroon-14: rgba(92, 13, 13, 0.14);
    --maroon-18: rgba(92, 13, 13, 0.18);

    --white-06: rgba(255, 255, 255, 0.06);
    --white-10: rgba(255, 255, 255, 0.10);
    --white-16: rgba(255, 255, 255, 0.16);
    --white-60: rgba(255, 255, 255, 0.60);
    --white-72: rgba(255, 255, 255, 0.72);
    --white-84: rgba(255, 255, 255, 0.84);


    /* -----------------------------------------------------
       Typography
       Fonts loaded from HTML, not @import.
       ----------------------------------------------------- */

    --font-heading: "Oleo Script", system-ui, sans-serif;
    --font-body: "Mulish", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;


    /* -----------------------------------------------------
       Typography Scale
       ----------------------------------------------------- */

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;

    --heading-xs: 1.75rem;
    --heading-sm: 2.25rem;
    --heading-md: 3rem;
    --heading-lg: 4rem;
    --heading-xl: 5.5rem;


    /* -----------------------------------------------------
       Font Weight
       Mulish
       ----------------------------------------------------- */

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;


    /* -----------------------------------------------------
       Line Height
       ----------------------------------------------------- */

    --leading-tight: 1.05;
    --leading-snug: 1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;


    /* -----------------------------------------------------
       Layout
       ----------------------------------------------------- */

    --container-max: 1240px;
    --container-wide: 1380px;
    --container-narrow: 860px;

    --container-padding: 24px;

    --navbar-height: 84px;


    /* -----------------------------------------------------
       Spacing Scale
       ----------------------------------------------------- */

    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;


    /* -----------------------------------------------------
       Border Radius
       ----------------------------------------------------- */

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --radius-2xl: 40px;

    --radius-pill: 999px;


    /* -----------------------------------------------------
       Border
       ----------------------------------------------------- */

    --border-default: 1px solid var(--iketan-border);
    --border-maroon-soft: 1px solid var(--maroon-10);


    /* -----------------------------------------------------
       Shadows
       ----------------------------------------------------- */

    --shadow-xs:
        0 4px 14px rgba(61, 10, 10, 0.04);

    --shadow-sm:
        0 8px 24px rgba(61, 10, 10, 0.06);

    --shadow-md:
        0 16px 42px rgba(61, 10, 10, 0.10);

    --shadow-lg:
        0 28px 80px rgba(61, 10, 10, 0.14);


    /* -----------------------------------------------------
       Motion
       ----------------------------------------------------- */

    --duration-fast: 160ms;
    --duration-normal: 280ms;
    --duration-slow: 500ms;
    --duration-reveal: 700ms;

    --ease-default: ease;

    --ease-smooth:
        cubic-bezier(0.22, 1, 0.36, 1);

    --ease-in-out:
        cubic-bezier(0.65, 0, 0.35, 1);


    /* -----------------------------------------------------
       Z-index
       ----------------------------------------------------- */

    --z-base: 1;
    --z-content: 10;
    --z-floating: 100;
    --z-header: 900;
    --z-menu: 950;
    --z-modal: 1000;
}


/* =========================================================
   02. RESET
   ========================================================= */

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


html {
    min-height: 100%;

    scroll-behavior: smooth;

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


body {
    min-height: 100vh;
    min-height: 100dvh;

    overflow-x: hidden;

    margin: 0;
}


main {
    display: block;
}


img,
picture,
video,
canvas,
svg {
    display: block;

    max-width: 100%;
}


img {
    height: auto;
}


button,
input,
textarea,
select {
    margin: 0;

    color: inherit;
    font: inherit;
}


button {
    padding: 0;

    border: 0;

    background: none;

    cursor: pointer;
}


input,
textarea,
select {
    border-radius: 0;
}


textarea {
    resize: vertical;
}


a {
    color: inherit;

    text-decoration: none;
}


ul,
ol {
    list-style: none;
}


table {
    border-collapse: collapse;
    border-spacing: 0;
}


address {
    font-style: normal;
}


/* =========================================================
   03. DOCUMENT BASE
   ========================================================= */

body {
    color: var(--iketan-ink);

    background-color: var(--iketan-cream);

    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


body.is-menu-open,
body.is-locked {
    overflow: hidden;
}


::selection {
    color: var(--iketan-white);

    background-color: var(--iketan-maroon);
}


/* =========================================================
   04. GLOBAL SCROLLBAR
   ========================================================= */

/*
   Dibuat subtle.
   Tidak terlalu dekoratif supaya tetap clean.
*/

::-webkit-scrollbar {
    width: 10px;
}


::-webkit-scrollbar-track {
    background-color: var(--iketan-soft);
}


::-webkit-scrollbar-thumb {
    border: 2px solid var(--iketan-soft);
    border-radius: var(--radius-pill);

    background-color: var(--iketan-maroon);
}


::-webkit-scrollbar-thumb:hover {
    background-color: var(--iketan-maroon-dark);
}


/* =========================================================
   05. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

    color: var(--iketan-maroon);

    font-family: var(--font-heading);
    font-weight: 400;

    line-height: var(--leading-tight);

    text-wrap: balance;
}


h1 {
    font-size: clamp(
        3.75rem,
        7vw,
        var(--heading-xl)
    );
}


h2 {
    font-size: clamp(
        3rem,
        5vw,
        var(--heading-lg)
    );
}


h3 {
    font-size: clamp(
        2rem,
        3vw,
        var(--heading-md)
    );
}


h4 {
    font-size: var(--heading-sm);
}


h5 {
    font-size: var(--heading-xs);
}


h6 {
    font-size: var(--text-xl);
}


p {
    margin: 0;

    color: var(--iketan-muted);

    line-height: var(--leading-relaxed);
}


strong,
b {
    font-weight: var(--weight-bold);
}


small {
    font-size: var(--text-sm);
}


.text-body {
    font-family: var(--font-body);
}


.text-heading {
    font-family: var(--font-heading);
}


/* =========================================================
   06. GLOBAL LINKS
   ========================================================= */

.link {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);

    color: var(--iketan-maroon);

    font-size: var(--text-sm);
    font-weight: var(--weight-bold);

    transition:
        color var(--duration-fast) var(--ease-default);
}


.link:hover {
    color: var(--iketan-red);
}


.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


.link-arrow-icon {
    display: inline-flex;

    transition:
        transform var(--duration-normal)
        var(--ease-smooth);
}


.link-arrow:hover .link-arrow-icon {
    transform: translateX(5px);
}


/* =========================================================
   07. CONTAINER SYSTEM
   ========================================================= */

.container {
    width: 100%;
    max-width: var(--container-max);

    margin-inline: auto;

    padding-inline: var(--container-padding);
}


.container-wide {
    width: 100%;
    max-width: var(--container-wide);

    margin-inline: auto;

    padding-inline: var(--container-padding);
}


.container-narrow {
    width: 100%;
    max-width: var(--container-narrow);

    margin-inline: auto;

    padding-inline: var(--container-padding);
}


.container-fluid {
    width: 100%;

    padding-inline: var(--container-padding);
}


/* =========================================================
   08. SECTION PRIMITIVES
   ========================================================= */

.section {
    position: relative;

    padding-block: var(--space-4xl);
}


.section-sm {
    padding-block: var(--space-3xl);
}


.section-lg {
    padding-block: var(--space-5xl);
}


.section-cream {
    background-color: var(--iketan-cream);
}


.section-soft {
    background-color: var(--iketan-soft);
}


.section-white {
    background-color: var(--iketan-white);
}


.section-maroon {
    color: var(--iketan-white);

    background-color: var(--iketan-maroon);
}


.section-dark {
    color: var(--iketan-white);

    background-color: var(--iketan-maroon-dark);
}


/* =========================================================
   09. SECTION HEADING SYSTEM
   ========================================================= */

.section-heading {
    width: 100%;
    max-width: 760px;

    margin-bottom: var(--space-2xl);
}


.section-heading.is-center {
    margin-inline: auto;

    text-align: center;
}


.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);

    margin-bottom: var(--space-md);

    color: var(--iketan-red);

    font-size: var(--text-xs);
    font-weight: var(--weight-extrabold);

    letter-spacing: 0.12em;
    line-height: 1;

    text-transform: uppercase;
}


.section-title {
    margin-bottom: var(--space-md);
}


.section-description {
    width: 100%;
    max-width: 640px;

    font-size: var(--text-base);
}


.section-heading.is-center
.section-description {
    margin-inline: auto;
}


.section-maroon .section-eyebrow,
.section-dark .section-eyebrow {
    color: var(--iketan-yellow);
}


.section-maroon h1,
.section-maroon h2,
.section-maroon h3,
.section-maroon h4,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--iketan-white);
}


.section-maroon p,
.section-dark p {
    color: var(--white-72);
}


/* =========================================================
   10. BUTTON SYSTEM
   ========================================================= */

.btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 50px;

    padding:
        13px
        22px;

    overflow: hidden;

    border:
        1px solid
        transparent;

    border-radius: var(--radius-pill);

    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);

    line-height: 1;

    white-space: nowrap;

    transition:
        color var(--duration-normal) var(--ease-smooth),
        background-color var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
}


.btn:hover {
    transform: translateY(-2px);
}


.btn:active {
    transform: translateY(0);
}


.btn-primary {
    color: var(--iketan-white);

    background-color: var(--iketan-maroon);
}


.btn-primary:hover {
    background-color: var(--iketan-maroon-dark);

    box-shadow: var(--shadow-sm);
}


.btn-secondary {
    color: var(--iketan-maroon-dark);

    background-color: var(--iketan-yellow);
}


.btn-secondary:hover {
    background-color: #F8C75E;

    box-shadow: var(--shadow-sm);
}


.btn-outline {
    color: var(--iketan-maroon);

    border-color: var(--iketan-maroon);

    background-color: transparent;
}


.btn-outline:hover {
    color: var(--iketan-white);

    background-color: var(--iketan-maroon);
}


.btn-light {
    color: var(--iketan-maroon);

    background-color: var(--iketan-white);
}


.btn-light:hover {
    color: var(--iketan-white);

    background-color: var(--iketan-maroon);
}


.btn-dark {
    color: var(--iketan-white);

    background-color: var(--iketan-maroon-dark);
}


.btn-icon {
    width: 18px;
    height: 18px;

    flex-shrink: 0;
}


.btn-block {
    width: 100%;
}


/* =========================================================
   11. BADGES
   ========================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 28px;

    padding:
        6px
        11px;

    border-radius: var(--radius-pill);

    font-size: var(--text-xs);
    font-weight: var(--weight-extrabold);

    line-height: 1;
}


.badge-maroon {
    color: var(--iketan-white);

    background-color: var(--iketan-maroon);
}


.badge-yellow {
    color: var(--iketan-maroon-dark);

    background-color: var(--iketan-yellow);
}


.badge-soft {
    color: var(--iketan-maroon);

    background-color: var(--iketan-soft);
}


.badge-outline {
    color: var(--iketan-maroon);

    border: var(--border-maroon-soft);

    background-color: transparent;
}


/* =========================================================
   12. GENERIC CARD
   ========================================================= */

.card {
    position: relative;

    overflow: hidden;

    border: var(--border-default);
    border-radius: var(--radius-lg);

    background-color: var(--iketan-white);

    transition:
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
}


.card-hover:hover {
    transform: translateY(-5px);

    border-color: var(--maroon-14);

    box-shadow: var(--shadow-md);
}


/* =========================================================
   13. NAVBAR / HEADER
   ========================================================= */

/*
   Hanya desktop/base state di sini.
   Mobile navigation masuk:
   global-responsive.css
*/

.site-header {
    position: relative;

    z-index: var(--z-header);
}


.navbar {
    position: fixed;

    top: 0;
    left: 0;

    z-index: var(--z-header);

    width: 100%;
    height: var(--navbar-height);

    border-bottom:
        1px solid
        transparent;

    background-color:
        rgba(255, 248, 241, 0.92);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        height var(--duration-normal) var(--ease-smooth),
        background-color var(--duration-normal) var(--ease-smooth),
        border-color var(--duration-normal) var(--ease-smooth),
        box-shadow var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
}


.navbar.is-scrolled {
    border-bottom-color:
        var(--maroon-08);

    background-color:
        rgba(255, 248, 241, 0.97);

    box-shadow:
        0 8px 30px
        rgba(61, 10, 10, 0.05);
}


.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 100%;
}


.navbar-brand {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;
}


.navbar-logo {
    width: auto;
    height: 52px;

    object-fit: contain;
}


.navbar-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}


.navbar-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding:
        9px
        14px;

    border-radius: var(--radius-pill);

    color: var(--iketan-ink);

    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);

    transition:
        color var(--duration-fast) var(--ease-default),
        background-color var(--duration-fast) var(--ease-default);
}


.navbar-link:hover {
    color: var(--iketan-maroon);

    background-color: var(--maroon-06);
}


.navbar-link.active,
.navbar-link[aria-current="page"] {
    color: var(--iketan-maroon);

    font-weight: var(--weight-extrabold);
}


.navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}


/*
   Default hidden.
   Hanya muncul pada mobile lewat responsive CSS.
*/

.navbar-toggle {
    display: none;

    position: relative;

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    border-radius: 50%;

    color: var(--iketan-maroon);
}


.navbar-toggle-line {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 22px;
    height: 2px;

    border-radius: var(--radius-pill);

    background-color: currentColor;

    transform:
        translate(-50%, -50%);

    transition:
        background-color var(--duration-normal)
        var(--ease-smooth);
}


.navbar-toggle-line::before,
.navbar-toggle-line::after {
    content: "";

    position: absolute;

    left: 0;

    width: 22px;
    height: 2px;

    border-radius: var(--radius-pill);

    background-color: currentColor;

    transition:
        transform var(--duration-normal)
        var(--ease-smooth);
}


.navbar-toggle-line::before {
    transform: translateY(-7px);
}


.navbar-toggle-line::after {
    transform: translateY(7px);
}


.navbar-toggle.is-active
.navbar-toggle-line {
    background-color: transparent;
}


.navbar-toggle.is-active
.navbar-toggle-line::before {
    transform: rotate(45deg);
}


.navbar-toggle.is-active
.navbar-toggle-line::after {
    transform: rotate(-45deg);
}


/*
   CTA khusus mobile.
   Hidden pada desktop.
*/

.navbar-mobile-cta {
    display: none;
}


/* =========================================================
   14. FORM PRIMITIVES
   ========================================================= */

.form {
    width: 100%;
}


.form-grid {
    display: grid;
    gap: var(--space-lg);
}


.form-group {
    display: grid;
    gap: 8px;
}


.form-label {
    color: var(--iketan-ink);

    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}


.form-required {
    color: var(--iketan-red);
}


.form-control {
    width: 100%;
    min-height: 52px;

    padding:
        13px
        16px;

    border:
        1px solid
        var(--iketan-border);

    border-radius: var(--radius-md);

    outline: none;

    color: var(--iketan-ink);

    background-color: var(--iketan-white);

    font-size: var(--text-sm);

    transition:
        border-color var(--duration-fast)
        var(--ease-default),
        box-shadow var(--duration-fast)
        var(--ease-default),
        background-color var(--duration-fast)
        var(--ease-default);
}


textarea.form-control {
    min-height: 150px;

    padding-top: 15px;

    resize: vertical;
}


.form-control::placeholder {
    color: #A89A97;
}


.form-control:hover {
    border-color:
        rgba(92, 13, 13, 0.24);
}


.form-control:focus {
    border-color: var(--iketan-maroon);

    box-shadow:
        0 0 0 4px
        var(--maroon-08);
}


.form-help {
    color: var(--iketan-muted);

    font-size: var(--text-xs);
}


.form-error {
    color: var(--color-danger);

    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}


/* =========================================================
   15. FOOTER
   ========================================================= */

.site-footer {
    position: relative;

    padding-top: 80px;

    color: var(--white-72);

    background-color:
        var(--iketan-maroon-dark);
}


.footer-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(0, 0.7fr)
        minmax(0, 0.8fr)
        minmax(0, 0.8fr);

    gap: var(--space-2xl);

    padding-bottom: 64px;
}


.footer-brand {
    max-width: 400px;
}


.footer-logo {
    width: auto;
    max-width: 160px;
    height: auto;

    margin-bottom: var(--space-lg);
}


.footer-description {
    max-width: 380px;

    color: var(--white-60);

    font-size: var(--text-sm);
}


.footer-title {
    margin-bottom: 18px;

    color: var(--iketan-white);

    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-extrabold);

    line-height: 1.4;
}


.footer-links {
    display: grid;

    gap: 12px;
}


.footer-link {
    width: fit-content;

    color: var(--white-60);

    font-size: var(--text-sm);

    transition:
        color var(--duration-fast)
        var(--ease-default);
}


.footer-link:hover {
    color: var(--iketan-white);
}


.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);

    padding-block: 24px;

    border-top:
        1px solid
        var(--white-10);
}


.footer-bottom p {
    color:
        rgba(255, 255, 255, 0.48);

    font-size: var(--text-xs);
}


/* =========================================================
   16. SOCIAL LINKS
   ========================================================= */

.social-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}


.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    overflow: hidden;

    border:
        1px solid
        var(--white-16);

    border-radius: 50%;

    color: var(--iketan-white);

    transition:
        transform var(--duration-normal)
        var(--ease-smooth),
        border-color var(--duration-normal)
        var(--ease-smooth),
        background-color var(--duration-normal)
        var(--ease-smooth);
}


.social-link:hover {
    transform: translateY(-3px);

    border-color:
        rgba(255, 255, 255, 0.4);

    background-color: var(--white-10);
}


.social-link img,
.social-link svg {
    width: 18px;
    height: 18px;

    object-fit: contain;
}


/* =========================================================
   17. GLOBAL DIVIDER
   ========================================================= */

.divider {
    width: 100%;
    height: 1px;

    border: 0;

    background-color: var(--iketan-border);
}


.divider-light {
    background-color: var(--white-10);
}


/* =========================================================
   18. IMAGE PRIMITIVES
   ========================================================= */

.image-cover {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.image-contain {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.image-rounded {
    overflow: hidden;

    border-radius: var(--radius-lg);
}


/* =========================================================
   19. GLOBAL REVEAL MOTION
   ========================================================= */

/*
   Trigger nanti dikontrol dari main.js.

   Example:
   <div data-reveal>
   <div data-reveal="left">
   <div data-reveal="right">
*/

[data-reveal] {
    opacity: 0;

    transform:
        translate3d(
            0,
            28px,
            0
        );

    transition:
        opacity var(--duration-reveal)
        var(--ease-smooth),
        transform var(--duration-reveal)
        var(--ease-smooth);

    will-change:
        opacity,
        transform;
}


[data-reveal="left"] {
    transform:
        translate3d(
            -28px,
            0,
            0
        );
}


[data-reveal="right"] {
    transform:
        translate3d(
            28px,
            0,
            0
        );
}


[data-reveal="scale"] {
    transform:
        scale(0.96);
}


[data-reveal].is-visible {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);
}


/* =========================================================
   20. GLOBAL LOADING STATE
   ========================================================= */

.is-loading {
    pointer-events: none;

    opacity: 0.6;
}


.skeleton {
    position: relative;

    overflow: hidden;

    background-color: var(--iketan-soft);
}


.skeleton::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.55),
            transparent
        );

    transform: translateX(-100%);

    animation:
        skeletonLoading
        1.4s
        infinite;
}


@keyframes skeletonLoading {

    100% {
        transform: translateX(100%);
    }
}


/* =========================================================
   21. ACCESSIBILITY
   ========================================================= */

:focus {
    outline: none;
}


:focus-visible {
    outline:
        3px solid
        var(--iketan-yellow);

    outline-offset: 3px;
}


.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}


/*
   Skip link untuk keyboard accessibility.
*/

.skip-link {
    position: fixed;

    top: 12px;
    left: 12px;

    z-index: var(--z-modal);

    padding:
        12px
        16px;

    border-radius: var(--radius-sm);

    color: var(--iketan-white);

    background-color: var(--iketan-maroon);

    font-size: var(--text-sm);
    font-weight: var(--weight-bold);

    transform: translateY(-150%);

    transition:
        transform var(--duration-fast)
        var(--ease-default);
}


.skip-link:focus {
    transform: translateY(0);
}


/* =========================================================
   22. GLOBAL UTILITIES
   ========================================================= */

.relative {
    position: relative;
}


.absolute {
    position: absolute;
}


.overflow-hidden {
    overflow: hidden;
}


.no-scroll {
    overflow: hidden;
}


.full-width {
    width: 100%;
}


.full-height {
    height: 100%;
}


.text-center {
    text-align: center;
}


.text-left {
    text-align: left;
}


.text-right {
    text-align: right;
}


.text-maroon {
    color: var(--iketan-maroon);
}


.text-red {
    color: var(--iketan-red);
}


.text-yellow {
    color: var(--iketan-yellow);
}


.text-white {
    color: var(--iketan-white);
}


.text-muted {
    color: var(--iketan-muted);
}


.bg-cream {
    background-color: var(--iketan-cream);
}


.bg-soft {
    background-color: var(--iketan-soft);
}


.bg-white {
    background-color: var(--iketan-white);
}


.bg-maroon {
    background-color: var(--iketan-maroon);
}


.bg-dark {
    background-color: var(--iketan-maroon-dark);
}


.hidden {
    display: none !important;
}


/* =========================================================
   23. REDUCED MOTION
   ========================================================= */

/*
   Penting karena nanti website kita punya:
   - parallax
   - scroll reveal
   - marquee
   - floating animation

   User yang meminta reduced motion harus tetap dapat
   experience yang nyaman.
*/

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }


    [data-reveal] {
        opacity: 1;

        transform: none;

        will-change: auto;
    }
}