/* ==========================================================================
   Lumis Coffee — QR dijital menü
   Apple tarzı: yumuşak yüzeyler, saç teli çizgiler, buzlu cam, yay animasyonu
   ========================================================================== */

/* ---------- Tasarım belirteçleri (açık tema) ---------- */
:root {
    --accent: #c8873f;

    --bg:            #faf8f5;
    --bg-elevated:   #ffffff;
    --surface:       #ffffff;
    --surface-sunk:  #f2efe9;
    --surface-glass: rgba(250, 248, 245, 0.72);

    --text:          #1c1c1e;
    --text-2:        #55555a;
    --text-3:        #8a8a8f;

    --line:          rgba(0, 0, 0, 0.075);
    --line-strong:   rgba(0, 0, 0, 0.14);

    --shadow-sm: 0 1px 2px rgba(28, 24, 18, 0.05);
    --shadow-md: 0 2px 6px rgba(28, 24, 18, 0.05), 0 8px 24px rgba(28, 24, 18, 0.045);
    --shadow-lg: 0 4px 12px rgba(28, 24, 18, 0.07), 0 18px 48px rgba(28, 24, 18, 0.08);

    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;

    --pad-x: 1.125rem;
    --maxw:  46rem;

    /* ---- Güvenli alan (safe area) ----
       iPhone X ve sonrası: çentik / Dynamic Island / home göstergesi
       Android: jest çubuğu ve delikli ekranlar
       Tarayıcı desteklemiyorsa 0px'e düşer. */
    --sa-t: env(safe-area-inset-top, 0px);
    --sa-r: env(safe-area-inset-right, 0px);
    --sa-b: env(safe-area-inset-bottom, 0px);
    --sa-l: env(safe-area-inset-left, 0px);

    /* Kenar boşluğu: normalde 1rem, çentik varsa çentik kadar */
    --gutter:   1rem;
    --gutter-l: max(1rem, var(--sa-l));
    --gutter-r: max(1rem, var(--sa-r));

    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

    --font: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter",
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter",
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Koyu tema ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:            #000000;
        --bg-elevated:   #1c1c1e;
        --surface:       #16161a;
        --surface-sunk:  #0d0d0f;
        --surface-glass: rgba(12, 12, 14, 0.72);

        --text:          #f5f5f7;
        --text-2:        #a8a8ae;
        --text-3:        #6e6e75;

        --line:          rgba(255, 255, 255, 0.085);
        --line-strong:   rgba(255, 255, 255, 0.16);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    }
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* display:grid / flex tanımları HTML'in hidden niteliğini ezmesin */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Yapışkan çubuk + üst güvenli alan kadar kaydırma payı */
    scroll-padding-top: calc(5.5rem + var(--sa-t));
    /* Çentik bölgesi de sayfa rengiyle dolsun */
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh; /* Android adres çubuğu açılıp kapanırken zıplamayı önler */
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

img { max-width: 100%; height: auto; display: block; }

button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    color: #fff;
    border-radius: 0 0 var(--r-md) 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

.page {
    max-width: var(--maxw);
    margin: 0 auto;
    /* Yatay çentik (iPhone yan modda) sayfayı kesmesin */
    padding-left:  var(--gutter-l);
    padding-right: var(--gutter-r);
    padding-bottom: var(--sa-b);
}

/* ==========================================================================
   Başlık (hero)
   ========================================================================== */
.hero {
    position: relative;
    /* Üst güvenli alan: ana ekrana eklenip tam ekran açıldığında çentiğin altına iner */
    padding-top:    calc(clamp(2.75rem, 9vw, 4.5rem) + var(--sa-t));
    padding-bottom: clamp(1.5rem, 4vw, 2.25rem);
    text-align: center;
    isolation: isolate;
}

.hero__glow {
    position: absolute;
    inset: -30% -40% auto;
    height: 22rem;
    z-index: -1;
    background:
        radial-gradient(48% 52% at 50% 38%,
            color-mix(in srgb, var(--accent) 24%, transparent) 0%,
            transparent 72%);
    filter: blur(28px);
    pointer-events: none;
}

.hero__mark {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.15rem;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: 1.125rem;
    box-shadow: var(--shadow-md);
}
.hero__mark svg { width: 1.85rem; height: 1.85rem; }

.hero__title {
    font-size: clamp(2.125rem, 8.5vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -0.032em;
    font-weight: 700;
}

.hero__tagline {
    margin-top: 0.6rem;
    color: var(--text-2);
    font-size: clamp(0.9375rem, 3.6vw, 1.0625rem);
    letter-spacing: -0.008em;
}

.hero__meta {
    margin-top: 1.35rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-2);
    box-shadow: var(--shadow-sm);
}
.pill svg { width: 0.875rem; height: 0.875rem; flex: none; }

.pill--link {
    color: var(--accent);
    transition: transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease-spring);
}
.pill--link:active { transform: scale(0.96); }

/* ---------- Duyuru şeridi ---------- */
.notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 0.5px solid color-mix(in srgb, var(--accent) 26%, transparent);
    border-radius: var(--r-md);
    font-size: 0.875rem;
    color: var(--text);
}
.notice svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.15rem; color: var(--accent); }

/* ==========================================================================
   Yapışkan kategori çubuğu
   ========================================================================== */
.catbar {
    position: sticky;
    top: 0;
    z-index: 30;
    /* Kenardan kenara uzansın: sayfa boşluğunu geri al */
    margin-left:  calc(-1 * var(--gutter-l));
    margin-right: calc(-1 * var(--gutter-r));
    /* Çentiğin altında kalmasın */
    padding-top:    calc(0.625rem + var(--sa-t));
    padding-bottom: 0.625rem;
    background: var(--surface-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid transparent;
    transition: border-color 0.3s ease;
}
.catbar.is-stuck { border-bottom-color: var(--line); }

.catbar__track {
    display: flex;
    gap: 0.4rem;
    padding-left:  var(--gutter-l);
    padding-right: var(--gutter-r);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
}
.catbar__track::-webkit-scrollbar { display: none; }

.chip-nav {
    flex: none;
    scroll-snap-align: center;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4375rem 0.875rem;
    border-radius: 999px;
    background: var(--surface);
    border: 0.5px solid var(--line);
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--text-2);
    white-space: nowrap;
    transition:
        background-color 0.32s var(--ease-spring),
        color 0.32s var(--ease-spring),
        transform 0.32s var(--ease-spring),
        border-color 0.32s var(--ease-spring);
}
.chip-nav__icon { font-size: 0.9375rem; line-height: 1; }
.chip-nav:active { transform: scale(0.94); }

.chip-nav.is-active {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}
@media (prefers-color-scheme: dark) {
    .chip-nav.is-active { background: var(--text); color: #000; }
}

/* ==========================================================================
   Arama
   ========================================================================== */
.searchwrap { padding: 0.875rem 0 0.25rem; }

.search {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--surface-sunk);
    border: 0.5px solid var(--line);
    border-radius: var(--r-md);
    transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.search:focus-within {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.search__icon {
    width: 1rem;
    height: 1rem;
    margin-left: 0.875rem;
    color: var(--text-3);
    flex: none;
}

.search__input {
    flex: 1;
    min-width: 0;
    padding: 0.6875rem 0.75rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 1rem; /* iOS'ta odaklanınca yakınlaştırmayı engeller */
    color: var(--text);
    letter-spacing: -0.01em;
}
.search__input::placeholder { color: var(--text-3); }
.search__input:focus { outline: none; }
.search__input::-webkit-search-cancel-button { display: none; }

.search__clear {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.625rem;
    border-radius: 50%;
    background: var(--line-strong);
    color: var(--bg);
    flex: none;
}
.search__clear svg { width: 0.75rem; height: 0.75rem; }

.search__status {
    margin-top: 0.5rem;
    padding-left: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-3);
}

/* ==========================================================================
   Kategori bölümleri
   ========================================================================== */
.content { padding-bottom: 1rem; }

.cat { padding-top: clamp(1.75rem, 5vw, 2.5rem); }
.cat[hidden] { display: none; }

.cat__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0.25rem 0.125rem;
}

.cat__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(1.375rem, 5vw, 1.75rem);
    letter-spacing: -0.024em;
    font-weight: 700;
}
.cat__icon { font-size: 1.15em; line-height: 1; }

.cat__count {
    flex: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.cat__desc {
    padding: 0.25rem 0.25rem 0;
    color: var(--text-2);
    font-size: 0.875rem;
    letter-spacing: -0.006em;
}

/* ---------- Paylaşılan boy başlığı (Küçük / Orta / Büyük) ---------- */
.sizehead {
    display: flex;
    justify-content: flex-end;
    padding: 0.875rem var(--pad-x) 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}
.sizehead span {
    width: 3.25rem;
    text-align: right;
}

/* ---------- Ürün kartı ---------- */
.card {
    margin-top: 0.625rem;
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.sizehead + .card { margin-top: 0; }

.item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.8125rem var(--pad-x);
    position: relative;
}
.item[hidden] { display: none; }

/* Saç teli ayırıcı — son öğede yok */
.item + .item::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--pad-x);
    right: var(--pad-x);
    height: 0.5px;
    background: var(--line);
}
.item--media + .item::before,
.item + .item--media::before { left: calc(var(--pad-x) + 3.5rem + 0.875rem); }

.item__img {
    width: 3.5rem;
    height: 3.5rem;
    flex: none;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--surface-sunk);
}

.item__body { flex: 1; min-width: 0; }

.item__name {
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: -0.012em;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.item__desc {
    margin-top: 0.1875rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-2);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: color-mix(in srgb, var(--accent) 88%, var(--text));
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.badge--star {
    background: none;
    color: var(--accent);
    font-size: 0.8125rem;
    padding: 0;
}

/* ---------- Fiyatlar ---------- */
.item__price { flex: none; }

.price {
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.014em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.item__sizes {
    flex: none;
    display: flex;
    justify-content: flex-end;
    gap: 0;
}

/* Sütunlu düzen: her boy sabit genişlikte, .sizehead ile birebir hizalı */
.item__sizes--aligned .size { width: 3.25rem; }

/* Tek fiyatlı ürün sütunların tamamına yayılır, sağa yaslanır */
.item__sizes--single { align-items: center; }

.size {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    padding-left: 0.5rem;
}

/* O boyu olmayan ürün: hizayı bozmadan tire */
.size--empty { opacity: 1; }
.size__dash {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--text-3);
    opacity: 0.45;
}

/* Yalnızca ekran okuyucular için */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.size__label {
    font-size: 0.625rem;
    font-weight: 550;
    letter-spacing: 0.015em;
    color: var(--text-3);
    white-space: nowrap;
}

.size__price {
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.014em;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Boş durumlar
   ========================================================================== */
.empty, .noresult {
    padding: clamp(3rem, 12vw, 5rem) 1.5rem;
    text-align: center;
}
.empty__icon { font-size: 3rem; margin-bottom: 0.75rem; }

.noresult__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.875rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-sunk);
    color: var(--text-3);
}
.noresult__icon svg { width: 1.4rem; height: 1.4rem; }

.empty h2, .noresult h3 {
    font-size: 1.125rem;
    letter-spacing: -0.018em;
    margin-bottom: 0.375rem;
}
.empty p, .noresult p { color: var(--text-2); font-size: 0.875rem; }

/* ==========================================================================
   Alt bilgi
   ========================================================================== */
.foot {
    margin-top: clamp(2.5rem, 8vw, 4rem);
    padding: clamp(1.75rem, 6vw, 2.5rem) 0.5rem
             calc(2.5rem + var(--sa-b)); /* home göstergesi / jest çubuğu payı */
    border-top: 0.5px solid var(--line);
    text-align: center;
}

.foot__about {
    max-width: 30rem;
    margin: 0 auto 1.25rem;
    color: var(--text-2);
    font-size: 0.875rem;
    line-height: 1.6;
}

.wifi {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 0.5px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    text-align: left;
}
.wifi svg { width: 1.375rem; height: 1.375rem; color: var(--accent); flex: none; }
.wifi__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
}
.wifi strong { font-size: 0.9375rem; font-weight: 600; }

.wifi__copy {
    display: block;
    margin-top: 0.125rem;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 550;
}
.wifi__copy.is-copied { color: #34c759; }

.foot__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    font-weight: 550;
}
.foot__links a { color: var(--accent); }

.foot__note  { color: var(--text-3); font-size: 0.75rem; }
.foot__brand {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* ==========================================================================
   Başa dön
   ========================================================================== */
.totop {
    position: fixed;
    /* Sağ çentik + geniş ekranda içeriğin dışına taşma payı */
    right: max(calc(1rem + var(--sa-r)), calc(50vw - var(--maxw) / 2 - 3.5rem));
    /* Home göstergesinin / Android jest çubuğunun üstünde kalsın */
    bottom: calc(1.25rem + var(--sa-b));
    z-index: 40;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--surface-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 0.5px solid var(--line);
    box-shadow: var(--shadow-lg);
    color: var(--text);
    opacity: 0;
    transform: translateY(0.5rem) scale(0.9);
    transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-spring);
}
.totop svg { width: 1.125rem; height: 1.125rem; }
.totop.is-visible { opacity: 1; transform: none; }
.totop:active { transform: scale(0.9); }

/* ==========================================================================
   Giriş animasyonu
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .cat {
        animation: rise 0.6s var(--ease-out) both;
        animation-timeline: auto;
    }
    .cat:nth-of-type(1) { animation-delay: 0.02s; }
    .cat:nth-of-type(2) { animation-delay: 0.06s; }
    .cat:nth-of-type(3) { animation-delay: 0.1s; }

    @keyframes rise {
        from { opacity: 0; transform: translateY(0.75rem); }
        to   { opacity: 1; transform: none; }
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Geniş ekran ince ayarları
   ========================================================================== */
@media (min-width: 40rem) {
    :root { --pad-x: 1.375rem; }

    .item { padding: 0.9375rem var(--pad-x); }
    .item__name { font-size: 1rem; }
    .price, .size__price { font-size: 1rem; }
    .sizehead span, .item__sizes--aligned .size { width: 3.75rem; }
}

/* ==========================================================================
   Yazdırma
   ========================================================================== */
@media print {
    .catbar, .searchwrap, .totop, .skip-link, .hero__glow { display: none !important; }

    body { background: #fff; color: #000; }
    .page { max-width: none; }
    .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
    .cat { break-inside: avoid; padding-top: 1.25rem; }
}