/* ==========================================================================
   FOLIA — Aegean Editorial
   Beyaz zemin · Folia yeşili · kahve tonları
   Bu dosya tasarım dokümanındaki token'ların birebir karşılığıdır.
   ========================================================================== */

/* --- 1. Tokenlar ---------------------------------------------------------- */
:root {
  /* Renk */
  --white:       #FFFFFF;
  --white-warm:  #FAF7F3;
  --ink:         #20211D;
  --green:       #414D32;
  --green-deep:  #283021;
  --sage:        #A7AE95;
  --coffee-dark: #3B2C22;
  --coffee:      #6B4F3A;
  --coffee-milk: #A8886A;
  --cream:       #E6DCD1;
  --sand:        #F2EBE3;
  /* Logonun altını — yalnız zeytin dalı işaretinde. Açık zeminde --gold,
     koyu zeminde ve fotoğraf üstünde --gold-light (three.js dalının ortalama tonu) */
  --gold:        #705C2A;
  --gold-light:  #A88E58;
  /* Koyu zeminde ve fotoğraf üstünde KÜÇÜK altın yazı (sayaç, etiket):
     --gold-light koyu yeşilde 4,3:1'de kalıyor; bu ton 6:1 */
  --gold-pale:   #C4AC74;
  /* Sayfanın zemini: ana sayfada sıcak beyaz, öteki sayfalarda beyaz */
  --canvas:      var(--white);

  --line:        rgba(32, 33, 29, .14);
  --line-soft:   rgba(32, 33, 29, .07);
  --line-light:  rgba(230, 220, 209, .22);

  /* Tipografi — web fontu gelene kadar ölçüleri eşleştirilmiş yedek (aşağıda) */
  --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --font-script:  "Ephesis", "Cormorant Garamond", "Cormorant Fallback", cursive;
  --font-sans:    "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-hero:   clamp(4rem, 16vw, 15rem);
  /* Ana sayfanın ölçeği: en büyük başlıklar ve bölüm başlıkları */
  --t-mega:   clamp(3.25rem, 13vw, 10rem);
  --t-title:  clamp(2.75rem, 12vw, 6.5rem);
  --t-xl:     clamp(2.5rem, 7vw, 6rem);
  --t-lg:     clamp(1.875rem, 4.4vw, 3.5rem);
  --t-script: clamp(1.75rem, 4vw, 3.25rem);
  --t-md:     clamp(1.375rem, 2.4vw, 2rem);
  --t-lede:   clamp(1.0625rem, 1.5vw, 1.3125rem);
  --t-body:   clamp(0.9375rem, 1vw, 1.0625rem);
  --t-micro:  0.6875rem;

  /* Ritim */
  --gutter:  clamp(20px, 4.5vw, 72px);
  --rail:    0px;   /* eski sol şerit kaldırıldı; değişken kurallar bozulmasın diye 0 */
  --section: clamp(96px, 14vh, 176px);
  --col-gap: clamp(12px, 1.6vw, 24px);
  --max:     1680px;
  /* Telefonda alttaki hızlı eylem şeridinin yüksekliği (güvenli alan hariç) */
  --abar-h:  56px;
  /* Yatay tutulan iPhone'da çentik payı (viewport-fit=cover) */
  --pad-l:   max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r:   max(var(--gutter), env(safe-area-inset-right, 0px));

  /* Hareket */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-soft:  cubic-bezier(.33, 1, .68, 1);
  --d-micro: 240ms;
  --d-std:   640ms;
  --d-scene: 1100ms;
}
/* Manrope kendi sunucumuzdan (OFL, assets/fonts/manrope-OFL.txt; değişken
   ağırlık 200–800). İki alt küme: latin + Türkçenin ğ, ş, İ'si (latin-ext).
   Sayfalar ikisini de önden ister (layout'larda preload); Cormorant ve
   Ephesis Google Fonts'tan gelir. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/manrope-latin-ext-wght-normal.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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/manrope-latin-wght-normal.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; }

/* Ölçüleri eşleştirilmiş yedek yazı tipleri: web fontu (display=swap) geç
   gelince sayfa zıplamasın. Sistem fontu Manrope'tan / Cormorant'tan geniş;
   QR menüde rozet satırı iki satıra kırılıp her şey 22–26 px kayıyordu
   (CLS 0,21). Değerler Chrome'da ölçüldü (100 px'te örnek metnin genişliği,
   fontun ascent/descent'i): Manrope 1,066 / 0,30 em, Arial'den %2,9 dar;
   Cormorant Garamond 0,924 / 0,287 em, Times New Roman'dan %5,2 dar. */
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"); size-adjust: 96.4%; ascent-override: 110.6%; descent-override: 31.1%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; src: local("Times New Roman"), local("Times"), local("Georgia"); size-adjust: 94.8%; ascent-override: 97.5%; descent-override: 30.3%; line-gap-override: 0%; }

/* Telefonda bölüm boşlukları kısalır; en büyük başlıklar ekran genişliğine
   göre daha da büyür (tek sözcük ekranı doldursun) */
@media (max-width: 600px) { :root { --section: clamp(64px, 9vh, 88px); --t-mega: clamp(3.25rem, 19vw, 5.5rem); } }

/* --- 2. Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* Dokunmatikte gri vurgu kutusu yok; geri bildirim :active ile (aşağıda) */
a, button { -webkit-tap-highlight-color: transparent; }
/* hidden özniteliği, display veren sınıfa yenilmesin (figure, ızgara, şerit) */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* Koyu zeminde (hero, koyu bölümler, mobil menü, büyük görünüm, altbilgi) odak çerçevesi krem */
.dark :focus-visible, .hero :focus-visible, .sheet :focus-visible, .lb :focus-visible, .on-dark :focus-visible, .qhead :focus-visible, main [data-tone="dark"] :focus-visible { outline-color: var(--cream); }
/* Sayfa içi bağlantının hedefi sabit header'ın altında kalmasın.
   :where → özgüllük 0; QR menünün kendi .qcat değeri (menu.css) geçerli kalır. */
:where(main [id]) { scroll-margin-top: 84px; }
/* Görünmez ama okunur (ekran okuyucu, arama motoru) */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 350;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Ton değişkenleri (bölüm 4b): yazı, aksan, sessiz yazı, saç çizgi.
     Varsayılan açık ton; ana sayfada body[data-tone] ile değişir. */
  --fg: var(--ink); --accent: var(--green); --quiet: var(--coffee); --soft: rgba(32, 33, 29, .7);
  --hair: var(--line); --hair-soft: var(--line-soft);
}
body[data-tone="dark"] {
  --fg: var(--cream); --accent: var(--gold-light); --quiet: rgba(230, 220, 209, .8); --soft: rgba(230, 220, 209, .78);
  --hair: var(--line-light); --hair-soft: rgba(230, 220, 209, .12);
}
/* Ana sayfa: zemin sıcak beyaz; metin ölçeği büyür — telefonda hiçbir
   paragraf 16 px'in, geniş ekranda (1440) 18 px'in altında değildir. Küçük
   versal etiketler (eyebrow, sayaç, altyazı) main içinde 12 px. */
body[data-page="home"] { --canvas: var(--white-warm); --t-lede: clamp(1.125rem, 1.6vw, 1.5rem); --t-body: clamp(1rem, .8125rem + .4vw, 1.25rem); }
[data-page="home"] main { --t-micro: .75rem; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--green-deep); color: var(--white); padding: .75rem 1.25rem;
  font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase;
}
.skip:focus { left: 0; }

/* Kâğıt dokusu — çok hafif, beyazı canlandırır (AI hissini kıran detay).
   Telefonda (dokunmatik) karıştırma kipi yok: tam ekran multiply katmanı,
   altında her şey hareket ederken her karede ek bir GPU geçişi istiyordu
   (pil, ısınma). Normal kipte daha düşük opaklık aynı dokuyu verir. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}
@media (pointer: coarse) { body::after { mix-blend-mode: normal; opacity: .1; } }

/* --- 3. Tipografi --------------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: 400; line-height: .94; letter-spacing: -.015em; }
/* Ephesis'in yalnız düz kesimi var; kendi eğimi italik aksanı veriyor.
   font-style: italic tarayıcıya sahte bir eğim daha ekletiyordu. */
.script  { font-family: var(--font-script); font-style: normal; font-synthesis: none; font-weight: 400; line-height: 1.06; letter-spacing: .01em; }
.eyebrow { display: block; font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .22em; line-height: 1.4; }
.lede    { font-size: var(--t-lede); line-height: 1.55; font-weight: 300; }
.muted   { color: var(--soft); }
.coffee  { color: var(--quiet); }

/* Görünen yazı küçük, dokunma alanı 44 px: kutu yukarı doğru büyür, çizgi
   yazının hemen altında kalır */
.link { position: relative; display: inline-flex; align-items: flex-end; min-height: 44px; padding-bottom: .34em; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .22em; font-weight: 500; }
.link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform-origin: right; transition: transform var(--d-micro) var(--ease-soft); }
.link:hover::after { animation: sweep 480ms var(--ease-soft); }
@keyframes sweep { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

.btn { display: inline-block; border: 1px solid currentColor; padding: .78rem 1.3rem; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .2em; font-weight: 500; transition: background var(--d-micro) var(--ease-soft), color var(--d-micro) var(--ease-soft); }
.btn:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.on-dark .btn:hover, .dark .btn:hover { background: var(--cream); border-color: var(--cream); color: var(--green-deep); }

/* Eylem düğmesi: saç çizgi çerçeve, köşe yok, gölge yok. Telefonda tam
   genişlik ve 52 px; --fill asıl eylem (Ara, Menü). */
.act { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: 0 1.5rem; border: 1px solid currentColor; font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; line-height: 1.2; text-align: center; transition: background var(--d-micro) var(--ease-soft), color var(--d-micro) var(--ease-soft), border-color var(--d-micro) var(--ease-soft); }
.act:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.act--fill { background: var(--green); border-color: var(--green); color: var(--white); }
.act--fill:hover { background: var(--green-deep); border-color: var(--green-deep); }
.act:active, .abar a:active { opacity: .72; }

/* --- 4. Yerleşim ---------------------------------------------------------- */
.wrap { padding-left: var(--pad-l); padding-right: var(--pad-r); max-width: var(--max); margin-inline: auto; }
.section { padding-block: var(--section); }
.hairline { height: 1px; background: var(--line); border: 0; }
.dark { background: var(--green-deep); color: var(--cream); }
.warm { background: var(--white-warm); }
.soft { background: var(--sand); }

/* --- 4b. Zemin ve ton ---------------------------------------------------- */
/* .backdrop sayfanın zemin rengidir (sabit, içeriğin ARKASINDA). Yükseklik
   100lvh: telefonda adres çubuğu açılıp kapanınca katman yeniden boyutlanmaz.
   html'e zemin VERİLMEZ: body'nin zemini köke taşınıp katmanın altında
   boyanır.

   Ana sayfada her bölüm kendi zemini olan opak bir bloktur; zemin ve yazı
   rengi bölümün data-tone değerinden gelir: light sıcak beyaz, dark Folia
   yeşili (cream de tanımlı). Header ve telefonun alt şeridi kendi
   altlarına gelen bloğun tonunu izler (.on-dark / .on-cream;
   .abar[data-on]; app.js initTone).
   .ambient: süzülen zeytin yaprakları katmanı (ambient.js). Yalnız ana
   sayfada kurulur; yeşil bölümlerde görünür, açılışta ve beyaz bölümlerde
   söner (data-leaves="none"). */
.backdrop, .ambient { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
.backdrop { z-index: -2; background-color: var(--canvas); transition: background-color var(--d-scene) var(--ease-inout); }
body[data-tone="dark"] .backdrop { background-color: var(--green); }
body[data-tone="cream"] .backdrop { background-color: var(--cream); }
.ambient { z-index: -1; }
/* Üstte: içerikten yukarıda, alt şeridin (55) ve header'ın (60) altında */
body[data-page="home"] .ambient { z-index: 40; }
main { color: var(--fg); }
/* Bölüm tonları: --ground zemin, --fg yazı, --accent el yazısı ve vurgu,
   --quiet etiket, --soft ikincil yazı, --hair saç çizgi, --num sayaç /
   rakam altını (küçük puntoda da 4,5:1'in üstünde) */
main [data-tone="light"], main [data-tone="cream"] { --fg: var(--ink); --accent: var(--green); --quiet: var(--coffee); --soft: rgba(32, 33, 29, .74); --hair: var(--line); --hair-soft: var(--line-soft); --num: var(--gold); }
main [data-tone="light"] { --ground: var(--white-warm); }
main [data-tone="cream"] { --ground: var(--cream); }
/* Yeşil zemin: el yazısı ve vurgu --gold-pale (Folia yeşilinde 4:1; yalnız
   büyük puntoda), küçük yazı krem (5:1 ve üstü) */
main [data-tone="dark"] { --ground: var(--green); --fg: var(--cream); --accent: var(--gold-pale); --quiet: rgba(230, 220, 209, .84); --soft: rgba(230, 220, 209, .84); --hair: var(--line-light); --hair-soft: rgba(230, 220, 209, .12); --num: var(--gold-pale); }
main .hero[data-tone] { --ground: var(--green-deep); }
/* Altbilgiye bitişen yeşil bölüm onunla aynı koyu yeşildedir (Folia'dan):
   ikisi tek blok okunur. Header ve alt şerit de bu tonu izler (app.js isDeep). */
main [data-tone="dark"][data-ground="deep"] { --ground: var(--green-deep); }
main [data-tone] { background-color: var(--ground); color: var(--fg); }
/* Ana sayfada görseli henüz inmemiş fotoğraf kutusu bölümün tonunda soluk bir
   kutudur (yer tutucu degrade yok); açılış kareleri koyu yeşilden belirir */
[data-page="home"] main .photo::before { content: none; }
[data-page="home"] main .photo { background-color: var(--hair-soft); }
[data-page="home"] .hero__frame .photo { background-color: var(--green-deep); }

/* --- 5. Fotoğraf ---------------------------------------------------------- */
/* --pos: panelden gelen odak noktası ("X% Y%"); app.js doğrulamadan yazmaz.
   Hero kareleri ve kart görselleri de .photo olduğu için aynı kuralla kırpılır. */
.photo { display: block; position: relative; overflow: hidden; background: var(--cream); background-image: var(--src, none); background-size: cover; background-position: var(--pos, center); }
.photo::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(110% 85% at 20% 10%, rgba(255,255,255,.78), transparent 55%),
    radial-gradient(95% 85% at 85% 92%, rgba(65,77,50,.42), transparent 60%),
    linear-gradient(155deg, var(--cream) 0%, var(--coffee-milk) 55%, var(--green) 120%);
}
.photo[style*="--src"]::before { content: none; }
.r45 { aspect-ratio: 4/5; } .r34 { aspect-ratio: 3/4; } .r32 { aspect-ratio: 3/2; } .r11 { aspect-ratio: 1/1; } .r169 { aspect-ratio: 16/9; }

/* Maskeli açılış: kutu ekrana girince maske yukarıdan aşağı açılır,
   fotoğraf hafifçe (1,06'dan) yerine oturur. Bir kez oynar.
   overflow: büyütülmüş fotoğraf sayfaya yatay taşma eklemesin */
.mask { display: block; overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path var(--d-scene) var(--ease-out); }
.mask.in { clip-path: inset(0 0 0 0); }
.mask .photo { transform: scale(1.06); transition: transform 1600ms var(--ease-out); }
.mask.in .photo { transform: none; }

/* --- 6. Logo işareti ------------------------------------------------------- */
/* Logodaki dal (leaf.svg) maske olarak: rengi bağlamdan gelir. Header'da dal
   üstte, FOLIA altta, harf aralığı logodaki gibi geniş; QR menüde yan yana. */
.brand { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; line-height: 1; }
.brand__leaf, .sprig__static, .foot__leaf {
  display: block; aspect-ratio: 403.2 / 222.5; background: currentColor;
  -webkit-mask: url(../img/leaf.svg) center / contain no-repeat;
          mask: url(../img/leaf.svg) center / contain no-repeat;
}
.brand__leaf { width: clamp(28px, 2.3vw, 36px); color: var(--gold); }
.brand__word { font-family: var(--font-display); font-weight: 500; font-size: clamp(1rem, 1.2vw, 1.2rem); letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; }
.brand--row { flex-direction: row; gap: .6rem; }
.brand--row .brand__leaf { width: 30px; color: var(--gold-light); }

/* --- 7. Header ------------------------------------------------------------ */
.head {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(.45rem, 1.6vw, 1.2rem) var(--pad-r) clamp(.45rem, 1.6vw, 1.2rem) var(--pad-l);
  /* Zemin ve yazı, header'ın altına gelen bloğun tonuna kısa bir geçişle
     uyar (app.js initHeader: .on-dark / .on-cream). */
  transition: background-color 420ms var(--ease-inout), color 260ms var(--ease-soft), transform 420ms var(--ease-inout), border-color 420ms var(--ease-inout);
  border-bottom: 1px solid transparent;
}
.head.on-dark { color: var(--cream); }
/* Hero fotoğrafının açık yerlerinde (cam tavan, gökyüzü) de okunsun */
.head.on-dark:not(.pinned) { text-shadow: 0 1px 10px rgba(20,24,17,.5); }
/* Düz zemin + saç çizgi (cam/bulanık zemin yok) */
.head.pinned { background: var(--canvas); border-bottom-color: var(--line-soft); }
.head.pinned.on-cream { background: var(--cream); }
.head.pinned.on-dark { background: var(--green); border-bottom-color: var(--line-light); }
.head.pinned.on-deep { background: var(--green-deep); }
.head.up { transform: translateY(-105%); }
.head__mark { color: var(--green); transition: opacity var(--d-std) var(--ease-soft), visibility 0s; }
.head.on-dark .head__mark { color: inherit; }
.head.on-dark .head__mark .brand__leaf { color: var(--gold-light); }
/* Ana sayfanın açılışında logo hero'nun ortasında; header'daki küçük logo
   hero'nun yarısı geçilene dek gizli. Varsayılan gizli (ilk boyamada da
   görünüp kaybolmasın); app.js initHeader hero geçilince .past-hero ekler. */
[data-page="home"] .head__mark { opacity: 0; visibility: hidden; transition: opacity var(--d-std) var(--ease-soft), visibility 0s linear var(--d-std); }
[data-page="home"] .head.past-hero .head__mark { opacity: 1; visibility: visible; transition: opacity var(--d-std) var(--ease-soft), visibility 0s; }
.head__nav { display: flex; gap: clamp(1.1rem, 2.6vw, 2.4rem); margin-left: auto; }
.head__nav a { padding-block: .85rem; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .2em; font-weight: 500; opacity: .78; transition: opacity var(--d-micro) var(--ease-soft); }
/* Fotoğrafın üstünde soluk yazı okunmuyordu (açık taş, cam tavan) */
.head.on-dark:not(.pinned) .head__nav a { opacity: .95; }
.head__nav a:hover, .head__nav a[aria-current="page"] { opacity: 1; }
/* Bulunulan sayfa: yazının altında ince çizgi */
.head__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .55em; }
.head__right { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.6rem); margin-left: clamp(1rem, 3vw, 2.5rem); }

/* Dil düğmeleri: görünen harf küçük, dokunma alanı 44 px. Seçili dil
   soluklukla değil, altındaki ince çizgiyle ayrılır: seçili olmayan da
   fotoğrafın üstünde okunur (opaklık .9). */
.lang { display: flex; align-items: center; gap: .1rem; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .16em; font-weight: 500; }
.lang button { opacity: .9; transition: opacity var(--d-micro) var(--ease-soft); min-width: 44px; min-height: 44px; padding: 0 .5rem; margin-right: -.16em; text-decoration: underline transparent; text-decoration-thickness: 1px; text-underline-offset: .55em; }
.lang button[aria-pressed="true"] { opacity: 1; text-decoration-color: currentColor; }
.lang button:hover { opacity: 1; }
.lang i { width: 1px; height: 11px; background: currentColor; opacity: .3; display: block; }

/* Menü düğmesi: iki çizgi 26 × 11 px, dokunma alanı 44 × 44 px */
.burger { display: none; width: 44px; height: 44px; position: relative; margin-right: -9px; }
.burger i { position: absolute; left: 9px; right: 9px; height: 1.5px; background: currentColor; transition: transform var(--d-std) var(--ease-out); }
.burger i:first-child { top: 16px; } .burger i:last-child { bottom: 16px; }
body.lock { overflow: hidden; }
@media (max-width: 860px) {
  .head__nav, .head__right .btn { display: none; }
  .head__right { margin-left: auto; }
  .burger { display: block; margin-left: clamp(.25rem, 2vw, 1rem); }
}

/* Mobil menü: tam ekran koyu yeşil. Kapalıyken kırpılı, görünmez ve inert
   (app.js setSheet); klavye kapalı bağlantılara giremez. Açılınca perde
   yukarıdan iner, bağlantılar 60 ms arayla yükselir, en son alt bilgi gelir.
   Görünürlük, kapanış süpürmesi bitince kalkar. */
.sheet {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background: var(--green-deep); color: var(--cream);
  padding: env(safe-area-inset-top, 0px) var(--pad-r) max(1.25rem, env(safe-area-inset-bottom, 0px)) var(--pad-l);
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 760ms var(--ease-out), visibility 0s linear 760ms;
}
.sheet.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 760ms var(--ease-out), visibility 0s linear 0s; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--line-light); }
.sheet__brand .brand__leaf { color: var(--gold-light); width: 26px; }
.sheet__brand .brand__word { font-size: 1rem; }
.sheet .close { min-height: 44px; min-width: 44px; padding: 0 .75rem; margin-right: -.75rem; font-size: var(--t-micro); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.sheet__nav { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(1.25rem, 5vh, 3rem); }
.sheet__nav a {
  display: flex; align-items: baseline; gap: .9rem; width: fit-content;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 11.4vw, 3.75rem); line-height: 1.14;
  opacity: 0; transform: translateY(.45em);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.sheet__nav { counter-reset: sheet; }
.sheet__nav a:not([hidden]) .sheet__n::before { counter-increment: sheet; content: counter(sheet, decimal-leading-zero); }
.sheet__n { min-width: 2.2em; font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 500; letter-spacing: .2em; opacity: .6; transform: translateY(-.9em); }
.sheet__nav a[aria-current="page"] .sheet__n { color: var(--gold-light); opacity: 1; }
.sheet__nav a[aria-current="page"] span + span { box-shadow: inset 0 -1px 0 rgba(230,220,209,.5); }
.sheet.open .sheet__nav a { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.sheet.open .sheet__nav a:nth-child(1) { transition-delay: 180ms; }
.sheet.open .sheet__nav a:nth-child(2) { transition-delay: 240ms; }
.sheet.open .sheet__nav a:nth-child(3) { transition-delay: 300ms; }
.sheet.open .sheet__nav a:nth-child(4) { transition-delay: 360ms; }
.sheet.open .sheet__nav a:nth-child(5) { transition-delay: 420ms; }
.sheet__foot { display: grid; gap: .3rem; padding-top: 1.1rem; border-top: 1px solid var(--line-light); font-size: .875rem; line-height: 1.55; opacity: 0; transition: opacity 400ms var(--ease-soft); }
.sheet.open .sheet__foot { opacity: 1; transition: opacity 800ms var(--ease-soft) 520ms; }
.sheet__foot .status { margin: 0 0 .25rem; }
.sheet__week .week__d { opacity: .7; margin-right: .5em; }
.sheet__addr { opacity: .86; }
.sheet__contact { display: flex; flex-wrap: wrap; column-gap: 1.4rem; }
.sheet__contact a { display: inline-flex; align-items: center; min-height: 44px; }
.sheet .lang { margin-left: -.5rem; }

/* --- 8. Hero -------------------------------------------------------------- */
/* Kareler koyu yeşil zeminden belirir (app.js ilk karenin görseli inince .on
   ekler). Üstte yalnız logonun kilidi: dal, FOLIA, — ALL DAY KITCHEN —.
   Yerleşim, app.js'teki HERO_MQ ile aynı sorguya bağlı: geniş ekranda kilit
   solda ve dikey ortada, telefonda / dikey tablette alt üçte birde ortada. */
.hero { position: relative; height: 100svh; min-height: 560px; color: var(--cream); overflow: hidden; background: var(--green-deep); }
.hero__stage { position: absolute; inset: 0; }
.hero__frame { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity 1800ms var(--ease-out), transform 9000ms linear; }
.hero__frame.on { opacity: 1; transform: scale(1); }
.hero__frame .photo { width: 100%; height: 100%; transform: none; background-color: var(--green-deep); transition: opacity 700ms var(--ease-soft); }
/* Perde açıldıktan sonra inen görsel birden değil, solarak belirir (app.js) */
.hero__frame .photo.is-pending { opacity: 0; }
/* Sıradaki kare: çizildi ama görünmez sayılacak kadar saydam — tarayıcı
   görseli geçişten ÖNCE çözer, geçişte takılma olmaz */
.hero__frame.next { opacity: .002; }
.hero__frame .photo::before { content: none; }

/* Karartma: yazı hangi fotoğrafın üstüne gelirse gelsin okunsun (kareler
   panelden değişiyor). Geniş ekranda soldan sağa açılan katman kilidin
   arkasını, üstteki katman header'ı koyulaştırır (beyaz duvarlı karede de
   menü yazıları 4,5:1); sağ taraf ve fotoğrafın ortası açık kalır. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(24,30,20,.66) 0%, rgba(24,30,20,.5) 24%, rgba(24,30,20,.16) 50%, rgba(24,30,20,0) 68%),
    linear-gradient(180deg, rgba(24,30,20,.78) 0%, rgba(24,30,20,.62) 7%, rgba(24,30,20,.3) 14%, rgba(24,30,20,0) 26%, rgba(24,30,20,0) 72%, rgba(24,30,20,.34) 100%);
}
.hero__inner { position: relative; z-index: 2; height: 100%; max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: flex-start; }
.hero__lockup { display: grid; justify-items: center; text-align: center; padding-top: 4vh; text-shadow: 0 1px 2px rgba(20,24,17,.3), 0 0 28px rgba(20,24,17,.42); }

/* Dal: kutu boyutu sabit (oran leaf.svg'nin), düzen kayması yok. Statik dal
   ve three.js tuvali aynı kutuda üst üste durur; taşma payı SVG'nin içinde. */
.sprig { position: relative; aspect-ratio: 403.2 / 222.5; }
.sprig__static { position: absolute; inset: 0; }
/* Dal / FOLIA genişlik oranı logodaki gibi ~0,5 (altbilginin kilidiyle aynı) */
.hero__sprig { width: clamp(130px, 13.5vw, 210px); margin-bottom: clamp(.2rem, .8vw, .7rem); color: var(--gold-light);
  /* harflerin gölgesiyle aynı: dal desenli karede (gelato) de seçilsin */
  filter: drop-shadow(0 1px 2px rgba(20,24,17,.3)) drop-shadow(0 0 10px rgba(20,24,17,.32)); }

.hero__title { font-weight: inherit; }
.hero__word { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(3.5rem, 7.2vw, 7.5rem); line-height: .86; letter-spacing: .15em; margin-right: -.15em; text-transform: uppercase; white-space: nowrap; }
.hero__tag { display: flex; align-items: center; justify-content: center; gap: .95em; margin-top: clamp(1rem, 1.8vw, 1.6rem); font-size: clamp(.75rem, .85vw, .875rem); font-weight: 500; letter-spacing: .34em; text-transform: uppercase; white-space: nowrap; }
.hero__tag > span { margin-right: -.34em; }
.hero__tag i { display: block; width: clamp(24px, 3vw, 44px); height: 1px; background: currentColor; opacity: .8; }

/* Açılış: ilk kare koyu yeşilden belirir (app.js, görsel inince); logonun
   kilidi bir kez, yavaşça yukarı doğru belirir. Hareket azaltılmışsa
   baştan son halinde (§16). Zeytin dalı sayfa açılırken üç boyutlu
   olarak oluşur (leaf.js; app.js initSprig) ve kilidin üstünde kalır;
   WebGL yoksa ya da hareket azaltılmışsa statik çizim (leaf.svg) görünür. */
.hero__lockup { animation: lockup-in 1600ms var(--ease-out) 250ms both; }
@keyframes lockup-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Canlı dal beklenirken statik çizim gizlidir (app.js initSprig) */
.hero__sprig.is-wait .sprig__static { visibility: hidden; }

/* Alt satır: solda aşağı inme işareti (ince, duran bir çizgi; dokunma
   alanı 44 px), sağda kare geçişini durdurma düğmesi. */
.hero__foot { position: absolute; z-index: 2; left: var(--pad-l); right: var(--pad-r); bottom: calc(clamp(.4rem, 2vw, 1.2rem) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: flex-end; gap: .7rem; min-height: 44px; pointer-events: none; }
.hero__cue { position: absolute; left: 0; bottom: 0; pointer-events: auto; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -21.5px; color: var(--cream); }
.hero__cue i { display: block; width: 1px; height: 32px; background: rgba(230,220,209,.6); }

/* Durdur / sürdür: iki çubuk ↔ üçgen. Görünen işaret küçük, alan 44 px. */
.hero__pause { pointer-events: auto; width: 44px; height: 44px; margin-right: -13px; display: grid; place-items: center; color: var(--cream); opacity: .78; transition: opacity var(--d-micro) var(--ease-soft); }
.hero__pause:hover, .hero__pause:focus-visible { opacity: 1; }
.hero__pause[hidden] { display: none; }
.hero__pause[aria-pressed="true"] i { width: 0; height: 0; border-right: 0; border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.hero__pause i { display: block; width: 9px; height: 11px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }

/* Telefon ve dikey tablet (app.js HERO_MQ ile aynı): kilit ekranın
   ortasında, biraz yukarıda. Kilidin arkasında yumuşak, oval bir karartma
   (açık karede de okunur), tepede header'ın altı koyu; fotoğrafın geri
   kalanı açık. */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  /* Üst durak header'ın altını koyulaştırır: TR | EN ve menü düğmesi açık
     karelerde de (beyaz tente, cam tavan) 4,5:1'in üstünde kalsın. Üstteki
     koyu bant telefonun durum çubuğuyla (theme-color koyu yeşil) birleşir. */
  .hero__scrim {
    background:
      radial-gradient(ellipse 95% 38% at 50% 46%, rgba(24,30,20,.5) 0%, rgba(24,30,20,.28) 45%, rgba(24,30,20,0) 75%),
      linear-gradient(180deg, rgba(24,30,20,.8) 0%, rgba(24,30,20,.6) 7%, rgba(24,30,20,.22) 14%, rgba(24,30,20,.06) 24%, rgba(24,30,20,.06) 72%, rgba(24,30,20,.42) 100%);
  }
  .hero__inner { justify-content: center; align-items: center; padding-bottom: 8svh; }
  .hero__lockup { padding-top: 0; }
  .hero__sprig { width: clamp(104px, 30vw, 170px); }
  .hero__word { font-size: clamp(3.3rem, 16.5vw, 6.25rem); }
  .hero__foot { justify-content: center; }
  .hero__pause { position: absolute; right: 0; margin-right: -13px; }
}
/* Yatay tutulan telefon: hero ekrana sığar, kilit küçülür */
@media (orientation: landscape) and (max-height: 520px) {
  .hero { min-height: 0; }
  .hero__lockup { padding-top: 8vh; }
  .hero__sprig { width: 112px; margin-bottom: 0; }
  .hero__word { font-size: 2.9rem; }
  .hero__tag { margin-top: .7rem; }
}

/* --- 9. Ana sayfa: sağlı sollu bölümler ----------------------------------- */
/* Her bölüm (.ch) opak bir bloktur (zemin: §4b), sırayla beyaz ve Folia
   yeşili. Geniş ekranda iki eşit yarı: bir yarıda ekranın kenarına dayanan
   büyük fotoğraf, öbüründe yazı (.ch--tl yazı solda · .ch--tr yazı sağda).
   Telefonda fotoğraf üstte, ekranın %88'i genişliğinde, bir sağa bir sola
   yaslı; yazı altta. Hareket: reveal (§16) ve yeşil bölümlerde arkada süzülen yapraklar (§4b).
   Bölümlerde numara ya da üst etiket yoktur: doğrudan başlıkla açılır. */
.ch { position: relative; padding-block: clamp(4.5rem, 13vh, 10rem); overflow: hidden; }
main [data-tone] .eyebrow { color: var(--quiet); }

.ch__grid { display: grid; row-gap: clamp(2.2rem, 7vw, 3rem); }
.ch__text { display: grid; align-content: center; justify-items: start; gap: clamp(1rem, 2.2vw, 1.5rem); padding-inline: var(--pad-l) var(--pad-r); }
.ch__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.75rem, 5.4vw, 5.25rem); line-height: .98; letter-spacing: -.018em; text-wrap: balance; }
/* Giriş başlığı: iki satır ince Cormorant, el yazısı yalnız imza satırında
   ("Tam Urla."); iri ve kalın durmasın diye bölüm başlıklarından az büyük */
.intro__title { font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: 1.04; letter-spacing: -.012em; }
.intro__title .script { margin-top: .12em; font-size: 1.12em; line-height: 1; }
.ch__title .script { display: inline-block; font-size: 1.08em; line-height: 1.04; color: var(--accent); }
.ch .lede { max-width: 36ch; }
.ch__words { font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .22em; line-height: 1.9; color: var(--quiet); }
.ch__today { width: 100%; max-width: 30rem; padding-top: .9rem; border-top: 1px solid var(--hair); font-family: var(--font-display); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.35; }
.ch__today b { display: block; margin-bottom: .2rem; font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: var(--quiet); }
.ch__today small { font-family: var(--font-sans); font-size: var(--t-body); color: var(--soft); }
.ch__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 2rem; }
.ch__meta .status { margin: 0; }
.ch__acts { display: grid; gap: .6rem; width: 100%; }
.ch__acts .act { min-height: 52px; }
@media (min-width: 560px) { .ch__acts { display: flex; flex-wrap: wrap; width: auto; } .ch__acts .act { min-width: 200px; } }

/* Fotoğraf yarısı. Çerçeve fotoğrafın kendi yönüne uyar (app.js setPhoto
   data-shape yazar): dikey fotoğraf 4:5, yatay fotoğraf 3:2 — yatay kare
   dik bir kutuya zorla kırpılmaz. Fotoğraf sayfanın kenar boşluğu içinde
   durur, ekranın kenarına dayanmaz. Telefonda yazının üstünde, bir sağa bir
   sola hafifçe yaslı (genişliğin %86'sı). */
.ch__media { order: -1; min-width: 0; width: 86%; margin: 0; }
.ch--tl .ch__media { margin-left: auto; margin-right: var(--pad-r); }
.ch--tr .ch__media { margin-right: auto; margin-left: var(--pad-l); }
.ch__media .photo { aspect-ratio: 4/5; }
.ch__media .photo[data-shape="wide"] { aspect-ratio: 3/2; }
.ch__cap { display: grid; gap: .3rem; padding-top: 1.1rem; }
.ch__cap .script { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.05; color: var(--accent); }
.ch__capline { color: var(--soft); }

/* Giriş: iki fotoğraf, büyüğü solda; küçüğü sağda, alta hizalı. Panelde
   tek görsel varsa o tek başına. İkisi de 4:5. */
.ch .ch__pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--col-gap); align-items: end; width: auto; margin-inline: var(--pad-l) var(--pad-r); }
.ch__pair:has(> figure[hidden]) { grid-template-columns: minmax(0, 1fr); }
.ch__pair .ch__fig { margin: 0; }
.ch__pair .photo, .ch__pair .photo[data-shape="wide"] { aspect-ratio: 4/5; }

/* Mekân kareleri: telefonda iki, geniş ekranda üç sütun; hepsi 4:5, düz
   ızgara. Altyazı büyük görünümde (ve düğmenin adında) okunur. */
.ch .mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); align-content: center; width: auto; margin-inline: var(--pad-l) var(--pad-r); }
.mosaic > figure { margin: 0; }
.mosaic .photo, .mosaic .photo[data-shape="wide"] { aspect-ratio: 4/5; }
.mosaic .gal__cap, .thumbs .gal__cap { display: none; }

/* Vitrinden küçük kareler: yazı sütununda tek sıra */
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; width: 100%; max-width: 30rem; }
.thumbs > figure { margin: 0; }

@media (min-width: 960px) {
  .ch { padding-block: clamp(5rem, 12vh, 9rem); }
  .ch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .ch__text { grid-row: 1; width: 100%; max-width: 46rem; justify-self: center; padding-inline: clamp(2.5rem, 6.5vw, 7.5rem); }
  .ch__media { grid-row: 1; order: 0; width: auto; }
  .ch--tl .ch__text { grid-column: 1; }
  .ch--tr .ch__text { grid-column: 2; }
  .ch--tl .ch__media { grid-column: 2; margin: 0; padding: 0 var(--pad-r) 0 clamp(1rem, 2.5vw, 2.5rem); }
  .ch--tr .ch__media { grid-column: 1; margin: 0; padding: 0 clamp(1rem, 2.5vw, 2.5rem) 0 var(--pad-l); }
  /* Dikey çerçeve ekranın %82'sinden uzun olmaz; sütunda ortalanır */
  .ch__media > .mask { max-width: min(100%, 66vh); margin-inline: auto; }
  .ch__media > .mask:has(.photo[data-shape="wide"]) { max-width: 100%; }
  .ch__media:has(> .mask .photo[data-shape="wide"]) .ch__cap { padding-top: 1.4rem; }
  .ch--tl .ch__pair, .ch--tl .mosaic { margin: 0; }
  .ch--tr .ch__pair, .ch--tr .mosaic { margin: 0; }
  .ch .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 9g. Telefon ve dikey tablet: fotoğraf kenardan kenara, yazı onun altına
   biraz binen bir kart. Kart bir bölümde sola, sonrakinde sağa yaslı
   (.ch--tl / .ch--tr): sağlı sollu akış telefonda da sürer. Bölümün üst
   boşluğu yok (fotoğraf bölümün tepesinde), alt boşluğu kısa.
   Giriş (iki fotoğraf; yazı önce), mekân kareleri ve Ziyaret (fotoğrafın
   altında el yazısı satır) kartsızdır. */
@media (max-width: 959px) {
  .ch { padding-block: 0 clamp(3.2rem, 9vh, 4.5rem); }
  .ch__grid { row-gap: 0; }
  .ch .ch__media { width: 100%; margin: 0; }
  .ch__media .photo { aspect-ratio: 4/5; }
  .ch__media .photo[data-shape="wide"] { aspect-ratio: 4/3; }
  .ch__text { position: relative; z-index: 1; width: 90%; margin-top: -3.25rem; padding-top: clamp(1.4rem, 5vw, 1.8rem); background: var(--ground); }
  .ch--tl .ch__text { margin-right: auto; padding-inline: var(--pad-l) clamp(1.2rem, 5vw, 1.6rem); }
  .ch--tr .ch__text { margin-left: auto; padding-inline: clamp(1.2rem, 5vw, 1.6rem) var(--pad-r); }
  /* Kartsız bölümler: üst boşluk geri gelir, yazı tam genişlikte */
  .ch--intro, .ch--grid, .ch--gal { padding-top: clamp(3.2rem, 9vh, 4.5rem); }
  .ch--intro .ch__text, .ch--grid .ch__text, .ch:has(.ch__cap) .ch__text { width: 100%; margin-top: 0; padding-inline: var(--pad-l) var(--pad-r); background: none; }
  .ch:has(.ch__cap) .ch__text { padding-top: clamp(1.8rem, 6vw, 2.4rem); }
  .ch__cap { padding-inline: var(--pad-l) var(--pad-r); }
  /* Giriş: önce yazı, sonra iki fotoğraf */
  .ch--intro .ch__pair { order: 1; margin-top: clamp(2rem, 7vw, 2.6rem); }
  .ch--grid .mosaic { margin-bottom: clamp(1.6rem, 6vw, 2.2rem); }
  /* Folia'dan: başlık solda, "Tüm galeri" altında */
  .ch--gal .ch__head { flex-direction: column-reverse; align-items: flex-start; }
  .ch--gal .ch__headtext { justify-items: start; margin-left: 0; text-align: left; }
}

/* 9a. Bugünün gelato çeşitleri: menü kartı gibi alt alta, saç çizgili; her
   satırın başında logonun küçük dalı (app.js initFlavours) */
.flavours { display: grid; gap: .5rem; width: 100%; max-width: 24rem; }
.flavours__k { font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .22em; color: var(--quiet); }
.flavours__list li { display: flex; align-items: center; gap: .85rem; padding-block: .55rem; border-bottom: 1px solid var(--hair); font-family: var(--font-display); font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: 1.15; }
.flavours__list .brand__leaf { flex: none; width: 20px; color: var(--accent); }

/* 9b. Ziyaret: bilgi satırları saç çizgiyle ayrılır; solda etiket, sağda
   değer (telefonda alt alta) */
.facts-list { width: 100%; }
.fact { display: grid; gap: .35rem; padding-block: 1.1rem; border-top: 1px solid var(--hair); }
.fact:last-child { border-bottom: 1px solid var(--hair); }
.fact dt { font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .22em; line-height: 1.4; color: var(--quiet); }
.fact dd { margin: 0; }
.fact .status { margin-top: .15rem; }
.fact .link { min-height: 40px; }
@media (min-width: 640px) {
  .fact { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1.6rem; }
  .fact dt { grid-row: 1 / span 4; padding-top: .55rem; }
  .fact dd { grid-column: 2; }
}
.fact__hours { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.fact__hours > span { white-space: nowrap; }
.fact__hours i { font-style: normal; color: var(--quiet); }
.fact__hours .visit__closed { font-size: .7em; white-space: normal; }
.fact__week { line-height: 1.7; color: var(--soft); }
.fact__week .week__d { display: inline-block; min-width: 5.5em; color: var(--quiet); }
.fact__v { font-family: var(--font-display); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.3; }
.fact__v a { display: inline-flex; align-items: center; min-height: 44px; }

/* 9c. Folia'dan: başlık sağda (dal karşı yana geçer); solda "Tüm galeri". Altında kenardan kenara film şeridi
   (app.js initReel): kareler aynı yükseklikte, panelin oranlarıyla, ağır
   ağır sola akar; imleç ya da odak üstündeyken ve ekran dışındayken durur. Altyazı fotoğrafın içinde, alttan hafif bir
   karartmayla, üstüne gelince belirir (dokunmatikte büyük görünümde). */
.ch--gal .ch__head { display: flex; flex-wrap: wrap-reverse; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.ch__headtext { display: grid; justify-items: end; gap: .6rem; margin-left: auto; text-align: right; }

.reel { --reel-h: clamp(230px, 40vh, 460px); overflow: hidden; }
.reel__track { display: flex; width: max-content; animation: reel var(--reel-dur, 60s) linear infinite; will-change: transform; }
.reel__set { display: flex; gap: var(--col-gap); padding-right: var(--col-gap); }
.reel__item { flex: none; margin: 0; }
.reel .gal__open { position: relative; display: block; width: auto; overflow: hidden; }
.reel__item .photo { height: var(--reel-h); width: auto; transition: transform 1200ms var(--ease-out), opacity 700ms var(--ease-soft); }
.reel__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.1rem 1rem; background: linear-gradient(180deg, rgba(17, 21, 14, 0), rgba(17, 21, 14, .62)); color: var(--cream); font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; line-height: 1.4; text-align: left; opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ease-soft), transform 520ms var(--ease-out); }
.reel .gal__open:hover .reel__cap, .reel .gal__open:focus-visible .reel__cap { opacity: 1; transform: none; }
.reel .gal__open:hover .photo { transform: scale(1.04); }
.reel .gal__open:focus-visible { outline-offset: -3px; }
.reel:hover .reel__track, .reel:focus-within .reel__track, .reel.is-off .reel__track { animation-play-state: paused; }
@keyframes reel { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 759px) { .reel { --reel-h: clamp(210px, 32vh, 300px); } }

/* 9d. Yeşil zeminde düğmeler ve altyazılar; ana sayfanın ızgarası telefonda
   da iki sütun */
main [data-tone="dark"] .act:hover { background: var(--cream); border-color: var(--cream); color: var(--green); }
main [data-tone="dark"] .act--fill { background: var(--cream); border-color: var(--cream); color: var(--green); }
main [data-tone] .gal__cap { color: var(--soft); }
@media (max-width: 639px) { main [data-tone] .gal { columns: 2; } }

/* 9e. Fotoğrafın üstüne gelince çok hafif büyür (yalnız imleçte) */
@media (hover: hover) and (pointer: fine) {
  main [data-tone] .gal__open .mask.in .photo { transition: transform 900ms var(--ease-out); }
  main [data-tone] .gal__open:hover .mask.in .photo { transform: scale(1.035); }
}

/* 9f. Zeytin dalı. Logonun dalı yalnız açılışta, kilidin üstünde oluşur
   (leaf.js) ve orada kalır; sayfa boyunca gezmez. Yuva (.branch-slot):
   bölümün yazı sütununun başındaki durağan süs (leaf.svg maskesi; yeşilde
   açık, beyazda koyu altın). */
.branch-slot { display: block; width: clamp(76px, 7vw, 112px); aspect-ratio: 403.2 / 222.5; margin-bottom: clamp(.6rem, 2vw, 1.4rem); color: var(--num); background: currentColor; -webkit-mask: url(../img/leaf.svg) center / contain no-repeat; mask: url(../img/leaf.svg) center / contain no-repeat; transition: opacity 600ms var(--ease-soft); }

/* Anlık durum: "Şu an açık · kapanış 00:30" (app.js paintStatus). Kapalıyken
   nokta atmaz ve kahve tonuna döner. */
.status { display: flex; align-items: center; gap: .65rem; margin-top: 1.4rem; font-size: var(--t-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.status[hidden] { display: none; }
.status .dot { background: currentColor; }
.status.is-closed { color: var(--quiet); }
.status.is-closed .dot { animation: none; }
.dark .status, .sheet .status { color: inherit; }

/* --- 11. Bir gün, Folia'da (Mekân sayfası) ------------------------------ */
/* Dört saat: fotoğraf ve yazı yan yana, sırayla bir sağa bir sola
   (telefonda alt alta). Şu anki saat dilimi, adının yanında "Şimdi" ile
   işaretlenir (app.js paintDayparts). */
.day__head { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); margin-bottom: clamp(2.6rem, 7vw, 5rem); }
.day__title { font-size: var(--t-xl); }
.day__list { display: grid; gap: clamp(3.2rem, 9vw, 6.5rem); }
.day__row { display: grid; gap: clamp(1.2rem, 3vw, 1.6rem); align-items: center; }
.day__row .photo { aspect-ratio: 3/2; }
.day__txt { display: grid; justify-items: start; gap: .5rem; }
.day__time { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums; color: var(--green); }
.day__label { font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .22em; line-height: 1.4; color: var(--coffee); }
.day__lede { margin-top: .3rem; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.12; }
.day__body { max-width: 40ch; color: rgba(32, 33, 29, .74); }
.day__row.is-now .day__label::after { content: attr(data-now); margin-left: .9em; padding-left: .9em; border-left: 1px solid var(--line); color: var(--green); }
@media (min-width: 860px) {
  .day__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
  .day__row:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .day__row:nth-child(even) > .mask { order: 2; }
}

.dot { width: 5px; height: 5px; background: var(--green); display: inline-block; flex: none; }
.dot.live { animation: pulse 2.6s var(--ease-soft) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .22; } }

/* --- 12. Urla sayfası: bant ve "Bizi bul" --------------------------------- */
.urla__caption { margin-top: .85rem; color: var(--soft); }

/* Bizi bul: adres · saatler · iletişim. Geniş ekranda saç çizgiyle ayrılmış
   üç sütun, telefonda alt alta. (Çizim harita kaldırıldı.) */
.find { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); }
.facts { display: grid; gap: clamp(1.4rem, 4vw, 2rem); }
@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .facts__item { padding-right: clamp(1rem, 2.4vw, 2rem); }
  .facts__item + .facts__item { border-left: 1px solid var(--hair); padding-left: clamp(1.2rem, 3vw, 2.4rem); }
}
.facts dt { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .22em; color: var(--quiet); }
.facts dd { font-family: var(--font-display); font-size: var(--t-md); line-height: 1.22; margin: .45rem 0 0; }
.facts dd a { display: inline-block; padding-block: .45em; margin-block: -.33em; }
.facts dd.status { margin-top: 1rem; font-family: var(--font-sans); font-size: var(--t-micro); line-height: 1.4; }
.find__cta .act { min-width: min(100%, 280px); }

/* Haftalık saatler (app.js weekHTML): her grup kendi satırında */
.week__row { display: block; }
.week__h { white-space: nowrap; }
.facts .week__d { color: var(--quiet); }

/* --- 13. Galeri ----------------------------------------------------------- */
/* Sütunlu yerleşim: her fotoğraf kendi oranını korur ve sütunun altına
   dizilir, arada beyaz delik kalmaz. Her karenin altında altyazısı (panelin
   caption'ı) görünür: telefonda yalnız fotoğraf dizisi bilgi taşımıyordu. */
.gal { columns: 1; column-gap: var(--col-gap); }
.gal > * { break-inside: avoid; margin: 0 0 var(--col-gap); }
@media (min-width: 640px)  { .gal { columns: 2; } }
@media (min-width: 1024px) { .gal { columns: 3; } }
.gal__cap { margin-top: .6rem; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .2em; line-height: 1.5; color: var(--soft); }
.gal > figure { margin-bottom: calc(var(--col-gap) + .4rem); }
.gal__open { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.gal__open:focus-visible { outline-offset: 4px; }

/* Büyük görünüm: koyu yeşil zemin, fotoğraf kırpılmadan, altında altyazı
   ve sıra. Açılış/kapanış kısa bir solma + çok hafif büyüme. */
.lb { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr auto; background: var(--green-deep); color: var(--cream); padding: env(safe-area-inset-top, 0px) var(--pad-r) env(safe-area-inset-bottom, 0px) var(--pad-l); opacity: 0; transition: opacity 320ms var(--ease-soft); touch-action: pan-y; }
.lb[hidden] { display: none; }
.lb.open { opacity: 1; }
.lb__bar { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line-light); }
.lb__count { font-size: var(--t-micro); letter-spacing: .2em; font-variant-numeric: tabular-nums; opacity: .78; }
.lb__close { min-height: 44px; min-width: 44px; padding: 0 .75rem; margin-right: -.75rem; font-size: var(--t-micro); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
/* Fotoğraf ekranın kalan alanına sığar (contain): dikey sütunda esneyen,
   en küçük boyu 0 olan kutu. (Izgara satırında yüzdelik yükseklik
   çözülmüyordu; dikey fotoğraf kendi boyunda çizilip ekrandan taşıyordu.) */
.lb__fig { min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: clamp(.8rem, 3vh, 1.6rem); }
.lb__fig picture { display: contents; }
.lb__img { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(.97); transition: opacity 260ms var(--ease-soft), transform 520ms var(--ease-out); }
.lb.open .lb__img { transform: none; }
.lb__img.is-out { opacity: 0; }
.lb__cap { flex: none; margin-top: .9rem; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .2em; opacity: .82; text-align: center; min-height: 1.4em; }
.lb__nav { display: flex; justify-content: space-between; border-top: 1px solid var(--line-light); }
.lb__nav[hidden] { display: none; }
.lb__prev, .lb__next { position: relative; min-height: 56px; min-width: 88px; }
.lb__prev::before, .lb__next::before { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.lb__prev::before { left: 6px; transform: translateY(-50%) rotate(45deg); }
.lb__next::before { right: 6px; transform: translateY(-50%) rotate(-135deg); }
.lb__prev::after, .lb__next::after { content: ""; position: absolute; top: 50%; width: 40px; height: 1px; background: currentColor; }
.lb__prev::after { left: 6px; }
.lb__next::after { right: 6px; }

/* --- 14. Footer ----------------------------------------------------------- */
.foot { background: var(--green-deep); color: var(--cream); padding-block: clamp(3.5rem, 8vw, 6.5rem) max(2rem, env(safe-area-inset-bottom, 0px)); }
/* Logonun kilidi: dal, FOLIA, — URLA —. Altbilgi ekrana girince (.in):
   dal kendini çizer (app.js satır içi SVG'yi koyar), harfler 70 ms arayla
   yerine oturur, URLA'nın iki çizgisi dışa doğru uzar. Hareket
   azaltılmışsa ya da SVG gelmezse dal maskeli haliyle baştan görünür. */
.foot__mark { display: inline-grid; justify-items: center; line-height: 1; }
.foot__leaf { width: clamp(96px, 13vw, 180px); color: var(--gold-light); margin-bottom: clamp(.3rem, 1vw, .8rem); }
.foot__leaf.is-svg { background: none; -webkit-mask: none; mask: none; }
.foot__leaf svg { display: block; width: 100%; height: 100%; overflow: visible; }
.foot__leaf .lf-line path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.foot__leaf .lf-fill { opacity: 0; }
.foot__leaf.is-drawn .lf-line path { stroke-dashoffset: 0; opacity: 0; transition: stroke-dashoffset 1300ms var(--ease-inout) var(--d, 0ms), opacity 900ms var(--ease-soft) 1900ms; }
.foot__leaf.is-drawn .lf-fill { opacity: 1; transition: opacity 1000ms var(--ease-soft) 1250ms; }
.foot__word { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(3.4rem, 13vw, 9.5rem); line-height: .86; letter-spacing: .15em; margin-right: -.15em; text-transform: uppercase; }
.foot__word > span { display: inline-block; }
.foot__urla { display: flex; align-items: center; gap: .9em; margin-top: clamp(.8rem, 1.6vw, 1.3rem); font-size: clamp(.75rem, 1vw, .9375rem); font-weight: 500; letter-spacing: .42em; text-transform: uppercase; }
.foot__urla span { margin-right: -.42em; }
.foot__urla i { display: block; width: clamp(28px, 4vw, 56px); height: 1px; background: currentColor; opacity: .6; }
.foot__urla i:first-child { transform-origin: right center; }
.foot__urla i:last-child { transform-origin: left center; }
/* Sıra logonun okunuşu ve hero'daki gibi: önce dal çizilmeye başlar, harfler
   600 ms sonra (dal çizilirken) yerine oturur, en son URLA. */
.foot__mark[data-draw] .foot__word > span { opacity: 0; transform: translateY(.32em); transition: opacity 900ms var(--ease-out) 600ms, transform 1100ms var(--ease-out) 600ms; }
.foot__mark[data-draw] .foot__urla i { transform: scaleX(0); transition: transform 900ms var(--ease-out) 1300ms; }
.foot__mark[data-draw] .foot__urla span { opacity: 0; transition: opacity 900ms var(--ease-out) 1450ms; }
.foot__mark.in .foot__word > span { opacity: 1; transform: none; }
.foot__mark.in .foot__word > span:nth-child(2) { transition-delay: 670ms; }
.foot__mark.in .foot__word > span:nth-child(3) { transition-delay: 740ms; }
.foot__mark.in .foot__word > span:nth-child(4) { transition-delay: 810ms; }
.foot__mark.in .foot__word > span:nth-child(5) { transition-delay: 880ms; }
.foot__mark.in .foot__urla i { transform: none; }
.foot__mark.in .foot__urla span { opacity: 1; }
.foot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem); margin-top: clamp(2.5rem, 7vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line-light); }
@media (max-width: 339px) { .foot__grid { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .foot__grid { grid-template-columns: repeat(4, 1fr); } }
.foot h4 { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .22em; font-weight: 500; opacity: .72; margin-bottom: .6rem; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.foot .week__row { padding-block: .5rem 0; }
.foot .week__d { display: block; opacity: .72; }
.foot__status { margin-top: 1rem; letter-spacing: .12em; }
.nowrap { white-space: nowrap; }
.foot a { transition: opacity var(--d-micro) var(--ease-soft); }
.foot a:hover { opacity: .62; }
.foot__base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: clamp(2.5rem, 6vw, 4rem); font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; opacity: .72; }

/* --- 15. Alt sayfa başlığı ------------------------------------------------ */
.phead { padding-top: clamp(7rem, 16vh, 11rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.phead h1 { font-size: var(--t-xl); }
.phead h1 .script { color: var(--green); font-size: 1.16em; }
.phead .eyebrow { color: var(--coffee); margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.phead p { max-width: 52ch; margin-top: 1.4rem; }

/* Mekân sayfasının kapanışı: yalnız menü (saatler hemen altta, altbilgide) */
.place__end { display: grid; justify-items: start; gap: 1.1rem; margin-top: clamp(3rem, 7vw, 5rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--line); }
/* Mekân görsellerinin altyazısı (panelin caption'ı; galeri sayfasıyla aynı) */
.gal .gal__cap:empty { display: none; }

/* --- 16. Reveal ----------------------------------------------------------- */
/* app.js initReveal: [data-reveal], .mask, .lines ve [data-draw] ekrana
   girince .in alır (maskeli kutuda kırpılmamış kabı izlenir). */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--d-std) var(--ease-out), transform var(--d-std) var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: 90ms; }
[data-delay="2"] { transition-delay: 180ms; }
[data-delay="3"] { transition-delay: 270ms; }
.lines { display: block; overflow: hidden; }
.lines > span { display: block; transform: translateY(105%); transition: transform var(--d-scene) var(--ease-out); }
.in > .lines > span, .lines.in > span { transform: none; }

/* El yazısı başlıklar mürekkep gibi soldan sağa yazılır (bir kez, kap
   açılınca). Ephesis'in kuyrukları kutudan taşar: kırpma payı negatif. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] .script, .script[data-reveal] { display: inline-block; clip-path: inset(-.35em 100% -.45em -.5em); transition: clip-path 1100ms var(--ease-out) 240ms; }
  [data-reveal].in .script, .script[data-reveal].in { clip-path: inset(-.35em -.6em -.45em -.5em); }
}

/* Sayfalar arası yumuşak geçiş (destekleyen tarayıcıda; ötekinde hiçbir şey) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: var(--ease-soft); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .lines > span { transform: none; }
  .mask { clip-path: none; }
  .mask > .photo { transform: none; }
  /* Açılış ilk karede kalır, logonun kilidi baştan görünür; durdurma
     düğmesi gizli (durduracak hareket yok) */
  .hero__lockup { animation: none !important; }
  .hero__frame { transform: none; }
  .hero__pause { display: none; }
  .dot.live { animation: none !important; }
  /* Film şeridi akmaz: tek takım, elle yana kaydırılır */
  .reel { overflow-x: auto; }
  .reel__track { animation: none !important; }
  /* Altbilgi kilidi, mobil menü: son halleri */
  .foot__mark[data-draw] .foot__word > span, .foot__mark[data-draw] .foot__urla span { opacity: 1; transform: none; }
  .foot__mark[data-draw] .foot__urla i { transform: none; }
  .sheet__nav a, .sheet__foot { opacity: 1; transform: none; }
}

/* --- 17b. Duyuru şeridi --------------------------------------------------- */
.ann { padding: clamp(1rem, 2.4vw, 1.7rem) var(--pad-r) clamp(1rem, 2.4vw, 1.7rem) var(--pad-l); border-bottom: 1px solid var(--line); background: var(--canvas); color: var(--ink); }
.ann[hidden] { display: none; }
.ann__row { display: flex; align-items: baseline; gap: clamp(.8rem, 2vw, 1.4rem); flex-wrap: wrap; }
.ann__row + .ann__row { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); }
.ann__k { flex: none; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .22em; color: var(--coffee); }
.ann__v { font-family: var(--font-display); font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; font-variant-numeric: lining-nums; }
.ann__v small { display: block; margin-top: .35rem; font-family: var(--font-sans); font-size: var(--t-body); letter-spacing: 0; text-transform: none; color: rgba(32,33,29,.74); line-height: 1.55; }

/* --- 18. Rezervasyon bloğu ------------------------------------------------ */
.reserve { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .reserve { grid-template-columns: 1fr 1fr; } }
.reserve h2 { font-size: var(--t-xl); }
.reserve h2 .script { color: var(--green); font-size: 1.18em; }
.reserve__note { margin-top: 1.3rem; max-width: 44ch; }

.rcard { border: 1px solid var(--line); background: var(--white); padding: clamp(1.4rem, 3.4vw, 2.4rem); }
.rcard__row { padding-block: clamp(.9rem, 2vw, 1.15rem); border-bottom: 1px solid var(--line-soft); }
.rcard__row:first-child { padding-top: 0; }

.rcard__k { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .22em; color: var(--coffee); }
.rcard__v { display: block; margin-top: .4rem; font-family: var(--font-display); font-size: var(--t-md); line-height: 1.22; }
.rcard__v a { display: inline-flex; align-items: center; min-height: 44px; }
.rcard__v a:hover { color: var(--green); }
/* Telefonda alt alta, tam genişlik, 52 px; geniş ekranda yan yana */
.rcard__acts { display: grid; gap: .6rem; margin-top: clamp(1.3rem, 3vw, 1.9rem); }
.rcard__acts .act { min-height: 52px; }
@media (min-width: 560px) { .rcard__acts { grid-template-columns: repeat(3, auto); justify-content: start; } .rcard__acts .act { min-height: 48px; } }

/* --- 19. Form -------------------------------------------------------------- */
.form { display: grid; gap: clamp(1.1rem, 2.4vw, 1.6rem); max-width: 660px; }
.form__row { display: grid; gap: clamp(1.1rem, 2.4vw, 1.6rem); }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .2em; color: var(--coffee); margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; color: var(--ink); padding: .55rem 0; outline: 0;
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1.35;
  transition: border-color var(--d-micro) var(--ease-soft);
}
.field textarea { font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--green); }
.field input::placeholder, .field textarea::placeholder { color: rgba(32,33,29,.45); }
.field--select { position: relative; }
.field--select select { appearance: none; -webkit-appearance: none; padding-right: 1.5rem; cursor: pointer; }
.field--select::after { content: ""; position: absolute; right: .25rem; bottom: 1.15rem; width: 7px; height: 7px; border-right: 1px solid var(--coffee); border-bottom: 1px solid var(--coffee); transform: rotate(45deg); pointer-events: none; }
.field .msg { display: none; margin-top: .4rem; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--coffee); }
.field.err input, .field.err select, .field.err textarea { border-bottom-color: var(--coffee); }
.field.err .msg { display: block; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 3vw, 1.8rem); margin-top: .4rem; }
.form__note { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .14em; color: rgba(32,33,29,.7); max-width: 34ch; line-height: 1.8; }
.form button[type="submit"] { min-height: 48px; border: 1px solid var(--ink); padding: .8rem 1.6rem; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .2em; font-weight: 500; transition: background var(--d-micro) var(--ease-soft), color var(--d-micro) var(--ease-soft), border-color var(--d-micro) var(--ease-soft); }
.form button[type="submit"]:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.form button[disabled] { opacity: .45; pointer-events: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__error { margin-top: .6rem; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--coffee); border-left: 2px solid var(--coffee); padding-left: .7rem; }
.form__error[hidden] { display: none; }

.form-done { display: none; border-top: 1px solid var(--line); padding-top: clamp(1.5rem, 4vw, 2.2rem); max-width: 44ch; }
.form-done.on { display: block; }
.form-done h3 { font-family: var(--font-script); font-style: italic; font-size: var(--t-script); color: var(--green); line-height: 1.1; }
.form-done p { margin-top: .7rem; }
.form.hidden { display: none; }

/* --- 20. Telefonda hızlı eylemler ------------------------------------------ */
/* Hero geçilince alttan çıkar (app.js initActions): Menü · Ara · Yol tarifi.
   Altındaki bloğun tonunda düz zemin (sayfa zemini / krem / koyu yeşil), üstte saç çizgi, köşe yok; ana sayfa çubuğu (iPhone) için
   güvenli alan payı. Mobil menü açıkken ve altbilgi ekrandayken çekilir;
   altbilgideki hiçbir şeyin üstüne binmez. Geniş ekranda hiç yok. */
.abar { display: none; }
@media (max-width: 760px) {
  html { scroll-padding-bottom: calc(var(--abar-h) + env(safe-area-inset-bottom, 0px) + 12px); }
  .abar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    /* Menü düğmesi panelde bağlantı girilene dek gizli: şerit kalan
       düğmelere eşit bölünür (Ara · Yol tarifi) */
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--canvas); color: var(--ink); border-top: 1px solid var(--line);
    transform: translateY(101%); visibility: hidden;
    /* Zemin ve yazı, şeridin ALTINA gelen bloğun tonuna kısa bir geçişle uyar
       (app.js initActions: data-on; §4b) */
    transition: transform 520ms var(--ease-out), visibility 0s linear 520ms, background-color 420ms var(--ease-inout), border-color 420ms var(--ease-inout), color 260ms var(--ease-soft);
  }
  .abar.is-on { transform: none; visibility: visible; transition: transform 520ms var(--ease-out), visibility 0s, background-color 420ms var(--ease-inout), border-color 420ms var(--ease-inout), color 260ms var(--ease-soft); }
  .abar[data-on="cream"] { background: var(--cream); }
  .abar[data-on="dark"] { background: var(--green); color: var(--cream); border-top-color: var(--line-light); }
  .abar[data-on="dark"][data-deep] { background: var(--green-deep); }
  .abar[data-on="dark"] a:not([hidden]) ~ a { border-left-color: rgba(230, 220, 209, .12); }
  .abar[data-on="dark"] .abar__menu { color: inherit; }
  .abar[data-on="dark"] .brand__leaf { color: var(--gold-light); }
  .abar a { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: var(--abar-h); font-size: var(--t-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; }
  .abar a:not([hidden]) ~ a { border-left: 1px solid var(--line-soft); }
  .abar__menu { color: var(--green); }
  .abar .brand__leaf { width: 22px; }
}

/* --- 21. 404 ------------------------------------------------------------- */
.nf__main { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: 2rem; padding-block: clamp(1rem, 3vw, 2rem) max(2rem, env(safe-area-inset-bottom, 0px)); }
.nf__brand { justify-self: start; color: var(--green); }
.nf__body { align-self: center; }
.nf__body .eyebrow { margin-bottom: clamp(1rem, 3vw, 1.6rem); }
.nf__body h1 { font-size: var(--t-xl); }
.nf__body h1 .script { color: var(--green); font-size: 1.16em; }
.nf__body .lede { margin-top: 1.2rem; }
.nf__acts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(1.8rem, 5vw, 2.6rem); }
@media (max-width: 480px) { .nf__acts { display: grid; } .nf__acts .act { min-height: 52px; } }
.nf__info { padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .16em; line-height: 2; color: rgba(32,33,29,.7); }