@charset "UTF-8";
/* ==========================================================================
   BALI YAMAN — site.css
   Sıfırdan yazıldı. Önceki projelerin CSS'i kopyalanıp rengi değiştirilmedi.

   Kimlik markanın KENDİSİNDEN alındı (BASLA.md §5 "önce markaya bak"):
     · turuncu   → kavanoz etiketinden piksel örneklenerek ölçüldü (#E06010 civarı)
     · arı sarısı→ logodaki arının gövde rengi (#F0C000 civarı)
     · krem      → etiketteki altıgenin zemini
     · altıgen   → logonun ve etiketin kendi biçimi; sitenin dokusu bu
   Yazı: Gabarito (başlık) + Source Sans 3 (gövde) — ikisi de latin-ext'li,
   ikisi de portföyde daha önce kullanılmadı.
   ========================================================================== */

/* ------------------------------------------------------------ yazı tipleri */
@font-face{font-family:"Gabarito";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/font/gabarito-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Gabarito";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/font/gabarito-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Gabarito";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/font/gabarito-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Gabarito";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/font/gabarito-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/font/sourcesans3-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/font/sourcesans3-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/font/sourcesans3-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/font/sourcesans3-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/font/sourcesans3-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/font/sourcesans3-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ------------------------------------------------------------- değişkenler */
:root{
  --marka:#E1701A;          /* etiketten ölçülen turuncu — dolgu */
  --marka-koyu:#A34608;     /* açık zeminde METİN için (kontrast ~5.6) */
  --marka-acik:#F8A254;
  --bal:#F3C200;            /* logodaki arının sarısı */
  --bal-koyu:#B98A00;
  --kestane:#241610;        /* koyu bant, alt bilgi */
  --kestane-2:#38241A;
  --krem:#FBF1E0;           /* etiketteki altıgenin zemini */
  --kagit:#FFFCF6;
  --metin:#2A1D16;
  --metin-2:#61483B;
  --cizgi:#EADBC2;
  --cizgi-2:#D8C3A2;
  --yesil:#1E8A4B;          /* yalnız WhatsApp düğmesi */

  --k:12px;                 /* köşe yarıçapı */
  --k-kucuk:8px;
  --golge:0 1px 2px rgba(58,32,12,.06), 0 6px 18px rgba(58,32,12,.07);
  --golge-2:0 2px 6px rgba(58,32,12,.10), 0 18px 40px rgba(58,32,12,.13);
  --sarmal:1180px;
  --tepe-boy:88px;

  /* Petek dokusu — markanın kendi biçimi, SVG çizgi deseni.
     ⚠ 28.08.2026'da ARTIK KULLANILMIYOR: `.bolum-petek` Emir'in verdiği
     `header.jpg` fotoğrafına geçti. Değişken bilerek duruyor — başka bir
     bölümde hafif doku gerekirse hazır, ayrıca dosya boyutuna etkisi yok
     (kullanılmayan CSS değişkeni indirilmiyor değil ama birkaç yüz bayt). */
  --petek:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23C89A55' stroke-width='1.1' stroke-opacity='.35'%3E%3Cpath d='M28 1 52 15v28L28 57 4 43V15z'/%3E%3Cpath d='M0 63 4 60'/%3E%3Cpath d='M28 49 52 63v28L28 105 4 91V63z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- temeller */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.68;color:var(--metin);
  background:var(--kagit);
  /* ⚠ overflow-x:hidden BİLEREK YOK.
     "Son emniyet" diye konursa taşmayı gizler ve ölçüm düzeneği de
     göremez: documentElement.scrollWidth clientWidth'i aşamaz, test
     "taşma yok" der. Taşma varsa görülmeli ve KAYNAĞINDA düzeltilmeli.
     320 / 360 / 390 px ölçümü bu kural olmadan yapıldı: 171/171 temiz. */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--marka-koyu);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--marka)}
h1,h2,h3,h4{font-family:"Gabarito","Source Sans 3",sans-serif;line-height:1.14;margin:0 0 .5em;
  letter-spacing:-.012em;color:var(--metin)}
h1{font-weight:800;font-size:clamp(1.85rem,1.15rem + 2.6vw,3.1rem)}
h2{font-weight:800;font-size:clamp(1.45rem,1.05rem + 1.5vw,2.15rem)}
h3{font-weight:700;font-size:clamp(1.15rem,1rem + .55vw,1.4rem)}
h4{font-weight:700;font-size:1.02rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin-bottom:.35em}
strong{font-weight:700}
hr{border:0;border-top:1px solid var(--cizgi);margin:2.2rem 0}
:focus-visible{outline:3px solid var(--marka);outline-offset:2px;border-radius:4px}
::selection{background:var(--bal);color:var(--kestane)}
.gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.atla{position:absolute;left:-9999px;top:0;background:var(--kestane);color:#fff;
  padding:.7rem 1.1rem;z-index:200;border-radius:0 0 var(--k) 0}
.atla:focus{left:0}
/* ikon() width vermiyor — kural olmazsa SVG kapsayıcıyı doldurup dev görünür */
svg:not([width]){width:1.15em;height:1.15em;flex:none}

.sarmal{max-width:var(--sarmal);margin-inline:auto;padding-inline:clamp(14px,4vw,28px);width:100%}

/* --------------------------------------------------------------- üst şerit */
/* Bağlantı şeridi (Instagram) — sayfanın en üstü.
   ⚠ Bu şeridin ALTINA koyu bilgi bandı konmaz: bir önceki projede ikisi
   üst üste geldi ve sahibi "çirkin" dedi. Şerit doğrudan başlığa oturur.
   Renk geçişi Instagram’ı çağrıştırır ama SON DURAĞI markanın kendi
   turuncusudur — yabancı bir renk sitede asılı kalmıyor. */
/* Instagram’ın kendi marka geçişi: sarıdan mora. Emir örnek site verdi
   (toprakturizm.com) ve "renk, tasarım, boyut, yazı geçişi birebir olsun"
   dedi. Ölçüler ve zamanlama oradan alındı. */
.serit-baglanti{min-height:50px;display:flex;align-items:center;color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.12);-webkit-font-smoothing:antialiased}
.serit-instagram{background:linear-gradient(90deg,#feda75 0%,#fa7e1e 22%,
  #d62976 50%,#962fbf 78%,#6a2fb5 100%)}
.serit-baglanti .sarmal{display:flex;align-items:center;justify-content:center;
  gap:14px;padding:6px 18px;max-width:1200px}
.serit-ikon{display:flex;flex:none}
.serit-ikon svg{width:19px;height:19px;display:block}

/* dönüşümlü mesaj kabı — yükseklik sabit, mesajlar dikeyde kayar */
/* ⚠ 28.08.2026 · Emir: "ikon en sola, Instagram'a Git en sağa kaymış".
   Sebebi ölçü elemanının BLOK olmasıydı: blok kutu kapsayıcısını doldurunca
   metin kabı 1200 px'e yayılıyor, ikon ile düğme iki uca itiliyordu.
   inline-block + width:max-content ile kap yalnız EN UZUN MESAJ kadar
   genişliyor; üçü tek küme hâlinde ortada duruyor. */
.serit-metin-kap{position:relative;flex:0 1 auto;min-width:0;
  width:max-content;max-width:100%;
  height:1.5em;overflow:hidden;font-size:15px;font-weight:600;letter-spacing:.01em}
.serit-olcu{display:inline-block;visibility:hidden;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding:0 2px}
.serit-msj{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding:0 2px;
  transform:translateY(120%);opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s cubic-bezier(.16,1,.3,1)}
.serit-msj.acik{transform:translateY(0);opacity:1}
.serit-msj.cikan{transform:translateY(-120%);opacity:0}
/* Sıradaki mesaj aşağıda beklerken GEÇİŞSİZ durur; yoksa ilk turda
   ekranı yukarıdan aşağı süpürerek geçiyor. */
.serit-msj.bekleyen{transition:none}
.serit-yazi{display:inline-block;min-width:0;max-width:100%;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

.serit-dugme{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.20);color:#fff;border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-decoration:none;
  padding:6px 15px;border-radius:999px;font-size:13.5px;font-weight:600;
  letter-spacing:.01em;line-height:1;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,background .2s ease}
.serit-dugme:hover{color:#fff;transform:translateY(-1px);filter:brightness(1.08);
  box-shadow:0 4px 14px rgba(0,0,0,.22)}
.serit-dugme:focus-visible{outline:2px solid #fff;outline-offset:2px}
.serit-nokta{position:relative;width:9px;height:9px;border-radius:50%;
  background:#fff;flex:0 0 auto}
.serit-nokta::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:#fff;animation:serit-nabiz 1.5s ease-out infinite}
@keyframes serit-nabiz{0%{transform:scale(1);opacity:.6}70%{opacity:0}
  100%{transform:scale(2.8);opacity:0}}

@media (max-width:600px){
  .serit-baglanti .sarmal{gap:8px;padding:5px 12px}
  .serit-metin-kap{flex:1 1 auto;width:auto;font-size:13px}
  .serit-olcu{display:none}
  .serit-msj{justify-content:flex-start}
  .serit-yazi{flex:0 0 auto;max-width:none;overflow:visible;text-overflow:clip}
  .serit-dugme{padding:5px 10px;font-size:11px;gap:7px}
  .serit-nokta{width:8px;height:8px}
}
@media (max-width:380px){
  .serit-baglanti .sarmal{gap:7px;padding:5px 10px}
  .serit-metin-kap{font-size:12px}
  .serit-dugme{padding:4px 9px;font-size:10px;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .serit-msj{transition:none !important}
  .serit-nokta::after{animation:none !important}
}

/* Klasik bilgi şeridi — bu sitede kullanılmıyor ama motor destekliyor */
/* ⚠ 28.08.2026 · `:not(.serit-baglanti)` İKİNCİ SATIRA DA ŞART.
   Emir "ikon en sola, Instagram'a Git en sağa kaymış" dedi; sebebi buydu:
   bu kural ile yukarıdaki `.serit-baglanti .sarmal` kuralının ÖZGÜLLÜĞÜ AYNI
   (0,2,0) ve bu dosyada SONRA geldiği için kazanıyordu. Instagram şeridinin
   `justify-content:center` değeri sessizce `space-between` ile eziliyor,
   ikon ile düğme iki uca itiliyordu. Kuralları sıraya değil KAPSAMA göre ayır. */
.ust-serit:not(.serit-baglanti){background:var(--kestane);color:#F0E2CE;font-size:.86rem}
.ust-serit:not(.serit-baglanti) .sarmal{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;
  align-items:center;justify-content:space-between;min-height:38px;padding-block:.35rem}
.ust-serit-sol{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem}
.ust-serit span,.ust-serit a{display:inline-flex;align-items:center;gap:.4rem}
.ust-serit a{color:var(--bal);text-decoration:none;font-weight:600}
.ust-serit a:hover{color:#fff}
.ust-serit svg{opacity:.75}

/* ------------------------------------------------------------------ başlık */
.tepe{position:sticky;top:0;z-index:100;background:rgba(255,252,246,.94);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--cizgi)}
.tepe .sarmal{display:flex;align-items:center;gap:.75rem;min-height:var(--tepe-boy);
  flex-wrap:wrap;padding-block:.5rem}

/* ⚠ flex:1 1 0 — 'none' ya da yalnız min-width:0 DEĞİL.
   Sarmalı wrap olan flex satırında kırılma küçültmeden ÖNCE hesaplanır;
   taban 0 olmazsa uzun marka etiketi menü düğmesini alt satıra atıyor. */
.marka{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:inherit}
.marka-isaret{width:44px;height:44px;object-fit:contain;flex:none}
.marka-yazi{display:flex;flex-direction:column;min-width:0}
.marka-ad{font-family:"Gabarito",sans-serif;font-weight:800;font-size:1.32rem;
  line-height:1.05;letter-spacing:-.02em;color:var(--kestane)}
.marka-tag{font-size:.74rem;color:var(--metin-2);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis}
.marka-x{color:var(--marka)}

/* ── Marka bloğu LOGO biçimi ──────────────────────────────────────────────
   Kelime markası logonun içinde olduğu için yanına ayrıca yazı basılmıyor
   (Emir, 28.08.2026). Genişlik yükseklikten türer; oran logonun kendi oranı. */
.marka-logo{flex:0 1 auto;min-width:0;display:flex;align-items:center}
.marka-logo img{height:56px;width:auto;max-width:100%;object-fit:contain;display:block}
/* Emir (28.08.2026): "menüler logoya çok yakın, logo ile Ana Sayfa arasında
   biraz boşluk olsun; logo bir tık büyük, başlık alanı da büyüyebilir."
   Logo 46→56 px, başlık yüksekliği 74→88 px, araya 1.9rem boşluk.
   Boşluk 960 px'in ALTINDA sıfırlanır — orada menü zaten alt satıra iniyor
   ve fazladan boşluk logoyu sıkıştırıp 320 px'te taşma üretiyor. */
.tepe .marka-logo{margin-inline-end:1.9rem}
/* Alt bilgi koyu zeminli; logonun siyah kelime markası orada kaybolur.
   ⚠ ÖNCE krem bir plaka kullanılıyordu (firmadan beyaz sürüm yoktu ve logoyu
   kodla beyaza boyamak arıyı bozuyordu). Emir 28.08.2026'da `beyazlogo.png`
   verdi; artık koyu zemine DOĞRUDAN beyaz logo basılıyor, plaka kalktı.
   Plakalı kural, beyaz sürümü olmayan siteler için altta duruyor. */
.alt .marka-logo{display:inline-flex;background:var(--krem);padding:.6rem .85rem;
  border-radius:var(--k);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.alt .marka-logo img{height:42px}
/* Beyaz sürüm varsa plaka yok — logo koyu zeminde tek başına durur */
.alt .marka-logo-beyaz{background:none;padding:0;border-radius:0;box-shadow:none}
.alt .marka-logo-beyaz img{height:64px}
@media (max-width:420px){ .marka-logo img{height:38px} }

.menu-ac{display:none;background:var(--krem);border:1px solid var(--cizgi-2);
  color:var(--kestane);border-radius:var(--k-kucuk);padding:.5rem;cursor:pointer;flex:none}
.menu-ac svg{width:1.5em;height:1.5em;display:block}

.menu{display:flex;flex-wrap:wrap;gap:.1rem .15rem;align-items:center}
.menu a{padding:.5rem .68rem;border-radius:999px;text-decoration:none;
  color:var(--metin);font-weight:600;font-size:.95rem;white-space:nowrap}
.menu a:hover{background:var(--krem);color:var(--marka-koyu)}
.menu a[aria-current="page"]{background:var(--marka);color:#fff}
.menu .menu-mobil{display:none}

.tepe-butonlar{display:flex;gap:.5rem;flex:none}

/* ------------------------------------------------------------------ düğme */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.15rem;border-radius:999px;font-weight:700;font-size:.97rem;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  line-height:1.2}
.btn:hover{transform:translateY(-1px)}
.btn-ana{background:var(--marka);color:#fff;box-shadow:0 4px 14px rgba(225,112,26,.32)}
.btn-ana:hover{background:#CF6414;color:#fff}
.btn-cizgi{background:transparent;color:var(--kestane);border-color:var(--cizgi-2)}
.btn-cizgi:hover{background:var(--krem);color:var(--marka-koyu)}
.btn-yesil{background:var(--yesil);color:#fff}
.btn-yesil:hover{background:#186E3C;color:#fff}
.btn-koyu{background:var(--kestane);color:var(--bal)}
.btn-koyu:hover{background:#160C07;color:var(--bal)}
.btn-grup{display:flex;flex-wrap:wrap;gap:.6rem}

/* --------------------------------------------------------------- kırıntı */
.kirinti{background:var(--krem);border-bottom:1px solid var(--cizgi);font-size:.85rem}
.kirinti ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:.6rem 0}
.kirinti li+li::before{content:"›";margin-right:.35rem;color:var(--cizgi-2)}
.kirinti a{color:var(--metin-2);text-decoration:none}
.kirinti a:hover{color:var(--marka-koyu);text-decoration:underline}
.kirinti [aria-current]{color:var(--metin);font-weight:600}

/* ------------------------------------------------------------------ bölüm */
.bolum{padding:clamp(2.4rem,1.4rem + 3vw,4.2rem) 0}
.bolum-krem{background:var(--krem)}
/* ⚠ 28.08.2026 · Emir'in verdiği `header.jpg` (koyu petek + arı) SVG altıgen
   desenin yerini aldı.
   ⚠ ÜSTÜNE PERDE ÇEKİLMİYOR — Emir: "perde koyma, ben perde katmıştım."
   Görsel zaten koyulaştırılmış olarak geldi. Perde olmayınca zemin koyu
   kalıyor, dolayısıyla bu bölümün YAZI RENKLERİ de açığa çevrildi; yoksa
   koyu metin koyu zeminde okunmuyordu. Renkler `.bolum-koyu` ile aynı dilde. */
.bolum-petek{background:var(--kestane) url("/assets/img/petek-arka.jpg") center/cover no-repeat;
  color:#EFE0CB}
.bolum-petek h2,.bolum-petek h3{color:#fff}
.bolum-petek a{color:var(--bal)}
.bolum-petek .etiket{color:var(--bal)}
.bolum-petek .etiket::before{background:var(--bal)}
/* Fotoğraf altyazısı kendi krem plakasında duruyor, dokunulmuyor. */
/* ⚠ MOBİLDE ARKA PLAN RESMİ YOK (Emir, 28.08.2026: "bu arka plan resmini
   mobilde görmeyelim"). Dar ekranda görselin dokusu zaten seçilmiyor, üstelik
   boşuna 43 KB indiriliyordu. Resim kalkınca zemin koyu kalamaz — bölüm
   28.08 öncesindeki hâline, KREM + KOYU YAZI'ya dönüyor. Renkleri tek tek
   geri almak şart: yalnız `background-image:none` yazılsaydı açık zeminde
   açık yazı kalır, metin okunmazdı. */
@media (max-width:760px){
  .bolum-petek{background:var(--krem);color:var(--metin)}
  .bolum-petek h2,.bolum-petek h3{color:var(--metin)}
  .bolum-petek a{color:var(--marka-koyu)}
  .bolum-petek .etiket{color:var(--marka-koyu)}
  .bolum-petek .etiket::before{background:var(--marka)}
}
.bolum-koyu{background:var(--kestane);color:#EFE0CB}
.bolum-koyu h2,.bolum-koyu h3{color:#fff}
.bolum-koyu a{color:var(--bal)}
/* ⚠ Yukarıdaki kural DÜĞMELERİ de sarıya boyuyordu: turuncu dolgulu
   `.btn-ana` üzerinde sarı yazı okunmuyordu (Emir bildirdi, 28.08.2026).
   Bağlantı kuralı (0,1,1), bu kural (0,2,0) → özgüllükle kazanıyor.
   `.bolum-petek` de artık koyu zeminli, o yüzden ikisi birlikte yazıldı. */
.bolum-koyu .btn-ana,.bolum-petek .btn-ana{color:#fff}
.bolum-koyu .btn-cizgi,.bolum-petek .btn-cizgi{color:#fff;border-color:rgba(255,255,255,.55)}
.bolum-koyu .btn-cizgi:hover,.bolum-petek .btn-cizgi:hover{background:rgba(255,255,255,.14);color:#fff}

.bolum-bas{max-width:70ch;margin-bottom:1.9rem}
/* Giriş paragrafının tam genişliğe yayıldığı biçim (iletişim sayfası).
   Emir 28.08.2026: "bu yazının sağı boş, yay, devamı sağa gelsin." */
.bolum-bas-genis{max-width:none}
.bolum-bas p{color:var(--metin-2);font-size:1.06rem;margin-bottom:0}
.bolum-koyu .bolum-bas p{color:#D9C6AE}

.etiket{display:inline-flex;align-items:center;gap:.45rem;font-family:"Gabarito",sans-serif;
  font-weight:700;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--marka-koyu);margin-bottom:.55rem}
.etiket::before{content:"";width:16px;height:18px;flex:none;background:var(--marka);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bolum-koyu .etiket{color:var(--bal)}
.bolum-koyu .etiket::before{background:var(--bal)}

/* ------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--kestane);color:#fff;overflow:hidden}

/* ---------------------------------------------------------- ışık halkası
   Emir (28.08.2026): "adiyamanasmatavan.com'da slider'a sol alttan ve sağ
   üstten hafif aydınlatma vermiştik, burada da olsa güzel olur."
   Yöntem oradan alındı (`.isik`), RENKLER BURANIN PALETİNDEN:
     sağ üst  → arı sarısı (--bal)    · sol alt → marka turuncusu (--marka)
   Görsel değil, iki radyal gradyan — ek dosya indirilmiyor.
   ⚠ Kapsayıcıda `position:relative` ve `overflow:hidden` ŞART; gradyanlar
     kutunun dışına taşacak biçimde konumlanıyor, kırpılmazsa sayfayı
     yatayda kaydırır (dar ekran testi bunu yakalar).
   ⚠ İçerik `.sarmal` z-index:1 ile üstte durur, yoksa ışık yazının önüne
     geçip metni soluklaştırıyor. */
.isik{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.isik::before{content:"";position:absolute;
  width:62vw;height:62vw;max-width:780px;max-height:780px;top:-34%;right:-12%;
  background:radial-gradient(circle,
      rgba(243,194,0,.30) 0%, rgba(243,194,0,.11) 38%, transparent 68%)}
.isik::after{content:"";position:absolute;
  width:52vw;height:52vw;max-width:620px;max-height:620px;bottom:-32%;left:-14%;
  background:radial-gradient(circle,
      rgba(225,112,26,.22) 0%, rgba(225,112,26,.08) 42%, transparent 70%)}
.hero .sarmal{position:relative;z-index:1}
.hero-ic{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,1rem + 2vw,2.6rem);
  align-items:center;padding:clamp(2.2rem,1.4rem + 3vw,4rem) 0}
.hero h1{color:#fff;margin-bottom:.55rem}
/* Başlık İKİ PARÇA (Emir, 28.08.2026): üst satır küçük, alt satır büyük.
   ⚠ `text-wrap:balance` KALDIRILDI — satırları artık biz belirliyoruz,
   dengeli sarma araya girip parçaları tekrar bölüyordu.
   ⚠ Üst parçanın boyutu, en dar ekranda (320 px) TEK SATIRA sığacak biçimde
   seçildi; sığmazsa başlık yine üç satıra çıkar ve hero uzar. Dar ekran
   testi taşmayı yakalar ama satır sayısını yakalamaz — gözle bakıldı. */
/* ⚠ Emir (28.08.2026, ikinci tur): "üst satır bir tık büyük ve BEYAZ olsun,
   alt satırla aynı renkte — farklı bir yazı gibi duruyor."
   Renk artık `inherit` (h1 beyaz); krem tonu kaldırıldı.
   ⚠ 420 px altında boyut geri çekiliyor: .68em ile "Arının emeği, bizim
   özenimiz," 320 px'te tek satıra SIĞMIYOR, sığmayınca başlık üç satıra
   çıkıp hero'yu yeniden uzatıyor (Emir'in asıl şikâyeti buydu). */
.hero h1 .h1-ust{display:block;font-size:.68em;font-weight:800;
  letter-spacing:-.008em;color:inherit;margin-bottom:.1em}
.hero h1 .h1-alt{display:block;font-size:1.06em;line-height:1.06}
@media (max-width:420px){ .hero h1 .h1-ust{font-size:.58em} }
.hero p.hero-ozet{font-size:clamp(1.02rem,.96rem + .3vw,1.18rem);color:#E7D6BF;max-width:56ch}
.hero-gorsel{border-radius:var(--k);overflow:hidden;box-shadow:var(--golge-2);
  border:1px solid rgba(255,255,255,.12)}
.hero-gorsel img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* Kırpılmamış açılış görseli: oran kaynağın kendi oranı, hiçbir yeri kesilmez.
   ⚠ .hero-gorsel'DEN SONRA yazıldı — aynı özgüllükte olsa sıra kazanırdı. */
.hero-gorsel-tam img{aspect-ratio:1080/906;object-fit:contain}
.hero-rozetler{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.15rem 0 1.4rem;padding:0;list-style:none}
.hero-rozetler li{display:flex;align-items:center;gap:.45rem;background:rgba(243,194,0,.13);
  border:1px solid rgba(243,194,0,.3);color:#F6E3B6;border-radius:999px;
  padding:.35rem .8rem;font-size:.88rem;font-weight:600;margin:0}
.hero-rozetler svg{color:var(--bal)}
/* Koyu hero üzerinde çizgili düğme: .btn-cizgi'nin varsayılan koyu metni
   koyu zeminde görünmez oluyordu (düğme boş görünüyordu). */
.hero .btn-cizgi{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-cizgi:hover{background:rgba(255,255,255,.14);color:#fff}
@media (min-width:900px){
  .hero-ic{grid-template-columns:1.05fr .95fr}
}
/* ── MOBİLDE HERO SIRALAMASI ──────────────────────────────────────────────
   Emir (28.08.2026): "mobilde ana sayfa karışık duruyor; başlık ve özetten
   sonra RESİM gelsin, ondan sonra rozetler ve düğmeler."
   Öncesinde bütün metin bloğu (etiket→h1→özet→rozetler→düğmeler) tek parça
   hâlinde geliyor, fotoğraf en sona düşüyordu.

   Yöntem: metin sarmalayıcısı `display:contents` alıyor → içindeki parçalar
   ızgaranın DOĞRUDAN öğesi oluyor ve `order` ile tek tek sıralanabiliyor.
   ⚠ `display:contents` kutuyu kaldırır ama DOM'u değiştirmez: seçicide
   `.hero-ic > .etiket` YAZMA, eşleşmez — parçalar hâlâ `.hero-metin`in
   çocuğudur.
   ⚠ Izgara boşluğu (gap) sıfırlanmalı: contents'ten sonra gap altı parçanın
   ARASINA birden giriyor ve başlıkla paragrafı birbirinden koparıyordu.
   Aralıklar öğelerin kendi margin'lerinden geliyor.
   ⚠ 900 px eşiği bilerek: iki sütuna geçiş de orada, tek eşik iki yerde
   ayrı ayrı tanımlanmasın. */
@media (max-width:899px){
  .hero-ic{gap:0}
  .hero-metin{display:contents}
  .hero-metin>.etiket{order:1;justify-self:start}
  .hero-metin>h1{order:2}
  .hero-metin>.hero-ozet{order:3}
  .hero-gorsel{order:4;margin:.5rem 0 1.5rem}
  .hero-metin>.hero-rozetler{order:5;margin-top:0}
  .hero-metin>.btn-grup{order:6}
}

/* ------------------------------------------------------------------ ızgara */
/* ⚠ minmax(min(X,100%),1fr) — düz minmax(X,1fr) 320px telefonda taşırır */
.izgara{display:grid;gap:clamp(.9rem,.6rem + 1vw,1.5rem);
  grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr))}
.izgara-2{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.izgara-dar{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}

/* -------------------------------------------------------------- ürün kartı */
.kart{position:relative;display:flex;flex-direction:column;background:var(--kagit);
  border:1px solid var(--cizgi);border-radius:var(--k);overflow:hidden;
  box-shadow:var(--golge);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.kart:hover{transform:translateY(-3px);box-shadow:var(--golge-2);border-color:var(--cizgi-2)}
.kart-gorsel{background:var(--krem);overflow:hidden}
.kart-gorsel img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s ease}
.kart:hover .kart-gorsel img{transform:scale(1.035)}
.kart-ic{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;flex:1}
.kart-ust{font-family:"Gabarito",sans-serif;font-size:.74rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--marka-koyu);margin-bottom:.3rem}
.kart h3{margin-bottom:.35rem}
.kart p{color:var(--metin-2);font-size:.96rem;margin-bottom:.85rem}
.kart-bag{margin-top:auto;display:inline-flex;align-items:center;gap:.35rem;
  font-weight:700;color:var(--marka-koyu);font-size:.94rem}
.kart:hover .kart-bag svg{transform:translateX(3px)}
.kart-bag svg{transition:transform .14s ease}
.kart-ort{position:absolute;inset:0}
.kart-ort:focus-visible{outline-offset:-3px}

/* ------------------------------------------------------------- bilgi kutusu */
.kutu{background:var(--krem);border:1px solid var(--cizgi);border-radius:var(--k);
  padding:1.15rem 1.25rem}
.kutu-liste{list-style:none;margin:0;padding:0}
.kutu-liste li{display:grid;grid-template-columns:minmax(0,8.5rem) 1fr;gap:.4rem 1rem;
  padding:.55rem 0;border-bottom:1px dashed var(--cizgi-2);margin:0}
.kutu-liste li:last-child{border-bottom:0}
.kutu-liste dt,.kutu-liste .ad{font-weight:700;color:var(--kestane);font-size:.92rem}
.kutu-liste .deger{color:var(--metin-2);font-size:.96rem;min-width:0}
@media (max-width:520px){
  .kutu-liste li{grid-template-columns:1fr;gap:.1rem}
}

/* vurgu şeridi — sayfa içi tek satırlık kanıt/uyarı */
.serit{display:flex;gap:.85rem;align-items:flex-start;background:var(--kagit);
  border:1px solid var(--cizgi-2);border-left:5px solid var(--marka);
  border-radius:var(--k-kucuk);padding:.95rem 1.1rem;margin:1.6rem 0}
.serit svg{color:var(--marka);margin-top:.22em}
.serit p{margin:0;font-size:.98rem}
.serit-bal{border-left-color:var(--bal)}
.serit-bal svg{color:var(--bal-koyu)}

/* --------------------------------------------------------------- editoryal */
/* ⚠ kontrol.php doorway testi bu sınıfı arıyor: <div class="metin">…</div></section> */
.metin{max-width:72ch}
/* Tek başına duran metin bloğu (yalnız gizlilik sayfası) ortalanır — sağında
   kocaman bir boşlukla sola yaslı durunca düzen hatası gibi görünüyordu. */
.sarmal>.metin:only-child{margin-inline:auto}
.metin h2{margin-top:1.8rem}
.metin h3{margin-top:1.5rem}
.metin>*:first-child{margin-top:0}
.metin ul{padding-left:1.1em}
.metin li::marker{color:var(--marka)}

.iki-sutun{display:grid;gap:clamp(1.4rem,1rem + 2vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:start}

.yan-gorsel{border-radius:var(--k);overflow:hidden;border:1px solid var(--cizgi);
  box-shadow:var(--golge)}
/* Uzun metin bloğunun yanında kayan görsel — metin bitene kadar ekranda kalır,
   altında yeni bir boşluk açmaz. Başlık yapışkan olduğu için üstten pay var. */
.yan-gorsel-yapiskan{position:sticky;top:calc(var(--tepe-boy) + 1.2rem)}
@media (max-width:760px){ .yan-gorsel-yapiskan{position:static} }
.yan-gorsel img{width:100%;aspect-ratio:4/3;object-fit:cover}
.yan-gorsel figcaption{background:var(--krem);padding:.6rem .9rem;font-size:.86rem;
  color:var(--metin-2);border-top:1px solid var(--cizgi)}
figure{margin:0}

/* --------------------------------------------------------------------- SSS */
.sss{border:1px solid var(--cizgi);border-radius:var(--k);overflow:hidden;background:var(--kagit)}
.sss details+details{border-top:1px solid var(--cizgi)}
.sss summary{cursor:pointer;padding:.95rem 2.6rem .95rem 1.1rem;font-weight:700;
  position:relative;list-style:none;color:var(--kestane)}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"";position:absolute;right:1.1rem;top:1.25rem;width:9px;height:9px;
  border-right:2.2px solid var(--marka);border-bottom:2.2px solid var(--marka);
  transform:rotate(45deg);transition:transform .16s ease}
.sss details[open] summary::after{transform:rotate(-135deg);top:1.45rem}
.sss summary:hover{background:var(--krem)}
.sss-cevap{padding:0 1.1rem 1.05rem;color:var(--metin-2)}
.sss-cevap p{margin:0}

/* ------------------------------------------------------------------- tablo */
.tablo-kutu{overflow-x:auto;border:1px solid var(--cizgi);border-radius:var(--k);
  background:var(--kagit);-webkit-overflow-scrolling:touch}
.tablo-kutu table{border-collapse:collapse;width:100%;min-width:460px;font-size:.95rem}
.tablo-kutu caption{text-align:left;padding:.9rem 1rem;font-weight:700;
  font-family:"Gabarito",sans-serif;background:var(--krem);border-bottom:1px solid var(--cizgi)}
.tablo-kutu th,.tablo-kutu td{padding:.62rem .9rem;border-bottom:1px solid var(--cizgi);
  text-align:left;vertical-align:top}
.tablo-kutu th{background:var(--krem);font-weight:700}
.tablo-grup td{background:var(--krem);font-weight:700;font-family:"Gabarito",sans-serif}
.tablo-kutu tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------------ adımlar */
.adimlar{list-style:none;counter-reset:adim;padding:0;margin:0;display:grid;
  gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.adimlar li{counter-increment:adim;position:relative;background:var(--kagit);
  border:1px solid var(--cizgi);border-radius:var(--k);padding:1.4rem 1.1rem 1.1rem;margin:0}
.adimlar li::before{content:counter(adim);position:absolute;top:-14px;left:1.1rem;
  width:32px;height:36px;display:grid;place-items:center;background:var(--marka);color:#fff;
  font-family:"Gabarito",sans-serif;font-weight:800;font-size:.98rem;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.adimlar h3{font-size:1.05rem;margin:.3rem 0 .35rem}
.adimlar p{margin:0;color:var(--metin-2);font-size:.95rem}

/* -------------------------------------------------------------- il/bölge */
.il-grup+.il-grup{margin-top:2.2rem}
.il-liste{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
.il-liste li{margin:0}
.il-liste a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--k-kucuk);
  padding:.6rem .8rem;text-decoration:none;color:var(--metin);font-weight:600;font-size:.95rem}
.il-liste a:hover{border-color:var(--marka);color:var(--marka-koyu);background:var(--krem)}
.il-liste svg{color:var(--marka);opacity:.65}
/* İl listesinin sonundaki bilgi kutusu — bağlantı değil, satırın boş kalan
   kısmını dolduran bir bilgi şeridi (Emir, 28.08.2026).
   ⚠ `span 2` YALNIZ 2+ sütun olan genişliklerde verilir. Tek sütunlu
   ızgarada `span 2` örtük bir ikinci sütun açar ve sayfayı yatayda taşırır;
   dar ekran testi bunu yakalar. 520 px altında kutu tek sütun kalır. */
/* Artık bağlantı (Emir: "Bütün bölgeler" düğmesinin adresi buraya taşındı).
   Görünümü yine de il kutularından ayrı: kesikli çerçeve + krem zemin, ki
   "bir il" değil "genel bilgi" olduğu anlaşılsın. Son ok, tıklanabildiğini
   belli ediyor. */
.il-bilgi>a{display:flex;align-items:center;gap:.6rem;height:100%;
  background:var(--krem);border:1px dashed var(--cizgi-2);
  border-radius:var(--k-kucuk);padding:.6rem .8rem;text-decoration:none;
  font-size:.93rem;color:var(--metin-2);line-height:1.35;font-weight:400}
.il-bilgi>a:hover{border-color:var(--marka);border-style:solid;color:var(--marka-koyu)}
.il-bilgi>a>span{flex:1 1 auto;min-width:0}
.il-bilgi svg{color:var(--marka);opacity:1;flex:none}
.il-bilgi strong{color:var(--kestane)}
@media (min-width:520px){ .il-bilgi{grid-column:span 2} }

/* ------------------------------------------------------------------- blog */
/* Makale ortasındaki çağrı bloğu — okuyucu konuyu okurken soru sorabilsin. */
.yazi-cta{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;
  justify-content:space-between;background:var(--krem);border:1px solid var(--cizgi-2);
  border-left:5px solid var(--marka);border-radius:var(--k);padding:1.2rem 1.3rem}
.yazi-cta>div:first-child{flex:1 1 300px;min-width:0}
.yazi-cta strong{display:block;font-family:"Gabarito",sans-serif;font-size:1.08rem;
  color:var(--kestane);margin-bottom:.25rem}
.yazi-cta p{margin:0;font-size:.95rem;color:var(--metin-2)}

/* "Bu yazıda" — girişin sol sütununu dolduran bölüm listesi */
.yazi-icindekiler{margin-top:1.6rem;background:var(--krem);border:1px solid var(--cizgi);
  border-left:4px solid var(--bal);border-radius:var(--k);padding:1rem 1.2rem}
.yazi-icindekiler strong{display:block;font-family:"Gabarito",sans-serif;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--marka-koyu);margin-bottom:.6rem}
.yazi-icindekiler ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.yazi-icindekiler li{margin:0}
.yazi-icindekiler a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.4rem .1rem;text-decoration:none;color:var(--metin);font-weight:600;font-size:.95rem;
  border-bottom:1px dashed var(--cizgi-2)}
.yazi-icindekiler li:last-child a{border-bottom:0}
.yazi-icindekiler a:hover{color:var(--marka-koyu)}
.yazi-icindekiler svg{width:1em;height:1em;color:var(--marka);flex:none}
/* Yapışkan başlık çapayı örtmesin */
[id]{scroll-margin-top:calc(var(--tepe-boy) + 1rem)}

/* Önceki / tümü / sonraki geçişi */
/* ⚠ Emir (28.08.2026): "bu kısım biraz aşağı alınmalı, üstteki yazı
   kartlarıyla bitişik duruyor." Üstünde ince bir ayraç ve belirgin boşluk
   var; okuyucu kart ızgarasının bittiğini görüyor. */
.yazi-gezinme{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  align-items:stretch;margin-top:clamp(2rem,1.2rem + 2.4vw,3.2rem);
  padding-top:clamp(1.4rem,1rem + 1.4vw,2rem);border-top:1px solid var(--cizgi)}
.gez{display:flex;flex-direction:column;gap:.25rem;background:var(--kagit);
  border:1px solid var(--cizgi);border-radius:var(--k);padding:.85rem 1rem;
  text-decoration:none;color:var(--metin);min-width:0}
.gez:hover{border-color:var(--marka);background:var(--krem);color:var(--marka-koyu)}
.gez-etiket{display:flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--marka-koyu)}
.gez-baslik{font-weight:600;font-size:.96rem;line-height:1.35}
.gez-onceki .gez-etiket svg{transform:rotate(180deg)}
.gez-ust{background:var(--krem)}
.gez-bos{display:none}
@media (min-width:760px){ .gez-bos{display:block;border:0;background:none} }

/* Kategori kartı — hub sayfasında */
.kat-kart h2{font-size:clamp(1.15rem,1rem + .5vw,1.35rem);margin-bottom:.35rem}
.kat-serit{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--cizgi)}
.kat-serit h2{font-size:1.15rem;margin-bottom:.9rem}
.kat-serit .il-liste a[aria-current]{border-color:var(--marka);background:var(--krem);
  color:var(--marka-koyu)}

/* --------------------------------------------------------------- belgeler */
.belge{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.belge figure{background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--k);
  overflow:hidden;box-shadow:var(--golge)}
.belge img{width:100%;background:#fff;display:block}
.belge figcaption{padding:.85rem 1rem;font-size:.9rem;color:var(--metin-2);
  border-top:1px solid var(--cizgi);background:var(--krem)}
.belge figcaption strong{display:block;color:var(--kestane);font-size:.98rem;margin-bottom:.15rem}
.belge button{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in}
.belge-ipucu{display:inline-block;margin-top:.35rem;font-size:.82rem;font-weight:700;
  color:var(--marka-koyu)}
/* Tescilli işaretin kendisi — belge sayfasının girişinde */
/* Ürün girişindeki hızlı künye rozetleri */
.urun-rozet{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.urun-rozet li{margin:0;background:var(--krem);border:1px solid var(--cizgi);
  border-left:3px solid var(--bal);border-radius:var(--k-kucuk);padding:.65rem .8rem;
  display:flex;flex-direction:column;gap:.15rem;min-width:0}
.urun-rozet span{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--marka-koyu)}
.urun-rozet strong{font-size:.94rem;font-weight:600;color:var(--metin);line-height:1.35}

.marka-vitrin{background:var(--krem);border:1px solid var(--cizgi);border-radius:var(--k);
  padding:1.4rem 1.2rem;text-align:center;margin-bottom:1.4rem}
.marka-vitrin img{max-width:min(340px,100%);margin:0 auto .7rem}
.marka-vitrin figcaption{font-size:.9rem;color:var(--metin-2);max-width:46ch;margin-inline:auto}

/* ---------------------------------------------------------------- galeri */
.galeri{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
/* Hakkımızda'daki kare şeridi: Emir 4-4-4 istedi, auto-fill genişliğe göre
   5 sütuna çıkabiliyordu — orada sütun sayısı SABİT. */
.galeri-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .galeri-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .galeri-4{grid-template-columns:1fr} }
/* Izgaranın son hücresi: ayrı düğme yerine "Bütün galeri" kartı */
.galeri-tumu{display:block;border-radius:var(--k-kucuk);text-decoration:none;
  border:1.5px dashed var(--cizgi-2);background:var(--kagit);color:var(--metin);
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.galeri-tumu:hover{background:var(--krem);border-color:var(--marka);color:var(--metin);
  transform:translateY(-2px)}
.galeri-tumu-ic{height:100%;min-height:180px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:.35rem;padding:1.1rem .9rem}
.galeri-tumu svg{width:2rem;height:2rem;color:var(--marka)}
.galeri-tumu strong{font-family:"Gabarito",sans-serif;font-size:1.1rem;color:var(--kestane)}
.galeri-tumu-ic>span{font-size:.86rem;color:var(--metin-2);line-height:1.4}
.galeri-tumu-ok{display:inline-flex;align-items:center;gap:.35rem;margin-top:.35rem;
  font-weight:700;color:var(--marka-koyu)}
.galeri-tumu-ok svg{width:1.05em;height:1.05em;color:inherit}
.galeri figure{margin:0;border-radius:var(--k-kucuk);overflow:hidden;border:1px solid var(--cizgi);
  background:var(--krem)}
.galeri button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.galeri img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s ease}
.galeri button:hover img{transform:scale(1.04)}
.galeri figcaption{padding:.5rem .7rem;font-size:.83rem;color:var(--metin-2);
  background:var(--kagit);border-top:1px solid var(--cizgi)}

/* büyütme penceresi */
.buyut{position:fixed;inset:0;z-index:300;background:rgba(24,13,7,.9);
  display:none;align-items:center;justify-content:center;padding:clamp(10px,3vw,32px)}
.buyut[open],.buyut.acik{display:flex}
.buyut img{max-width:100%;max-height:80vh;width:auto;border-radius:var(--k);
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.buyut figcaption{color:#EDDFC9;text-align:center;margin-top:.8rem;font-size:.95rem}
.buyut-kapa{position:absolute;top:14px;right:14px;background:var(--krem);border:0;
  border-radius:999px;width:44px;height:44px;font-size:1.5rem;line-height:1;cursor:pointer;
  color:var(--kestane);font-family:"Gabarito",sans-serif}
.buyut-gez{position:absolute;top:50%;transform:translateY(-50%);background:rgba(251,241,224,.9);
  border:0;border-radius:999px;width:46px;height:46px;font-size:1.4rem;cursor:pointer;
  color:var(--kestane)}
.buyut-onceki{left:10px}
.buyut-sonraki{right:10px}

/* --------------------------------------------------------- sayı ızgarası */
/* Koyu bantta ölçülebilir değerleri göstermek için — analiz sonucu gibi. */
/* ⚠ auto-fit KULLANILMIYOR: 4 kutu geniş ekranda 3+1 diziliyor ve sonuncusu
   tek başına kalıyordu. Sabit iki sütun her genişlikte 2×2 veriyor. */
/* ⚠ `align-self:center` — Emir (28.08.2026): "sağdaki rakamlar çok üstte
   duruyor, soldaki yazıyla ortala." Kapsayıcı `.iki-sutun` `align-items:start`
   olduğu için sayı kutuları satırın tepesine yapışıyor, sol sütun ise daha
   uzun; aradaki fark altta boşluk olarak kalıyordu. */
.sayi-izgara{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;
  align-self:center;grid-template-columns:repeat(2,minmax(0,1fr))}
.sayi-izgara li{margin:0;background:rgba(255,255,255,.06);border:1px solid rgba(243,194,0,.28);
  border-radius:var(--k);padding:1rem .9rem;text-align:center}
.sayi-izgara strong{display:block;font-family:"Gabarito",sans-serif;font-weight:800;
  font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);color:var(--bal);line-height:1.1;
  margin-bottom:.25rem}
.sayi-izgara span{display:block;font-size:.86rem;color:#D9C6AE;line-height:1.35}

/* ------------------------------------------------------ tek parça belge */
/* Emir (28.08.2026): "bunların üstünde de başlıkları KOCAMAN yazılacak."
   Bölüm başlıklarından (h2) belirgin biçimde büyük, ortada, altında altıgen
   ayraç — belge bloğunun başladığı hemen belli olsun. */
.belge-baslik{font-family:"Gabarito",sans-serif;font-weight:800;text-align:center;
  font-size:clamp(1.75rem,1.15rem + 2.2vw,2.85rem);letter-spacing:-.02em;
  color:var(--kestane);margin:0 0 1.5rem}
.belge-baslik::after{content:"";display:block;width:44px;height:10px;margin:.85rem auto 0;
  background:var(--marka);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.belge-baslik+.belge-tek{margin-bottom:1.6rem}
.belge-metin{max-width:760px;margin:0 auto 3.4rem}
.belge-metin:last-child{margin-bottom:0}
.belge-tek{background:var(--kagit);border:1px solid var(--cizgi);border-radius:var(--k);
  overflow:hidden;box-shadow:var(--golge);max-width:760px;margin-inline:auto}
.belge-tek button{display:block;width:100%;padding:0;border:0;background:#fff;cursor:zoom-in}
.belge-tek img{width:100%;height:auto;display:block}
.belge-tek figcaption{padding:.8rem 1rem;font-size:.9rem;color:var(--metin-2);
  border-top:1px solid var(--cizgi);background:var(--krem);text-align:center}

/* ------------------------------------------------- resmî çiçeklenme kutusu */
.cicek-kutu{background:var(--krem);border:1px solid var(--cizgi-2);border-radius:var(--k);
  padding:1.3rem 1.4rem;border-left:5px solid var(--bal)}
.cicek-kutu h2{font-size:clamp(1.15rem,1rem + .55vw,1.45rem);margin-bottom:.9rem}
.cicek-satir{margin:0 0 .9rem;display:grid;gap:.7rem}
.cicek-satir>div{display:grid;grid-template-columns:minmax(0,11rem) 1fr;gap:.3rem 1rem;
  padding-bottom:.7rem;border-bottom:1px dashed var(--cizgi-2)}
.cicek-satir>div:last-child{border-bottom:0;padding-bottom:0}
.cicek-satir dt{font-weight:700;color:var(--kestane);font-size:.92rem;margin:0}
.cicek-satir dd{margin:0;color:var(--metin-2);font-size:.97rem;min-width:0}
.cicek-kaynak{margin:0;font-size:.83rem;color:var(--metin-2);line-height:1.5}
@media (max-width:560px){ .cicek-satir>div{grid-template-columns:1fr;gap:.1rem} }

/* ---------------------------------------------------------- iletişim düzeni */
/* ⚠ Harita sütunu sayfanın ÜSTÜNDEN başlar. Önceki düzende başlık ve giriş
   tam genişlikteydi, harita ancak onların altında başlıyordu ve sağ üstte
   kocaman bir boşluk kalıyordu (Emir ekran görüntüsüyle işaretledi). */
/* ⚠ 28.08.2026 · Emir: "sağdaki haritayı soldaki kartla aynı boyuta, aynı
   hizaya getir". İki sütun da aynı h2 (.sutun-baslik) ile başlıyor → ÜST
   kenar kendiliğinden hizalı. ALT kenar için satır stretch ediliyor ve
   harita kalan boşluğu dolduruyor; piksel ayarı yok, içerik uzarsa harita
   da uzar. */
/* ⚠ 28.08.2026 · Emir: "soldaki iletişim bilgileri kartı ile harita AYNI
   BOYUTTA olsun, haritayı biraz küçült."
   İki sütun da üç satırlık bir ızgara: [başlık] [gövde] [kuyruk].
   Gövde satırı `1fr` olduğu için KART ile HARİTA aynı yüksekliğe geliyor;
   kuyrukta solda düğmeler, sağda harita notu duruyor.
   ⚠ Harita ÖNCE flex ile "kalan boşluğu doldur" diye ayarlanmıştı; notu da
   aynı sütunda olduğu için harita kartın altında bitiyor, hizasız duruyordu.
   Izgara bunu kendiliğinden çözüyor — sabit yükseklik yazmaya gerek yok. */
.iletisim-ust{align-items:stretch}
.iletisim-sol,.harita-sutun{min-width:0;display:grid;
  grid-template-rows:auto 1fr auto;align-content:start}
.sutun-baslik{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);margin-bottom:.75rem}
.iletisim-liste{height:100%}
.harita-sutun .harita-kutu{height:100%;min-height:300px;display:grid}
.harita-sutun .harita-kutu iframe{height:100%;width:100%;min-height:300px}
.harita-not{font-size:.94rem;color:var(--metin-2);margin:.75rem 0 0}
@media (max-width:760px){
  .iletisim-sol,.harita-sutun{display:block}
  .iletisim-liste,.harita-sutun .harita-kutu{height:auto}
}
/* Sipariş bölümü: metin solda, "Nasıl çalışıyor?" başlığı sağda; adımlar
   altta tam genişlik. Başlığın alt boşluğu burada gereksiz — adımlar zaten
   ayrı satırda. */
.siparis-ust{margin-bottom:2.2rem}
.siparis-ust .bolum-bas{margin-bottom:0}
.iletisim-liste{background:var(--krem);border:1px solid var(--cizgi);
  border-radius:var(--k);padding:.4rem 1.1rem;margin-top:0}
.iletisim-liste a{text-decoration:none;font-weight:600}
.iletisim-liste a:hover{text-decoration:underline}

/* ------------------------------------------------------------------ harita */
.harita-kutu{position:relative;border-radius:var(--k);overflow:hidden;
  border:1px solid var(--cizgi);background:var(--krem);box-shadow:var(--golge)}
.harita-kutu iframe{display:block;width:100%;height:clamp(300px,46vw,440px);border:0}
/* ⚠ pointer-events:none — yoksa kartın altındaki haritayı sürüklemek imkânsız.
   Kart HTML'de kalır: harita hiç yüklenmese bile adres görünür. */
/* ⚠ Kutu 28.08.2026'da küçüldü (kartla aynı boyuta indi); kart da ona göre
   toparlandı, yoksa haritanın yarısını kaplıyor. */
.harita-kart{position:absolute;left:12px;bottom:12px;right:12px;max-width:300px;
  background:rgba(255,252,246,.96);border:1px solid var(--cizgi-2);border-radius:var(--k);
  padding:.7rem .85rem;box-shadow:var(--golge-2);pointer-events:none}
.harita-kart *{pointer-events:none}
.harita-kart a,.harita-kart .btn{pointer-events:auto}
.harita-kart-bas{display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem}
.harita-kart-bas img{width:30px;height:30px;flex:none}
.harita-kart-bas strong{font-family:"Gabarito",sans-serif;font-size:1.02rem;color:var(--kestane)}
.harita-kart p{margin:0 0 .5rem;font-size:.86rem;color:var(--metin-2)}
.harita-kart .btn{padding:.45rem .8rem;font-size:.85rem}

/* ------------------------------------------------------------------- form */
.form{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.form label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.92rem;
  color:var(--kestane);min-width:0}
.form .tam{grid-column:1/-1}
/* ⚠ min-width:0 — grid çocuğunun asgari boyutu min-content; alan sütunu
   zorlayıp sayfayı sağa kaydırıyor */
.form input,.form textarea,.form select{min-width:0;width:100%;font:inherit;font-size:.98rem;
  padding:.62rem .75rem;border:1px solid var(--cizgi-2);border-radius:var(--k-kucuk);
  background:var(--kagit);color:var(--metin)}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--marka);outline:none;
  box-shadow:0 0 0 3px rgba(225,112,26,.18)}
.form-not{grid-column:1/-1;font-size:.85rem;color:var(--metin-2);margin:0}

/* -------------------------------------------------------------------- CTA */
.cta{background:var(--marka);background-image:linear-gradient(135deg,#E1701A 0%,#C85D10 100%);
  color:#fff}
.cta .sarmal{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;
  justify-content:space-between;padding-block:clamp(1.8rem,1.2rem + 2vw,2.8rem)}
.cta-sol{flex:1 1 320px;min-width:0}
.cta h2{color:#fff;margin-bottom:.35rem}
.cta p{margin:0;color:#FFEEDC;max-width:60ch}
.cta .btn-ana{background:#fff;color:var(--marka-koyu);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.cta .btn-ana:hover{background:var(--krem);color:var(--marka-koyu)}
.cta .btn-cizgi{border-color:rgba(255,255,255,.6);color:#fff}
.cta .btn-cizgi:hover{background:rgba(255,255,255,.14);color:#fff}

/* --------------------------------------------------------------- alt bilgi */
.alt{background:var(--kestane);color:#CBB49B;padding:clamp(2.2rem,1.6rem + 2vw,3.2rem) 0 1.2rem;
  font-size:.95rem}
.alt-izgara{display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.alt-marka{grid-column:span 1}
.alt h4{color:#fff;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:.7rem}
.alt ul{list-style:none;margin:0;padding:0}
.alt li{margin-bottom:.45rem}
.alt a{color:#CBB49B;text-decoration:none}
.alt a:hover{color:var(--bal);text-decoration:underline}
.alt .marka-alt{margin-bottom:.7rem}
.alt .marka-alt .marka-ad{color:#fff}
.alt .marka-alt .marka-tag{color:#A98F73}
.alt-marka p{color:#A98F73;font-size:.9rem;max-width:38ch}
.alt-son{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.12);margin-top:1.8rem;padding-top:1rem;
  font-size:.84rem;color:#94795E}
/* ⚠ .alt-son'DAN SONRA gelmeli — ikisi de (0,1,0) özgüllükte, sıra kazanıyor.
   Tek satır kaldığında ortalanır (Emir, 28.08.2026: alttaki adres silindi). */
.alt-son-orta{justify-content:center;text-align:center}

/* ------------------------------------------- mobil eylem çubuğu / whatsapp */
.eylem{display:none}
.wa-yuzen{position:fixed;right:16px;bottom:16px;z-index:90;width:56px;height:56px;
  border-radius:999px;background:var(--yesil);color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);text-decoration:none}
.wa-yuzen svg{width:28px;height:28px}
.wa-yuzen:hover{background:#186E3C;color:#fff}

/* ================================== DAR EKRAN ============================= */
@media (max-width:960px){
  .menu-ac{display:block;order:2}
  .tepe .sarmal{flex-wrap:nowrap}
  .tepe .marka-logo{margin-inline-end:0}    /* menü alt satıra iniyor, boşluk gereksiz */
  .marka-logo img{height:48px}
  .tepe-butonlar{display:none}
  .menu{order:3;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:0;display:none;padding:.5rem 0 .3rem;border-top:1px solid var(--cizgi)}
  .menu.acik{display:flex}
  .menu a{padding:.72rem .5rem;border-radius:var(--k-kucuk);white-space:normal}
  .menu .menu-mobil{display:block}
}
@media (max-width:760px){
  body{font-size:16px;padding-bottom:64px}      /* eylem çubuğu için yer */
  .ust-serit-sol span:nth-child(2){display:none}
  .eylem{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;
    bottom:0;z-index:95;background:var(--kestane);border-top:1px solid rgba(255,255,255,.14)}
  .eylem a{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.15rem;padding:.5rem .3rem;color:#EBDBC5;text-decoration:none;font-size:.74rem;
    font-weight:600;min-height:60px}
  .eylem a+a{border-left:1px solid rgba(255,255,255,.14)}
  .eylem svg{width:1.35em;height:1.35em}
  .eylem .e-wa{color:#8FE0AE}
  .wa-yuzen{bottom:74px;width:50px;height:50px}
  .harita-kart{position:static;max-width:none;border-radius:0;border-left:0;border-right:0;
    border-bottom:0;box-shadow:none;pointer-events:auto}
}
@media (max-width:420px){
  .marka-tag{display:none}
  .marka-isaret{width:38px;height:38px}
  .marka-ad{font-size:1.18rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@media print{
  .ust-serit,.tepe,.eylem,.wa-yuzen,.cta,.kirinti{display:none !important}
  body{font-size:12pt;background:#fff}
  .alt{background:#fff;color:#000}
}