/* =====================================================
   BEF CHOCOLATE COFFEE — FAMONE Green theme
   Mobile cafe menu: dark forest header, white cards,
   forest pill prices, bold Inter typography.
   ===================================================== */

:root {
    /* === FAMONE palette === */
    --forest:   #1F4D3D;
    --forest-2: #163D2F;
    --forest-3: #2A6B54;
    --cream:    #F5EFE3;
    --cream-2:  #EDE5D3;
    --white:    #FFFFFF;
    --ink:      #1A1A1A;
    --ink-2:    #2D2D2D;
    --muted:    #6B6B6B;
    --gold:     #C8A45C;
    --line:     #E8DDD0;

    /* === Legacy aliases (so old class names still resolve) === */
    --espresso:   var(--forest);
    --cocoa:      var(--forest-2);
    --caramel:    var(--gold);
    --gold-old:   var(--gold);
    --ivory:      var(--white);
    --paper:      var(--cream);
    --mocha:      var(--muted);
    --muted-text: var(--muted);

    /* Y2K alias map → forest tones */
    --hot:        var(--forest);
    --hot-deep:   var(--forest-2);
    --lemon:      var(--gold);
    --mint:       var(--forest-3);
    --blue:       var(--forest-2);
    --red:        var(--forest);
    --red-deep:   var(--forest-2);
    --yellow:     var(--gold);
    --yellow-soft:#F2E4CE;

    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --shadow:    0 4px 12px rgba(0,0,0,.06);
    --shadow-pop:0 8px 24px rgba(0,0,0,.10);

    --container: 480px;
    --pad: 20px;

    --font-display: 'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
}

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

[data-lucide], i[data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
[data-lucide] svg, i[data-lucide] svg { display: block; }

html { -webkit-text-size-adjust: 100%; background: var(--cream); }

body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }

main { max-width: var(--container); margin: 0 auto; padding-bottom: 0; }
body.has-floatbar main { padding-bottom: 96px; }

/* tnum prices */
.prod-row-ed-price,
.product-price,
.hero-bg-price,
.fm-price,
.camp-price {
    font-feature-settings: "tnum" 1;
    letter-spacing: .01em;
}

/* =====================================================
   HEADER — dark forest bar
   ===================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    max-width: var(--container);
    margin: 0 auto;
    background: var(--forest);
    color: var(--white);
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    min-height: 68px;
    color: var(--white);
}

.icon-btn {
    width: 38px; height: 38px;
    border-radius: 8px;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: background .2s ease, border-color .2s ease;
    flex-shrink: 0;
}
.icon-btn:active { background: rgba(255,255,255,.1); }
.icon-btn--ghost { border-radius: 999px; }

/* Brand wordmark + logo in header */
.brand {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
    flex: 1;
    text-align: center;
    color: var(--white);
    text-decoration: none;
}
.brand-logo {
    height: 44px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.brand-text {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}
.brand-wordmark {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: .04em;
    color: var(--white);
    line-height: 1;
}
.brand-subtitle {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 8.5px;
    letter-spacing: .22em;
    color: rgba(255,255,255,.78);
    margin-top: 3px;
    text-transform: uppercase;
}

/* Header right cluster */
.header-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Lang switcher — on dark header */
.lang-switcher { position: relative; }
.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border: 1.5px solid rgba(255,255,255,.45);
    border-radius: 999px;
    background: transparent;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    transition: background .2s ease;
}
.lang-toggle:active { background: rgba(255,255,255,.1); }
.lang-toggle i { transition: transform .2s ease; }
.lang-switcher.open .lang-toggle i { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-pop);
    padding: 6px;
    list-style: none;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 110;
}
.lang-switcher.open .lang-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.lang-menu li { list-style: none; }
.lang-menu button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    text-align: left;
}
.lang-menu button:hover,
.lang-menu button.is-active {
    background: var(--cream);
}
.lang-menu button.is-active { color: var(--forest); font-weight: 700; }
.lang-menu button span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--muted);
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--cream-2);
}
.lang-menu button.is-active span { background: var(--forest); color: var(--white); }

/* =====================================================
   HERO BANNER (legacy single image — kept for fallback)
   ===================================================== */
.hero-banner {
    width: 100%;
    background: var(--forest);
    overflow: hidden;
    position: relative;
}
.hero-banner img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.hero-banner-fallback {
    width: 100%;
    height: 340px;
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-3) 100%);
}

/* =====================================================
   HERO SLIDER — multi-image cross-fade
   ===================================================== */
.hero-slider-fm {
    position: relative;
    width: 100%;
    background: var(--forest);
    overflow: hidden;
    height: 340px;
    touch-action: pan-y;
    user-select: none;
}
@media (min-width: 420px) {
    .hero-slider-fm { height: 380px; }
}
.hero-slider-fm-track {
    position: absolute;
    inset: 0;
}
.hero-slider-fm-slide {
    position: absolute;
    inset: 0;
    background-color: var(--forest);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .9s ease;
    will-change: opacity;
}
.hero-slider-fm-slide.is-active {
    opacity: 1;
    z-index: 1;
}
.hero-slider-fm-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 7px;
}
.hero-slider-fm-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .25s ease, width .25s ease;
}
.hero-slider-fm-dot.is-active {
    background: var(--gold);
    width: 20px;
}

/* =====================================================
   FAVORİ LEZZETLERİMİZ — white rounded card
   ===================================================== */
.favs {
    background: var(--white);
    margin: -28px 16px 24px;
    border-radius: 18px;
    padding: 22px 18px 24px;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 2;
}
.favs-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--ink);
    text-align: center;
    margin-bottom: 18px;
    letter-spacing: -.01em;
}
.favs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.fav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--ink);
}
.fav-item-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: var(--cream-2);
    background-size: cover;
    background-position: center;
    margin-bottom: 8px;
}
.fav-item-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =====================================================
   KATEGORİLERİMİZ
   ===================================================== */
.cats {
    padding: 8px 16px 36px;
}
.cats--page { padding-top: 0; }
.cats-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    color: var(--ink);
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: -.02em;
}
.cats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cat-tile-fm {
    position: relative;
    display: block;
    height: 160px;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--forest);
    background-size: cover;
    background-position: center;
    color: var(--white);
    box-shadow: var(--shadow);
}
.cat-tile-fm::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31,77,61,.15) 0%, rgba(22,61,47,.85) 100%);
    z-index: 1;
}
.cat-tile-fm-img {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.cat-tile-fm-name {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    color: var(--white);
    letter-spacing: -.01em;
    line-height: 1.15;
    padding-bottom: 8px;
    padding-right: 10px;
}
.cat-tile-fm-name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 34px;
    background: var(--gold);
}

/* =====================================================
   MENU PAGE HERO
   ===================================================== */
.menu-hero-fm {
    text-align: center;
    padding: 20px 20px 16px;
}
.eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--forest);
    text-transform: uppercase;
}
.menu-hero-fm-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    color: var(--ink);
    margin-top: 6px;
    letter-spacing: -.02em;
}
.menu-hero-fm-sub {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 6px;
}

/* =====================================================
   CATEGORY DETAIL HERO + PRODUCT ROWS
   ===================================================== */
.cat-hero-fm {
    text-align: center;
    padding: 20px 20px 12px;
}
.cat-hero-fm-eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--forest);
    text-transform: uppercase;
}
.cat-hero-fm-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    color: var(--ink);
    margin-top: 4px;
    letter-spacing: -.02em;
}
.cat-hero-fm-tagline {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--muted);
}
.cat-hero-fm-rule {
    display: block;
    width: 36px;
    height: 2px;
    margin: 14px auto 0;
    background: var(--gold);
    border-radius: 2px;
}

.section { padding: 20px 16px; }
.section-tight { padding: 12px 16px 32px; }

.empty-state {
    background: var(--white);
    border-radius: 14px;
    padding: 36px 20px;
    text-align: center;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.empty-state svg { color: var(--forest); opacity: .5; }
.empty-state p { font-size: 13px; }

.prod-list-ed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.prod-row-ed {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 14px;
    background: var(--white);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 2px 0 rgba(0,0,0,.02), 0 10px 24px rgba(0,0,0,.04);
    color: var(--ink);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.prod-row-ed::before {
    content: "";
    position: absolute;
    left: 0; top: 18px; bottom: 18px;
    width: 3px;
    background: var(--gold, #C8A45C);
    border-radius: 0 4px 4px 0;
    opacity: 0;
    transition: opacity .2s ease;
}
.prod-row-ed:hover,
.prod-row-ed:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 0 rgba(0,0,0,.02), 0 14px 28px rgba(0,0,0,.07);
}
.prod-row-ed:hover::before,
.prod-row-ed:active::before { opacity: 1; }

.prod-row-ed-img {
    width: 108px;
    height: 108px;
    flex-shrink: 0;
    border-radius: 14px;
    background-color: var(--cream-2);
    background-size: cover;
    background-position: center;
    position: relative;
}
.prod-row-ed-img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(31,77,61,.06);
}

.prod-row-ed-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.prod-row-ed-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--forest);
    line-height: 1.2;
    letter-spacing: -.015em;
    padding-right: 0;
}
.prod-row-ed-desc {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 1px;
}
.prod-row-ed-foot {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.prod-row-ed-price {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--forest);
    letter-spacing: -.01em;
    line-height: 1;
    position: relative;
}
.prod-row-ed-price::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--gold, #C8A45C);
    margin-right: 8px;
    align-self: center;
}
.prod-row-ed-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--forest);
    opacity: .65;
    transition: opacity .2s ease, transform .2s ease;
}
.prod-row-ed:hover .prod-row-ed-cta,
.prod-row-ed:active .prod-row-ed-cta {
    opacity: 1;
    transform: translateX(3px);
}
.prod-row-ed-arrow {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--forest);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.prod-row-ed:active .prod-row-ed-arrow { background: var(--forest-2); }

/* Legacy add button if still used somewhere */
.prod-row-ed-add {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--forest);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =====================================================
   PRODUCT DETAIL (urun.php)
   ===================================================== */
.product-page { background: var(--cream); }

/* ===================== PRODUCT DETAIL v2 ===================== */

.pd2-hero {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    height: 360px;
    overflow: hidden;
    background: var(--forest);
}
.pd2-hero-img {
    position: absolute;
    inset: 0;
    background-color: var(--forest);
    background-size: cover;
    background-position: center;
}
.pd2-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 35%, rgba(245,239,227,1) 100%);
    pointer-events: none;
}
.pd2-hero-back,
.pd2-hero-fav {
    position: absolute;
    top: 18px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: var(--forest);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    backdrop-filter: blur(6px);
}
.pd2-hero-back { left: 18px; }
.pd2-hero-fav  { right: 18px; }

.pd2-main {
    max-width: var(--container);
    margin: -56px auto 0;
    position: relative;
    z-index: 3;
    padding: 0 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Headline card */
.pd2-headline {
    background: var(--white);
    border-radius: 22px;
    padding: 22px 20px;
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
}
.pd2-cat {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--forest);
    background: var(--cream);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.pd2-headline-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}
.pd2-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--ink);
    flex: 1;
}
.pd2-price-tag {
    flex-shrink: 0;
    background: var(--forest);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    padding: 8px 14px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(31,77,61,.25);
}

.pd2-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.pd2-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11.5px;
    padding: 5px 10px;
    border-radius: 999px;
}
.pd2-chip i { color: var(--forest); }

.pd2-short {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
    font-style: italic;
}

/* Generic block card */
.pd2-block {
    background: var(--white);
    border-radius: 18px;
    padding: 20px 20px 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.pd2-block-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 14px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.pd2-block-title small {
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .08em;
    font-size: 10.5px;
}
.pd2-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink);
}

/* Detail info rows */
.pd2-info-grid {
    display: flex;
    flex-direction: column;
}
.pd2-info-row {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.pd2-info-row:first-child { border-top: none; padding-top: 0; }
.pd2-info-label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.pd2-info-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink);
}

/* Nutrition grid */
.pd2-nut-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.pd2-nut-card {
    background: var(--cream);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pd2-nut-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}
.pd2-nut-value {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    color: var(--forest);
    letter-spacing: -.01em;
}

/* Allergens */
.pd2-allerg-group { margin-bottom: 14px; }
.pd2-allerg-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 8px;
}
.pd2-allerg-head--soft { color: var(--muted); }
.pd2-allerg-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pd2-allerg-chip {
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--muted);
    background: var(--white);
    text-decoration: line-through;
    text-decoration-color: rgba(107,107,107,.45);
}
.pd2-allerg-chip.is-var {
    background: var(--forest);
    color: var(--white);
    border-color: var(--forest);
    text-decoration: none;
    font-weight: 600;
}
.pd2-allerg-empty {
    font-size: 12.5px;
    color: var(--muted);
    font-style: italic;
}
.pd2-allerg-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.55;
    font-style: italic;
}

/* =====================================================
   AUTH PAGE (giris.php)
   ===================================================== */
body.auth-page { background: var(--cream); }

.auth-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 36px 22px 40px;
}
.auth-logo-wrap {
    text-align: center;
    margin-bottom: 22px;
}
.auth-wordmark {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 32px;
    color: var(--forest);
    letter-spacing: .04em;
}
.auth-tagline {
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
}

.demo-banner {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--forest);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--forest);
    font-size: 12.5px;
    margin-bottom: 18px;
}

.tab-bar {
    display: flex;
    background: var(--white);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
}
.tab-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--muted);
    transition: background .2s ease, color .2s ease;
}
.tab-btn.active {
    background: var(--forest);
    color: var(--white);
}

.auth-panel { display: none; }
.auth-panel.active { display: block; }

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--forest);
}
.form-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.form-input-wrap:focus-within {
    border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(31,77,61,.1);
}
.form-prefix {
    padding: 0 10px 0 14px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    border-right: 1px solid var(--line);
    margin-right: 6px;
    height: 100%;
    display: inline-flex;
    align-items: center;
}
.form-input {
    width: 100%;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-input--with-prefix { border: none; border-radius: 0; }
.form-input-wrap .form-input--with-prefix { background: transparent; padding-left: 0; }
.form-input:focus {
    border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(31,77,61,.1);
}
.form-input::placeholder { color: var(--muted); opacity: .8; }

.form-eye-btn {
    padding: 0 14px;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
}

.form-forgot {
    align-self: flex-end;
    font-size: 12px;
    color: var(--forest);
    font-weight: 600;
    margin-top: 2px;
}
.form-textarea { resize: vertical; min-height: 110px; }
.form-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--forest) 50%), linear-gradient(135deg, var(--forest) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.4;
}
.form-checkbox { margin-top: 3px; accent-color: var(--forest); }
.form-link { color: var(--forest); font-weight: 600; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    transition: background .2s ease, transform .1s ease;
}
.btn-primary {
    background: var(--forest);
    color: var(--white);
}
.btn-primary:active { background: var(--forest-2); transform: scale(.99); }
.btn-full { width: 100%; }

.auth-divider {
    text-align: center;
    margin: 20px 0 14px;
    position: relative;
    color: var(--muted);
    font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--line);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }
.auth-divider span { background: var(--cream); padding: 0 10px; }

.social-btns { display: flex; flex-direction: column; gap: 10px; }
.social-btn {
    width: 100%;
    padding: 12px 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.social-btn-svg { width: 20px; height: 20px; }

.auth-foot { text-align: center; margin-top: 22px; }
.auth-foot-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--forest);
    font-weight: 600;
}

.demo-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%) translateY(20px);
    background: var(--forest);
    color: var(--white);
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 1000;
    box-shadow: var(--shadow-pop);
}
.demo-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =====================================================
   CONTACT PAGE (iletisim.php)
   ===================================================== */
.page-hero {
    text-align: center;
    padding: 20px 20px 8px;
}
.page-hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    color: var(--ink);
    margin-top: 6px;
    letter-spacing: -.02em;
}
.page-hero-title em { font-style: normal; color: var(--forest); }
.page-hero-sub {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 6px;
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.section-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -.01em;
}
.section-title em { font-style: normal; color: var(--forest); }
.section-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--forest);
    letter-spacing: .04em;
}

.contact-card {
    background: var(--white);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
}
.contact-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.contact-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--cream);
    color: var(--forest);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-icon-wrap--red    { background: rgba(31,77,61,.1); color: var(--forest); }
.contact-icon-wrap--yellow { background: rgba(200,164,92,.18); color: var(--gold); }
.contact-card-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--forest);
}
.contact-card-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    color: var(--ink);
    margin-top: 2px;
}
.contact-card-sub {
    display: block;
    font-size: 12px;
    color: var(--muted);
}
.contact-address {
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 14px;
}

.map-placeholder {
    position: relative;
    height: 160px;
    background: var(--cream);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
}
.map-grid { position: absolute; inset: 0; }
.map-line { position: absolute; background: var(--line); }
.map-line--h { left: 0; right: 0; height: 1px; }
.map-line--v { top: 0; bottom: 0; width: 1px; }
.map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.map-pin-dot {
    width: 14px;
    height: 14px;
    background: var(--forest);
    border-radius: 999px;
    border: 3px solid var(--white);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.map-pin-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    color: var(--forest);
    background: var(--white);
    padding: 3px 8px;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}
.map-open-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 7px 12px;
    background: var(--forest);
    color: var(--white);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.map-open-svg { width: 14px; height: 14px; filter: brightness(0) invert(1); }

.contact-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.contact-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
    background: var(--cream);
    color: var(--forest);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .02em;
}
.contact-action-btn--call { background: var(--forest); color: var(--white); }
.contact-action-btn--wa   { background: rgba(31,77,61,.1); color: var(--forest); }
.contact-action-btn--mail { background: rgba(200,164,92,.18); color: var(--forest); }

.hours-table { display: flex; flex-direction: column; }
.hours-row {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
}
.hours-row:first-child { border-top: none; }
.hours-row--highlight { color: var(--forest); font-weight: 700; }
.hours-day { color: var(--ink); }
.hours-time { color: var(--muted); font-feature-settings: "tnum" 1; }
.hours-row--highlight .hours-time { color: var(--forest); }
.hours-open   { color: var(--forest); font-weight: 700; font-size: 12px; }
.hours-closed { color: #B0322F; font-weight: 700; font-size: 12px; }

.contact-form {
    background: var(--white);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* =====================================================
   404 / DEMO PAGE
   ===================================================== */
body.demo-page { background: var(--cream); }
.demo-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 40px 22px 40px;
    text-align: center;
}
.demo-illustration {
    display: inline-flex;
    margin-bottom: 22px;
}
.demo-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--forest);
    text-transform: uppercase;
}
.demo-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    color: var(--ink);
    margin-top: 6px;
    letter-spacing: -.02em;
}
.demo-title em { font-style: normal; color: var(--forest); }
.demo-sub {
    font-size: 13.5px;
    color: var(--muted);
    margin: 8px 0 22px;
}
.demo-home-btn { margin-bottom: 28px; }
.demo-available {
    text-align: left;
    background: var(--white);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
}
.demo-available-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 8px;
}
.demo-pages-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.demo-page-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 10px;
    color: var(--ink);
    transition: background .2s ease;
}
.demo-page-link:hover { background: var(--cream); }
.demo-page-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cream);
    color: var(--forest);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.demo-page-link div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.demo-page-link strong { font-size: 13.5px; font-weight: 700; }
.demo-page-link small { font-size: 11.5px; color: var(--muted); }
.demo-page-link svg:last-child { color: var(--muted); }

.demo-brand {
    display: inline-block;
    margin-top: 28px;
}
.demo-brand-wordmark {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    color: var(--forest);
    letter-spacing: .04em;
}

/* =====================================================
   FOOTER — editorial three-section
   ===================================================== */
.site-footer {
    max-width: var(--container);
    margin: 32px auto 0;
    background: transparent;
}
.fm-foot { padding: 0; }

/* Section 1 — cream centered editorial */
.fm-foot-top {
    background: transparent;
    text-align: center;
    padding: 28px 24px 36px;
}
.fm-foot-mark {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    color: var(--forest);
    letter-spacing: .01em;
}
.fm-foot-top .fm-foot-sub {
    margin-top: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--forest);
    opacity: .75;
}
.fm-foot-tag {
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.5;
    color: var(--forest);
    opacity: .8;
}
.fm-foot-tag em { font-style: italic; font-weight: 500; }

/* Instagram follow card */
.fm-foot-ig-card {
    margin: 22px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--white);
    border: 1px solid var(--cream-2, #EDE5D3);
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
    max-width: 320px;
    width: calc(100% - 48px);
    box-shadow: 0 4px 14px rgba(0,0,0,.04);
    transition: transform .2s ease, box-shadow .2s ease;
}
.fm-foot-ig-card:hover,
.fm-foot-ig-card:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.fm-foot-ig-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fm-foot-ig-svg {
    width: 22px;
    height: 22px;
    display: block;
}
.fm-foot-ig-card-body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
    text-align: left;
    min-width: 0;
}
.fm-foot-ig-card-body small {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}
.fm-foot-ig-card-body strong {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--forest);
}
.fm-foot-ig-card-arrow {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--forest);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Section 2 — forest grid */
.fm-foot-cols {
    background: var(--forest);
    color: var(--white);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 22px;
    padding: 32px 24px;
}
.fm-foot-col-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .24em;
    color: var(--gold);
    margin-bottom: 14px;
    text-transform: uppercase;
}
.fm-foot-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}
.fm-foot-col li { list-style: none; }
.fm-foot-col a {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13.5px;
    color: rgba(255,255,255,.85);
    letter-spacing: -.005em;
    transition: color .2s ease;
}
.fm-foot-col a:hover { color: var(--gold); }

/* Section 3 — narrow forest bottom strip */
.fm-foot-bottom {
    background: var(--forest);
    color: rgba(255,255,255,.6);
    padding: 14px 24px 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.fm-foot-copy { color: rgba(255,255,255,.55); }
.fm-foot-links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.fm-foot-links a {
    color: rgba(255,255,255,.7);
    transition: color .2s ease;
}
.fm-foot-links a:hover { color: var(--gold); }
.fm-foot-links span { color: rgba(255,255,255,.3); }

/* =====================================================
   BOTTOM SHEET / TAKEOVER MENU — dark forest
   ===================================================== */
.sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}
.sheet[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .25s ease, visibility 0s linear 0s;
}
.sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.4);
}
.sheet-panel {
    position: absolute;
    inset: 0;
    background: var(--forest);
    color: var(--white);
    display: flex;
    flex-direction: column;
    max-width: var(--container);
    margin: 0 auto;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow: hidden;
    will-change: transform;
}
.sheet[aria-hidden="false"] .sheet-panel { transform: translateX(0); }
body.sheet-open { overflow: hidden; }

.takeover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
}
.takeover-brand {
    display: inline-flex;
    align-items: center;
    color: var(--white);
}
.takeover-brand-wm {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .04em;
    color: var(--white);
    line-height: 1;
}
.takeover-close {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.45);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background .2s ease;
}
.takeover-close:active { background: rgba(255,255,255,.1); }

.takeover-search {
    margin: 8px 22px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 2px;
    border-bottom: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.8);
}
.takeover-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.01em;
}
.takeover-search input::placeholder { color: rgba(255,255,255,.5); }

.takeover-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 6px 22px 32px;
    -webkit-overflow-scrolling: touch;
}

.takeover-cats {
    display: flex;
    flex-direction: column;
}
.takeover-cat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: var(--white);
    transition: padding-left .25s ease;
}
.takeover-cat-bar {
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    background: var(--gold);
    opacity: 0;
    transition: opacity .25s ease;
    border-radius: 2px;
}
.takeover-cat:hover,
.takeover-cat:active,
.takeover-cat.is-active {
    padding-left: 8px;
}
.takeover-cat:hover .takeover-cat-bar,
.takeover-cat:active .takeover-cat-bar,
.takeover-cat.is-active .takeover-cat-bar {
    opacity: 1;
}
.takeover-cat-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -.015em;
    color: var(--white);
    line-height: 1.1;
}
.takeover-cat-count {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--gold);
    font-feature-settings: "tnum" 1;
}

.takeover-divider {
    height: 1px;
    background: rgba(255,255,255,.18);
    margin: 26px 0 22px;
}

.takeover-quick {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.takeover-quick-link {
    display: inline-block;
    padding: 8px 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    width: max-content;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.takeover-quick-link:hover {
    color: var(--white);
    border-bottom-color: var(--gold);
}

.takeover-sign {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.15);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.takeover-sign-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.7);
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .02em;
    transition: color .2s ease;
}
.takeover-sign-link:hover { color: var(--gold); }
.takeover-sign-link i { color: var(--gold); }

/* =====================================================
   MISC LEGACY UTILITIES — still referenced
   ===================================================== */
.u-red    { color: var(--forest); }
.u-yellow { color: var(--gold); }
.u-mint   { color: var(--forest-3); }
.u-blue   { color: var(--forest-2); }

/* Tablet+ — center on wide screens but keep mobile feel */
@media (min-width: 540px) {
    body { padding: 0; }
}