/* Lumos Coffee · ortak stil
   Tokenlar, temel, düğmeler, yüzen kapsül header, arama paneli, footer, çekmece, ışık kutusu, girişler.
   Sayfa bölümleri: ana.css. Palet iki ton: kum (mekânın kumu ve kamış tavanı; kum-2 kamışın koyusu) + koyu kahve (ceviz ahşap ve gece).
   Ateş tonu yalnız "açık" noktasında ve seçili durumda. */
:root {
  --kum: #E4D4BC;
  --kum-2: #DDCAAE;
  --kum-acik: #EFE0C2;   /* sayfanın en açık tonu (footer): kumun açığı, aynı sıcaklıkta */
  --kahve: #3C1F14;
  --kahve-2: #4A2C1F;
  --soluk: #553D2F;      /* kum üstünde ikincil metin: kum 6,9:1, kum-2 6,3:1, kum-acik 7,7:1 */
  --soluk-k: #CDBBA2;    /* koyu üstünde ikincil metin (8,0:1) */
  --ates: #C4512D;
  --cizgi: rgba(60, 31, 20, .16);
  --cizgi-k: rgba(228, 212, 188, .18);

  --f-sans: 'General Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'General Sans', 'Helvetica Neue', Arial, sans-serif;
  /* yazı ölçeği: başlık > giriş > gövde > bilgi > etiket (telefonda gövde ve bilgi küçülür).
     gövde: düz metin ve modların olgu satırları. bilgi: kural, saat, ulaşım, detay ve künye satırları; 450, ana renk ya da --soluk.
     etiket: tarih, sayaç birimi, alan adı, kategori, not; 500, --soluk. */
  --fs-giris: clamp(19px, 1.45vw, 21px);
  --fs-govde: 18px;
  --fs-bilgi: 17px;
  --fs-etiket: 15px;

  --kap: 1240px;
  --kenar: clamp(20px, 5vw, 64px);
  --bosluk: clamp(64px, 6.6vw, 100px);   /* ana bölümler arası: 1440’ta ~95, mobilde 64 */
  --bas-ara: clamp(32px, 3.2vw, 44px);   /* bölüm başlığından içeriğine: bölüm boşluğunun yarısı, başlık içeriğiyle durur */
  /* köşe dili: kenardan kenara bantlar ve yarım ekran fotoğraflar köşesiz. Sayfa içindeki her kutu (fotoğraf, kart, panel,
     arama alanı, ışık kutusu karesi, çekmece) --r; kutu içindeki ya da küçük öğe (öneri satırı, küçük kare) --r-kucuk.
     Düğmeler ve kapsül hap (--r-hap), ikon düğmeleri daire. */
  --r: 10px;
  --r-kucuk: 6px;
  --r-hap: 999px;

  /* kapsül: sayfa başında kap genişliğinde ve rozet kapsülden sarkar; kaydırınca --kap-kucuk'e daralır, ortaya yatay logo oturur */
  --kap-kucuk: 1160px;
  --ust-y: 16px;
  --kapsul-h: 68px;
  --kapsul-w: min(var(--kap), 100vw - 2 * var(--kenar));
  --logo: 112px;         /* sarkık rozetin çapı */
  --logo-yatay: 52px;    /* yatay logonun yüksekliği (LUMOS harfleri ~16 px) */
  --ust-pay: 100px;   /* çapalar kapsülün altına kayar (Site.kaydir) */

  /* hareket: gelişler ease-out, yer değiştirenler ease-io */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-hizli: 200ms;
  --t-orta: 480ms;
  --t-yavas: 900ms;
}
html.ust-kucuk { --kapsul-w: min(var(--kap-kucuk), 100vw - 2 * var(--kenar)); }

/* ───────── Temel ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: #B7A68F var(--kum); -webkit-tap-highlight-color: transparent; }
html.lenis { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--kum);
  color: var(--kahve);
  font: 450 var(--fs-govde)/1.55 var(--f-sans);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  overflow-x: clip;
}
img, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
input { font: inherit; color: inherit; caret-color: var(--ates); }
::selection { background: var(--kahve); color: var(--kum); }
.koyu ::selection, .koyu::selection { background: var(--kum); color: var(--kahve); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg .dolu { fill: currentColor; stroke: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 2px solid var(--ates); outline-offset: 3px; }
:where(main [id]) { scroll-margin-top: var(--ust-pay); }
.atla { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--kahve); color: var(--kum); padding: 12px 18px; border-radius: var(--r-hap); }
.atla:focus { top: 12px; }
.kap { width: min(var(--kap), 100% - 2 * var(--kenar)); margin-inline: auto; }
.koyu { background: var(--kahve); color: var(--kum); }
/* Lumos O işareti (logodaki halka + çekirdek + ışınlar, img/lumos-o.svg): rengi currentColor, boyu genişlikten */
.lumos-o {
  display: block; aspect-ratio: 237.49 / 259.01; background: currentColor;
  -webkit-mask: url(img/lumos-o.svg) center / contain no-repeat; mask: url(img/lumos-o.svg) center / contain no-repeat;
}

/* ───────── Yazı ───────── */
/* büyük başlık: normal ağırlık, sıkı aralık (Allpress ölçeği, 64 px tavan) */
.buyuk { font: 500 clamp(38px, 4.4vw, 63px)/1.03 var(--f-sans); letter-spacing: -0.032em; }
.serif { font-family: var(--f-serif); letter-spacing: -0.022em; }
h3 { font: 500 clamp(24px, 2vw, 30px)/1.15 var(--f-sans); letter-spacing: -0.02em; }
.giris { font-size: var(--fs-giris); line-height: 1.5; }
.soluk { color: var(--soluk); }
.koyu .soluk { color: var(--soluk-k); }
.kucuk { font-size: var(--fs-etiket); font-weight: 500; line-height: 1.5; }

/* ───────── Düğmeler ve bağlantılar ───────── */
.dug {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 26px; border-radius: var(--r-hap); border: 1px solid transparent;
  font: 450 17px/1 var(--f-sans); letter-spacing: -0.005em; white-space: nowrap;
  transition: background-color var(--t-hizli) var(--ease-out), color var(--t-hizli) var(--ease-out), border-color var(--t-hizli) var(--ease-out);
}
.dug svg { width: 19px; height: 19px; transition: translate var(--t-orta) var(--ease-out); }
.dug:hover svg:last-child { translate: 4px 0; }
.dug:active { translate: 0 1px; }
.dug-koyu { background: var(--kahve); color: var(--kum); }
.dug-koyu:hover { background: var(--kahve-2); }
.dug-kum { background: var(--kum); color: var(--kahve); }
.dug-kum:hover { background: #EFE5D4; }
.dug-cizgi { border-color: currentColor; }
.dug-cizgi:hover { background: var(--kahve); border-color: var(--kahve); color: var(--kum); }
.koyu .dug-cizgi:hover, .acilis .dug-cizgi:hover { background: var(--kum); border-color: var(--kum); color: var(--kahve); }
.ok-link {
  display: inline-flex; align-items: center; gap: 10px; padding-block: 6px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; text-decoration-color: var(--cizgi);
  transition: text-decoration-color var(--t-hizli) var(--ease-out);
}
.koyu .ok-link { text-decoration-color: var(--cizgi-k); }
.ok-link svg { width: 18px; height: 18px; transition: translate var(--t-orta) var(--ease-out); }
.ok-link:hover { text-decoration-color: currentColor; }
.ok-link:hover svg { translate: 4px 0; }

.ikon-dug {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  transition: background-color var(--t-hizli) var(--ease-out), color var(--t-hizli) var(--ease-out), border-color var(--t-hizli) var(--ease-out), opacity var(--t-hizli) var(--ease-out);
}
.ikon-dug:hover { background: rgba(60, 31, 20, .07); }
.ikon-dug.cizgili { border: 1px solid var(--cizgi); }
.ikon-dug.cizgili:hover { border-color: var(--kahve); background: transparent; }
.ikon-dug:disabled { opacity: .3; cursor: default; }

/* durum (açık/kapalı): [data-durum] / [data-durum-uzun] içinde .durum-nokta + .durum-metin */
.durum-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--ates); flex: none; }
.kapali .durum-nokta { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ───────── Yüzen kapsül header ─────────
   Düz, opak kapsül (cam/bulanıklık yok). Tonu altındaki bölümün tersidir, böylece hiçbir zeminde kaybolmaz (site.js, data-ton
   kapsülün kendi tonu): açık bölümde ceviz zemin + kum yazı, koyu bölümde (açılış, Ateş başı) kum zemin + ceviz yazı; renkler
   480 ms'de birlikte akar. "Yol tarifi" her tonda kapsülün tersi. Üzerine gelme ve seçili bölüm: yazı renginden hafif bir hap zemin. */
.ust {
  --u-zemin: var(--kahve); --u-metin: var(--kum); --u-soluk: var(--soluk-k); --u-dug: var(--kum-acik); --u-dug-metin: var(--kahve);
  --u-golge: inset 0 0 0 1px rgba(228, 212, 188, .1), 0 1px 2px rgba(60, 31, 20, .16), 0 16px 34px -14px rgba(60, 31, 20, .46);
  position: fixed; top: var(--ust-y); left: 50%; z-index: 60; width: var(--kapsul-w); translate: -50% 0;
  transition: width 700ms var(--ease-io);
}
.ust[data-ton="acik"] {
  --u-zemin: var(--kum); --u-metin: var(--kahve); --u-soluk: var(--soluk); --u-dug: var(--kahve); --u-dug-metin: var(--kum-acik);
  --u-golge: inset 0 0 0 1px rgba(60, 31, 20, .1), 0 1px 2px rgba(10, 5, 2, .3), 0 16px 34px -14px rgba(10, 5, 2, .6);
}
.kapsul {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 16px;
  height: var(--kapsul-h); padding: 0 10px; border-radius: var(--r-hap);
  background: var(--u-zemin); color: var(--u-metin); box-shadow: var(--u-golge);
  transition: background-color var(--t-orta) var(--ease-out), color var(--t-orta) var(--ease-out), box-shadow var(--t-orta) var(--ease-out);
}
.kapsul :focus-visible { outline-color: var(--u-metin); outline-offset: 2px; }
.ust-sol, .ust-sag { display: flex; align-items: center; min-width: 0; }
.ust-sag { justify-content: flex-end; gap: 4px; }
.ust-nav { display: flex; gap: 4px; }
/* yazı rengi kapsülden miras gelir ve onunla akar; bu öğelerde yalnız zemin geçişi var (miras renge ikinci geçiş gecikme yapar) */
.ust-nav a, .ust .ikon-dug { transition: background-color var(--t-hizli) var(--ease-out); }
.ust-nav a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: var(--r-hap); font-size: 17px; font-weight: 500; white-space: nowrap; }
.ust-nav a:hover, .durum:hover, .ust .ikon-dug:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.ust-nav a[aria-current] { background: color-mix(in srgb, currentColor 14%, transparent); }
.durum {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; margin-right: 2px; padding: 0 14px; border-radius: var(--r-hap);
  font-size: var(--fs-etiket); font-weight: 500; white-space: nowrap; color: var(--u-soluk);
  transition: background-color var(--t-hizli) var(--ease-out), color var(--t-orta) var(--ease-out);
}
.ust-tarif {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; margin-left: 4px; padding: 0 18px 0 22px; border-radius: var(--r-hap);
  background: var(--u-dug); color: var(--u-dug-metin); font-size: 16px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--t-orta) var(--ease-out), color var(--t-orta) var(--ease-out), box-shadow var(--t-hizli) var(--ease-out);
}
.ust-tarif:hover { box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 14%, transparent); }   /* ton geçişinden bağımsız, hızlı */
.ust-tarif:active { translate: 0 1px; }
.ust-tarif svg { width: 18px; height: 18px; transition: translate var(--t-orta) var(--ease-out); }
.ust-tarif:hover svg { translate: 3px 0; }
.ust-hamburger { display: none; }

/* logo: sayfa başında kapsülden sarkan kum rozet; kaydırınca rozet küçülerek söner, yerine kapsülün ortasında yatay logo belirir
   (iki rengi var, kapsülün tonuna göre biri görünür). Geri dönerken önce yatay logo söner, sonra rozet gelir. */
.ust-logo { position: relative; display: block; align-self: stretch; width: var(--logo); transition: width 700ms var(--ease-io); }
.ust-kucuk .ust-logo { width: calc(var(--logo-yatay) * 731 / 452); }
.rozet {
  position: absolute; top: 6px; left: 50%; width: var(--logo); height: var(--logo); translate: -50% 0; transform-origin: 50% 0;
  border-radius: 50%; background: var(--kum); box-shadow: 0 2px 4px rgba(20, 10, 5, .16), 0 16px 34px -10px rgba(20, 10, 5, .45);
  transition: opacity 420ms var(--ease-out) 120ms, scale 700ms var(--ease-out) 120ms, translate 700ms var(--ease-out) 120ms;
}
.ust-kucuk .rozet { opacity: 0; scale: .5; translate: -50% -6px; pointer-events: none; transition-delay: 0s; }
.rozet img { width: 100%; height: 100%; }
.logo-yatay {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; scale: .88;
  transition: opacity 320ms var(--ease-out), scale 600ms var(--ease-out);
}
.ust-kucuk .logo-yatay { opacity: 1; scale: 1; transition-delay: 160ms; }
.logo-yatay img { grid-area: 1 / 1; width: auto; height: var(--logo-yatay); transition: opacity var(--t-orta) var(--ease-out); }
.ust:not([data-ton="acik"]) .logo-koyu, .ust[data-ton="acik"] .logo-kum { opacity: 0; }

/* arama paneli: kapsülün altından açılır */
.ust-arama {
  position: absolute; top: calc(100% + 10px); left: 50%; width: min(660px, 100%); translate: -50% 0;
  padding: 10px; border-radius: var(--r); background: var(--kum); color: var(--kahve);
  box-shadow: 0 24px 50px rgba(20, 10, 5, .22);
  opacity: 0; transform: translateY(-8px); transition: opacity var(--t-orta) var(--ease-out), transform var(--t-orta) var(--ease-out);
}
.ust-arama.acik { opacity: 1; transform: none; }
.arama-cubuk {
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 6px 0 18px;
  border-radius: var(--r-kucuk); background: #EDE3D2; box-shadow: inset 0 0 0 1px var(--cizgi); cursor: text;
}
.arama-cubuk:focus-within { box-shadow: inset 0 0 0 1px var(--kahve); }
.arama-cubuk input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 18px; }
.arama-cubuk input::placeholder { color: var(--soluk); opacity: 1; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.arama-kapat { width: 44px; height: 44px; }
.arama-oneri { max-height: min(56vh, 460px); overflow-y: auto; overscroll-behavior: contain; margin-top: 8px; padding: 4px; scrollbar-width: thin; }
.arama-oneri li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; padding: 11px 14px; border-radius: var(--r-kucuk); cursor: pointer; transition: background-color var(--t-hizli) var(--ease-out); }
.arama-oneri li[role="option"]:hover { background: rgba(60, 31, 20, .05); }
.arama-oneri li[aria-selected="true"] { background: var(--kum-2); }
.arama-oneri .o-isim { font-size: 17px; }
.arama-oneri .o-isim mark { background: none; color: var(--ates); }
.arama-oneri .o-kat { font-size: var(--fs-etiket); font-weight: 500; color: var(--soluk); white-space: nowrap; }
.arama-oneri .o-bas { grid-column: 1 / -1; padding: 10px 14px 4px; font-size: var(--fs-etiket); font-weight: 500; color: var(--soluk); cursor: default; }
.arama-oneri .o-bos { grid-column: 1 / -1; cursor: default; color: var(--soluk); font-size: var(--fs-bilgi); }

/* ───────── Footer: kum-açık zeminde konum kartı; altında telif + bağlantı satırı ve Octopix imzası ───────── */
.alt { background: var(--kum-acik); color: var(--kahve); padding-bottom: 18px; }
.alt [id] { scroll-margin-top: var(--ust-pay); }
.alt-sosyal { display: flex; gap: 8px; }
.alt-sosyal a {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cizgi);
  transition: background-color var(--t-hizli) var(--ease-out), color var(--t-hizli) var(--ease-out), border-color var(--t-hizli) var(--ease-out);
}
.alt-sosyal a:hover { background: var(--kahve); color: var(--kum); border-color: var(--kahve); }
.alt-sosyal svg { width: 20px; height: 20px; }
.alt-son { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 32px; padding-top: 14px; border-top: 1px solid var(--cizgi); font-size: var(--fs-etiket); color: var(--soluk); }
.alt-nav { display: flex; flex-wrap: wrap; column-gap: 28px; }
.alt-nav a {
  padding: 10px 0; color: var(--kahve); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em;
  text-decoration-color: transparent; transition: text-decoration-color var(--t-hizli) var(--ease-out);
}
.alt-nav a:hover { text-decoration-color: currentColor; }

/* ── Konum kartı: kenardan kenara kum tonlu harita (img/harita.svg, OpenStreetMap), kafe işaretli, yakın duraklar adıyla;
   üstünde yer kartı. Harita object-fit:none ile her genişlikte aynı ölçekte durur, geniş ekran yalnız daha çok alan
   görür. --hh harita yüksekliği; --kx/--ky kafenin harita ortasına göre yeri; işaretler kafeye göre --x/--y (px). ── */
.konum { --hh: 680px; --kx: 200px; --ky: -64px; position: relative; padding-bottom: 8px; }
.konum-harita { position: relative; height: var(--hh); overflow: hidden; }
.konum-zemin {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: none;
  object-position: calc(50% + var(--kx)) calc(50% + var(--ky));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.konum-im { position: absolute; left: calc(50% + var(--kx) + var(--x, 0px)); top: calc(50% + var(--ky) + var(--y, 0px)); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.konum-etiket { padding: 5px 10px; border-radius: var(--r-kucuk); background: rgba(239, 224, 194, .92); font-size: var(--fs-etiket); font-weight: 500; line-height: 1.3; }
/* kafe: ceviz dairede O işareti, adı yanında; dairenin ortası tam kafenin üstünde (kaydırma margin'le: translate girişte canlanır) */
.konum-pin { gap: 10px; margin: -28px 0 0 -28px; }
.konum-pin-daire {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--kahve); color: var(--kum);
  box-shadow: 0 0 0 6px rgba(239, 224, 194, .8), 0 12px 24px -10px rgba(60, 31, 20, .5);
}
.konum-pin .lumos-o { width: 26px; }
.konum-pin .konum-etiket { background: var(--kahve); color: var(--kum); font-size: 16px; }
/* duraklar: çizgili dairede ikon, adı solunda (kafeye doğru; dar ekranda da bant içinde kalır); dairenin ortası durağın üstünde */
.konum-durak { flex-direction: row-reverse; translate: calc(-100% + 16px) -16px; }
.konum-durak-ikon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--kum-acik); box-shadow: inset 0 0 0 1.5px var(--kahve); }
.konum-durak svg { width: 18px; height: 18px; }
.konum-gol { translate: -50% -50%; font-size: var(--fs-etiket); font-weight: 500; color: var(--soluk); }
.konum-atif { position: absolute; right: max(var(--kenar), (100% - var(--kap)) / 2); bottom: 18px; padding: 3px 8px; border-radius: var(--r-kucuk); background: rgba(239, 224, 194, .9); font-size: 13px; color: var(--soluk); }
.konum-atif:hover { color: var(--kahve); }
/* yer kartı: masaüstünde haritanın solunda, gölün üstünde yüzer */
.konum-ust { position: absolute; top: 0; left: 0; right: 0; height: var(--hh); display: flex; align-items: center; pointer-events: none; }
.konum-kart {
  pointer-events: auto; display: grid; gap: 24px; width: min(468px, 100%); padding: 30px 32px 30px; border-radius: var(--r);
  background: var(--kum-acik); box-shadow: inset 0 0 0 1px var(--cizgi), 0 2px 4px rgba(60, 31, 20, .06), 0 22px 38px -18px rgba(60, 31, 20, .4);
}
/* başlık: ad ve sosyal hesaplar bir satırda, canlı durum altında tam genişlikte */
.konum-kart-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; }
.konum-kart-bas .alt-sosyal { grid-row: 1; grid-column: 2; }
.konum-isim { font: 500 clamp(28px, 2.4vw, 34px)/1.1 var(--f-sans); letter-spacing: -0.025em; }
.konum-durum { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; font-size: var(--fs-bilgi); }
.konum-kart .alt-sosyal { gap: 6px; }
.konum-kart .alt-sosyal a { width: 44px; height: 44px; }
.konum-eylem { display: flex; flex-wrap: wrap; gap: 10px; }
.konum-eylem .dug { padding: 0 22px; }
.konum-bilgi { border-top: 1px solid var(--cizgi); }
.konum-bilgi > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.konum-bilgi > div:last-child { padding-bottom: 0; border-bottom: 0; }
.konum-bilgi dt { padding-top: 2px; font-size: var(--fs-etiket); font-weight: 500; color: var(--soluk); }
.konum-bilgi dd { margin: 0; font-size: var(--fs-bilgi); line-height: 1.45; }
@media (max-width: 1100px) {
  .konum { --kx: 150px; }
  .konum-kart { width: min(468px, 100% - 250px); }   /* kafe işareti kartın sağında açıkta kalsın */
  .konum-eylem .dug { padding: 0 18px; }
}
/* telefon: harita kafeyi ortalar (duraklar ekran dışında kalır), kart haritanın altından taşarak akışa girer */
@media (max-width: 759px) {
  .konum { --hh: 420px; --kx: -30px; --ky: -20px; padding-bottom: 36px; }
  .konum-ust { position: relative; height: auto; display: block; margin-top: -64px; }
  .konum-kart { width: 100%; padding: 24px 20px 24px; }
  .konum-kart-bas { grid-template-columns: minmax(0, 1fr); }
  .konum-kart-bas .alt-sosyal { grid-row: auto; grid-column: 1; margin-top: 10px; }
  .konum-eylem .dug { flex: 1 1 auto; }
  .konum-atif { bottom: 76px; }
}

/* ───────── Çekmece (mobil menü): kapsül gibi kenarlardan ayrık yüzen panel ───────── */
.perde { position: fixed; inset: 0; z-index: 90; background: rgba(20, 10, 5, .5); opacity: 0; transition: opacity var(--t-orta) var(--ease-out); }
.perde.acik { opacity: 1; }
.cekmece {
  position: fixed; top: 10px; left: 10px; bottom: 10px; z-index: 100; display: flex; flex-direction: column; width: min(420px, 100% - 20px);
  padding: 12px 22px 26px; border-radius: var(--r); background: var(--kum); color: var(--kahve); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(calc(-100% - 12px)); transition: transform var(--t-orta) var(--ease-out);
}
.cekmece.acik { transform: none; }
.cekmece-bas { display: flex; justify-content: space-between; align-items: center; min-height: 60px; margin-bottom: 20px; }
.cekmece-bas img { width: auto; height: 46px; }
.cekmece-nav { display: grid; }
.cekmece-nav a { padding: 14px 0; border-bottom: 1px solid var(--cizgi); font-size: 32px; line-height: 1.1; letter-spacing: -0.025em; }
.cekmece.acik .cekmece-nav a { animation: cekmece-oge 600ms var(--ease-out) backwards; }
.cekmece.acik .cekmece-nav a:nth-child(2) { animation-delay: 50ms; }
.cekmece.acik .cekmece-nav a:nth-child(3) { animation-delay: 100ms; }
.cekmece.acik .cekmece-nav a:nth-child(4) { animation-delay: 150ms; }
@keyframes cekmece-oge { from { opacity: 0; translate: -14px 0; } }
/* altta ziyaret bilgisi: canlı durum, adres ve "Yol tarifi" (kapsüldeki arama zaten her genişlikte görünür) */
.cekmece-alt { display: grid; gap: 6px; margin-top: auto; padding-top: 32px; }
.cekmece-durum { display: flex; align-items: center; gap: 9px; font-size: var(--fs-bilgi); }
.cekmece-adres { font-size: var(--fs-bilgi); color: var(--soluk); }
.cekmece-alt .dug { margin-top: 18px; }

/* ───────── Işık kutusu ───────── */
.lb { position: fixed; inset: 0; z-index: 120; background: rgba(24, 14, 9, .97); color: var(--kum); animation: lb-gir var(--t-orta) var(--ease-out); }
.lb-sahne > img { animation: lb-kare var(--t-orta) var(--ease-out); }
@keyframes lb-gir { from { opacity: 0; } }
@keyframes lb-kare { from { opacity: 0; scale: .97; } }
/* sahnenin tek hücresi sahne boyunda: kare max-height ile sahneye sığar (otomatik satırda yüzde çözülmez, kare taşardı) */
.lb-sahne { position: absolute; inset: 68px 80px 76px; display: grid; grid-template: minmax(0, 100%) / minmax(0, 100%); place-items: center; overflow: hidden; touch-action: none; user-select: none; }
.lb-sahne img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--r); -webkit-user-drag: none; cursor: zoom-in; }
.lb-sahne.zumlu img { cursor: grab; }
.lb .ikon-dug { color: var(--kum); background: rgba(228, 212, 188, .08); }
.lb .ikon-dug:hover { background: rgba(228, 212, 188, .18); }
.lb-kapat { position: absolute; top: 14px; right: 16px; z-index: 2; }
.lb-ok { position: absolute; top: 50%; margin-top: -23px; z-index: 2; }
.lb-onceki { left: 16px; }
.lb-sonraki { right: 16px; }
.lb-alt { position: absolute; left: 16px; right: 16px; bottom: 24px; display: flex; justify-content: center; gap: 18px; font-size: var(--fs-etiket); text-align: center; }
.lb-sayac { color: var(--soluk-k); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* etkinlik galerisi: altta künye (tarih, ad, kısa detay) ve kare şeridi; kutu dikey esnek kutu olur, sahne künyeden kalan
   yükseklikte kalır (esnek öğe kesin boylu: kare max-height ile sığar). Şerit sığmazsa yatay kayar, seçili kare ince kum
   çerçeveli. */
.lb-bilgili { display: flex; flex-direction: column; padding-top: 68px; }
.lb-bilgili .lb-sahne { position: relative; inset: auto; flex: 1; min-height: 0; margin-inline: 80px; }
.lb-bilgi {
  flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px;
  margin-top: 20px; padding: 20px clamp(16px, 3.4vw, 48px) 26px; border-top: 1px solid var(--cizgi-k);
}
.lb-metin { display: grid; gap: 4px; min-width: 0; }
.lb-tarih { font-size: var(--fs-etiket); font-weight: 500; color: var(--soluk-k); }
.lb-baslik { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.lb-detay { font-size: var(--fs-bilgi); line-height: 1.45; color: var(--soluk-k); }
.lb-kareler { display: flex; gap: 8px; flex: none; max-width: 100%; padding: 3px; overflow-x: auto; scrollbar-width: none; }
.lb-kareler:empty { display: none; }
.lb-kareler::-webkit-scrollbar { display: none; }
.lb-kareler button {
  flex: none; width: 56px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-kucuk); opacity: .5;
  outline: 1px solid transparent; outline-offset: 2px; transition: opacity var(--t-hizli) var(--ease-out), outline-color var(--t-hizli) var(--ease-out);
}
.lb-kareler button:hover { opacity: .85; }
.lb-kareler button[aria-current="true"] { opacity: 1; outline-color: var(--kum); }
.lb-kareler img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── Girişler: [data-gor] (Site.gorBagla; yalnız hareket açıkken) ─────────
   gor-bekle yalnız JS bağladığında eklenir; betik çalışmazsa içerik görünür kalır. resim: maske kayıtlı --gor-k ile
   canlanır (Chromium 151'de clip-path'in kendisini canlandırmak uzun kaydırmadan sonra öğeyi boyamayabiliyor). */
@property --gor-k { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@media (prefers-reduced-motion: no-preference) {
  .gor-bekle:is([data-gor="baslik"], [data-gor="oge"], [data-gor="resim"]), .gor-bekle[data-gor="ogeler"] > :not([data-gor-atla]) { opacity: 0; }
  .gor-acilir[data-gor="resim"] { clip-path: inset(var(--gor-k) 0 0 0); }
  .gor-acilir[data-gor="resim"][data-gor-yon="ust"] { clip-path: inset(0 0 var(--gor-k) 0); }
  .gor-acilir[data-gor="resim"][data-gor-yon="sol"] { clip-path: inset(0 var(--gor-k) 0 0); }
  .gor-acilir[data-gor="resim"][data-gor-yon="sag"] { clip-path: inset(0 0 0 var(--gor-k)); }
}
.gor-satir { display: block; overflow: hidden; padding-block: .1em .18em; margin-block: -.1em -.18em; }
.gor-satir > span { display: block; }
.y-gecis { overflow: clip; }
.vurgu { animation: vurgu 2.4s var(--ease-out); }
@keyframes vurgu { 0%, 40% { background-color: rgba(196, 81, 45, .14); } }

/* ───────── Kırılımlar ───────── */
/* dar masaüstü: iki yan blok yine eşit genişlikte kalsın diye bağlantılar sıkılaşır, düğmenin oku düşer */
@media (max-width: 1279px) {
  .ust-nav a { padding: 0 14px; }
  .durum { padding: 0 11px; }
  .ust-tarif { padding: 0 20px; }
  .ust-tarif svg { display: none; }
}
/* tablet: bağlantılar ve durum çekmeceye geçer; solda hamburger, sağda arama + "Yol tarifi" */
@media (max-width: 1100px) {
  .ust-nav, .durum { display: none; }
  .ust-hamburger { display: grid; }
}
/* geniş ekranda da, yazı büyütülünce bağlantılar ya da sağ blok logonun yanındaki sütuna sığmazsa aynısı (site.js
   .ust-sigmaz): logo ortada kalır, hiçbir şey altına girmez. Gizlenenler yeniden ölçülebilsin diye akıştan çıkıp görünmez olur */
.ust-sigmaz :is(.ust-nav, .durum) { position: absolute; visibility: hidden; pointer-events: none; }
.ust-sigmaz .ust-hamburger { display: grid; }
/* telefon: hamburger · logo · arama; "Yol tarifi" çekmecede */
@media (max-width: 759px) {
  :root { --ust-y: 10px; --kapsul-h: 60px; --kapsul-w: calc(100vw - 20px); --logo: 78px; --logo-yatay: 42px; --ust-pay: 80px; --fs-govde: 16.5px; --fs-bilgi: 16.5px; }
  html.ust-kucuk { --kapsul-w: calc(100vw - 20px); }
  .kapsul { padding: 0 7px; column-gap: 8px; }
  .rozet { top: 5px; }
  .ust-tarif { display: none; }
  .ust-arama { top: calc(100% + 8px); }
  .arama-oneri { max-height: 58vh; }
  .alt-son { flex-direction: column; align-items: flex-start; }
  .lb-sahne { inset: 60px 0 68px; }
  .lb-ok { display: none; }
  .lb-bilgili { padding-top: 60px; }
  .lb-bilgili .lb-sahne { margin-inline: 0; }
  .lb-bilgi { flex-direction: column; align-items: stretch; margin-top: 16px; padding: 16px 16px 20px; }
  .lb-kareler button { width: 48px; }
}

/* Hareket azaltılmışsa: yer değiştirme ve yakınlaşma yok; renk ve saydamlık geçişleri (durum geri bildirimi) kalır */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-property: color, background-color, border-color, text-decoration-color, opacity, visibility, box-shadow !important; animation: none !important; }
}