/* Lumo Kids&Cafe v3: "Lumo'nun ışığı". Dört punto, tek aile, düz renk. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/site/fonts/montserrat-latin-ext-500.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: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/site/fonts/montserrat-latin-500.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: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/site/fonts/montserrat-latin-ext-700.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: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/site/fonts/montserrat-latin-700.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: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/site/fonts/montserrat-latin-ext-800.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: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/site/fonts/montserrat-latin-800.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;
}

/* ---- Renkler: yalnızca bu değişkenler. Işık açıkken :root, kapalıyken [data-isik="kapali"]. */
/* Marka renkleri açık zeminde YALNIZCA dolgudur (yeşil/turuncu/sarı sıcak beyaz üzerinde 1,5-2,7:1); üzerlerine koyu yazı gelir.
   Açık zeminde metin: --murekkep, --metin-2, --baslik-aksan (kahve). Kapalı zeminde marka renkleri metin de olabilir.
   Ton diyeti: ana zemin sıcak beyaz; bej (--zemin-2) yalnızca tek banttır (SSS); kahve büyük yüzey DEĞİL, yalnızca metin aksanı. */
:root {
  --zemin: #fffdf8;
  --zemin-2: #f4efe2;
  --murekkep: #211f1c;
  --metin-2: #507050;
  --vurgu: #E6801C;
  --vurgu-ink: #16130f;
  --yesil: #73A646;
  --yesil-ink: #16130f;
  --sari: #F2C830;
  --baslik-aksan: #854D28;
  --cizgi: #e0d7c4;
  --dolgu: var(--zemin-2);

  /* Işığa bağlı olmayan sabitler */
  --krem: #fffdf8;
  --koyu: #16130f;

  /* Dört punto */
  --p-govde: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  --p-ara: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  --p-h2: clamp(2.25rem, 1.25rem + 3.3vw, 4.25rem);
  --p-h1: clamp(2.5rem, 0.5rem + 7.8vw, 7.5rem);

  --kenar: clamp(20px, 2.2vw, 32px);
  --sutun: 24px;
  --aralik: clamp(3.5rem, 0.5rem + 5vw, 5.5rem);
}
html[data-isik="kapali"] {
  --zemin: #16130f;
  --zemin-2: #1e1a14;
  --murekkep: #efe8dc;
  --metin-2: #9fb394;
  --baslik-aksan: var(--sari);
  --cizgi: #2c261d;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(115, 166, 70, 0.18);

  margin: 0;
  padding-bottom: 72px;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: "Montserrat", system-ui, "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  font-size: var(--p-govde);
  line-height: 1.55;
  font-synthesis: none;
}
img, iframe { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
p { margin: 0 0 1em; }
b, strong { font-weight: 700; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Ağırlık ölçeği: 500 gövde · 700 başlık/etiket · 800 yalnızca h1 ve tutarlar (.toplam, .paket-tutar). */
h1, h2, h3 { margin: 0; font-weight: 700; }
h1 {
  font-weight: 800;
  font-size: var(--p-h1);
  line-height: 0.92;
  letter-spacing: -0.035em;
  padding-bottom: 0.04em;
  text-wrap: balance;
}
h2 {
  font-size: var(--p-h2);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.45em;
  text-wrap: balance;
}
h3, legend, .ara { font-size: var(--p-ara); line-height: 1.25; }
h3 { margin-bottom: 0.5em; }
.ara { font-weight: 700; margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--murekkep); outline-offset: 3px; }

/* Görsel gizleme (ekran okuyucuya açık kalır). Çizgi değil: 1px kutu kırpılıyor. */
.gizli, .segs > input[type="radio"], .hp {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; /* taste-skill-ignore */
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.segs > input[type="radio"] { opacity: 0; pointer-events: none; }
.hp { left: -9999px; }
.atla {
  position: absolute; left: 8px; top: -100px; z-index: 10;
  padding: 12px 16px; background: var(--murekkep); color: var(--zemin); font-weight: 700;
}
.atla:focus { top: 8px; }

/* ---- Düzen */
.kap { padding-inline: var(--kenar); max-width: 1920px; margin-inline: auto; }
.bolum { padding-block: var(--aralik); }
/* Kafe menüsü, kahvaltı bölümünün hemen altında: iki ayrı boşluk üst üste binmesin. */
#kafe { padding-top: 0; }
.zemin2 { background: var(--zemin-2); }
.izgara { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sutun); row-gap: 2rem; }
.metin { max-width: 62ch; }

/* ---- Düğmeler: düz dolgu, kare köşe. Turuncu yalnızca .btn-wa (birincil WhatsApp eylemi)
   ve bugünün bloğunda; öbür tüm düğmeler mürekkep dolgu, üzerine gelince yeşil dolgu. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px;
  background: var(--murekkep); color: var(--zemin);
  font-weight: 700; text-decoration: none; text-align: center;
  border: 0; border-radius: 0; cursor: pointer;
}
.btn:hover { background: var(--yesil); color: var(--yesil-ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn-wa { background: var(--vurgu); color: var(--vurgu-ink); }
.btn-wa:hover { background: var(--murekkep); color: var(--zemin); }
/* Alt çubukta WhatsApp de turuncu: .altbar .btn sonradan gelen bir kuralla ezilmesin diye açıkça yazıldı. */
.altbar .btn-wa { background: var(--vurgu); color: var(--vurgu-ink); }
.altbar .btn-wa:hover { background: var(--murekkep); color: var(--zemin); }

/* ---- Başlık çubuğu: düz, sabit değil */
.ust { background: var(--zemin); }
.ust-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 16px; }
.logo { display: block; text-decoration: none; }
.logo-gece { display: none; }
html[data-isik="kapali"] .logo-gunduz { display: none; }
html[data-isik="kapali"] .logo-gece { display: block; }
.logo img { height: 32px; width: auto; }
@media (min-width: 768px) { .logo img { height: 40px; } }
.ust-ara { margin-left: auto; min-height: 44px; padding: 0 20px; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 20px; width: 100%; }
.nav a { font-weight: 700; text-decoration: none; padding-block: 8px; }
.nav a:hover { text-decoration: underline; }

/* ---- 1. Hero */
.hero { padding-block: calc(var(--aralik) * 0.6); }
.durum { margin: 0.5em 0 1.25rem; font-weight: 500; }
/* Kapalıyken "… 11:00'de açılır" ışık gibi: marka turuncusu metin (6,59:1). Açık modda turuncu metin yok. */
html[data-isik="kapali"] .durum { color: var(--vurgu); }
@media (min-width: 600px) { .durum { font-size: var(--p-h2); line-height: 1; letter-spacing: -0.03em; } }
.ara.hafif { font-weight: 500; }
.hero-alt { align-items: start; }
.hero-foto img { width: 100%; }
@media (min-width: 600px) and (max-width: 899.98px) {
  .hero-foto img { aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; }
}
.sprite { position: absolute; }

/* Haftalık şerit. Dar kutuda (telefon, dar masaüstü sütunu): bugün tam genişlikte üstte,
   diğer altı gün 3 × 2. Geniş kutuda: tek sıra, bugün 3 kat geniş. */
.hero-sol { container-type: inline-size; }
.serit {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  list-style: none; margin: 1.75rem 0 0; padding: 0;
}
.serit li {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 64px; padding: 8px 10px; background: var(--yesil); color: var(--yesil-ink);
  font-weight: 700; line-height: 1.25; overflow: hidden;
}
/* Işıklı daire: duvardaki içten aydınlatmalı paneller. Yalnızca bugünün bloğunda;
   ışık açıkken halka + dolu merkez (yanık), kapalıyken yalnızca halka (sönük). */
.serit .isik { display: none; }
.serit li.bugun .isik {
  display: block; position: absolute; top: 12px; right: 12px; width: 56px; height: 56px; color: var(--vurgu-ink);
}
html[data-isik="kapali"] .serit .isik { --nokta: transparent; }
.serit .s { font-weight: 500; }
/* Kapalı gün: dolgu yok, kesikli kenarlık ("ışığı sönük gün"). Dolgu zemine 1,07:1 olduğundan kutu seçilmiyordu.
   Kenarlık 2px; kutu boyutu değişmesin diye dolgu 2px azaltıldı (border-box), yazı komşu hücrelerle hizalı kalır. */
.serit li.kapali { background: none; border: 2px dashed var(--metin-2); padding: 6px 8px; color: var(--metin-2); }
/* Bugün her zaman turuncu (Pazartesi dahil); .kapali'dan sonra gelir, aynı özgüllükte onu ezer. */
.serit li.bugun { grid-column: 1 / -1; order: -1; min-height: 120px; padding: 8px 10px; border: 0; background: var(--vurgu); color: var(--vurgu-ink); }
.serit li.bugun .g > [aria-hidden] { display: none; }
.serit li.bugun .gizli {
  position: static; width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; clip-path: none; white-space: normal;
}
.serit .canli { font-weight: 700; }
/* Onaylı parti olan gün: "14–16 özel etkinlik" (küçük punto; dar hücrede iki satıra sığar) */
.serit .etk { margin-top: 2px; font-size: 0.75rem; line-height: 1.2; }
.serit li.bugun .etk { font-size: 0.875rem; }
/* Bugünün hücresi gün adını görünür yapıyor (.serit li.bugun .gizli); etkinliğin okuyucu cümlesi gizli kalmalı */
.serit li.bugun .etk .gizli {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; /* taste-skill-ignore */
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* 700px: bugün 3 pay, öbür altı gün 1'er pay. Daha dar kutuda "Kapalı" (≈52px) 8px dolgulu hücreye sığmıyordu. */
@container (min-width: 700px) {
  .serit { display: flex; align-items: flex-end; }
  .serit li { flex: 1 1 0; min-width: 0; min-height: 0; height: 96px; padding: 10px 8px; }
  .serit li.kapali { padding: 8px 6px; }
  .serit li.bugun { flex: 3 1 0; order: 0; height: 160px; padding: 14px; }
  .serit li.bugun .isik { top: 14px; right: 14px; width: 72px; height: 72px; }
}

/* ---- 2. Fiyat */
.hesap-sol fieldset { border: 0; margin: 0 0 2rem; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 0.75rem; font-weight: 700; }
legend h3 { margin: 0; }
.hesap-sag { margin-top: 3rem; }
.segs { display: grid; gap: 4px; position: relative; }
.segs.s4 { grid-template-columns: repeat(4, 1fr); }
.segs.s6 { grid-template-columns: repeat(6, 1fr); }
.segs.s6 > label { grid-column: span 2; }
.segs.s6 > label:nth-of-type(n+4) { grid-column: span 3; }
.segs > label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 56px; padding: 8px 6px; text-align: center;
  background: var(--dolgu); color: var(--murekkep); font-weight: 700; cursor: pointer;
}
.segs > label .fy { font-weight: 500; }
.segs > input:checked + label, .segs > input:checked + label:hover { background: var(--yesil); color: var(--yesil-ink); }
.segs > input:focus-visible + label { outline: 3px solid var(--murekkep); outline-offset: 3px; }
.segs > label:hover { background: var(--cizgi); }

.sayi { display: none; grid-column: 1 / -1; align-items: center; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.segs > #c4:checked ~ .sayi { display: flex; }
.sayi label { font-weight: 700; margin-right: 12px; }
/* Dar ekranda etiket kendi satırında; − sayı + tek satırda kalır */
@media (max-width: 420px) {
  .sayi label { flex: 1 0 100%; margin: 0 0 4px; }
}
.sayi input {
  width: 6rem; min-height: 56px; padding: 0 12px; text-align: center;
  background: var(--zemin); color: var(--murekkep); border: 2px solid var(--murekkep); border-radius: 0;
}
.sayi button {
  width: 56px; min-height: 56px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--murekkep); color: var(--zemin); font-weight: 700;
}
.sayi button:hover { background: var(--yesil); color: var(--yesil-ink); }
.js-ac { display: none; }
.js .js-ac { display: inline-flex; align-items: center; justify-content: center; }
.js .js-yok { display: none; }

.hesap-sag output { display: block; }
.toplam {
  display: block; font-size: var(--p-h2); font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  margin-bottom: 0.3em; font-variant-numeric: tabular-nums;
}
.dokum { display: block; margin-bottom: 1.25rem; font-weight: 500; }
/* 16 saatlik paket: fiyat alanının altında tam genişlikte düz sarı şerit, koyu yazı (11,5:1).
   Sarı hiçbir zaman metin rengi değildir. Telefonda fiyat, koşullar, bağlantı alt alta. */
#fiyat { padding-bottom: 0; }
.paket { margin-top: calc(var(--aralik) * 0.6); padding-block: clamp(2rem, 4vw, 3.5rem); background: var(--sari); color: var(--yesil-ink); }
.paket h3 { margin-bottom: 0.25em; }
.paket-tutar { margin: 0; font-size: var(--p-h2); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.paket-yazi p { max-width: 52ch; }
.paket-yazi p:last-child { margin-bottom: 0; }
.paket .btn:hover { background: var(--zemin); color: var(--murekkep); }

.fiyat-not { margin-top: 1rem; }

/* ---- 3. Kahvaltı & gün sofrası: iki ayrı düzen. Kahvaltı = solda başlık, sağda gruplu liste (bölünmüş);
   gün sofrası = tam genişlikte beş satır, kategori solda seçenekler yanında. Kutu, numara, ayırıcı yok: ayrım boşluk. */
.kahvalti { margin-top: 2rem; }
.kahvalti-sol h3 { margin-bottom: 0.25em; }
.kahvalti-sol .ara { margin-bottom: 1rem; }
.kahvalti-liste, .gun-liste { margin: 0; }
.kahvalti-liste dt, .gun-liste dt { font-weight: 700; }
.kahvalti-liste dd, .gun-liste dd { margin: 0; }
.kahvalti-liste > div { margin-bottom: 1.5rem; }
.kahvalti-liste > div:last-child { margin-bottom: 0; }
.kahvalti-liste dd { max-width: 52ch; }
/* Gün sofrası: kapalı başlar (native <details>, JS gerekmez). Dolgu yok; ayrım başlık boyu + sağda artı kutusu. */
.gun-sofra { margin-top: 2.5rem; }
.gun-sofra summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding-block: 8px; font-size: var(--p-ara); font-weight: 700; line-height: 1.25; cursor: pointer; list-style: none;
}
.gun-sofra summary::-webkit-details-marker { display: none; }
.gun-sofra summary::after {
  content: "+"; flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 2px solid var(--murekkep); font-size: 1.5rem; font-weight: 700; line-height: 1;
}
.gun-sofra[open] summary::after { content: "−"; }
/* Kapalıyken içerik hiç yerleşmesin (Chrome kapalı <details> içeriğini yerleşimde tutuyor; ölçüm araçları ve alttaki bölümle çakışma için). */
.gun-sofra:not([open]) > :not(summary) { display: none; }
.gun-not { max-width: 52ch; margin-top: 1.25rem; }
.gun-liste { margin-bottom: 1.5rem; }
.gun-liste > div { margin-bottom: 1.5rem; }
.gun-liste > div:last-child { margin-bottom: 0; }

/* Kahvaltı rezervasyonu: #menu içinde, kahvaltı listesi ile gün sofrası arasında tam genişlikte yeşil bant
   (16 saatlik paket şeridiyle aynı dil: düz dolgu, kare köşe). Yeşil iki modda da aynı olduğundan bandın içi
   ışık moduna bağlı değil: yazı, alan ve düğme renkleri --koyu/--krem ile sabit; color-scheme light, tarih seçici koyu çizilmesin. */
.kahv-rez { margin-top: calc(var(--aralik) * 0.6); padding-block: clamp(2rem, 4vw, 3.5rem); background: var(--yesil); color: var(--yesil-ink); color-scheme: light; }
.kahv-rez-yazi, .kahv-rez-form { min-width: 0; }
.kahv-rez-yazi p { max-width: 36ch; }
.kahv-rez :focus-visible { outline-color: var(--koyu); }
.kahv-rez .alanlar input { background: var(--krem); color: var(--koyu); border-color: var(--koyu); }
.kahv-rez .ipucu { color: inherit; }
.kahv-rez .kutu { background: var(--krem); color: var(--koyu); }
.kahv-rez .koyu-kutu { background: var(--koyu); color: var(--krem); }
.kahv-rez-form .kutu { margin-bottom: 20px; }
.kahv-kvkk { max-width: 52ch; margin-bottom: 20px; }
.kahv-rez .btn { background: var(--koyu); color: var(--krem); }
.kahv-rez .btn:hover { background: var(--krem); color: var(--koyu); }
/* Telefonda tek sütun, alanlar tam genişlik; tablette ikişerli, bant gereğinden uzamasın. */
@media (min-width: 600px) { .kahv-rez .alanlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- 4. Kafe menüsü: kompakt liste. Sütunlar kategori sayısına göre kendiliğinden akar; kategori adı yalnız kalmaz. */
.kafe-liste { margin-top: 2rem; }
.kafe-liste dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.5rem var(--sutun); }
.kafe-liste dt { font-weight: 700; margin-bottom: 0.25rem; }
.kafe-liste dd { margin: 0; }
.kafe-liste dd.u, .kafe-liste .daha .u { display: flex; justify-content: space-between; gap: 16px; }
.kafe-liste .fyt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kafe-liste dd.u-ac { margin: 0 0 0.25rem; max-width: 46ch; }
.kafe-liste .daha summary { cursor: pointer; font-weight: 700; padding-block: 6px; }
.kafe-liste .daha .u-ac { margin: 0 0 0.25rem; max-width: 46ch; }
.menu-not { margin: 2rem 0 0; color: var(--metin-2); }

/* ---- 5. Parti: açık zemin. Kahve yalnızca başlık rengi (--baslik-aksan); "gece" havasını fotoğraf taşır.
   Telefonda fotoğraf iki yana taşar; masaüstünde sol yarıyı doldurur (aşağıda). */
.parti-foto { position: relative; margin-inline: calc(var(--kenar) * -1); }
.parti-foto img { width: 100%; max-width: none; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.parti-ust, .parti-alt, .parti-tam { min-width: 0; }
.parti-ust h2, .parti-bloklar h3 { color: var(--baslik-aksan); }
.parti-bloklar { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem var(--sutun); margin: 2rem 0; }
.parti-liste, .parti-bloklar ul { list-style: none; margin: 0; padding: 0; }
.parti-liste li, .parti-bloklar li { margin-bottom: 0.4rem; }
.parti-tam { margin-top: 0; }
.sofra { margin-top: 0; }
.sofra h3 { margin-bottom: 0.5em; }
.sofra .parti-liste { margin-bottom: 1.25rem; }
.sofra p, .parti-tam > .metin { max-width: 62ch; }
.parti-ortak { margin-top: 1.25rem; max-width: 62ch; }
/* ---- 5. Galeri */
/* Telefonda yatay kaydırma yok: 2 sütun, üçüncü kare tam genişlikte */
.galeri-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.galeri-liste img { width: 100%; }
.galeri-liste figure:nth-child(3) { grid-column: 1 / -1; }
.galeri-liste figure:nth-child(3) img { aspect-ratio: 4 / 3; object-fit: cover; }
.galeri-liste figcaption { margin-top: 0.75rem; }

/* ---- 6. SSS: tek sütun, sol hizalı */
.sss-liste { max-width: 62ch; }
.sss-liste details { background: var(--zemin); margin-bottom: 4px; }
.sss-liste summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 12px 20px; font-weight: 700; cursor: pointer; list-style: none;
}
.sss-liste summary::-webkit-details-marker { display: none; }
.sss-liste summary::after { content: "+"; font-weight: 700; flex: none; }
.sss-liste details[open] summary::after { content: "−"; }
.sss-liste details p { margin: 0; padding: 0 20px 18px; max-width: 62ch; }

/* ---- Rezervasyon formu (görsel kabuk; mantık site.js'te) */
.alanlar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 24px; margin-bottom: 20px; }
.alanlar label, .onay { font-weight: 700; }
.alanlar label { display: block; margin-bottom: 8px; }
.alanlar input, .alanlar select, .alanlar textarea {
  display: block; width: 100%; min-height: 56px; padding: 12px 16px;
  background: var(--zemin); color: var(--murekkep);
  border: 2px solid var(--murekkep); border-radius: 0; font-weight: 500;
}
.alanlar textarea { min-height: 120px; resize: vertical; }
.alanlar [aria-invalid="true"] { border-width: 4px; }
.ipucu { margin: 8px 0 0; color: var(--metin-2); }
.err { margin: 8px 0 0; font-weight: 700; }

/* Parti: süre (2/3 saat) ve başlangıç saati düğmeleri. Dolu saat seçilemez ama tıklanınca neden dolu olduğu yazılır. */
.sure-sec { border: 0; margin: 0; padding: 0; min-width: 0; }
.sure-sec legend { margin-bottom: 8px; font-size: inherit; line-height: inherit; }
.segs.s2 { grid-template-columns: repeat(2, 1fr); }
.alanlar .segs > label { display: flex; margin: 0; }
.parti-sec .etiket { margin: 0; font-weight: 700; }
.slotlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 4px; margin-top: 12px; }
.slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 6px; border: 2px solid var(--murekkep); border-radius: 0;
  background: var(--zemin); color: var(--murekkep); font: inherit; font-weight: 700; cursor: pointer;
}
.slot .slot-d { font-size: 0.8125rem; font-weight: 500; }
.slot[data-durum="bos"]:hover { background: var(--cizgi); }
.slot[aria-pressed="true"], .slot[aria-pressed="true"]:hover { background: var(--yesil); color: var(--yesil-ink); border-color: var(--yesil); }
.slot[data-durum="dolu"] { background: var(--dolgu); color: var(--metin-2); border-style: dashed; cursor: help; }
.slot[data-durum="dolu"] .slot-s { text-decoration: line-through; }
.slot:disabled { opacity: 0.45; border-style: dashed; cursor: not-allowed; }
.slot:focus-visible { outline: 3px solid var(--murekkep); outline-offset: 3px; }
.slot-durum { margin: 12px 0 0; }
.slot-durum.uyari { padding-left: 12px; border-left: 4px solid var(--vurgu); font-weight: 700; }
.onay { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px; }
.onay input { flex: none; width: 24px; height: 24px; margin: 3px 0 0; accent-color: var(--murekkep); }
.onay span { font-weight: 500; }
.kutu { padding: 16px 20px; margin-bottom: 20px; background: var(--zemin-2); }
.kutu p { margin: 0 0 0.5em; }
.kutu p:last-child { margin: 0; }
.kutu:focus { outline: 3px solid var(--murekkep); outline-offset: 3px; }
.koyu-kutu { background: var(--murekkep); color: var(--zemin); }
/* KVKK özeti: iki sütunun altında tam genişlikte (telefonda formun hemen altında) */
.rez-sol { order: 1; }
.kvkk { order: 2; }
.konum-kutu { order: 3; }
.kvkk { margin-top: 2rem; }
.kvkk h3 { margin-bottom: 0.4em; }
.kvkk p:last-child { margin: 0; }

/* ---- 7. Adres (rezervasyon bölümünün sağ sütunu). Harita: Google Haritalar iframe'i, sayfa yüklenirken (loading=lazy ile
   görünüme yaklaşınca) gelir; tıklama gerekmez. Dolgu yok: haritanın kendi görseli yeter. */
.konum-kutu { padding: 0; }
.konum-kutu h3 { margin-bottom: 16px; }
/* Yükseklik min-height'tan gelir (aspect-ratio yok: min-height ile birlikte 320px'te genişliği zorluyordu). */
.harita { position: relative; width: 100%; min-width: 0; min-height: 300px; background: var(--zemin-2); }
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 600px) { .harita { min-height: 380px; } }
.atif { margin: 8px 0 0; }
.konum-kutu address { margin: 20px 0 0; font-style: normal; }
.konum-kutu address p { margin: 0; }
.konum-kutu .yol { margin: 24px 0 0; }
.iletisim { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; margin: 1.25rem 0 0; }
.iletisim dd { overflow-wrap: anywhere; }
.iletisim dt { font-weight: 700; }
.iletisim dd { margin: 0; }
/* Dar ekranda etiket üstte, değer altta: e-posta adresi ortasından kırılmasın */
@media (max-width: 479.98px) {
  .iletisim { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .iletisim dt { margin-top: 12px; }
}

/* ---- Alt çubuk (mobil) ve footer */
.altbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4px;
  padding: 8px var(--kenar) calc(8px + env(safe-area-inset-bottom)); background: var(--zemin);
}
.altbar .btn { padding-inline: 8px; min-width: 0; }
.alt-bilgi { padding-bottom: 2rem; }
/* Büyütülmüş motif = boşluk: logo şeridi en çok 240px (176px görsel + 2 × 32px dolgu). Dolgu yok: sayfa zemini. */
.logo-serit { padding: 32px var(--kenar); }
.logo-serit img { width: auto; height: auto; max-width: 100%; max-height: 176px; margin-inline: auto; }
.f-satir { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-start; padding-top: 1.5rem; }
.f-satir p { margin: 0; }
.f-son { color: var(--metin-2); }
.kvkk-f { max-width: 62ch; }
.kvkk-f summary { cursor: pointer; font-weight: 700; }
.kvkk-f p { margin-top: 0.75rem; }

/* ---- Işık geçişi, giriş hareketleri ve düğme geri bildirimi (hareketi azaltan kullanıcıda yok).
   Yalnızca transform + opacity; içerik JS yoksa hiçbir zaman gizli kalmaz. */
@keyframes yuksel { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  *, *::before, *::after {
    transition: background-color 600ms ease, color 600ms ease;
  }
  .btn, .sayi button, .segs > label { transition-duration: 150ms; }
  html { scroll-behavior: smooth; }

  .hero h1, .hero .durum, .hero-sol > * { animation: yuksel 600ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .hero .durum { animation-delay: 70ms; }
  .hero-sol > :nth-child(1) { animation-delay: 140ms; }
  .hero-sol > :nth-child(2) { animation-delay: 210ms; }
  .hero-sol > :nth-child(3) { animation-delay: 280ms; }
  .hero-sol > :nth-child(4) { animation-delay: 350ms; }

  .js .rv {
    opacity: 0; transform: translateY(24px);
    transition: opacity 600ms ease var(--rv-gecikme, 0ms), transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--rv-gecikme, 0ms),
                background-color 600ms ease, color 600ms ease;
  }
  .js .rv.in { opacity: 1; transform: none; }
  .hero-foto img { animation: yuksel 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 300ms backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
}

/* ---- Telefon: alt çubuk */
@media (max-width: 599.98px) {
  .altbar { display: grid; }
}
/* Hero'daki WhatsApp düğmesi ekrandayken alt çubuk gizli (aynı eylem iki kez görünmesin); düğme ekrandan çıkınca çubuk gelir.
   Sınıfı sayfadaki satır içi betik ekler; JS yoksa çubuk her zaman görünür. */
html.alt-gizle .altbar { display: none; }
@media (min-width: 600px) {
  body { padding-bottom: 0; }
  .altbar { display: none; }
  .galeri-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sutun); }
  .galeri-liste figure:nth-child(3) { grid-column: auto; }
  .galeri-liste figure:nth-child(3) img { aspect-ratio: auto; object-fit: fill; }
  .galeri-liste figure:nth-child(2) { margin-top: 48px; }
  .galeri-liste figure:nth-child(3) { margin-top: 96px; }
}

/* ---- Masaüstü */
@media (min-width: 900px) {
  .izgara { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0; }
  .tam { grid-column: 1 / -1; }

  .ust-in { flex-wrap: nowrap; padding-block: 20px; }
  .logo img { height: 40px; }
  .ust-ara { order: 3; margin-left: 0; }
  .nav { order: 2; width: auto; margin-left: auto; margin-right: 8px; gap: 8px 32px; }

  /* Sol sütun 8/12: şerit tüm genişliği kullanır. Fotoğraf sol sütunla aynı boyda uzanır
     (mutlak konumlu görsel satır yüksekliğini belirlemez); şerit sütunun altına oturur, köşe boş kalmaz. */
  .hero-alt { align-items: stretch; }
  .hero-sol { grid-column: 1 / 9; display: flex; flex-direction: column; }
  .hero-sol > p:nth-of-type(2) { margin-bottom: 2.5rem; }
  .serit { margin-top: auto; }
  .hero-foto { grid-column: 9 / 13; grid-row: 1; position: relative; min-height: clamp(340px, 32vw, 560px); }
  .hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }

  .hesap-sol { grid-column: 1 / 6; margin-top: 1rem; }
  .hesap-sag { grid-column: 7 / 13; margin-top: 1rem; }
  .fiyat-not { margin-top: 3rem; }

  .paket-in { align-items: end; }
  .paket-fiyat { grid-column: 1 / 7; }
  .paket-yazi { grid-column: 7 / 13; }

  .kahvalti { margin-top: 3rem; }
  .kahvalti-sol { grid-column: 1 / 6; }
  .kahvalti-liste { grid-column: 7 / 13; }
  .kahv-rez-yazi { grid-column: 1 / 6; }
  .kahv-rez-form { grid-column: 7 / 13; }
  .gun-liste > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--sutun); }
  .kafe-liste { margin-top: 3rem; }

  /* Parti: fotoğraf sol yarıyı doldurur (üç satırı kaplar, kenara taşar); tüm yazı sağ sütunda. */
  .parti-foto { grid-column: 1 / 6; grid-row: 1 / 4; margin-inline: calc(var(--kenar) * -1) 0; min-height: 560px; }
  .parti-foto img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .parti-ust { grid-column: 7 / 13; grid-row: 1; }
  .parti-alt { grid-column: 7 / 13; grid-row: 2; }
  .parti-tam { grid-column: 7 / 13; grid-row: 3; }

  .hero-sol .ara { max-width: 32ch; }
  .parti-ust .ara { max-width: 34ch; }
  .galeri-liste figure:nth-child(2) { margin-top: 96px; }
  .galeri-liste figure:nth-child(3) { margin-top: 192px; }

  /* Form ve adres kartı aynı satırda, aynı yükseklikte; harita kalan yüksekliği doldurur. KVKK altta tam genişlik. */
  .rez-sol { grid-column: 1 / 8; grid-row: 2; margin-top: 2rem; order: 0; }
  .konum-kutu { grid-column: 8 / 13; grid-row: 2; margin-top: 2rem; order: 0; display: flex; flex-direction: column; }
  .harita { flex: 1 1 auto; }
  .kvkk { grid-row: 3; order: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sutun); }
  .kvkk h3 { grid-column: 1 / -1; }
  .kvkk p { margin: 0; }
  .alanlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alanlar .tam { grid-column: 1 / -1; }
}


/* Web Interface Guidelines: native select Windows koyu modda okunur olsun */
select {
  background-color: var(--zemin);
  color: var(--murekkep);
  border: 1px solid var(--cizgi);
  padding: 10px 12px;
  border-radius: 6px;
  font: inherit;
}