/* ==========================================================================
   LivaM Sigorta — tasarım sistemi
   Tek stil dosyası. Sıra: token → reset → tipografi → düzen → bileşen → hareket
   ========================================================================== */

/* --- Yazı karakterleri (self-host, değişken ağırlık) ---------------------
   Tek aile: Archivo — keskin grotesk, kurumsal; hiyerarşi ağırlıkla kurulur.
   latin + latin-ext olarak ayrılmıştır; Türkçe glifler (ı ç ö ü) latin
   alt kümesinde, (ğ ş İ Ğ Ş) latin-ext alt kümesinde yer alır — tarayıcı
   unicode-range'e bakıp ikisini de yükler. Toplam 140 KB.               */
@font-face {
  font-family: 'LivaM Sans';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../font/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'LivaM Sans';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../font/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   LivaM Sigorta — tasarım sistemi
   Tek stil dosyası. Sıra: token → reset → tipografi → düzen → bileşen → hareket
   ========================================================================== */

/* --- Yazı karakteri: Schibsted Grotesk (self-host, değişken ağırlık) ------ */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../font/schibsted-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../font/schibsted-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ========================================================================== */
/* 1. Token                                                                   */
/* ========================================================================== */
:root {
  /* Renk — marka lacivert oklch(.337 .073 267), turuncu oklch(.755 .178 60) */
  --kagit:        oklch(0.978 0.004 267);   /* gövde zemini, laciverte kırık */
  --beyaz:        oklch(1 0 0);
  --yuzey:        oklch(0.950 0.007 267);   /* ikinci düzey zemin */
  --cizgi:        oklch(0.891 0.010 267);   /* dekoratif ayraç */
  --cizgi-guclu:  oklch(0.620 0.030 267);   /* form kenarı — beyaz üstünde 3.6:1 (WCAG 1.4.11) */

  --murekkep:     oklch(0.253 0.049 267);   /* başlık — 14.4:1 */
  --govde:        oklch(0.399 0.049 267);   /* gövde metni — 8.5:1 */
  --sessiz:       oklch(0.530 0.043 267);   /* ikincil metin — 5.3:1 */

  --lacivert:     oklch(0.337 0.073 267);   /* marka */
  --lacivert-acik:oklch(0.420 0.078 267);
  --derin:        oklch(0.208 0.043 267);   /* koyu bölüm zemini */
  --gece:         oklch(0.163 0.036 267);   /* en koyu — footer, hero */

  /* TEK marka turuncusu. Logodan ölçülen #FF8F00'ın birebir karşılığı —
     tarayıcıda piksel piksel doğrulandı. Türetilmiş açık/koyu varyant YOK:
     sitede görünen her turuncu bu tondur. Renk kayması böyle engellenir. */
  --turuncu:      oklch(0.755 0.178 60);    /* = #FF8F00 */

  /* Koyu zemin üstü metin */
  --koyu-govde:   oklch(0.810 0.024 267);
  --koyu-sessiz:  oklch(0.680 0.030 267);
  --koyu-cizgi:   color-mix(in oklab, var(--beyaz) 14%, transparent);

  --olumlu:       oklch(0.560 0.120 155);
  --olumsuz:      oklch(0.560 0.155 25);

  /* Tipografi */
  --yazi:   'LivaM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --baslik: 'LivaM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --fs-hero: clamp(2.25rem, 1.05rem + 5.6vw, 5.25rem);
  --fs-3xl:  clamp(2.1rem, 1.25rem + 3.6vw, 3.75rem);
  --fs-2xl:  clamp(1.65rem, 1.22rem + 1.8vw, 2.5rem);
  --fs-xl:   clamp(1.3rem, 1.14rem + 0.7vw, 1.6rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.34vw, 1.3125rem);
  --fs-md:   1.0625rem;
  --fs-sm:   0.9375rem;
  --fs-xs:   0.8125rem;

  --lh-sik:   1.06;
  --lh-orta:  1.28;
  --lh-genis: 1.62;

  /* Boşluk */
  --bo-1: 0.25rem;  --bo-2: 0.5rem;   --bo-3: 0.75rem;  --bo-4: 1rem;
  --bo-5: 1.5rem;   --bo-6: 2rem;     --bo-7: 3rem;     --bo-8: 4rem;
  --bo-9: 6rem;     --bo-10: 8rem;
  --bolum:  clamp(4.5rem, 2.5rem + 7vw, 9rem);   /* dikey bölüm nefesi */
  --bolum-sik: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Düzen */
  --kap:     78rem;      /* 1248px */
  --kap-dar: 62rem;
  --kap-yazi: 68ch;
  --kenar:   clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

  /* Köşe */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-tam: 999px;

  /* Gölge — çok kısıtlı */
  --g-1: 0 1px 2px oklch(0.253 0.049 267 / 0.05);
  --g-2: 0 2px 6px oklch(0.253 0.049 267 / 0.06), 0 12px 28px oklch(0.253 0.049 267 / 0.07);
  --g-3: 0 4px 12px oklch(0.253 0.049 267 / 0.09), 0 24px 56px oklch(0.253 0.049 267 / 0.11);

  /* Hareket */
  --e-cikis:  cubic-bezier(0.22, 1, 0.36, 1);      /* ease-out-quint */
  --e-guclu:  cubic-bezier(0.16, 1, 0.3, 1);       /* ease-out-expo */
  --e-yumusak:cubic-bezier(0.4, 0, 0.2, 1);
  --s-hizli: 160ms; --s-orta: 300ms; --s-yavas: 620ms;

  /* Katman */
  --z-alt: -1; --z-taban: 1; --z-yapisik: 100; --z-baslik: 200;
  --z-cekmece: 300; --z-ortu: 400; --z-kalici: 500;

  color-scheme: light;
}

/* ========================================================================== */
/* 2. Reset & taban                                                           */
/* ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--yazi);
  font-size: var(--fs-md);
  line-height: var(--lh-genis);
  font-weight: 400;
  color: var(--govde);
  background: var(--kagit);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

/* Odak halkası. Açık zeminde turuncu tek başına 2.18:1 kalıyordu (WCAG 1.4.11
   sınırı 3:1). Çözüm: koyu çekirdek + turuncu hâle — marka rengi kayboluyor
   değil, taşıyıcı hâline geliyor. Koyu zeminlerde ikisi yer değiştirir. */
:focus-visible {
  outline: 3px solid var(--gece);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--turuncu) 65%, transparent);
  border-radius: var(--r-xs);
}
.koyu :focus-visible, .hero :focus-visible, .sayfa-bas :focus-visible,
.cta-bant :focus-visible, .altbilgi :focus-visible {
  outline-color: var(--turuncu);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--gece) 75%, transparent);
}
.cekmece :focus-visible, .acilir-panel :focus-visible {
  outline-color: var(--gece);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--turuncu) 65%, transparent);
}

::selection { background: var(--turuncu); color: var(--gece); }

.atla {
  position: absolute; left: var(--kenar); top: -100px;
  z-index: var(--z-kalici);
  background: var(--gece); color: var(--beyaz);
  padding: var(--bo-3) var(--bo-5); border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
  transition: top var(--s-hizli) var(--e-cikis);
}
.atla:focus { top: var(--bo-4); }

.gorsel-gizli {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ========================================================================== */
/* 3. Tipografi                                                               */
/* ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--baslik);
  color: var(--murekkep);
  font-weight: 700;
  line-height: var(--lh-orta);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.028em; font-weight: 700; }
h3 { font-size: var(--fs-xl); letter-spacing: -0.02em; font-weight: 600; }
h4 { font-size: var(--fs-lg); letter-spacing: -0.015em; font-weight: 600; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--lacivert); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--murekkep); }
/* :not(.btn) şart — aksi hâlde bu kural butonların kendi yazı rengini ezer
   ve turuncu dolgulu CTA'da yazı görünmez olur. */
.koyu a:not(.btn) { color: var(--turuncu); }

strong, b { font-weight: 650; color: var(--murekkep); }
/* Koyu zemin kuralları TEK bir sınıfa bağlıdır: .koyu
   hero, sayfa başlığı, CTA bandı ve altbilgi bu sınıfı taşır (uret.py).
   Yeni bir koyu bölüm eklerken class="koyu" vermek yeterli — buraya
   selektör eklemek gerekmez. */
.koyu strong, .koyu b { color: var(--beyaz); }

.dev {
  font-family: var(--baslik);
  text-wrap: balance;
  font-size: var(--fs-hero);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.giris {                       /* lead paragrafı */
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--sessiz);
  max-width: 46ch;
  text-wrap: pretty;
}
.koyu .giris { color: var(--koyu-govde); }

.yazi { max-width: var(--kap-yazi); }
.yazi h2 { margin-top: 2.2em; margin-bottom: 0.6em; }
.yazi h3 { margin-top: 1.8em; margin-bottom: 0.5em; }
.yazi p, .yazi ul, .yazi ol { margin-bottom: 1.1em; }
.yazi ul li, .yazi ol li {
  position: relative; padding-left: 1.6em; margin-bottom: 0.5em;
}
.yazi ul li::before {
  content: ''; position: absolute; left: 0.25em; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--turuncu);
}
.yazi ol { counter-reset: n; }
.yazi ol li { counter-increment: n; }
.yazi ol li::before {
  content: counter(n) '.'; position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--murekkep); font-variant-numeric: tabular-nums;
}

/* Rakamlar hizalı: fiyat, tarih, teminat tutarı */
.sayi { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ========================================================================== */
/* 4. Düzen kabukları                                                         */
/* ========================================================================== */
.kap {
  width: 100%; max-width: var(--kap);
  margin-inline: auto; padding-inline: var(--kenar);
}
.kap-dar { max-width: var(--kap-dar); }

.bolum { padding-block: var(--bolum); position: relative; }
.bolum-sik { padding-block: var(--bolum-sik); }

.koyu { background: var(--derin); color: var(--koyu-govde); }
.koyu h1, .koyu h2, .koyu h3, .koyu h4 { color: var(--beyaz); }
.gece-zemin { background: var(--gece); }
.yuzey-zemin { background: var(--yuzey); }
.beyaz-zemin { background: var(--beyaz); }

/* Koyu zeminde ışık, daha çok satır aralığı ister */
.koyu p, .koyu li { line-height: 1.68; }

.izgara { display: grid; gap: var(--bo-6); }
.oto-izgara { display: grid; gap: var(--bo-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }

/* İki kolonlu içerik + yan sütun */
@media (min-width: 60rem) {
  .ozet-izgara { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.ozet-izgara > figure img { border-radius: inherit; }

/* Fotoğraflar farklı kaynaklardan geliyor; hafif ve TEK bir tonlama hepsini
   aynı aileden gösterir. Kartlardaki .oc-kart img de benzer değeri kullanır. */
.ozet-izgara > figure img { filter: saturate(0.86) contrast(1.03); }

/* Kısaca kartı + yanındaki sinematik görsel şeridi: eşit yükseklik */
.ozet-serit { align-items: stretch; }
.ozet-serit > .blok { display: flex; flex-direction: column; justify-content: center; }
.ozet-serit > figure { min-height: 14rem; }
.ozet-serit > figure img { width: 100%; height: 100%; object-fit: cover; }

/* Bölüm başlığı: iki kolonlu, asimetrik */
.bolum-bas {
  display: grid; gap: var(--bo-5) var(--bo-8); align-items: end;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
@media (min-width: 56rem) {
  .bolum-bas { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .bolum-bas > :last-child:not(:only-child) { padding-bottom: 0.35em; }
}
.bolum-bas h2 { max-width: 21ch; }

/* ========================================================================== */
/* 5. Marka işareti — Manhattan elması                                        */
/* ========================================================================== */
/* Not: burada `circle { fill }` gibi genel bir kural YOK — ikonların kendi
   fill/stroke değerlerini ezmemesi için. Elmas işareti fill'i kökten alır. */
.isaret { width: 1em; height: 1em; flex: none; }

/* Statik nokta dokusu — CSS ile, JS gerekmez */
.nokta-doku {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.5px);
  background-size: 26px 26px;
  opacity: 0.14;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, #000 25%, transparent 78%);
}

/* ========================================================================== */
/* 6. Butonlar                                                                */
/* ========================================================================== */
.btn {
  --btn-zemin: var(--lacivert);
  --btn-yazi: var(--beyaz);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  min-height: 3rem;
  border-radius: var(--r-tam);
  background: var(--btn-zemin);
  color: var(--btn-yazi);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.008em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--s-hizli) var(--e-yumusak),
              transform var(--s-hizli) var(--e-cikis),
              box-shadow var(--s-orta) var(--e-cikis),
              color var(--s-hizli) var(--e-yumusak),
              border-color var(--s-hizli) var(--e-yumusak);
}
.btn:hover { color: var(--btn-yazi); transform: translateY(-1px); box-shadow: var(--g-2); }
.btn:active { transform: translateY(0); box-shadow: var(--g-1); }

/* Turuncu dolgu ASLA beyaz yazı taşımaz (2.29:1). Koyu lacivert yazı → 7.5:1 */
.btn-vurgu { --btn-zemin: var(--turuncu); --btn-yazi: var(--gece); font-weight: 700; }
/* CTA daima tam #FF8F00 kalsın diye hover renk değiştirmez, hafifçe parlar */
.btn-vurgu:hover { filter: brightness(1.05); }

.btn-lacivert:hover { --btn-zemin: var(--lacivert-acik); }

.btn-ana { --btn-zemin: var(--gece); --btn-yazi: var(--beyaz); }
.btn-ana:hover { --btn-zemin: var(--lacivert); }

.btn-cizgi {
  --btn-zemin: transparent; --btn-yazi: var(--murekkep);
  border-color: var(--cizgi-guclu);
}
.btn-cizgi:hover { --btn-zemin: var(--beyaz); border-color: var(--murekkep); box-shadow: var(--g-2); }

.koyu .btn-cizgi, .btn-cizgi-koyu {
  --btn-yazi: var(--beyaz); border-color: color-mix(in oklab, var(--beyaz) 30%, transparent);
}
.koyu .btn-cizgi:hover, .btn-cizgi-koyu:hover {
  --btn-zemin: color-mix(in oklab, var(--beyaz) 12%, transparent);
  border-color: color-mix(in oklab, var(--beyaz) 55%, transparent);
}

.btn-buyuk { padding: 1.05em 2em; min-height: 3.5rem; font-size: var(--fs-md); }
.btn-tam { width: 100%; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn-grup { display: flex; flex-wrap: wrap; gap: var(--bo-3); }

/* Metin bağlantısı — ok ile */
.baglanti-ok {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 600; text-decoration: none; color: var(--lacivert);
}
.baglanti-ok::after {
  content: '→'; transition: transform var(--s-orta) var(--e-cikis);
}
.baglanti-ok:hover { color: var(--murekkep); }
.baglanti-ok:hover::after { transform: translateX(4px); }
.koyu .baglanti-ok { color: var(--turuncu); }

/* ========================================================================== */
/* 7. Başlık / gezinme                                                        */
/* ========================================================================== */
.baslik {
  position: sticky; top: 0; z-index: var(--z-baslik);
  transition: background var(--s-orta) var(--e-yumusak),
              box-shadow var(--s-orta) var(--e-yumusak),
              border-color var(--s-orta) var(--e-yumusak);
  border-bottom: 1px solid transparent;
}
.baslik-ic {
  display: flex; align-items: center; gap: var(--bo-5);
  min-height: 4.75rem;
}
.baslik.kaydi {
  background: color-mix(in oklab, var(--kagit) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--cizgi);
}
/* Koyu hero üstünde şeffaf başlık */
.baslik-koyu:not(.kaydi) { color: var(--beyaz); }
.baslik-koyu.kaydi {
  background: color-mix(in oklab, var(--gece) 82%, transparent);
  border-bottom-color: var(--koyu-cizgi);
}
.baslik-koyu { color: var(--beyaz); }

.logo { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
.logo img { height: 30px; width: auto; }
@media (min-width: 48rem) { .logo img { height: 34px; } }

.gez { display: none; }
@media (min-width: 62rem) {
  .gez { display: flex; align-items: center; gap: var(--bo-1); }
}
.gez-bag {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-tam);
  font-size: var(--fs-sm); font-weight: 550;
  color: inherit; text-decoration: none;
  opacity: 0.86;
  transition: opacity var(--s-hizli) var(--e-yumusak), background var(--s-hizli) var(--e-yumusak);
}
.gez-bag:hover { opacity: 1; color: inherit; background: color-mix(in oklab, currentColor 8%, transparent); }
.gez-bag[aria-current] { opacity: 1; font-weight: 650; }

/* Hizmetler açılır menüsü */
.acilir { position: relative; }
.acilir-dugme::after {
  content: ''; width: 0.42em; height: 0.42em; margin-left: 0.15em;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  transition: transform var(--s-orta) var(--e-cikis);
}
.acilir[data-acik] .acilir-dugme::after { transform: rotate(-135deg) translateY(-0.1em); }

.acilir-panel {
  position: absolute; top: calc(100% + 0.6rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: var(--z-cekmece);
  width: min(46rem, calc(100vw - 2 * var(--kenar)));
  padding: var(--bo-4);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  box-shadow: var(--g-3);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--s-orta) var(--e-cikis),
              transform var(--s-orta) var(--e-cikis),
              visibility var(--s-orta);
}
.acilir[data-acik] .acilir-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.acilir-ogesi {
  display: flex; align-items: flex-start; gap: var(--bo-3);
  padding: 0.7rem 0.85rem; border-radius: var(--r-md);
  text-decoration: none; color: var(--murekkep);
  transition: background var(--s-hizli) var(--e-yumusak);
}
.acilir-ogesi:hover { background: var(--yuzey); color: var(--murekkep); }
.acilir-ogesi .isaret { color: var(--turuncu); margin-top: 0.28em; font-size: 0.85rem; opacity: 0.55; transition: opacity var(--s-hizli); }
.acilir-ogesi:hover .isaret { opacity: 1; }
.acilir-ogesi b { display: block; font-size: var(--fs-sm); font-weight: 650; line-height: 1.35; }
.acilir-ogesi span { display: block; font-size: var(--fs-xs); color: var(--sessiz); line-height: 1.45; }

/* Mobil menü düğmesi */
.menu-dugme {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-tam);
  align-items: center; margin-right: -0.5rem;
}
@media (min-width: 62rem) { .menu-dugme { display: none; } }
.menu-dugme span {
  display: block; width: 19px; height: 1.8px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--s-orta) var(--e-cikis), opacity var(--s-hizli) var(--e-yumusak);
}
body[data-menu] .menu-dugme span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
body[data-menu] .menu-dugme span:nth-child(2) { opacity: 0; }
body[data-menu] .menu-dugme span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* Mobil çekmece */
.cekmece {
  position: fixed; inset: 4.75rem 0 0; z-index: var(--z-cekmece);
  background: var(--kagit);
  padding: var(--bo-5) var(--kenar) var(--bo-8);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--s-orta) var(--e-cikis),
              transform var(--s-orta) var(--e-cikis),
              visibility var(--s-orta);
}
body[data-menu] .cekmece { opacity: 1; visibility: visible; transform: none; }
body[data-menu] { overflow: hidden; }
@media (min-width: 62rem) { .cekmece { display: none; } }

.cekmece-bag {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--cizgi);
  font-size: var(--fs-lg); font-weight: 600;
  color: var(--murekkep); text-decoration: none;
}
.cekmece-bag .isaret { color: var(--turuncu); font-size: 0.7rem; }
.cekmece-baslik {
  font-size: var(--fs-xs); font-weight: 700; color: var(--sessiz);
  padding-top: var(--bo-6); padding-bottom: var(--bo-2);
}
.cekmece .btn-grup { margin-top: var(--bo-6); }

/* ========================================================================== */
/* 8. Hero                                                                    */
/* ========================================================================== */
/* Açık hero. Marka lacivertine kırık bir aydınlık yüzey; görsel ilgiyi
   turuncu nokta alanı taşır. Koyu zemin (--gece) yalnızca alt bilgide ve
   sayfa ortasındaki "Nasıl çalışıyoruz" bloğunda kaldı — sayfanın ritmi
   açıkta başlayıp koyuda demirliyor. */
.hero {
  position: relative;
  background: linear-gradient(176deg,
    var(--beyaz) 0%,
    oklch(0.962 0.010 267) 55%,
    oklch(0.940 0.016 267) 100%);
  color: var(--govde);
  margin-top: -4.75rem;      /* yapışkan başlığın altına akar */
  padding-top: calc(4.75rem + clamp(3.5rem, 2rem + 6vw, 7rem));
  padding-bottom: clamp(3.5rem, 2rem + 6vw, 7rem);
  overflow: clip;
  isolation: isolate;
  border-bottom: 1px solid var(--cizgi);
}
.hero-tuval {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  /* Metin dar ekranda tam genişlik kaplar; nokta alanı okumayı zorlaştırmasın */
  opacity: 0.55;
}
@media (min-width: 62rem) {
  /* Geniş ekranda metin solda, alan sağda yaşasın: soldan sağa açılan maske */
  .hero-tuval {
    opacity: 1;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.7) 46%, #000 62%);
            mask-image: linear-gradient(to right,
      transparent 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.7) 46%, #000 62%);
  }
}
.hero-ic { position: relative; z-index: 1; }
/* 20ch: "Sigortada net cevap," tek satıra sığsın; dar tutulursa zorunlu
   satır sonuyla birlikte dört satıra bölünüp öksüz kelime bırakıyor. */
.hero h1 { color: var(--murekkep); max-width: 20ch; }
.hero .giris { margin-top: var(--bo-5); max-width: 42ch; color: var(--govde); }
.hero .btn-grup { margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }

.hero-rozet {
  display: inline-flex; align-items: center; gap: 0.55em;
  white-space: nowrap;   /* iki satıra kırılınca nokta işareti tek başına kalıyordu */
  padding: 0.45rem 0.9rem 0.45rem 0.55rem;
  border-radius: var(--r-tam);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  box-shadow: var(--g-1);
  font-size: var(--fs-xs); font-weight: 550;
  color: var(--murekkep);
  margin-bottom: var(--bo-5);
}
.hero-rozet .isaret { color: var(--turuncu); font-size: 1.05rem; }

/* Dar ekranda zorunlu satır sonu, "cevap," gibi tek kelimeyi satırda yalnız
   bırakıyordu. 34rem altında kaldırılıp metnin doğal akmasına izin veriliyor. */
.dev br { display: none; }
@media (min-width: 34rem) { .dev br { display: inline; } }

/* Hero altı güven şeridi */
.guven-serit {
  display: flex; flex-wrap: wrap; gap: var(--bo-4) var(--bo-7);
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-top: var(--bo-6);
  border-top: 1px solid var(--cizgi);
}
.guven-oge { display: flex; align-items: flex-start; gap: var(--bo-3); max-width: 22rem; }
.guven-oge .isaret { color: var(--turuncu); font-size: 1.1rem; margin-top: 0.25em; }
.guven-oge b { display: block; color: var(--murekkep); font-size: var(--fs-sm); font-weight: 650; }
/* --sessiz burada 4.45:1'de kalıyor: şerit hero degradesinin en koyu ucunda
   duruyor. --govde ile 7.8:1; hiyerarşi ağırlık farkıyla korunuyor. */
.guven-oge span { display: block; color: var(--govde); font-size: var(--fs-sm); line-height: 1.5; }

/* Sayfa başlığı (iç sayfalar) — hero ile aynı açık dil */
.sayfa-bas {
  position: relative; color: var(--govde);
  background: linear-gradient(176deg, var(--beyaz) 0%, oklch(0.948 0.013 267) 100%);
  margin-top: -4.75rem;
  padding-top: calc(4.75rem + clamp(3rem, 2rem + 4vw, 5.5rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
  overflow: clip;
  border-bottom: 1px solid var(--cizgi);
}
.sayfa-bas h1 { color: var(--murekkep); max-width: 18ch; }
.sayfa-bas .giris { margin-top: var(--bo-4); }
/* Blog yazısı üst bilgisi: tarih ve okuma süresi */
.yazi-meta {
  margin-top: var(--bo-5); font-size: var(--fs-sm); color: var(--sessiz);
}
.koyu .yazi-meta { color: var(--koyu-sessiz); }

/* Kırıntı yolu */
.kirinti { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center;
  font-size: var(--fs-xs); margin-bottom: var(--bo-5); }
/* Koyu bağlam bağlantı kuralından daha özgül — kırıntı yolu sakin kalsın.
   Açık zemin varsayılan (--sessiz, beyaz üstünde 5.3:1); koyu bağlamda
   .koyu seçicisi devralır. */
.kirinti a { color: var(--sessiz); text-decoration: none; }
.kirinti a:hover { color: var(--lacivert); }
.kirinti li { display: flex; align-items: center; gap: 0.4em; color: var(--sessiz); }
.kirinti li + li::before { content: '/'; opacity: 0.45; }
.kirinti [aria-current] { color: var(--murekkep); }

.koyu .kirinti a { color: var(--koyu-sessiz); }
.koyu .kirinti a:hover { color: var(--turuncu); }
.koyu .kirinti li { color: var(--koyu-sessiz); }
.koyu .kirinti [aria-current] { color: var(--beyaz); }

/* ========================================================================== */
/* 9. Hizmet dizini — kart ızgarası değil, editoryal liste                    */
/* ========================================================================== */

/* /hizmetler/ toplayıcı sayfası: branşlar ihtiyaca göre kümelenir.
   Küme başlığı solda kalır, dizin sağda akar; geniş ekranda okuyucu
   hangi kümede olduğunu kaydırırken de görür. */
.kumeler { display: grid; gap: clamp(3rem, 2rem + 4vw, 5.5rem); }
.kume-bas h2 { max-width: 16ch; }
.kume-bas p {
  margin-top: var(--bo-3); color: var(--sessiz);
  font-size: var(--fs-sm); line-height: 1.6; max-width: 46ch;
}
@media (min-width: 62rem) {
  .kume { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
          gap: var(--bo-8); align-items: start; }
  .kume-bas { position: sticky; top: 7rem; }
}

/* Açılır menünün ilk satırı toplayıcı sayfaya gider; alt satırlardan
   ince bir ayraçla ayrılır ki "hepsi" ile "biri" karışmasın. */
.acilir-tumu { border-bottom: 1px solid var(--cizgi); margin-bottom: 0.25rem;
               padding-bottom: 0.6rem; }

.dizin { border-top: 1px solid var(--cizgi); }
.dizin-satir {
  position: relative;
  display: grid; align-items: center;
  gap: var(--bo-2) var(--bo-6);
  padding: clamp(1.35rem, 1rem + 1vw, 2.1rem) 0;
  border-bottom: 1px solid var(--cizgi);
  text-decoration: none; color: inherit;
  transition: color var(--s-orta) var(--e-yumusak);
}
@media (min-width: 48rem) {
  .dizin-satir { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; }
}
.dizin-satir::before {          /* soldan gelen turuncu dolgu değil, ince alt vurgu */
  content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--turuncu);
  transition: width var(--s-yavas) var(--e-guclu);
}
.dizin-satir:hover::before, .dizin-satir:focus-visible::before { width: 100%; }
.dizin-ad {
  display: flex; align-items: center; gap: var(--bo-3);
  font-family: var(--baslik);
  font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em;
  color: var(--murekkep); line-height: 1.2;
}
.dizin-ad .isaret {
  color: var(--turuncu); font-size: 0.8rem;
  opacity: 0.35;
  transition: opacity var(--s-orta) var(--e-cikis), transform var(--s-yavas) var(--e-guclu);
}
.dizin-satir:hover .dizin-ad .isaret { opacity: 1; transform: rotate(90deg) scale(1.12); }
.dizin-not { color: var(--sessiz); font-size: var(--fs-sm); max-width: 58ch; }
.dizin-ok {
  justify-self: start; font-size: var(--fs-sm); font-weight: 600; color: var(--lacivert);
  display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap;
}
@media (min-width: 48rem) { .dizin-ok { justify-self: end; } }
.dizin-ok::after { content: '→'; transition: transform var(--s-orta) var(--e-cikis); }
.dizin-satir:hover .dizin-ok { color: var(--murekkep); }
.dizin-satir:hover .dizin-ok::after { transform: translateX(4px); }

/* Öne çıkan üç hizmet — asimetrik, görselli */
.one-cikan { display: grid; gap: var(--bo-5); }
@media (min-width: 54rem) {
  .one-cikan { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
  .one-cikan > :first-child { grid-row: span 2; }
}
.oc-kart {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 17rem;
  padding: var(--bo-6);
  border-radius: var(--r-lg);
  overflow: hidden; isolation: isolate;
  text-decoration: none; color: var(--beyaz);
  background: var(--lacivert);
}
@media (min-width: 54rem) { .one-cikan > :first-child.oc-kart { min-height: 30rem; } }
.oc-kart img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.72) brightness(0.92);
  transition: transform 900ms var(--e-guclu), filter var(--s-yavas) var(--e-yumusak);
}
.oc-kart::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(190deg,
    oklch(0.163 0.036 267 / 0.30) 0%,
    oklch(0.163 0.036 267 / 0.62) 48%,
    oklch(0.163 0.036 267 / 0.92) 100%);
}
.oc-kart:hover img { transform: scale(1.045); filter: saturate(0.85) brightness(1); }
.oc-kart h3 { color: var(--beyaz); font-size: var(--fs-2xl); letter-spacing: -0.028em; }
.oc-kart p { color: var(--koyu-govde); margin-top: var(--bo-2); max-width: 34ch; font-size: var(--fs-sm); }
.oc-kart .baglanti-ok { margin-top: var(--bo-4); color: var(--turuncu); }
.oc-kart:hover .baglanti-ok::after { transform: translateX(4px); }
.oc-etiket {
  position: absolute; top: var(--bo-5); left: var(--bo-6);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em;
  color: var(--gece); background: var(--turuncu);
  padding: 0.3rem 0.7rem; border-radius: var(--r-tam);
}

/* ========================================================================== */
/* 10. Teminat listeleri — karşılar / karşılamaz                              */
/* ========================================================================== */
.teminat { display: grid; gap: var(--bo-6); }
@media (min-width: 50rem) { .teminat { grid-template-columns: 1fr 1fr; gap: var(--bo-8); } }

.teminat-blok h3 {
  display: flex; align-items: center; gap: 0.5em;
  padding-bottom: var(--bo-4); margin-bottom: var(--bo-4);
  border-bottom: 1px solid var(--cizgi);
  font-size: var(--fs-lg);
}
.teminat-blok li {
  position: relative; padding-left: 2rem; margin-bottom: 0.85em;
  line-height: 1.55;
}
.teminat-blok li::before {
  content: ''; position: absolute; left: 0; top: 0.05em;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 800; line-height: 1;
}
/* Nötr liste (✓/✕ olmayan) — marka noktası */
.teminat-blok:not(.var):not(.yok) li::before {
  width: 7px; height: 7px; margin: 0.62em 0 0 0.3em;
  background: var(--turuncu); top: 0;
}
.var li::before  { content: '✓'; background: color-mix(in oklab, var(--olumlu) 16%, var(--beyaz)); color: var(--olumlu); }
.yok li::before  { content: '✕'; background: color-mix(in oklab, var(--olumsuz) 13%, var(--beyaz)); color: var(--olumsuz); }
.var h3 svg, .yok h3 svg { width: 1.15em; height: 1.15em; flex: none; }
.var h3, .yok h3 { color: var(--murekkep); }
.var h3 svg { color: var(--olumlu); }
.yok h3 svg { color: var(--olumsuz); }

/* ========================================================================== */
/* 11. Bilgi blokları                                                         */
/* ========================================================================== */
.blok {
  padding: var(--bo-6);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
}
.blok h3 { font-size: var(--fs-lg); margin-bottom: var(--bo-3); }
.blok p { font-size: var(--fs-sm); }

.uyari {
  display: flex; gap: var(--bo-4);
  padding: var(--bo-5) var(--bo-5);
  background: color-mix(in oklab, var(--turuncu) 11%, var(--kagit));
  border: 1px solid color-mix(in oklab, var(--turuncu) 32%, transparent);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.uyari .isaret { color: var(--murekkep); font-size: 1.15rem; flex: none; margin-top: 0.15em; }
.uyari b { color: var(--murekkep); }

/* Adım anlatımı — gerçekten sıralı olduğu için numaralı */
.adimlar { counter-reset: adim; display: grid; gap: var(--bo-6); }
@media (min-width: 50rem) { .adimlar { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.adim { counter-increment: adim; position: relative; padding-top: var(--bo-5); border-top: 2px solid var(--cizgi); }
.adim::before {
  content: counter(adim, decimal-leading-zero);
  position: absolute; top: -0.9em; left: 0;
  font-size: var(--fs-xs); font-weight: 800; color: var(--murekkep);
  background: var(--kagit); padding-right: 0.6em;
  font-variant-numeric: tabular-nums;
}
.koyu .adim { border-top-color: var(--koyu-cizgi); }
.koyu .adim::before { background: var(--derin); color: var(--turuncu); }
.adim h3 { font-size: var(--fs-lg); margin-bottom: var(--bo-2); }
.adim p { font-size: var(--fs-sm); }

/* ========================================================================== */
/* 12. SSS                                                                    */
/* ========================================================================== */
.sss { border-top: 1px solid var(--cizgi); }
.sss-oge { border-bottom: 1px solid var(--cizgi); }
.sss-oge summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bo-5);
  padding: var(--bo-5) 0;
  cursor: pointer; list-style: none;
  font-family: var(--baslik);
  font-size: var(--fs-lg); font-weight: 650; color: var(--murekkep);
  letter-spacing: -0.015em; line-height: 1.4;
  transition: color var(--s-hizli) var(--e-yumusak);
}
.sss-oge summary::-webkit-details-marker { display: none; }
.sss-oge summary:hover { color: var(--murekkep); }
.sss-isaret {
  flex: none; position: relative; width: 1.25rem; height: 1.25rem; margin-top: 0.3em;
}
.sss-isaret::before, .sss-isaret::after {
  content: ''; position: absolute; inset: 50% 0 auto 0; height: 2px;
  background: var(--lacivert); border-radius: 2px;
  transition: transform var(--s-orta) var(--e-cikis);
}
.sss-isaret::after { transform: rotate(90deg); }
.sss-oge[open] .sss-isaret::after { transform: rotate(0deg); }
.sss-govde { padding-bottom: var(--bo-6); max-width: 62ch; }
.sss-govde p + p { margin-top: 0.8em; }

/* ========================================================================== */
/* 13. Form                                                                   */
/* ========================================================================== */
.form { display: grid; gap: var(--bo-4); }
.form-satir { display: grid; gap: var(--bo-4); }
@media (min-width: 40rem) { .form-satir { grid-template-columns: 1fr 1fr; } }

.alan { display: grid; gap: 0.4rem; }
.alan label { font-size: var(--fs-sm); font-weight: 600; color: var(--murekkep); }
.alan input, .alan select, .alan textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 3rem;
  background: var(--beyaz);
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  color: var(--murekkep);
  transition: border-color var(--s-hizli) var(--e-yumusak), box-shadow var(--s-hizli) var(--e-yumusak);
}
.alan textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
.alan input::placeholder, .alan textarea::placeholder { color: var(--sessiz); }
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: var(--sessiz); }
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none;
  border-color: var(--lacivert);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lacivert) 18%, transparent);
}
.alan select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C6788' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px;
  padding-right: 2.6rem;
}
.onay { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--sessiz); }
/* 24px = WCAG 2.2 SC 2.5.8 asgari dokunma hedefi */
.onay input { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; flex: none; accent-color: var(--lacivert); }
.form-ipucu { font-size: var(--fs-xs); color: var(--sessiz); }
.form-durum {
  font-size: var(--fs-sm); padding: var(--bo-4);
  border-radius: var(--r-sm);
  background: var(--yuzey); color: var(--murekkep);
}
.form-durum[data-tip="hata"] {
  background: color-mix(in oklab, var(--olumsuz) 12%, var(--beyaz));
  border: 1px solid color-mix(in oklab, var(--olumsuz) 40%, transparent);
}
.form-durum[data-tip="basari"] {
  background: color-mix(in oklab, var(--olumlu) 12%, var(--beyaz));
  border: 1px solid color-mix(in oklab, var(--olumlu) 40%, transparent);
}
.form-durum a { color: var(--lacivert); font-weight: 600; }

/* ========================================================================== */
/* 14. İletişim kartı & partner şeridi                                        */
/* ========================================================================== */
.iletisim-liste { display: grid; gap: var(--bo-5); }
.iletisim-oge { display: flex; gap: var(--bo-4); align-items: flex-start; }
.iletisim-oge .isaret { color: var(--turuncu); font-size: 1.15rem; margin-top: 0.3em; flex: none; }
.iletisim-oge dt { font-size: var(--fs-xs); font-weight: 700; color: var(--sessiz); margin-bottom: 0.15rem; }
.iletisim-oge dd { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--murekkep); line-height: 1.35; }
.iletisim-oge dd a {
  text-decoration: none;
  display: inline-block; padding-block: 0.35rem;   /* mobilde yeterli dokunma alanı */
}
.koyu .iletisim-oge dd { color: var(--beyaz); }
.koyu .iletisim-oge dt { color: var(--koyu-sessiz); }

/* Anlaşmalı şirket logoları.
   NOT: Sompo ve Doğa logoları siyah metin içerir — bu şerit koyu zemine
   ASLA konmamalı, görünmez olurlar. Beyaz kart + açık zemin zorunlu. */
/* 8 şirket → 2×4 / 3+3+2 / 4×2. auto-fit kullanılmıyor: 6+2 gibi
   dengesiz kırılmalar üretiyordu. */
.partner {
  display: grid; gap: var(--bo-3);
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
}
@media (min-width: 34rem) { .partner { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .partner { grid-template-columns: repeat(4, 1fr); } }
.partner li {
  display: grid; place-items: center;
  min-height: 5.75rem;
  padding: var(--bo-4) var(--bo-3);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  transition: border-color var(--s-orta) var(--e-yumusak),
              box-shadow var(--s-orta) var(--e-cikis),
              transform var(--s-orta) var(--e-cikis);
}
.partner li:hover {
  border-color: var(--cizgi-guclu);
  box-shadow: var(--g-2);
  transform: translateY(-2px);
}
.partner img {
  width: auto; height: auto;
  max-width: 100%; max-height: 2.5rem;
  object-fit: contain;
}
@media (min-width: 48rem) { .partner img { max-height: 2.75rem; } }

/* ========================================================================== */
/* 15. Blog                                                                   */
/* ========================================================================== */
.yazi-liste { display: grid; gap: var(--bo-6); }
@media (min-width: 46rem) { .yazi-liste { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } }
.yazi-kart {
  display: flex; flex-direction: column; gap: var(--bo-3);
  padding-top: var(--bo-5);
  border-top: 2px solid var(--murekkep);
  text-decoration: none; color: inherit;
}
.yazi-kart:hover h3 { color: var(--murekkep); }
.yazi-kart h3 { font-size: var(--fs-xl); transition: color var(--s-hizli) var(--e-yumusak); }
.yazi-kart p { font-size: var(--fs-sm); color: var(--sessiz); }
.yazi-ust { display: flex; gap: var(--bo-3); font-size: var(--fs-xs); color: var(--sessiz); font-weight: 600; }

/* ========================================================================== */
/* 16. CTA bandı & altbilgi                                                   */
/* ========================================================================== */
.cta-bant { position: relative; overflow: clip; background: var(--lacivert); color: var(--koyu-govde); }
.cta-bant h2 { color: var(--beyaz); max-width: 20ch; }
.cta-ic { position: relative; z-index: 1; display: grid; gap: var(--bo-6); align-items: center; }
@media (min-width: 56rem) { .cta-ic { grid-template-columns: minmax(0, 1.2fr) auto; gap: var(--bo-8); } }

.altbilgi { background: var(--gece); color: var(--koyu-sessiz);
  padding-block: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) var(--bo-5); }
/* Mobilde tek sütun 10 hizmet + 4 kurumsal + iletişim = çok uzun bir kolon
   oluyordu. Telefonda da iki sütuna yayıyoruz; hizmet listesi kendi içinde
   ayrıca ikiye bölünüyor, böylece altbilgi yarı yüksekliğe iniyor. */
.altbilgi-izgara {
  display: grid; gap: var(--bo-6) var(--bo-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.altbilgi-marka { grid-column: 1 / -1; }
.altbilgi-hizmet { grid-column: 1 / -1; }
.altbilgi .altbilgi-hizmet ul {
  display: grid; gap: 0.7rem var(--bo-4);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
@media (min-width: 46rem) {
  .altbilgi-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .altbilgi-marka { grid-column: 1 / -1; }
  .altbilgi-hizmet { grid-column: 1 / -1; }
  .altbilgi .altbilgi-hizmet ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 66rem) {
  .altbilgi-izgara { grid-template-columns: 1.35fr 1.5fr 1fr 1.15fr; gap: var(--bo-6); }
  .altbilgi-marka, .altbilgi-hizmet { grid-column: auto; }
  .altbilgi .altbilgi-hizmet ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.altbilgi h4 { color: var(--beyaz); font-size: var(--fs-sm); margin-bottom: var(--bo-4); font-weight: 650; }
/* Aynı sütundaki ikinci başlık listeye yapışmasın */
.altbilgi ul + h4 { margin-top: var(--bo-6); }
/* minmax(0,1fr) şart: örtük "auto" sütun, kırılamayan uzun bir dizeyle
   (info@livamsigorta.com) genişleyip 320px'te sayfayı yatay kaydırıyordu. */
.altbilgi ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
.altbilgi li { font-size: var(--fs-sm); line-height: 1.5; min-width: 0; }
/* "anywhere" yalnızca kırılamayan uzun dizelerin bulunduğu iletişim
   sütununda; hizmet adlarına uygulanınca gereksiz satır kırıyordu. */
.altbilgi-iletisim li, .altbilgi-iletisim a { overflow-wrap: anywhere; }
.altbilgi-hizmet a { overflow-wrap: normal; hyphens: none; }
.altbilgi-izgara > * { min-width: 0; }
/* .koyu a:not(.btn) kuralından daha özgül olmalı — altbilgi bağlantıları
   sakin kalsın, 20 turuncu bağlantı sayfayı yakmasın. */
.altbilgi a:not(.btn), .altbilgi.koyu a:not(.btn) {
  color: var(--koyu-sessiz); text-decoration: none; font-size: var(--fs-sm);
  transition: color var(--s-hizli) var(--e-yumusak);
}
.altbilgi a:not(.btn):hover, .altbilgi.koyu a:not(.btn):hover { color: var(--turuncu); }
.altbilgi img { height: 28px; width: auto; }
.altbilgi-alt {
  display: flex; flex-wrap: wrap; gap: var(--bo-3) var(--bo-5); justify-content: space-between;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); padding-top: var(--bo-5);
  border-top: 1px solid var(--koyu-cizgi);
  font-size: var(--fs-xs);
}
.altbilgi-alt p { max-width: 70ch; line-height: 1.6; }

/* ========================================================================== */
/* 17. Mobil yapışkan eylem çubuğu                                            */
/* ========================================================================== */
.eylem-cubugu {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-yapisik);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  padding: 0.6rem var(--kenar) calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--kagit) 90%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
          backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid var(--cizgi);
  transform: translateY(102%);
  transition: transform var(--s-orta) var(--e-cikis);
}
body[data-eylem] .eylem-cubugu { transform: none; }
@media (min-width: 48rem) { .eylem-cubugu { display: none; } }
/* Sabit çubuk altbilgiyi örtmesin */
@media (max-width: 47.99rem) {
  body[data-eylem] { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
}
.eylem-cubugu .btn { min-height: 2.9rem; padding-inline: 1rem; font-size: var(--fs-sm); }

/* Dar ekranda başlıktaki teklif butonu logoyu sıkıştırmasın */
@media (max-width: 26rem) {
  .baslik-ic .btn-vurgu { padding-inline: 1rem; }
  .baslik-ic .btn-vurgu span { display: none; }
  .logo img { height: 27px; }
}

/* WhatsApp yüzen düğme (masaüstü) */
.wa-yuzen {
  position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem);
  z-index: var(--z-yapisik);
  display: none; align-items: center; gap: 0.6em;
  padding: 0.85rem 1.35rem;
  background: var(--gece); color: var(--beyaz);
  border-radius: var(--r-tam); box-shadow: var(--g-3);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.96);
  transition: transform var(--s-orta) var(--e-cikis),
              opacity var(--s-orta) var(--e-cikis),
              visibility var(--s-orta),
              background var(--s-hizli) var(--e-yumusak);
}
/* Hero geçilmeden görünmez — kahraman metnin üstünü örtmesin */
@media (min-width: 48rem) {
  body[data-eylem] .wa-yuzen { display: inline-flex; opacity: 1; visibility: visible; transform: none; }
}
.wa-yuzen:hover { transform: translateY(-2px); background: var(--lacivert); color: var(--beyaz); }
.wa-yuzen svg { width: 1.25em; height: 1.25em; }

/* ========================================================================== */
/* 18. Hareket — içerik asla animasyona bağlı değil                           */
/* ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-beliren] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms var(--e-guclu), transform 700ms var(--e-guclu);
    transition-delay: var(--gecikme, 0ms);
  }
  [data-beliren].belirdi { opacity: 1; transform: none; }
  /* JS yoksa içerik yine görünür kalır */
  html:not(.js) [data-beliren] { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-beliren] { opacity: 1 !important; transform: none !important; }
  .oc-kart img { transition: none; }
}

/* ========================================================================== */
/* 19. Yazdırma                                                               */
/* ========================================================================== */
@media print {
  .baslik, .eylem-cubugu, .wa-yuzen, .cekmece, .hero-tuval, .cta-bant { display: none !important; }
  body { background: #fff; color: #000; }
  .koyu, .hero, .sayfa-bas { background: #fff !important; color: #000 !important; }
  .koyu h1, .koyu h2, .hero h1, .sayfa-bas h1 { color: #000 !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}