/* ============================================================
   DMK Bisiklet — site.css · tüm sayfaların stilleri
   Tema değişkenleri en üstte. Büyük harfli yazılar HTML'de doğrudan
   büyük harfle yazılır; text-transform: uppercase kullanılmaz (İ/ı bozulur).
   ============================================================ */
:root{
  --bg:#EAE6E0; --bg-2:#E1DCD4; --bg-3:#D3CDC4; --card:#FFFFFF;
  --ink:#16202B; --ink-2:#4F5A66; --ink-3:#565F6A;
  --accent:#0B58A6; --accent-2:#08417C; --accent-ink:#FFFFFF; --accent-soft:rgba(11,88,166,.10); --accent-line:rgba(11,88,166,.35);
  --navy:#0F1F33; --on-navy:#EDF2F8; --on-navy-2:#A9B7C7; --navy-line:rgba(237,242,248,.16);
  --line:rgba(22,32,43,.14); --line-2:rgba(22,32,43,.08);
  --shadow:0 24px 48px -28px rgba(22,32,43,.45);
  --ok:#256E43; --err:#B23A2A;
  --display:"Big Shoulders Display","Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono","Consolas","Menlo",monospace;
  --gutter:clamp(16px,5vw,56px); --max:1180px; --r:6px; --rf:14px; --hh:72px;
  --ls:.08em;                 /* etiket harf aralığı (IBM Plex Mono) */
  --etiket:.78125rem;         /* küçük mono etiketlerin yazı boyu: 12,5 px (üst etiket, tablo başlığı, alt bilgi sütun başlığı, rozet, form etiketi…) */
  --bant:64px;                /* mobil alt bant yüksekliği */
  --yay:cubic-bezier(0.22,1,0.36,1);   /* tek yumuşatma eğrisi; yalnız transform ve opacity canlandırılır */
  /* Derinlik katmanları: yükseltilmiş (kart, tablo, kutu) · yüzen (sabit bant, ışık kutusu, açılır menü) */
  --golge-yukseltilmis:0 1px 2px rgba(15,31,51,.06), 0 8px 24px -8px rgba(15,31,51,.12);
  --golge-yuzen:0 2px 4px rgba(15,31,51,.08), 0 20px 48px -12px rgba(15,31,51,.28);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1620; --bg-2:#141D29; --bg-3:#1D2836; --card:#172130;
    --ink:#EAF0F7; --ink-2:#A8B4C2; --ink-3:#8692A0;
    --accent:#4E9BE8; --accent-2:#79B4F0; --accent-ink:#0F1620; --accent-soft:rgba(78,155,232,.14); --accent-line:rgba(78,155,232,.45);
    --navy:#0B1622; --on-navy:#EAF0F7; --on-navy-2:#A8B4C2; --navy-line:rgba(234,240,247,.16);
    --line:rgba(234,240,247,.14); --line-2:rgba(234,240,247,.07);
    --shadow:0 28px 56px -30px rgba(0,0,0,.85);
    --golge-yukseltilmis:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -8px rgba(0,0,0,.55);
    --golge-yuzen:0 2px 4px rgba(0,0,0,.4), 0 20px 48px -12px rgba(0,0,0,.7);
    --ok:#6CC08B; --err:#F0846F; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1620; --bg-2:#141D29; --bg-3:#1D2836; --card:#172130;
  --ink:#EAF0F7; --ink-2:#A8B4C2; --ink-3:#8692A0;
  --accent:#4E9BE8; --accent-2:#79B4F0; --accent-ink:#0F1620; --accent-soft:rgba(78,155,232,.14); --accent-line:rgba(78,155,232,.45);
  --navy:#0B1622; --on-navy:#EAF0F7; --on-navy-2:#A8B4C2; --navy-line:rgba(234,240,247,.16);
  --line:rgba(234,240,247,.14); --line-2:rgba(234,240,247,.07);
  --shadow:0 28px 56px -30px rgba(0,0,0,.85);
  --golge-yukseltilmis:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -8px rgba(0,0,0,.55);
  --golge-yuzen:0 2px 4px rgba(0,0,0,.4), 0 20px 48px -12px rgba(0,0,0,.7);
  --ok:#6CC08B; --err:#F0846F; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
/* Çapa hedefleri (ADIM-52): sabit menü + yapışkan bölüm şeridinin gerçek yüksekliği site.js ile ölçülüp --ust-ortu'ya yazılır;
   id taşıyan her hedef, bağlantıyla ya da adresteki #çapa ile açıldığında bunun 16 px altına gelir. JS kapalıyken yaklaşık değerler. */
:root{--ust-ortu:73px}
:root:has(.altnav.yapisik){--ust-ortu:135px}
[id]{scroll-margin-top:calc(var(--ust-ortu) + 16px)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1.05rem; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{max-width:100%} img{display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-family:var(--display); font-weight:900; line-height:.95; letter-spacing:.005em}
p{margin:0}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:2px}
::selection{background:var(--accent); color:var(--accent-ink)}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
/* Bölüm boşluğu: 96px, mobilde 56px */
.section{padding-block:96px; border-top:1px solid var(--line-2)}
.section.first{border-top:none}
.section.tight{padding-block:64px}
@media (max-width:700px){ .section,.section.tight{padding-block:56px} }
/* Kicker: küçük mono etiket + büyük başlık + tek cümle */
.eyebrow{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent); display:inline-flex; align-items:center; gap:.6em; font-weight:500}   /* 12,5 px: sayfa içi üst etiket */
.eyebrow::before{content:""; width:22px; height:2px; background:var(--accent); display:inline-block}
.h1{font-size:clamp(2.2rem,5vw,4rem); margin-top:.3em}
.h2{font-size:1.6rem; margin-top:.5em; line-height:1.05}
.h2.buyuk{font-size:clamp(2rem,4vw,2.8rem)}   /* büyük öbek başlığı: Servis'teki "NE YAPIYORUZ" ile aynı boy (masaüstü 44,8 px, telefon 32 px) */
.h3{font-size:1.35rem; letter-spacing:.02em}
.lede{color:var(--ink-2); max-width:62ch; margin-top:.8em; font-size:1.1rem}
.sec-head{display:grid; gap:0; margin-bottom:clamp(28px,4vw,40px)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family:var(--body); font-weight:700; font-size:.95rem; padding:.85em 1.35em; border-radius:var(--r); border:1.5px solid transparent; text-decoration:none; cursor:pointer; transition:transform .18s var(--yay); min-height:44px}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px); background:var(--accent-2)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn-wa{background:#1C7F46; color:#fff}
.btn-wa:hover{background:#176B3B; transform:translateY(-2px)}
.btn-sm{padding:.6em 1em; font-size:.85rem; min-height:38px}
@media (prefers-reduced-motion: reduce){ .btn,.btn:hover{transition:none; transform:none} }

/* ============ Logo kilidi ============ */
.lock{display:inline-flex; flex-direction:column; align-items:center; text-decoration:none; color:inherit; line-height:1}
.lock .l1{font-family:var(--display); font-weight:900; letter-spacing:.03em; white-space:nowrap}
.lock .rule{width:100%; height:2px; background:currentColor; margin:.22em 0 .3em; opacity:.9}
.lock .l2{font-family:var(--mono); letter-spacing:.34em; font-weight:500; white-space:nowrap}
.lock.sm .l1{font-size:1.25rem} .lock.sm .l2{font-size:.56rem; letter-spacing:.3em} .lock.sm .rule{height:1.5px}
.lock.xl .l1{font-size:clamp(3.2rem,11vw,9rem)} .lock.xl .l2{font-size:clamp(.9rem,2.2vw,1.6rem)} .lock.xl .rule{height:3px; margin:.14em 0 .26em}

/* ============ Header ============ */
/* Menü zemini tamamen düz (opak): koyu kapak altından geçerken de bağlantı yazısının kontrastı 4,5'in altına inmez */
.header{position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line-2)}
.header .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--hh)}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none}
.brand-mark{width:40px;height:40px; display:grid; place-items:center; background:var(--accent); color:#fff; border-radius:4px; flex:none}
.brand-mark svg{width:26px;height:26px}
.nav{display:none; gap:1.6rem; align-items:center}
.nav a{text-decoration:none; font-weight:700; font-size:.92rem; color:var(--ink-2); position:relative; padding-block:.3rem; white-space:nowrap}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .2s var(--yay)}
.nav a:hover{color:var(--ink)} .nav a:hover::after,.nav a.on::after{transform:scaleX(1)} .nav a.on{color:var(--ink)}
.head-actions{display:flex; align-items:center; gap:.6rem}
.icon-btn{width:42px;height:42px; display:grid; place-items:center; border:1.5px solid var(--line); background:transparent; color:var(--ink); border-radius:var(--r); cursor:pointer}
.icon-btn:hover{border-color:var(--ink)} .icon-btn svg{width:20px;height:20px}
.only-desktop{display:none}
@media (min-width:960px){ .nav{display:flex} .only-desktop{display:inline-flex} .hamburger{display:none} }
/* Giriş sayfası: menü kapağın üstündeyken saydam ve beyaz yazılı. Kapak geçilince (ya da mobil menü açıkken)
   site.js .zemin sınıfını ekler; menü öteki sayfalardaki gibi düz zemine ve koyu yazıya döner, altında ince gölge.
   İki zemin ayrı katmandadır (::before koyu geçiş, ::after düz zemin) ve yalnız opaklıkları değişir; yazı rengi anında değişir. */
body.landing .header{background:none; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none}
body.landing .header::before,body.landing .header::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; transition:opacity .3s var(--yay)}
body.landing .header::before{background:linear-gradient(180deg, rgba(8,14,24,.62), rgba(8,14,24,0))}
body.landing .header::after{opacity:0; background:var(--bg); border-bottom:1px solid var(--line-2); box-shadow:var(--golge-yukseltilmis)}
body.landing .header.zemin::before{opacity:0}
body.landing .header.zemin::after{opacity:1}
@media (prefers-reduced-motion: reduce){ body.landing .header::before,body.landing .header::after{transition:none} }
body.landing .header:not(.zemin){color:#fff}
body.landing .header:not(.zemin) .nav a{color:rgba(255,255,255,.82)} body.landing .header:not(.zemin) .nav a:hover,body.landing .header:not(.zemin) .nav a.on{color:#fff} body.landing .header:not(.zemin) .nav a::after{background:#fff}
body.landing .header:not(.zemin) .icon-btn{color:#fff; border-color:rgba(255,255,255,.4)} body.landing .header:not(.zemin) .icon-btn:hover{border-color:#fff}
body.landing .header:not(.zemin) .btn-primary{background:#fff; color:#0F1620}
/* Saydam hâlde klavye odak çerçevesi beyaz (fotoğraf üstünde mavi seçilmiyor); düz zeminde genel mavi çerçeve kalır */
body.landing .header:not(.zemin) :focus-visible{outline-color:#fff}
.overlay{position:fixed; inset:0; z-index:60; background:var(--bg); color:var(--ink); display:flex; flex-direction:column; padding:var(--gutter); transform:translateY(-100%); transition:transform .32s var(--yay); visibility:hidden; box-shadow:var(--golge-yuzen)}
.overlay.open{transform:none; visibility:visible}
.overlay-top{display:flex; justify-content:space-between; align-items:center}
.overlay nav{display:flex; flex-direction:column; gap:.2rem; margin-top:6vh}
.overlay nav a{font-family:var(--display); font-weight:900; font-size:clamp(2.4rem,9vw,4rem); text-decoration:none; line-height:1.05; color:var(--ink); display:flex; align-items:baseline; gap:.5rem}
.overlay nav a small{font-family:var(--mono); font-size:var(--etiket); color:var(--accent); letter-spacing:.12em}
.overlay-foot{margin-top:auto; display:flex; flex-wrap:wrap; gap:.75rem; color:var(--ink-2); font-size:.9rem}
@media (prefers-reduced-motion: reduce){ .overlay{transition:none} }

/* ============ Sayfalar ============ */

/* ---- Giriş: tam ekran slayt ---- */
.landing-hero{position:relative; min-height:100svh; margin-top:calc(-1 * var(--hh)); display:flex; flex-direction:column; justify-content:flex-end; color:#fff; overflow:hidden; background:#0F1620}
.slides{position:absolute; inset:0}
.slides picture{position:absolute; inset:0; opacity:0}
.slides picture:first-child{opacity:1}
.slides img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1)}
/* Kare başına 7 sn, çapraz geçiş 1,2 sn, yakınlaşma 1.0→1.06 (8 sn); döngü = kare sayısı × 7 sn.
   Kare sayısını (--kare-sayisi) ve her karenin sırasını (--sira) site.js HTML'den sayar; süre ve gecikmeler buradan hesaplanır,
   kare eklenip çıkarılınca boşluk oluşmaz. Keyframe yüzdeleri CSS değişkeni alamaz: kare-ilk / kare-orta / kare-son ve yakinlas
   karelerini site.js kare sayısına göre üretip <style> olarak ekler. Animasyon, öteki kareler yüklenince eklenen .hazir
   sınıfıyla başlar (JS yoksa ya da tek kare varsa ilk kare sabit kalır). */
.landing-hero{--kare-sayisi:2; --kare-suresi:7s}
.landing-hero.hazir .slides picture{animation:kare-orta calc(var(--kare-sayisi) * var(--kare-suresi)) ease-in-out infinite; animation-delay:calc(var(--sira, 0) * var(--kare-suresi))}
.landing-hero.hazir .slides picture:first-child{animation-name:kare-ilk}
.landing-hero.hazir .slides picture:last-child{animation-name:kare-son}
.landing-hero.hazir .slides img{animation:yakinlas calc(var(--kare-sayisi) * var(--kare-suresi)) linear infinite; animation-delay:inherit}
/* İnce ilerleme çizgisi: her kare için 7 sn'de dolar */
.slides-bar{position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.18); display:none}
.landing-hero.hazir .slides-bar{display:block}
.slides-bar span{display:block; height:100%; background:#fff; transform-origin:left; transform:scaleX(0); animation:ilerle 7s linear infinite}
@keyframes ilerle{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){ .landing-hero.hazir .slides picture,.landing-hero.hazir .slides img,.slides-bar span{animation:none} .slides picture{opacity:0} .slides picture:first-child{opacity:1} .landing-hero.hazir .slides-bar{display:none} }
/* Yazının arkası: soldan güçlü, alttan yumuşak koyu geçiş.
   Gece fotoğrafı slayttan çıkınca gündüz karelerinde vitrin yazıları başlığın arkasına denk geliyordu. */
.scrim{position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(10,16,24,.88) 0%, rgba(10,16,24,.74) 30%, rgba(10,16,24,.42) 58%, rgba(10,16,24,.10) 82%, rgba(10,16,24,0) 100%),
  linear-gradient(180deg, rgba(10,16,24,.30) 0%, rgba(10,16,24,.10) 34%, rgba(10,16,24,.45) 72%, rgba(10,16,24,.80) 100%)}
/* Kapak içeriğinin üst boşluğu = menü yüksekliği (--hh) + 48–88 px. Kapak menünün altına çekildiği için (margin-top:-hh) hap hiçbir genişlikte menüye değmez (ADIM-38) */
.landing-hero .wrap{position:relative; width:100%; padding-block:calc(var(--hh) + clamp(48px, 14vw - var(--hh), 88px)) clamp(28px,4vw,48px); display:grid; gap:clamp(24px,4vw,40px)}
.landing-lock{display:flex; flex-direction:column; align-items:flex-start; gap:1.2rem}
.landing-lock .tag{font-size:clamp(1.05rem,1.6vw,1.35rem); color:rgba(255,255,255,.88); max-width:50ch}
/* Kapak başlığı: masaüstünde iki satır, telefonda üç satıra inebilir. Logo kilidi kapakta yok, yalnız üst menüde. */
.landing-baslik{font-family:var(--display); font-weight:900; font-size:clamp(2.7rem,7.2vw,6.4rem); line-height:.92; letter-spacing:.005em; color:#fff; text-shadow:0 2px 24px rgba(15,22,32,.35)}
@media (min-width:840px){ .landing-baslik{letter-spacing:-0.01em} }
/* Hap: giriş kapağındaki "SHIMANO WORKSHOP YETKİLİ BAYİ" ile Servis / Bisikletler / Hakkında kapaklarının üst etiketi aynı görünür —
   beyaz yazı, ince beyaz çerçeve, yarı saydam koyu dolgu; çizgi ve gölge yok. Fotoğrafın tam beyaz bölgesinde bile dolgu üstünde beyaz yazı 5,4 kontrast verir. */
.landing-lock .pill,.kapak .eyebrow,.iletisim-obek #kanallar .eyebrow{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); font-weight:400; color:#fff; text-shadow:none; border:1px solid rgba(255,255,255,.55); background:rgba(10,16,24,.62); padding:.45em .8em; border-radius:999px}
.kapak .eyebrow::before,.iletisim-obek #kanallar .eyebrow::before{display:none}
/* İletişim üst etiketi (ADIM-36): bej zeminde dolgusuz hap, yazı ve ince çerçeve lacivert; koyu temada ikisi de açık. #adres içindeki MAĞAZA etiketi değişmez */
.iletisim-obek #kanallar .eyebrow{color:#0F1620; border-color:#0F1620; background:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .iletisim-obek #kanallar .eyebrow{color:#EDF2F8; border-color:#EDF2F8} }
:root[data-theme="dark"] .iletisim-obek #kanallar .eyebrow{color:#EDF2F8; border-color:#EDF2F8}
/* Fotoğraf üstündeki çerçeveli düğme: yarı saydam koyu dolgu, yoksa açık zeminde kayboluyor */
.landing-hero .btn-ghost,.kapak .btn-ghost{background:rgba(10,16,24,.62); color:#fff; border-color:rgba(255,255,255,.55)}
.landing-hero .btn-ghost:hover,.kapak .btn-ghost:hover{background:rgba(10,16,24,.78); border-color:#fff}
/* Bağlantılı metin kartları (Hakkında "Ne yapıyoruz", 404) */
.tiles{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:600px){ .tiles{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .tiles{grid-template-columns:repeat(4,1fr)} }
.tile{display:flex; flex-direction:column; gap:.45rem; padding:1.2rem 1.3rem; border:1px solid var(--line-2); border-radius:8px; background:var(--card); text-decoration:none; color:inherit; transition:transform .2s var(--yay); box-shadow:var(--golge-yukseltilmis)}
.tile:hover{transform:translateY(-3px); border-color:var(--accent-line)}
.tile b{font-family:var(--display); font-size:1.25rem; line-height:1.05; letter-spacing:.02em}
.tile span{font-size:.92rem; color:var(--ink-2)}
.tile .go{margin-top:auto; padding-top:.5rem; font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent)}
@media (prefers-reduced-motion: reduce){ .tile{transition:none} .tile:hover{transform:none} }

/* ---- Sayfa yolu (breadcrumb): kapağın hemen altında ince satır ---- */
.breadcrumb{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--ink-3)}
.breadcrumb .wrap{padding-block:.9rem}
.breadcrumb a{color:var(--ink-2); text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .ay{margin-inline:.45em}
.breadcrumb [aria-current]{color:var(--ink)}
.breadcrumb + .altnav .wrap{padding-top:0}

/* ---- Gizlilik / KVKK ---- */
.gizlilik{margin-top:1.8rem; display:grid; gap:1.8rem; max-width:76ch}
.gizlilik h2{font-size:1.25rem}
.gizlilik p{color:var(--ink-2); margin-top:.5rem}

/* ---- Dönüşüm düğmeleri: "WhatsApp'tan randevu" + "Ara" (her sayfanın ilk ekranı) ---- */
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
.landing-hero .cta-row .btn-ghost,.kapak .cta-row .btn-ghost{color:#fff; border-color:rgba(255,255,255,.55)}
.landing-hero .cta-row .btn-ghost:hover,.kapak .cta-row .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.1)}

/* ---- Kapak: kenardan kenara fotoğraf + degrade + başlık ---- */
.kapak{position:relative; isolation:isolate; min-height:clamp(420px,62vh,680px); display:flex; align-items:flex-end; color:#fff; background:var(--navy); overflow:hidden}
.kapak-foto{position:absolute; inset:0; display:block; z-index:-2}
.kapak-foto img{width:100%; height:100%; object-fit:cover; display:block}
.kapak::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(15,22,32,0) 0%, rgba(15,22,32,.45) 40%, rgba(15,22,32,.75) 100%)}
.kapak-icerik{width:100%; padding-top:clamp(140px,22vh,220px); padding-bottom:clamp(28px,4vw,48px); display:grid; gap:.2rem; justify-items:start}
.kapak .h1{margin-top:.35em; text-shadow:0 2px 24px rgba(15,22,32,.35)}
.kapak .lede{color:rgba(255,255,255,.92); text-shadow:0 1px 14px rgba(15,22,32,.6)}
.kapak .cta-row{margin-top:1.4rem}
.kapak-altyazi{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:rgba(255,255,255,.7); margin-top:1.6rem}
/* Telefonda kapak kısa kalsın: düğmeler ilk ekranda, alt bandın üstünde görünsün */
@media (max-width:700px){
  .kapak{min-height:0}
  .kapak::before{background:linear-gradient(180deg, rgba(15,22,32,.1) 0%, rgba(15,22,32,.6) 32%, rgba(15,22,32,.75) 100%)}
  .kapak-icerik{padding-top:84px; padding-bottom:18px}
  .kapak .lede{font-size:1rem; margin-top:.6em}
  .kapak .cta-row{margin-top:1rem}
  .kapak-altyazi{margin-top:.8rem}
}

/* ---- Şerit: koyu lacivert tek satır bant (sayfa başına en fazla bir) ---- */

/* ---- Alt menü: sayfa içi bağlantı hapları (kapağın altında) ---- */
.altnav .wrap{display:flex; flex-wrap:wrap; gap:.5rem; padding-block:1rem; border-bottom:1px solid var(--line-2)}
.altnav a{font-family:var(--body); font-weight:700; font-size:.86rem; padding:.5em 1em; border-radius:999px; border:1.5px solid var(--line); text-decoration:none; color:var(--ink-2); background:var(--bg-2)}
.altnav a:hover{border-color:var(--accent); color:var(--accent)}
.altnav + .section,.altnav + #turler > .tur:first-child{border-top:none}

/* ---- Servis ---- */
.two{display:grid; gap:2rem}
@media (min-width:1000px){ .two{grid-template-columns:1fr 1fr; gap:3rem; align-items:start} }
.two.r7{align-items:center}
@media (min-width:1000px){ .two.r7{grid-template-columns:5fr 7fr} }
figure{margin:0}
/* Fotoğraf kartları: köşe 14px, gölge ve çerçeve yok, hover'da 1.03 yakınlaşma */
.ph picture{display:block; overflow:hidden; border-radius:var(--rf)}
.ph img{width:100%; height:auto; object-fit:cover; transition:transform .4s var(--yay)}
.ph:hover img{transform:scale(1.03)}
.ph figcaption{font-family:var(--mono); font-size:var(--etiket); color:var(--ink-3); letter-spacing:var(--ls); margin-top:.6rem}
.svclist{display:grid; gap:0; border-top:1px solid var(--line)}
/* 10 kalem tam genişlikte iki sütun; telefonda tek sütun */
.svclist-iki{margin-top:1.4rem}
@media (min-width:860px){ .svclist-iki{grid-template-columns:1fr 1fr; column-gap:2.5rem} }
.svcrow{display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line-2); align-items:start}
.svcrow svg{width:24px;height:24px; color:var(--accent); margin-top:.15rem}
.svcrow b{display:block; font-size:1.02rem}
.svcrow span{display:block; color:var(--ink-2); font-size:.9rem; margin-top:.15rem}
/* İçeriği kısa kalan kart uzamasın */
.packs,.tiles{align-items:start}   /* .rakamlar listede değil: rakam kartları eşit yükseklikte uzar */
.packs{display:grid; gap:12px}
@media (min-width:640px){ .packs{grid-template-columns:repeat(3,1fr)} }
.pack{border:1px solid var(--line-2); border-radius:8px; padding:1.1rem 1.2rem; background:var(--card); display:flex; flex-direction:column; gap:.4rem}
.pack .num{font-family:var(--display); font-size:2.4rem; line-height:1; color:var(--accent)}
.pack h3{font-size:1.25rem}
.pack p{color:var(--ink-2); font-size:.9rem}
.pack .for{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--ink-3); margin-top:auto; padding-top:.6rem}
.split{display:grid; gap:14px}
@media (min-width:900px){ .split{grid-template-columns:1fr 1fr} }
.who{border-radius:8px; padding:clamp(20px,2.6vw,32px); display:flex; flex-direction:column; gap:.9rem}
.who.ind{background:var(--card); border:1px solid var(--line-2)}
.who.b2b{background:var(--navy); color:var(--on-navy); border:1px solid var(--navy-line)}
.who .k{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent)}
.who.b2b .k{color:#8CC1F5}
.who h3{font-size:1.5rem}
.who p{font-size:.97rem; color:var(--ink-2)} .who.b2b p{color:var(--on-navy-2)}
.who ul{margin:0; padding:0; list-style:none; display:grid; gap:.35rem; font-size:.92rem}
.who li{display:flex; gap:.6rem; align-items:flex-start} .who li::before{content:"▸"; color:var(--accent); flex:none} .who.b2b li::before{color:#8CC1F5}
.who .btn{align-self:flex-start; margin-top:.4rem}
.who.b2b .btn-primary{background:#4E9BE8; color:#0F1620}
.who .note{font-size:.82rem; color:var(--ink-3); border-top:1px dashed var(--line); padding-top:.7rem; margin-top:auto}
.who.b2b .note{color:var(--on-navy-2); border-color:var(--navy-line)}
.steps{display:grid; gap:1rem; margin-top:1.4rem}
.step{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start}
.step b{font-family:var(--display); font-size:1.7rem; color:var(--accent); line-height:1; min-width:1.4ch}
.step h3{font-size:1.15rem; font-family:var(--body); font-weight:700; line-height:1.3}
.step p{color:var(--ink-2); font-size:.92rem; margin-top:.2rem}
form.rf{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:clamp(18px,2.4vw,28px); display:grid; gap:1rem}
.f2{display:grid; gap:1rem} @media (min-width:640px){ .f2{grid-template-columns:1fr 1fr} }
.field{display:grid; gap:.4rem}
.field label{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent)}
.field input,.field select,.field textarea{font:inherit; font-size:1rem; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r); padding:.75em .9em; width:100%; min-height:46px}
.field textarea{min-height:100px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field .err{font-size:.8rem; color:var(--err); min-height:1.1em}
.field.bad input,.field.bad select{border-color:var(--err)}
.check{display:flex; gap:.7rem; align-items:flex-start; font-size:.86rem; color:var(--ink-2)}
.check input{margin-top:.3em; accent-color:var(--accent); width:18px; height:18px; flex:none}
.check a{color:var(--ink)}
.form-actions{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center}
.form-actions .hint{font-family:var(--mono); font-size:var(--etiket); color:var(--ink-3)}
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)} .faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:1.1rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-weight:700; font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
/* Açılır kutu başlıkları (SSS, ürün satırı, tablo çubuğu): bütün satır tıklanabilir, imleç el, metin seçimi kapalı (çift tıklama seçim başlatmasın) */
.faq summary,.ugrup-satir summary,.tablo-cubuk summary{cursor:pointer; user-select:none; -webkit-user-select:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--accent); font-size:1.4rem; line-height:1; flex:none}
.faq details[open] summary::after{content:"−"}
.faq .ans{padding:0 0 1.1rem; color:var(--ink-2); max-width:65ch; font-size:.95rem}

/* ---- Bisikletler ---- */
.photos{display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:700px){ .photos{grid-template-columns:repeat(2,1fr)} .photos.one,.photos.sut-1{grid-template-columns:1fr}
  .photos.sut-2{grid-template-columns:repeat(2,1fr)} .photos.three,.photos.sut-3{grid-template-columns:repeat(3,1fr)} .photos.sut-4{grid-template-columns:repeat(4,1fr)} }
/* Telefonda (≤700 px) fotoğraf galerileri iki sütun: ürün grupları, yerinde servis ve öteki galeriler (sürüş galerisi masonry, aşağıda) (ADIM-52).
   Tek fotoğraflı grupta fotoğraf ekran genişliğinin en çok %70'i, ortalı. */
@media (max-width:700px){ .photos.galeri{grid-template-columns:repeat(2,1fr)} .photos.galeri.sut-1{grid-template-columns:min(70vw,100%); justify-content:center} }
.photos figure{position:relative; overflow:hidden; border-radius:var(--rf)}
.photos img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .4s var(--yay)}
.photos figure:hover img{transform:scale(1.03)}
.photos figcaption{position:absolute; left:10px; bottom:10px; font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); background:rgba(15,22,32,.74); color:#fff; padding:.35em .6em; border-radius:4px}
@media (prefers-reduced-motion: reduce){ .ph img,.photos img{transition:none} .ph:hover img,.photos figure:hover img{transform:none} }
.tbl{border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:1.4rem}
.tbl-scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:.93rem}
th,td{padding:.8rem 1rem; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top}
thead th{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent); background:var(--bg-2); font-weight:500}
tbody th{font-weight:700} tbody tr:last-child td,tbody tr:last-child th{border-bottom:none}
td.c{font-family:var(--mono); font-variant-numeric:tabular-nums}
.marquee{overflow:hidden; border-block:1px solid var(--line); padding-block:.9rem; background:var(--bg-2); position:relative; margin-top:1.4rem}
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:70px; z-index:1; pointer-events:none}
.marquee::before{left:0; background:linear-gradient(90deg,var(--bg-2),transparent)} .marquee::after{right:0; background:linear-gradient(-90deg,var(--bg-2),transparent)}
.track{display:flex; width:max-content; animation:scroll 36s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{font-family:var(--display); font-weight:900; font-size:clamp(1.7rem,3.2vw,2.6rem); letter-spacing:.04em; padding-inline:1.3rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:1.3rem; white-space:nowrap}
.track span::after{content:""; width:8px; height:8px; background:var(--accent); transform:rotate(45deg); display:inline-block}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .track{animation:none; flex-wrap:wrap; width:auto; justify-content:center} }
.notice{display:flex; gap:.8rem; align-items:flex-start; border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:8px; padding:1rem 1.2rem; font-size:.92rem; margin-top:1.4rem}
.notice svg{width:22px;height:22px; color:var(--accent); flex:none; margin-top:.1rem}

/* Tür menüsü: üst menünün altına yapışır; seçili sekme vurgulu */
.altnav.yapisik{position:sticky; top:var(--hh); z-index:30; background:var(--bg)}
@media (max-width:700px){ .altnav.yapisik .wrap{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch} .altnav.yapisik .wrap::-webkit-scrollbar{display:none} .altnav.yapisik a{white-space:nowrap; flex:none} }
.altnav a[aria-current="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
/* Fotoğraf düğmesi: tıklayınca ışık kutusu açılır */
.foto{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:var(--rf); overflow:hidden; color:inherit; font:inherit}
.foto img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .4s var(--yay)}
.foto:hover img{transform:scale(1.03)}
.foto:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.kutu{border:1px solid var(--line-2); border-radius:8px; background:var(--card); padding:1rem 1.2rem}
.bilgi{margin:1.4rem 0 0; padding:0; list-style:none; display:grid; gap:.6rem; max-width:72ch}
.bilgi li{display:flex; gap:.7rem; align-items:flex-start; font-size:.97rem}
.bilgi li::before{content:"▸"; color:var(--accent); flex:none; margin-top:.1em}
.tablo-baslik{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent); margin-top:1.6rem}
.tablo-not,.kucuk-not{font-size:.84rem; color:var(--ink-3); margin-top:.7rem; max-width:72ch}
.soru-cevap{margin-top:1.6rem; border-left:3px solid var(--accent); padding:.2rem 0 .2rem 1rem; max-width:72ch}
.soru{font-weight:700; color:var(--accent)} .cevap{color:var(--ink-2); font-size:.97rem; margin-top:.3rem}
.galeri{margin-top:1.6rem}
/* Teslimat: iki dikey fotoğraf her ekranda yan yana (geniş ekranda çok uzamasın) */
.photos.ikili{grid-template-columns:repeat(2,1fr)}
.photos.ikili img{aspect-ratio:3/4; max-height:440px}
.galeri figure{border-radius:var(--rf)}
.galeri img{aspect-ratio:1/1}
/* Sabit ızgaralı galeriler (Bisikletler 3×2, Servis "Atölyeden" tek satır 4): kareler aynı oranda kırpılır, telefonda iki sütun */
.photos.izgara-4,.photos.izgara-5{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){ .photos.izgara-4{grid-template-columns:repeat(4,1fr)} .photos.izgara-5{grid-template-columns:repeat(5,1fr)} }
/* Servis: fotoğraf arka planlı koyu bant (her markaya servis) */
.band{position:relative; isolation:isolate; color:#fff; background:var(--navy); overflow:hidden; padding-block:96px}
@media (max-width:700px){ .band{padding-block:56px} }
.band-foto{position:absolute; inset:0; z-index:-2; display:block}
.band-foto img{width:100%; height:100%; object-fit:cover; object-position:center 60%; display:block}
.band::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(15,31,51,.72) 0%, rgba(15,31,51,.88) 100%)}
.band .eyebrow{color:#8CC1F5} .band .eyebrow::before{background:#8CC1F5}
.band .lede{color:rgba(255,255,255,.9)}
/* Servis: "kimlere" ve "sahadan" kartları */
.kimlere{display:grid; gap:12px; margin-top:1.4rem}
@media (min-width:800px){ .kimlere{grid-template-columns:repeat(3,1fr)} }
.kimlere .kutu b{display:block; font-family:var(--display); font-size:1.25rem; letter-spacing:.02em; line-height:1.05; margin-bottom:.35rem}
/* Hakkında: hikâye, alıntı, rakamlar, rotalar, kareler, ekip */
/* Hikâye: üç paragraf, okunur satır genişliği (alıntı artık ekip bloğunda) */
.hikaye{max-width:68ch; display:grid; gap:1rem; margin-top:1.4rem}
/* Rakam kartları: bütün satırlar aynı yükseklikte (grid-auto-rows:1fr); değerin altında tek satır küçük gri açıklama */
.rakamlar{display:grid; gap:12px; margin-top:1.4rem; grid-auto-rows:1fr}
@media (min-width:640px){ .rakamlar{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .rakamlar{grid-template-columns:repeat(4,1fr)} }
.rakam{border:1px solid var(--line-2); border-radius:8px; background:var(--card); padding:1.2rem 1.3rem}
.rakam .k{display:block; font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent)}
.rakam b{display:block; font-family:var(--display); font-size:2rem; line-height:1; margin-top:.4rem}
.rakam-aciklama{font-size:.86rem; line-height:1.5; color:var(--ink-2); margin-top:.55rem}
.rotalar{list-style:none; margin:.6rem 0 0; padding:0}
.rota{display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--line-2); font-size:.97rem}
.rota b{font-weight:700}
.rota span{color:var(--ink-2); font-size:.9rem}
.rozet{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent); border:1px solid var(--accent-line); background:var(--accent-soft); padding:.25em .6em; border-radius:999px}
.rota .rozet{color:var(--accent); font-size:var(--etiket)}   /* .rota span'ın .9rem boyunu ezer: rozet öteki etiketlerle aynı 12,5 px */
.tablo-baslik + .galeri,.tablo-baslik + .rotalar{margin-top:.6rem}
.davet{margin-top:1.2rem; max-width:66ch; color:var(--ink-2); font-size:1rem}
/* Ekip: üç eşit kart (4:5 fotoğraf, ad, görev); telefonda alt alta */
/* Hikâye: solda metin (etiket, başlık, üç paragraf); sağda kurucunun iki fotoğrafı yan yana ve eşit kare, altında ad, görev ve sözü.
   Telefonda metin üstte, fotoğraflar ve alıntı altta. */
.hikaye-duzen{display:grid; gap:2rem; align-items:start}
@media (min-width:1000px){ .hikaye-duzen{grid-template-columns:7fr 5fr; gap:3rem} }
/* Kurucu bloğu öteki kartlar (.tile, .rakam) gibi: beyaz zemin, 8px köşe, aynı iç boşluk; gölgesi derinlik katmanı listesinde (yükseltilmiş).
   Hikâye metni kartın dışında, sayfa zemininde kalır. Fotoğrafların köşesi kartınkinden küçük (6px). */
.kurucu{background:var(--card); border:1px solid var(--line-2); border-radius:8px; padding:1.2rem 1.3rem}
.kurucu-fotolar{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.kurucu .kurucu-fotolar .foto,.kurucu .kurucu-fotolar picture{border-radius:var(--r)}   /* .ph .foto / .ph picture (14px) kurallarını ezmek için üç seçicili */
.kurucu-fotolar .foto img{aspect-ratio:1/1}
.kurucu-fotolar figure:first-child .foto img{object-position:50% 20%}    /* tarlada: baş kesilmesin */
.kurucu-fotolar figure:last-child .foto img{object-position:35% 50%}     /* duvardaki Trek: kişi ve bisiklet kadrajda kalsın */
.kurucu h3{font-size:1.6rem; margin-top:1.2rem}
.kurucu .k{display:block; font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent); margin-top:.45rem}
.kurucu-alinti{margin:1.2rem 0 0; padding-left:1.1rem; border-left:3px solid var(--accent)}
.kurucu-alinti p{font-size:1.1rem; line-height:1.6}
.en-satir{margin-top:.8rem; font-size:.95rem; color:var(--ink-2); font-style:italic; max-width:72ch}
/* Bilmekte fayda var */
.notice.yasal ul{margin:.5rem 0 0; padding-left:1.1rem} .notice.yasal li{margin:.25rem 0}
.yasal-baslik{font-family:var(--display); font-size:1.25rem; letter-spacing:.02em; display:block}
.kapak-not{font-size:.95rem; color:rgba(255,255,255,.85); max-width:62ch; margin-top:1rem; text-shadow:0 1px 12px rgba(15,22,32,.6)}
/* Mağaza / ürünler */
/* Ürünler girişi: fotoğraf metnin altında geniş bant (21:9) */
.ph.bant{margin-top:clamp(24px,3vw,40px)} .ph.bant img{aspect-ratio:21/9}
#urunGruplar{margin-top:3rem; border-top:1px solid var(--line)}
.ugrup{padding-block:2rem; border-bottom:1px solid var(--line-2)}
/* Bir ya da iki fotoğraflı grup: metin solda, fotoğraf(lar) sağda; iki fotoğraf her ekranda yan yana, kare kırpımla aynı yükseklikte */
.ugrup .photos.sut-2{grid-template-columns:repeat(2,1fr)}
@media (min-width:701px) and (max-width:1023px){ .photos.galeri.sut-1{max-width:420px} }   /* dikey tablette tek fotoğraflı ürün grubu (dış lastik, takviye) en çok 420 px (ADIM-52) */
@media (min-width:860px){
  .ugrup-tek{display:grid; grid-template-columns:7fr 5fr; column-gap:2.5rem; align-items:start}
  .ugrup-tek .ugrup-bas{grid-column:1; grid-row:1}
  .ugrup-tek .markalar{grid-column:1; grid-row:2}
  .ugrup-tek .photos{grid-column:2; grid-row:1 / span 2; margin-top:0}
}
.ugrup h3{font-size:1.25rem; letter-spacing:.02em}
.ugrup-bas p{color:var(--ink-2); font-size:.97rem; margin-top:.4rem; max-width:72ch}
.markalar{margin:1rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.45rem}
.markalar li{font-weight:700; font-size:.86rem; border:1px solid var(--line); padding:.4em .75em; border-radius:4px; background:var(--bg-2)}
/* ---- Bisikletler: tür şablonu (sekiz tür için tek iskelet; CLAUDE.md "Tür şablonu") ----
   Aile kabı başlıksızdır (aile adı yalnız sekmede). Tür: başlık satırı → iki sütun (solda katalog mozaiği, sağda bilgi satırları,
   paragraflar, soru-cevap) → tam genişlik tablo çubuğu. Türler arasında ince çizgi; üst-alt boşluk her türde aynı. */
.tur{padding-block:clamp(48px,6vw,80px); border-top:1px solid var(--line-2)}
/* Başlık satırı: tür adı öbek başlığı boyunda (.h2.buyuk ile aynı), yanında aynı taban çizgisinde özet; telefonda alt alta */
.tur-bas{display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem 1.4rem; margin-bottom:clamp(20px,3vw,32px)}
.tur-bas h3{font-size:clamp(2rem,4vw,2.8rem); line-height:1.05; margin:0}
.tur-bas .ozet{margin:0; color:var(--ink-2); font-size:1.1rem}
@media (max-width:700px){ .tur-bas{flex-direction:column; gap:.3rem} }
/* Gövde: 1024 px ve üstünde solda 500 px medya sütunu, sağda metin; altında tek sütun (dikey tablet 701–1023 px tek sütun, ADIM-52) */
.tur-govde{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.6rem,3vw,2.4rem)}   /* minmax(0,…): telefonda yatay kayan model şeridi sütunu genişletemez */
.tur-medya-sutun,.tur-metin{min-width:0}
@media (min-width:1024px){ .tur-govde{grid-template-columns:500px minmax(0,1fr); gap:clamp(2rem,4vw,3.5rem); align-items:start} }
.tur-govde.medyasiz .tur-metin{max-width:72ch}
/* Medya kutusu (katalog mozaiği): genişlik 500 px (telefonda tam genişlik), 14 px köşe, yükseltilmiş gölge.
   Yükseklik tamamen içerikten gelir (aşağıda mozaik-N en-boy oranları), alt sınır yok, en çok 600 px (ADIM-49/50) */
.tur-medya{position:relative; width:min(100%,500px); aspect-ratio:5/6; border-radius:var(--rf); overflow:hidden; box-shadow:var(--golge-yukseltilmis); background:var(--bg-2)}
@media (max-width:700px){ .tur-medya{width:100%; aspect-ratio:4/5} }
/* Katalog mozaiği (her türde): beyaz zemin (iki temada da). Düzen görsel sayısına göre (ADIM-48):
   1 → tek büyük · 2 → alt alta · 3 → üstte 1 büyük, altında 2 · 4 → 2×2 · 5 → üstte 1 büyük, altında 2×2 · 6 → 2 sütun × 3 satır.
   Kutu yüksekliği satır sayısından (ADIM-49): her satır, 16:10 görselin hücre genişliğine sığdığı yükseklik (hücre genişliği × 0,625) + aralıklar + dolgu;
   500 px genişlikte tek sütun satırı 295, iki sütun satırı 144 px → 1 görsel 323, 2 → 630, 3 → 479, 4 → 329, 5 → 636, 6 → 485 px (en-boy oranı olarak yazıldı,
   telefonda genişlikle ölçeklenir); alt sınır yok, en çok 600 px ile kırpılır (ADIM-50). Satırlar doğal yükseklik oranında paylaşır (1 büyük satır = 2,04 küçük satır).
   Görsel hücrenin %90'ında ortalı (object-fit: contain). */
.tur-medya.mozaik{background:#fff; color:#16202B; padding:14px; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:12px 10px; align-items:stretch; max-height:600px}
.tur-medya.mozaik-1{grid-template-columns:1fr; grid-template-rows:1fr; aspect-ratio:500/323}
.tur-medya.mozaik-2{grid-template-columns:1fr; grid-template-rows:1fr 1fr; aspect-ratio:500/630}
.tur-medya.mozaik-3{grid-template-rows:2.04fr 1fr; aspect-ratio:500/479} .mozaik-3 .mozaik-kare:first-child{grid-column:1 / -1}
.tur-medya.mozaik-4{grid-template-rows:1fr 1fr; aspect-ratio:500/329}
.tur-medya.mozaik-5{grid-template-rows:2.04fr 1fr 1fr; aspect-ratio:500/636} .mozaik-5 .mozaik-kare:first-child{grid-column:1 / -1}
.tur-medya.mozaik-6{grid-template-rows:repeat(3,1fr); aspect-ratio:500/485}
/* Mozaik hücresi: görünen alt yazı yok; görsel düğmesi hücrenin %90'ı, görsel içinde contain ile ortalı */
.mozaik-kare{position:relative; min-width:0; min-height:0}
/* Düğme hücreye mutlak konumla %5 içeriden oturur (= hücrenin %90'ı): yüzde yükseklik, en-boy oranıyla boyutlanan kutuda çözülmüyordu */
.mozaik-kare .foto{position:absolute; inset:5%; width:auto; height:auto; display:block; border-radius:6px; background:#fff}
.mozaik-kare .foto img{width:100%; height:100%; aspect-ratio:auto; object-fit:contain; background:#fff}
@media (max-width:700px){ .tur-medya.mozaik{padding:10px; gap:8px} }
/* Dikey tablet (701–1023 px, ADIM-52): kutu tam içerik genişliğinde, yükseklik içerikten (her hücre 16:10, görsel hücrenin %90'ı).
   6 → 3×2 · 5 → üstte 3, altta ortalı 2 · 4 → 4×1 · 3 → 3×1 · 2 → 2×1 · 1 → tek görsel en çok %60 genişlikte, ortalı.
   Tek satırlı düzenlerde kutu kısa kaldığı için dolgu 8 px: boş bant kutu yüksekliğinin %12'sini geçmez. */
@media (min-width:701px) and (max-width:1023px){
  .tur-medya.mozaik{width:100%; aspect-ratio:auto; max-height:none; padding:8px; grid-template-rows:none; grid-auto-rows:auto; align-content:start}
  .tur-medya.mozaik .mozaik-kare{aspect-ratio:16/10}
  .tur-medya.mozaik-6,.tur-medya.mozaik-3{grid-template-columns:repeat(3,1fr)}
  .tur-medya.mozaik-5{grid-template-columns:repeat(6,1fr)}
  .mozaik-5 .mozaik-kare,.mozaik-5 .mozaik-kare:first-child{grid-column:span 2}
  .mozaik-5 .mozaik-kare:nth-child(4){grid-column:2 / span 2}
  .mozaik-5 .mozaik-kare:nth-child(5){grid-column:4 / span 2}
  .mozaik-3 .mozaik-kare:first-child{grid-column:auto}
  .tur-medya.mozaik-4{grid-template-columns:repeat(4,1fr)}
  .tur-medya.mozaik-2{grid-template-columns:repeat(2,1fr)}
  .tur-medya.mozaik-1{grid-template-columns:60%; justify-content:center}
}
/* Bilgi satırları: KİM İÇİN / NEREDE, ince çizgilerle ayrılmış; etiket solda 120 px, metin sağda (kart değil) */
.tur-bilgi{margin:0; border-top:1px solid var(--line)}
.tur-bilgi > div{display:grid; grid-template-columns:120px minmax(0,1fr); gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--line)}
.tur-bilgi dt{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent); padding-top:.2em}
.tur-bilgi dd{margin:0; font-size:.97rem; color:var(--ink-2)}
.paragraflar{margin-top:1.2rem; max-width:66ch; display:grid; gap:.9rem}
.paragraflar p{font-size:1rem; line-height:1.7}
.tur-metin > .paragraflar{margin-top:1.4rem}
.ph .foto{border-radius:var(--rf)}
/* Tablo çubuğu: kapalıyken beyaz yuvarlak çubuk (▸ + tablonun adı, sağda TABLOYU AÇ); açılınca tablo tam genişlikte, etiket TABLOYU KAPAT */
.tablo-cubuk{margin-top:clamp(1.6rem,3vw,2.4rem)}
.tablo-cubuk summary{list-style:none; display:flex; align-items:center; gap:.8rem; background:var(--card); border:1px solid var(--line-2); border-radius:999px; padding:.8rem 1.4rem; cursor:pointer; box-shadow:var(--golge-yukseltilmis); font-weight:700; transition:transform .18s var(--yay)}
.tablo-cubuk summary::-webkit-details-marker{display:none}
.tablo-cubuk summary:hover{border-color:var(--accent-line)}
.tablo-cubuk summary .ok{color:var(--accent); display:inline-block; transition:transform .2s var(--yay)}
.tablo-cubuk[open] summary .ok{transform:rotate(90deg)}
.tablo-cubuk summary .durum{margin-left:auto; font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent); white-space:nowrap; font-weight:500}
.tablo-cubuk:not([open]) summary .kapat,.tablo-cubuk[open] summary .ac{display:none}
.tablo-cubuk .tbl{margin-top:.9rem}
/* Mağazadan: dikey ve yatay kareler karışık olduğu için masonry (sütun akışı) */
.masonry{margin-top:1.4rem; columns:2; column-gap:12px}   /* telefonda da iki sütun (ADIM-52) */
@media (min-width:1000px){ .masonry{columns:3} }
.masonry-kare{break-inside:avoid; margin-bottom:12px; display:block}
.masonry-kare .foto img{aspect-ratio:auto; height:auto}
/* Ürünler: kalan gruplar tek satır, tıklayınca metin ve fotoğraflar açılır */
.ugrup-liste{margin-top:.6rem; border-top:1px solid var(--line)}
.ugrup-satir{border-bottom:1px solid var(--line-2)}
.ugrup-satir summary{cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; padding:.9rem 0}
.ugrup-satir summary::-webkit-details-marker{display:none}
.ugrup-satir summary b{font-family:var(--display); font-size:1.15rem; letter-spacing:.02em}
.ugrup-satir summary span{font-size:.86rem; color:var(--ink-2)}
.ugrup-satir summary::after{content:"+"; margin-left:auto; font-family:var(--mono); color:var(--accent); font-size:1.3rem; line-height:1}
.ugrup-satir[open] summary::after{content:"–"}
.ugrup-ic{padding:0 0 1.4rem; max-width:72ch} .ugrup-ic p{color:var(--ink-2); font-size:.97rem}
.ugrup-ic .galeri{margin-top:1rem}
/* ---- Servis: üç öbek (Ne yapıyoruz · Kimlere · Randevu) ---- */
.obek{border-top:1px solid var(--line-2); padding-top:clamp(40px,6vw,72px)}
.obek-bas .h2{font-size:clamp(2rem,4vw,2.8rem)}
.obek .section{border-top:none; padding-block:clamp(36px,5vw,64px)}
/* İletişim: kapak yok; iki bölüm (kanallar, adres+saatler) öbek aralığıyla, sayfa yolunun hemen altında üst çizgi ve ek dolgu olmadan */
.iletisim-obek{border-top:none; padding-top:0}
.obek .h3{font-size:1.6rem; margin-top:.5em; line-height:1.05}
.step h4{font-size:1rem}
/* ---- Giriş: kapak altı bilgi şeridi ---- */
:root{--yildiz:#F2B84B}                       /* altın sarısı: bütün yıldızlar (bilgi şeridi, puan rozeti, yorum kartları); iki temada aynı */
.yildizlar.altin svg.dolu{fill:var(--yildiz)} .yildizlar.altin svg{fill:rgba(255,255,255,.22)}
.bilgi-serit{background:#0F1F33; color:#EDF2F8}
.bilgi-serit .wrap{display:flex; align-items:stretch; min-height:76px}
.bs-alan{display:flex; align-items:center; gap:.7rem; padding:.7rem 1.6rem .7rem 0; margin-right:1.6rem; border-right:1px solid rgba(237,242,248,.16); min-height:76px; flex:none}
.bs-dil{flex:1 1 auto}
.bs-dil b{white-space:nowrap}      /* "5 dilde yorum" hiçbir genişlikte bölünmez; dar yerde yalnız mono etiket iki satıra iner (ADIM-38) */
.bs-buyuk{font-family:var(--display); font-size:2.1rem; line-height:1}
.bs-etiket{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:#A9B7C7}
.bs-saat b,.bs-dil b{font-family:var(--display); font-size:1.3rem; letter-spacing:.02em; line-height:1}
.bs-alan .yildizlar svg{width:14px; height:14px}
.bs-yol{margin-left:auto; border-right:0; margin-right:0; padding-right:0; color:#fff; text-decoration:none; font-weight:700; font-size:.95rem; font-family:var(--body); white-space:nowrap}
.bs-yol:hover{color:#8CC1F5}
/* Tablet ve dar masaüstü (701–1140 px; ADIM-37, üst sınır ADIM-38'de 1140): şerit iki satır — üstte saat + puan, altta diller + yol tarifi; dikey ayraç ortada, satırlar arasında ince çizgi. Telefon (≤700) düzeni aşağıdaki ayrı blokta, dokunulmadı */
@media (min-width:701px) and (max-width:1140px){
  .bilgi-serit .wrap{display:grid; grid-template-columns:1fr 1fr}
  .bs-alan{min-width:0}
  .bs-saat,.bs-puan{border-bottom:1px solid rgba(237,242,248,.16)}
  .bs-puan{border-right:0; margin-right:0; padding-right:0}
}
@media (max-width:700px){
  .bilgi-serit .wrap{flex-direction:column; align-items:stretch; min-height:0}
  .bs-dil,.bs-yol{display:none}
  .bs-alan{min-height:0; margin-right:0; padding:.8rem 0; border-right:0; border-bottom:1px solid rgba(237,242,248,.16)}
  .bs-puan{border-bottom:0}
}
/* ---- Giriş: rakamlar. Açık zeminde üç sütun; telefonda alt alta, rakam solda yazı sağda ---- */
.rakam-serit{border-top:1px solid var(--line-2)}
.rakam-serit .wrap{display:grid; grid-template-columns:repeat(3,1fr); padding-block:72px}
/* Masaüstü ve tablet: her sütunun içeriği (sayı, etiket, açıklama) sütun içinde ortalı; dolgu simetrik, ayraç çizgisi 2. ve 3. sütunun solunda */
.rs{padding-inline:2rem; border-left:1px solid var(--line); text-align:center}
.rs:first-child{border-left:0}
.rs b{display:block; font-family:var(--display); font-size:62px; line-height:1; color:var(--accent); font-weight:900}
.rs-etiket{display:block; font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--ink); margin-top:.8rem}
.rs-yazi p{color:var(--ink-2); font-size:.95rem; margin-top:.3rem}
@media (max-width:700px){
  .rakam-serit .wrap{grid-template-columns:1fr; padding-block:44px}
  .rs{display:grid; grid-template-columns:6rem 1fr; gap:1rem; align-items:center; padding:1.1rem 0; border-left:0; border-top:1px solid var(--line-2); text-align:left}   /* telefonda ortalama yok: sayı solda, yazı sağda */
  .rs:first-child{border-top:0; padding-top:0}
  .rs:last-child{padding-bottom:0}
  .rs b{font-size:46px}
  .rs-etiket{margin-top:0}
}
/* ---- Giriş: "Ne arıyorsunuz?" üç büyük fotoğraflı kart. Telefonda yatay: fotoğraf solda, yazı sağda ---- */
.yon-kartlar{display:grid; gap:16px; margin-top:1.6rem}
@media (min-width:701px){ .yon-kartlar{grid-template-columns:repeat(3,1fr)} }
.yon-kart{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line-2); border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--golge-yukseltilmis); transition:transform .2s var(--yay)}
.yon-kart:hover{transform:translateY(-3px); border-color:var(--accent-line)}
.yon-kart:active{transform:scale(.98)}
.yon-foto{display:block; position:relative; overflow:hidden; aspect-ratio:4/3}
.yon-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s var(--yay)}
.yon-kart:hover .yon-foto img{transform:scale(1.03)}
.yon-metin{display:flex; flex-direction:column; gap:.5rem; padding:1.2rem 1.3rem 1.3rem; flex:1}
.yon-metin b{font-family:var(--display); font-size:1.55rem; line-height:1.05; letter-spacing:.02em}
.yon-metin span{font-size:.95rem; color:var(--ink-2)}
.yon-metin .go{margin-top:auto; padding-top:.6rem; font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent)}
@media (max-width:700px){
  .yon-kart{flex-direction:row}
  .yon-foto{flex:0 0 38%; aspect-ratio:auto}
  .yon-metin{padding:1rem 1.05rem}
  .yon-metin b{font-size:1.25rem}
  .yon-metin span{font-size:.9rem}
}
@media (prefers-reduced-motion: reduce){ .yon-kart,.yon-foto img{transition:none} .yon-kart:hover,.yon-kart:active,.yon-kart:hover .yon-foto img{transform:none} }
/* ---- Giriş: yorum şeridi okları (başlık satırında, yalnız masaüstü), konum göstergesi ("3 / 21") ve "tümü" bağlantısı ----
   Oklar başlık satırına girer ki şerit sayfayı uzatmasın; telefonda gösterge şeridin altında, ortalı. */
.yorum-sag{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem}
/* Büyük başlık masaüstünde rozet ve oklarla aynı satıra sığmaz; grup alt satıra geçince sağa yaslı kalsın (oklar şeridin sağ üstünde) */
@media (min-width:900px){ .yorum-sag{margin-left:auto} }
.yorum-oklar{display:none; align-items:center; gap:.5rem}
@media (min-width:900px){ .yorum-oklar{display:flex} }
.yorum-ok{font-family:var(--body); font-size:1.7rem; line-height:1; padding-bottom:.15em}
.yorum-ok[aria-disabled="true"]{opacity:.35; cursor:default}
.yorum-ok[aria-disabled="true"]:hover{border-color:var(--line)}
.yorum-ok[aria-disabled="true"]:active{transform:none}
.yorum-konum{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--ink-3); font-variant-numeric:tabular-nums; margin-right:.3rem}
.yorum-konum-alt{margin:.4rem 0 0; line-height:1.2; text-align:center}   /* eski nokta satırıyla aynı boy: telefonda sayfa uzamasın */
@media (min-width:900px){ .yorum-konum-alt{display:none} }
.yorum-tumu{margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.4rem 1.6rem}   /* iki bağlantı: tümü · yorum yazın */
.yorum-tumu a{display:inline-block; color:var(--accent); font-weight:700; text-decoration:none; border-bottom:1px solid var(--accent-line)}
.yorum-tumu a:hover{border-bottom-color:var(--accent)}
.yorum-tumu a:active{transform:scale(.98)}
/* ---- Sürüş galerisi filtresi ---- */
.filtre{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem}
.filtre-dugme{font-family:var(--body); font-weight:700; font-size:.86rem; padding:.5em 1em; border-radius:999px; border:1.5px solid var(--line); background:var(--bg-2); color:var(--ink-2); cursor:pointer}
.filtre-dugme:hover{border-color:var(--accent); color:var(--accent)}
.filtre-dugme[aria-pressed="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.filtre-dugme:disabled{opacity:.45; cursor:not-allowed}
.filtre + #srGaleri .masonry{margin-top:1rem}
/* ---- Yorumlar: başlık yanında puan rozeti ---- */
.yorum-bas{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem}
.yorum-bas .h2{margin-bottom:0}
.puan-rozet{display:inline-flex; align-items:center; gap:.7rem; background:#fff; color:#16202B; border-radius:12px; padding:.7rem 1.1rem; box-shadow:var(--golge-yukseltilmis)}
.puan-rozet b{font-family:var(--display); font-size:2.2rem; line-height:1}
.puan-rozet span:last-child{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:#4F5A66}
.puan-rozet .yildizlar svg{width:14px; height:14px; fill:rgba(22,32,43,.15)} .puan-rozet .yildizlar svg.dolu{fill:var(--yildiz)}
/* ---- Derinlik katmanları: yükseltilmiş yüzeyler (kart, tablo, kutu) · yüzen yüzeyler (sabit bant, ışık kutusu) ---- */
.kutu,.pack,.tbl,.yorum,.puan-rozet,.hours,.who.ind,.rakam,.kurucu,.notice{box-shadow:var(--golge-yukseltilmis)}
.soru-cevap{background:var(--card); border-radius:8px; padding:1rem 1.2rem 1rem 1.1rem; box-shadow:var(--golge-yukseltilmis)}
.mobil-bant{box-shadow:var(--golge-yuzen)}
/* ---- Koyu bantlarda hafif gren dokusu (opaklık %4; fotoğraf üstüne uygulanmaz) ---- */
.bilgi-serit,.footer{position:relative; isolation:isolate}
.bilgi-serit::after,.footer::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.04; background-repeat:repeat; background-size:180px 180px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
/* ---- Tipografi: 60px ve üstü başlıklarda harf aralığı -0.01em ---- */
.lock.xl .l1,.rs b{letter-spacing:-0.01em}
.rs b{font-variant-numeric:tabular-nums}
@media (min-width:1200px){ .h1{letter-spacing:-0.01em} }
@media (min-width:720px){ .overlay nav a{letter-spacing:-0.01em} }
/* ---- Etkileşim durumları: tıklanabilir her ögede hover · focus-visible (genel kural satır 50) · active ---- */
.faq summary:hover,.ugrup-satir summary:hover{color:var(--accent)}
.devami:hover{text-decoration:none}
.brand:hover{opacity:.85}
.overlay nav a:hover{color:var(--accent)}
.isik-dugme:hover{border-color:#fff; background:rgba(15,22,32,.85)}
.mobil-bant a:hover{filter:brightness(1.06)}
.filtre-dugme:disabled:hover{border-color:var(--line); color:var(--ink-2)}
.btn:active,.tile:active,.ild:active,.icon-btn:active,.filtre-dugme:active:not(:disabled),.altnav a:active,.foto:active,.isik-dugme:active,.devami:active,.mobil-bant a:active,.bs-yol:active,.faq summary:active,.ugrup-satir summary:active,.nav a:active,.overlay nav a:active,.brand:active,.footer .legal a:active,.tablo-cubuk summary:active{transform:scale(.98)}
.foto:active img{transform:none}
@media (prefers-reduced-motion: reduce){ .btn:active,.tile:active,.ild:active,.foto:active{transform:none} .tablo-cubuk summary,.tablo-cubuk summary .ok{transition:none} }
/* Işık kutusu */
.isik{position:fixed; inset:0; z-index:70; background:rgba(15,22,32,.93); display:flex; align-items:center; justify-content:center; padding:0; touch-action:pinch-zoom; overscroll-behavior:contain}
.isik[hidden]{display:none}
/* Izgara olan alanlar (fotoğraf şeridi, yorum şeridi) boşken tamamen gizlensin */
/* hidden niteligi her zaman gizler: .masonry-kare gibi display veren kurallar tarayici varsayilanini eziyordu.
   Bu yuzden surus filtresi ve galeri dugmesi kareleri gizleyemiyordu. */
[hidden]{display:none !important}
/* Sahne sabit (ADIM-45): görsel alanı her zaman 90vw × 85vh, fotoğraf içinde ortalı (contain); kutu fotoğrafın oranına göre boyut değiştirmez,
   sayaç ve oklar yerinde kalır. İki görsel katmanı üst üste: yeni fotoğraf çözüldükten sonra 220 ms'de belirir, eskisi aynı sürede kaybolur (yalnız opacity). */
.isik-kare{display:flex; flex-direction:column; align-items:center; gap:.7rem; margin:0}
.isik-sahne{position:relative; width:90vw; height:85vh}
.isik-sahne img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; pointer-events:none; transition:opacity .22s var(--yay)}
.isik-sahne img.gorunur{opacity:1; pointer-events:auto}
@media (prefers-reduced-motion: reduce){ .isik-sahne img{transition:none} }
.isik-kare figcaption{color:rgba(255,255,255,.85); font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); text-align:center}
.isik-dugme{position:absolute; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.45); background:rgba(15,22,32,.6); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; display:grid; place-items:center; font-family:var(--body)}
.isik-dugme:hover{background:rgba(15,22,32,.85)}
.isik-dugme:focus-visible{outline:3px solid #fff; outline-offset:2px}
.isik-kapat{top:14px; right:14px}
.isik-onceki{left:10px; top:50%; transform:translateY(-50%)}
.isik-sonraki{right:10px; top:50%; transform:translateY(-50%)}
@media (prefers-reduced-motion: reduce){ .foto img{transition:none} .foto:hover img{transform:none} }

/* ---- Giriş: Google yorumları ---- */
/* Yatay kaydırılan şerit: telefonda 1 kart (sonraki göz kırpar), dikey tablette (701–1023 px) 2 kart, masaüstünde 3 kart (ADIM-52).
   Kaydırma çubuğu gizli: masaüstünde oklar, telefonda parmak yeter; çubuk şeridi 17 px uzatıyordu. */
.yorum-serit{display:grid; grid-auto-flow:column; grid-auto-columns:86%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:1.4rem; padding-bottom:.6rem; overscroll-behavior-x:contain; scrollbar-width:none}
.yorum-serit::-webkit-scrollbar{display:none}
@media (min-width:701px) and (max-width:1023px){ .yorum-serit{grid-auto-columns:calc((100% - 12px)/2)} }
@media (min-width:1024px){ .yorum-serit{grid-auto-columns:calc((100% - 24px)/3)} }
.yorum{position:relative; scroll-snap-align:start; border:1px solid var(--line-2); border-radius:8px; background:var(--card); padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:.45rem}
/* Dil rozeti: kartın sağ üst köşesi (TR/EN/DE/FR/NL) */
.yorum .dil{position:absolute; top:.7rem; right:.8rem; font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--ink-3); border:1px solid var(--line); border-radius:4px; padding:.2em .45em; line-height:1}
.yorum-ust{display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding-right:2.4rem}
.yorum-ust b{font-family:var(--display); font-size:1.15rem; letter-spacing:.02em}
.yildizlar{display:inline-flex; gap:2px; flex:none}
.yildizlar svg{width:15px; height:15px; fill:var(--line)}
.yildizlar svg.dolu{fill:var(--yildiz)}
.yorum-tarih{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--ink-3)}
/* white-space:pre-line → yorumdaki satır sonları olduğu gibi kalır */
.yorum-metin{color:var(--ink-2); font-size:.95rem; white-space:pre-line; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden}
.yorum-metin.acik{display:block; overflow:visible}
.devami{align-self:flex-start; background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:.85rem; color:var(--accent); text-decoration:underline}

/* ---- İletişim ---- */
/* Üç iletişim düğmesi (data/iletisim.js): masaüstünde yan yana, telefonda alt alta */
.ilet-dugmeler{display:grid; gap:12px; margin-top:1.6rem}
@media (min-width:700px){ .ilet-dugmeler{grid-template-columns:repeat(3,1fr)} }
.ild{display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; align-items:center; padding:1.05rem 1.3rem; border-radius:10px; text-decoration:none; color:#fff; background:var(--navy); transition:transform .2s var(--yay); box-shadow:var(--golge-yukseltilmis)}
.ild.ara{background:var(--accent); color:var(--accent-ink)}
.ild.whatsapp{background:#1C7F46}
.ild svg{width:26px; height:26px; grid-row:1 / span 2}
.ild b{align-self:end; font-family:var(--display); font-size:1.35rem; letter-spacing:.02em; line-height:1}
/* Alt satirda opaklik yok: WhatsApp yesili uzerinde %88 opaklik 4,30 kontrast veriyordu (sinir 4,5) */
.ild span{align-self:start; margin-top:.3rem; font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); font-variant-numeric:tabular-nums}
.ild:hover{transform:translateY(-2px); filter:brightness(1.07)}
@media (prefers-reduced-motion: reduce){ .ild{transition:none} .ild:hover{transform:none} }
.hours{border:1px solid var(--line-2); border-radius:8px; overflow:hidden; background:var(--card)}
.hours .hh{display:flex; justify-content:space-between; align-items:center; padding:1rem 1.2rem; background:var(--bg-2); border-bottom:1px solid var(--line-2)}
.hours .hh b{font-family:var(--display); font-size:1.25rem}
.hours .hh span{font-family:var(--mono); font-size:var(--etiket); color:var(--ok); letter-spacing:var(--ls)}
.hrow{display:flex; justify-content:space-between; padding:.7rem 1.2rem; border-bottom:1px solid var(--line-2); font-size:.95rem; font-variant-numeric:tabular-nums}
.hrow:last-of-type{border-bottom:none} .hrow .closed{color:var(--ink-3)} .hrow span:last-child{font-family:var(--mono)}
.addr{display:grid; gap:.6rem}
.addr .row{display:grid; grid-template-columns:110px 1fr; gap:1rem; padding:.8rem 0; border-top:1px solid var(--line-2); font-size:.97rem}
.addr .row span:first-child{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent); padding-top:.25em}
.map-cta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}   /* iki harita düğmesi yan yana; telefonda alt alta, tam genişlik */
@media (max-width:700px){ .map-cta{flex-direction:column} .map-cta .btn{width:100%} }

/* ---- Footer ---- */
/* Alt bilgi: lacivert zemin (#0F1F33, iki temada aynı; gren dokusu ::after ile). Üst dolgu bölüm dolgusuyla aynı (96 px, telefonda 56 px).
   Yazılar beyaz (#EDF2F8) ve açık gri (#A9B7C7), bağlantılar beyaz, üstüne gelince açık mavi; hepsi lacivert üstünde 4,5'in üstünde. */
.footer{background:#0F1F33; color:#EDF2F8; padding-block:96px 2.5rem; font-size:.88rem}
@media (max-width:700px){ .footer{padding-top:56px} }
.footer .wrap{display:grid; gap:1.5rem}
@media (min-width:900px){ .footer .wrap{grid-template-columns:1fr auto; align-items:end} }
.footer .legal{display:flex; flex-wrap:wrap; gap:1rem}
.footer .legal a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line)} .footer .legal a:hover{color:var(--ink)}
.footer .copy{font-family:var(--mono); font-size:var(--etiket); letter-spacing:.04em}
/* ---- Mobil alt bant (≤700px): sol "Ara", sağ "WhatsApp". Masaüstünde hiç görünmez. ---- */
.mobil-bant{display:none}
@media (max-width:700px){
  body{padding-bottom:calc(var(--bant) + env(safe-area-inset-bottom))}
  body.landing .landing-hero .wrap{padding-bottom:calc(28px + var(--bant))}
  .mobil-bant{position:fixed; left:0; right:0; bottom:0; z-index:45; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); background:var(--bg)}
  .mobil-bant a{display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:var(--bant); font-weight:700; font-size:.95rem; text-decoration:none}
  .mobil-bant a svg{width:20px; height:20px; flex:none}
  .mobil-bant .ara{color:var(--ink); border-right:1px solid var(--line)}
  .mobil-bant .wa{background:#1C7F46; color:#fff}
  /* Kapaktaki çağrı düğmeleri ekrandayken bant aşağı iner (site.js sınıfı ekler) */
  .mobil-bant{transition:transform .25s var(--yay)}
  .mobil-bant.gizli{transform:translateY(100%)}
  @media (prefers-reduced-motion: reduce){ .mobil-bant{transition:none} }
}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- Dil seçimi (yalnız kök sayfa index.html) ---------- */
body.dilsayfa{padding-bottom:0}
.dilsec{min-height:100svh; display:flex; align-items:center; padding-block:64px}
.dilsec .wrap{width:100%; text-align:center}
.dilsec .lock{align-items:center}
.dilsec-baslik{font-family:var(--mono); font-weight:500; font-size:.8rem; letter-spacing:var(--ls); color:#8CC1F5; margin:2.2rem 0 0}
.dilsec-liste{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:1rem}
.dilsec-liste .btn{min-width:150px}
.dilsec-not{color:rgba(255,255,255,.9); margin-top:2rem}
.dilsec-alt{font-family:var(--mono); font-size:.85rem; color:rgba(255,255,255,.72); margin-top:1.4rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.6em}
.dilsec-alt a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.dilsec-alt a:hover{border-bottom-color:#fff}
.dilsec-alt a:active{transform:scale(.98)}
@media (max-width:700px){ .dilsec-baslik .ayrac{display:none} .dilsec-baslik span[lang]{display:block} }

/* ---------- Dil seçici (üst menü) · yayında tek dil varsa kabı hidden durur ---------- */
.dil-secici{position:relative}
.dil-dugme{font-family:var(--mono); font-size:var(--etiket); letter-spacing:.1em; font-weight:500; width:auto; padding-inline:.7em}
.dil-liste{position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:170px; display:flex; flex-direction:column; padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:var(--golge-yuzen)}
.dil-liste a{padding:.55em .8em; border-radius:7px; text-decoration:none; color:var(--ink); font-size:.92rem; white-space:nowrap}
.dil-liste a:hover{background:var(--bg)}
.dil-liste a[aria-current="true"]{color:var(--accent); font-weight:700}
.dil-liste a:active{transform:scale(.98)}
body.landing .header:not(.zemin) .dil-dugme{color:#fff; border-color:rgba(255,255,255,.4)}
body.landing .header:not(.zemin) .dil-dugme:hover{border-color:#fff}

/* ---------- E12: koyu temada iletişim kutucukları ----------
   "Ara" açık temadaki koyu maviyi korur (beyaz yazıyla 6,4 kontrast).
   Instagram kutusu zeminden ayrılsın diye bir kademe açık yüzeye ve ince çizgiye oturur. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ild.ara{background:#0B58A6; color:#fff}
  :root:not([data-theme="light"]) .ild.instagram{background:var(--bg-3); color:var(--ink); border:1px solid var(--line)}
}
:root[data-theme="dark"] .ild.ara{background:#0B58A6; color:#fff}
:root[data-theme="dark"] .ild.instagram{background:var(--bg-3); color:var(--ink); border:1px solid var(--line)}

/* ---------- E14: teslimat notu — uyarı kutusu değil, sade paragraf ---------- */
.teslimat-not,.urun-not{font-size:.92rem; color:var(--ink-2); max-width:72ch}
.kapak-bag{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5)}
.kapak-bag:hover{border-bottom-color:#fff}
/* Aile sekmeleri ve galeri düğmesi */
.aile-sekme-kap{margin-top:1.6rem}
.aile-sekme{display:flex; flex-wrap:wrap; gap:.5rem}
.aile-sekme a{font-family:var(--body); font-weight:700; font-size:.86rem; padding:.5em 1em; border-radius:999px; border:1.5px solid var(--line); text-decoration:none; color:var(--ink-2); background:var(--bg-2)}
.aile-sekme a:hover{border-color:var(--accent); color:var(--accent)}
.aile-sekme a:active{transform:scale(.98)}
.aile-sekme a[aria-selected="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
/* Telefonda aile sekmeleri tek satır, yana kayar (bölüm şeridi gibi); seçili sekmeyi site.js görünür alana kaydırır (ADIM-52).
   4 px iç boşluk: kaydırılan kutu klavye odak halkasını kesmesin. */
@media (max-width:700px){ .aile-sekme{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; padding:4px; margin:-4px} .aile-sekme::-webkit-scrollbar{display:none} .aile-sekme a{white-space:nowrap; flex:none} }
.galeri-daha{margin-top:1.2rem}
.urun-not{margin-top:1.6rem}
.teslimat-not b{color:var(--ink)}

/* ---------- G17: özel sipariş kutusu ---------- */
.ozel-kutu{display:grid; gap:1.4rem; align-items:center; padding:1.6rem 1.7rem; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:var(--golge-yukseltilmis)}
.ozel-kutu p{margin:.6rem 0 0; color:var(--ink-2); max-width:68ch}
.ozel-kutu .h2{margin-top:.35em}
.ozel-kutu .btn{justify-self:start}
@media (min-width:860px){ .ozel-kutu{grid-template-columns:1fr auto; gap:2rem} .ozel-kutu .btn{justify-self:end} }

/* ---------- Alt bilgi: dört sütun (Adres · Çalışma saatleri · İletişim · Sayfalar); telefonda alt alta ---------- */
.footer .ft-sutunlar{display:grid; gap:2rem 2.4rem; align-items:start}
@media (min-width:600px){ .footer .ft-sutunlar{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .footer .ft-sutunlar{grid-template-columns:2fr 1fr 1fr 1fr} }
.ft-baslik{font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:#A9B7C7; margin:0 0 .6rem}
.ft-adres{margin:0; line-height:1.6}
.ft-saat{margin:0; line-height:1.6; font-variant-numeric:tabular-nums}
.ft-bag{display:inline-block; margin-top:.5rem; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.45)}
.ft-bag:hover{color:#8CC1F5; border-bottom-color:#8CC1F5}
.ft-liste{display:flex; flex-direction:column; gap:.45rem}
.ft-liste a{color:#fff; text-decoration:none; border-bottom:1px solid transparent; align-self:start}
.ft-liste a:hover{color:#8CC1F5; border-bottom-color:rgba(255,255,255,.45)}
.ft-bag:active,.ft-liste a:active{transform:scale(.98)}
.footer .copy{display:block; margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--navy-line); text-align:center; color:#A9B7C7}   /* ince çizgi lacivert üstünde görünür ton */
.footer .copy a{color:#fff}

/* ==== ADIM-52: küçük ekran ve dokunmatik ekran ==== */
/* Hakkında haftalık program: 600 px altında tablo yerine kart listesi (her grup bir kart: ad, sıklık, kişi, not); site.js ikisini birlikte üretir */
.program-kartlar{display:none; list-style:none; margin:.6rem 0 0; padding:0; gap:10px}
@media (max-width:599px){ #srProgram .tbl{display:none} .program-kartlar{display:grid} }
.program-kart{background:var(--card); border:1px solid var(--line-2); border-radius:8px; padding:1rem 1.1rem; box-shadow:var(--golge-yukseltilmis)}
.program-kart b{display:block; font-family:var(--display); font-size:1.2rem; letter-spacing:.02em; line-height:1.1}
.program-kart dl{margin:.6rem 0 0; display:grid; gap:.4rem}
.program-kart dl div{display:flex; gap:.8rem}
.program-kart dt{flex:none; width:6.2rem; font-family:var(--mono); font-size:var(--etiket); letter-spacing:var(--ls); color:var(--accent); padding-top:.2em}
.program-kart dd{margin:0; font-size:.95rem; color:var(--ink-2)}
/* Dokunmatik ekranlar (yalnız hover:none ve pointer:coarse): dokunma hedefleri en az 44 px; masaüstü görünümü değişmez.
   Alt bilgi bağlantıları iç boşlukla büyür; alt çizgi kenarlık yerine yazı altı çizgisi olur ki yazıya yakın kalsın. */
@media (hover:none) and (pointer:coarse){
  .altnav a,.aile-sekme a{display:inline-flex; align-items:center; min-height:44px}
  .breadcrumb .wrap{padding-block:.15rem}
  .breadcrumb a{display:inline-flex; align-items:center; min-height:44px}
  .devami{display:inline-flex; align-items:center; min-height:44px}
  .yorum-tumu a{display:inline-flex; align-items:center; min-height:44px; border-bottom:0; text-decoration:underline; text-decoration-color:var(--accent-line); text-decoration-thickness:1px; text-underline-offset:.3em}
  .ft-liste{gap:0}
  .ft-liste a,.ft-bag{display:inline-flex; align-items:center; min-height:44px; padding-block:8px; border-bottom:0}
  .ft-bag{margin-top:.2rem; text-decoration:underline; text-decoration-color:rgba(255,255,255,.45); text-decoration-thickness:1px; text-underline-offset:.3em}
}