/* ==========================================================================
   TEMA 3 — Crème (krem kart, el yazısı başlık)
   Yönetilen özellikler theme.json -> defaults içinde; burada düzen + süsleme.
   ========================================================================== */
@layer theme {
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
        margin: 0;
        background: #ffffff;
        color: #1a1a1a;
        font-family: var(--g-products-font_family);
    }

    /* Banner (kapak) ---------------------------------------------------- */
    .hero-section {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background-color: #f4ede2;
        background-image:
            linear-gradient(var(--g-banner-overlay), var(--g-banner-overlay)),
            var(--g-item-image, none);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .hero-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .hero-brand span { line-height: 1; }

    /* Menü butonu: temada her zaman sol üstte sabit --------------------- */
    .hero-menu-badge {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 25;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        cursor: pointer;
        transition: transform .2s ease;
    }

    .hero-menu-badge:hover { transform: translateY(-1px); }

    .menu-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 18px; }
    .menu-icon span { display: block; width: 100%; height: 2px; border-radius: 999px; background: currentColor; }
    .hero-menu-badge-label { letter-spacing: .18em; text-transform: uppercase; }

    /* Kaydırınca beliren ince header ------------------------------------ */
    .page-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 20;
        height: 84px;
        background: rgba(255, 253, 250, .94);
        border-bottom: 1px solid rgba(234, 160, 33, .25);
        backdrop-filter: blur(12px);
        transform: translateY(-100%);
        opacity: 0;
        transition: transform .3s ease, opacity .3s ease;
    }

    .page-header.is-visible { transform: none; opacity: 1; }

    /* Açılır menü ------------------------------------------------------- */
    .side-menu { padding: 28px 24px 36px; color: #ffffff; display: flex; flex-direction: column; gap: 30px; }
    .side-menu-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .side-menu-title { margin: 0; letter-spacing: .5em; text-transform: uppercase; }
    .side-menu-close { border: 0; background: transparent; padding: 0; }
    .side-menu-nav { display: grid; gap: 12px; }
    .side-menu-link { display: block; padding: 14px 0; text-decoration: none; }

    /* Kategoriler (kart) ------------------------------------------------ */
    .menu-section { padding: 48px 0 60px; }
    .menu-container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 18px; }

    .menu-card {
        padding: 32px 24px;
        color: #1a1a1a;
        border-radius: 24px;
    }

    .menu-card + .menu-card { margin-top: 28px; }
    .menu-card-top { margin-bottom: 24px; }
    .menu-title { margin: 0; line-height: 1.1; }

    .menu-desc {
        margin: 8px 0 0;
        font-size: 13px;
        color: #8a8a8a;
    }

    /* Ürünler ----------------------------------------------------------- */
    .menu-list { display: grid; gap: 22px; }

    .menu-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
        align-items: start;
    }

    .menu-item-copy { min-width: 0; }
    .menu-item h3 { margin: 0 0 6px; line-height: 1.5em; overflow-wrap: break-word; }
    .menu-item p { margin: 0; line-height: 1.65; overflow-wrap: break-word; }

    .menu-price { white-space: nowrap; text-align: right; justify-self: end; line-height: 1.5em; }
}