/* site/css/theme.css — TEK tasarım kaynağı (site + panel ortak). Koyu mod YOK (bilinçli).
   Kırılım noktaları: 375 (taban) · 402 (iPhone 17 — HEDEF) · 768 (iPad) · 1440 (masaüstü).
   Marka kalitesi: sahibin 5 Ağu 2026 emri — "KESİNLİKLE MÜKEMMEL, PROFESYONEL" —
   emoji ikon YOK, çizgi-SVG ikon sistemi; derin okyanus lacivert-teal marka paleti. */
:root{
  --bg:#f7f9fa;
  --yuzey:#ffffff;
  --yuzey-2:#eef3f4;
  --yuzey-3:#e2e9eb;
  --metin:#0c1a22;
  --metin-2:#3c5461;
  --metin-3:#57707c;      /* soluk metin — WCAG AA (4.5:1) ölçüldü */
  --cizgi:#dde6e9;
  --cizgi-2:#e9eff1;
  --aksan:#075a72;         /* derin okyanus lacivert-teal — marka rengi */
  --aksan-koyu:#043a49;
  --aksan-acik:#0f7f9e;
  --aksan-bg:#e3f0f3;
  --aksan-2:#0c8f6f;       /* ikincil vurgu — canlı deniz yeşili */
  --lacivert:#0a2540;      /* koyu bant/hero zemini */
  --basari-bg:#e6f6ee; --basari:#0f7a44;
  --bekle-bg:#fff3e0; --bekle:#9a5100;
  --hata-bg:#fdeaea; --hata:#c62a2a;
  --golge:0 1px 2px rgba(10,20,28,.05), 0 8px 24px rgba(10,20,28,.07);
  --golge-buyuk:0 12px 32px rgba(7,58,73,.16), 0 2px 8px rgba(7,58,73,.08);
  --r:14px; --r-sm:10px; --r-lg:20px;
  --ters-yazi:#ffffff;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--metin); font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; /* yatay kaydırma YOK — 402px hedef */
}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.18; font-weight:800; letter-spacing:-.02em; color:var(--metin)}
h2{letter-spacing:-.015em}
p{margin:0 0 1em}
a{color:var(--aksan); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%; display:block}
::selection{background:var(--aksan-bg); color:var(--aksan-koyu)}

.kapsayici{max-width:1160px; margin:0 auto; padding:0 20px}
@media(max-width:480px){ .kapsayici{padding:0 16px} }

.ikon{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
.ikon-rozet{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:var(--aksan-bg); color:var(--aksan); flex-shrink:0}
.ikon-rozet .ikon{width:24px; height:24px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 22px; border-radius:var(--r-sm); border:1px solid transparent;
  font-size:15px; font-weight:700; cursor:pointer; transition:background .15s,border-color .15s,box-shadow .15s,transform .1s;
  letter-spacing:-.005em;
}
.btn-birincil{background:var(--aksan); color:var(--ters-yazi); box-shadow:0 4px 14px rgba(7,90,114,.28)}
.btn-birincil:hover{background:var(--aksan-koyu); text-decoration:none; box-shadow:0 6px 18px rgba(7,90,114,.36)}
.btn-birincil:active{transform:translateY(1px)}
.btn-ikincil{background:var(--yuzey); color:var(--aksan); border-color:var(--cizgi)}
.btn-ikincil:hover{background:var(--aksan-bg); border-color:var(--aksan); text-decoration:none}
.btn-blok{width:100%}

.kart{background:var(--yuzey); border:1px solid var(--cizgi); border-radius:var(--r); box-shadow:var(--golge); padding:22px; transition:box-shadow .18s,transform .18s}

input,select,textarea{
  width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--cizgi);
  border-radius:var(--r-sm); font-size:15px; font-family:var(--sans); background:var(--yuzey); color:var(--metin);
}
textarea{min-height:88px}
label{display:block; font-size:13px; font-weight:600; color:var(--metin-2); margin-bottom:6px}
.alan{margin-bottom:14px}
.alan-satir{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media(max-width:600px){ .alan-satir{grid-template-columns:1fr} }

.rozet{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700}
.rozet-basari{background:var(--basari-bg); color:var(--basari)}
.rozet-bekle{background:var(--bekle-bg); color:var(--bekle)}
.rozet-hata{background:var(--hata-bg); color:var(--hata)}

.guven-seridi{display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center; padding:14px 0; color:var(--metin-3); font-size:13.5px}
.guven-seridi span{display:flex; align-items:center; gap:6px}

/* ── Hero bandı (koyu lacivert zemin — marka kalitesi) ───────────────────────── */
.hero-bant{background:linear-gradient(155deg,var(--lacivert) 0%,var(--aksan-koyu) 55%,var(--aksan) 100%); color:#fff; position:relative; overflow:hidden}
.hero-bant::before{content:'';position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(circle at 15% 25%, rgba(255,255,255,.08) 0, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.06) 0, transparent 40%);}
.hero-bant .kapsayici{position:relative; z-index:1}
.hero-bant h1{color:#fff}
.hero-bant p{color:rgba(255,255,255,.82)}
.hero-rozet{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:18px; letter-spacing:.01em}

/* ── Üst menü ─────────────────────────────────────────────────────────────── */
#ust-menu{background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--cizgi); position:sticky; top:0; z-index:40}
.um-ic{display:flex; align-items:center; gap:16px; min-height:60px; padding-top:8px; padding-bottom:8px}
.um-marka{display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; color:var(--metin)}
.um-marka:hover{text-decoration:none}
.um-marka-ikon{border-radius:7px; flex-shrink:0}
.um-hamburger{display:none; background:none; border:1px solid var(--cizgi); border-radius:var(--r-sm); width:44px; height:44px; font-size:20px; margin-inline-start:auto}
.um-nav{display:flex; align-items:center; gap:18px; margin-inline-start:auto; flex-wrap:wrap}
.um-nav a{color:var(--metin-2); font-size:14.5px; font-weight:600}
.um-nav a:hover{color:var(--aksan); text-decoration:none}
.um-nav select{width:auto; min-height:36px; padding:4px 8px}
/* ⚠️ ".um-nav a" (0,1,1) ".btn-birincil"'i (0,1,0) specificity'de ezip metni
   --metin-2 griye düşürüyordu (5 Ağu 2026'da beyaz yazı görünmez oldu) — açıkça geri al. */
.um-nav a.um-cta{color:var(--ters-yazi); min-height:38px; padding:0 16px; font-size:14px}
.um-nav a.um-cta:hover{color:var(--ters-yazi)}
@media(max-width:900px){
  .um-hamburger{display:block}
  .um-nav{display:none; position:absolute; inset-inline:0; top:60px; background:var(--yuzey);
    flex-direction:column; align-items:stretch; border-bottom:1px solid var(--cizgi); padding:10px 20px 16px; gap:14px}
  .um-nav.acik{display:flex}
  .um-cta{order:99}
}

/* ── Alt bilgi ────────────────────────────────────────────────────────────── */
#alt-bilgi{background:var(--yuzey-2); border-top:1px solid var(--cizgi); margin-top:48px; padding:24px 0}
.ab-alt{text-align:center; color:var(--metin-3); font-size:13px; margin:12px 0 0}

/* ── Sohbet widget ────────────────────────────────────────────────────────── */
/* Sabit sohbet balonu sayfanın en altındaki CTA'yı ÖRTMESİN — 5 Ağu 2026'da 402px'te
   "Tahmini Fiyatı Gör" butonunun sağ alt köşesini kapattığı ölçüldü. */
body{padding-bottom:78px}
.sohbet-dugme{position:fixed; inset-inline-end:18px; bottom:18px; width:56px; height:56px; border-radius:50%;
  background:var(--aksan); color:#fff; border:none; font-size:24px; box-shadow:var(--golge); cursor:pointer; z-index:50}
.sohbet-panel{position:fixed; inset-inline-end:18px; bottom:84px; width:min(340px,92vw); max-height:70vh;
  background:var(--yuzey); border:1px solid var(--cizgi); border-radius:var(--r); box-shadow:var(--golge);
  display:none; flex-direction:column; z-index:50; overflow:hidden}
.sohbet-panel.acik{display:flex}
.sohbet-baslik{padding:12px 14px; background:var(--aksan); color:#fff; font-weight:700; font-size:14px}
.sohbet-govde{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; min-height:120px}
.sohbet-mesaj{padding:8px 10px; border-radius:var(--r-sm); font-size:13.5px; max-width:85%}
.sohbet-mesaj.ziyaretci{align-self:flex-end; background:var(--aksan-bg); color:var(--metin)}
.sohbet-mesaj.bot{align-self:flex-start; background:var(--yuzey-2); color:var(--metin)}
.sohbet-form{display:flex; gap:6px; padding:10px; border-top:1px solid var(--cizgi)}
.sohbet-form input{flex:1}

/* ── Hesaplayıcı sonucu ───────────────────────────────────────────────────── */
.hesap-widget{background:var(--yuzey); border:1px solid var(--cizgi); border-radius:var(--r-lg); box-shadow:var(--golge-buyuk); padding:26px}
.hesap-widget h2{font-size:19px}
.hesap-sonuc{margin-top:16px; padding-top:16px; border-top:1px dashed var(--cizgi)}
.hesap-sonuc-satir{display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; font-size:15px}
.hesap-sonuc-satir strong{font-size:19px; color:var(--aksan-koyu)}
.hesap-uyari{font-size:12.5px; color:var(--bekle); background:var(--bekle-bg); padding:8px 10px; border-radius:var(--r-sm); margin:10px 0}
.hesap-sonuc-bos{text-align:center; padding:14px; color:var(--metin-2)}
.hesap-yukleniyor{color:var(--metin-3); font-size:14px}

/* ── RTL (Arapça) — PLAN §6 zorunlu ──────────────────────────────────────── */
html[dir="rtl"] .alan-satir,
html[dir="rtl"] .guven-seridi{direction:rtl}
html[dir="rtl"] .btn{flex-direction:row-reverse}

/* ── Erişilebilirlik: dokunma hedefi ≥44px her yerde ─────────────────────── */
button,.btn,a.buton,select,input[type=checkbox],input[type=radio]{min-height:44px}
input[type=checkbox],input[type=radio]{min-width:20px; width:20px; height:20px; min-height:20px}



/* ══════════════════════════════════════════════════════════════════════════
   FASON MODÜLÜ SINIFLARI (6 Ağu 2026 birleşmesinde eklendi)
   ──────────────────────────────────────────────────────────────────────────
   Fason sayfaları kendi sınıf adlarını kullanır (.bolum .kap .dugme .izgara …).
   Sınıflar AYNEN korundu — sayfalar yeniden yazılmadan çalışsın diye. Ama renk
   değişkenleri Supply paletine BAĞLANDI: eski sıcak kahve/krem palet (#a8631f
   üzerine #faf8f4) yerine sitenin tek markası olan derin teal kullanılır.
   ⛔ Buradaki değişken adlarını silme: fason sınıflarının tamamı bunlara bakar.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --zemin:var(--bg); --kagit:var(--yuzey); --metin-soluk:var(--metin-2); --metin-cok-soluk:var(--metin-3);
  --cizgi-koyu:var(--yuzey-3);
  --koyu-zemin:var(--lacivert); --koyu-metin:#f2f7f8;
  --basari-zemin:var(--basari-bg); --hata-zemin:var(--hata-bg);
  --bilgi-zemin:var(--aksan-bg); --bilgi:var(--aksan);
  --radius-s:var(--r-sm); --radius:var(--r); --radius-l:var(--r-lg);
  --golge-l:var(--golge-buyuk);
  --ic-genislik:1120px;
}
/* site/css/theme.css — MÜŞTERİ ARAYÜZÜ tasarım sistemi.
   İlke: profesyonel, sıcak-nötr ahşap paleti, RTL-güvenli (mantıksal CSS özellikleri:
   margin-inline/padding-inline/text-align:start kullan — left/right YAZMA, Arapça'da kırılır).
   Koyu mod YOK. Kırılım: 375 · 402(hedef) · 768 · 1440. Dokunma hedefi ≥44px. */


html{scroll-behavior:smooth}

:root[dir="rtl"] body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Tahoma","Geeza Pro",Arial,sans-serif; }




.kap{max-width:var(--ic-genislik); margin-inline:auto; padding-inline:20px}
.etiket{
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--aksan);
}
.bolum{padding-block:56px}
.bolum--soluk{background:var(--kagit); border-block:1px solid var(--cizgi)}
.bolum-baslik{max-width:62ch; margin-bottom:32px}
.bolum-baslik h2{font-size:clamp(1.5rem,3vw,2.1rem)}

/* ── Üst bar / gezinme ─────────────────────────────────────────────────── */
.ust-bar{
  position:sticky; top:0; z-index:40; background:rgba(250,248,244,.92); backdrop-filter:blur(6px);
  border-block-end:1px solid var(--cizgi);
}
.ust-bar-ic{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px}
.marka{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; color:var(--metin)}
.marka-simge{
  width:34px; height:34px; border-radius:9px; flex-shrink:0; display:block;
}
.menu-ana{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
.menu-ana a{color:var(--metin); font-size:.92rem; font-weight:600; white-space:nowrap}
.menu-ana a:hover, .menu-ana a.aktif{color:var(--aksan)}
.ust-bar-sag{display:flex; align-items:center; gap:12px}
.dil-para-secici{position:relative}
.dil-para-buton{
  display:flex; align-items:center; gap:6px; min-height:40px; padding-inline:12px; border-radius:999px;
  border:1px solid var(--cizgi-koyu); background:var(--kagit); font-size:.85rem; font-weight:600; cursor:pointer;
}
.dil-para-panel{
  position:absolute; inset-inline-end:0; top:calc(100% + 8px); background:var(--kagit); border:1px solid var(--cizgi);
  border-radius:var(--radius); box-shadow:var(--golge-l); padding:10px; width:220px; display:none; z-index:50;
}
.dil-para-panel.acik{display:block}
.dil-para-panel .grup-baslik{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--metin-cok-soluk); padding:6px 8px 2px}
.dil-para-panel button{
  display:block; width:100%; text-align:start; padding:9px 8px; border:none; background:none; border-radius:8px;
  font-size:.9rem; cursor:pointer; min-height:40px;
}
.dil-para-panel button:hover{background:var(--zemin)}
.dil-para-panel button.aktif{background:var(--aksan-acik); color:var(--aksan-koyu); font-weight:700}
.mobil-menu-ac{display:none; min-height:44px; min-width:44px; border:none; background:none; font-size:1.5rem; cursor:pointer; align-items:center; justify-content:center}

/* ── Düğmeler ──────────────────────────────────────────────────────────── */
.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding-inline:22px;
  border-radius:999px; font-weight:700; font-size:.95rem; cursor:pointer; border:2px solid transparent; text-align:center;
}
.dugme--ana{background:var(--aksan); color:#fff}
.dugme--ana:hover{background:var(--aksan-koyu)}
.dugme--cizgi{background:transparent; border-color:var(--cizgi-koyu); color:var(--metin)}
.dugme--cizgi:hover{border-color:var(--aksan); color:var(--aksan)}
.dugme--buyuk{min-height:52px; padding-inline:28px; font-size:1rem}
.dugme--tam{width:100%}

/* ── Kahraman (hero) ───────────────────────────────────────────────────── */
.kahraman{padding-block:64px 48px}
.kahraman-izgara{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
.kahraman h1{font-size:clamp(1.9rem,4.2vw,3.1rem)}
.kahraman-alt{font-size:1.08rem; max-width:52ch}
.kahraman-dugmeler{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.kahraman-guven{display:flex; gap:20px; flex-wrap:wrap; margin-top:28px; font-size:.85rem; color:var(--metin-soluk)}
.kahraman-guven span{display:flex; align-items:center; gap:6px}

/* ⛔ 18 Eyl 2026 — YER TUTUCU ÇİZİLMEZ.
   "Görsel yakında eklenecek" yazan çizgili kutular 9 sayfada duruyordu ve
   müşteriye "bu site bitmemiş" diyordu. Yer tutucu göstermek, hiç göstermemekten
   KÖTÜDÜR (aynı ilke 17 Eyl'de telefon/WhatsApp için de uygulandı).
   ⚠️ Kural SİLİNMEDİ, KAPATILDI: gerçek fotoğraflar gelince bu satır kaldırılır
   ve düzen olduğu gibi geri gelir. Görsel eklemek = bu satırı silmek. */
.gorsel-yer-tutucu{display:none !important}

.gorsel-yer-tutucu{
  aspect-ratio:4/3; border-radius:var(--radius-l); background:
    repeating-linear-gradient(135deg,var(--aksan-acik),var(--aksan-acik) 14px,#efe3d1 14px,#efe3d1 28px);
  display:flex; align-items:center; justify-content:center; color:var(--aksan-koyu); font-weight:700;
  font-size:.85rem; text-align:center; padding:16px; border:1px solid var(--cizgi-koyu);
}

/* ── Kartlar / ızgaralar ───────────────────────────────────────────────── */
.izgara{display:grid; gap:20px}
.izgara--2{grid-template-columns:repeat(2,1fr)}
.izgara--3{grid-template-columns:repeat(3,1fr)}
.izgara--4{grid-template-columns:repeat(4,1fr)}
.kart{
  background:var(--kagit); border:1px solid var(--cizgi); border-radius:var(--radius); padding:22px;
  box-shadow:var(--golge);
}
.kart h3{font-size:1.05rem}
.kart p{margin-bottom:0; font-size:.92rem}
.kart--merkez{text-align:center}
.ikon-daire{
  width:48px; height:48px; border-radius:12px; background:var(--aksan-acik); color:var(--aksan-koyu);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px;
}

/* Adım listesi ("Nasıl Çalışır") */
.adim-listesi{display:flex; flex-direction:column; gap:0}
.adim{display:flex; gap:18px; padding-block:18px; border-block-start:1px solid var(--cizgi)}
.adim:first-child{border-block-start:none}
.adim-no{
  flex-shrink:0; width:40px; height:40px; border-radius:50%; background:var(--metin); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.adim-govde h3{margin-bottom:.25em; font-size:1rem}
.adim-govde p{margin:0; font-size:.9rem}

/* Malzeme kartı */
.malzeme-kart{display:flex; flex-direction:column; gap:10px}
.malzeme-kart .kalinlik-listesi{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.kalinlik-rozet{
  font-size:.75rem; padding:3px 9px; border-radius:999px; background:var(--zemin); border:1px solid var(--cizgi-koyu);
  color:var(--metin-soluk);
}

/* Galeri */
.galeri-filtre{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
.galeri-filtre button{
  /* Tüzük §8: 44×44. Ölçüldü 402px'te 85x38 · 90x38 · 69x38 — yükseklik 38'di. */
  min-height:44px; min-width:44px; padding-inline:14px; border-radius:999px; border:1px solid var(--cizgi-koyu); background:var(--kagit);
  font-size:.85rem; font-weight:600; cursor:pointer;
}
.galeri-filtre button.aktif{background:var(--metin); color:#fff; border-color:var(--metin)}
.galeri-izgara{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.galeri-ogesi{border-radius:var(--radius); overflow:hidden; border:1px solid var(--cizgi)}
.galeri-ogesi .gorsel-yer-tutucu{aspect-ratio:1/1; border-radius:0; border:none}
.galeri-ogesi-baslik{padding:10px 12px; font-size:.85rem; font-weight:600; background:var(--kagit)}

/* SSS akordeon */
.sss-oge{border-block-end:1px solid var(--cizgi)}
.sss-soru{
  width:100%; text-align:start; background:none; border:none; padding:16px 0; font-size:1rem; font-weight:700;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--metin);
}
.sss-cevap{max-height:0; overflow:hidden; transition:max-height .25s ease}
.sss-cevap p{padding-bottom:16px}
.sss-oge.acik .sss-cevap{max-height:600px}
.sss-oge.acik .sss-ok{transform:rotate(180deg)}
.sss-ok{transition:transform .2s ease}

/* Form */
.form-izgara{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.alan{margin-bottom:16px}
.alan label{display:block; font-size:.85rem; font-weight:700; margin-bottom:6px}
.alan input, .alan select, .alan textarea{
  width:100%; min-height:46px; padding:10px 14px; border:1px solid var(--cizgi-koyu); border-radius:10px;
  font-size:16px; background:var(--kagit); font-family:inherit; color:var(--metin);
}
.alan textarea{min-height:100px; resize:vertical}
.alan input:focus, .alan select:focus, .alan textarea:focus{outline:2px solid var(--aksan); outline-offset:1px}
.alan-yardim{font-size:.78rem; color:var(--metin-cok-soluk); margin-top:4px}
.dosya-alani{
  border:2px dashed var(--cizgi-koyu); border-radius:var(--radius); padding:28px 16px; text-align:center;
  background:var(--kagit); cursor:pointer;
}
.dosya-alani.surukleniyor{border-color:var(--aksan); background:var(--aksan-acik)}
.uyari-kutu{background:var(--bilgi-zemin); color:var(--bilgi); border-radius:10px; padding:12px 14px; font-size:.88rem; margin-block:14px}
.hata-kutu{background:var(--hata-zemin); color:var(--hata); border-radius:10px; padding:12px 14px; font-size:.88rem; margin-block:14px; display:none}
.hata-kutu.gorunur{display:block}
.basari-kutu{background:var(--basari-zemin); color:var(--basari); border-radius:10px; padding:14px; font-size:.92rem; margin-block:14px; display:none}
.basari-kutu.gorunur{display:block}
.tahmin-sonuc{
  background:var(--kagit); border:2px solid var(--aksan); border-radius:var(--radius); padding:22px; margin-top:20px; display:none;
}
.tahmin-sonuc.gorunur{display:block}
.tahmin-sonuc .tutar{font-size:2rem; font-weight:800; color:var(--aksan-koyu)}

/* ── Alt bilgi ─────────────────────────────────────────────────────────── */
.alt-bilgi{background:var(--koyu-zemin); color:var(--koyu-metin); padding-block:48px 24px; margin-top:64px}
.alt-bilgi a{color:#e7dcc8}
.alt-izgara{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px}
.alt-izgara h4{color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px}
.alt-izgara a, .alt-izgara p{display:block; font-size:.88rem; color:#c9bfab; margin-bottom:8px}
.alt-son{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:20px;
  border-block-start:1px solid rgba(255,255,255,.12); font-size:.8rem; color:#a89b83;
}

/* WhatsApp yüzen buton — TR pazarında güven veriyor (RAKIP-ANALIZI.md), ikincil kanal */
.whatsapp-yuzen{
  position:fixed; inset-block-end:20px; inset-inline-end:20px; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--golge-l);
  z-index:45; font-size:1.5rem;
}

/* ── Sohbet botu (F5) ─────────────────────────────────────────────────────── */
.sohbet-yuzen{
  position:fixed; inset-block-end:20px; inset-inline-end:88px; width:56px; height:56px; border-radius:50%;
  background:var(--aksan); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--golge-l);
  z-index:45; font-size:1.4rem; border:none; cursor:pointer;
}
.sohbet-panel{
  position:fixed; inset-block-end:88px; inset-inline-end:20px; width:340px; max-width:calc(100vw - 32px);
  height:460px; max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); background:var(--kagit); border:1px solid var(--cizgi);
  border-radius:var(--radius-l); box-shadow:var(--golge-l); z-index:46; display:none; flex-direction:column; overflow:hidden;
}
.sohbet-panel.acik{display:flex}
.sohbet-baslik{background:var(--metin); color:#fff; padding:14px 16px; font-weight:700; display:flex; justify-content:space-between; align-items:center}
.sohbet-baslik button{background:none; border:none; color:#fff; font-size:1.2rem; cursor:pointer; min-width:32px; min-height:32px}
.sohbet-govde{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px}
.sohbet-mesaj{max-width:82%; padding:9px 12px; border-radius:14px; font-size:.88rem; line-height:1.4}
.sohbet-mesaj--ziyaretci{align-self:flex-end; background:var(--aksan); color:#fff; border-end-end-radius:4px}
.sohbet-mesaj--bot{align-self:flex-start; background:var(--zemin); border:1px solid var(--cizgi); border-end-start-radius:4px}
.sohbet-alt{display:flex; gap:8px; padding:12px; border-block-start:1px solid var(--cizgi)}
.sohbet-alt input{flex:1; min-height:40px; padding:8px 12px; border:1px solid var(--cizgi-koyu); border-radius:10px; font-size:16px}
.sohbet-alt button{min-height:40px; min-width:40px; border-radius:10px; border:none; background:var(--aksan); color:#fff; cursor:pointer}
@media (max-width:402px){
  .sohbet-panel{inset-inline-end:16px; inset-inline-start:16px; width:auto}
  .sohbet-yuzen{inset-inline-end:16px}
}

/* ═══════════════ RESPONSIVE — EMIR §3.1: 375 · 402(hedef) · 768 · 1440 ═══════════════ */
@media (max-width: 1024px){
  .kahraman-izgara{grid-template-columns:1fr}
  .kahraman .gorsel-yer-tutucu{order:-1}
  .izgara--4{grid-template-columns:repeat(2,1fr)}
  .alt-izgara{grid-template-columns:1fr 1fr}
}
@media (max-width: 768px){
  .menu-ana{display:none}
  .mobil-menu-ac{display:inline-flex}
  .izgara--3{grid-template-columns:repeat(2,1fr)}
  .galeri-izgara{grid-template-columns:repeat(2,1fr)}
  .form-izgara{grid-template-columns:1fr}
  .bolum{padding-block:40px}
}
@media (max-width: 402px){
  .kap{padding-inline:16px}
  .izgara--2, .izgara--3, .izgara--4{grid-template-columns:1fr}
  .galeri-izgara{grid-template-columns:repeat(2,1fr); gap:10px}
  .kahraman{padding-block:36px 32px}
  .kahraman-dugmeler{flex-direction:column}
  .kahraman-dugmeler .dugme{width:100%}
  .alt-izgara{grid-template-columns:1fr; gap:24px}
  .whatsapp-yuzen{width:50px; height:50px; inset-block-end:16px; inset-inline-end:16px}
}

/* Mobil açılır menü paneli (kabuk.js tarafından enjekte edilir) */
.mobil-menu-panel{
  position:fixed; inset:0; background:var(--zemin); z-index:60; padding:20px; display:none; overflow-y:auto;
}
.mobil-menu-panel.acik{display:block}
.mobil-menu-panel .kapat{min-height:44px; min-width:44px; border:none; background:none; font-size:1.6rem; float:inline-end}
.mobil-menu-panel a{display:block; padding:14px 4px; font-size:1.1rem; font-weight:700; color:var(--metin); border-block-end:1px solid var(--cizgi)}

/* ══════════════════════════════════════════════════════════════════════════
   MOBİL TAŞMA KAPISI (6 Ağu 2026 birleşmesinde ölçümle eklendi)
   ──────────────────────────────────────────────────────────────────────────
   Fason sayfaları ızgara sütunlarını INLINE yazıyor
   (`style="grid-template-columns:1.1fr .9fr"`). Inline stil normal CSS ile
   ezilemez, o yüzden dar ekranda iki sütun zorla yan yana kalıyor ve sayfa
   yatay kayıyordu — /manufacturing/estimate.html'de 402px'de 84px taşma ölçüldü.
   `!important` burada BİLİNÇLİ: inline stili ezmenin başka yolu yok.
   ⛔ Kaldırma: her fason sayfasının inline stilini tek tek düzeltmek gerekirdi.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="max-width"] { max-width: 100% !important; }
}


/* ── `hidden` HER ZAMAN GİZLER (20 Eyl 2026) ───────────────────────────────
   ⚠️ ÜÇ KEZ ÖLÇÜLDÜ: `hidden` özniteliği HTML'in varsayılan `display:none`unu
      taşır ama o varsayılan ÖZGÜLLÜKTE en alttadır — `.sinif{display:flex}`
      yazan her kural onu yener. Sonuç: JS "gizledim" der, öğe EKRANDA KALIR.
      Ölçülen üç vaka: boş sepetteki kırmızı "0" rozeti · boş listede duran
      "Listeyi temizle" düğmesi · boş durum kabı.
   ⛔ Bu kural SİLİNMEZ ve tek tek sınıflara `[hidden]` yazılarak çoğaltılmaz;
      tek yerde durur ki bir daha aynı tuzağa düşülmesin. */
[hidden] { display: none !important; }

/* ── ANA SAYFA ÜRÜN ŞERİDİ (20 Eyl 2026) ───────────────────────────────────
   Sahibin "amatör görünüyor" ölçümünün en büyük tek sebebi: ana sayfada HİÇ
   fotoğraf yoktu. Şerit, kataloğun kendi ucundan beslenir (ülke kuralı ve
   marka temizliği orada uygulanır, burada tekrarlanmaz).
   ⚠️ MOBİLDE TEK SATIR YATAY KAYDIRMA (Tüzük §8.0): çok satırlı kart ızgarası
      dar ekranda sayfayı uzatıyor ve "iç içe kaydırma" tuzağına düşüyordu.
      Şerit SAYFANIN kendi kaydırmasının içinde ikinci bir DİKEY kaydırma açmaz. */
.anasayfa-vitrin { padding: 56px 0 8px; }
.av-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.av-bas .bolum-baslik { margin-bottom: 6px; }
.av-bas .bolum-alt { margin: 0; }
.av-tumu {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--kenarlı, #d7dde3); border-radius: 10px;
  text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap;
}
.av-tumu:hover { border-color: var(--aksan, #0f7f9e); color: var(--aksan, #0f7f9e); }

.av-serit {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-top: 24px;
}
.av-kart {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--kenarlı, #e5e7eb); border-radius: 12px; overflow: hidden;
  background: #fff; transition: transform .16s, box-shadow .16s, border-color .16s;
}
.av-kart:hover { transform: translateY(-2px); border-color: #cbd5e1; box-shadow: 0 8px 22px rgba(10,37,64,.10); }
/* Görsel alanı nötr zeminli: katalogun büyük kısmı BEYAZ zeminde çekilmiş açık
   ahşap ürün; beyaz kartta ürün kayboluyordu (canlıda ölçüldü). */
.av-resim { display: block; background: #f3f5f5; overflow: hidden; }
.av-resim img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; padding: 7%; mix-blend-mode: multiply; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.av-kart:hover .av-resim img { transform: scale(1.045); }
.av-ad {
  padding: 10px 12px 0; font-size: .88rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.av-fiyat { padding: 6px 12px 12px; font-size: .95rem; font-weight: 700; color: var(--aksan, #0f7f9e); }
.av-fiyat-yok { font-size: .8rem; font-weight: 500; color: var(--metin-3, #57707c); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) { .av-serit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  /* Tek satır yatay kaydırma — kartlar ekranın %62'si kadar, bir sonraki kartın
     kenarı GÖRÜNÜR durur ki kaydırılabildiği anlaşılsın. */
  .anasayfa-vitrin { padding-top: 40px; }
  .av-serit {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(var(--container-padding, 16px) * -1);
    padding-inline: var(--container-padding, 16px);
  }
  .av-serit::-webkit-scrollbar { display: none; }
  .av-kart { flex: 0 0 62%; scroll-snap-align: start; }
}

/* ── CİLA (1 Eki 2026, redesign-skill denetimi — ölçülen eksikler, hedefli) ─────────
   Ölçüm: text-wrap 0 · focus-visible 1 · :active 2 · prefers-reduced-motion 0 · skip-link 0.
   Yazı tipi BİLEREK sistem yazısı kalır: web fontu LCP/CLS'e yük bindirir (SEO ilk-3 hedefi, CWV kapısı). */
h1,h2,h3{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
:where(a,button,input,select,textarea,summary,[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid var(--aksan-acik); outline-offset:2px; border-radius:6px}
[tabindex="-1"]:focus{outline:none}
:where(.btn,.btn-primary,.btn-secondary):active:not(:disabled){transform:translateY(1px) scale(.985)}
.atla-link{position:absolute; inset-inline-start:12px; top:-60px; z-index:100; padding:10px 16px;
  background:var(--aksan); color:var(--ters-yazi); border-radius:var(--r-sm); font-weight:700; text-decoration:none;
  transition:top .15s}
.atla-link:focus{top:12px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
}