/* Historical Cave QR Menü — "Taş & Altın" teması (krem zemin, siyah/altın vurgu; mobil öncelikli) */

/* --- Cormorant Garamond (yerel; başlık/serif yüzü) --- */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic; font-weight: 500; font-display: swap;
    src: url('../fonts/cormorant-500i-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic; font-weight: 500; font-display: swap;
    src: url('../fonts/cormorant-500i-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/cormorant-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/cormorant-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/cormorant-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/cormorant-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/cormorant-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/cormorant-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Açık zemin katmanları: krem taş -> beyazımsı kartlar */
    --bg: #F6F1E7;             /* krem taş */
    --bg-2: #FBF7EF;           /* şerit / çubuk zemini */
    --card: #FFFDF8;           /* kart */
    --card-2: #F5EEDF;         /* kart içi ikincil yüzey */
    --img-bg: #FFFFFF;         /* ürün fotoğrafı zemini: fotoğrafların beyaz fonuyla kaynaşsın */

    /* Siyah kimlik yüzeyleri (başlık, hero, ana butonlar — logo burada yaşar) */
    --ink: #201B15;
    --ink-2: #2E2721;          /* siyah yüzey üstü ikincil (dil/sepet hapları) */
    --ink-border: #42392C;
    --on-ink: #F0E8D9;         /* siyah üstü krem yazı */
    --header-bg: #201B15;      /* üst başlık kartı (koyu çapa) */

    --text: #2B2118;           /* koyu kahve-siyah */
    --text-light: #8C7E66;     /* soluk taş */
    --border: #E5DCC9;         /* sıcak açık çizgi */
    --radius: 14px;

    /* Altın vurgular (logodaki #EEBA2B ile aynı aile; açık zeminde okunur koyulukta) */
    --gold: #A9821F;           /* fiyat / ikon / metin altını */
    --gold-2: #C9A227;         /* dolu küçük butonlar (+) */
    --gold-bright: #E9C87A;    /* siyah yüzey üstü altın */
    --gold-deep: #C4A44E;      /* halka / çerçeve */
    --gold-soft: rgba(169, 130, 31, 0.10);
    --on-gold: #201808;        /* altın zemin üstü yazı */
    --primary: var(--gold);    /* eski bileşenlerle uyum */

    --danger: #C0392B;

    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

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

::selection { background: var(--gold-2); color: var(--on-gold); }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    padding-bottom: 80px; /* alt sepet çubuğu için yer */
}

/* --- Sabit üst blok: başlık + menü sekmeleri + kategori şeridi birlikte yapışır --- */
.sticky-head { position: sticky; top: 0; z-index: 100; }

/* --- Üst menü sekmeleri --- */
.menu-tabs {
    display: flex; gap: 8px; overflow-x: auto; white-space: nowrap;
    padding: 10px 16px; background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
}
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tab {
    border: 1px solid var(--border); background: var(--card); color: var(--text-light);
    padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.menu-tab.active { background: var(--ink); color: var(--gold-bright); border-color: var(--ink); }

/* --- Ana kategori (landing) ızgarası --- */
.home-grid {
    padding: 16px; display: grid;
    grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (min-width: 768px)  { .home-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .home-grid { grid-template-columns: repeat(4, 1fr); } }
.home-card {
    position: relative; display: block; text-decoration: none;
    border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1;
    box-shadow: 0 4px 16px rgba(60,45,20,0.12); background: var(--card);
    border: 1px solid var(--border);
    transition: transform 0.12s;
}
.home-card:active { transform: scale(0.97); }
.home-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-card-ph {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 54px; background: linear-gradient(135deg, var(--card-2), var(--bg));
}
.home-card-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 12px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
}
.home-card-name {
    color: #fff; font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

/* Geri butonu + başlık bloğu (ürün sayfası üst barı) */
.back-link {
    color: var(--gold-bright); text-decoration: none; font-size: 26px; line-height: 1;
    flex-shrink: 0; width: 36px; display: flex; align-items: center;
}
.header-titles { flex: 1; min-width: 0; margin: 0 4px; }
.header-titles .header-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Üst başlık (koyu kimlik şeridi) --- */
.top-header {
    background: linear-gradient(160deg, #2A231B, var(--ink));
    color: var(--on-ink);
    padding: 16px 20px;
    border-bottom: 1px solid var(--gold-deep);
}
.header-row { display: flex; align-items: center; justify-content: space-between; }
.header-title { font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: 0.4px; }
.header-sub { font-size: 13px; color: #B7A98E; }
.header-cart {
    position: relative; color: var(--gold-bright); text-decoration: none;
    font-size: 22px; background: rgba(233,200,122,0.12);
    border: 1px solid rgba(233,200,122,0.35);
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.header-cart .badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--gold-2); color: var(--on-gold); font-size: 12px; font-weight: 800;
    min-width: 20px; height: 20px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-select {
    background: var(--ink-2); color: var(--on-ink); border: 1px solid var(--ink-border);
    border-radius: 999px; padding: 8px 10px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.lang-select option { color: #000; }

/* --- Arama kutusu --- */
.search-bar { padding: 8px 16px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
#searchInput {
    width: 100%; border: 1px solid var(--border); border-radius: 999px;
    background: #fff; color: var(--text);
    padding: 10px 16px; font-size: 14px; outline: none; -webkit-appearance: none;
}
#searchInput::placeholder { color: var(--text-light); }
#searchInput:focus { border-color: var(--gold-2); }

/* --- Kategori filtre çubuğu (sabit, yatay kaydırmalı) --- */
.kategori-strip {
    padding: 12px 16px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}
.kategori-strip::-webkit-scrollbar { display: none; }
.kat-btn {
    border: 1px solid var(--border);
    background: var(--card); color: var(--text-light);
    padding: 8px 16px; margin-right: 8px;
    border-radius: 999px; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.kat-btn.active { background: var(--ink); color: var(--gold-bright); border-color: var(--ink); font-weight: 700; }

/* --- Kategori şeridi: kaydırılabilir olduğunu belli eden oklar + kenar gölgeleri --- */
.kat-strip-wrap { position: relative; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.kat-strip-wrap .kategori-strip { border-bottom: none; }
/* Kenar geçiş gölgeleri: devamı olduğunu sezdirir */
.kat-strip-wrap::before,
.kat-strip-wrap::after {
    content: ""; position: absolute; top: 0; bottom: 1px; width: 38px;
    pointer-events: none; z-index: 2; opacity: 0; transition: opacity .15s ease;
}
.kat-strip-wrap::before { left: 0;  background: linear-gradient(to right, var(--bg-2) 30%, rgba(251,247,239,0)); }
.kat-strip-wrap::after  { right: 0; background: linear-gradient(to left,  var(--bg-2) 30%, rgba(251,247,239,0)); }
.kat-strip-wrap.scrollable:not(.at-start)::before { opacity: 1; }
.kat-strip-wrap.scrollable:not(.at-end)::after   { opacity: 1; }
/* Ok düğmeleri */
.kat-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 30px; height: 30px; padding: 0; border-radius: 50%;
    border: 1px solid var(--gold-deep); background: #fff; color: var(--gold);
    font-size: 19px; font-weight: 800; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(60,45,20,0.18);
}
.kat-arrow[hidden] { display: none; }
.kat-arrow-l { left: 6px; }
.kat-arrow-r { right: 6px; }

/* --- Ürün alanı --- */
.products-area { padding: 16px; }
.kat-section { margin-bottom: 28px; scroll-margin-top: 130px; }
.kat-title {
    font-family: var(--serif); font-size: 23px; font-weight: 600; margin-bottom: 14px;
    color: var(--text); border-left: 3px solid var(--gold-2);
    padding-left: 12px; letter-spacing: 0.3px;
}
.product-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
/* Geniş ekranda sütun sayısı değil kart genişliği sabit (~200-240px):
   ekran büyüdükçe görseller büyümez, sütun sayısı artar */
@media (min-width: 768px) {
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
}

.product-card {
    background: var(--card); border-radius: var(--radius);
    overflow: hidden; box-shadow: 0 2px 10px rgba(60,45,20,0.07);
    border: 1px solid var(--border);
    display: flex; flex-direction: column;
}
.product-img, .product-img-placeholder {
    width: 100%; aspect-ratio: 1 / 1; object-fit: contain;   /* tam görünsün, kırpma yok */
    background: var(--img-bg); display: block;
}
.product-img-placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; background: var(--card-2);
}
.product-body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.product-name { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
/* Ürün açıklaması (ör. mocktail reçetesi) — ad ile fiyat/varyant arasında soluk satır */
.product-desc { font-size: 12.5px; line-height: 1.45; color: var(--text-light); margin: -2px 0 8px; }
/* Boyut/varyant seçim butonları — her biri sepete ayrı eklenir */
.product-variants { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.variant-btn {
    display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--border); background: #FAF4E8;
    border-radius: 10px; padding: 7px 10px; cursor: pointer;
    font-size: 13px; color: var(--text); text-align: left; width: 100%;
    min-height: 48px;   /* tüm boyut butonları eşit yükseklik → + butonları dikey hizalı */
}
.variant-btn:active { transform: scale(0.98); }
.variant-name { flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 1.15; }
/* fiyat + artı tek grup, hep en sağda → + her satırda aynı hizada */
.variant-right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.variant-price {
    color: var(--gold); font-weight: 700; white-space: nowrap;  /* fiyat+₺ aynı satırda */
    min-width: 62px; text-align: right;                          /* sabit genişlik → fiyatlar da hizalı */
}
.variant-plus {
    background: var(--gold-2); color: var(--on-gold); width: 22px; height: 22px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1; flex-shrink: 0;
}
.product-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.product-price { font-weight: 700; color: var(--gold); font-size: 15px; }
.product-add {
    border: none; background: var(--gold-2); color: var(--on-gold);
    width: 34px; height: 34px; border-radius: 50%;
    font-size: 22px; line-height: 1; cursor: pointer;
}
.product-add:active { transform: scale(0.92); }

/* --- Tükendi --- */
.product-card.soldout .product-img { filter: grayscale(1); opacity: 0.6; }
.product-card.soldout .product-name { color: var(--text-light); }
.soldout-badge { background: #FBE7E4; color: #B3352A; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.soldout-text { margin-top: auto; color: var(--text-light); font-size: 13px; font-style: italic; padding: 6px 0; }

/* --- Sonuç yok --- */
.no-results { display: none; text-align: center; padding: 60px 20px; color: var(--text-light); }
.no-results .emoji { font-size: 48px; margin-bottom: 12px; }

/* --- Alt sepet çubuğu --- */
.bottom-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 10px 16px; background: var(--card); border-top: 1px solid var(--border);
    z-index: 99; transition: transform 0.15s;
}
.bottom-bar.pulse { transform: translateY(-2px); }
.bottom-bar-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--ink); color: var(--gold-bright); text-decoration: none;
    padding: 14px; border-radius: 12px; font-weight: 800; font-size: 15px;
}
.bottom-bar-count { background: rgba(233,200,122,0.16); padding: 2px 10px; border-radius: 999px; font-size: 13px; }

/* ===== SEPET SAYFASI ===== */
.back-link { color: var(--gold-bright); text-decoration: none; font-size: 22px; }
.cart-wrap { padding: 16px; max-width: 680px; margin: 0 auto; }
.cart-line {
    background: var(--card); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
    border: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(60,45,20,0.06);
}
.cart-line-info { flex: 1; }
.cart-line-name { font-weight: 600; font-size: 15px; }
.cart-line-price { color: var(--text-light); font-size: 13px; margin-top: 2px; }
.qty-box { display: flex; align-items: center; gap: 10px; }
.qty-btn {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold-deep);
    background: #fff; font-size: 18px; line-height: 1; cursor: pointer; color: var(--gold);
}
.qty-num { min-width: 22px; text-align: center; font-weight: 700; }
.cart-line-total { font-weight: 700; color: var(--gold); min-width: 80px; text-align: right; }
.cart-remove { background: none; border: none; color: var(--danger); font-size: 18px; cursor: pointer; }
.order-note {
    width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 12px;
    background: #fff; color: var(--text);
    font-size: 14px; font-family: inherit; resize: vertical; min-height: 60px; margin-top: 6px;
}
.contact-box { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.contact-title { font-size: 13px; color: var(--text-light); font-weight: 600; }
.contact-promo {
    font-size: 13px; font-weight: 600; line-height: 1.4; color: #7A5E14;
    background: var(--gold-soft); border: 1px solid rgba(169,130,31,0.35);
    border-radius: 12px; padding: 10px 12px;
}
.contact-input {
    width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 12px;
    background: #fff; color: var(--text);
    font-size: 14px; font-family: inherit;
}
.contact-input::placeholder { color: var(--text-light); }
.contact-input:focus { border-color: var(--gold-2); outline: none; }
.cart-empty { text-align: center; padding: 70px 20px; color: var(--text-light); }
.cart-empty .emoji { font-size: 52px; margin-bottom: 12px; }
.bottom-bar.cart { flex-direction: column; gap: 8px; }
.cart-total-row { display: flex; justify-content: space-between; align-items: center; width: 100%; font-weight: 700; font-size: 16px; }
#order-btn {
    width: 100%; border: none; background: var(--ink); color: var(--gold-bright);
    padding: 15px; border-radius: 12px; font-weight: 800; font-size: 16px; cursor: pointer;
}
#order-btn:disabled { opacity: 0.5; }
.order-success { text-align: center; padding: 70px 20px; }
.order-success .emoji { font-size: 64px; margin-bottom: 16px; }
.order-success h2 { font-family: var(--serif); font-size: 26px; color: var(--gold); margin-bottom: 8px; }

/* --- Müşteri sipariş durumu takibi --- */
.order-track {
    margin: 12px 16px 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-shadow: 0 2px 10px rgba(60,45,20,0.06);
}
.order-track .ot-head {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 18px;
    color: var(--gold);
    margin-bottom: 8px;
}
.order-track .ot-order { border-top: 1px solid var(--border); }
.order-track .ot-order:first-of-type { border-top: none; }
.order-track .ot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: inherit;
}
.order-track .ot-id {
    font-size: 13px;
    color: var(--text-light);
    font-weight: 600;
}
.order-track .ot-status {
    display: inline-block;
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.order-track .ot-caret {
    color: var(--text-light);
    font-size: 18px;
    font-weight: 800;
    transition: transform .18s ease;
    flex: none;
}
.order-track .ot-order.open .ot-caret { transform: rotate(90deg); }
.order-track .ot-detail {
    padding: 2px 0 10px;
    border-top: 1px dashed var(--border);
    margin-top: -2px;
}
.order-track .ot-detail[hidden] { display: none; }
.order-track .ot-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 14px;
}
.order-track .ot-item-name { color: var(--text); }
.order-track .ot-item-price { color: var(--text-light); white-space: nowrap; }
.order-track .ot-item.ot-total {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-weight: 800;
    color: var(--gold);
}
.order-track .ot-empty {
    padding: 10px 0 4px;
    color: var(--text-light);
    font-size: 14px;
    text-align: center;
}
/* Panel (sheet) içindeki sipariş listesi: dış kart görünümü yerine düz akış. */
.sheet .order-track {
    margin: 0;
    border: none;
    box-shadow: none;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}

/* ── Ödeme yöntemi alt sayfası (bottom sheet) ── */
.pay-sheet { position: fixed; inset: 0; z-index: 1000; }
.pay-sheet[hidden] { display: none; }
.pay-backdrop {
    position: absolute; inset: 0; background: rgba(32,27,21,0.5);
    opacity: 0; transition: opacity .2s ease;
}
.pay-sheet.open .pay-backdrop { opacity: 1; }
.pay-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--card); border-radius: 20px 20px 0 0;
    padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(32,27,21,0.25);
    transform: translateY(100%); transition: transform .22s ease;
    max-width: 600px; margin: 0 auto;
}
.pay-sheet.open .pay-panel { transform: translateY(0); }
.pay-sheet.busy .pay-panel { pointer-events: none; opacity: .6; }
.pay-handle { width: 40px; height: 4px; border-radius: 999px; background: #D8CDB4; margin: 6px auto 10px; }
.pay-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.pay-title { flex: 1; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 21px; color: var(--gold); }
.pay-back, .pay-close {
    border: none; background: none; cursor: pointer; color: var(--text-light);
    font-size: 15px; font-weight: 600; padding: 4px 6px;
}
.pay-close { font-size: 26px; line-height: 1; }
.pay-sub { text-align: center; color: var(--text-light); font-size: 14px; margin-bottom: 10px; }
.pay-step { display: flex; flex-direction: column; gap: 12px; }
.pay-opt {
    display: flex; align-items: center; gap: 14px; width: 100%; position: relative;
    border: 1.5px solid rgba(169,130,31,0.45); background: #fff; color: var(--text);
    border-radius: 14px; padding: 16px 18px; cursor: pointer;
    font-size: 16px; font-weight: 700; text-align: left;
    transition: background .12s ease, color .12s ease, transform .08s ease, box-shadow .12s ease;
}
.pay-opt:hover { background: #FAF4E6; border-color: var(--gold); }
.pay-opt:active { transform: scale(.97); }
/* Seçilen yöntem net görünsün: dolu renk + onay işareti */
.pay-opt.selected {
    background: var(--ink); color: var(--gold-bright); border-color: var(--ink);
    box-shadow: 0 6px 18px rgba(32,27,21,0.25);
}
.pay-opt.selected::after {
    content: "✓"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    font-size: 20px; font-weight: 800;
}
.pay-opt-ico { font-size: 24px; line-height: 1; }
/* Onay butonu — sipariş yalnızca buna basınca gönderilir */
.pay-confirm {
    width: 100%; margin-top: 6px; border: none; border-radius: 14px;
    background: var(--ink); color: var(--gold-bright); font-size: 16px; font-weight: 800;
    padding: 16px; cursor: pointer; transition: opacity .15s ease, transform .08s ease;
}
.pay-confirm:active { transform: scale(.98); }
.pay-confirm:disabled { opacity: .4; cursor: not-allowed; }

/* ── Hesap İste ── */
/* "Siparişlerim" panelindeki tetik buton */
.bill-cta {
    width: 100%; margin-top: 14px; border: 1px solid rgba(169,130,31,0.4); border-radius: 14px;
    background: var(--gold-soft); color: #8A6A16; font-size: 16px; font-weight: 800;
    padding: 15px; cursor: pointer; transition: transform .08s ease, opacity .15s ease;
}
.bill-cta:active { transform: scale(.98); opacity: .92; }
/* Yöntem butonlarının alt açıklaması (POS getir / telefonla vb.) */
.pay-opt-txt { display: flex; flex-direction: column; gap: 2px; }
.pay-opt-sub { font-size: 12.5px; font-weight: 600; opacity: .72; }
/* Online: "yakında" — soluk dursun ki entegre olmadığı belli olsun */
.pay-opt-soon { border-style: dashed; opacity: .85; }
.bill-note {
    margin-top: 2px; padding: 12px 14px; border-radius: 12px;
    background: var(--gold-soft); border: 1px solid rgba(169,130,31,0.35);
    color: #7A5E14; font-size: 13.5px; font-weight: 600;
    text-align: center;
}
/* Müşteri bildirim baloncuğu */
.bill-toast {
    position: fixed; left: 50%; bottom: 96px;
    transform: translateX(-50%) translateY(16px);
    background: var(--ink); color: var(--on-ink); padding: 12px 18px; border-radius: 12px;
    font-size: 14px; font-weight: 700; max-width: 88vw; text-align: center;
    box-shadow: 0 8px 24px rgba(32,27,21,0.35); z-index: 1300;
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.bill-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.bill-toast.err { background: #B3261E; color: #fff; }

/* ============================================================
   ANASAYFA — "Taş & Altın": krem zemin, beyaz kartlar,
   koyu başlık + kemer desenli koyu hero (kimlik çapası)
   ============================================================ */
.home-page { background: var(--bg); overflow-x: hidden; }
/* Alt navigasyon olan sayfalarda içerik alt çubuk + nav için boşluk bırakır */
.has-nav { padding-bottom: 150px; }

/* --- Üst başlık kartı (koyu; logo burada) --- */
.app-header {
    position: sticky; top: 0; z-index: 30;
    background: var(--header-bg);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 4px 18px rgba(32,27,21,0.28);
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { width: 40px; height: 40px; flex: none; color: var(--gold-bright); }
.brand-logo { max-height: 44px; max-width: 190px; object-fit: contain; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: 3px; color: var(--on-ink); }
.brand-sub  { font-size: 9px; font-weight: 600; letter-spacing: 5px; color: var(--gold-bright); margin-top: 3px; }

.head-actions { display: flex; align-items: center; gap: 10px; }
.lang-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--ink-2); border: 1px solid var(--ink-border); border-radius: 999px;
    padding: 8px 30px 8px 14px; font-size: 14px; font-weight: 700; color: var(--on-ink);
    cursor: pointer; appearance: none; -webkit-appearance: none; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B7A98E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
.lang-pill:focus { border-color: var(--gold-bright); }
.cart-pill {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--ink-2); border: 1px solid rgba(233,200,122,0.35); color: var(--gold-bright);
    text-decoration: none;
}
.cart-pill svg { width: 22px; height: 22px; }
.cart-pill .badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--gold-2); color: var(--on-gold); font-size: 11px; font-weight: 800;
    min-width: 20px; height: 20px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 5px;
    border: 2px solid var(--header-bg);
}

/* --- Hero: koyu kimlik kartı, kemer (mağara kapısı) çizgileriyle --- */
.hero {
    margin: 18px 16px 14px; border-radius: 20px; overflow: hidden;
    background:
        radial-gradient(130% 170% at 88% 10%, rgba(210,169,79,0.14), transparent 55%),
        linear-gradient(150deg, #2A231A, #1B1612);
    border: 1px solid #3E3423;
    color: var(--on-ink); position: relative; min-height: 150px;
    display: flex; align-items: center; padding: 24px 22px;
}
/* Sağda üst üste kemer çizgileri: oyma mağara kapıları */
.hero::after {
    content: ""; position: absolute; right: -14px; bottom: 0; top: 0; width: 250px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='170' viewBox='0 0 250 170' fill='none'%3E%3Cpath d='M40 170 V78 a52 52 0 0 1 104 0 V170' stroke='%23D2A94F' stroke-width='1.5' opacity='.5'/%3E%3Cpath d='M68 170 V92 a36 36 0 0 1 72 0 V170' stroke='%23D2A94F' stroke-width='1.2' opacity='.3'/%3E%3Cpath d='M168 170 V64 a46 46 0 0 1 92 0 V170' stroke='%23D2A94F' stroke-width='1.5' opacity='.38'/%3E%3Cpath d='M190 170 V80 a26 26 0 0 1 52 0 V170' stroke='%23D2A94F' stroke-width='1' opacity='.22'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right bottom;
    pointer-events: none;
}
.hero-text { position: relative; z-index: 2; max-width: 76%; }
/* Altın süs: yıldız + iki yana incelen çizgiler */
.hero-orn {
    display: flex; align-items: center; gap: 10px;
    color: #D2A94F; font-size: 13px; margin-bottom: 10px;
}
.hero-orn::before { content: ""; height: 1px; width: 28px; background: linear-gradient(to left, #6E5626, transparent); }
.hero-orn::after  { content: ""; height: 1px; width: 28px; background: linear-gradient(to right, #6E5626, transparent); }
.hero-tag {
    font-family: var(--serif); font-style: italic;
    font-size: 24px; line-height: 1.3; font-weight: 500;
}

/* --- Hero varyantı: Günün Kokteyli (koyu kart + altın halkalı foto) --- */
.hero-daily { padding: 0; }
.hero-daily-link {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; min-height: 150px; padding: 22px 20px 22px 22px;
    text-decoration: none; color: inherit; position: relative; z-index: 2;
}
.hero-daily .hero-text { max-width: none; flex: 1; min-width: 0; }
.hero-daily .hero-orn { margin-bottom: 8px; }
.hero-kicker {
    font-size: 11px; font-weight: 800; letter-spacing: 3.5px;
    text-transform: uppercase; color: #D2A94F; margin-bottom: 6px;
}
.hero-title {
    font-family: var(--serif); font-size: 26px; line-height: 1.15;
    font-weight: 600; color: var(--on-ink);
    overflow-wrap: break-word;
}
.hero-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.hero-price {
    font-size: 15px; font-weight: 800; color: var(--gold-bright);
    padding: 4px 12px; border-radius: 999px;
    background: rgba(210,169,79,0.14); border: 1px solid rgba(210,169,79,0.4);
}
.hero-cta {
    font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
    color: #CBB07A; border-bottom: 1px solid rgba(203,176,122,0.45);
    padding-bottom: 1px;
}
.hero-daily-link:active .hero-cta { color: var(--gold-bright); }
/* Foto: beyaz zeminli ürün karesi, çift altın halkalı yuvarlak çerçevede */
.hero-photo {
    flex: none; width: 106px; height: 106px; border-radius: 50%;
    background: #fff; overflow: hidden;
    border: 2px solid #D2A94F;
    box-shadow: 0 0 0 5px rgba(210,169,79,0.16), 0 8px 22px rgba(0,0,0,0.4);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kemer çizgileri fotonun arkasında sönük kalsın */
.hero-daily::after { opacity: 0.5; }
/* Çok dar ekranlar: foto küçülür, başlık bir tık iner */
@media (max-width: 360px) {
    .hero-photo { width: 88px; height: 88px; }
    .hero-title { font-size: 22px; }
}

/* --- Kategori ızgarası (beyaz kartlar, altın halka ikonlar) --- */
.cat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    padding: 4px 16px 8px;
}
.cat-card {
    position: relative; background: var(--card); border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(60,45,20,0.08);
    padding: 16px 14px 40px; text-decoration: none; color: var(--text);
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    min-height: 150px;
    transition: transform .12s ease, border-color .12s ease;
}
.cat-card:active { transform: scale(.98); border-color: var(--gold-deep); }
/* Tek sayıda kartta sonuncusu yalnız kalmasın: tam genişlik, içerik ortalı */
.cat-card:last-child:nth-child(odd) { grid-column: 1 / -1; align-items: center; }
.cat-card:last-child:nth-child(odd) .cat-titles { text-align: center; }
/* Tüm kategoriler tek dil: altın halka içinde altın çizgi ikon */
.cat-ic {
    width: 56px; height: 56px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--gold-soft);
    border: 1px solid rgba(169, 130, 31, 0.4);
}
.cat-ic svg { width: 28px; height: 28px; color: var(--gold); }
/* Kapak fotoğraflı ana kategori: altın halka içinde yuvarlak foto */
.cat-ic-photo { width: 64px; height: 64px; overflow: hidden; background: #fff; }
.cat-ic-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-titles { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.cat-name { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.15; }
.cat-sub  { display: block; font-size: 12.5px; color: var(--text-light); margin-top: 3px; }
.cat-go {
    position: absolute; right: 14px; bottom: 14px;
    width: 30px; height: 30px; border-radius: 50%;
    background: transparent; border: 1px solid rgba(169,130,31,0.5); color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 800;
}

/* --- Alt sepet çubuğu (siyah pill + altın yazı, nav'ın üstünde) --- */
.has-nav .bottom-bar { bottom: calc(72px + env(safe-area-inset-bottom)); }
.has-nav .bottom-bar:not(.cart) {
    left: 14px; right: 14px;
    background: transparent; border: none; padding: 0; box-shadow: none;
}
.has-nav .bottom-bar:not(.cart) .bottom-bar-btn {
    background: var(--ink); color: var(--gold-bright); border-radius: 999px;
    box-shadow: 0 8px 22px rgba(32,27,21,0.35);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 18px; font-weight: 800; font-size: 15px; width: 100%;
}
.has-nav .bottom-bar:not(.cart) .bottom-bar-btn svg { width: 20px; height: 20px; }
.has-nav .bottom-bar:not(.cart) .bottom-bar-count {
    background: rgba(233,200,122,0.16); border-radius: 999px;
    padding: 3px 11px; font-size: 13px; font-weight: 700;
}

/* --- Alt navigasyon (4 sekme) --- */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: var(--card); border-top: 1px solid var(--border);
    display: flex; justify-content: space-around; align-items: stretch;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; color: var(--text-light);
    font-size: 11px; font-weight: 600; background: none; border: none; cursor: pointer;
    padding: 4px 0;
}
.nav-item svg { width: 23px; height: 23px; }
.nav-item.on { color: var(--gold); }

/* --- Profil paneli (basit alt sayfa) --- */
/* z-index, yüzen alt sepet çubuğunun (.bottom-bar = 99) ve alt navigasyonun
   üstünde olmalı; yoksa panel açıkken sepet çubuğu içeriğin üstüne biner. */
.sheet { position: fixed; inset: 0; z-index: 1100; display: none; }
.sheet.open { display: block; }
.sheet-bg { position: absolute; inset: 0; background: rgba(32,27,21,0.5); }
.sheet-card {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--card); border-radius: 22px 22px 0 0;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
    max-width: 600px; margin: 0 auto;
}
.sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: #D8CDB4; margin: 6px auto 14px; }
.sheet-h { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--gold); margin-bottom: 14px; text-align: center; }
.sheet-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.sheet-row:last-child { border-bottom: none; }
.sheet-row .k { color: var(--text-light); }
.sheet-row .v { font-weight: 700; }