/* ============================================================
   Şükrü Çalışkan Sigorta — ana stil dosyası
   Bu dosya build.py tarafından ÜRETİLMEZ, elle düzenlenir.

   TASARIM SİSTEMİ (2026-08-20 yeniden kuruldu)
   --------------------------------------------
   Renk : markanın kendi renkleri. Logo kırmızı + siyah olduğu için palet
          kömür siyah + kağıt nötr + logo kırmızısı (--brand) üzerine kurulu.
          Kırmızı TEK vurgu rengi: link, sayı, ikon, adım numarası.
          WhatsApp yeşili YALNIZCA WhatsApp butonlarında; sayfadaki tek
          yabancı renk o, bu yüzden gözün gittiği yer hep dönüşüm.
          Yeşil tik sadece "kapsar" listelerinde (--ok).
   Köşe : interaktif 8px · konteyner 14px · büyük yüzey 20px. İstisna yok.
   Tipo : Bricolage Grotesque (başlık) + Source Sans 3 (gövde).
          İkisi de latin-ext taşır → ş ğ ı İ ç ö ü tam.
   Tema : açık + koyu, prefers-color-scheme ile. Bölümler tema çevirmez.
   ============================================================ */

:root{
  /* --- Renk: tek aile, açık tema ---
     DİKKAT: --ink bir YÜZEY rengidir (koyu bölüm, footer, cta bandı).
     --heading ise METİN rengidir (başlık, etiket, yüksek kontrast yazı).
     Açık temada ikisi aynı değere yakın olduğu için tek token gibi
     görünürler, ama koyu temada TERS çevrilirler. Metin için --ink
     kullanırsan koyu temada koyu üstüne koyu yazarsın. */
  --ink:#1A1A1C;          /* YÜZEY: en koyu bölüm zemini (logodaki siyah) */
  --ink-2:#26262A;        /* koyu yüzey üstü ikinci kat */
  --ink-3:#3A3A40;
  --heading:#1A1A1C;      /* METİN: başlık ve yüksek kontrastlı yazı */
  --hover-tint:rgba(26,26,28,.05);  /* nötr hover dolgusu */

  /* Logo kırmızısı. --brand ikon ve dolgularda, --brand-ink metin ve
     bağlantılarda kullanılır (kağıt üstünde AA kontrastı tutsun diye koyu). */
  --brand:#D42A20;
  --brand-ink:#B0221A;
  --brand-dark:#8E1B14;
  --brand-soft:#FBECEA;

  --wa:#25D366;           /* YALNIZCA WhatsApp butonları */
  --wa-dark:#1DA851;

  --paper:#FAFAF9;        /* sayfa zemini */
  --sand:#F1F0ED;         /* bölüm tint'i */
  --line:#E3E2DE;
  --line-strong:#D0CFCA;

  --text:#22221F;         /* gövde metni */
  --muted:#5F5F5A;        /* ikincil metin */
  --on-ink:#DCDCD8;       /* koyu yüzeyde gövde */
  --on-ink-soft:#A5A5A0;  /* koyu yüzeyde ikincil */

  --ok:#1B7A4B;           /* SEMANTİK: "kapsar" listesi tiki */
  /* "Kapsamaz" çarpısı bilinçli olarak nötr: marka kırmızısıyla aynı olsaydı
     markanın kendisi olumsuz anlam taşırdı. Şekil zaten ayrımı veriyor. */
  --danger:#575752;

  /* --- Köşe: üç kademe, belgelenmiş kural --- */
  --r-sm:8px;             /* buton, input, rozet */
  --r:14px;               /* kart, panel */
  --r-lg:20px;            /* form kartı, cta bandı */

  /* --- Gölge: nötr siyah değil, zemin tonuyla renklendirilmiş --- */
  --shadow-sm:0 1px 2px rgba(22,33,31,.05), 0 2px 8px rgba(22,33,31,.04);
  --shadow:0 4px 14px rgba(22,33,31,.07), 0 14px 36px rgba(22,33,31,.06);
  --shadow-lg:0 10px 26px rgba(22,33,31,.09), 0 34px 68px rgba(22,33,31,.10);

  --wrap:1180px;
  --font-display:'Bricolage Grotesque','Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  /* --- z-index ölçeği: rastgele 9999 yok --- */
  --z-grain:5;
  --z-header:60;
  --z-fab:80;
  --z-skip:100;
}

@media (prefers-color-scheme:dark){
  :root{
    --ink:#0F0F11;
    --ink-2:#1A1A1C;
    --ink-3:#2C2C31;
    /* Yüzey koyulaşırken metin AÇILIR. Bu satır olmazsa başlıklar,
       form etiketleri ve ghost butonlar koyu üstünde koyu kalır. */
    --heading:#F3F3F1;
    --hover-tint:rgba(255,255,255,.07);
    /* Koyu zeminde logo kırmızısı yeterince okunmuyor, bir tık açılıyor. */
    --brand:#F2564B;
    --brand-ink:#F2564B;
    --brand-dark:#FF7A70;
    --brand-soft:#2C1614;

    --paper:#121214;
    --sand:#1B1B1E;
    --line:#2C2C31;
    --line-strong:#3B3B41;

    --text:#E2E2DE;
    --muted:#9C9C97;
    --on-ink:#DCDCD8;
    --on-ink-soft:#9A9A95;

    --ok:#4FBE8B;
    --danger:#9B9B95;

    --shadow-sm:0 1px 2px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.26);
    --shadow:0 4px 14px rgba(0,0,0,.38), 0 14px 36px rgba(0,0,0,.30);
    --shadow-lg:0 10px 26px rgba(0,0,0,.44), 0 34px 68px rgba(0,0,0,.38);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--text); background:var(--paper);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

h1,h2,h3,h4{
  font-family:var(--font-display); margin:0 0 .5em; color:var(--heading);
  font-weight:700; letter-spacing:-.03em; line-height:1.1; text-wrap:balance;
}
h1{font-size:clamp(2.15rem,5vw,3.7rem); font-weight:800; letter-spacing:-.038em}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
h3{font-size:1.22rem; letter-spacing:-.02em}
h4{font-size:1rem; letter-spacing:-.01em}
p{margin:0 0 1em; max-width:68ch; text-wrap:pretty}
ul,ol{margin:0 0 1em; padding-left:1.25em}
li{margin-bottom:.4em}
strong{font-weight:700; color:var(--heading)}
hr{border:0; border-top:1px solid var(--line); margin:3rem 0}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:var(--r-sm)}

/* Sayfa geneline ince bir doku. Sabit katman + pointer-events:none →
   kaydırma sırasında GPU yeniden boyama yapmaz (mobil FPS korunur). */
body::after{
  content:""; position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none;
  opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  body::after{mix-blend-mode:screen; opacity:.05}
}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px}
/* Dikey ritim: üst/alt optik olarak dengelenir, alt biraz daha geniş. */
.section{padding:92px 0 100px}
.section--tight{padding:60px 0 64px}
.section--sand{background:var(--sand)}
.section--ink{background:var(--ink); color:var(--on-ink)}
.section--ink h2,.section--ink h3,.section--ink h4,.section--ink strong{color:#fff}
.section--ink a{color:#8FD9B4}
.center{text-align:center}
.lead{font-size:1.14rem; color:var(--muted); max-width:60ch}
.section--ink .lead{color:var(--on-ink-soft)}
.center .lead{margin-left:auto; margin-right:auto}

/* Eyebrow: sayfa başına 3 bölümde 1'den fazla kullanılmaz.
   Bölüm başlığı zaten bölümü tanımlıyor; etiket çoğu yerde gereksiz. */
.eyebrow{
  display:block; font-size:.8rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brand-ink); margin-bottom:12px;
}
.section--ink .eyebrow{color:#8FD9B4}

/* Bölüm başlığı: başlık + gövde dikey yığılır.
   "Solda dev başlık / sağda küçük açıklama" düzeni bilinçli olarak yok. */
.sec-head{max-width:52ch; margin-bottom:44px}
.sec-head.center{margin-left:auto; margin-right:auto}
.sec-head h2{margin-bottom:.35em}
.sec-head p{margin-bottom:0; color:var(--muted)}
.section--ink .sec-head p{color:var(--on-ink-soft)}

/* ---------- Butonlar ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px; border-radius:var(--r-sm); font-weight:700; font-size:1rem;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none!important;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
  line-height:1.2; text-align:center; white-space:nowrap; font-family:var(--font);
}
/* Basılma geri bildirimi: fiziksel his. Hover'da yükselme yok — bu ölçekte
   kart/buton zıplatmak ciddiyeti düşürüyor. */
.btn:active{transform:translateY(1px)}
.btn svg{width:20px; height:20px; flex:0 0 auto}

.btn--wa{background:var(--wa); color:#08321B; border-color:var(--wa)}
.btn--wa:hover{background:var(--wa-dark); border-color:var(--wa-dark); color:#04240F}
.btn--ink{background:var(--heading); color:var(--paper); border-color:var(--heading)}
.btn--ink:hover{background:var(--ink-3); border-color:var(--ink-3)}
.btn--brand{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn--brand:hover{background:var(--brand-dark); border-color:var(--brand-dark)}
.btn--ghost{background:transparent; border-color:var(--line-strong); color:var(--heading)}
.btn--ghost:hover{border-color:var(--heading); background:var(--hover-tint)}
/* Koyu zeminde ghost buton beyaza döner.
   DİKKAT: yeni bir koyu bölüm eklersen seçicisini buraya da ekle — aksi halde
   buton koyu üstünde koyu kalır ve okunmaz. */
.section--ink .btn--ghost,
.cta-band .btn--ghost,
.side-card .btn--ghost{border-color:rgba(255,255,255,.34); color:#fff}
.section--ink .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.side-card .btn--ghost:hover{background:rgba(255,255,255,.1); border-color:#fff; color:#fff}
.btn--lg{padding:17px 28px; font-size:1.05rem}
.btn--block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}
.center .btn-row{justify-content:center}

/* Metin bağlantısı: her CTA'nın buton olması gerekmiyor. */
.link-more{
  font-weight:700; color:var(--brand-ink); text-decoration:none;
  border-bottom:2px solid var(--brand-ink); padding-bottom:2px;
  transition:border-color .18s ease, color .18s ease;
}
.link-more:hover{color:var(--brand-dark); border-color:transparent; text-decoration:none}
.link-more::after{content:" \2192"}
.section--ink .link-more{color:#8FD9B4; border-color:#8FD9B4}

/* ---------- Üst bar + header ---------- */
.topbar{background:var(--ink); color:var(--on-ink-soft); font-size:.85rem}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:36px; flex-wrap:wrap}
.topbar a{color:#fff; font-weight:600; text-decoration:none}
.topbar a:hover{text-decoration:underline}
.topbar-item{display:inline-flex; align-items:center; gap:7px}
.topbar svg{width:15px; height:15px; opacity:.8}

/* Nav yüksekliği 68px: 80px sınırının altında, viewport'u yemiyor. */
.site-header{
  position:sticky; top:0; z-index:var(--z-header); background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; gap:20px; min-height:68px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none!important; margin-right:auto}
.brand__mark{
  width:40px; height:40px; border-radius:var(--r-sm); flex:0 0 auto;
  background:var(--heading); display:grid; place-items:center; color:var(--wa);
}
.brand__mark svg{width:22px; height:22px}
/* Gerçek monogram konduğunda kutu kalkar: logo kendi zeminini taşır,
   arkasına renkli kare koymak logoyu ikinci kez çerçevelemek olurdu. */
.brand__mark--img{background:none; border-radius:0; width:auto; height:40px}
.brand__mark--img img{height:40px; width:auto; object-fit:contain}
.brand__text{display:flex; flex-direction:column; line-height:1.12}
.brand__name{font-family:var(--font-display); font-weight:700; color:var(--heading); font-size:1.06rem; letter-spacing:-.035em}
.brand__sub{font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-weight:600}

.nav{display:flex; align-items:center; gap:2px}
.nav a{
  padding:8px 11px; border-radius:var(--r-sm); color:var(--heading); font-weight:600;
  font-size:.93rem; text-decoration:none!important; white-space:nowrap;
  transition:background .15s ease;
}
.nav a:hover{background:var(--sand)}
/* Bulunulan sayfa: alt çizgi ile işaretlenir, arka plan bloğu ile değil. */
.nav a[aria-current="page"]{color:var(--brand-ink); box-shadow:inset 0 -2px 0 var(--brand)}
.header-cta{display:flex; align-items:center; gap:10px}

.nav-toggle{
  display:none; width:44px; height:44px; border:1.5px solid var(--line-strong); background:transparent;
  border-radius:var(--r-sm); cursor:pointer; padding:0; place-items:center; color:var(--heading);
}
.nav-toggle svg{width:23px; height:23px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}

.has-sub{position:relative}
.has-sub > a::after{content:""; display:inline-block; width:6px; height:6px; margin-left:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg)}
.submenu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:266px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg);
  padding:8px; display:none; flex-direction:column; gap:1px;
}
.submenu a{font-weight:500; font-size:.92rem; padding:9px 12px}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{display:flex}

/* ---------- Hero ---------- */
/* Tam genişlik fotoğraf, üstüne sola oturan açık kart. Fotoğraf yoksa
   .hero--gorselsiz devreye girer ve kart düz zeminde durur; düzen bozulmaz. */
.hero{position:relative; background:var(--sand); overflow:hidden}
.hero__gorsel{position:absolute; inset:0; z-index:0; overflow:hidden}
/* Fotoğrafın konusu (aile) tam ortada; kart solu kapattığı için olduğu gibi
   bırakılırsa konu kartın arkasında kalıyor ve geriye boş kum kalıyor.
   Görsel hero'dan geniş render edilip sola sabitleniyor: konu böylece kartın
   sağındaki açık alana denk geliyor. */
.hero__gorsel img{
  /* max-width:none şart: global img{max-width:100%} kuralı olmadan
     width:132% uygulanmıyor ve görsel kaymıyor. */
  width:142%; max-width:none; height:100%; object-fit:cover; object-position:left 45%;
}
/* Fotoğrafın üstündeki kart beyaz; fotoğrafla kart arasında yumuşak bir geçiş
   olsun diye sol taraf hafifçe koyulaştırılıyor. Kartın kendi zemini opak
   olduğu için metin kontrastı fotoğraftan bağımsız, her karede okunur. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(26,26,28,.30) 0%, rgba(26,26,28,.10) 45%, transparent 70%);
}
.hero--gorselsiz{background:var(--sand); border-bottom:1px solid var(--line)}
.hero--gorselsiz::before{display:none}
.hero .wrap{position:relative; z-index:2}
.hero-kart{
  max-width:580px; background:var(--paper); border-radius:var(--r-lg);
  padding:44px 44px 40px; box-shadow:var(--shadow-lg);
  margin:88px 0 96px;
}
.hero--gorselsiz .hero-kart{
  box-shadow:none; background:transparent; padding:0; margin:76px 0 84px; max-width:660px;
}
/* Hero başlığı dar kolonda duruyor, bu yüzden genel h1 ölçeğinden küçük.
   Slogan sekiz kelime ve üç satıra sarıyor; sarmayı iki satıra indirmek
   ancak sloganı kesmekle mümkün olurdu, o yüzden ölçek metne uyduruldu. */
.hero h1{margin-bottom:20px; font-size:clamp(2.05rem,3.6vw,3.05rem); letter-spacing:-.035em}
.hero h1 em{font-style:normal; color:var(--brand)}

/* İmza öğesi: "satan" kelimesinin üstündeki eğik çizgi.
   Sayfanın akılda kalan tek görsel hamlesi bu; başka yere cesaret harcanmıyor.
   Statik — animasyon denendi ve kaldırıldı: görünmez bir kareden başlayan
   animasyon, kare üretmeyen ortamlarda (arka plan sekmesi, tarama araçları)
   o karede donup çizgiyi tamamen gizleyebiliyor. İmza öğesi bu riske atılmaz. */
.hero h1 .strike{position:relative; white-space:nowrap; color:var(--muted)}
.hero h1 .strike::after{
  content:""; position:absolute; left:-3%; right:-3%; top:52%; height:4px;
  background:var(--danger); border-radius:2px;
  transform-origin:left center; transform:rotate(-2.2deg);
}
.hero-lead{font-size:1.1rem; color:var(--muted); max-width:52ch; margin-bottom:26px}

/* Hero'da metin öğesi sayısı 4 ile sınırlı: başlık, gövde, CTA, imza şeridi.
   Rozet şeridi hero'dan çıkarıldı, altındaki güven bandına taşındı. */
.hero-agent{display:flex; align-items:center; gap:14px; margin-top:32px; padding-top:28px; border-top:1px solid var(--line)}
/* Kutu kare DEĞİL, fotoğrafın kendi oranında (4:5). Kare kutuda yüz kadrajı
   doldurduğu için alın ya da çene kesiliyordu; oran eşitlenince kırpma
   tamamen ortadan kalktı. Fotoğraf değişirse bu oranı da gözden geçir. */
.hero-agent img{
  width:56px; height:70px; border-radius:var(--r-sm); object-fit:cover;
  object-position:center; flex:0 0 auto;
}
.hero-agent__name{font-family:var(--font-display); font-weight:700; color:var(--heading); font-size:1.02rem; letter-spacing:-.025em}
.hero-agent__role{font-size:.88rem; color:var(--muted)}

/* ---------- Hero altı teklif şeridi ---------- */
/* Form hero'nun içinden çıkarılıp buraya alındı: hero'da fotoğrafa yer açıyor,
   form da katlanmanın hemen üstünde kalıp görünürlüğünü koruyor. */
.teklif-serit{
  background:var(--ink); color:var(--on-ink);
  padding:26px 0 24px; position:relative; z-index:3;
}
.teklif-serit__baslik{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.teklif-serit__baslik strong{
  font-family:var(--font-display); font-size:1.16rem; color:#fff; letter-spacing:-.02em;
}
.teklif-serit__baslik span{font-size:.92rem; color:var(--on-ink-soft)}
.yatay-alanlar{
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:14px; align-items:end;
}
.quote-form--yatay .field{margin-bottom:0}
.quote-form--yatay .field label{color:var(--on-ink); font-size:.84rem}
.quote-form--yatay .field input,
.quote-form--yatay .field select{
  background:var(--paper); border-color:transparent; color:var(--text);
}
.quote-form--yatay .field input:focus,
.quote-form--yatay .field select:focus{border-color:var(--wa); box-shadow:0 0 0 4px rgba(37,211,102,.25)}
.quote-form--yatay .btn{height:48px}
.check.check--yatay{
  /* Koyu şeritte --on-ink-soft ile kontrast 2.7'ye düşüyordu; onay metni
     hukuki bir bildirim, okunur olmak zorunda.
     Çift sınıf: .check kuralı bu blokdan sonra geldiği için eşit özgüllükte
     onu eziyordu. */
  color:var(--on-ink); font-size:.82rem; margin:14px 0 0; max-width:none;
}
.check.check--yatay a{color:#fff}

/* Hero altı güven bandı: rozetler burada, hero'nun içinde değil. */
.assure{border-bottom:1px solid var(--line); background:var(--sand)}
.assure__row{display:flex; flex-wrap:wrap; gap:10px 34px; padding:20px 0; justify-content:center}
.assure__item{display:inline-flex; align-items:center; gap:9px; font-size:.94rem; font-weight:600; color:var(--heading)}
.assure__item svg{width:18px; height:18px; color:var(--brand); flex:0 0 auto}

/* teklif kartı */
.quote-card{
  background:var(--paper); color:var(--text); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--shadow-lg); border:1px solid var(--line);
}
.quote-card h2{font-size:1.3rem; margin-bottom:4px}
.quote-card .muted{font-size:.92rem; color:var(--muted); margin-bottom:20px}

/* ---------- Form ---------- */
.field{margin-bottom:15px}
.field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; color:var(--heading)}
.field .req{color:var(--danger)}
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px; border:1.5px solid var(--line-strong); border-radius:var(--r-sm);
  font:inherit; font-size:.98rem; background:var(--paper); color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{min-height:110px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted); opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(27,107,74,.16);
}
.field .hint{font-size:.82rem; color:var(--muted); margin-top:5px}
.field--error input,.field--error select{border-color:var(--danger)}
.field .err{display:none; color:var(--danger); font-size:.83rem; font-weight:600; margin-top:5px}
.field--error .err{display:block}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--muted); margin:8px 0 18px}
.check input{width:19px; height:19px; margin-top:2px; flex:0 0 auto; accent-color:var(--brand)}
.form-note{font-size:.82rem; color:var(--muted); text-align:center; margin:12px 0 0; max-width:none}

/* ---------- Ürün ızgarası ---------- */
/* Eşit üçlü kart dizisi yerine asimetrik ızgara: baştaki birkaç ürün geniş
   hücrede, kalanlar dar hücrede. Kaç tanesinin geniş olacağını build.py'deki
   genis_kart_sayisi() hesaplıyor, boş hücre kalmıyor.
   Kartta ikon yok; ürün adı ana öğe. */
.p-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.p-card{
  grid-column:span 2; position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 24px 20px;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.p-card:hover{border-color:var(--brand); background:var(--brand-soft)}
.p-card--wide{grid-column:span 3}

.p-card__ad{margin:0 0 8px; font-size:1.24rem; letter-spacing:-.025em}
/* Bağlantı kartın tamamına yayılıyor: kartın her yeri tıklanabilir oluyor ama
   DOM'da tek bir bağlantı var, ekran okuyucu tek öğe görüyor. Teklif butonu
   bunun üstünde kaldığı için ayrı hedef olarak çalışıyor. */
.p-card__baglanti{color:var(--heading); text-decoration:none}
.p-card__baglanti::after{content:""; position:absolute; inset:0; z-index:1}
.p-card:hover .p-card__baglanti{color:var(--brand-ink)}
.p-card p{color:var(--muted); font-size:.94rem; margin-bottom:0}

.p-card__eylem{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:18px;
}
.p-card__more{font-weight:700; font-size:.9rem; color:var(--muted)}
.p-card__more::after{content:" →"}
.p-card:hover .p-card__more{color:var(--brand-ink)}
/* Teklif butonu kart bağlantısının üstünde (z-index) durmalı, yoksa kartın
   yayılmış bağlantısı tıklamayı yutar.
   Nötr çerçeveli: on bir kartta on bir yeşil buton sayfayı kampanya afişine
   çeviriyordu. WhatsApp yeşili artık yalnızca ana çağrılarda (hero, teklif
   şeridi, header, cta bandı, yüzen butonlar); kart içindeki ikincil eylem
   marka kırmızısıyla çerçeveli duruyor. */
.p-card__teklif{
  position:relative; z-index:2; flex:0 0 auto;
  font-weight:700; font-size:.88rem; color:var(--brand-ink);
  background:transparent; border:1.5px solid var(--line-strong);
  padding:6px 14px; border-radius:var(--r-sm); text-decoration:none;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.p-card__teklif:hover{
  border-color:var(--brand); background:var(--brand); color:#fff; text-decoration:none;
}
/* Kart hover'ında kartın zemini açık kırmızıya dönüyor; buton çerçevesi o
   zeminde kaybolmasın diye biraz koyulaşıyor. */
.p-card:hover .p-card__teklif{border-color:var(--brand)}

.tag{
  position:absolute; top:20px; right:20px; z-index:2; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; background:var(--heading); color:var(--paper);
  padding:4px 8px; border-radius:var(--r-sm);
}

/* İletişim kartlarındaki ikon. Ürün kartlarında ikon yok; burada bilgi
   türünü (telefon, e-posta, saat, konum) hızlı ayırt ettirdiği için duruyor. */
.kart-ikon{display:block; color:var(--brand); margin-bottom:14px; line-height:0}
.kart-ikon svg{width:26px; height:26px}

/* ---------- Genel ızgara (içerik sayfaları) ---------- */
.grid{display:grid; gap:20px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:26px;
}
.card :is(h2,h3){font-size:1.22rem; letter-spacing:-.02em; margin-bottom:8px}
.card p{color:var(--muted); font-size:.95rem; margin-bottom:0}

/* ---------- Adım adım ---------- */
/* Üç eşit kolon yerine numaralı dikey akış: adımlar sırayla okunuyor,
   aralarındaki çizgi süreci görselleştiriyor. */
.steps{counter-reset:step; display:grid; gap:0; max-width:760px}
.step{
  position:relative; counter-increment:step;
  padding:0 0 34px 66px; border-left:2px solid var(--line); margin-left:21px;
}
.step:last-child{border-left-color:transparent; padding-bottom:0}
.step::before{
  content:counter(step); position:absolute; left:-22px; top:-4px;
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:700; font-size:1.02rem;
  font-family:var(--font-display); border:4px solid var(--paper);
}
.section--sand .step::before{border-color:var(--sand)}
.section--ink .step{border-left-color:var(--ink-3)}
.section--ink .step::before{background:var(--wa); color:#08321B; border-color:var(--ink)}
.step h3{margin-bottom:6px}
.step p{color:var(--muted); font-size:.96rem; margin:0}
.section--ink .step p{color:var(--on-ink-soft)}

/* ---------- Liste işaretleri ---------- */
.ticks,.crosses{list-style:none; padding:0; margin:0 0 1em}
.ticks li,.crosses li{position:relative; padding-left:32px; margin-bottom:11px}
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em; width:20px; height:20px; border-radius:50%;
  background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.crosses li::before{
  content:""; position:absolute; left:0; top:.42em; width:20px; height:20px; border-radius:50%;
  background:var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- Bilgi kutusu ---------- */
.note{
  border-left:3px solid var(--brand); background:var(--brand-soft);
  padding:20px 22px; border-radius:0 var(--r) var(--r) 0; margin:28px 0;
}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--heading)}
/* _svg() ureticisi SVG'lere width/height ATTIRMIYOR; boyutu her zaman kullanan
   taraf veriyor. Bu kural eksikti ve uyari ikonu 13 sayfada kutuyu boydan boya
   dolduruyordu. Yeni bir yere ikon konursa ayni tuzak tekrar eder: ICON[...]
   kullanan her kabin kendi 'svg{width;height}' kurali olmali. */
.note svg{width:20px; height:20px; color:var(--brand); vertical-align:-4px; margin-right:4px}
.note--info{border-color:var(--ink-3); background:var(--sand)}

/* ---------- Aracılık edilen şirketler ---------- */
/* Logosu olan şirket logosuyla, olmayan adıyla çıkar. İki biçim aynı ızgarada
   yan yana durabildiği için logolar tek tek eklendikçe liste bozulmuyor. */
.sirket-grid{
  list-style:none; padding:0; margin:0 0 1em;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px;
}
.sirket{
  display:grid; place-items:center; min-height:72px; padding:14px 16px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
}
/* Marka logolarının çoğu beyaz zeminli raster dosya. Kutuyu da saf beyaz
   yapmak, logonun kendi zemininin kutu içinde açık renkli bir kare olarak
   belli olmasını engelliyor. Koyu temada da beyaz kalıyor: koyu zemine
   oturtulan beyaz zeminli logo zaten kare gibi görünürdü. */
.sirket:has(img){background:#fff; border-color:#E8E8E4}
/* max-width olmadan geniş bir logo kutudan taşabilir. */
.sirket img{max-height:40px; max-width:100%; width:auto; object-fit:contain}
.sirket--yazi{
  font-family:var(--font-display); font-weight:700; font-size:.98rem;
  letter-spacing:-.02em; color:var(--heading); text-align:center;
}

/* ---------- Güven rakamları ---------- */
/* Dört eşit kolonluk rakam şeridi yerine ince çizgiyle ayrılmış satırlar:
   rakamlar iddia gibi değil, bilgi gibi duruyor. */
.facts{display:grid; gap:0; border-top:1px solid var(--ink-3)}
.facts__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--ink-3);
}
.facts__num{
  font-family:var(--font-display); font-size:1.9rem; font-weight:700; color:var(--wa);
  line-height:1; letter-spacing:-.04em; flex:0 0 auto;
}
.facts__label{font-size:.96rem; color:var(--on-ink-soft); text-align:right}

/* ---------- Sayfa başlığı ---------- */
.page-head{background:var(--sand); border-bottom:1px solid var(--line); padding:52px 0 56px}
.page-head h1{margin-bottom:12px; max-width:20ch}
.page-head p{color:var(--muted); max-width:62ch; font-size:1.08rem; margin:0}
.crumbs{font-size:.86rem; color:var(--muted); margin-bottom:16px}
.crumbs a{color:var(--muted); font-weight:600; text-decoration:none}
.crumbs a:hover{color:var(--brand-ink); text-decoration:underline}
.crumbs span{opacity:.45; margin:0 7px}

/* ---------- İçerik düzeni ---------- */
.layout{display:grid; grid-template-columns:1fr 340px; gap:60px; align-items:start}
/* Hakkımızda portresi. Sabit oran veriliyor ki hangi orandaki fotoğraf
   konursa konsun sayfa düzeni bozulmasın ve yükleme sırasında zıplama olmasın. */
.about-portrait{
  width:100%; max-width:420px; aspect-ratio:4/5; object-fit:cover;
  object-position:center 15%; border-radius:var(--r-lg); margin-bottom:28px;
}
/* Hasar rehberinin ust blogu: gorsel ve uyari notu TEK kutu.
   Sabit en-boy orani veriliyor ki fotograf degistirilse bile duzen bozulmasin
   ve yuklenirken asagidaki metin ziplamasin. Kose yuvarlamayi cerceve yapiyor,
   gorseli overflow:hidden kirpiyor; boylece iki parca gercekten birlesik
   gorunuyor. */
.rehber-ust{
  /* Genislik asagidaki adim kartlariyla AYNI (860px). Once icerik sutunundan
     genisti, o yuzden fotograf sayfayi eziyordu. */
  max-width:860px; margin:0 0 36px; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line);
}
.rehber-ust__gorsel{
  width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 40%;
  display:block;
}
/* Gorsel ile kural bloku arasinda AYRAC YOK: kirmizi serit kaldirildi,
   ikisini zemin farki ayiriyor. */
.rehber-ust__kural{background:var(--brand-soft); padding:22px 26px}
.rehber-ust__baslik{
  margin:0 0 12px; font-weight:700; color:var(--heading); font-size:1.02rem;
}
.rehber-ust__baslik svg{
  width:19px; height:19px; color:var(--brand); vertical-align:-4px; margin-right:5px;
}
.rehber-ust__liste{margin:0 0 14px; padding-left:1.3em}
.rehber-ust__liste li{margin-bottom:5px}
.rehber-ust__liste li:last-child{margin-bottom:0}
.rehber-ust__son{margin:0; font-size:.95rem}
@media (max-width:640px){
  .rehber-ust__gorsel{aspect-ratio:3/2; object-position:30% 40%}
  .rehber-ust__kural{padding:20px 20px}
}

.prose h2{margin-top:2.3em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.9em}
.sidebar{position:sticky; top:88px; display:flex; flex-direction:column; gap:20px}
.side-card{background:var(--ink); color:var(--on-ink); border-radius:var(--r-lg); padding:26px}
.side-card h3{color:#fff; font-size:1.15rem}
.side-card p{font-size:.94rem; color:var(--on-ink-soft)}
.side-list{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px}
.side-list h3{font-size:1rem; margin-bottom:12px}
.side-list ul{list-style:none; padding:0; margin:0}
.side-list li{margin-bottom:1px}
.side-list a{display:block; padding:7px 10px; border-radius:var(--r-sm); font-size:.92rem; font-weight:500; color:var(--heading); text-decoration:none!important}
.side-list a:hover{background:var(--sand)}
.side-list a[aria-current="page"]{color:var(--brand-ink); font-weight:700; background:var(--brand-soft)}

/* ---------- SSS ---------- */
/* details/summary korundu: klavye ve ekran okuyucu desteği yerleşik, mobilde
   uzun listeyi kısaltıyor ve FAQPage şemasıyla birebir eşleşiyor. Kart
   görünümü bırakıldı, yerine ince ayraç geldi. */
.faq-wrap{max-width:820px; margin:0 auto}
.faq{max-width:820px; border-top:1px solid var(--line)}
.faq.center{margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:20px 48px 20px 0; font-weight:700; color:var(--heading);
  list-style:none; position:relative; font-size:1.04rem;
  font-family:var(--font-display); letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand-ink)}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .faq__body{padding:0 48px 22px 0; color:var(--muted)}
.faq .faq__body p:last-child{margin-bottom:0}

/* ---------- CTA şeridi ---------- */
.cta-band{background:var(--ink); color:var(--on-ink); border-radius:var(--r-lg); padding:52px 44px; text-align:center}
.cta-band h2{color:#fff; margin-bottom:12px}
.cta-band p{color:var(--on-ink-soft); max-width:54ch; margin:0 auto 26px}

/* ---------- Footer ---------- */
/* Dört kolonluk link çiftliği yerine iki kolon: solda marka ve iletişim,
   sağda gezinme. Ürün listesi tekrarı kaldırıldı (menüde zaten var). */
.site-footer{background:var(--ink); color:var(--on-ink-soft); padding:64px 0 0; font-size:.94rem}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; padding-bottom:44px}
.site-footer :is(h2,h4){color:#fff; font-size:.95rem; margin-bottom:14px; font-weight:700; letter-spacing:.02em}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin-bottom:9px}
.site-footer a{color:var(--on-ink); text-decoration:none}
.site-footer a:hover{color:#fff; text-decoration:underline}
.site-footer p{color:var(--on-ink-soft)}
/* Footer logosu: koyu zeminde duruyor. Logo beyaz zeminli bir raster dosya
   ise (png/jpg) altında beyaz bir kutu görünür; o durumda logonun şeffaf
   zeminli sürümünü koy ya da bu kuralı kaldır. */
.footer-logo{max-width:210px; width:100%; height:auto; margin-bottom:14px}
.footer-brand .brand__name{color:#fff}
.footer-brand .brand__sub{color:var(--on-ink-soft)}
.footer-brand p{margin-top:14px; max-width:36ch; font-size:.92rem}
.footer-bottom{
  border-top:1px solid var(--ink-3); padding:22px 0 28px; font-size:.84rem;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--on-ink-soft);
}
.legal-note{
  border-top:1px solid var(--ink-3); padding:22px 0 0;
  font-size:.82rem; color:var(--on-ink-soft); margin-bottom:24px; line-height:1.6; max-width:none;
}

/* ---------- Yüzen aksiyonlar ---------- */
.fab{position:fixed; right:18px; bottom:18px; z-index:var(--z-fab); display:flex; flex-direction:column; gap:10px}
.fab a{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  box-shadow:var(--shadow); text-decoration:none!important; transition:transform .15s ease;
}
.fab a:active{transform:scale(.95)}
.fab svg{width:28px; height:28px}
.fab__wa{background:var(--wa); color:#08321B}
.fab__tel{background:var(--heading); color:var(--paper); display:none}

/* ---------- Yardımcılar ---------- */
.skip{position:absolute; left:-9999px; top:0; background:var(--paper); color:var(--heading); padding:12px 18px; z-index:var(--z-skip); border-radius:0 0 var(--r-sm) 0; font-weight:700}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}

/* ---------- Kaydırınca beliren bloklar ----------
   Gizleme YALNIZCA .js-reveal altında geçerli; bu sınıfı main.js ekliyor.
   Betik çalışmazsa, hareket azaltma tercihi varsa ya da IntersectionObserver
   desteklenmiyorsa sınıf hiç eklenmez ve içerik baştan görünür kalır.
   Ayrıca main.js'te 2 saniyelik zaman aşımı güvencesi var. */
.js-reveal .reveal{opacity:0; transform:translateY(18px)}
.js-reveal .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
/* Sıralı bloklar hafif gecikmeyle gelsin: aynı anda hepsi zıplamasın. */
.js-reveal .reveal--g1.is-in{transition-delay:.06s}
.js-reveal .reveal--g2.is-in{transition-delay:.12s}
.js-reveal .reveal--g3.is-in{transition-delay:.18s}

/* ---------- Hareket ----------
   Giriş animasyonu bilinçli olarak YOK. Denendi ve kaldırıldı: içeriği
   opacity:0 ile başlatıp IntersectionObserver ile açan her kurgu, kare
   üretmeyen ortamlarda (arka plan sekmesi, tarama botu, otomasyon, düşük
   güçte cihaz) o karede donup içeriği kalıcı olarak gizliyor. Test
   sırasında bölüm başlıkları ve güven rakamları tam olarak böyle kayboldu.
   Sitenin işi teklif toplamak; okunurluğu süse feda etmiyoruz.
   Kalan hareket yalnızca kullanıcı eylemine cevap veriyor: hover, :active
   basılma geri bildirimi, focus halkası, SSS açılımı. */

/* ---------- Duyarlı ---------- */
@media (max-width:1024px){
  .hero-kart{margin:64px 0 72px; padding:36px 32px 32px}
  .yatay-alanlar{grid-template-columns:1fr 1fr; }
  .yatay-alanlar .btn{grid-column:1 / -1}
  .layout{grid-template-columns:1fr; gap:40px}
  .sidebar{position:static; flex-direction:row; flex-wrap:wrap}
  .sidebar > *{flex:1 1 280px}
  .p-grid{grid-template-columns:repeat(4,1fr)}
  .p-card--wide{grid-column:span 2}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width:860px){
  body{font-size:16px}
  .nav-toggle{display:grid}
  .site-header .wrap{position:relative}
  .nav{
    position:absolute; top:100%; left:0; right:0; background:var(--paper); flex-direction:column;
    align-items:stretch; padding:12px; gap:1px; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow); display:none; max-height:calc(100dvh - 68px); overflow-y:auto;
  }
  .nav.is-open{display:flex}
  .nav a{padding:13px 14px; font-size:1rem}
  .nav a[aria-current="page"]{box-shadow:inset 2px 0 0 var(--brand)}
  .has-sub > a::after{float:right; margin-top:8px}
  .submenu{position:static; display:flex; box-shadow:none; border:0; border-left:2px solid var(--line);
    border-radius:0; margin:2px 0 6px 14px; padding:0 0 0 6px; min-width:0}
  .header-cta .btn span{display:none}
  .header-cta .btn{padding:12px 14px}
  .section{padding:64px 0 70px}
  .hero-kart{margin:40px 0 48px; padding:28px 24px 26px; max-width:none}
  .hero::before{background:linear-gradient(180deg, rgba(26,26,28,.28), rgba(26,26,28,.12))}
  .yatay-alanlar{grid-template-columns:1fr; gap:12px}
  .yatay-alanlar .btn{grid-column:auto; width:100%}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .cta-band{padding:36px 24px}
  .topbar-item--hide{display:none}
  .fab__tel{display:grid}
  .assure__row{gap:12px 24px; justify-content:flex-start}
}
@media (max-width:640px){
  .p-grid{grid-template-columns:1fr}
  .p-card,.p-card--wide{grid-column:span 1}
  .grid--4{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr; gap:28px}
  .btn-row .btn{width:100%}
  .quote-card{padding:22px}
  .step{padding-left:56px}
  .facts__row{flex-direction:column; align-items:flex-start; gap:2px}
  .facts__label{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  /* '*' tek başına pseudo-elementleri kapsamaz; ::before/::after ayrıca yazılmalı. */
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto!important}
  .js-reveal .reveal{opacity:1; transform:none}
}
@media print{
  .site-header,.topbar,.fab,.site-footer,.cta-band,.assure{display:none}
  body::after{display:none}
}