/* ============================================================
   Diyetisyen uyarlaması — Webflow CSS'ine (site.css) dokunmadan
   yapılan eklemeler. Hepsi burada toplanır.
   ============================================================ */

/* Harita: kaynağın deneme yaptığı ülke vurguları gizli. Harita
   "online görüşme, her yerden" için süs olarak kalır; belirli ülke
   iddiası (uydurma bilgi) olmasın. Mobildeki liste = çalışma alanları. */
.konum-img,
.konum-hover,
.konum-info { display: none !important; }

/* Acilis logosu: kaynagin Lottie logo animasyonu yerine cilek isareti. */
.logo-giris-anim .cilek-giris { display: block; height: auto; transform-origin: 50% 70%;
  animation: cilek-giris 1.15s cubic-bezier(.2,.7,.2,1) .15s both; }
@keyframes cilek-giris {
  from { opacity: 0; transform: translateY(14px) scale(.82); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .logo-giris-anim .cilek-giris { animation: none; } }

/* Baslik logosu: isim markanin kendisi, kaynaktakinden biraz buyuk (kaynak: width 5.94em). Genişlik isme göre: <html style>'daki
   --k-logo-gen (larya üreticisi hesaplar, 2026-11-04); ikinci değer bugünkü isim için. */
.ust-logo { width: var(--k-logo-gen, 9.21em); }

/* Turkce "I" noktasi: menu basliklari kayarak acilan, overflow:hidden bir
   kutuda ve satir yuksekligi %90. Ingilizce buyuk harflerde nokta olmadigi icin
   kaynakta sorun cikmiyordu; "Iletisim"in noktasi kesiliyordu. Ustten ic
   bosluk + ayni miktarda negatif kenar = duzen kaymaz, noktaya yer acilir. */
.menu-baglanti-adi { padding-top: .7em; margin-top: -.7em; }

/* Hero dönen meyve: Lottie yerine tuval oynatıcı (assets/js/donen-oyuncu.js).
   Satır içi + kare: eski Lottie SVG'siyle aynı kutu ve aynı alt boşluk. */
.donen-tuval { display: inline-block; vertical-align: baseline; width: 100%; aspect-ratio: 1 / 1; }

/* Suya düşüş dizisi üstündeki beyaz yazılar: kabarcık ve ışık huzmesi
   üstünde okunurluk (özellikle mobilde kare çok yakın plan). Yalnız bu
   yazılar — bölümdeki krem kartların koyu yazılarına dokunmaz. */
[class*="adim-yazi-ic"],
.adimlar-wrap .baslik-2 {
  text-shadow: 0 1px 2px rgba(20, 28, 10, .35), 0 2px 18px rgba(20, 28, 10, .45);
}
/* Mobil okunurluk (kullanıcı 2026-10-01: "yazılar hiç okunamıyor"): görsel/tuval/fotoğraf üstündeki açık
   renkli yazıların arkasına karartma — her bölümde görselin HEMEN üstünde, yazının altında katmanda
   (z-index değerleri o bölümün katman sırasına göre seçildi; tıklamayı engellemez). Masaüstü olduğu gibi.
   Bölümler: çilekli düşüş (tuval) · tarla (fotoğraf z3, yazılar z4, dönen çilek z5 — çilek kararmaz) ·
   randevu çağrısı (marul z0, yazı z1; üstteki yeşil kutular z1'e alındı) · bitki büyütme (tuval) ·
   kapanış (inekli fotoğraf z1, yazı z2). */
@media screen and (max-width: 767px) {
  .dusus .canvas.w-embed::after, .bitki-tuval .canvas.w-embed::after,
  .vitrin-bolum::after, .alanlar-cta::after, .kapanis-new::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    display: block;   /* Webflow .w-embed::after'a display:table veriyor → tablo kutusu 0 boyutlu kalıyordu */
  }
  .dusus .canvas.w-embed::after {
    background: linear-gradient(to bottom, rgba(14, 20, 6, .7) 0%, rgba(14, 20, 6, .52) 30%, rgba(14, 20, 6, .5) 62%, rgba(14, 20, 6, .66) 100%);
  }
  /* bitki (2026-10-29, çilek fidesi): yazılar dar setin üstündeki düz fonda → karartma yalnız yazının arkasında, bitki ve toprak
     karartılmaz (eskiden düz .46: domates yaprakları yazının arkasındaydı) */
  .bitki-tuval .canvas.w-embed::after {
    background: linear-gradient(to bottom, rgba(14, 20, 6, .42) 0%, rgba(14, 20, 6, .3) 30%, rgba(14, 20, 6, 0) 52%);
  }
  .vitrin-bolum::after {
    z-index: 3; background: linear-gradient(to bottom, rgba(14, 20, 6, .66) 0%, rgba(14, 20, 6, .4) 45%, rgba(14, 20, 6, .52) 100%);
  }
  .alanlar-cta::after { z-index: 0; background: rgba(14, 20, 6, .5); }
  .alanlar-cta .alan-kutu-bilgi-wrap { z-index: 1; }
  .kapanis-new::after {
    z-index: 1; background: linear-gradient(to bottom, rgba(14, 20, 6, .62) 0%, rgba(14, 20, 6, .32) 45%, rgba(14, 20, 6, .66) 100%);
  }
  .dusus .baslik-2, .dusus-second-heading, .vitrin-baslik, .hizmet-avantaj, .alanlar-cta_text,
  .bitki-tuval-heading-wrap, .kapanis-wrap {
    text-shadow: 0 1px 2px rgba(10, 14, 5, .4), 0 2px 16px rgba(10, 14, 5, .45);
  }
}
/* Randevu kartı ve bitki bölümü, kullanıcının görselleriyle (2026-10-29: E8 lahana, E9 çilek fidesi):
   · lahana sol altta da açık yeşil → masaüstü/tablette yazının arkası alttan koyulaşır (beyaz yazıyla kontrast, yazı kutusunun
     en kötü %5'i 1,5 → 5,6; ölçüldü 1440 + 1920). Telefonda yukarıdaki düz karartma. Kutular katmanın üstünde.
   · bitki: kareler gelene dek (load + 2,5 sn) bölüm videonun fonunda dursun — krem başlık kremde kalmasın; renkler ilk kareden
     (geniş set; telefonda dar setin kesiti). */
@media screen and (min-width: 768px) {
  .alanlar-cta::after { content: ""; position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none;
    background: linear-gradient(to top, rgba(14, 20, 6, .7) 0%, rgba(14, 20, 6, .5) 22%, rgba(14, 20, 6, .12) 46%, rgba(14, 20, 6, 0) 60%); }
  .alanlar-cta .alan-kutu-bilgi-wrap { z-index: 1; }
}
.bitki-tuval { background: linear-gradient(90deg, #6b8a4e 0%, #556e2e 20%, #41541d 40%, #262f09 60%, #0d0f00 80%, #000 100%); }
@media screen and (max-width: 767px) {
  .bitki-tuval { background: linear-gradient(90deg, #445920 0%, #394a17 25%, #2e3b10 50%, #1f2505 75%, #101300 100%); }
}

/* Kaynaktan kalan ürün kutuları kaldırıldı (kutunun üstünde kaynağın markası okunuyordu).
   Hizmet kartları: altı kartın hepsi aynı sabit görsel düzeninde; görseller geçici (B7 gelince değişir). */
.hizmet-lottie { display: none !important; }
/* Tarla bölümü: kutu yerine dönen meyve (A7 gelene kadar A1 kareleri — tarayıcı önbellekten okur). */
.vitrin-kap .donen-tuval { display: block; width: 72%; margin: 0 auto; }

/* Açılıştaki isim daha küçük (kullanıcı isteği 2026-10-01: "yazı fontu çok büyük") */
.giris-heading .yazi-160-regular { font-size: 7em; }
/* İsim ölçüleri (2026-11-04'ten beri <html style="--k-…">'da; larya üreticisi her isim için hesaplar — eskiden isim_degistir.py bu
   bloğu yeniden yazardı). Açılıştaki isim tablet/telefonda tek satır; ön yükleme adları karelerine sığar. İkinci değerler bugünkü isim için. */
@media screen and (max-width: 991px) { .giris-heading .yazi-160-regular { font-size: min(5.4em, var(--k-ad-boy-tablet, 7.92vw)); white-space: nowrap; } }
@media screen and (max-width: 767px) { .giris-heading .yazi-160-regular { font-size: min(2.6em, var(--k-ad-boy-mobil, 9.76vw)); } }
.on-yukleme { --oy-ad-oran: var(--k-oy-ad-oran, 11.82); }
.perdeli-yukleme, .pencereli-yukleme { --pdy-ad-oran: var(--k-pdy-ad-oran, 13.86); }
/* Uzun isimler (2026-11-04): bugünkü isimde ve daha kısalarda HİÇBİRİ değişmez, değerler aynısını verir.
   · masaüstü: ad, Randevu al düğmesine kadarki alana (~86vw) sığmıyorsa sığana kadar küçülür (yoksa iki satıra düşüp açılışı itiyordu)
   · telefon: üst logonun kutusu isimle orantılı (site.css'te sabit 6.7em: uzun isimde yazı küçülüyor, kısada büyüyordu)
   · e-posta (isimden türetilir): bugünkünden uzunsa bugünkünün kapladığı genişliğe sığacak kadar küçülür — tablet/telefonda alt bilgide
     yer tam o kadar (masaüstünde sütun sola doğru büyür); menüde telefonda */
@media screen and (min-width: 992px) { .giris-heading .yazi-160-regular { font-size: min(7em, var(--k-ad-boy-masa, 8.89vw)); } }
@media screen and (max-width: 479px) { .ust-logo.mobile { width: var(--k-logo-mobil, 6.7em); } }
@media screen and (max-width: 991px) { .eposta-baglanti { font-size: calc(1em * var(--k-eposta-oran, 1)); } }
@media screen and (max-width: 479px) { .menu-alt-1 a[href^="mailto:"] { font-size: calc(.9em * var(--k-eposta-oran, 1)); } }

/* ── Açılıştaki "Randevu al" = havuzdaki 95'in (şerit perde) cam hap düğmesi (2026-11-01, kullanıcı: "herodaki randevu al butonunu 95
   açılış şerit perdedeki randevu al butonu gibi yapar mısın") ──────────────────────────────────────────────────────────────────
   Yazı üstten alta yuvarlanır, sağda okun dairesi büyür. Kütüphanenin .kps kuralları yalnız .yb2 bölümlerinin içinde geçerli → aynı
   değerler burada açılışa yazıldı (yb-ortak.css "düğme: hap biçimi" + .kps-cam). Boyu sitenin em'iyle (.92em), sitedeki öteki .kps
   düğmeleriyle aynı ölçek. `dugme-transparent` sınıfı duruyor: motor (IX3) açılışta onu belirtir (autoAlpha, 2,63 sn) ve motor hazır
   olmadan gizler (sayfa.css) → giriş aynı; görünüşü burada ezilir. Masaüstü/telefon ayrımı (≤479: başlıktaki gizli, alttaki görünür) aynı.
   Eski düğmenin iki nokta ikonu bu iki düğmeden çıktı (öteki düğmelerde duruyor). */
.giris-hero-content .kps { position: relative; display: inline-flex; align-items: center; gap: .9em; padding: .42em .42em .42em 1.35em;
  border-radius: 99em; font-family: Figtree, Arial, sans-serif; font-size: .92em; font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase; line-height: 1; white-space: nowrap; text-decoration: none; isolation: isolate;
  background-color: rgba(255, 255, 255, .1); color: var(--bej); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background-color .35s, color .35s; }
.giris-hero-content .kps.masaustu-gizli { display: none; }
.giris-hero-content .kps-yazi { display: grid; overflow: hidden; height: 1.15em; }
.giris-hero-content .kps-yazi > span { grid-area: 1 / 1; display: block; line-height: 1.15em; transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
.giris-hero-content .kps-yazi > span + span { transform: translateY(105%); }
.giris-hero-content .kps-ok { position: relative; display: grid; place-items: center; width: 2.35em; height: 2.35em; border-radius: 50%; flex: none; }
.giris-hero-content .kps-ok::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: currentColor; opacity: .14;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .35s; }
.giris-hero-content .kps-ok svg { position: relative; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) {
  .giris-hero-content .kps:hover { background-color: rgba(255, 255, 255, .18); }
  .giris-hero-content .kps:hover .kps-yazi > span:first-child { transform: translateY(-105%); }
  .giris-hero-content .kps:hover .kps-yazi > span + span { transform: translateY(0); }
  .giris-hero-content .kps:hover .kps-ok::before { transform: scale(1.12); opacity: .24; }
  .giris-hero-content .kps:hover .kps-ok svg { transform: translateX(.18em); }
}
@media screen and (max-width: 479px) {
  .giris-hero-content .kps.mobilde-gizli { display: none; }
  .giris-hero-content .kps.masaustu-gizli { display: inline-flex; }
}

/* Diyetisyen fotoğrafı yalnız Hakkımda bölümünde (açılıştaki sağ alt kart 2026-10-01'de kaldırıldı — kullanıcı). */

/* Mobil açılış sade (kullanıcı 2026-10-01): isimden sonra yalnız "Online ve yüz yüze" + randevu düğmesi.
   Sol alttaki "Bedeniniz için. Hayatınız için." bloğu mobilde de görünür (kullanıcı geri istedi). */
.giris-kisa { display: none; }
@media screen and (max-width: 767px) {
  .giris-text-description > :not(.giris-kisa) { display: none; }
  .giris-kisa { display: block; }
}
/* Mobil açılışın alt satırı (kullanıcı 2026-10-01): blok, iPhone'un alt çubuğu açıkken de görünür — 100vh (çubuk
   kapalı boy) − 100svh (çubuk açık boy) kadar yukarıda; svh'yi tanımayan tarayıcı ilk "bottom"u kullanır.
   Dikey telefonda (≤479 px) "Bedeniniz için. / Hayatınız için." solda, açıklama küçük puntoyla sağında — açılış tek
   ekrana sığar. 480–767 px'te (yatay telefon) gövde yazısı küçük olduğundan özgün alt alta düzen kalır. */
@media screen and (max-width: 767px) {
  .giris-bottom-text { bottom: 2em; bottom: calc(2em + 100vh - 100svh); }
}
@media screen and (max-width: 479px) {
  .giris-bottom-text { right: var(--bosluk-mobil); width: auto; flex-flow: row; align-items: flex-end;
    justify-content: space-between; column-gap: 1em; bottom: 1.5em; bottom: calc(1.5em + 100vh - 100svh); }
  .giris-bottom-text .yazi-35-medium { flex: none; width: 6.4em; }
  .giris-bottom-text .yazi-16-regular-caps { flex: 1 1 auto; min-width: 0; max-width: 16em; font-size: .6em; line-height: 1.35; letter-spacing: .02em; }
}
/* Açılış arka planı = oluklu cam ardında bahçe (kullanıcının ürettiği D1-A; 2026-10-13 kesin seçim, B sisli zeytinlik
   denenip bırakıldı). img/acilis-cam-golgeli.avif = A'nın alt-ortasına yumuşak elips gölge (alt yazılar dikey tablette ve
   telefonda açık sise biniyordu; şimdi 11 boyda WCAG eşiğinin üstünde) + ön yükleme kartında bulanık-koyu img/onyukleme-cam*.avif.
   Dikey telefonda görselin yalnız ~%28'lik bir şeridi görünür: %25'te sisli ışık meyvenin arkasında (%35'ten sonra küçük
   açıklama turuncu-açığa biniyor). Site.css'in "0% 0%"ı eski görsel içindi; B'de bu değer %50'ydi. */
@media screen and (max-width: 479px) {
  .giris-hero-bg { object-position: 25% 0%; }
}
/* Krem örtü kutuları (açılış → 2. bölüm ve kapanış): kenarlar kesirli piksele düşünce (1080p'de x=213,53, 4K'da
   y=1438,53; tarayıcı yakınlaştırmasında daha belirgin) arkadaki yeşil hero/kırmızı çilek ince çizgi olarak sızıyordu
   → her kutu sağına ve altına 1 px krem taşar (sonraki kutu üstüne biner, yalnız aradaki aralığı doldurur; ızgara
   çizgisi kutunun kendi kenarlığı, etkilenmez). Satırlar %33,3 yazılmıştı (toplam %99,9): en alttaki 1–2 px hiç
   örtülmüyordu → tam üçte bir. */
.gecis-cizgi { box-shadow: 1px 1px 0 0 var(--bej); }
.giris-gecis-cizgi.first, .giris-gecis-cizgi.second, .giris-gecis-cizgi.third { height: calc(100% / 3); }
/* Mobil (≤479 px) hero → "Çoğu diyet listesi" geçişindeki krem kutuların boyunu sayfa/21-giris-gecis.js yönetir
   (ilk kaydırmada kendiliğinden kapanır). Betik çalışmadan önce de kapalı dursunlar. */
@media screen and (max-width: 479px) { .giris-gecis-cizgi .gecis-cizgi { height: 0%; } }

/* Sayfa zemini krem (Webflow varsayılanı beyazdı): iOS Safari üst/alt çubuk rengini ve sayfa kenarını zeminden alır. */
html, body { background-color: var(--bej); }
/* iOS 26 Safari üst şerit rengi: üst çubuğun en üstünde 12 px, %12 opak şerit. WebKit üst kenarın ortasındaki sabit
   kaptan rengi okur; 10 px'ten ince ya da %10'dan saydam öğeyi atlar, rengi tam doygunlukta kullanır. Rengi
   sayfa/14-ust-bar-renk.js bölüme göre verir; menü açılınca menü (z 2) şeridin üstüne gelir, rengi o belirler.
   Yalnız dokunmatik cihazlarda; masaüstünde görünmez öğe bile eklemeyelim. */
.durum-rengi { display: none; }
@media (hover: none) and (pointer: coarse) {
  .durum-rengi { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 12px; z-index: 1;
    opacity: .12; background-color: #f4ede6; pointer-events: auto; }
}

/* ── Hakkımda bölümü (2026-10-01) — animasyon: sayfa/20-hakkimda.js ─────────────────────────── */
/* overflow-x: clip — yazılar sağdan kayarak gelirken kutudan taşıyordu (mobilde sayfa 8 px genişliyor, iPhone'da
   dikey kaydırırken yana oynuyordu). clip kaydırma kabı oluşturmaz, yapışkan öğeleri bozmaz. */
.hakkimda { position: relative; z-index: 3; background-color: var(--bej); padding: 10em 0 11em; overflow-x: clip; }
.hakkimda-kap { padding: 0 var(--bosluk-masaustu); }
.hakkimda-ust { display: flex; align-items: center; gap: 1.6em; margin-bottom: 5.5em; }
.hakkimda-ust-yazi { color: var(--baslik-rengi); white-space: nowrap; }
.hakkimda-ust-cizgi { flex: 1; height: 1px; background-color: var(--baslik-rengi); opacity: .35; }
.hakkimda-izgara { display: grid; grid-template-columns: minmax(0, 34em) minmax(0, 1fr); column-gap: 8em; align-items: start; }
.hakkimda-foto { margin: 0; }
.hakkimda-foto-cerceve { position: relative; overflow: hidden; border-radius: .6em; aspect-ratio: 4 / 5; }
.hakkimda-foto-ic { position: absolute; inset: -6% 0; }
.hakkimda-foto-ic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hakkimda-foto-not { margin-top: 1.1em; color: var(--baslik-rengi); opacity: .75; text-align: left; }
.hakkimda-metin { padding-top: 1.2em; max-width: 42em; }
.hakkimda-baslik { margin: 0 0 .85em; }
.hakkimda-p { margin: 0 0 1.1em; max-width: 32em; color: var(--yesil-ana); font-size: 1.2em; line-height: 1.5; }
.hakkimda-ilkeler { list-style: none; margin: 3em 0 3.4em; padding: 0; }
.hakkimda-ilke { position: relative; display: grid; grid-template-columns: 4em 12em minmax(0, 1fr); align-items: baseline; column-gap: 1em; padding: 1.35em 0; }
.hakkimda-ilke-cizgi { position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: var(--baslik-rengi); opacity: .3; }
.hakkimda-ilke-no { color: var(--yesil-acik); }
.hakkimda-ilke-baslik { margin: 0; color: var(--baslik-rengi); font-size: 1.45em; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.hakkimda-ilke-yazi { margin: 0; color: var(--yesil-ana); opacity: .8; font-size: 1em; line-height: 1.45; }
.hakkimda-dugme { display: inline-flex; }
@media screen and (max-width: 991px) {
  .hakkimda { padding: 7em 0 8em; }
  .hakkimda-izgara { grid-template-columns: 1fr; row-gap: 3.5em; }
  .hakkimda-foto { max-width: 30em; }
  .hakkimda-metin { padding-top: 0; }
}
@media screen and (max-width: 767px) {
  .hakkimda { padding: 5em 0 6em; }
  .hakkimda-kap { padding: 0 var(--bosluk-mobil); }
  .hakkimda-ust { gap: 1em; margin-bottom: 2.5em; }
  .hakkimda-izgara { row-gap: 2.5em; }
  .hakkimda-foto { max-width: none; }
  .hakkimda-p { font-size: 1.05em; }
  .hakkimda-ilkeler { margin: 2.2em 0 2.6em; }
  .hakkimda-ilke { grid-template-columns: 2.4em minmax(0, 1fr); row-gap: .35em; padding: 1.1em 0; }
  .hakkimda-ilke-yazi { grid-column: 2; }
  .hakkimda-ilke-baslik { font-size: 1.3em; }
}

/* ── Ön yükleme = açılışın İÇİNDE (2026-10-02, kullanıcı: "preloader aynen aynı olsun; ortadaki çilek yerine bizim isim
   yazan yükleniyor; çevresinde kutular, sonra içe alıp yazıyı yok edip aynen büyütüp siteyi açsın" — iç içe preloader).
   Açılışın dört katmanı (fotoğraflı üst kare + üç yeşil kare) sayfa açılır açılmaz ekrandan İÇ İÇE KARELERE kapanır —
   motorun özgün süre/eğrileri, ama CSS ile (motor "load"u bekliyor; eskiden o sürede boş krem ekran vardı). Fotoğraflı
   karede çilek logosu yerine ad harf harf yazılır + YÜKLENİYOR. Yükleme bitip ad bir kez TAM dolunca
   (sayfa/22-on-yukleme.js) .acilis'e "oy-devret" eklenir ve motorun zaman çizelgesi sürer: kareler özgün zamanlamayla
   küçük kareye kapanır, yazı içe alınıp söner, küçük kare 1 sn'de ekrana büyür (motor verisinde ilk evre çıkarıldı,
   kalanı 0.95 sn öne alındı). Ad harfleri ve sığma oranı (--oy-ad-oran) isim_degistir.py ile yenilenir. */
/* katmanlar yükleme boyunca görünsün: Webflow'un "motor hazır değil → gizle" kuralı (1,2,1) özgüllükte;
   #oy-oncelik hiçbir öğede yok, yalnız özgüllüğü (1,3,1) yapmak için */
html.w-mod-js:not(.w-mod-ix3) .acilis-katmanlar > :is(.acilis-katman-1, .acilis-katman-2, .acilis-katman-3, .acilis-katman-4, #oy-oncelik) {
  visibility: visible !important; }
/* iç içe duruş boyları = motor verisindeki ara boylar (≥480 px t-c8622556, ≤479 px t-4b142062). Kare kapanırken
   (oy-devret) motor bu boyu okuyup satır içi değerle küçültür. Fotoğraf gelene kadar üst kare onun ortalama renginde.
   İlk evre ÖLÇEKLE (transform: tarayıcının birleştiricisinde çalışır): genişlik/yükseklik animasyonu açılışta betikler
   ana iş parçacığını meşgul ederken ilk karede ~0.5 sn donuyordu, tam ekran yeşil "sayfa geliyor gidiyor" gibi
   görünüyordu (kullanıcı 2026-10-02). İlk kare de tam ekran değil: düz renkli kareler ekran biçimli, kenarda krem
   boşluklu dikdörtgenlerden (--oy-sx/-sy: sayfa/01b-acilis-olcek.js, <head>) kendi boylarına oturur — özgünün ~0.6.
   sn'sinden devamı gibi; hemen hızlı başlar, yavaşlayarak durur. Fotoğraflı kare (ad) baştan kendi boyunda. */
.w-mod-js .acilis-katmanlar > .acilis-katman-1 { width: 18em; height: 18em; background-color: #68753c; }
.w-mod-js .acilis-katmanlar > .acilis-katman-2 { width: 22em; height: 22em; --oy-sx: var(--oy-sx-2, 1.6); --oy-sy: var(--oy-sy-2, 1.6);
  animation: oy-kutu .9s cubic-bezier(.2, .7, .2, 1) both; }
.w-mod-js .acilis-katmanlar > .acilis-katman-3 { width: 25em; height: 25em; --oy-sx: var(--oy-sx-3, 1.8); --oy-sy: var(--oy-sy-3, 1.8);
  animation: oy-kutu 1s cubic-bezier(.2, .7, .2, 1) .04s both; }
.w-mod-js .acilis-katmanlar > .acilis-katman-4 { width: 30em; height: 30em; --oy-sx: var(--oy-sx-4, 2); --oy-sy: var(--oy-sy-4, 2);
  animation: oy-kutu 1.1s cubic-bezier(.2, .7, .2, 1) .08s both; }
@media screen and (max-width: 479px) {
  .w-mod-js .acilis-katmanlar > .acilis-katman-1 { width: 12em; height: 12em; }
  .w-mod-js .acilis-katmanlar > .acilis-katman-2 { width: 16em; height: 16em; }
  .w-mod-js .acilis-katmanlar > .acilis-katman-3 { width: 19em; height: 19em; }
  .w-mod-js .acilis-katmanlar > .acilis-katman-4 { width: 24em; height: 24em; }
}
/* yalnız başlangıç kare: bitiş ölçek 1 */
@keyframes oy-kutu { from { transform: scale(var(--oy-sx), var(--oy-sy)); } }
.acilis.oy-devret .acilis-katmanlar > * { animation: none; }
.logo-giris-anim { display: none; }

/* ad bloğu: fotoğraflı karenin ortasında (eskiden çilek logosu); kare küçülürken boyu değişmesin (flex: none) */
.on-yukleme { display: none; }
.w-mod-js .on-yukleme { position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 1em; pointer-events: none; font-family: Figtree, Arial, sans-serif; color: var(--bej);
  transition: opacity .32s cubic-bezier(.55, 0, 1, .45), transform .55s cubic-bezier(.65, 0, .35, 1); }
/* motor devralınca: kareler kapanırken yazı içe alınır ve söner */
.acilis.oy-devret .on-yukleme { opacity: 0; transform: scale(.6); }
/* yedek (animasyon durdurulamayan tarayıcı): adı doğrudan dolu göster */
.on-yukleme.dolu .oy-h { color: var(--bej); }
.on-yukleme.dolu .oy-h::before { animation: none; opacity: 0; }
.oy-halka { width: 2em; height: 2em; border-radius: 50%; border: 2px solid rgba(245, 235, 223, .22);
  border-top-color: var(--bej); animation: oy-don 1s linear infinite; }
/* ad ("Dyt. " + ad) fotoğraflı karenin genişliğinin ~%86'sına sığar: --oy-ad-oran = en uzun satırın em genişliği
   (isim_degistir.py; uzun ad iki satıra bölünür, satır sonu <br>) */
.oy-ad { font-size: min(1.6em, calc(15.48em / var(--oy-ad-oran, 12))); font-weight: 500; letter-spacing: -.01em;
  line-height: 1.3; white-space: nowrap; text-align: center; }
@media screen and (max-width: 479px) { .oy-ad { font-size: min(1.2em, calc(10.32em / var(--oy-ad-oran, 12))); } }
/* yalnız yanlardan kırp: üstten/alttan kırpınca ş, ü, ğ işaretleri kesiliyor */
.oy-h { position: relative; display: inline-block; color: rgba(245, 235, 223, .28); clip-path: inset(-.4em 0 -.4em 0); }
.oy-bosluk { width: .28em; }
.oy-h::before { content: attr(data-h); position: absolute; left: 0; top: 0; color: var(--bej); opacity: 0;
  transform: translateX(-120%); animation: oy-harf 2.4s infinite; }
.oy-ad > :nth-child(2)::before { animation-delay: 0.038s; }
.oy-ad > :nth-child(3)::before { animation-delay: 0.076s; }
.oy-ad > :nth-child(4)::before { animation-delay: 0.114s; }
.oy-ad > :nth-child(5)::before { animation-delay: 0.152s; }
.oy-ad > :nth-child(6)::before { animation-delay: 0.190s; }
.oy-ad > :nth-child(7)::before { animation-delay: 0.228s; }
.oy-ad > :nth-child(8)::before { animation-delay: 0.266s; }
.oy-ad > :nth-child(9)::before { animation-delay: 0.304s; }
.oy-ad > :nth-child(10)::before { animation-delay: 0.342s; }
.oy-ad > :nth-child(11)::before { animation-delay: 0.380s; }
.oy-ad > :nth-child(12)::before { animation-delay: 0.418s; }
.oy-ad > :nth-child(13)::before { animation-delay: 0.456s; }
.oy-ad > :nth-child(14)::before { animation-delay: 0.494s; }
.oy-ad > :nth-child(15)::before { animation-delay: 0.532s; }
.oy-ad > :nth-child(16)::before { animation-delay: 0.570s; }
.oy-ad > :nth-child(17)::before { animation-delay: 0.608s; }
.oy-ad > :nth-child(18)::before { animation-delay: 0.646s; }
.oy-ad > :nth-child(19)::before { animation-delay: 0.684s; }
.oy-ad > :nth-child(20)::before { animation-delay: 0.722s; }
.oy-ad > :nth-child(21)::before { animation-delay: 0.760s; }
.oy-ad > :nth-child(22)::before { animation-delay: 0.798s; }
.oy-ad > :nth-child(23)::before { animation-delay: 0.836s; }
.oy-ad > :nth-child(24)::before { animation-delay: 0.874s; }
.oy-ad > :nth-child(25)::before { animation-delay: 0.912s; }
.oy-ad > :nth-child(26)::before { animation-delay: 0.950s; }
.oy-ad > :nth-child(27)::before { animation-delay: 0.988s; }
.oy-ad > :nth-child(28)::before { animation-delay: 1.026s; }
.oy-ad > :nth-child(29)::before { animation-delay: 1.064s; }
.oy-ad > :nth-child(30)::before { animation-delay: 1.102s; }
.oy-ad > :nth-child(31)::before { animation-delay: 1.140s; }
.oy-ad > :nth-child(32)::before { animation-delay: 1.178s; }
.oy-ad > :nth-child(33)::before { animation-delay: 1.216s; }
.oy-ad > :nth-child(34)::before { animation-delay: 1.254s; }
.oy-ad > :nth-child(35)::before { animation-delay: 1.292s; }
.oy-ad > :nth-child(36)::before { animation-delay: 1.330s; }
.oy-ad > :nth-child(37)::before { animation-delay: 1.368s; }
.oy-ad > :nth-child(38)::before { animation-delay: 1.406s; }
.oy-ad > :nth-child(39)::before { animation-delay: 1.444s; }
.oy-ad > :nth-child(40)::before { animation-delay: 1.482s; }
.oy-not { margin: 0; font-size: max(.55em, 9px); font-weight: 600; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(245, 235, 223, .8); }
@keyframes oy-don { to { transform: rotate(360deg); } }
/* harf 0–%20 içeri kayar, %80'e kadar dolu durur, %95'te sağa çıkar; harf aralığı 38 ms: 25 karakterlik ad
   ("Dyt. " + 20 harf) döngünün ~1.39–1.92 sn'si arası TAM dolu (geçiş bu aralıkta, harfler dolu durdurulur) */
@keyframes oy-harf {
  0%, 100% { opacity: 0; transform: translateX(-120%); }
  20%, 80% { opacity: 1; transform: none; }
  95% { opacity: 0; transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .w-mod-js .acilis-katmanlar > * { animation: none; }
  .oy-halka, .oy-h::before { animation: none; }
  .oy-h { color: var(--bej); }
  .w-mod-js .on-yukleme { transition-duration: .01s; }
}

/* ── Perdeli ön yükleme (2026-10-17, DENEME — kullanıcı: "diyettemplate aslının preloader'ını birinci base'de bir
   deneyelim"). Eski base'in kaynak şablonundaki yükleme ekranının kurgusu ve zamanlaması: tam ekran zemin dört dikey
   perdeden, ortada dönen halka, altında ad (soluk harflerin üstünden koyu harfler soldan kayıp sağa çıkar; harf başına
   .2 sn gecikme, 4 sn döngü), en altta YÜKLENİYOR. Pencere yüklendikten 3,5 sn sonra (sayfa/23-perdeli-yukleme.js) örtüye
   "acik": yazı .3 sn'de söner, perdeler .8 sn'de sola doğru kapanır, bütün örtü 1,2 sn'de söner; ardından açılışın iç içe
   kareleri (bu denemede adsız: ad örtüde) motorun özgün zamanlamasıyla kapanıp büyür (örtüde "devir" → sayfa/22).
   Şablondan farkı: sitenin renkleri (beyaz → krem, açık yeşil → --yesil-acik, koyu yeşil → --yesil-ana) ve yazı tipi
   (Figtree); boy 1440 px'e kadar şablonun px'i, üstünde ekranla büyür; uzun ad ekranın en çok %90'ına sığar
   (--pdy-ad-oran, isim_degistir.py); koyu harf soluk harfin tam üstünde (şablonda dar harflerde sola kayıktı); ş/ü işaretleri kırpılmaz;
   perdeler genişlikle değil ölçekle, örtü jQuery yerine CSS geçişiyle söner (açılışta betikler ana iş parçacığını
   meşgul ederken takılmasın). Örtü <body>'nin başında. Seçim <body data-on-yukleme="perdeli"> (pencereli | perdeli |
   yok = iç içe preloader; seçili olmayan örtü ve betiği uyur). */
body:not([data-on-yukleme="perdeli"]) .perdeli-yukleme { display: none !important; }
.perdeli-yukleme { display: none; }
.w-mod-js .perdeli-yukleme { position: fixed; inset: 0; z-index: 9999999; display: flex; align-items: center;
  justify-content: center; cursor: default; background-color: var(--bej); font-family: Figtree, Arial, sans-serif;
  font-size: max(16px, 1.1111vw); transition: opacity 1.2s cubic-bezier(.37, 0, .63, 1);
  animation: pdy-emniyet 1ms 45s forwards; }
/* zemin yalnız kapalıyken (perde aralarından alttaki kareler çizgi gibi sızmasın); açılınca zemini perdeler taşır */
.perdeli-yukleme.acik { opacity: 0; background-color: transparent; }
.perdeli-yukleme.bitti { display: none; }
/* betik hiç çalışmazsa örtü 45 sn'de kalkar */
@keyframes pdy-emniyet { to { visibility: hidden; } }
.pdy-perdeler { position: absolute; inset: 0; display: flex; pointer-events: none; }
.pdy-perde { flex: 1 1 0; margin-right: -1px; background-color: var(--bej); transform-origin: 0 50%;
  transition: transform .8s cubic-bezier(.77, 0, .175, 1); }
.pdy-perde:last-child { margin-right: 0; }
.perdeli-yukleme.acik .pdy-perde { transform: scaleX(0); }
.pdy-icerik { position: relative; z-index: 1; transition: opacity .3s ease-out; }
.perdeli-yukleme.acik .pdy-icerik { opacity: 0; }
.pdy-halka { width: 9em; height: 9em; margin: 0 auto 3.5em; border: 3px solid rgba(64, 79, 29, .2);
  border-top-color: var(--yesil-acik); border-radius: 50%; animation: pdy-don 1s linear infinite; }
.pdy-ad { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: .01em; width: max-content;
  margin: 0 auto; font-size: min(4.4em, calc(min(100vw - 32px, 90vw) / var(--pdy-ad-oran, 14))); font-weight: 700;
  line-height: 1.05; text-align: center; user-select: none; }
/* yalnız yanlardan kırp (ş, ü işaretleri kesilmesin); koyu harf kutunun tamamında ortalı = soluk harfin üstünde */
.pdy-h { position: relative; display: inline-block; min-width: .44em; color: rgba(124, 145, 76, .3);
  clip-path: inset(-.4em 0 -.4em 0); }
.pdy-h::before { content: attr(data-h); position: absolute; top: 0; left: 0; right: 0; color: var(--yesil-ana); opacity: 0;
  transform: translateX(-120%); text-shadow: 0 0 12px rgba(255, 255, 255, .35); animation: pdy-harf 4s infinite; }
.pdy-ad > :nth-child(2)::before { animation-delay: 0.2s; }
.pdy-ad > :nth-child(3)::before { animation-delay: 0.4s; }
.pdy-ad > :nth-child(4)::before { animation-delay: 0.6s; }
.pdy-ad > :nth-child(5)::before { animation-delay: 0.8s; }
.pdy-ad > :nth-child(6)::before { animation-delay: 1.0s; }
.pdy-ad > :nth-child(7)::before { animation-delay: 1.2s; }
.pdy-ad > :nth-child(8)::before { animation-delay: 1.4s; }
.pdy-ad > :nth-child(9)::before { animation-delay: 1.6s; }
.pdy-ad > :nth-child(10)::before { animation-delay: 1.8s; }
.pdy-ad > :nth-child(11)::before { animation-delay: 2.0s; }
.pdy-ad > :nth-child(12)::before { animation-delay: 2.2s; }
.pdy-ad > :nth-child(13)::before { animation-delay: 2.4s; }
.pdy-ad > :nth-child(14)::before { animation-delay: 2.6s; }
.pdy-ad > :nth-child(15)::before { animation-delay: 2.8s; }
.pdy-ad > :nth-child(16)::before { animation-delay: 3.0s; }
.pdy-ad > :nth-child(17)::before { animation-delay: 3.2s; }
.pdy-ad > :nth-child(18)::before { animation-delay: 3.4s; }
.pdy-ad > :nth-child(19)::before { animation-delay: 3.6s; }
.pdy-ad > :nth-child(20)::before { animation-delay: 3.8s; }
.pdy-ad > :nth-child(21)::before { animation-delay: 4.0s; }
.pdy-ad > :nth-child(22)::before { animation-delay: 4.2s; }
.pdy-ad > :nth-child(23)::before { animation-delay: 4.4s; }
.pdy-ad > :nth-child(24)::before { animation-delay: 4.6s; }
.pdy-ad > :nth-child(25)::before { animation-delay: 4.8s; }
.pdy-ad > :nth-child(26)::before { animation-delay: 5.0s; }
.pdy-ad > :nth-child(27)::before { animation-delay: 5.2s; }
.pdy-ad > :nth-child(28)::before { animation-delay: 5.4s; }
.pdy-ad > :nth-child(29)::before { animation-delay: 5.6s; }
.pdy-ad > :nth-child(30)::before { animation-delay: 5.8s; }
.pdy-ad > :nth-child(31)::before { animation-delay: 6.0s; }
.pdy-ad > :nth-child(32)::before { animation-delay: 6.2s; }
.pdy-ad > :nth-child(33)::before { animation-delay: 6.4s; }
.pdy-ad > :nth-child(34)::before { animation-delay: 6.6s; }
.pdy-ad > :nth-child(35)::before { animation-delay: 6.8s; }
.pdy-ad > :nth-child(36)::before { animation-delay: 7.0s; }
.pdy-ad > :nth-child(37)::before { animation-delay: 7.2s; }
.pdy-ad > :nth-child(38)::before { animation-delay: 7.4s; }
.pdy-ad > :nth-child(39)::before { animation-delay: 7.6s; }
.pdy-ad > :nth-child(40)::before { animation-delay: 7.8s; }
.pdy-not { margin: 0; text-align: center; font-size: .9375em; font-weight: 600; letter-spacing: .5333em;
  text-transform: uppercase; color: var(--yesil-acik); }
@keyframes pdy-don { to { transform: rotate(360deg); } }
@keyframes pdy-harf {
  0%, 15%, 100% { opacity: 0; transform: translateX(-120%); }
  35%, 60% { opacity: 1; transform: none; }
  75% { opacity: 0; transform: translateX(120%); }
}
@media screen and (max-width: 767px) {
  .pdy-halka { width: 7.5em; height: 7.5em; margin-bottom: 1.5em; }
  .pdy-ad { font-size: min(2.25em, calc(min(100vw - 24px, 90vw) / var(--pdy-ad-oran, 14))); }
  .pdy-not { font-size: .625em; letter-spacing: .4em; }
}
@media screen and (max-width: 575px) { .pdy-ad { font-size: min(1.8em, calc(min(100vw - 24px, 90vw) / var(--pdy-ad-oran, 14))); } }
@media screen and (max-width: 390px) {
  .pdy-ad { font-size: min(1.5em, calc(min(100vw - 24px, 90vw) / var(--pdy-ad-oran, 14))); }
  .pdy-not { font-size: .5em; letter-spacing: .375em; }
}
/* perdeli ve pencereli ön yüklemede açılışın fotoğraflı karesindeki ad bloğu gizli (ad örtüde; sayfa/22 harf dalgasını
   beklemeden devralır) */
body:is([data-on-yukleme="perdeli"], [data-on-yukleme="pencereli"]) .acilis .on-yukleme { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pdy-halka, .pdy-h::before { animation: none; }
  .pdy-h { color: var(--yesil-ana); }
  .pdy-perde { transition: none; }
}

/* ── Pencereli ön yükleme (2026-10-17, kullanıcı: "önceki preloader'ları kaybetme; bir preloader yapalım, ilki gibi olsun,
   içinden geçen yazılar daha hızlı geçsin, sonra güzel bir animasyonla ana site açılsın — sen bir tane tasarlar mısın").
   Yükleme ekranı perdeli ön yüklemenin aynısı (halka, harf harf ad, YÜKLENİYOR; içerik .pdy-* — kurallar yukarıda), dalga
   ~3,5 kat hızlı (harf başına 60 ms, 2,2 sn döngü); yazı çok daha küçük (kullanıcı: "çok çok daha küçük olmalı" → ad ~22 px,
   iç içe preloader'daki ölçü). Açılış (sayfa/24-pencereli-yukleme.js): motor sürer ve ana sitenin karesi
   ÖRTÜNÜN ALTINDA büyürken ad soldan koyu dolar ("dolu"), bir an tam durur; sahne yarıya yaklaşınca harfler yukarı dağılır,
   halka küçülüp söner; sahne tam boya gelince motor durdurulur (menü, ad henüz gelmedi) ve halkanın yerinde iç içe kareler
   açar — dıştan içe koyu, açık, orta zeytin (açılışın kendi kare renkleri), en içte ana siteye küçük pencere; sonra kareler
   dıştaki önde ekrana yayılır, pencere bütün ekranı alır, motor yeniden sürer: menü iner, ad harf harf belirir, meyve yükselir.
   Dört katman × dört ekran boyu levha; her levha deliğin bir kenarına kaydırılır — yalnız transform/opacity.
   Seçim <body data-on-yukleme="pencereli"> (pencereli | perdeli | yok = iç içe preloader). */
body:not([data-on-yukleme="pencereli"]) .pencereli-yukleme { display: none !important; }
.pencereli-yukleme { display: none; }
.w-mod-js .pencereli-yukleme { position: fixed; inset: 0; z-index: 9999999; display: flex; align-items: center;
  justify-content: center; overflow: hidden; cursor: default; background-color: var(--bej);
  font-family: Figtree, Arial, sans-serif; font-size: max(16px, 1.1111vw); animation: pdy-emniyet 1ms 45s forwards; }
/* kareler açılırken zemini levhalar taşır (zemin yalnız kapalıyken: levha birleşimlerinden alttaki katman sızmasın) */
.pencereli-yukleme.acik { background-color: transparent; }
.pencereli-yukleme.bitti { display: none !important; }
.pny-katman { position: absolute; inset: 0; pointer-events: none; }
.pny-p { position: absolute; inset: 0; }
.pny-katman[data-k="0"] .pny-p { background-color: #75864e; }
.pny-katman[data-k="1"] .pny-p { background-color: #a1ac67; }
.pny-katman[data-k="2"] .pny-p { background-color: #465626; }
.pny-katman[data-k="3"] .pny-p { background-color: var(--bej); }
/* hızlı dalga; harf sırası --i (aşağıda, ilk boyamadan geçerli) */
.pencereli-yukleme .pdy-ad .pdy-h::before { animation: pny-harf 2.2s infinite; animation-delay: calc(var(--i, 0) * 60ms); }
/* dolum: ad soldan sağa koyu dolar (dalga altta sürer, görünmez) */
.pencereli-yukleme .pdy-h::after { content: attr(data-h); position: absolute; top: 0; left: 0; right: 0;
  color: var(--yesil-ana); opacity: 0; text-shadow: 0 0 12px rgba(255, 255, 255, .35);
  transition: opacity .25s ease-out calc(var(--i, 0) * 15ms); }
.pencereli-yukleme.dolu .pdy-h::after { opacity: 1; }
/* boy: ad masaüstünde 1.375em (1440'ta 22 px), telefonda .95em; YÜKLENİYOR adın altında küçük; halka şablondaki boyda */
.pencereli-yukleme .pdy-halka { margin-bottom: 2em; }
.pencereli-yukleme .pdy-ad { font-size: min(1.375em, calc(min(100vw - 32px, 90vw) / var(--pdy-ad-oran, 14))); }
.pencereli-yukleme .pdy-not { margin-top: .7em; font-size: .5625em; letter-spacing: .45em; }
@media screen and (max-width: 767px) {
  .pencereli-yukleme .pdy-halka { margin-bottom: 1.25em; }
  .pencereli-yukleme .pdy-ad { font-size: min(.95em, calc(min(100vw - 24px, 90vw) / var(--pdy-ad-oran, 14))); }
  .pencereli-yukleme .pdy-not { margin-top: .6em; font-size: .5em; letter-spacing: .35em; }
}
/* dalga harfleri dolumla sönmezse (betik sözde öğeyi canlandıramıyorsa) hepsi birden sönsün: kayan koyu harf dolu harfin
   yanından taşıp çift görünmesin */
.pencereli-yukleme.dalga-yok .pdy-h::before { opacity: 0 !important; }
/* örtünün altında boşa boyanmasın (betik başlarken <body>'ye "pny-gizle"; motor yine büyütür, ölçer): açılışın kareleri
   hiç, ana sitenin karesi pencere açılırken görünür. Betik çalışmazsa sınıf yok → hiçbir şey gizlenmez. */
body.pny-gizle .acilis, body.pny-gizle .giris-hero-content-wrap { visibility: hidden !important; }
.pencereli-yukleme .pdy-ad > :nth-child(2) { --i: 1; }
.pencereli-yukleme .pdy-ad > :nth-child(3) { --i: 2; }
.pencereli-yukleme .pdy-ad > :nth-child(4) { --i: 3; }
.pencereli-yukleme .pdy-ad > :nth-child(5) { --i: 4; }
.pencereli-yukleme .pdy-ad > :nth-child(6) { --i: 5; }
.pencereli-yukleme .pdy-ad > :nth-child(7) { --i: 6; }
.pencereli-yukleme .pdy-ad > :nth-child(8) { --i: 7; }
.pencereli-yukleme .pdy-ad > :nth-child(9) { --i: 8; }
.pencereli-yukleme .pdy-ad > :nth-child(10) { --i: 9; }
.pencereli-yukleme .pdy-ad > :nth-child(11) { --i: 10; }
.pencereli-yukleme .pdy-ad > :nth-child(12) { --i: 11; }
.pencereli-yukleme .pdy-ad > :nth-child(13) { --i: 12; }
.pencereli-yukleme .pdy-ad > :nth-child(14) { --i: 13; }
.pencereli-yukleme .pdy-ad > :nth-child(15) { --i: 14; }
.pencereli-yukleme .pdy-ad > :nth-child(16) { --i: 15; }
.pencereli-yukleme .pdy-ad > :nth-child(17) { --i: 16; }
.pencereli-yukleme .pdy-ad > :nth-child(18) { --i: 17; }
.pencereli-yukleme .pdy-ad > :nth-child(19) { --i: 18; }
.pencereli-yukleme .pdy-ad > :nth-child(20) { --i: 19; }
.pencereli-yukleme .pdy-ad > :nth-child(21) { --i: 20; }
.pencereli-yukleme .pdy-ad > :nth-child(22) { --i: 21; }
.pencereli-yukleme .pdy-ad > :nth-child(23) { --i: 22; }
.pencereli-yukleme .pdy-ad > :nth-child(24) { --i: 23; }
.pencereli-yukleme .pdy-ad > :nth-child(25) { --i: 24; }
.pencereli-yukleme .pdy-ad > :nth-child(26) { --i: 25; }
.pencereli-yukleme .pdy-ad > :nth-child(27) { --i: 26; }
.pencereli-yukleme .pdy-ad > :nth-child(28) { --i: 27; }
.pencereli-yukleme .pdy-ad > :nth-child(29) { --i: 28; }
.pencereli-yukleme .pdy-ad > :nth-child(30) { --i: 29; }
.pencereli-yukleme .pdy-ad > :nth-child(31) { --i: 30; }
.pencereli-yukleme .pdy-ad > :nth-child(32) { --i: 31; }
.pencereli-yukleme .pdy-ad > :nth-child(33) { --i: 32; }
.pencereli-yukleme .pdy-ad > :nth-child(34) { --i: 33; }
.pencereli-yukleme .pdy-ad > :nth-child(35) { --i: 34; }
.pencereli-yukleme .pdy-ad > :nth-child(36) { --i: 35; }
.pencereli-yukleme .pdy-ad > :nth-child(37) { --i: 36; }
.pencereli-yukleme .pdy-ad > :nth-child(38) { --i: 37; }
.pencereli-yukleme .pdy-ad > :nth-child(39) { --i: 38; }
.pencereli-yukleme .pdy-ad > :nth-child(40) { --i: 39; }
@keyframes pny-harf {
  0%, 8%, 100% { opacity: 0; transform: translateX(-120%); }
  18%, 28% { opacity: 1; transform: none; }
  38% { opacity: 0; transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .pencereli-yukleme .pdy-ad .pdy-h::before { animation: none; }
  .pencereli-yukleme .pdy-h::after { transition: none; }
}

/* ── Kaydırma bölümü kalıbı (2026-10-02): her yeni kaydırmalı video için. Kareler _tema/araclar/kaydirma_dizisi.py,
   oynatıcı sayfa/13-kaydirma-dizisi.js (tuvaldeki data-dizi/data-kare/data-tetik). Bölüm boyu kaydırma mesafesidir
   (300vh ≈ iki ekran kaydırma boyunca video baştan sona oynar). Kareler inene kadar tuval görünmez.
   .yumusak-kenar: açık fonlu video bölüm zeminine erisin (kodlamadan sonra fon birkaç ton sapabiliyor). */
.kaydirma-bolum { position: relative; height: 300vh; background-color: var(--bej); }
.kaydirma-yapiskan { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.kaydirma-tuval { display: block; width: 100%; height: 100vh; opacity: 0; transition: opacity .6s ease; }
.kaydirma-tuval.yumusak-kenar {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
                      linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
              linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}

/* "Bilimsel temelli & Hayatın içinden" sayıları (2026-10-02, kullanıcı: "g'lerin altı kesiliyor"): motor kelimeleri
   maskeyle kaydırıyor (gsap_split_word-mask, overflow: clip); maske = satır kutusu (satır yüksekliği yazının 0.9'u),
   Figtree'de g kuyruğu ~0.12em dışarıda kalıyordu → maskenin altı 0.22em uzar (eşit eksi kenar boşluğu: yerleşim aynı).
   Başlangıçta kelime saydam (opacity 0), uzayan bölgeden bir şey sızmaz. Başlıklar/açıklamalar büyük harf: sorun yok. */
.sayi-item .yazi-80-regular > span { padding-bottom: .22em; margin-bottom: -.22em; }
/* g kuyruğu ile alttaki çizgi arasında nefes payı (kuyruksuz satırlar da aynı ritimde) */
.sayi-item .yazi-80-regular { padding-bottom: .12em; }

/* Künye bölünmesin: "(JAMA, 2005)." satır sonunda ikiye ayrılıyordu. &nbsp; yetmez — motor paragrafı satırlara bölerken
   kelimeleri ayrı kutulara koyuyor; kapsayıcıdaki nowrap aralarındaki kırılmayı engeller (sığmazsa tamamı alt satıra). */
.bolunmez { white-space: nowrap; }

/* Kapanış masaüstü/tablet (≥768 px) — mutfak görseli (2026-10-02, kullanıcının kendi üretimi; yapay zekânın yanlışlıkla
   yazdığı "For life" silindi): kişi sağda → metin bloğu SOL ALTTA, koyu yeşil duvarın üstünde (sağ altta kadının beyaz
   gömleğine biniyordu); başlık krem; karartma sol altta ve tepede. Karartma görselin hemen üstünde (z1), yazının altında
   (z2); geçiş kutuları z4, etkilenmez. Görsel değişirse bu ayarlara yeniden bak. */
@media screen and (min-width: 768px) {
  .kapanis-heading-secondary { align-items: flex-start; }
  .kapanis-new::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(ellipse 60% 75% at 0% 100%, rgba(10, 14, 8, .62) 0%, rgba(10, 14, 8, .35) 50%, rgba(10, 14, 8, 0) 100%),
      linear-gradient(to bottom, rgba(10, 14, 8, .45) 0%, rgba(10, 14, 8, .12) 22%, rgba(10, 14, 8, 0) 34%);
  }
  .kapanis-heading .baslik-2.koyu-yesil { color: var(--bej); }
  .kapanis-heading, .kapanis-heading-secondary { text-shadow: 0 1px 2px rgba(10, 8, 4, .4), 0 2px 18px rgba(10, 8, 4, .45); }
}
/* Kapanış görseli tablette (≤991 px: sabit 70em) ve telefonda (55em) bölümden kısa kalabiliyordu → altta yeşil şerit.
   Görsel en az bölüm kadar yüksek (paralaks özniteliğini işleyen betik yok, görsel sabit). */
.kapanis-background { min-height: 100%; }
/* Kapanış VİDEOSU (2026-10-31, E11; kullanıcı: "masaya birlikte oturalım section'u için yeni videomuz bunu koy; hafif videoyu
   karartabilirsin, yazıların rengini vb ayarlayabilirsin videoya göre"): güneşli mutfak, kadın ortanın solunda, kız sağda, kamera
   yavaşça yaklaşıyor; aynı gün akşam (kullanıcı: "video durmasın, loop etsin; 3. saniyesinden başlasın") döngü: kaynağın 3,0–10. sn'si
   (kapanis-salata-dongu{,-dar}.mp4, 7 sn), sonu 3. sn'den hemen önceki karelere 0,33 sn çapraz geçer → dikiş olağan kare adımı kadar
   (sayfa/36: data-gec-oto, bir ekran kala iner). Yazılar eski yerinde.
   · Kutu bölüm kadar (Webflow'un 120vh'si işlemeyen paralaks içindi; videonun alt %17'si görünmüyor, kişiler fazla büyüyordu).
   · Masaüstünde video sola yaslı (%0): kişiler sağa kayar, sol alttaki yazı tezgâha ve sebzelere düşer, kız sağda tam görünür.
     Dikey tablette kadın sağ yarıda (%10). Telefonda ayrı dikey kesim (kapanis-salata-dar.mp4: kadın ortada).
   · Video eski görselden çok açık (pencere ışığı, krem duvar) → karartma yeniden ayarlandı (yukarıdaki iki kural bu blokla ezilir):
     masaüstünde yalnız sol altta (yazı bloğu) + hafif genel; tablette ve telefonda tepede de (üst çubuk ve başlık krem). Ölçüm: yazı
     kutularının en kötü %5'i, videonun 0,5/3/6/9,9. saniyesinde (karalamadaki kapanis_kontrast.py). */
.kapanis-background { height: 100%; max-height: none; }
@media screen and (min-width: 992px) { .kapanis-background { object-position: 0% 50%; } }
@media screen and (min-width: 768px) and (max-width: 991px) { .kapanis-background { object-position: 10% 50%; } }
/* Masaüstünde kamera yaklaştıkça (5–8. sn) kadının yüzü sol üstteki "Değişim bir öğünle başlar"ın sağ ucunun altına giriyordu →
   başlık yerinde, iki dengeli satır ("Değişim bir / öğünle başlar"): ekranın ~%22'sinde biter, yüz %31'den sonra. (Sağ üste, duvara
   almak denendi: kamera yaklaşırken başı oraya da geliyor, 16:9'da en sağdaki koyu kitaplık şeridi yazının altına düşüyordu.)
   Dikey tablette kadın sağ yarıda (%10), başlık solda pencerenin üstünde (tepe karartması aşağıdaki blokta). */
@media screen and (min-width: 992px) {
  .kapanis-heading { width: 26%; }
  .kapanis-heading .baslik-2 { text-wrap: balance; }
  .kapanis-new::after {
    background:
      radial-gradient(ellipse 60% 85% at 0% 100%, rgba(10, 14, 8, .8) 0%, rgba(10, 14, 8, .52) 45%, rgba(10, 14, 8, 0) 100%),
      radial-gradient(ellipse 55% 42% at 0% 0%, rgba(10, 14, 8, .5) 0%, rgba(10, 14, 8, .25) 55%, rgba(10, 14, 8, 0) 100%),
      linear-gradient(to bottom, rgba(10, 14, 8, .62) 0%, rgba(10, 14, 8, .24) 16%, rgba(10, 14, 8, 0) 30%),
      linear-gradient(rgba(10, 14, 8, .08), rgba(10, 14, 8, .08));
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .kapanis-new::after {
    background:
      linear-gradient(to top, rgba(10, 14, 8, .82) 0%, rgba(10, 14, 8, .62) 24%, rgba(10, 14, 8, 0) 52%),
      radial-gradient(ellipse 85% 34% at 0% 0%, rgba(10, 14, 8, .55) 0%, rgba(10, 14, 8, .28) 55%, rgba(10, 14, 8, 0) 100%),
      linear-gradient(to bottom, rgba(10, 14, 8, .62) 0%, rgba(10, 14, 8, .24) 14%, rgba(10, 14, 8, 0) 26%);
  }
}
@media screen and (max-width: 767px) {
  .kapanis-new::after {
    background: linear-gradient(to bottom, rgba(14, 20, 6, .66) 0%, rgba(14, 20, 6, .34) 34%, rgba(14, 20, 6, .5) 58%, rgba(14, 20, 6, .74) 100%);
  }
}
/* Kütüphane bölümlerinde YALNIZ bu sitede kaldırılanlar (2026-10-31; kütüphane ve havuz aynı — kullanıcının dilinde "kaldır" = bu siteden):
   · çilek kaydırması (lomboz-meyve, 121): soldaki %80 göstergesi (kullanıcı: "%80 yüzdelik sayacı hiç olmasın"); masaüstünde 3 sütun
     sabit, yazı yerinde kalır; telefonda/dikey tablette gösterge üstte yazı altta (space-between) → yazı altta kalsın diye flex-end.
   · pist (100): alttaki ilerleme çizgisi (kullanıcı: "loading barı gibi ince bar hiç olmasın"). */
.lomboz-meyve .lmv-gosterge { display: none; }
@media screen and (max-width: 767px), screen and (max-width: 991px) and (orientation: portrait) {
  html.w-mod-js .lomboz-meyve .lmv-bilgi { justify-content: flex-end; }
}
html.w-mod-js .pist .pt-ilerleme { display: none; }
/* ── 2026-10-10 (kullanıcı) ────────────────────────────────────────────────────────────────────────────────────────
   Çizgi ızgarası sola yaslı: .giris-gecis 100vw genişliğinde ve mutlak, ama konumu verilmediği için flex kabında
   ortalanıyordu. Klasik kaydırma çubuğu olan masaüstünde (Windows; Mac'te "her zaman göster") 100vw sayfadan çubuk kadar
   geniş → ızgara çubuğun yarısı kadar sola kayıyor, vw/em tabanlı içerik (mısır videosu 0→20vw, yazılar) çizgilere
   oturmuyordu ("solda boşluk, sağda taşma"). Sola yaslayınca ikisi aynı tabanda; taşan sağ kenar çubuğun altında kalır
   (üst kap overflow: hidden). Kaydırma çubuğu yer kaplamayan ekranlarda değişiklik yok. */
.giris-gecis { left: 0; }
/* "hayatınıza hiç uymaz" karonun videosuna daha az binsin (2026-10-31, kullanıcı: "şu an videonun üstüne ha ve biraz y, altta uy ve
   m'nin başı değiyor; yalnız h ve u değsin, biraz sağa kaysın"). Ölçüm (videonun en büyük hâli): 1440'ta video sağ kenarı 575, "h"
   512–540, "a" 539'dan → yazı %3,125vw (45 px) sağa: "h"nin ~%65'i videoda, "a" ve alt satırda "y" dışarıda; yerleşim vw'ye bağlı, oran
   1024–1920'de aynı (ölçüldü). Dikey tablette (768–991) zaten yalnız h ve u değiyor; telefonda bu yazı yok (tek satır başka öğe).
   2026-11-01 (kullanıcı: "hiçbirini videoya değdirmeyelim, sağa kaydıralım; video ile arasında çoğu diyet listesi yazısının boşluğu gibi
   orantılı bir boşluk olsun"): 3,125vw → 5,2vw. Ölçüm (video en büyükken, ekran görüntüsünde harfin mürekkebi ile video kenarı):
   "Çoğu diyet"in videoya boşluğu / "hayatınıza" ve "uymaz"ınki — 1024: 8 / 10 px · 1366: 13 / 13 · 1440: 15 / 14 · 1920: 18 / 20 ·
   2000: 20 / 20 (≈1vw, iki yanda eşit); hiçbir harf videoda değil. Dikey tablette (768–991) h ve u videoya ~12–15 px biniyordu (kural
   yoktu); "Çoğu diyet" orada ızgarada daha uzakta (4,8vw) ama sağda o kadar yer yok → 2,6vw: boşluk masaüstüyle aynı oranda (~1vw:
   768'de 8, 900'de 9,5, 991'de 10 px), "hayatınıza hiç" sağ kenara 12 / 17 / 21 px. */
@media screen and (min-width: 992px) { .uymaz-yazi { margin-left: 5.2vw; } }
@media screen and (min-width: 768px) and (max-width: 991px) { .uymaz-yazi { margin-left: 2.6vw; } }
/* "Aç kalmadan. Yasaklamadan. Bilerek." bölümünde kartların ortasında dönen, kaydırmayla kayan çilek kaldırıldı. Kap mutlak
   konumlu bir katman (inset 0) → gizlemek kartların yerini değiştirmez; tuval oynatıcısı görünürlük gözlemcisiyle durur. */
.vitrin-kap { display: none; }

/* ── Düşüş bölümü beyaz fonda (2026-10-11, kullanıcının ürettiği D4: beyaz fonda suya düşen çilek) ────────────────
   ŞU AN KULLANILMIYOR: kullanıcı denedikten sonra eski yeşil fonlu çileği istedi (2026-10-11) → bölümde .dusus-acik yok,
   tuval yine seq/dusus2. Kurallar beyaz fonlu bir video yeniden denenirse diye duruyor (sınıf yoksa etkisiz).
   Kareler seq/dusus5: geniş = video (fon #FFFFFF'e eşitlendi); dar = 3:4, videonun ortadaki 1300 px'i karenin ALTINDA, üstü
   beyaz (telefon ve dikey tablette yazılar beyazda kalsın; tuvalde data-dar-esik="0.8"). Eski yeşil fonlu dizi seq/dusus2
   duruyor. .dusus-acik: zemin beyaz,
   yazılar Hakkımda'daki yeşiller (başlık --baslik-rengi, metin --yesil-ana), çizgi ve adım ikonları yeşil, "Yaklaşımım"
   yeşil düğme; koyu yazı gölgeleri ve telefondaki koyu örtü yok. Eski hâl: sınıfı sil + data-dizi'yi dusus2'ye döndür
   (üst çubuk 14-ust-bar-renk.js'te sınıfa bakıyor). Bu blok dosyanın SONUNDA kalmalı: gölge/örtü kurallarını ezer. */
.dusus.dusus-acik { background-color: #fff; }
.dusus-acik .baslik-2, .dusus-acik .yazi-45-regular { color: var(--baslik-rengi); }
.dusus-acik .dusus-start-text .yazi-16-regular-caps, .dusus-acik .adimlar-items .yazi-16-regular-caps { color: var(--yesil-ana); }
.dusus-acik .beyaz-cizgi { background-color: rgba(99, 111, 61, .35); }
/* ikon (icon.svg krem dolgulu): kendi görüntüsü kutunun dışına itilir, yeşil zemin ikon biçiminde maskelenir */
.dusus-acik .ikon-28 { object-fit: none; object-position: -99em -99em; background-color: var(--yesil-acik);
  -webkit-mask: url("../img/icon.svg") center / contain no-repeat; mask: url("../img/icon.svg") center / contain no-repeat; }
.dusus-acik .dugme-transparent { background-color: var(--baslik-rengi); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dusus-acik .dugme-transparent:hover { background-color: var(--yesil-ana); }
/* yazılar yer yer su dalgalarının ve çileğin üstünden geçiyor (telefonda çilek ekranı kaplıyor): koyu gölge yerine beyaz
   hale — beyaz zeminde görünmez, dalga/çilek üstünde yazıyı ayırır */
.dusus-acik .baslik-2, .dusus-acik .yazi-45-regular, .dusus-acik .dusus-second-heading, .dusus-acik [class*="adim-yazi-ic"],
.dusus-acik .dusus-start-text .yazi-16-regular-caps, .dusus-acik .adimlar-items .yazi-16-regular-caps {
  text-shadow: 0 0 2px rgba(255, 255, 255, .95), 0 0 10px rgba(255, 255, 255, .9), 0 0 24px rgba(255, 255, 255, .8); }
@media screen and (max-width: 767px) {
  .dusus-acik .canvas.w-embed::after { background: none; }
}

/* ── Düşüşte yaban mersini (2026-10-16, kullanıcı: "çilek yerine bu videoyu kaydırmalı yap; zemine karışma; yazılar
   beyazda yeşilimsi ve şeffaf, mersinler ekrana gelince beyaz — scroll'la uyumlu olsun") ────────────────────────────
   ŞU AN KULLANILMIYOR (2026-10-17, kullanıcı: "scroll olayı o kadar hoş olmadı… yine çileği geri getirelim"): düşüş
   yeniden çilek (seq/dusus2), bölümde .dusus-uyum yok, sayfa/34 betiği bağlı değil → aşağıdaki kurallar uyur. Yeniden
   denemek için tersini yap: bölüme dusus-acik dusus-uyum, tuvale mersin + data-yazi-uyum + data-ust-*, 34'ü bağla.
   Kareler seq/mersin-{genis,dar}: videonun 5,9–32,2. saniyeleri (boş zemin → ekran mersinle dolu), 151 kare, AVIF q72;
   videonun zeminine dokunulmadı. Her sette parlaklik.png (kaydirma_dizisi.py --parlaklik). Bölümde .dusus-acik (beyaz
   düzen: ikon maskesi, telefonda koyu örtü yok) + .dusus-uyum: renkleri sayfa/34-dizi-yazi-rengi.js her grubun arkasındaki
   kareye göre öğe öğe yazar (iki hâl, gecikmeli eşik; değişken yokken açık hâl: yarı saydam yeşil + zemin renginde hale). Çileğe dönmek: bölümden
   dusus-acik ve dusus-uyum'u sil; tuvalde data-dizi="assets/seq/dusus2" data-kare="121", data-yazi-uyum ve data-ust-* sil.
   Bu blok dosyanın SONUNDA kalmalı: .dusus-acik ve telefondaki gölge kurallarını ezer. */
.dusus.dusus-uyum { background-color: #E7E3E0; }   /* videonun boş zemini (ilk kare): kareler inene kadar görünen */
.dusus-uyum .baslik-2, .dusus-uyum .yazi-45-regular { color: var(--uy-baslik, rgba(52, 66, 22, .88)); }
.dusus-uyum .dusus-start-text .yazi-16-regular-caps, .dusus-uyum .adimlar-items .yazi-16-regular-caps {
  color: var(--uy-metin, rgba(52, 66, 22, .86)); }
.dusus-uyum .beyaz-cizgi { background-color: var(--uy-cizgi, rgba(64, 79, 29, .32)); }
.dusus-uyum .ikon-28 { background-color: var(--uy-ikon, rgba(99, 111, 61, .9)); }
.dusus-uyum .dugme-transparent { background-color: var(--uy-dugme, rgba(64, 79, 29, .86));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dusus-uyum .baslik-2, .dusus-uyum .yazi-45-regular, .dusus-uyum .dusus-second-heading, .dusus-uyum [class*="adim-yazi-ic"],
.dusus-uyum .dusus-start-text .yazi-16-regular-caps, .dusus-uyum .adimlar-items .yazi-16-regular-caps {
  text-shadow: var(--uy-golge, 0 0 1px rgba(236, 233, 230, .95), 0 0 .1em rgba(236, 233, 230, .9), 0 0 .3em rgba(236, 233, 230, .8),
    0 0 .6em rgba(236, 233, 230, .65), 0 0 1em rgba(236, 233, 230, .5)); }
/* Üst çubuk düşüşün üstündeyken (34-dizi-yazi-rengi.js <html data-dizi-hale>): yarı dolu karede logo/menü/iletişim
   okunsun — koyu yazıya açık hale ("acik"), açık yazıya koyu hale ("koyu"). Renk 14-ust-bar-renk.js'te, burada yalnız hale. */
html[data-dizi-hale="acik"] .gezinti-kap .yazi-14-caps {
  text-shadow: 0 0 1px rgba(236, 233, 230, .95), 0 0 .3em rgba(236, 233, 230, .85), 0 0 .8em rgba(236, 233, 230, .6); }
html[data-dizi-hale="acik"] .gezinti-kap .ust-logo, html[data-dizi-hale="acik"] .gezinti-kap .menu-ikonu {
  filter: drop-shadow(0 0 1px rgba(236, 233, 230, .95)) drop-shadow(0 0 5px rgba(236, 233, 230, .7)); }
html[data-dizi-hale="koyu"] .gezinti-kap .yazi-14-caps {
  text-shadow: 0 0 1px rgba(12, 14, 18, .6), 0 0 .3em rgba(12, 14, 18, .55), 0 0 .8em rgba(12, 14, 18, .45); }
html[data-dizi-hale="koyu"] .gezinti-kap .ust-logo, html[data-dizi-hale="koyu"] .gezinti-kap .menu-ikonu {
  filter: drop-shadow(0 0 1px rgba(12, 14, 18, .6)) drop-shadow(0 0 5px rgba(12, 14, 18, .45)); }

/* ── Bilimsel bölümde mersin videosu (2026-10-17, kullanıcı: "o video çok iyi… o videoyu da bilimsel temelli hayatın
   içinden sectionunda koyalım") ─────────────────────────────────────────────────────────────────────────────────────
   #s-sayilar videosu assets/video/mersin-yagmuru.mp4 (1920×1080), telefonda (<768 px) mersin-yagmuru-dar.mp4 (orta kesit
   810×1080); eski çiftlik videosu surec-video.mp4 klasörde duruyor. Video boş zeminden mersinle dolu ekrana koyulaşır:
   üst çubuk videonun üstündeyken koyu yazıya açık hale (14-ust-bar-renk.js <html data-ust-hale>, alan
   [data-ust-hale-alani]); açık karede ve krem zeminde görünmez. Öğenin (menü, logo, iletişim) altı videoda koyuysa
   14 öğeye data-video-koyu yazar → krem yazı + ince koyu hale (satır içi rengi ezer). */
html[data-ust-hale] .gezinti-kap .yazi-14-caps {
  text-shadow: 0 0 1px rgba(236, 233, 230, .95), 0 0 .3em rgba(236, 233, 230, .85), 0 0 .8em rgba(236, 233, 230, .6); }
html[data-ust-hale] .gezinti-kap .ust-logo, html[data-ust-hale] .gezinti-kap .menu-ikonu {
  filter: drop-shadow(0 0 1px rgba(236, 233, 230, .95)) drop-shadow(0 0 5px rgba(236, 233, 230, .7)); }
.gezinti-kap [data-video-koyu] .yazi-14-caps { color: #F4EDE6 !important; }
.gezinti-kap [data-video-koyu] .underline { background-color: #F4EDE6 !important; }
.gezinti-kap [data-video-koyu] svg [fill]:not([fill="none"]) { fill: #F4EDE6 !important; }
.gezinti-kap [data-video-koyu] svg [stroke]:not([stroke="none"]) { stroke: #F4EDE6 !important; }
html[data-ust-hale] .gezinti-kap [data-video-koyu] .yazi-14-caps {
  text-shadow: 0 0 1px rgba(12, 14, 18, .5), 0 0 .3em rgba(12, 14, 18, .45), 0 0 .8em rgba(12, 14, 18, .35); }
html[data-ust-hale] .gezinti-kap .ust-logo[data-video-koyu], html[data-ust-hale] .gezinti-kap [data-video-koyu] .menu-ikonu {
  filter: drop-shadow(0 0 1px rgba(12, 14, 18, .5)) drop-shadow(0 0 4px rgba(12, 14, 18, .4)); }

/* ── Kütüphane bölümleri özgünlerin YERİNE (2026-10-17, kullanıcı: "105 ile hizmetler kısmını değiştirelim", "111'i şu anki
   çilek düşüş yerine koyalım", "102'yi aç kalmadan yasaklamadan bilerek kısmıyla değiştirelim ama açılış basedeki çilek gibi
   olsun, içinden açılsın") ──────────────────────────────────────────────────────────────────────────────────────────
   Sitede: lomboz (111, düşüşün yerinde), pencere (120 = 102'nin çilek penceresiyle açılan hâli, kayan yazının yerinde), acilan
   (105, hizmetlerin yerinde). Özgün düşüş, kayan yazı ve hizmetler SİLİNMEDİ: index.html'de yerlerinde, etkisiz
   <template data-ozgun-bolum="dusus|kayan-yazi|hizmetler"> içinde (geri açmak: bolumler.py ozgun-ac basediyet <ad>); kuralları
   (yukarıdaki .dusus-*, .vitrin-*) duruyor. Çalışma alanları bir öncekinin altına 69 px girer (site.css margin-top −5em,
   z-index 1); önündeki kütüphane bölümü (.yb z-index 3) başlığının üstünü örtüyordu → önündeki bölüm özgündeki gibi
   z-index 1 (DOM'da sonraki kazanır, alanlar üstte). */
.yb:has(+ .alanlar-new) { z-index: 1; }

/* ── Bitki bölümünde su bilgisi (2026-10-18, kullanıcı: "önce tanışalım, ilk görüşme bir tanışmadır vb. gereksiz yazılar yerine
   suyun faydaları, günde ne kadar su içilmeli, dehidrasyon — kaynakla, bilimsel, sofistike; bitki sulama kısmı daha mantıklı olur") ──
   Metin index.html'de (başlık #buyume-baslik, açıklama, düğme notu; kaynaklar EFSA 2010, J Nutr 2012). Başlık iki satıra dengeli bölünsün
   ("Su da bir / besin öğesi"); suladıktan sonraki başlık sayfa/16-bitki-dizisi.js'te ("Küçük adımlar böyle büyür."). */
#buyume-baslik { text-wrap: balance; }

/* ── 2. bölümde harf kuyrukları (2026-10-18, kullanıcı: "y harflerinin altları biraz kesiliyor — çoğu diyet listesi hayatınıza hiç
   uymaz kısmı; kalıcı değişim kısmında da g harfinde var") ──────────────────────────────────────────────────────────────────────
   Motorun (IX3) satır animasyonu SplitText satırlarını maskeye alıyor (.gsap_split_line-mask, overflow: clip); maske satır kutusu kadar
   (satır yüksekliği ~.96), Figtree'nin y/g/ğ/ç/ş kuyruğu kutunun ~.1em altına iniyor → kesiliyordu. Satıra alt boşluk, maskeye aynı
   kadar eksi alt marj: kuyruk maskenin içinde kalır, yerleşim aynı (her maskenin kapladığı yer değişmez); satırın %100'lük kaydırması
   boşluğu da kapsar, gizlenen satır görünmez. */
#s-yazi-anim .gsap_split_line { padding-bottom: .16em; }
#s-yazi-anim .gsap_split_line-mask { margin-bottom: -.16em; }

/* ── Footer öncesi takılma (2026-10-18, kullanıcı: "footer'a gelmeden önceki alanda küçük bir scroll takılıyor; orada scroll kolaylıkla
   devam edebilsin, footer gelsin") ─────────────────────────────────────────────────────────────────────────────────────────────
   Kapanış (#s-kapanis) .footer-anim-kap'ta (250vh) yapışkan; alt bilgi 50vh boşlukla sonra geliyordu ve motorun (IX3) krem kutularla
   alt bilgiyi getiren çizelgesi kabın %70'inde başlıyordu → kapanış yapıştıktan sonra ~75vh kaydırmada hiçbir şey olmuyordu. Kap 200vh,
   alt bilginin üst boşluğu yok; webflow-etkilesim.js'te bu tetiğin başı "top+=70% bottom" → "top+=50% bottom" (kapanış yapıştığı an).
   Geçiş aynı (kutular yukarıdan iner, alt bilgi belirir), boş kaydırma yok.
   2026-10-31 (kullanıcı: "değişim bir öğünle başlar section'ında hemen footera kayıyorum, inanılmaz hızlı; section'a gelebileyim, sonraki
   scroll direk footer'a geçsin"): geçiş yapışır yapışmaz başlıyordu → arada 60vh durak: kap 260vh, tetiğin başı "top+=61.54% bottom"
   (= 160/260: kapanış yapıştıktan 60vh sonra), sonu aynı ("bottom bottom+=15%") → geçiş yine 85vh. Eski 75vh ölü kaydırmanın yaklaşık
   yarısından biraz fazlası: sahne bu sürede tam görünür ve okunur. Etkileşim dosyası yenilenirse bu tetik yeniden yazılmalı.
   2026-11-01 (kullanıcı: "footer bozuldu, bir sürü yazımız vardı"): kap 260vh olunca alt bilgi akışta kapanışın hemen ardında kalmıştı
   → kabın 100–200vh'si; dipte 60vh boş krem, en altta bağlantılar ekranın üstünden taşmış, durak boyunca da alt bilgi videonun üstüne
   çıkıyordu. Artık alt bilgi kabın DİBİNE mutlak (kabın 160–260vh'si): geçişin başında ekranın altına gelir, en altta tam ekran
   (200vh'deki ilişki 60vh ileride, aynen). Akışta bir boşlukla değil çünkü dokunmatikte kapanış otururken sabit (sayfa/37, YB.sabitle)
   → akıştan çıkıyor: akıştaki alt bilgi 100vh yukarı kayıp kapanışın üstüne biniyordu (29 Ekim'den beri telefonda), üst boşluğu da
   kabın tepesinden taşıp kabı aşağı itiyordu. Dipte olunca kapanışın akışta olup olmamasından bağımsız. Durak değişirse: kap = 200vh +
   durak, tetik = (100 + durak) / kap. */
.footer-anim-kap { height: 260vh; }
.alt-bilgi { position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0; }

/* ── Bitki: "Bir bardak su daha" düğmesi fark edilsin (2026-10-18, kullanıcı: "basılan yer pulsate olsun, etrafından küçük çemberler
   çıksın, kullanıcıya bastırtsın") ──────────────────────────────────────────────────────────────────────────────────────────
   Damla dairesinden iki ince halka sırayla dışarı yayılır, dairenin zemini hafifçe nefes alır. Yalnız düğme basılabilirken
   (yüklenirken ve bitki tam büyüyünce .is-disabled → durur). Motorun (IX3) dairenin ölçeğine yazdığı nabza dokunulmaz (yalnız renk ve
   ayrı katmanlar). Hareketi azaltta yok. */
@media (prefers-reduced-motion: no-preference) {
  #sula-dugme:not(.is-disabled) .sula-dugme-drop::before,
  #sula-dugme:not(.is-disabled) .sula-dugme-drop::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(244, 237, 230, .85); pointer-events: none;
    animation: sula-halka 2.6s cubic-bezier(.2, .6, .35, 1) infinite; }
  #sula-dugme:not(.is-disabled) .sula-dugme-drop::after { animation-delay: 1.3s; }
  #sula-dugme:not(.is-disabled) .sula-dugme-drop-bg { animation: sula-nefes 2.6s ease-in-out infinite; }
}
@keyframes sula-halka { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes sula-nefes { 0%, 100% { background-color: rgba(255, 255, 255, .05); } 50% { background-color: rgba(255, 255, 255, .2); } }

/* ── Yüzen düğmeler: kaydırma oku + WhatsApp paneli (2026-10-18, kullanıcı: "sitenin soluna ya da sağına uygun bir yer; en yukarıya
   scroll ve scroll yapılmasını isteyen küçük bir ok; çok şık bir WhatsApp ikonu, tıklanınca WhatsApp gibi bir panel — 'Merhaba, ben
   <ilk ad>, WhatsApp üzerinden de iletişime geçebilirsiniz' mesajı; kullanıcı yazıp gönderince o mesajla WhatsApp açılsın; statik") ──────
   Sağ altta (güvenli alan payıyla). İşaretleme index.html sonunda (.yuzen), davranış sayfa/35-yuzen.js. Açılış bitince görünür
   (html.acilis-acik, sayfa/08). Menü (z 100) ve randevu formu (z 101) üstünde kalır; ön yükleme örtüleri zaten en üstte. Numara
   .yuzen-wa'nın data-wa-numara'sında (boşsa WhatsApp kişi seçtirir). Mesaj sitede kaydedilmez (wa.me bağlantısı, sunucu yok). */
.yuzen { position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + var(--klavye, 0px));
  display: flex; flex-direction: row; align-items: center; gap: 10px; font-family: Figtree, Arial, sans-serif;
  opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; translate: 0 calc(-1 * var(--yuzen-kalk, 0px));
  transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .6s, translate 0s; }
html.acilis-acik .yuzen { opacity: 1; visibility: visible; transform: none; transition-delay: .2s, .2s, 0s, 0s; }
/* kaçınma (sayfa/35, --yuzen-kalk): açılış yazısından süzülerek iner; alt bilgide kaydırmayla birlikte yükselir (geçişsiz) */
.yuzen[data-kalk="suzul"] { transition-duration: .5s, .6s, 0s, .7s; transition-timing-function: ease, cubic-bezier(.16, 1, .3, 1), linear, cubic-bezier(.16, 1, .3, 1); }
/* çekilme (sayfa/35, data-kacin-gizle): öğe düğmelerin yerine binince solup aşağı kayar, gidince geri gelir */
html.acilis-acik .yuzen.yuzen-cekil { opacity: 0; visibility: hidden; transform: translateY(12px); transition-delay: 0s, 0s, .6s, 0s; }
html.acilis-acik .yuzen.yuzen-cekil > * { pointer-events: none; }
html.acilis-acik .yuzen > * { pointer-events: auto; }
.yuzen.yuzen-acik { z-index: 102; }   /* panel açıkken menü çubuğunun (100) ve randevu formunun (101) önünde */
.yuzen button { margin: 0; font: inherit; -webkit-tap-highlight-color: transparent; }
.yuzen button:focus-visible { outline: 2px solid #636F3D; outline-offset: 3px; }
/* kaydırma oku: sayfa başında aşağı (hafif zıplar), aşağıda yukarı; çevresinde kaydırma ilerlemesi */
.yuzen-kaydir { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background-color: rgba(244, 237, 230, .96); color: #404F1D; cursor: pointer; box-shadow: 0 8px 22px -8px rgba(23, 29, 14, .5), 0 1px 3px rgba(23, 29, 14, .12);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1); }   /* bulanıklık filtresi yok (2026-10-28): neredeyse opak zeminde görünmüyordu, telefonda her kaydırma karesinde arkayı yeniden bulandırıyordu */
.yuzen-kaydir:hover { transform: translateY(-2px); }
.yuzen-halka { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); transform: rotate(-90deg); overflow: visible; }
.yuzen-halka circle { fill: none; stroke-width: 1.6; }
.yuzen-halka-iz { stroke: rgba(64, 79, 29, .16); }
.yuzen-halka-dolu { stroke: #636F3D; stroke-linecap: round; stroke-dasharray: 0 100; }
.yuzen-ok { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.yuzen-kaydir[data-yon="yukari"] .yuzen-ok { transform: rotate(180deg); }
/* WhatsApp düğmesi (2026-10-19, kullanıcı: "logo çok kötü duruyor; daha iyi yapalım, sitenin yeşiline uygun, ok işaretiyle aynı boyda,
   yan yana — altlı üstlü değil"): WhatsApp'ın kendi işareti (Simple Icons 13.21.0, CC0; satır içi SVG yolu, dışarıya bağlantı yok),
   sitenin yeşilinde (#636F3D = "Randevu al" düğmesi) krem işaret; okla aynı boy ve gölge, okun sağında (köşede). İnce iç krem halka:
   krem zeminde görünmez, koyu sahnelerde (su, bitki) düğmenin sınırını çizer; panel açıkken renk değişmez (koyu zeminde kaybolmasın) */
.yuzen-wa { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background-color: #636F3D; color: #F4EDE6; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(244, 237, 230, .32), 0 8px 22px -8px rgba(23, 29, 14, .5), 0 1px 3px rgba(23, 29, 14, .12);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .3s ease; }
.yuzen-wa:hover { background-color: #596A33; transform: translateY(-2px); }
.yuzen-wa[aria-expanded="true"] { transform: scale(.94); }
.yuzen-wa svg { width: 22px; height: 22px; fill: currentColor; }
/* panel — WhatsApp sohbet görünümü */
.wa-panel { position: absolute; right: 0; bottom: calc(100% + 12px); display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px));
  min-height: min(360px, calc(100vh - 96px - var(--klavye, 0px))); min-height: min(360px, calc(100svh - 96px - var(--klavye, 0px)));
  max-height: min(540px, calc(100vh - 96px - var(--klavye, 0px))); max-height: min(540px, calc(100svh - 96px - var(--klavye, 0px)));
  overflow: hidden; border-radius: 16px;
  background-color: #EFEAE2; color: #111B21; box-shadow: 0 26px 60px -20px rgba(11, 20, 26, .5), 0 4px 14px rgba(11, 20, 26, .14);
  transform-origin: calc(100% - 23px) calc(100% + 35px); opacity: 0; transform: translateY(10px) scale(.92);
  transition: opacity .25s ease, transform .4s cubic-bezier(.16, 1, .3, 1); }
.wa-panel[hidden] { display: none; }
.wa-panel.acik { opacity: 1; transform: none; }
/* yeşiller sitenin yeşili (2026-10-19, kullanıcı: "chatbox'taki yeşili de bizim sitenin yeşilinden yap"): başlık ve Gönder #636F3D (WhatsApp
   düğmesi ve "Randevu al" ile aynı), giden balon açık zeytin, odak halkası zeytin */
.wa-ust { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; background-color: #636F3D; color: #fff; }
.wa-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 16%; background-color: #D1D7DB; }
.wa-kim { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.wa-ad { overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.wa-durum { font-size: 12.5px; opacity: .85; }
.wa-kapat { display: grid; flex: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer; }
.wa-kapat:hover { background-color: rgba(255, 255, 255, .14); }
.wa-kapat svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wa-sohbet { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; overflow-y: auto;
  padding: 14px 14px 12px; background-color: #EFEAE2;
  background-image: radial-gradient(rgba(84, 101, 111, .08) 1.2px, transparent 1.5px), radial-gradient(rgba(84, 101, 111, .05) 1px, transparent 1.3px);
  background-size: 22px 22px, 34px 34px; background-position: 0 0, 11px 17px; overscroll-behavior: contain; }
.wa-gun { align-self: center; margin: 0 0 8px; padding: 4px 10px; border-radius: 8px; background-color: rgba(255, 255, 255, .94);
  color: #54656F; font-size: 12px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-balon { position: relative; max-width: 86%; padding: 7px 10px 20px; border-radius: 0 8px 8px 8px; background-color: #fff;
  font-size: 14.2px; line-height: 1.42; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow-wrap: anywhere; }
.wa-balon::before { content: ""; position: absolute; top: 0; left: -8px; width: 8px; height: 13px; background-color: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-balon p { margin: 0; color: inherit; font: inherit; }
.wa-balon.giden p { white-space: pre-wrap; }
.wa-balon[hidden], .wa-yaziyor[hidden] { display: none; }
.wa-saat { position: absolute; right: 8px; bottom: 4px; color: #667781; font-size: 11px; line-height: 1; }
.wa-balon.giden { align-self: flex-end; border-radius: 8px 0 8px 8px; background-color: #E3E9D3; }
.wa-balon.giden::before { left: auto; right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-yaziyor { display: inline-flex; gap: 4px; padding: 11px 12px; border-radius: 0 8px 8px 8px; background-color: #fff;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-yaziyor i { width: 7px; height: 7px; border-radius: 50%; background-color: #8696A0; animation: wa-nokta 1.2s ease-in-out infinite; }
.wa-yaziyor i:nth-child(2) { animation-delay: .15s; }
.wa-yaziyor i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-nokta { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.wa-yaz { display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 8px 10px 6px; background-color: #F0F2F5; }
.wa-yaz textarea { flex: 1; min-width: 0; height: 42px; max-height: 120px; margin: 0; padding: 11px 14px; border: 0; border-radius: 21px;
  background-color: #fff; color: #111B21; font: 15px/1.35 Figtree, Arial, sans-serif; resize: none; outline: none; box-shadow: none; }
.wa-yaz textarea::placeholder { color: #8696A0; }
.wa-yaz textarea:focus-visible { box-shadow: 0 0 0 2px rgba(99, 111, 61, .38); }
.wa-gonder { display: grid; flex: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background-color: #636F3D; color: #fff; cursor: pointer; transition: background-color .2s, transform .2s; }
.wa-gonder:not(:disabled):hover { background-color: #596A33; transform: scale(1.05); }
.wa-gonder:disabled { background-color: #B3B7A4; cursor: default; }
.wa-gonder svg { width: 20px; height: 20px; margin-left: 2px; fill: currentColor; }
.wa-not { margin: 0; padding: 0 14px 10px; background-color: #F0F2F5; color: #667781; font-size: 11.5px; line-height: 1.35; }
.wa-gizli { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media screen and (max-width: 479px) {
  .yuzen-kaydir, .yuzen-wa { width: 42px; height: 42px; }
  .yuzen-wa svg { width: 20px; height: 20px; }
  .wa-panel { transform-origin: calc(100% - 21px) calc(100% + 33px); }
}
/* kısa ekran (yatay telefon): sohbet alanı küçülür, yazı alanı hep görünür; not gizlenir (düğmeler yan yana olduğundan panel
   üstlerinde yer bulur) */
@media screen and (max-height: 520px) {
  .wa-not { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .yuzen-kaydir[data-yon="asagi"] .yuzen-ok { animation: yuzen-ok 1.8s ease-in-out infinite; }
}
@keyframes yuzen-ok { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .yuzen, .yuzen-kaydir, .yuzen-wa, .wa-panel, .yuzen-ok { transition: none; }
  .wa-yaziyor i { animation: none; }
}

/* ── Süs videosu Düşük Güç Modu'nda (2026-10-28, kullanıcının iPhone kaydı: "mısır videosu otomatik oynuyordu, play butonu geldi") ──
   iOS Düşük Güç Modu'nda (pil simgesi sarı) sessiz videoları da kendiliğinden oynatmıyor: mısır videosu ilk karede durdu, iOS üstüne
   kendi oynat düğmesini koydu (kodla ilgisi yok; normal modda oynuyor). O modda düğme CSS'le gizlenmiyor (WebKit hata 219889) → oynatma
   reddedilince (sayfa/36-video-dokunus.js) videonun yerine aynı sınıfla ilk karesi gelir (video etiketinin data-afis'i: 2026-10-31'den
   beri karo img/karo-nar-yagmuru-ilk.avif, kapanış img/kapanis-salata-ilk.avif — video değişirse yeniden üret), video düğmesiyle birlikte
   saydam; dokununca video yeniden başlatılır, oynayınca resim kalkar. */
img.video-afis { display: none; }
.video-durdu { position: relative; }
.video-durdu > video { opacity: 0; }
.video-durdu > img.video-afis { display: block; position: absolute; }