/* ===========================================================================
   style.css — NutriFlow tanitim sitesi.
   Tum renk/olcu degerleri theme.css degiskenlerinden gelir; burada sabit
   renk veya piksel degeri YAZILMAZ (istisna: reset ve 1px kenarlik).
   =========================================================================== */

/* ===========================================================================
   1. RESET
   =========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body, h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }

ul[role="list"], ol[role="list"] { list-style: none; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   2. TABAN
   =========================================================================== */

body {
  font-family: var(--font-govde);
  font-size: var(--yazi-md);
  font-weight: var(--kalinlik-normal);
  line-height: var(--satir-govde);
  color: var(--renk-metin);
  background-color: var(--renk-zemin);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;   /* marquee tasmasi yatay kaydirma yaratmasin */
}

main { flex: 1; }

/* --- Basliklar: ince serif, sikisik satir --- */
h1, h2, h3, h4 {
  font-family: var(--font-baslik);
  font-weight: var(--kalinlik-ince);
  line-height: var(--satir-baslik);
  color: var(--renk-ana-koyu);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: var(--yazi-h1); }
h2 { font-size: var(--yazi-h2); }
h3 { font-size: var(--yazi-h3); font-weight: var(--kalinlik-normal); }
h4 { font-size: var(--yazi-h4); font-weight: var(--kalinlik-orta); }

p { text-wrap: pretty; }
p + p { margin-top: var(--bosluk-4); }

a { color: var(--renk-ana-koyu); text-underline-offset: 3px; transition: color var(--gecis-hizli); }
a:hover { color: var(--renk-ana); }

strong { font-weight: var(--kalinlik-yari); }
em { font-style: italic; }

:focus-visible {
  outline: 2px solid var(--renk-ana-koyu);
  outline-offset: 3px;
  border-radius: var(--kose-sm);
}

::selection { background: var(--renk-seftali-acik); color: var(--renk-ana-koyu); }

/* ===========================================================================
   3. YERLESIM
   =========================================================================== */

.kapsayici {
  width: 100%;
  max-width: var(--icerik-genislik);
  margin-inline: auto;
  padding-inline: var(--bosluk-5);
}

.kapsayici--dar { max-width: var(--icerik-dar); }

/* Not kagidi kartlari gibi nefes isteyen bolumler icin daha genis kapsayici */
.kapsayici--genis { max-width: var(--icerik-genis); }

.bolum { padding-block: var(--bolum-dikey); }
.bolum--dar { padding-block: var(--bolum-dikey-dar); }

/* Bolum zemin renkleri — sayfa krem/seftali/yesil ritminde akar */
.zemin--krem    { background: var(--renk-zemin); }
.zemin--yuzey   { background: var(--renk-yuzey-2); }
.zemin--seftali { background: var(--renk-seftali-acik); }
.zemin--yesil   { background: var(--renk-ana); color: var(--renk-metin-ters); }
.zemin--yesil-acik { background: var(--renk-ana-sis); }
.zemin--toprak  { background: var(--renk-toprak-acik); }

.zemin--yesil h1, .zemin--yesil h2,
.zemin--yesil h3, .zemin--yesil h4 { color: var(--renk-metin-ters); }
.zemin--yesil a { color: var(--renk-metin-ters); }

.merkez { text-align: center; }
.merkez .kapsayici--dar { margin-inline: auto; }

/* ===========================================================================
   4. TIPOGRAFIK OGELER
   =========================================================================== */

/* Ust-baslik (eyebrow) — referanstaki monospace seridin karsiligi.
   Ucuncu font yuklemeden, harf araligiyla ayni etkiyi verir. */
.eyebrow {
  display: block;
  font-family: var(--font-govde);
  font-size: var(--yazi-eyebrow);
  font-weight: var(--kalinlik-orta);
  line-height: var(--satir-eyebrow);
  letter-spacing: var(--aralik-eyebrow);
  text-transform: uppercase;
  color: var(--renk-metin-2);
  margin-bottom: var(--bosluk-4);
}

.zemin--yesil .eyebrow { color: var(--renk-ana-acik); }

/* Giris paragrafi — govdeden bir ton buyuk */
.giris {
  font-size: var(--yazi-lg);
  color: var(--renk-metin-2);
  max-width: 60ch;
}

.merkez .giris { margin-inline: auto; }

/* Serif vurgu (baslik icinde italik kelime) */
.vurgu-italik {
  font-style: italic;
  color: var(--renk-seftali-koyu);
}

/* ===========================================================================
   5. BUTONLAR
   =========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-2);
  font-family: var(--font-govde);
  font-size: var(--yazi-sm);
  font-weight: var(--kalinlik-orta);
  letter-spacing: var(--aralik-buton);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--bosluk-3) var(--bosluk-6);
  border-radius: var(--kose-tam);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--gecis-hizli), color var(--gecis-hizli), border-color var(--gecis-hizli);
}

/* Birincil: dolu yesil zemin, acik metin */
.btn--ana {
  background: var(--renk-ana);
  color: var(--renk-metin-ters);
}
.btn--ana:hover { background: var(--renk-ana-koyu); color: var(--renk-metin-ters); }

/* Sicak vurgu: seftali zemin, koyu metin (tek belirgin CTA icin) */
.btn--seftali {
  background: var(--renk-seftali);
  color: var(--renk-ana-koyu);
}
.btn--seftali:hover { background: var(--renk-seftali-koyu); color: var(--renk-ana-koyu); }

/* Ikincil: ince konturlu, zeminsiz */
.btn--kontur {
  background: transparent;
  color: var(--renk-ana-koyu);
  border-color: var(--renk-cizgi-kontur);
}
.btn--kontur:hover { background: var(--renk-ana-koyu); color: var(--renk-metin-ters); }

.zemin--yesil .btn--kontur {
  color: var(--renk-metin-ters);
  border-color: var(--renk-metin-ters);
}
.zemin--yesil .btn--kontur:hover {
  background: var(--renk-metin-ters);
  color: var(--renk-ana-koyu);
}

/* Metin baglantisi — ok isaretli */
.baglanti-ok {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  font-size: var(--yazi-sm);
  font-weight: var(--kalinlik-orta);
  letter-spacing: var(--aralik-buton);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--renk-ana-koyu);
  border-bottom: 1px solid var(--renk-cizgi-koyu);
  padding-bottom: var(--bosluk-1);
}
.baglanti-ok::after { content: "\2192"; transition: transform var(--gecis-hizli); }
.baglanti-ok:hover::after { transform: translateX(4px); }

/* ===========================================================================
   6. UST MENU
   =========================================================================== */

.site-basligi {
  position: sticky;
  top: 0;
  z-index: var(--z-sabit);
  background: var(--renk-zemin);
  border-bottom: var(--kenarlik);
}

.site-basligi .kapsayici {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-5);
  min-height: var(--ustbar-yukseklik);
}

/* Marka logosu. Yukseklik sabit, genislik orana gore serbest —
   boylece hicbir ekranda ezilmez. */
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.logo img,
img.logo {
  width: auto;
  height: clamp(44px, 4.6vw, 68px);
  display: block;
}

/* Footer'daki krem tek renk surum */
.logo--alt {
  height: 216px;
  margin-bottom: var(--bosluk-5);
}

.logo svg { width: 30px; height: 30px; flex: none; }

/* Masaustu: menu + eylemler tek satirda, logonun sagina yaslanir */
.site-menu {
  display: flex;
  align-items: center;
  gap: var(--bosluk-6);
  margin-left: auto;
}

.site-menu__ust { display: none; }   /* yalnizca mobil cekmecede gorunur */

.ana-menu {
  display: flex;
  align-items: center;
  gap: var(--bosluk-6);
  list-style: none;
}

.ana-menu a {
  font-size: var(--yazi-eyebrow);
  font-weight: var(--kalinlik-orta);
  letter-spacing: var(--aralik-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--renk-metin-2);
  white-space: nowrap;
}

.ana-menu a:hover,
.ana-menu a[aria-current="page"] { color: var(--renk-ana-koyu); }

.menu-sag { display: flex; align-items: center; gap: var(--bosluk-5); }

/* Danisan girisi — masaustunde sade metin baglantisi */
.menu-portal {
  font-size: var(--yazi-eyebrow);
  font-weight: var(--kalinlik-orta);
  letter-spacing: var(--aralik-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--renk-metin-2);
  white-space: nowrap;
}
.menu-portal:hover { color: var(--renk-ana-koyu); }

/* Ust bardaki "Randevu Al" dugmesi.
   flex-shrink: 0 sart — yoksa dugme, esnek kutu icinde metninden DAR hale
   getirilir ve yazi iki satira duser. Olculdu: 1400px genislikte dugme
   154px'e sikisiyor, oysa tek satir icin ~169px gerekiyor. nowrap tek
   basina yetmez; sikismayi durdurmadan tasma olusur. */
.btn--ust {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobil menu acma dugmesi */
.menu-dugme {
  display: none;
  background: transparent;
  border: var(--kenarlik-kontur);
  border-radius: var(--kose-tam);
  padding: var(--bosluk-2) var(--bosluk-5);
  font-size: var(--yazi-eyebrow);
  font-weight: var(--kalinlik-orta);
  letter-spacing: var(--aralik-buton);
  text-transform: uppercase;
  cursor: pointer;
}

/* Perde masaustunde hic yok */
.menu-perde { display: none; }

/* ---------------------------------------------------------------------------
   MOBIL / DAR MASAUSTU: sagdan acilan cekmece

   Kirilim 1180px olmali: masaustu basligi (logo + 5 menu ogesi + Danisan
   Girisi + Randevu Al) ancak 1146px genislikten sonra sigiyor (olculdu).
   Kalan ~34px, yazi tipi henuz yuklenmemisken olusan genislik farki icin
   paydir.

   GECMIS — ayni hata iki kez yasandi, kirilim elle bakarak degil OLCULEREK
   belirlenmeli:
     - Kirilim 960px iken 960-1065 arasinda baslik tasiyordu.
     - Menuye "Hesaplayicilar" eklenince (daha uzun etiket) gereken genislik
       1065'ten 1146'ya cikti; 1100px kirilimi yine yetersiz kaldi.
   MENUYE OGE EKLENIRSE VEYA ETIKET UZARSA BU DEGER YENIDEN OLCULMELIDIR.
   Ayni esik assets/js/site.js icinde de var; ikisi birlikte degistirilmeli.
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {

  /* Sola dayali logo | esneyen bosluk | dugme. Logo solda kalir,
     dugme saga yaslanir; aradaki 1fr ikisini birbirinden iter. */
  .site-basligi .kapsayici {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--bosluk-3);
  }

  .logo { grid-column: 1; justify-self: start; }

  /* Mobilde logo yuksekligi */
  .logo img { height: 44px; }

  .menu-dugme {
    display: inline-block;
    grid-column: 2;
    justify-self: end;
    padding: var(--bosluk-2) var(--bosluk-4);   /* dar ekranda yer acar */
  }

  /* Karartma perdesi */
  .menu-perde {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(44, 46, 43, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gecis), visibility var(--gecis);
    z-index: var(--z-menu);
  }
  .menu-perde[data-acik] { opacity: 1; visibility: visible; }

  /* Cekmece: sagdan kayar.
     visibility:hidden → kapaliyken icindeki baglantilar Tab ile
     gezilemez (erisilebilirlik icin onemli). */
  .site-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--bosluk-5);
    padding: var(--bosluk-5);
    background: var(--renk-zemin);
    border-left: var(--kenarlik);
    box-shadow: var(--golge-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: calc(var(--z-menu) + 1);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--gecis), visibility var(--gecis);
  }
  .site-menu[data-acik] { transform: translateX(0); visibility: visible; }

  /* Cekmece basligi + kapat dugmesi */
  .site-menu__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--bosluk-4);
    border-bottom: var(--kenarlik);
  }
  .site-menu__ust span {
    font-size: var(--yazi-eyebrow);
    font-weight: var(--kalinlik-orta);
    letter-spacing: var(--aralik-eyebrow);
    text-transform: uppercase;
    color: var(--renk-metin-3);
  }
  .site-menu__kapat {
    background: transparent;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--renk-metin-2);
    cursor: pointer;
    padding: 0 var(--bosluk-2);
  }
  .site-menu__kapat:hover { color: var(--renk-ana-koyu); }

  /* Menu ogeleri alt alta, dokunmasi rahat */
  .ana-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .ana-menu li + li { border-top: var(--kenarlik); }
  .ana-menu a {
    display: block;
    padding: var(--bosluk-4) 0;
    font-size: var(--yazi-sm);
    letter-spacing: 0.06em;
    color: var(--renk-ana-koyu);
  }
  .ana-menu a[aria-current="page"] { font-weight: var(--kalinlik-yari); }

  /* Eylemler: en altta, tam genislikte ve BELIRGIN */
  .menu-sag {
    flex-direction: column;
    align-items: stretch;
    gap: var(--bosluk-3);
    margin-top: auto;
    padding-top: var(--bosluk-4);
  }

  /* Danisan girisi mobilde dolu yesil buton — cekmecede ayirt edilir */
  .menu-portal {
    display: block;
    text-align: center;
    padding: var(--bosluk-3) var(--bosluk-5);
    border-radius: var(--kose-tam);
    background: var(--renk-ana);
    color: var(--renk-metin-ters);
    font-size: var(--yazi-sm);
    letter-spacing: var(--aralik-buton);
  }
  .menu-portal:hover { background: var(--renk-ana-koyu); color: var(--renk-metin-ters); }

  /* Randevu Al butonu mobilde de gorunur (eskiden gizleniyordu) */
  .btn--ust { display: inline-flex; width: 100%; }
}

/* Cok dar ekranlar (<=360px): menu dugmesi daraltilir ki logo tam ortada
   kalabilsin. Aksi halde dugmenin sutunu logoyu sola itiyor. */
@media (max-width: 360px) {
  .menu-dugme {
    padding: var(--bosluk-2) var(--bosluk-3);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }
}

/* Cekmece acikken arka plandaki sayfa kaymasin */
body.menu-acik { overflow: hidden; }

/* ===========================================================================
   7. HERO
   =========================================================================== */

.hero { position: relative; background: var(--renk-ana-sis); }

.hero__izgara {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  min-height: min(78vh, 720px);
}

/* Sol: gorsel alani (gercek fotograf gelene kadar renkli blok) */
.hero__gorsel {
  position: relative;
  background: var(--renk-ana-acik);
  overflow: hidden;
}

.hero__gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* Sag: metin karti — gorselin uzerine hafifce tasar */
.hero__kart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--bosluk-5);
  background: var(--renk-yuzey);
  border-radius: var(--kose-kart);
  padding: clamp(var(--bosluk-6), 4vw, var(--bosluk-8));
  margin: var(--bosluk-7) var(--bosluk-5) var(--bosluk-7) calc(-1 * var(--bosluk-8));
  box-shadow: var(--golge-lg);
  z-index: 1;
}

.hero__kart h1 { margin-bottom: var(--bosluk-2); }
.hero__kart .eyebrow { margin-bottom: 0; }
.hero__imza { font-style: italic; color: var(--renk-metin-2); }
.hero__kart .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .hero__izgara { grid-template-columns: 1fr; min-height: 0; }
  .hero__gorsel { min-height: 46vh; }
  .hero__kart {
    margin: calc(-1 * var(--bosluk-7)) var(--bosluk-4) var(--bosluk-6);
    padding: var(--bosluk-6);
  }
}

/* ===========================================================================
   8. MARQUEE (kayan yazi seridi)
   =========================================================================== */

.marquee {
  overflow: hidden;
  padding-block: var(--bosluk-4);
  border-block: var(--kenarlik);
  background: var(--renk-ana);
  color: var(--renk-metin-ters);
  user-select: none;
}

.marquee__ic {
  display: flex;
  width: max-content;
  animation: marquee-kay 38s linear infinite;
}

.marquee__grup {
  display: flex;
  align-items: center;
  gap: var(--bosluk-7);
  padding-right: var(--bosluk-7);
  white-space: nowrap;
}

.marquee__grup span {
  font-size: var(--yazi-eyebrow);
  font-weight: var(--kalinlik-orta);
  letter-spacing: var(--aralik-eyebrow);
  text-transform: uppercase;
}

.marquee__grup span::before {
  content: "\2022";
  margin-right: var(--bosluk-7);
  color: var(--renk-ana-acik);
}

@keyframes marquee-kay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Animasyon azaltma tercihinde serit durur, metin okunur kalir */
@media (prefers-reduced-motion: reduce) {
  .marquee__ic { animation: none; }
}

/* ===========================================================================
   9. EMPATI BOLUMU
   =========================================================================== */

.empati { text-align: center; }
.empati h2 { margin-bottom: var(--bosluk-5); }
.empati__soru {
  font-family: var(--font-baslik);
  font-size: var(--yazi-h3);
  font-style: italic;
  color: var(--renk-ana-koyu);
  margin-block: var(--bosluk-5);
}

/* Marka motifi — bolum basinda kucuk yuvarlak isaret */
.motif {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--bosluk-6);
  border-radius: var(--kose-kart);
  background: var(--renk-seftali-acik);
  display: grid;
  place-items: center;
  border: var(--kenarlik-kontur);
}
.motif svg { width: 40px; height: 40px; }

/* Ikon yerine fotograf: kutu ikon boyutundan buyutulur ki gorsel net otursun.
   Kare oran korunur, koseler yuvarlak, tasan kisim kirpilir. */
.motif--gorsel {
  width: clamp(120px, 34vw, 160px);
  height: clamp(120px, 34vw, 160px);
  overflow: hidden;
  padding: 0;
}
.motif--gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* ===========================================================================
   10. FAYDALAR (numarali kart dizisi)
   =========================================================================== */

/* Yapiskan not kagidi kartlari.
   Kart genisligi her kirilimda ELLE hesaplanir (auto-fit yerine), boylece
   satirlar daima 5 / 3+2 / 2+2+1 seklinde ve ORTALANMIS durur — kirik,
   asimetrik yerlesim olusmaz. */
.faydalar__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bosluk-4);
  list-style: none;
  margin-top: var(--bosluk-7);
}

.fayda {
  /* Masaustu: tek sirada 5 kart */
  width: calc((100% - 4 * var(--bosluk-4)) / 5);

  /* Gorselin tuvali kare; oran birebir korunur, kagit gerilmez. */
  aspect-ratio: 1 / 1;

  background-image: url("../img/yapiskan-kagit.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  /* DIKKAT: Burada yuzdeli PADDING KULLANILMAZ. CSS'te yuzdeli dolgu, ogenin
     kendi genisligine degil KAPSAYICISININ genisligine gore hesaplanir; kart
     sismis ve icerik kutusu sifirlanmis olurdu. Metni ice almak icin bunun
     yerine cocuk ogelere yuzdeli GENISLIK verilir (o dogru sekilde kartin
     genisligine gore cozulur). */
  padding: 0;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Kart genisligini sorgulanabilir yap: ic yazi boyutlari kartin KENDI
     genisligine gore olceklenir (asagidaki @supports blogu). */
  container-type: inline-size;
}

.fayda__no {
  font-family: var(--font-baslik);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: var(--kalinlik-yari);
  letter-spacing: 0.04em;
  color: var(--renk-mürekkep-acik);
}

.fayda__ad {
  /* Kagidin ic alani: tuvalin ~%70'i. Yuzde burada dogru cozulur. */
  width: 70%;
  margin-top: 0.4rem;
  font-family: var(--font-baslik);
  font-size: 1.25rem;
  /* Nostaljik his: elle yazilmis not duygusu icin italik serif ve
     kagida sinmis mürekkep rengi. Ucuncu bir font YUKLENMEZ. */
  font-style: italic;
  font-weight: var(--kalinlik-orta);
  line-height: 1.35;
  color: var(--renk-mürekkep);
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Kart genisligine gore olcekleme: 5'li sirada da 2'li sirada da yazi
   kagida ayni oranda oturur. Destegi olmayan tarayicilar yukaridaki
   sabit puntolarla calisir.
   Ust bosluk (margin-top) icerigi asagi kaydirir; boylece metin ust
   kosedeki bantlarin altinda kalir. */
@supports (container-type: inline-size) {
  .fayda__no { font-size: 7.6cqw; margin-top: 7cqw; }
  .fayda__ad { font-size: 9.2cqw; margin-top: 2.5cqw; }
}

/* Tablet: 3 + 2 (ikinci sira ortali) */
@media (max-width: 1000px) {
  .fayda { width: calc((100% - 2 * var(--bosluk-4)) / 3); }
}

/* Mobil: 2 + 2 + 1 (son kart ortali) */
@media (max-width: 640px) {
  .fayda { width: calc((100% - var(--bosluk-4)) / 2); }
}

/* ---------------------------------------------------------------------------
   BEZEME GORSELLERI — iki bolumun renk sinirinda oturan dekoratif ogeler
   --------------------------------------------------------------------------- */

/* Bezemeler bolum sinirinin disina tasar. z-index, sonraki kardes bolumun
   tasan parcayi ustunden ortmesini engeller. Sabit ust menu (z:100) yine ustte. */
.bolum--bezemeli {
  position: relative;
  z-index: 2;
}

.bezeme {
  position: absolute;
  pointer-events: none;   /* metin secimini ve tiklamayi engellemesin */
  user-select: none;
  height: auto;
}

/* Sag ust: onceki bolumle olan renk sinirini yariya boler */
.bezeme--tabak {
  width: clamp(96px, 13vw, 190px);
  top: 0;
  right: clamp(var(--bosluk-4), 4vw, var(--bosluk-8));
  transform: translateY(-50%) rotate(-6deg);
}

/* Sol alt: sonraki bolumle olan renk sinirini yariya boler */
.bezeme--muz {
  width: clamp(78px, 10vw, 150px);
  bottom: 0;
  left: clamp(var(--bosluk-4), 4vw, var(--bosluk-8));
  transform: translateY(50%) rotate(8deg);
}

/* Danisan yorumlari bolumu — sag ust: dusen sebzeler */
.bezeme--sebzeler {
  width: clamp(90px, 12vw, 175px);
  top: 0;
  right: clamp(var(--bosluk-4), 4vw, var(--bosluk-8));
  transform: translateY(-50%) rotate(5deg);
}

/* Danisan yorumlari bolumu — sol alt: meyve sepeti */
.bezeme--meyve {
  width: clamp(88px, 11.5vw, 168px);
  bottom: 0;
  left: clamp(var(--bosluk-4), 4vw, var(--bosluk-8));
  transform: translateY(50%) rotate(-5deg);
}

/* Cok dar ekranda bezemeler icerigin uzerine binmesin diye kuculur;
   tamamen kaldirmiyoruz, marka hissini tasiyorlar. */
@media (max-width: 520px) {
  .bezeme--tabak    { width: 84px; right: var(--bosluk-3); }
  .bezeme--muz      { width: 66px; left: var(--bosluk-3); }
  .bezeme--sebzeler { width: 78px; right: var(--bosluk-3); }
  .bezeme--meyve    { width: 76px; left: var(--bosluk-3); }
}

/* ===========================================================================
   11. HIZMET KARTLARI
   =========================================================================== */

.hizmetler__izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--bosluk-5);
  margin-top: var(--bosluk-7);
}

.hizmet-kart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bosluk-4);
  text-align: center;
  padding: var(--bosluk-7) var(--bosluk-5);
  background: var(--renk-yuzey);
  border-radius: var(--kose-kart);
  border: var(--kenarlik);
  transition: transform var(--gecis), box-shadow var(--gecis);
}

.hizmet-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-md); }

.hizmet-kart__ikon {
  width: 76px;
  height: 76px;
  border-radius: var(--kose-tam);
  display: grid;
  place-items: center;
  flex: none;
}
.hizmet-kart__ikon svg { width: 38px; height: 38px; }

.ikon--yesil   { background: var(--renk-ana); color: var(--renk-metin-ters); }
.ikon--seftali { background: var(--renk-seftali); color: var(--renk-ana-koyu); }
.ikon--toprak  { background: var(--renk-toprak); color: var(--renk-ana-koyu); }

.hizmet-kart p { color: var(--renk-metin-2); font-size: var(--yazi-sm); }
.hizmet-kart .btn { margin-top: auto; }

/* Fiyat satiri — paket kartlarinda.
   Secici `.hizmet-kart p` ile ayni ozgullukte olmali, yoksa punto ezilir. */
.hizmet-kart p.hizmet-kart__fiyat {
  font-family: var(--font-baslik);
  font-size: var(--yazi-h4);
  font-weight: var(--kalinlik-orta);
  color: var(--renk-ana-koyu);
  margin-top: var(--bosluk-2);
}

/* ===========================================================================
   12. HAKKIMDA ONIZLEME (asimetrik, ust uste binen gorseller)
   =========================================================================== */

.hakkimda__izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--bosluk-6), 5vw, var(--bosluk-9));
  align-items: center;
}

.hakkimda__gorseller { position: relative; padding-bottom: var(--bosluk-8); }

.hakkimda__gorsel-1 {
  aspect-ratio: 4 / 5;
  background: var(--renk-toprak-acik);
  border-radius: var(--kose-md);
  width: 78%;
}

/* Ikinci gorsel birinciyle kesisir — dergi kolaj hissi */
.hakkimda__gorsel-2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56%;
  aspect-ratio: 3 / 4;
  background: var(--renk-ana-acik);
  border: 6px solid var(--renk-yuzey);
  border-radius: var(--kose-md);
}

.hakkimda__gorsel-1 img,
.hakkimda__gorsel-2 img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

@media (max-width: 860px) {
  .hakkimda__izgara { grid-template-columns: 1fr; }
  .hakkimda__gorseller { max-width: 420px; }
}

/* ===========================================================================
   13. DANISAN YORUMLARI
   =========================================================================== */

/* ---------------------------------------------------------------------------
   DANISAN YORUMLARI — pastel zemin + meyve dokusu + yatay kaydirak
   Yorum sayisi arttikca sayfa ASAGI UZAMAZ; kartlar yana kayar.
   --------------------------------------------------------------------------- */

.yorumlar {
  position: relative;
  text-align: center;
  background: var(--renk-seftali-sis);
  /* DIKKAT: Buraya `overflow: hidden` KOYULMAZ. Desen zaten ::before
     katmaninda inset:0 ile sinirli, tasmaz. overflow:hidden konulursa
     bolum sinirina oturan bezeme gorselleri (sag ust / sol alt meyveler)
     yarisindan kirpilir. */
}

/* Bolum basligi — kucuk eyebrow yerine okunakli serif baslik */
.yorumlar__baslik {
  font-size: var(--yazi-h2);
  margin-bottom: var(--bosluk-3);
}

.yorumlar__giris {
  font-size: var(--yazi-lg);
  color: var(--renk-metin-2);
  max-width: 52ch;
  margin-inline: auto;
}

/* Meyve dokusu: ayri katman, boylece opaklik metni etkilemez */
.yorumlar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/meyve-desen.webp");
  background-size: 420px auto;
  background-repeat: repeat;
  opacity: 0.11;                 /* metnin okunurlugunu bozmayacak kadar */
  pointer-events: none;
}

.yorumlar > .kapsayici { position: relative; }   /* desenin ustunde kalsin */

/* --- Kaydirak --- */
.yorum-kaydirak {
  position: relative;
  margin-top: var(--bosluk-6);
}

.yorum-ray {
  display: flex;
  gap: var(--bosluk-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--bosluk-2);
  padding-block: var(--bosluk-2);
  /* Kaydirma cubugu gizlenir ama kaydirma calismaya devam eder */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.yorum-ray::-webkit-scrollbar { display: none; }
.yorum-ray:focus-visible { outline: 2px solid var(--renk-ana-koyu); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .yorum-ray { scroll-behavior: auto; }
}

/* --- Kart --- */
.yorum {
  flex: 0 0 min(560px, 84%);
  scroll-snap-align: center;
  margin-block: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--bosluk-5);
  padding: clamp(var(--bosluk-6), 4vw, var(--bosluk-8));
  background: var(--renk-yuzey);
  border: var(--kenarlik);
  border-radius: var(--kose-kart);
  box-shadow: var(--golge-md);
  text-align: center;
}

.yorum__metin {
  font-family: var(--font-baslik);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--renk-mürekkep);
  margin: 0;
}
.yorum__metin::before { content: "“"; }
.yorum__metin::after  { content: "”"; }

.yorum__imza {
  display: block;
  font-style: normal;
  font-size: var(--yazi-eyebrow);
  font-weight: var(--kalinlik-orta);
  letter-spacing: var(--aralik-eyebrow);
  text-transform: uppercase;
  color: var(--renk-metin-2);
}

/* --- Oklar --- */
.yorum-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border: var(--kenarlik);
  border-radius: var(--kose-tam);
  background: var(--renk-yuzey);
  box-shadow: var(--golge-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--gecis-hizli), border-color var(--gecis-hizli);
}
.yorum-ok:hover { background: var(--renk-ana); border-color: var(--renk-ana); }

/* Ok isareti: CSS ile cizilir, ek gorsel yok */
.yorum-ok::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--renk-ana-koyu);
  border-right: 2px solid var(--renk-ana-koyu);
}
.yorum-ok:hover::before { border-color: var(--renk-metin-ters); }

.yorum-ok--geri { left: calc(-1 * var(--bosluk-6)); }
.yorum-ok--geri::before { transform: rotate(-135deg) translate(-2px, -2px); }

.yorum-ok--ileri { right: calc(-1 * var(--bosluk-6)); }
.yorum-ok--ileri::before { transform: rotate(45deg) translate(-2px, -2px); }

/* Oklar kapsayicinin ~32px disina tasar. Bu yer ancak pencere yeterince
   genisken vardir; daha darda ok ekranin disina tasip kirpilir. Bu yuzden
   1200px alti tamamen gizlenir — kaydirma parmak/trackpad ile zaten calisir
   ve yandaki kartin ucu gorundugu icin kaydirilabilecegi bellidir. */
@media (max-width: 1200px) {
  .yorum-ok { display: none; }
  .yorum-ray { scroll-padding-inline: var(--bosluk-4); }
}

/* Fotografsiz yorum kurali (CLAUDE.md B.9): oncesi-sonrasi gorseli YOK. */

/* ===========================================================================
   14. BLOG ONIZLEME
   =========================================================================== */

/* Satirda 3 kart; tablette 2, telefonda 1 — her zaman simetrik dizilir. */
.yazilar__izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bosluk-6);
  margin-top: var(--bosluk-7);
  text-align: left;
}
@media (max-width: 900px) { .yazilar__izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .yazilar__izgara { grid-template-columns: 1fr; } }

/* Kart: krem yuzey, ince kenarlik, yuvarlak kose; uzerine gelince hafifce
   yukselir ve gorsel yakinlasir — duz degil, editorial bir his. */
.yazi-kart {
  display: flex;
  flex-direction: column;
  background: var(--renk-yuzey);
  border: var(--kenarlik);
  border-radius: var(--kose-kart);
  overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.yazi-kart:hover {
  transform: translateY(-4px);
  box-shadow: var(--golge-lg);
}

.yazi-kart__gorsel {
  aspect-ratio: 3 / 2;
  background: var(--renk-toprak-acik);
  overflow: hidden;
}
.yazi-kart__gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--gecis);
}
.yazi-kart:hover .yazi-kart__gorsel img { transform: scale(1.04); }

/* Metin bloguna ic bosluk; gorsel tam kenara yaslanir. */
.yazi-kart__govde {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3);
  padding: var(--bosluk-5);
  flex: 1;
}

.yazi-kart h2, .yazi-kart h3 { margin: 0; font-size: var(--yazi-h4); }
.yazi-kart h2 a, .yazi-kart h3 a { text-decoration: none; color: var(--renk-ana-koyu); }
.yazi-kart h2 a:hover, .yazi-kart h3 a:hover { color: var(--renk-seftali-koyu); }

.yazi-kart__tarih {
  font-size: var(--yazi-xs);
  letter-spacing: var(--aralik-buton);
  text-transform: uppercase;
  color: var(--renk-seftali-koyu);
}

.yazi-kart p { font-size: var(--yazi-sm); color: var(--renk-metin-2); margin: 0; }

/* Blog yazisi henuz yokken gosterilen sade not */
.bos-durum {
  padding: var(--bosluk-7);
  border: 1px dashed var(--renk-cizgi-koyu);
  border-radius: var(--kose-kart);
  color: var(--renk-metin-2);
  text-align: center;
}

/* ===========================================================================
   15. KAPANIS CTA
   =========================================================================== */

.kapanis { text-align: center; }
.kapanis h2 { margin-bottom: var(--bosluk-5); }
.kapanis .btn { margin-top: var(--bosluk-6); }

/* ===========================================================================
   16. FOOTER
   =========================================================================== */

.site-alti {
  position: relative;   /* bezemelerin konumlanabilmesi icin */
  background: var(--renk-ana-koyu);
  color: var(--renk-metin-ters);
  padding-block: var(--bolum-dikey-dar) var(--bosluk-6);
}

/* Footer ust kenarindaki renk sinirinde oturan yatay sebze seridi.
   Footer DOM'da en sonda oldugu icin tasan parca ustteki bolumun
   uzerine dogru cizilir; ek z-index gerekmez. */
.bezeme--sebze-serit {
  width: clamp(190px, 25vw, 420px);
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
}

.site-alti a { color: var(--renk-ana-acik); text-decoration: none; }
.site-alti a:hover { color: var(--renk-metin-ters); text-decoration: underline; }

.alt-izgara {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--bosluk-7);
  padding-bottom: var(--bosluk-7);
  border-bottom: 1px solid rgba(250, 248, 244, 0.18);
}

.alt-baslik {
  font-family: var(--font-govde);
  font-size: var(--yazi-eyebrow);
  font-weight: var(--kalinlik-orta);
  letter-spacing: var(--aralik-eyebrow);
  text-transform: uppercase;
  color: var(--renk-ana-acik);
  margin: 0;
}

.alt-menu { list-style: none; display: flex; flex-direction: column; gap: var(--bosluk-3); }
.alt-menu a { font-size: var(--yazi-sm); }

/* ---------------------------------------------------------------------------
   FOOTER BOLUMLERI — masaustunde normal sutun, mobilde akordiyon
   --------------------------------------------------------------------------- */

/* Ok isareti summary'nin kendisine eklenir; masaustunde gizlenir. */
.alt-bolum > summary {
  list-style: none;          /* Firefox'un ucgen isaretini kaldirir */
  cursor: default;
}
.alt-bolum > summary::-webkit-details-marker { display: none; }
.alt-bolum > summary::after { content: none; }

/* MASAUSTU: bolumler daima acik durur.
   NOT: <details> kapaliyken icerigi CSS'teki display ile GIZLEMEZ; tarayici
   kendi ic mekanizmasiyla gizler. Bu yuzden "display: flex !important" ile
   acik tutmak MUMKUN DEGILDIR. Cozum: HTML'de `open` varsayilan olarak durur,
   mobilde site.js bunu kaldirir. JavaScript kapaliysa mobilde bolumler acik
   kalir — uzun bir footer olur ama tum baglantilar erisilebilir. */
@media (min-width: 761px) {
  .alt-bolum > summary { pointer-events: none; margin-bottom: var(--bosluk-4); }
}

/* MOBIL: tam genislikte, ayni yukseklikte, cizgiyle ayrilmis akordiyon satirlari */
@media (max-width: 760px) {
  .alt-izgara {
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* Marka blogu (logo + tanim + sosyal) akordiyonun ustunde kalir */
  .alt-izgara > div:first-child {
    padding-bottom: var(--bosluk-6);
    text-align: center;
  }
  .alt-izgara > div:first-child .alt-tanim { margin-inline: auto; }
  .alt-izgara > div:first-child .sosyal { justify-content: center; }
  .alt-izgara > div:first-child .logo { margin-inline: auto; }

  .alt-bolum {
    border-top: 1px solid rgba(250, 248, 244, 0.18);
  }
  .alt-bolum:last-of-type { border-bottom: 1px solid rgba(250, 248, 244, 0.18); }

  .alt-bolum > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-4);
    /* Dokunma hedefi en az 56px yukseklik: parmakla rahat basilir */
    min-height: 56px;
    padding-block: var(--bosluk-4);
    cursor: pointer;
    pointer-events: auto;
  }

  .alt-bolum > summary .alt-baslik {
    font-size: var(--yazi-sm);
    letter-spacing: 0.08em;
    color: var(--renk-metin-ters);
  }

  /* Asagi bakan ok; acilinca yukari doner */
  .alt-bolum > summary::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    flex: none;
    border-right: 1.5px solid var(--renk-ana-acik);
    border-bottom: 1.5px solid var(--renk-ana-acik);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--gecis-hizli);
  }
  .alt-bolum[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  .alt-bolum > .alt-menu {
    padding-bottom: var(--bosluk-5);
    gap: var(--bosluk-4);
  }
  .alt-bolum > .alt-menu a,
  .alt-bolum > .alt-menu li { font-size: var(--yazi-sm); }
}

/* Not: footer logosu img'dir; renk/yazi kurali gerekmez, bosluk .logo--alt'ta. */

.alt-tanim { font-size: var(--yazi-sm); color: var(--renk-ana-acik); max-width: 40ch; }

.sosyal { display: flex; gap: var(--bosluk-4); margin-top: var(--bosluk-5); }
.sosyal a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(250, 248, 244, 0.3);
  border-radius: var(--kose-tam);
  transition: background-color var(--gecis-hizli);
}
.sosyal a:hover { background: rgba(250, 248, 244, 0.12); text-decoration: none; }
.sosyal svg { width: 18px; height: 18px; }

.alt-kapanis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bosluk-4);
  padding-top: var(--bosluk-5);
  font-size: var(--yazi-xs);
  color: var(--renk-ana-acik);
}

/* Tasarim/gelistirme imzasi — footer'in en alt satiri */
.alt-imza {
  margin-top: var(--bosluk-4);
  padding-top: var(--bosluk-4);
  border-top: 1px solid rgba(250, 248, 244, 0.14);
  font-size: var(--yazi-xs);
  color: var(--renk-ana-acik);
  text-align: center;
  opacity: 0.85;
}
.alt-imza strong { font-weight: var(--kalinlik-kalin); color: var(--renk-metin-ters); }

/* ===========================================================================
   17. IC SAYFA BASLIGI + EKMEK KIRINTISI
   =========================================================================== */

.sayfa-basi { padding-block: var(--bolum-dikey-dar); }
.sayfa-basi h1 { margin-bottom: var(--bosluk-4); }
.sayfa-basi .giris { max-width: 62ch; }

.kirinti { margin-bottom: var(--bosluk-5); }
.kirinti ol { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); list-style: none; }
.kirinti li { display: flex; align-items: center; gap: var(--bosluk-2); }
.kirinti li + li::before { content: "/"; color: var(--renk-metin-3); }
.kirinti a, .kirinti span {
  font-size: var(--yazi-xs);
  letter-spacing: var(--aralik-buton);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--renk-metin-2);
}
.kirinti a:hover { color: var(--renk-ana-koyu); }
.kirinti [aria-current="page"] { color: var(--renk-ana-koyu); }

/* ===========================================================================
   18. METIN SAYFALARI (KVKK, gizlilik, blog yazisi)
   =========================================================================== */

.metin { max-width: var(--metin-genislik); }
.metin h2 { font-size: var(--yazi-h3); margin-top: var(--bosluk-8); margin-bottom: var(--bosluk-4); }
.metin h3 { font-size: var(--yazi-h4); margin-top: var(--bosluk-6); margin-bottom: var(--bosluk-3); }
.metin p, .metin ul, .metin ol { margin-bottom: var(--bosluk-4); }
.metin ul, .metin ol { padding-left: var(--bosluk-5); }
.metin li { margin-bottom: var(--bosluk-2); }
.metin > *:first-child { margin-top: 0; }

/* Markdown alintisi (>) — editorial, seftali vurgulu */
.metin blockquote {
  margin: var(--bosluk-6) 0;
  padding: var(--bosluk-3) var(--bosluk-6);
  border-left: 3px solid var(--renk-seftali);
  font-family: var(--font-baslik);
  font-size: var(--yazi-h4);
  font-style: italic;
  color: var(--renk-metin-2);
}
.metin blockquote p { margin-bottom: 0; }

/* Metin ici baglantilar okunur ve tema renginde */
.metin a {
  color: var(--renk-ana-koyu);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.metin a:hover { color: var(--renk-seftali-koyu); }

/* ===========================================================================
   19. ADIM LISTESI (danismanlik sureci)
   =========================================================================== */

.adimlar { list-style: none; counter-reset: adim; margin-top: var(--bosluk-7); }

.adim {
  counter-increment: adim;
  position: relative;
  padding-left: var(--bosluk-8);
  padding-bottom: var(--bosluk-7);
  border-left: 1px solid var(--renk-cizgi-koyu);
  margin-left: var(--bosluk-4);
}
.adim:last-child { border-left-color: transparent; padding-bottom: 0; }

.adim::before {
  content: counter(adim, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--renk-zemin);
  border: var(--kenarlik-kontur);
  border-radius: var(--kose-tam);
  font-size: var(--yazi-xs);
  letter-spacing: var(--aralik-buton);
}

.adim h3 { margin-bottom: var(--bosluk-3); }
.adim p { color: var(--renk-metin-2); max-width: 60ch; }

/* ===========================================================================
   20. PAKET TABLOSU
   =========================================================================== */

.paket-grup { margin-bottom: var(--bosluk-9); }
.paket-grup:last-child { margin-bottom: 0; }
.paket-grup__ust { max-width: 62ch; margin-bottom: var(--bosluk-6); }

.paket-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--bosluk-5);
}

.paket {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-4);
  padding: var(--bosluk-6);
  background: var(--renk-yuzey);
  border: var(--kenarlik);
  border-radius: var(--kose-kart);
}

.paket__sure {
  font-size: var(--yazi-eyebrow);
  letter-spacing: var(--aralik-eyebrow);
  text-transform: uppercase;
  color: var(--renk-metin-2);
}

.paket__fiyat {
  font-family: var(--font-baslik);
  font-size: var(--yazi-h2);
  line-height: 1;
  color: var(--renk-ana-koyu);
}

.paket__seans { font-size: var(--yazi-sm); color: var(--renk-metin-2); }
.paket p { font-size: var(--yazi-sm); color: var(--renk-metin-2); }
.paket .btn { margin-top: auto; }

/* Odeme bilgilendirmesi — sitede online odeme YOK */
.odeme-notu {
  margin-top: var(--bosluk-7);
  padding: var(--bosluk-5);
  background: var(--renk-ana-sis);
  border-radius: var(--kose-kart);
  font-size: var(--yazi-sm);
  color: var(--renk-metin-2);
  max-width: 70ch;
}

/* ===========================================================================
   21. FORMLAR
   =========================================================================== */

.form { max-width: 640px; }
.form__satir { margin-bottom: var(--bosluk-5); }

.form__ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bosluk-5);
}
@media (max-width: 620px) { .form__ikili { grid-template-columns: 1fr; gap: 0; } }

.form label {
  display: block;
  margin-bottom: var(--bosluk-2);
  font-size: var(--yazi-sm);
  font-weight: var(--kalinlik-orta);
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="date"],
.form input[type="number"],
.form select,
.form textarea {
  width: 100%;
  padding: var(--bosluk-3) var(--bosluk-4);
  background: var(--renk-yuzey);
  border: var(--kenarlik);
  border-radius: var(--kose-md);
  font-size: var(--yazi-sm);
  transition: border-color var(--gecis-hizli);
}

.form input:focus,
.form select:focus,
.form textarea:focus { border-color: var(--renk-ana); }

.form textarea { min-height: 150px; resize: vertical; }

.form__onay {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-3);
  font-size: var(--yazi-sm);
  font-weight: var(--kalinlik-normal);
  color: var(--renk-metin-2);
}
.form__onay input { margin-top: 0.3em; flex: none; }

.form__yardim { font-size: var(--yazi-xs); color: var(--renk-metin-3); margin-top: var(--bosluk-2); }
.zorunlu { color: var(--renk-hata); }

/* Spam tuzagi — gozle gorunmez ama ekran okuyucudan da gizli degil */
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===========================================================================
   22. HESAPLAYICILAR
   =========================================================================== */

.hesap-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--bosluk-6);
  align-items: stretch;   /* kartlar ayni yukseklikte — simetrik izgara */
}

/* Kart bir dikey esnek kutu: baslik+aciklama+form ustte, sonuc en altta
   hizalanir. Boylece farkli alan sayisina ragmen kartlar ayni boyda kalir. */
.hesap {
  display: flex;
  flex-direction: column;
  padding: var(--bosluk-6);
  background: var(--renk-yuzey);
  border: var(--kenarlik);
  border-radius: var(--kose-kart);
}
.hesap h2 { font-size: var(--yazi-h3); margin-bottom: var(--bosluk-4); }
.hesap p { font-size: var(--yazi-sm); color: var(--renk-metin-2); }

.hesap .form {
  display: flex;
  flex-direction: column;
  flex: 1;                       /* formu kartin kalan yuksekligine yay */
  margin-top: var(--bosluk-5);
}

/* Etiketler iki satira sarsa bile alttaki input hep ayni hizada baslar:
   her etiket iki satirlik alan ayirir, boylece yan yana inputlar simetrik. */
.hesap .form label {
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
}

/* Hesapla butonu: tam genislikte ve kartin altina sabitlenir; hemen altinda
   sonuc kutusu. margin-top:auto ustteki bos alani yutup ikisini asagi iter. */
.hesap__buton {
  width: 100%;
  margin-top: auto;
}

.hesap__sonuc {
  margin-top: var(--bosluk-5);
  padding: var(--bosluk-4);
  background: var(--renk-ana-sis);
  border-radius: var(--kose-md);
  min-height: 84px;
}
.hesap__deger {
  font-family: Arial, Helvetica, sans-serif;   /* rakamlar net okunsun */
  font-size: var(--yazi-h3);
  font-weight: var(--kalinlik-orta);
  color: var(--renk-ana-koyu);
  line-height: 1.2;
}
.hesap__aciklama {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--yazi-sm);
  color: var(--renk-metin-2);
  margin-top: var(--bosluk-2);
}

/* ===========================================================================
   23. SSS (acilir kapanir)
   =========================================================================== */

.sss { max-width: var(--metin-genislik); }

.sss details {
  border-bottom: var(--kenarlik);
  padding-block: var(--bosluk-5);
}

.sss summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bosluk-4);
  font-family: var(--font-baslik);
  font-size: var(--yazi-h4);
  color: var(--renk-ana-koyu);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font-size: 1.4em; line-height: 1; flex: none; }
.sss details[open] summary::after { content: "\2013"; }
.sss details > *:not(summary) { margin-top: var(--bosluk-4); color: var(--renk-metin-2); }

/* ===========================================================================
   24. BLOG
   =========================================================================== */

/* Blog yazisi: ortalanmis, rahat okunur bir sutun. Baslik ve giris ortali;
   govde metni okunabilirlik icin sola hizali kalir. */
.yazi-govde {
  max-width: 72ch;
  margin-inline: auto;
}
.yazi-govde p { margin-bottom: var(--bosluk-5); }

.yazi-govde > h1 { text-align: center; }
.yazi-govde .yazi-ust-bilgi { justify-content: center; }
.yazi-govde > .giris {
  text-align: center;
  margin-inline: auto;
  max-width: 60ch;
}

/* Okuma konforu: biraz daha buyuk punto ve ferah satir araligi. */
.yazi-govde .metin {
  max-width: none;
  font-size: 1.06rem;
  line-height: 1.85;
}
.yazi-govde .metin p { margin-bottom: var(--bosluk-5); }
.yazi-kapak {
  aspect-ratio: 4 / 3;
  background: var(--renk-toprak-acik);
  border-radius: var(--kose-kart);
  overflow: hidden;
  margin-bottom: var(--bosluk-7);
}
.yazi-kapak img { width: 100%; height: 100%; object-fit: cover; }

.yazi-ust-bilgi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-4);
  font-size: var(--yazi-xs);
  letter-spacing: var(--aralik-buton);
  text-transform: uppercase;
  color: var(--renk-metin-3);
  margin-bottom: var(--bosluk-5);
}

/* ===========================================================================
   25. ORTAK BILESENLER
   =========================================================================== */

/* Klavye kullanicisi icin "icerige atla" */
.icerige-atla {
  position: absolute;
  left: var(--bosluk-4);
  top: -100px;
  z-index: var(--z-modal);
  background: var(--renk-yuzey);
  color: var(--renk-ana-koyu);
  padding: var(--bosluk-2) var(--bosluk-4);
  border: var(--kenarlik-kontur);
  border-radius: var(--kose-md);
  transition: top var(--gecis);
}
.icerige-atla:focus { top: var(--bosluk-4); }

.gizli-erisilebilir {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Flash mesaj */
.mesaj {
  padding: var(--bosluk-3) var(--bosluk-4);
  border-radius: var(--kose-md);
  border: 1px solid transparent;
  margin-bottom: var(--bosluk-4);
  font-size: var(--yazi-sm);
}
.mesaj--basari { background: var(--renk-basari-acik); border-color: var(--renk-basari); color: var(--renk-basari); }
.mesaj--hata   { background: var(--renk-hata-acik);   border-color: var(--renk-hata);   color: var(--renk-hata); }
.mesaj--bilgi  { background: var(--renk-bilgi-acik);  border-color: var(--renk-bilgi);  color: var(--renk-bilgi); }

/* ---------------------------------------------------------------------------
   CEREZ BANDI — yalnizca analitik ayari tanimliysa ve karar verilmemisse gorunur
   --------------------------------------------------------------------------- */
.cerez-bandi {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-modal);
  background: var(--renk-yuzey);
  border-top: var(--kenarlik-kontur);
  box-shadow: var(--golge-lg);
  padding: var(--bosluk-5) var(--bosluk-4);
}

.cerez-bandi[hidden] { display: none; }

.cerez-bandi__ic {
  max-width: var(--icerik-genislik);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-5);
  flex-wrap: wrap;
}

.cerez-bandi p {
  font-size: var(--yazi-sm);
  color: var(--renk-metin-2);
  max-width: 68ch;
  margin: 0;
}

.cerez-bandi__dugmeler {
  display: flex;
  gap: var(--bosluk-3);
  flex-wrap: wrap;
}

@media (max-width: 620px) {
  .cerez-bandi__ic { flex-direction: column; align-items: stretch; }
  .cerez-bandi__dugmeler .btn { flex: 1; }
}

/* Tibbi uyari (blog + hesaplayici altinda zorunlu) */
.tibbi-uyari {
  font-size: var(--yazi-xs);
  line-height: 1.6;
  color: var(--renk-metin-2);
  background: var(--renk-yuzey-2);
  border-left: 3px solid var(--renk-seftali);
  padding: var(--bosluk-4);
  border-radius: var(--kose-sm);
}

.site-alti .tibbi-uyari {
  background: transparent;
  color: var(--renk-ana-acik);
  border-left-color: var(--renk-seftali);
  padding-left: var(--bosluk-4);
  max-width: 70ch;
}