/* =========================================================
   IKETAN.ID
   Menu Page Stylesheet
   ---------------------------------------------------------
   Scope:
   - Menu hero
   - Search
   - Category filters
   - Product catalogue
   - Product cards
   - Empty / loading states
   - Price information
   - Location CTA

   Global:
   /assets/css/global.css

   Responsive:
   /assets/css/responsive/menu-responsive.css

   IMPORTANT:
   No media queries in this file.
   ========================================================= */


/* =========================================================
   01. MENU PAGE GENERAL
   ========================================================= */

.menu-catalogue,
.menu-info,
.menu-location-cta {
    position: relative;
}


/* =========================================================
   02. MENU HERO
   ========================================================= */

.menu-hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding-top:
        calc(
            var(--navbar-height) +
            70px
        );

    padding-bottom: 88px;

    background:
        radial-gradient(
            circle at 78% 34%,
            rgba(244, 183, 64, 0.18),
            transparent 28%
        ),
        var(--iketan-soft);
}


/* ---------------------------------------------------------
   Decorative background shapes
   --------------------------------------------------------- */

.menu-hero::before {
    content: "";

    position: absolute;

    top: 8%;
    left: -85px;

    width: 230px;
    height: 230px;

    border:
        52px solid
        rgba(92, 13, 13, 0.045);

    border-radius: 50%;

    pointer-events: none;
}


.menu-hero::after {
    content: "";

    position: absolute;

    right: -80px;
    bottom: -100px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background-color:
        rgba(185, 40, 46, 0.055);

    pointer-events: none;
}


/* ---------------------------------------------------------
   Hero Container
   --------------------------------------------------------- */

.menu-hero-container {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 84px;
}


/* =========================================================
   03. MENU HERO CONTENT
   ========================================================= */

.menu-hero-content {
    width: 100%;
    max-width: 650px;
}


.menu-hero-content
.section-eyebrow {
    margin-bottom: 18px;
}


.menu-hero-title {
    max-width: 650px;

    margin-bottom: 24px;

    font-size:
        clamp(
            4.6rem,
            7vw,
            7rem
        );

    line-height: 0.92;
}


.menu-hero-title span {
    display: block;

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


.menu-hero-description {
    max-width: 510px;

    color: var(--iketan-muted);

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

    line-height: 1.8;
}


/* =========================================================
   04. MENU HERO VISUAL
   ========================================================= */

.menu-hero-visual {
    position: relative;

    min-height: 540px;

    display: grid;
    place-items: center;

    overflow: hidden;

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

    border-radius:
        var(--radius-2xl);

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

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


/* ---------------------------------------------------------
   Hero visual main shape
   --------------------------------------------------------- */

.menu-hero-shape {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(72%, 410px);
    aspect-ratio: 1;

    border-radius: 50%;

    background-color:
        rgba(244, 183, 64, 0.28);

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


/* ---------------------------------------------------------
   Secondary visual ornaments
   --------------------------------------------------------- */

.menu-hero-visual::before {
    content: "";

    position: absolute;

    top: -60px;
    right: -50px;

    width: 165px;
    height: 165px;

    border:
        34px solid
        rgba(92, 13, 13, 0.06);

    border-radius: 50%;
}


.menu-hero-visual::after {
    content: "";

    position: absolute;

    left: 32px;
    bottom: 28px;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background-color:
        rgba(185, 40, 46, 0.12);
}


/* ---------------------------------------------------------
   Hero Product
   --------------------------------------------------------- */

.menu-hero-product {
    position: relative;

    z-index: 2;

    width: min(68%, 390px);
    height: auto;

    object-fit: contain;

    mix-blend-mode: multiply;

    transform:
        rotate(-2deg);
}


/* ---------------------------------------------------------
   Hero Price Bubble
   --------------------------------------------------------- */

.menu-hero-price {
    position: absolute;

    top: 32px;
    right: 34px;

    z-index: 4;

    width: 112px;
    height: 112px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--iketan-white);

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

    text-align: center;

    transform:
        rotate(7deg);

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


.menu-hero-price span {
    margin-bottom: 3px;

    font-size: 0.68rem;
    font-weight: var(--weight-bold);
}


.menu-hero-price strong {
    font-family: var(--font-heading);
    font-size: 2.7rem;
    font-weight: 400;

    line-height: 0.9;
}


/* =========================================================
   05. CATALOGUE
   ========================================================= */

.menu-catalogue {
    overflow: hidden;

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


/* ---------------------------------------------------------
   Catalogue Header
   --------------------------------------------------------- */

.menu-catalogue-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

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

    margin-bottom: 38px;
}


.menu-catalogue-header
.section-heading {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   Result Summary
   --------------------------------------------------------- */

.menu-result-summary {
    flex-shrink: 0;

    margin-bottom: 7px;

    color: var(--iketan-muted);

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


.menu-result-summary strong {
    color: var(--iketan-maroon);

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


/* =========================================================
   06. MENU TOOLBAR
   ========================================================= */

.menu-toolbar {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.65fr)
        minmax(0, 1.35fr);

    align-items: center;

    gap: 22px;

    margin-bottom: 24px;

    padding:
        18px;

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

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

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

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


/* =========================================================
   07. MENU SEARCH
   ========================================================= */

.menu-search {
    position: relative;

    width: 100%;
}


/* ---------------------------------------------------------
   Search Input
   --------------------------------------------------------- */

.menu-search-input {
    width: 100%;
    height: 52px;

    padding:
        0
        48px
        0
        46px;

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

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

    outline: none;

    color: var(--iketan-ink);

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

    font-family:
        var(--font-body);

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

    transition:
        border-color
        var(--duration-fast)
        var(--ease-default),

        background-color
        var(--duration-fast)
        var(--ease-default),

        box-shadow
        var(--duration-fast)
        var(--ease-default);
}


.menu-search-input::placeholder {
    color:
        rgba(116, 101, 99, 0.72);
}


.menu-search-input:hover {
    border-color:
        rgba(92, 13, 13, 0.20);
}


.menu-search-input:focus {
    border-color:
        var(--iketan-maroon);

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

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


/* ---------------------------------------------------------
   Search Icon
   --------------------------------------------------------- */

.menu-search-icon {
    position: absolute;

    top: 50%;
    left: 17px;

    z-index: 2;

    width: 18px;
    height: 18px;

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

    pointer-events: none;

    transform:
        translateY(-50%);
}


.menu-search-icon img,
.menu-search-icon svg {
    width: 18px;
    height: 18px;

    object-fit: contain;

    opacity: 0.68;
}


/* ---------------------------------------------------------
   Clear Search
   --------------------------------------------------------- */

.menu-search-clear {
    position: absolute;

    top: 50%;
    right: 8px;

    z-index: 3;

    width: 36px;
    height: 36px;

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

    border-radius: 50%;

    color: var(--iketan-muted);

    background-color:
        transparent;

    font-size: 1.1rem;

    transform:
        translateY(-50%);

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

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


.menu-search-clear:hover {
    color: var(--iketan-maroon);

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


/* =========================================================
   08. CATEGORY FILTER
   ========================================================= */

.menu-category-filter {
    display: flex;
    align-items: center;

    gap: 8px;

    min-width: 0;

    overflow-x: auto;

    padding-bottom: 2px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}


.menu-category-filter::-webkit-scrollbar {
    display: none;
}


/* ---------------------------------------------------------
   Filter Button
   --------------------------------------------------------- */

.menu-category-button {
    min-height: 42px;

    flex-shrink: 0;

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

    padding:
        9px
        16px;

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

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

    color: var(--iketan-muted);

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

    font-size: 0.78rem;
    font-weight: var(--weight-bold);

    white-space: nowrap;

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

        background-color
        var(--duration-fast)
        var(--ease-default),

        border-color
        var(--duration-fast)
        var(--ease-default),

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


.menu-category-button:hover {
    color: var(--iketan-maroon);

    border-color:
        rgba(92, 13, 13, 0.24);

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


.menu-category-button:active {
    transform:
        scale(0.97);
}


/* ---------------------------------------------------------
   Active Category
   --------------------------------------------------------- */

.menu-category-button.is-active,
.menu-category-button[aria-pressed="true"] {
    color: var(--iketan-white);

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

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


/* =========================================================
   09. ACTIVE FILTER
   ========================================================= */

.menu-active-filter {
    display: flex;
    align-items: center;

    gap: 8px;

    width: fit-content;

    margin-bottom: 26px;

    padding:
        8px
        10px
        8px
        14px;

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

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

    color: var(--iketan-muted);

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

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


.menu-active-filter[hidden] {
    display: none;
}


.menu-active-filter strong {
    color: var(--iketan-maroon);

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


/* ---------------------------------------------------------
   Reset Filter
   --------------------------------------------------------- */

.menu-reset-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding-inline: 10px;

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

    color: var(--iketan-maroon);

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

    font-size:
        0.7rem;

    font-weight:
        var(--weight-bold);

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

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


.menu-reset-filter:hover {
    color: var(--iketan-white);

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


/* =========================================================
   10. PRODUCT GRID
   ========================================================= */

.menu-product-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        24px
        20px;

    min-height: 420px;
}


/* =========================================================
   11. PRODUCT SKELETON
   ========================================================= */

.menu-product-skeleton {
    min-height: 500px;

    overflow: hidden;

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


/* =========================================================
   12. PRODUCT CARD
   ========================================================= */

/*
   menu.js nanti render structure:

   article.menu-product-card

       div.menu-product-media
           img.menu-product-image

           div.menu-product-badges
               span.badge

       div.menu-product-content

           div.menu-product-category

           h3.menu-product-name

           p.menu-product-description

           div.menu-product-footer
               span.menu-product-price
*/


.menu-product-card {
    position: relative;

    min-width: 0;
    min-height: 500px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

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

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

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

    transition:
        transform
        var(--duration-slow)
        var(--ease-smooth),

        box-shadow
        var(--duration-slow)
        var(--ease-smooth),

        border-color
        var(--duration-slow)
        var(--ease-smooth);
}


.menu-product-card:hover {
    transform:
        translate3d(
            0,
            -6px,
            0
        );

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

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


/* =========================================================
   13. PRODUCT MEDIA
   ========================================================= */

.menu-product-media {
    position: relative;

    width: 100%;
    height: 315px;

    overflow: hidden;

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


.menu-product-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        700ms
        var(--ease-smooth);
}


.menu-product-card:hover
.menu-product-image {
    transform:
        scale(1.045);
}


/* ---------------------------------------------------------
   Product visual overlay
   --------------------------------------------------------- */

.menu-product-media::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            0deg,
            rgba(47, 7, 7, 0.07),
            transparent 42%
        );
}


/* =========================================================
   14. PRODUCT BADGES
   ========================================================= */

.menu-product-badges {
    position: absolute;

    top: 16px;
    left: 16px;

    z-index: 3;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}


/* =========================================================
   15. PRODUCT CONTENT
   ========================================================= */

.menu-product-content {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;

    padding:
        24px
        24px
        22px;
}


/* ---------------------------------------------------------
   Category
   --------------------------------------------------------- */

.menu-product-category {
    display: inline-flex;

    width: fit-content;

    margin-bottom: 10px;

    color:
        var(--iketan-red);

    font-size:
        0.67rem;

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

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ---------------------------------------------------------
   Product Name
   --------------------------------------------------------- */

.menu-product-name {
    margin-bottom: 11px;

    color:
        var(--iketan-maroon);

    font-size:
        2.15rem;

    line-height:
        1.02;
}


/* ---------------------------------------------------------
   Product Description
   --------------------------------------------------------- */

.menu-product-description {
    display:
        -webkit-box;

    margin-bottom:
        24px;

    overflow:
        hidden;

    color:
        var(--iketan-muted);

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

    line-height:
        1.7;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        3;
}


/* =========================================================
   16. PRODUCT FOOTER
   ========================================================= */

.menu-product-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    margin-top: auto;

    padding-top: 18px;

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


/* ---------------------------------------------------------
   Price
   --------------------------------------------------------- */

.menu-product-price-wrap {
    display: grid;

    gap: 3px;
}


.menu-product-price-label {
    color:
        var(--iketan-muted);

    font-size:
        0.65rem;

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


.menu-product-price {
    color:
        var(--iketan-maroon);

    font-size:
        1.05rem;

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


/* ---------------------------------------------------------
   Product Indicator
   --------------------------------------------------------- */

.menu-product-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius:
        50%;

    color:
        var(--iketan-maroon);

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

    transition:
        color
        var(--duration-normal)
        var(--ease-smooth),

        background-color
        var(--duration-normal)
        var(--ease-smooth),

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


.menu-product-card:hover
.menu-product-indicator {
    color:
        var(--iketan-white);

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

    transform:
        rotate(-8deg);
}


/* =========================================================
   17. PRODUCT HASH TARGET
   ========================================================= */

/*
   Kalau user datang dari homepage:

   /menu/#es-teh-paling-bawah

   menu.js nanti bisa memberi class:
   .is-highlighted

   supaya user langsung sadar
   produk mana yang dia buka.
*/

.menu-product-card.is-highlighted {
    border-color:
        var(--iketan-maroon);

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


/* =========================================================
   18. EMPTY STATE
   ========================================================= */

.menu-empty-state {
    width: 100%;
    max-width: 520px;

    margin:
        36px
        auto
        0;

    padding:
        56px
        36px;

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

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

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

    text-align:
        center;
}


.menu-empty-state[hidden] {
    display: none;
}


/* ---------------------------------------------------------
   Empty Icon
   --------------------------------------------------------- */

.menu-empty-icon {
    width: 62px;
    height: 62px;

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

    margin-bottom:
        20px;

    border-radius:
        50%;

    color:
        var(--iketan-maroon);

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

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

    font-size:
        2rem;
}


/* ---------------------------------------------------------
   Empty Copy
   --------------------------------------------------------- */

.menu-empty-state h3 {
    margin-bottom:
        10px;

    font-size:
        2.3rem;
}


.menu-empty-state p {
    max-width:
        380px;

    margin:
        0 auto
        24px;
}


/* =========================================================
   19. NOSCRIPT
   ========================================================= */

.menu-noscript {
    margin-top:
        24px;

    padding:
        20px;

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

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

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


.menu-noscript p {
    color:
        var(--iketan-muted);

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


/* =========================================================
   20. MENU DATA ERROR
   ========================================================= */

.menu-data-error {
    grid-column:
        1 / -1;

    padding:
        42px;

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

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

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

    text-align:
        center;
}


.menu-data-error h3 {
    margin-bottom:
        8px;

    font-size:
        2.2rem;
}


.menu-data-error p {
    max-width:
        480px;

    margin-inline:
        auto;
}


/* =========================================================
   21. PRICE INFORMATION
   ========================================================= */

.menu-info {
    padding-bottom:
        var(--space-3xl);

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


/* ---------------------------------------------------------
   Info Card
   --------------------------------------------------------- */

.menu-info-card {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 20px;

    padding:
        26px
        30px;

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

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

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


/* ---------------------------------------------------------
   Info Icon
   --------------------------------------------------------- */

.menu-info-icon {
    width: 50px;
    height: 50px;

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

    flex-shrink: 0;

    border-radius:
        50%;

    color:
        var(--iketan-white);

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

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

    font-size:
        1.5rem;
}


/* ---------------------------------------------------------
   Info Content
   --------------------------------------------------------- */

.menu-info-content h2 {
    margin-bottom:
        5px;

    color:
        var(--iketan-maroon);

    font-family:
        var(--font-body);

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

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

    line-height:
        1.4;
}


.menu-info-content p {
    max-width:
        760px;

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

    line-height:
        1.65;
}


/* =========================================================
   22. LOCATION CTA
   ========================================================= */

.menu-location-cta {
    padding-top:
        40px;

    overflow:
        hidden;

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


/* ---------------------------------------------------------
   Location Card
   --------------------------------------------------------- */

.menu-location-card {
    position: relative;

    min-height:
        500px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding:
        clamp(
            48px,
            7vw,
            88px
        );

    border-radius:
        var(--radius-2xl);

    color:
        var(--iketan-white);

    background:

        radial-gradient(
            circle at 82% 30%,
            rgba(
                244,
                183,
                64,
                0.12
            ),
            transparent
            30%
        ),

        var(--iketan-maroon);
}


/* ---------------------------------------------------------
   CTA Decorative circle
   --------------------------------------------------------- */

.menu-location-card::before {
    content: "";

    position: absolute;

    top: 54px;
    right: 10%;

    width: 120px;
    height: 120px;

    border:
        30px solid
        rgba(
            244,
            183,
            64,
            0.08
        );

    border-radius:
        50%;

    pointer-events:
        none;
}


/* =========================================================
   23. LOCATION CTA CONTENT
   ========================================================= */

.menu-location-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 620px;
}


.menu-location-eyebrow {
    display: inline-flex;

    margin-bottom:
        18px;

    color:
        var(--iketan-yellow);

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

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

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.menu-location-content h2 {
    max-width:
        600px;

    margin-bottom:
        20px;

    color:
        var(--iketan-white);

    font-size:
        clamp(
            3.6rem,
            6vw,
            5.4rem
        );

    line-height:
        0.96;
}


.menu-location-content p {
    max-width:
        480px;

    margin-bottom:
        30px;

    color:
        rgba(
            255,
            255,
            255,
            0.66
        );
}


/* =========================================================
   24. CTA DECORATION TEXT
   ========================================================= */

.menu-location-decoration {
    position: absolute;

    right: -4%;
    bottom: -25%;

    z-index: 1;

    color:
        rgba(
            255,
            255,
            255,
            0.05
        );

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

    font-size:
        clamp(
            12rem,
            20vw,
            19rem
        );

    line-height:
        1;

    white-space:
        nowrap;

    pointer-events:
        none;

    user-select:
        none;
}


/* =========================================================
   25. LOADING STATE
   ========================================================= */

.menu-product-grid.is-loading {
    pointer-events:
        none;
}


/* =========================================================
   26. FILTER TRANSITION
   ========================================================= */

/*
   Saat menu.js filter produk,
   kita bisa pakai class .is-filtering
   untuk sedikit memberi feedback visual.
*/

.menu-product-grid.is-filtering {
    opacity:
        0.65;

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


/* =========================================================
   27. PRODUCT ENTER ANIMATION
   ========================================================= */

/*
   Product hasil filter tidak perlu global reveal
   berulang kali.

   menu.js nanti bisa memberi:
   .is-entering
*/

.menu-product-card.is-entering {
    animation:
        menuProductEnter
        420ms
        var(--ease-smooth)
        both;
}


@keyframes menuProductEnter {

    from {
        opacity:
            0;

        transform:
            translate3d(
                0,
                16px,
                0
            );
    }

    to {
        opacity:
            1;

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


/* =========================================================
   28. FOCUS / KEYBOARD PRODUCT
   ========================================================= */

/*
   Product card nanti akan punya tabindex="0"
   dari menu.js untuk keyboard navigation.
*/

.menu-product-card:focus-visible {
    outline:
        3px solid
        var(--iketan-yellow);

    outline-offset:
        4px;
}


/* =========================================================
   29. TOUCH SAFETY
   ========================================================= */

/*
   Hover-specific touch behavior utama nanti
   kita taruh di menu-responsive.css.

   Base file cuma memastikan interactive element
   punya cursor yang jelas.
*/

.menu-product-card[role="link"] {
    cursor:
        pointer;
}


/* =========================================================
   30. END OF MENU BASE STYLES
   ========================================================= */