@charset "UTF-8";
/* ==========================================================================
   GÜLİSTAN ÇİÇEK & ÇİKOLATA — site.css
   Palet kaynağı: DÜKKÂN TABELASI piksel örneklendi.
     kırmızı sütun #9C333A · tabela zemini #261F1D
   Buradan kurulan aile: gül bordosu · yaprak yeşili · şampanya · krem.
   Doku: ince köşegen tarama (saf CSS, görsel dosya yok).
   ========================================================================== */

/* ------------------------------------------------------------------ font */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/font/Newsreader-var-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:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/font/Newsreader-var-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:'Rubik';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/font/Rubik-var-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:'Rubik';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/font/Rubik-var-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şken */
:root{
  --gul:#9C333A; --gul-koyu:#7C2229; --gul-ac:#F6E9E9;
  --yaprak:#2E5A40; --yaprak-koyu:#1F4030; --yaprak-ac:#E7F0E9;
  --gece:#241D1C; --gece-2:#332927; --gece-3:#171211;
  --sampanya:#B08A4A; --sampanya-ac:#F4EBDB;
  --krem:#F8F3EA; --krem-2:#F2EADD;
  --zemin:#FDFBF7; --kart:#FFFFFF;
  --metin:#241D1C; --soluk:#6E6461; --cizgi:#E4DACB;
  --r:14px; --r-k:10px; --r-b:999px;
  --golge:0 1px 2px rgba(36,29,28,.05), 0 8px 22px -10px rgba(36,29,28,.16);
  --golge-2:0 2px 6px rgba(36,29,28,.07), 0 22px 46px -18px rgba(36,29,28,.26);
  --bas:'Newsreader', Georgia, 'Times New Roman', serif;
  --gov:'Rubik', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --tarama:repeating-linear-gradient(-45deg, transparent 0 7px, rgba(156,51,58,.04) 7px 8px);
}

/* --------------------------------------------------------------- temel */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zemin);color:var(--metin);
  font:400 17px/1.72 var(--gov);letter-spacing:-.002em}
img,svg,video,iframe{max-width:100%}
img{display:block;height:auto}
svg:not([width]){width:1.15em;height:1.15em;flex:none}
a{color:var(--yaprak-koyu);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--gul)}
h1,h2,h3{font-family:var(--bas);font-weight:600;line-height:1.16;letter-spacing:-.012em;margin:0 0 .5em}
h4{font-family:var(--gov);font-weight:700;font-size:1rem;margin:0 0 .5em}
h1{font-size:clamp(1.95rem,1.35rem + 2.2vw,2.9rem);font-weight:500}
h2{font-size:clamp(1.4rem,1.15rem + 1.1vw,1.95rem);font-weight:500}
h3{font-size:clamp(1.1rem,1.02rem + .4vw,1.32rem);font-weight:600}
p{margin:0 0 1.05em}
ul,ol{padding-left:1.15em}
hr{border:0;border-top:1px solid var(--cizgi);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--yaprak);outline-offset:2px;border-radius:4px}
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.atla{position:absolute;left:-9999px;top:0;background:var(--gul);color:#fff;padding:.7rem 1.1rem;z-index:120;border-radius:0 0 var(--r-k) 0}
.atla:focus{left:0}
.sarmal{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* ------------------------------------------------------------ üst şerit */
.ust-serit{background:var(--gece);color:#D6C9C2;font-size:.83rem;border-bottom:1px solid rgba(255,255,255,.08)}
.ust-serit .sarmal{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;align-items:center;
  justify-content:space-between;min-height:40px;padding-block:.35rem}
.ust-serit-sol{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;min-width:0}
/* ⚠ BU İKİ KURAL YALNIZ 'bilgi' ŞERİDİNE AİT — :not() ile kapatıldı.
   İki şerit tipi de .ust-serit sınıfını paylaşıyor; kapatılmadığında
   `.ust-serit span` (özgüllük 0-1-1) bağlantı şeridinin İÇİNDEKİ her span'a
   display:inline-flex veriyordu ve kısa metni gizleyen kuralı EZİYORDU. Sonuç: telefon için yazılan kısa metin geniş ekranda da
   basılıyor, uzun+kısa yan yana 395 px'lik kutuya sığmayıp metin kesiliyordu.
   Emir "yazılar eksik çıkıyor" diye bildirdi; ölçümde metin 482 px, kutu 395 px. */
.ust-serit:not(.serit-baglanti) span{display:inline-flex;align-items:center;gap:.4rem}
.ust-serit:not(.serit-baglanti) svg{color:var(--sampanya);width:1.02em;height:1.02em}
.ust-serit a{color:#fff;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.ust-serit a:hover{color:var(--sampanya)}
.ust-serit a svg{color:inherit}

/* ------------------------------------------------- bağlantı şeridi (Instagram)
   Biçim toprakturizm.com'daki duyuru şeridinden alındı (Emir'in isteği):
   Instagram'ın kendi marka gradyanı, hap düğme, nabız atan nokta, sırayla
   dönen yazı, kapatma düğmesi. Gradyan ve ölçüler birebir.
   ⚠ FONT FARKI: kaynakta Poppins var; burada sitenin kendi gövde fontu
     (Rubik, 600) kullanılıyor. Tek bir 35px şerit için dördüncü bir font
     ailesi indirmek gereksiz istek demekti; Rubik de geometrik sans,
     beyaz 15px/600'de fark okunmuyor.
   ⚠ position:fixed'i JS veriyor (.serit-yapisti). JS kapalıysa şerit normal
     akışta kalıyor, ilk mesaj ve düğme çalışmaya devam ediyor. */
.serit-baglanti{
  background:linear-gradient(90deg,#feda75 0%,#fa7e1e 22%,#d62976 50%,#962fbf 78%,#6a2fb5 100%);
  color:#fff;border-bottom:0;box-shadow:0 2px 10px rgba(0,0,0,.12);
  font-family:var(--gov);-webkit-font-smoothing:antialiased}
/* ⚠ OKUNURLUK: gradyanın SOL UCU açık sarı (#feda75) ve beyaz metinle
   kontrastı 1.35 — eşik 4.5. Yazı kutusu 320 px'te şeridin %3'ünden
   başlıyor, yani tam o açık bölgeye oturuyor.
   Gradyan Instagram'ın kendi markası, değiştirilmiyor; bunun yerine metne
   ve düğmeye ince bir gölge veriliyor. Gölge açık zeminde harfin kenarını
   ayırıyor, koyu uçta ise görünmüyor.
   ⚠ Tam 4.5'i tutturmanın tek yolu sarı durağı atmak olurdu — o da
   gradyanı Instagram'ın rengi olmaktan çıkarır. */
.serit-baglanti .serit-yazi,
.serit-baglanti .serit-dugme,
.serit-baglanti .serit-ikon{text-shadow:0 1px 2px rgba(60,20,0,.45)}
.serit-baglanti .serit-ikon svg{filter:drop-shadow(0 1px 2px rgba(60,20,0,.45))}
.serit-baglanti .sarmal{display:flex;align-items:center;justify-content:center;
  gap:14px;min-height:35px;padding:6px 18px;position:relative;flex-wrap:nowrap}
.serit-baglanti.serit-kapanir .sarmal{padding-right:46px}
.serit-baglanti .serit-ikon{display:inline-flex;flex:0 0 auto}
.serit-baglanti .serit-ikon svg{color:#fff;width:1.15em;height:1.15em}

/* dönen yazı — en uzun metin görünmez basılı, kutu zıplamıyor */
.serit-yazi{position:relative;flex:0 1 auto;min-width:0;max-width:100%;
  height:1.5em;overflow:hidden;font-size:15px;font-weight:600;letter-spacing:.01em}
.serit-olcu{display:block;visibility:hidden;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding:0 2px}
/* Metnin iki sürümünün display'i AÇIK yazılıyor — miras alınan bir kurala
   bırakılmıyor (yukarıdaki :not() hikâyesi). */
.serit-uzun{display:inline}
.serit-nokta{display:block}
.serit-metin{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding:0 2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;transform:translateY(120%);opacity:0;
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s cubic-bezier(.16,1,.3,1)}
.serit-metin.acik{transform:translateY(0);opacity:1}
.serit-metin.gecti{transform:translateY(-120%);opacity:0}
/* ⚠ Metnin iki sürümü de basılıyor; hangisinin görüneceğine CSS karar veriyor.
   Geniş ekranda uzun cümle, telefonda kısa sürüm. JS'e iş düşmüyor —
   ekran döndüğünde de kendiliğinden doğru olanı gösteriyor. */
.serit-baglanti .serit-kisa{display:none}
/* ⚠ KISA METNE GEÇİŞ 700 px — şeridin genel dar-ekran bloğundan (600 px) AYRI.
   600'e bağlıyken 601 px'te uzun cümle 20 px taşıp üç noktayla kesiliyordu:
   o genişlikte yazıya kalan yer ~371 px, en uzun cümle 391 px.
   ⚠ BU BLOK YUKARIDAKİ display:none KURALINDAN SONRA DURMALI — aynı özgüllükte
   sonra gelen kazanıyor; bir kez yanlışlıkla önüne konup sessizce etkisiz kaldı. */
@media(max-width:700px){
  .serit-baglanti .serit-uzun{display:none}
  .serit-baglanti .serit-kisa{display:inline}
}
/* JS yokken ilk metin görünür kalsın (.acik sınıfı PHP'den basılı) */

.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:var(--r-b);font-size:13.5px;font-weight:500;
  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-baglanti a.serit-dugme:hover{color:#fff;transform:translateY(-1px);
  filter:brightness(1.07);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}}

.serit-kapat{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:inherit;opacity:.7;font-size:22px;
  line-height:1;cursor:pointer;padding:4px 8px;border-radius:6px}
.serit-kapat:hover{opacity:1}
.serit-kapat:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Sabitleme — JS ekliyor. --serit-y şeridin gerçek yüksekliği; hem gövdenin
   üst dolgusu hem YAPIŞKAN BAŞLIĞIN durma noktası ondan geliyor.
   Bu ikincisi olmazsa .tepe (position:sticky; top:0) şeridin ALTINA girip
   kayboluyordu. */
:root{--serit-y:0px}
.serit-baglanti.serit-yapisti{position:fixed;top:0;left:0;right:0;z-index:100}
body.serit-var{padding-top:var(--serit-y)}
body.serit-var .tepe{top:var(--serit-y)}

/* ---------------------------------------------------------------- tepe */
/* ⚠ backdrop-filter YOK — yapışkan başlıkta filtre, içindeki position:fixed
   mobil paneli ekrana göre değil başlığa göre konumlandırıyor. */
.tepe{position:sticky;top:0;z-index:60;background:rgba(253,251,247,.97);
  border-bottom:1px solid var(--cizgi)}
.tepe .sarmal{display:flex;align-items:center;gap:1rem;min-height:78px;flex-wrap:wrap}
/* ⚠ flex:1 1 0 — taban 0 olmazsa marka bloğunun max-content genişliği
   satırı kırıyor ve menü düğmesi alt satıra düşüyor. */
.marka{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;flex:1 1 0;min-width:0}
.marka-isaret{width:52px;height:52px;flex:none}
.marka-yazi{display:flex;flex-direction:column;min-width:0}
.marka-ad{font-family:var(--bas);font-weight:600;font-size:1.5rem;line-height:1;
  letter-spacing:-.015em;color:var(--gece)}
.marka-tag{font-size:.62rem;font-weight:600;letter-spacing:.17em;color:var(--gul);margin-top:.25rem}

.menu{display:flex;gap:.1rem;align-items:center}
.menu a{font-size:.93rem;font-weight:500;color:var(--metin);text-decoration:none;
  padding:.5rem .64rem;border-radius:var(--r-b);white-space:nowrap;position:relative}
.menu a:hover{background:var(--krem-2);color:var(--gece)}
.menu a[aria-current=page]{color:var(--gul);font-weight:600}
.menu-mobil{display:none}
.tepe-butonlar{display:flex;gap:.5rem;flex:none}
.menu-ac{display:none;background:none;border:1px solid var(--cizgi);border-radius:var(--r-k);
  padding:.5rem;color:var(--gece);cursor:pointer;flex:none}
.menu-ac svg{width:24px;height:24px;display:block}

/* --------------------------------------------------------------- buton */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:500 .95rem/1 var(--gov);padding:.82rem 1.3rem;border-radius:var(--r-b);
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.15s ease;white-space:nowrap}
.btn svg{width:1.12em;height:1.12em}
.btn-ana{background:var(--gul);color:#fff}
.btn-ana:hover{background:var(--gul-koyu);color:#fff}
.btn-koyu{background:var(--yaprak);color:#fff}
.btn-koyu:hover{background:var(--yaprak-koyu);color:#fff}
.btn-yesil{background:#1FA855;color:#fff}
.btn-yesil:hover{background:#17853F;color:#fff}
.btn-cizgi{background:transparent;color:var(--gece);border-color:var(--cizgi)}
.btn-cizgi:hover{background:var(--krem);color:var(--gece);border-color:#D6C8B4}
/* ⚠ Koyu zeminde .btn-cizgi varsayılan koyu metniyle "boş düğme" gibi görünüyordu. */
.bolum-koyu .btn-cizgi,.hero .btn-cizgi{color:#fff;border-color:rgba(255,255,255,.4)}
.bolum-koyu .btn-cizgi:hover,.hero .btn-cizgi:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-grup{display:flex;flex-wrap:wrap;gap:.6rem}

/* ------------------------------------------------------------- kırıntı */
.kirinti{background:var(--krem);border-bottom:1px solid var(--cizgi);font-size:.83rem}
.kirinti ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:.65rem 0}
.kirinti li+li::before{content:"·";margin-right:.4rem;color:var(--soluk)}
.kirinti a{color:var(--soluk);text-decoration:none}
.kirinti a:hover{color:var(--gul)}
.kirinti span{color:var(--metin);font-weight:500}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;background:var(--krem);
  background-image:var(--tarama);border-bottom:1px solid var(--cizgi)}
/* ⚠ HERO KÜÇÜLTÜLDÜ (Emir, 12.09.2026): "sliderı biraz daha küçült, altta
   kalan boşlukları sil." Sayaç dört kutudan üçe indi; dördüncü kutu satırı
   sardırdığı için metin sütunu kolajdan uzuyor ve altta boşluk bırakıyordu.
   Dikey dolgu ve sütunlar arası boşluk kısaldı: 4.6→3.4rem üst, 4→2.8rem alt,
   sütun aralığı 3.2→2.4rem. */
.hero .sarmal{position:relative;z-index:2;display:grid;gap:2rem;
  grid-template-columns:minmax(0,1fr);
  padding:clamp(2rem,4.5vw,3.4rem) 20px clamp(2rem,4vw,2.8rem)}
@media(min-width:960px){
  .hero .sarmal{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:2.4rem}
}
.hero-ic{max-width:36rem;min-width:0}
.hero h1{margin-bottom:.5rem;font-size:clamp(2.3rem,1.6rem + 2.6vw,3.3rem)}
.hero-ust{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:600;
  letter-spacing:.15em;color:var(--gul);margin-bottom:1rem}
.hero-ust svg{color:var(--gul)}
.hero p{color:var(--soluk);font-size:1.08rem}
.hero .btn-grup{margin-top:1.25rem}
/* Üç kutu geniş ekranda TEK SIRAYA sığıyor; sarma payı yine de duruyor. */
.hero-sayac{display:flex;flex-wrap:wrap;gap:1.1rem 2.2rem;margin-top:1.6rem;
  padding-top:1.2rem;border-top:1px solid var(--cizgi)}
.hero-sayac div{min-width:0}
.hero-sayac b{display:block;font-family:var(--bas);font-weight:600;font-size:1.45rem;
  color:var(--gul);line-height:1.1}
.hero-sayac span{font-size:.82rem;color:var(--soluk)}

/* kolaj — dikey telefon karelerini büyütmeden kullanmanın yolu */
/* ⚠ Kolaj da orantılı küçüldü: hero kısalınca büyük kare metin sütunundan
   taşıyordu. max-width ile sınırlanıp sağa yaslandı, boşluk da daraldı. */
.hero-kolaj{display:grid;gap:.6rem;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
  min-width:0;max-width:30rem;margin-left:auto}
.hero-kolaj img{width:100%;height:100%;object-fit:cover;border-radius:var(--r);
  box-shadow:var(--golge-2);background:var(--krem-2)}
.hero-buyuk{grid-row:1/3;aspect-ratio:3/4}
.hero-kolaj img:not(.hero-buyuk){aspect-ratio:4/3}

/* ışık halkası — koyu bölümlerde yumuşak radyal parlama */
.isik{position:absolute;inset:0;z-index:0;pointer-events:none}
.isik::before,.isik::after{content:"";position:absolute;border-radius:50%}
.isik::before{width:42rem;height:42rem;right:-15rem;top:-19rem;
  background:radial-gradient(circle,rgba(156,51,58,.20) 0%,transparent 66%)}
.isik::after{width:36rem;height:36rem;left:-13rem;bottom:-18rem;
  background:radial-gradient(circle,rgba(46,90,64,.22) 0%,transparent 68%)}

/* -------------------------------------------------------------- bölüm */
.bolum{padding:clamp(2.8rem,5.5vw,4.6rem) 0}
.bolum-krem{background:var(--krem);border-block:1px solid var(--cizgi)}
.bolum-koyu{background:var(--gece);color:#DCD0CA;position:relative;overflow:hidden}
.bolum-koyu h1,.bolum-koyu h2,.bolum-koyu h3,.bolum-koyu h4{color:#fff}
.bolum-koyu a{color:#E6B98E}
.bolum-koyu .sarmal{position:relative;z-index:1}
.bolum-bas{max-width:44rem;margin-bottom:2rem}
.bolum-bas p{color:var(--soluk);font-size:1.04rem;margin-bottom:0}
.bolum-koyu .bolum-bas p{color:#B7A79F}
.etiket{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.16em;
  color:var(--gul);margin-bottom:.55rem}
.bolum-koyu .etiket{color:var(--sampanya)}
.ikili{display:grid;gap:2.2rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.ikili{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:3rem}}

/* ------------------------------------------------------------- ızgara */
/* ⚠ minmax(min(…,100%),1fr): 320 px telefonda kap alt sınırdan darsa
   tarayıcı yine o genişlikte sütun kurup sayfayı taşırıyor. */
.izgara{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr))}
/* Dört kartlık bölüm için ayrı taban — .izgara 1200 px'te 4 değil 3 sütun veriyor. */
.izgara-4{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(min(252px,100%),1fr))}

/* --------------------------------------------------------------- kart */
.kart{position:relative;background:var(--kart);border:1px solid var(--cizgi);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  transition:.18s ease;box-shadow:var(--golge)}
.kart:hover{box-shadow:var(--golge-2);transform:translateY(-3px);border-color:#D9CBB6}
.kart-gorsel{aspect-ratio:4/3;background:var(--krem-2);overflow:hidden}
.kart-gorsel img{width:100%;height:100%;object-fit:cover}
.kart-ic{padding:1.1rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.kart-ust{font-size:.68rem;font-weight:600;letter-spacing:.13em;color:var(--gul);margin-bottom:.45rem}
.kart h3{margin-bottom:.4rem;font-size:1.22rem}
.kart p{color:var(--soluk);font-size:.93rem;margin-bottom:1rem;flex:1}
.kart-bag{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;
  color:var(--yaprak-koyu);margin-top:auto}
.kart:hover .kart-bag{color:var(--gul)}
.kart:hover .kart-bag svg{transform:translateX(3px)}
.kart-bag svg{transition:.18s ease}
.kart-ort{position:absolute;inset:0}

.kutucuk{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:1.5rem 1.35rem;box-shadow:var(--golge);text-align:center}
.kutucuk-ikon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--gul-ac);color:var(--gul);margin:0 auto 1rem}
.kutucuk-ikon svg{width:27px;height:27px}
/* İletişim kutularının başlıkları: bu sayfada gövde fontuyla (sade), ortalı. */
.kutucuk h2,.kutucuk h3{font-family:var(--gov);font-size:1.12rem;font-weight:600;
  letter-spacing:normal;line-height:1.25;margin-bottom:.4rem}
.kutucuk p{color:var(--soluk);font-size:.93rem;margin:0}

/* ------------------------------------------------------------- editoryal */
.icerik{display:grid;gap:2.6rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:1020px){.icerik{grid-template-columns:minmax(0,1fr) 330px;gap:3.2rem;align-items:start}}
.metin{max-width:44rem}
/* Hub/liste sayfalarında h1 altındaki giriş paragrafı tam genişliğe yayılır —
   altındaki ızgara tam genişlikken metin dar kalıp sağı boş bırakmasın. */
.metin.giris{max-width:none}
.metin h2{margin-top:2.4rem}
.metin h2:first-child{margin-top:0}
.metin>p:first-of-type{font-size:1.1rem}
.metin ul{margin:0 0 1.2rem;padding-left:0;list-style:none}
.metin ul li{position:relative;padding-left:1.7rem;margin-bottom:.55rem}
.metin ul li::before{content:"";position:absolute;left:.3rem;top:.62em;width:8px;height:8px;
  border-radius:50%;background:var(--gul)}
.metin ol{margin:0 0 1.2rem}
.metin ol li{margin-bottom:.55rem}

.tanim{margin:0 0 1.4rem}
.tanim>div{padding:1rem 0;border-bottom:1px solid var(--cizgi)}
.tanim>div:first-child{border-top:1px solid var(--cizgi)}
.tanim dt{font-family:var(--bas);font-weight:600;font-size:1.1rem;margin-bottom:.2rem}
.tanim dd{margin:0;color:var(--soluk);font-size:.96rem}
/* "ne gitmez" listesi — aynı bileşen, ayırt edici işaret */
.tanim-uyari>div{border-left:3px solid var(--gul);padding-left:1rem}
.tanim-uyari dt{color:var(--gul-koyu)}

.kart-ornek{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.6rem}
.kart-ornek li{background:var(--krem);border:1px dashed var(--cizgi);border-radius:var(--r-k);
  padding:.85rem 1.1rem;font-family:var(--bas);font-size:1.12rem;color:var(--gece)}
.metin .kart-ornek li{padding-left:1.1rem}
.metin .kart-ornek li::before{display:none}

.not{background:var(--yaprak-ac);border-left:3px solid var(--yaprak);
  border-radius:0 var(--r-k) var(--r-k) 0;padding:1.05rem 1.2rem;margin:1.6rem 0;font-size:.96rem}
.not p:last-child{margin-bottom:0}
.not b{font-family:var(--bas);font-size:1.03rem}

.yan{display:flex;flex-direction:column;gap:1.1rem;position:sticky;top:100px}
@media(max-width:1019px){.yan{position:static}}
.yan-kutu{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:1.3rem 1.35rem;box-shadow:var(--golge)}
.yan-kutu h3{font-size:1.08rem;margin-bottom:.7rem}
.yan-kutu ul{list-style:none;padding:0;margin:0;font-size:.94rem}
.yan-kutu li{padding:.45rem 0;border-bottom:1px solid var(--cizgi)}
.yan-kutu li:last-child{border-bottom:0}
.yan-kutu a{text-decoration:none;color:var(--metin);font-weight:500}
.yan-kutu a:hover{color:var(--gul)}
/* ⚠ VURGULU YAN KUTU AÇILDI (Emir, 12.09.2026): "arka plan rengi çok koyu,
   butonların renkleri iyi değil, siteyle ilgili renk seç."
   Zemin `--gece` (#241D1C) idi — neredeyse siyah. Sayfanın geri kalanı krem
   ve gül tonlarındayken bu kutu yabancı duruyordu; üstelik koyu zeminde
   bordo `.btn-ana` ile yeşil WhatsApp düğmesi birbirine yapışıyordu.
   Yeni zemin markanın kendi AÇIK GÜL tonu (--gul-ac, tabela bordosunun
   açığı). Düğmeler artık hero'dakiyle aynı çiftte: dolu bordo + WhatsApp
   yeşili — ikisi de açık zeminde net okunuyor. */
.yan-vurgu{background:var(--gul-ac);color:var(--metin);border-color:#EBD4D5}
.yan-vurgu h3{color:var(--gul-koyu)}
.yan-vurgu p{font-size:.94rem;color:#6F5B59}
.yan-vurgu .btn{width:100%;margin-top:.5rem}

/* ⚠ KUTU İÇİNDEKİ DÜĞMELER (Emir, 12.09.2026): "butonların iç kısım renkleri
   çok uyumsuz, gözle okunabilsin."
   Sorun: doymuş SOĞUK yeşil (#1FA855) dolu bir blok olarak SICAK gül
   zemininde duruyordu; iki dolu düğme yan yana hiyerarşi de vermiyordu.
   Çözüm: birincil eylem (telefon) dolu bordo kalıyor; WhatsApp ikincil
   düğmeye dönüyor — beyaz zemin, koyu metin, yeşil YALNIZ ikonda.
   Böylece WhatsApp yine tanınıyor ama kutuyu parçalamıyor.
   ⚠ Seçiciler kapsayıcıyla yazıldı (.yan-vurgu .btn-yesil = 0-2-0);
   yalnız .btn-yesil (0-1-0) yazılsaydı taban kural ezerdi — bugün üç kez
   yaşandı. */
.yan-vurgu .btn-ana{background:var(--gul);color:#fff;border-color:var(--gul)}
.yan-vurgu .btn-ana:hover{background:var(--gul-koyu);border-color:var(--gul-koyu);color:#fff}
/* ⚠ İkincil düğmenin KENARLIĞI bordo. Önce beyaz zemin + soluk pembe
   kenarlık denendi: kenarlığın gül zeminine kontrastı 1.22, beyaz dolgunun
   kontrastı 1.09 çıktı — düğme kutunun içinde KAYBOLUYORDU (WCAG 1.4.11
   arayüz sınırı için 3.0 ister). Bordo kenarlık 6.6 veriyor.
   Dolu bordo (birincil) + çerçeveli bordo (ikincil) aynı zamanda
   hiyerarşiyi de anlatıyor. Yeşil yalnız WhatsApp ikonunda kalıyor. */
.yan-vurgu .btn-yesil{background:var(--kart);color:var(--gul-koyu);border-color:var(--gul)}
.yan-vurgu .btn-yesil svg{color:#1FA855}
.yan-vurgu .btn-yesil:hover{background:var(--gul-ac);color:var(--gul-koyu);border-color:var(--gul-koyu)}

/* -------------------------------------------------------------- tablo */
.tablo-kutu{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--cizgi);
  border-radius:var(--r);background:var(--kart)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.94rem}
caption{text-align:left;font-family:var(--bas);font-weight:600;font-size:1.1rem;
  padding:1rem 1.2rem;border-bottom:1px solid var(--cizgi)}
th,td{text-align:left;padding:.75rem 1.2rem;border-bottom:1px solid var(--cizgi);vertical-align:top}
thead th{background:var(--krem);font-size:.76rem;letter-spacing:.07em;color:var(--soluk);font-weight:600}
tbody tr:last-child td{border-bottom:0}
td:first-child{font-weight:600}

/* ---------------------------------------------------------------- SSS */
.sss{border-top:1px solid var(--cizgi);margin-bottom:1.5rem}
.sss details{border-bottom:1px solid var(--cizgi)}
.sss summary{cursor:pointer;list-style:none;padding:1.05rem 2.4rem 1.05rem 0;position:relative;
  font-family:var(--bas);font-weight:600;font-size:1.14rem;color:var(--gece)}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"";position:absolute;right:.5rem;top:1.4rem;width:9px;height:9px;
  border-right:2px solid var(--gul);border-bottom:2px solid var(--gul);
  transform:rotate(45deg);transition:.18s ease}
.sss details[open] summary::after{transform:rotate(225deg);top:1.6rem}
.sss summary:hover{color:var(--gul)}
.sss-cevap{padding:0 2.4rem 1.2rem 0;color:var(--soluk)}
.sss-cevap p:last-child{margin-bottom:0}

/* ---------------------------------------------------------- kare şerit */
/* ⚠ Şerit TEK SIRA DÖRT KARE. auto-fill kullanılmıyor: 1200 px'te dörde
   sarıyordu ama ara genişliklerde üçe düşüp son kareyi alta atıyordu.
   Dört sabit sütun → geniş ekranda her zaman tek sıra; 900 px altında ikiye,
   telefonda ikiye düşüyor (tek sütun kareleri gereksiz büyütüyordu). */
.kare-serit{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr);margin:1.9rem 0}
@media(max-width:900px){.kare-serit{grid-template-columns:repeat(2,1fr)}}
.kare{margin:0;border-radius:var(--r);overflow:hidden;background:var(--krem-2);
  border:1px solid var(--cizgi);box-shadow:var(--golge)}
.kare img{width:100%;aspect-ratio:4/3;object-fit:cover}
.kare figcaption{padding:.65rem .85rem .8rem;font-size:.85rem;color:var(--soluk);
  background:var(--kart);line-height:1.55}
.kare a,.model a{display:block;position:relative}

/* ------------------------------------------------------- model kataloğu */
.model-izgara{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr))}
.model{margin:0;background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r-k);
  overflow:hidden;transition:.16s ease}
.model:hover{box-shadow:var(--golge-2);transform:translateY(-2px)}
.model img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--krem)}
.model figcaption{padding:.55rem .7rem .7rem;font-size:.8rem;line-height:1.4;color:var(--metin);
  font-weight:500;text-align:center}

/* --------------------------------------------------------------- video */
.video{position:relative;border-radius:var(--r);overflow:hidden;background:var(--gece-3);
  box-shadow:var(--golge-2);aspect-ratio:16/9}
.video-sarmal{max-width:820px;margin:2rem auto 0}
.video-ac{display:block;position:relative;width:100%;height:100%;text-decoration:none}
.video img{width:100%;height:100%;object-fit:cover;transition:.3s ease}
.video-ac:hover img{transform:scale(1.03);opacity:.9}
.video-oynat{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;background:var(--gul);color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 28px rgba(0,0,0,.4)}
.video-oynat svg{width:26px;height:26px;margin-left:4px}
.video-ac:hover .video-oynat{background:var(--gul-koyu)}
.video-etiket{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.1rem .9rem;
  color:#fff;font-size:.92rem;font-weight:500;
  background:linear-gradient(transparent,rgba(0,0,0,.75))}
.video iframe{width:100%;height:100%;border:0;display:block}

/* --------------------------------------------------------------- CTA */
/* ⚠ CTA MARKANIN KENDİ RENGİNDE (Emir, 12.09.2026): "bu kısmın rengi yeşil,
   sanki siteye ait değilmiş gibi — sitenin kendi logo rengi gibi bir renk seç."
   Haklıydı: yaprak yeşili (#2E5A40) palette var ama YARDIMCI renk. Markanın
   asıl rengi DÜKKÂN TABELASINDAN örneklenen gül bordosu (#9C333A) ve logodaki
   gül de o renk. Sayfanın en güçlü çağrı bandı yardımcı renkte duruyordu.
   Yeşil paletten çıkmadı — WhatsApp düğmesi ve yaprak vurguları yerinde. */
.cta{background:var(--gul);color:#fff;position:relative;overflow:hidden}
/* Bordo zeminde genel ışık halkası kayboluyor (halkanın biri zaten bordo).
   Burada şampanya + koyu bordo ile derinlik veriliyor. */
.cta .isik::before{background:radial-gradient(circle,rgba(176,138,74,.26) 0%,transparent 66%)}
.cta .isik::after{background:radial-gradient(circle,rgba(124,34,41,.55) 0%,transparent 68%)}
.cta .sarmal{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:1.5rem 2rem;
  align-items:center;justify-content:space-between;padding-block:clamp(2.2rem,4vw,3.2rem)}
.cta-sol{flex:1 1 24rem;min-width:0}
.cta h2{color:#fff;margin-bottom:.4rem;font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem)}
.cta p{color:#F0D7D8;margin:0;max-width:34rem;font-size:.99rem}
.cta .btn-ana{background:#fff;color:var(--gul-koyu)}
.cta .btn-ana:hover{background:var(--krem);color:var(--gul-koyu)}

/* --------------------------------------------------------- alt bilgi */
.alt{background:var(--gece-3);color:#A99B95;font-size:.93rem;
  padding:clamp(2.4rem,4vw,3.4rem) 0 1.2rem}
.alt-izgara{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
/* ⚠ Alt bilgi sütun başlıkları h4'ten h2'ye taşındı (erişilebilirlik).
   GÖRÜNÜŞ BİREBİR AYNI KALIYOR: h4'ün stilini (gövde fontu, 700, normal
   satır aralığı) burada elle veriyoruz ki h2'nin serif/clamp stilini
   almasınlar. text-transform YOK — eskiden de yoktu. */
.alt h2{color:#fff;font-size:.75rem;letter-spacing:.15em;margin-bottom:.9rem;
  font-family:var(--gov);font-weight:700;line-height:1.16}
.alt ul{list-style:none;padding:0;margin:0}
.alt li{margin-bottom:.48rem;line-height:1.55}
.alt a{color:#A99B95;text-decoration:none}
.alt a:hover{color:var(--sampanya)}
.alt-marka{max-width:24rem}
/* Alt bilgideki ikinci marka adı — çelenk kurdelesinde yazan ad. */
.alt-ikinci-ad{margin-top:.6rem;font-size:.82rem;color:var(--sampanya);letter-spacing:.02em}
.alt-marka p{margin-top:.9rem;font-size:.9rem;line-height:1.65}
.marka-alt .marka-ad{color:#fff}
.marka-alt .marka-tag{color:var(--sampanya)}
.alt-son{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between;
  margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);
  font-size:.83rem;color:#7E726D}

/* ---------------------------------------------------- mobil eylem çubuğu */
.eylem{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--kart);
  border-top:1px solid var(--cizgi);box-shadow:0 -3px 16px rgba(36,29,28,.10)}
.eylem a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.55rem .3rem calc(.55rem + env(safe-area-inset-bottom));
  font-size:.7rem;font-weight:600;color:var(--gece);text-decoration:none}
.eylem svg{width:20px;height:20px}
.eylem .e-ara{color:var(--gul)}
.eylem .e-wa{color:#1FA855}
.wa-yuzen{position:fixed;right:16px;bottom:80px;z-index:69;width:54px;height:54px;border-radius:50%;
  background:#1FA855;color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(31,168,85,.42)}
.wa-yuzen svg{width:28px;height:28px}
.wa-yuzen:hover{background:#17853F;color:#fff}

/* ------------------------------------------------------------- galeri */
.suzgec{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.8rem}
.suzgec button{font:500 .88rem/1 var(--gov);padding:.58rem 1rem;border-radius:var(--r-b);
  border:1px solid var(--cizgi);background:var(--kart);color:var(--metin);cursor:pointer}
.suzgec button:hover{border-color:var(--gul);color:var(--gul)}
.suzgec button[aria-pressed=true]{background:var(--gul);border-color:var(--gul);color:#fff}
.galeri{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}

/* -------------------------------------------------------- bölge listesi */
.bolge-liste{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
.bolge-liste a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.78rem 1rem;background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r-k);
  text-decoration:none;color:var(--metin);font-weight:500;font-size:.95rem}
.bolge-liste a:hover{border-color:var(--gul);color:var(--gul)}
.bolge-liste small{color:var(--soluk);font-weight:400;font-size:.79rem;white-space:nowrap}
.bolge-liste a:hover small{color:var(--gul)}

/* "Tüm bölgeler" — ızgaranın SON HÜCRESİ, son satırın EN SAĞINDA.
   ⚠ grid-column:-2/-1 son sütuna sabitliyor. Otomatik yerleştirme, daha önce
   yerleşmiş 14 bölgeden SONRAKİ ilk uygun satırı seçtiği için kutu son satırın
   sağ ucuna oturuyor — satır tam dolu olmasa bile boşluk solda kalıyor.
   Bölge kutularından ayrışsın diye dolu bordo: bu bir bölge değil, sayfa bağlantısı.

   ⚠⚠ SEÇİCİLER '.bolge-liste a...' İLE YAZILIYOR, YALNIZ '.bolge-bilgi' DEĞİL.
   Önce öyle yazılmıştı ve kural HİÇ UYGULANMADI:
     .bolge-liste a        (0-1-1)  >  .bolge-bilgi        (0-1-0)
     .bolge-liste a:hover  (0-2-1)  >  .bolge-bilgi:hover  (0-2-0)
   Düğme bordo görünmesi gerekirken diğer kutular gibi BEYAZ duruyordu ve
   üzerine gelince okunmuyordu. Ölçümle yakalandı (computed background beyazdı).
   Aynı tuzak bugün üçüncü kez çıktı — kuşatıcı liste kuralları her zaman
   tek sınıflı kuralı eziyor. */
.bolge-liste a.bolge-bilgi{grid-column:-2/-1;justify-content:center;gap:.45rem;
  background:var(--gul);color:#fff;border-color:var(--gul);font-weight:600;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.bolge-liste a.bolge-bilgi:hover{background:var(--gul-koyu);border-color:var(--gul-koyu);
  color:#fff}
.bolge-liste a.bolge-bilgi svg{width:1.05em;height:1.05em;color:inherit}
/* Tek sütuna düşen dar ekranda "en sağ" diye bir şey yok; sabitleme kalkıyor. */
@media(max-width:460px){.bolge-liste a.bolge-bilgi{grid-column:auto}}

.rozet{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:500;
  padding:.3rem .75rem;border-radius:var(--r-b);background:var(--yaprak-ac);color:var(--yaprak-koyu)}
.rozet-gul{background:var(--gul-ac);color:var(--gul-koyu)}
.rozet-satir{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.4rem}

/* ---------------------------------------------------------------- form */
.form{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.form label{display:flex;flex-direction:column;gap:.35rem;font-size:.88rem;font-weight:500;min-width:0}
.form .genis{grid-column:1/-1}
/* ⚠ grid çocuğunun asgari boyutu auto (=min-content); min-width:0 olmazsa
   form alanı sütunu zorlayıp sayfayı sağa kaydırıyor. */
.form input,.form textarea,.form select{min-width:0;width:100%;font:400 1rem var(--gov);
  padding:.72rem .9rem;border:1px solid var(--cizgi);border-radius:var(--r-k);
  background:var(--kart);color:var(--metin)}
.form textarea{min-height:7rem;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--yaprak);outline:none;
  box-shadow:0 0 0 3px rgba(46,90,64,.15)}

/* --------------------------------------------------------------- harita
   ⚠ İletişim sayfasında harita EN ALTTA ve KENARDAN KENARA (Emir, 12.09.2026).
   .harita-tam bölümü .sarmal kullanmıyor; 1200 px sınırı ve yan boşluk yok.
   Köşe yuvarlaması ve kenarlık da kaldırılıyor — sayfa zeminiyle birleşsin,
   kenarda ince bir çizgi kalmasın. */
.harita-tam{margin:0;padding:0;line-height:0}
.harita-tam .harita-kutu{border-radius:0;border:0;border-top:1px solid var(--cizgi);
  min-height:0}
.harita-tam .harita-kutu iframe{height:460px}
/* Kart SAĞ ÜSTTE, sayfa hizasına otursun (Emir, 29.09.2026: kutu+buton
   birlikte sağ üste). Ad + adres + "Yol tarifi al" düğmesi hepsi bu kartta. */
.harita-tam .harita-kart{right:max(20px,calc(50vw - 600px));left:auto;top:24px}

.harita-kutu{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--cizgi);
  background:var(--krem-2);min-height:280px}
.harita-kutu iframe{display:block;width:100%;height:420px;border:0}
/* ⚠ pointer-events:none — yoksa kartın altındaki haritayı sürüklemek imkânsız */
.harita-kart{position:absolute;left:16px;top:16px;z-index:2;max-width:21rem;pointer-events:none;
  line-height:1.5;
  background:rgba(255,255,255,.96);border-radius:var(--r-k);padding:1rem 1.15rem;box-shadow:var(--golge-2)}
.harita-kart h3{font-size:1.05rem;margin-bottom:.35rem}
.harita-kart p{font-size:.9rem;color:var(--soluk);margin-bottom:.8rem}
.harita-kart .btn{pointer-events:auto}

/* ------------------------------------------------------- büyütme penceresi */
.buyutulebilir{display:block;position:relative}
.buyutec-rozet{position:absolute;right:.55rem;bottom:.55rem;width:32px;height:32px;border-radius:50%;
  background:rgba(36,29,28,.72);color:#fff;display:grid;place-items:center;opacity:0;transition:.15s ease}
.buyutulebilir:hover .buyutec-rozet,.buyutulebilir:focus-visible .buyutec-rozet{opacity:1}
.buyutec-rozet svg{width:16px;height:16px}
.buyut{position:fixed;inset:0;z-index:200;background:rgba(20,15,14,.95);display:none;
  align-items:center;justify-content:center;padding:58px 12px 12px}
.buyut.acik{display:flex}
.buyut-ic{max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:.75rem;align-items:center}
.buyut-ic img{max-height:calc(100vh - 155px);width:auto;object-fit:contain;border-radius:var(--r-k)}
.buyut-alt{color:#E4DACB;font-size:.94rem;text-align:center;max-width:44rem;line-height:1.55}
.buyut-sayac{display:block;color:#9C8D86;font-size:.8rem;margin-top:.25rem}
/* ⚠ kapatma tuşu SOL ÜSTTE — alışılmış yer sağ üst, orası değil */
.buyut-kapat{position:fixed;right:12px;top:12px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.14);border:0;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.buyut-kapat:hover{background:rgba(255,255,255,.26)}
.buyut-ok{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.14);border:0;color:#fff;cursor:pointer;display:grid;place-items:center}
.buyut-ok:hover{background:rgba(255,255,255,.26)}
.buyut-onceki{left:12px}
.buyut-sonraki{right:12px}
.buyut-ok svg{width:22px;height:22px}
.buyut-onceki svg{transform:rotate(180deg)}

/* --------------------------------------------------------------- 404 */
.dortyuz{text-align:center;padding:clamp(3rem,8vw,6rem) 0}

/* ================================================== duyarlı ================ */
@media(max-width:1140px){
  .menu a{padding:.5rem .45rem;font-size:.89rem}
  .marka-tag{display:none}
}
@media(max-width:940px){
  .menu-ac{display:block;order:3}
  .tepe-butonlar{order:2}
  .tepe-butonlar .btn{padding:.7rem .95rem;font-size:.88rem}
  .menu-mobil{display:block}
  /* ⚠ Panel YUKARIDAN iniyor (translateY), sağdan değil.
     position:fixed + translateX(100%) Chrome'da belgenin kaydırma genişliğine
     katılıyor ve HER sayfa bir ekran boyu taşıyordu. */
  .menu{position:fixed;left:0;right:0;top:0;z-index:80;flex-direction:column;align-items:stretch;
    gap:0;background:var(--kart);padding:5rem 20px 1.6rem;box-shadow:0 14px 40px rgba(36,29,28,.22);
    transform:translateY(-100%);transition:transform .24s ease;max-height:100vh;overflow-y:auto}
  .menu.acik{transform:translateY(0)}
  .menu a{padding:.9rem .2rem;border-bottom:1px solid var(--cizgi);border-radius:0;font-size:1.02rem}
  .eylem{display:flex}
  body{padding-bottom:64px}
  .wa-yuzen{display:none}
  .ust-serit-sol span:nth-child(2){display:none}

  /* ⚠ BAŞLIK DÜĞMESİ TELEFONDA GİZLENİYOR — MARKA ADINI EZİYORDU.
     "Sipariş için ara" düğmesi sabit 155 px yer kaplıyor (flex:0 0 auto);
     başlıktaki tek esneyebilen öge .marka olduğu için (flex:1 1 0) bütün
     daralmayı o yutuyordu. Ölçüm:
       320 px → .marka-ad genişlik 0   (marka adı HİÇ görünmüyor)
       360 px → 40 px, 32 px eksik     (kesik)
       390 px → 70 px,  2 px eksik     (ucu kırpık)
     Düğme burada zaten GEREKSİZ: aynı kırılımda alttaki sabit eylem çubuğu
     (.eylem) Ara · WhatsApp · Yol Tarifi veriyor. Gizlenince marka adına
     155 px yer açılıyor. */
  .tepe-butonlar{display:none}
}
@media(max-width:560px){
  body{font-size:16px}
  .hero-kolaj{grid-template-columns:1fr 1fr}
  .hero-buyuk{grid-row:auto;grid-column:1/3;aspect-ratio:4/3}
  .hero-sayac{gap:1rem 1.6rem}
  .hero-sayac b{font-size:1.25rem}
  .marka-isaret{width:44px;height:44px}
  .marka-ad{font-size:1.28rem}
  .tepe .sarmal{min-height:66px;gap:.6rem}
  .model-izgara{grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:.7rem}
  .buyut{padding:54px 6px 8px}
  .buyut-ok{width:40px;height:40px}
  .ust-serit{font-size:.78rem}
  .ust-serit-sol span:first-child{display:none}
  .serit-baglanti .serit-ikon{display:none}
  .serit-baglanti .sarmal{gap:8px;padding:5px 12px}
  .serit-yazi{flex:1 1 auto;font-size:13px}
  .serit-olcu{display:none}
  .serit-metin{justify-content:flex-start}
  .serit-dugme{padding:5px 10px;font-size:11px;gap:7px}
  .serit-nokta{width:8px;height:8px}
  .harita-kart{position:static;max-width:none;box-shadow:none;border-radius:0;
    border-bottom:1px solid var(--cizgi)}
  .harita-kutu iframe{height:320px}
  /* dar ekranda kart akışa girdiği için sol hizalama hesabı gereksiz */
  .harita-tam .harita-kart{left:auto;top:auto;padding:1rem 20px}
  .harita-tam .harita-kutu iframe{height:340px}
}
/* ---------------------------------------------- kendi videolarımız
   Dikey (9:16) telefon videoları. Otomatik oynatma YOK, preload="none";
   ziyaretçi oynata basmadan tek bayt inmiyor. */
.video-izgara{display:grid;gap:1rem;margin-top:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.kendi-video{margin:0;background:var(--gece);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--golge)}
.kendi-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;
  max-width:100%;background:var(--gece-3);object-fit:cover}
.kendi-video figcaption{padding:.6rem .8rem .7rem;color:#EDE3DC;font-size:.86rem;
  line-height:1.35}

@media(max-width:380px){
  .serit-baglanti .sarmal{gap:7px;padding:5px 10px}
  .serit-yazi{font-size:12px}
  .serit-dugme{padding:4px 9px;font-size:10px;gap:6px}
  .serit-nokta{width:7px;height:7px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .tepe,.ust-serit,.eylem,.wa-yuzen,.cta,.suzgec,.buyut,.video{display:none!important}
  body{font-size:11pt}
}