/* Müşteri menüsü — geniş ekran (≥ 768 px) atmosferi. Telefon sütunu (480 px) ortada kalır; ayrı bir masaüstü menüsü
   yoktur. Sütunun çevresi tasarımın atmosferini taşır:
     Vitrin  — o an vitrindeki ürünün çok bulanık, karartılmış fotoğrafı (fotoğraf yoksa türünün renginde degrade)
     Gökyüzü — o anın gökyüzü degradesi, ölçekli güneş/ay, bulut/yağış (html[data-saat][data-hava])
     Gece    — derin zemin, sütunun arkasında mum ışığı halesi, uzakta iki mum
     Pazar   — üstte çizgili tente, altta renkli kasalı tezgâh
   ≥ 1100 px: sütunun yanında işletmenin adı, logosu, adresi ve "Bu menüyü telefonda aç" QR'ı (.yan-bilgi).
   Atmosfer öğeleri menu/genis.js'in kurduğu süslerdir (aria-hidden, odaklanılamaz); bu dosya <link media> ile yalnız
   geniş ekranda uygulanır, kurallar ayrıca medya sorgusu içindedir. Telefon düzenine (< 768 px) hiçbir etkisi yoktur.
   /tasarimlar çerçevesi (html.cerceve) dışarıda: atmosfer kurulmaz, sütun kuralları :not(.cerceve) ile sınırlı.
   Hareket yalnız prefers-reduced-motion: no-preference altında; aksi halde atmosfer durağandır. */

@media (min-width: 768px) {
  /* ---------- Sütun: hafif gölgeli "cihaz yüzeyi" (çerçeve/çentik yok) ---------- */
  html:not(.cerceve) body { background: #EFECE8; }
  html:not(.cerceve) .uygulama {
    position: relative; /* atmosferin (z-index 0, önce gelir) üstünde */
    margin-block: 28px; border-radius: 30px; overflow: clip;
    min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px);
    box-shadow: 0 0 0 1px rgba(20, 17, 14, .06), 0 44px 110px -40px rgba(20, 17, 14, .6), 0 16px 40px -26px rgba(20, 17, 14, .4);
  }
  html:not(.cerceve) .oneri-ekrani { min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); }
  html:not(.cerceve) .fab-kap { bottom: calc(44px + env(safe-area-inset-bottom)); }

  /* ---------- Atmosfer katmanı (menu/genis.js) ---------- */
  .atmosfer {
    display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    background: #EFECE8;
  }
  .atmosfer > * { position: absolute; display: none; }

  /* =========================== Gökyüzü =========================== */
  html:not(.cerceve)[data-tema="gokyuzu"] body { background: linear-gradient(180deg, var(--gok-1) 0%, var(--gok-2) 58%, var(--gok-3) 100%); } /* atmosfer gelene dek */
  html[data-tema="gokyuzu"] .atmosfer {
    --gunes: clamp(150px, 21vmin, 270px);
    --kenar: calc(25vw - 120px); /* sütunun yanındaki boşluğun ortası (kenardan) */
    background: linear-gradient(180deg, var(--gok-1) 0%, var(--gok-2) 58%, var(--gok-3) 100%);
  }
  /* güneş: sütunun panelden uzak yanında (yazı yönüne göre); günün saatine göre yükseklik */
  html[data-tema="gokyuzu"] .atm-isik {
    display: block; top: 9vh; inset-inline-end: calc(var(--kenar) - var(--gunes) / 2); width: var(--gunes); height: var(--gunes); border-radius: 50%;
    background: radial-gradient(circle at 38% 36%, #FFFFFF 0%, var(--gok-isik) 46%);
    box-shadow: 0 0 0 calc(var(--gunes) * .11) var(--gok-hale), 0 0 calc(var(--gunes) * .9) calc(var(--gunes) * .3) var(--gok-hale);
  }
  html[data-tema="gokyuzu"][data-saat="sabah"] .atm-isik { top: 40vh; }
  html[data-tema="gokyuzu"][data-saat="aksam"] .atm-isik { top: 56vh; --gunes: clamp(180px, 26vmin, 320px); }
  /* gece: hilal + yıldızlar */
  html[data-tema="gokyuzu"][data-saat="gece"] .atm-isik {
    --gunes: clamp(96px, 12vmin, 150px);
    top: 12vh; background: transparent;
    box-shadow: inset calc(var(--gunes) * -.26) calc(var(--gunes) * .13) 0 0 var(--gok-isik), 0 0 calc(var(--gunes) * .9) calc(var(--gunes) * .18) var(--gok-hale);
  }
  html[data-tema="gokyuzu"][data-saat="gece"] .atm-ek-1 {
    display: block; inset: 0; opacity: .9;
    background-image:
      radial-gradient(2px 2px at 8% 14%, #FFFFFF 50%, transparent 52%), radial-gradient(1.4px 1.4px at 22% 34%, #FFFFFF 50%, transparent 52%),
      radial-gradient(1.2px 1.2px at 36% 9%, #FFFFFF 50%, transparent 52%), radial-gradient(2.2px 2.2px at 51% 27%, #FFFFFF 50%, transparent 52%),
      radial-gradient(1px 1px at 63% 46%, #FFFFFF 50%, transparent 52%), radial-gradient(1.6px 1.6px at 77% 18%, #FFFFFF 50%, transparent 52%),
      radial-gradient(1.2px 1.2px at 89% 38%, #FFFFFF 50%, transparent 52%), radial-gradient(1.8px 1.8px at 14% 58%, #FFFFFF 50%, transparent 52%),
      radial-gradient(1px 1px at 42% 66%, #FFFFFF 50%, transparent 52%), radial-gradient(1.4px 1.4px at 94% 72%, #FFFFFF 50%, transparent 52%);
    background-size: 560px 420px;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .7));
  }
  /* ufuk: alt kenarda hafif pus (akşam sıcak) */
  html[data-tema="gokyuzu"] .atm-ek-2 {
    display: block; inset: auto 0 0; height: 32vh;
    background: linear-gradient(to top, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0));
  }
  html[data-tema="gokyuzu"][data-saat="aksam"] .atm-ek-2 { background: linear-gradient(to top, rgba(255, 170, 110, .34), rgba(255, 170, 110, 0)); }
  html[data-tema="gokyuzu"][data-saat="gece"] .atm-ek-2 { background: linear-gradient(to top, rgba(120, 120, 210, .18), rgba(120, 120, 210, 0)); }
  /* hava: bulut, yağmur, kar, sis */
  html[data-tema="gokyuzu"][data-hava="bulutlu"] .atm-bulut, html[data-tema="gokyuzu"][data-hava="yagmur"] .atm-bulut,
  html[data-tema="gokyuzu"][data-hava="kar"] .atm-bulut, html[data-tema="gokyuzu"][data-hava="sis"] .atm-bulut {
    display: block; border-radius: 999px; background: rgba(255, 255, 255, .78); filter: blur(30px);
  }
  html[data-tema="gokyuzu"] .atm-bulut.b1 { top: 15vh; inset-inline-end: -8vw; width: 46vw; height: 17vh; }
  html[data-tema="gokyuzu"] .atm-bulut.b2 { top: 31vh; inset-inline-start: -10vw; width: 40vw; height: 13vh; opacity: .7; }
  html[data-tema="gokyuzu"][data-saat="aksam"] .atm-bulut, html[data-tema="gokyuzu"][data-saat="gece"] .atm-bulut { background: rgba(230, 225, 255, .2); }
  html[data-tema="gokyuzu"][data-hava="yagmur"] .atm-isik, html[data-tema="gokyuzu"][data-hava="sis"] .atm-isik { opacity: .45; }
  /* yağış deseni ekrandan bir döngü adımı büyük sözde öğede; hareket transform ile (bileşikleştirilir, her kare boyanmaz) */
  html[data-tema="gokyuzu"][data-hava="yagmur"] .atm-yagis, html[data-tema="gokyuzu"][data-hava="kar"] .atm-yagis { display: block; inset: 0; overflow: hidden; }
  html[data-tema="gokyuzu"][data-hava="yagmur"] .atm-yagis { opacity: .4; }
  html[data-tema="gokyuzu"][data-hava="yagmur"] .atm-yagis::before, html[data-tema="gokyuzu"][data-hava="kar"] .atm-yagis::before {
    content: ""; position: absolute;
  }
  html[data-tema="gokyuzu"][data-hava="yagmur"] .atm-yagis::before {
    inset: -120px -22px 0 0;
    background-image: repeating-linear-gradient(104deg, transparent 0 22px, rgba(255, 255, 255, .55) 22px 23px, transparent 23px 40px);
    background-size: 100% 120px;
  }
  html[data-tema="gokyuzu"][data-hava="kar"] .atm-yagis::before {
    inset: -220px 0 0 -40px;
    background-image: radial-gradient(3px 3px at 20% 20%, #FFFFFF 50%, transparent 55%), radial-gradient(2.4px 2.4px at 60% 50%, #FFFFFF 50%, transparent 55%),
      radial-gradient(3.2px 3.2px at 85% 15%, #FFFFFF 50%, transparent 55%), radial-gradient(2.2px 2.2px at 40% 80%, #FFFFFF 50%, transparent 55%);
    background-size: 220px 220px;
  }
  html[data-tema="gokyuzu"][data-hava="sis"] .atm-yagis { display: block; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .55)); }

  /* =========================== Gece =========================== */
  html:not(.cerceve)[data-tema="gece"] body { background: var(--g-derin); }
  html:not(.cerceve)[data-tema="gece"] .uygulama {
    box-shadow: 0 0 0 1px rgba(243, 232, 214, .07), 0 44px 120px -36px rgba(0, 0, 0, .95), 0 0 110px -30px rgba(var(--isik), .32);
  }
  html[data-tema="gece"] .atmosfer {
    background:
      radial-gradient(120% 80% at 50% 115%, rgba(var(--isik), .10) 0%, rgba(var(--isik), 0) 60%),
      var(--g-derin);
  }
  /* sütunun arkasındaki hale: masadaki mumun ışığı */
  html[data-tema="gece"] .atm-isik {
    display: block; left: 50%; top: 50%; width: min(1500px, 125vw); height: min(1300px, 150vh); margin: max(-650px, -75vh) 0 0 max(-750px, -62.5vw);
    background: radial-gradient(closest-side, rgba(var(--isik), .26) 0%, rgba(var(--isik), .11) 38%, rgba(var(--isik), .035) 66%, rgba(var(--isik), 0) 100%);
  }
  /* uzaktaki iki mum (bulanık ışık + küçük alev); panelin altında kalır */
  html[data-tema="gece"] .atm-ek {
    display: block; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 226, 170, .95) 0 3px, rgba(255, 196, 120, .55) 5px, rgba(var(--isik), .2) 26px, rgba(var(--isik), .06) 70px, rgba(var(--isik), 0) 130px);
  }
  html[data-tema="gece"] .atm-ek-1 { left: calc(25vw - 250px); top: 70vh; }  /* merkez: sütunun yanındaki boşluğun ortası */
  html[data-tema="gece"] .atm-ek-2 { right: calc(25vw - 250px); top: 60vh; transform: scale(.72); }

  /* =========================== Pazar =========================== */
  html:not(.cerceve)[data-tema="pazar"] body { background: #EDE6DC; }
  html:not(.cerceve)[data-tema="pazar"] .uygulama {
    box-shadow: 0 0 0 2px var(--murekkep), 0 40px 90px -40px rgba(28, 23, 20, .55), 14px 18px 0 -2px rgba(28, 23, 20, .12);
  }
  html[data-tema="pazar"] .atmosfer {
    --fisto-g: 20px;
    background: repeating-linear-gradient(90deg, rgba(28, 23, 20, .028) 0 2px, transparent 2px 34px), #EDE6DC;
  }
  /* tente: işletme rengi + beyaz çizgi, fisto kenar, duvara düşen gölge */
  html[data-tema="pazar"] .atm-ek-1 { display: block; inset: 0 0 auto; height: clamp(120px, 18vh, 176px); }
  html[data-tema="pazar"] .atm-ek-1::before, html[data-tema="pazar"] .atm-ek-1::after {
    content: ""; position: absolute; inset: 0;
    -webkit-mask:
      radial-gradient(circle var(--fisto-g) at 50% 0, #000 94%, #0000 100%) bottom / calc(var(--fisto-g) * 2) var(--fisto-g) repeat-x,
      linear-gradient(#000 0 0) top / 100% calc(100% - var(--fisto-g)) no-repeat;
    mask:
      radial-gradient(circle var(--fisto-g) at 50% 0, #000 94%, #0000 100%) bottom / calc(var(--fisto-g) * 2) var(--fisto-g) repeat-x,
      linear-gradient(#000 0 0) top / 100% calc(100% - var(--fisto-g)) no-repeat;
  }
  html[data-tema="pazar"] .atm-ek-1::before {
    z-index: 1;
    background:
      linear-gradient(180deg, transparent calc(100% - var(--fisto-g) - 26px), rgba(0, 0, 0, .2) calc(100% - var(--fisto-g) - 26px) calc(100% - var(--fisto-g) - 22px), rgba(0, 0, 0, .06) calc(100% - var(--fisto-g) - 22px)),
      linear-gradient(180deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, 0) 36%),
      repeating-linear-gradient(90deg, var(--ana) 0 calc(var(--fisto-g) * 2), #FFFFFF calc(var(--fisto-g) * 2) calc(var(--fisto-g) * 4));
  }
  html[data-tema="pazar"] .atm-ek-1::after { background: rgba(28, 23, 20, .16); transform: translateY(9px); }
  /* tezgâh: ahşap kenar + tür renklerinde kasalar (ürün renkleriyle aynı aile) */
  html[data-tema="pazar"] .atm-ek-2 {
    display: block; inset: auto 0 0; height: clamp(110px, 19vh, 190px);
    background:
      linear-gradient(180deg, #8A5A36 0 10px, #6B4427 10px 16px, transparent 16px),
      repeating-linear-gradient(180deg, transparent 0 30px, rgba(0, 0, 0, .14) 30px 33px),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .18)),
      repeating-linear-gradient(90deg,
        #C2410C 0 150px, #5A3A22 150px 160px, #FFC21A 160px 310px, #5A3A22 310px 320px,
        #237A32 320px 470px, #5A3A22 470px 480px, #C2255C 480px 630px, #5A3A22 630px 640px,
        #1D5FD1 640px 790px, #5A3A22 790px 800px);
    box-shadow: 0 -18px 30px -18px rgba(28, 23, 20, .35);
  }

  /* =========================== Vitrin =========================== */
  html:not(.cerceve)[data-tema="vitrin"] body { background: #1B1A19; }
  html:not(.cerceve)[data-tema="vitrin"] .uygulama {
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 50px 120px -40px rgba(0, 0, 0, .85), 0 18px 40px -24px rgba(0, 0, 0, .5);
  }
  html[data-tema="vitrin"] .atmosfer { background: #1B1A19; }
  /* fotoğraf yok: vitrindeki ürünün türünün renginde degrade (.renk-* → --ro/--rk) */
  html[data-tema="vitrin"] .atmosfer[class*="renk-"]:not(.fotolu) {
    background: radial-gradient(90% 90% at 30% 20%, var(--ro) 0%, var(--rk) 70%, #141414 120%);
  }
  html[data-tema="vitrin"] .atm-foto {
    display: block; inset: -10%; width: 120%; height: 120%; max-width: none; object-fit: cover;
    filter: blur(60px) saturate(1.2) brightness(.58); opacity: 0;
  }
  html[data-tema="vitrin"] .atm-foto.yuklu { opacity: 1; }
  html[data-tema="vitrin"] .atm-ek-1 { /* kenar karartma: göz sütunda kalsın */
    display: block; inset: 0;
    background: radial-gradient(70% 90% at 50% 50%, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, .5) 100%), rgba(10, 10, 10, .14);
  }

  /* ---------- Hareket (azaltma tercihinde hiçbiri) ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .atmosfer { animation: atm-gir 700ms ease-out both; }
    html[data-tema="gokyuzu"] .atm-bulut.b1 { animation: atm-suzul 70s ease-in-out infinite alternate; }
    html[data-tema="gokyuzu"] .atm-bulut.b2 { animation: atm-suzul 90s ease-in-out infinite alternate-reverse; }
    html[data-tema="gokyuzu"][data-hava="yagmur"] .atm-yagis::before { animation: atm-yagmur .9s linear infinite; will-change: transform; }
    html[data-tema="gokyuzu"][data-hava="kar"] .atm-yagis::before { animation: atm-kar 14s linear infinite; will-change: transform; }
    html[data-tema="gokyuzu"][data-saat="gece"] .atm-ek-1 { animation: atm-parilti 6s ease-in-out infinite alternate; }
    html[data-tema="gece"] .atm-isik { animation: atm-nefes 7s ease-in-out infinite alternate; }
    html[data-tema="gece"] .atm-ek-1 { animation: atm-titre 3.1s ease-in-out infinite alternate; }
    html[data-tema="gece"] .atm-ek-2 { animation: atm-titre-k 4.3s ease-in-out infinite alternate; }
    html[data-tema="vitrin"] .atm-foto { transition: opacity 700ms ease; }
  }

  /* ---------- ≥ 1100 px: sütunun yanında işletme ve "telefonda aç" QR'ı ---------- */
  .yan-bilgi { display: none; }
}

@media (min-width: 1100px) and (min-height: 520px) {
  .yan-bilgi {
    position: fixed; z-index: 0; top: 50%; transform: translateY(-50%);
    inset-inline-end: calc(50% + 240px + 48px); width: clamp(220px, calc(50vw - 240px - 96px), 280px);
    display: grid; justify-items: start; gap: 12px; padding: 24px 22px 22px; border-radius: 28px;
    background: var(--kart); color: var(--murekkep);
    box-shadow: 0 0 0 1px rgba(20, 17, 14, .06), 0 30px 70px -34px rgba(20, 17, 14, .55);
  }
  .yan-bilgi .logo { width: 56px; height: 56px; border-radius: 16px; }
  .yan-bilgi .logo-harf { font-size: 26px; }
  .yan-ad { max-width: 100%; font-size: 32px; line-height: .98; font-weight: 840; font-stretch: var(--dar); letter-spacing: -.004em; overflow-wrap: anywhere; }
  .yan-adres { font-size: 14.5px; line-height: 1.4; color: var(--tas); overflow-wrap: anywhere; }
  .yan-qr {
    width: 100%; display: grid; justify-items: start; gap: 10px;
    margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--cizgi);
  }
  .yan-qr-kod { display: block; width: 112px; height: 112px; padding: 6px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(20, 17, 14, .1); }
  .yan-qr-kod svg { display: block; width: 100%; height: 100%; fill: #141414; }
  .yan-qr-metin { font-size: 15px; line-height: 1.25; font-weight: 700; }
  .yan-qr-adres { max-width: 100%; font-size: 12.5px; line-height: 1.3; color: var(--tas); overflow-wrap: anywhere; }

  /* tasarıma göre levha */
  html[data-tema="gokyuzu"] .yan-bilgi { background: rgba(255, 255, 255, .94); color: #1C1917; --tas: #57534E; --cizgi: #E9E5E0; }
  html[data-tema="gece"] .yan-bilgi {
    background: var(--g-yuzey); box-shadow: inset 0 0 0 1px var(--pirinc-ince), 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 60px -24px rgba(var(--isik), .35);
  }
  html[data-tema="gece"] .yan-ad { font-size: 30px; line-height: 1.05; font-weight: 260; font-stretch: 125%; letter-spacing: -.016em; }
  html[data-tema="gece"] .yan-qr-kod { background: var(--g-krem); }
  html[data-tema="pazar"] .yan-bilgi { border-radius: 14px; box-shadow: 0 0 0 2px var(--murekkep), 8px 10px 0 rgba(28, 23, 20, .16); }
  html[data-tema="pazar"] .yan-ad { font-weight: 900; font-stretch: 62.5%; font-size: 36px; line-height: .9; }
  html[data-tema="pazar"] .yan-qr { border-top: 2px dashed var(--cizgi); }
  html[data-tema="vitrin"] .yan-bilgi { border-radius: var(--v-kose); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); }
  html[data-tema="vitrin"] .yan-bilgi .logo { border-radius: 50%; }
  html[data-tema="vitrin"] .yan-ad { font-size: 25px; line-height: 1.08; font-weight: 600; font-stretch: var(--v-genis); letter-spacing: -.01em; }
}
@media (min-width: 1100px) and (max-height: 679px) {
  .yan-qr { display: none !important; } /* alçak pencerede yalnız ad + adres */
}

@keyframes atm-gir { from { opacity: 0; } to { opacity: 1; } }
@keyframes atm-suzul { from { transform: translateX(0); } to { transform: translateX(-6vw); } }
@keyframes atm-yagmur { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-22px, 120px, 0); } }
@keyframes atm-kar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(40px, 220px, 0); } }
@keyframes atm-parilti { from { opacity: .95; } to { opacity: .6; } }
@keyframes atm-nefes { from { opacity: 1; transform: none; } to { opacity: .8; transform: scale(1.04); } }
@keyframes atm-titre { 0% { opacity: 1; } 40% { opacity: .82; } 100% { opacity: .94; transform: scale(1.04); } }
@keyframes atm-titre-k { 0% { opacity: .9; transform: scale(.72); } 60% { opacity: .72; transform: scale(.7); } 100% { opacity: .95; transform: scale(.75); } }