/* ============================================================
   Teka Digital — tasarım sistemi
   Tek kaynak. index.html, gizlilik.html ve 404.html bunu kullanır.
   JavaScript yok: menü <details>, hareket CSS scroll-driven animation.
   ============================================================ */

/* ---------- 1. Belirteçler ---------- */
:root{
  --siyah:#0a0a0b;
  --murekkep:#151518;
  --gri-900:#27272a;
  --gri-700:#52525b;
  --gri-500:#71717a;
  --gri-400:#a1a1aa;
  --gri-300:#d4d4d8;
  --gri-200:#e4e4e7;
  --gri-100:#f4f4f5;
  --gri-50:#f8f7f4;   /* sıcak kırık beyaz */
  --beyaz:#ffffff;
  --mavi:#2563eb;
  --mavi-koyu:#1d4ed8;
  --mavi-acik:#eff4ff;
  --mavi-parlak:#7ba4fb;

  --yazi-xs:0.78rem;
  --yazi-sm:0.88rem;
  --yazi-md:1rem;
  --yazi-lg:1.1rem;
  --yazi-xl:clamp(1.3rem, 2.2vw, 1.5rem);
  --yazi-2xl:clamp(1.7rem, 3.4vw, 2.35rem);
  --yazi-3xl:clamp(2.05rem, 4.6vw, 3.25rem);

  --agirlik-normal:400;
  --agirlik-orta:500;
  --agirlik-yari:600;
  --agirlik-kalin:700;
  --agirlik-cok:800;

  --satir-sik:1.15;
  --satir-orta:1.45;
  --satir-genis:1.7;

  --bosluk-1:4px;  --bosluk-2:8px;  --bosluk-3:12px; --bosluk-4:16px;
  --bosluk-5:20px; --bosluk-6:24px; --bosluk-8:32px; --bosluk-10:40px;
  --bosluk-12:48px; --bosluk-16:64px; --bosluk-20:80px; --bosluk-24:96px;
  /* bölüm dikey ritmi: masaüstü 96, mobil 64 (640px altında ezilir) */

  --genislik:1200px;
  --genislik-dar:760px;
  --yaricap-sm:10px;
  --yaricap:16px;
  --yaricap-tam:999px;

  --golge-1:0 1px 2px rgba(0,0,0,.05);
  --golge-2:0 8px 24px rgba(0,0,0,.08);
  --golge-3:0 16px 44px rgba(0,0,0,.12);

  --gecis:.18s ease;

  --kat-baslik:50;

  --bas-yuksek:76px;
}

/* ---------- 2. Sıfırlama ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:var(--yazi-md);
  line-height:var(--satir-orta);
  color:var(--siyah);
  background:var(--beyaz);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block;}
ul,ol{list-style:none;}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer; border:none; background:none;}

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--mavi);
  outline-offset:3px;
  border-radius:var(--yaricap-sm);
}

.atla{
  position:absolute; left:-9999px; top:0;
  background:var(--siyah); color:var(--beyaz);
  padding:var(--bosluk-3) var(--bosluk-5);
  border-radius:0 0 var(--yaricap-sm) 0;
  z-index:100;
}
.atla:focus{ left:0; }

.kapsayici{ max-width:var(--genislik); margin:0 auto; padding:0 var(--bosluk-8); }

section[id], [id].hedef{ scroll-margin-top:calc(var(--bas-yuksek) + 20px); }

/* ---------- 3. Tipografi ---------- */
h1,h2,h3{ letter-spacing:-0.02em; line-height:var(--satir-sik); }
h1{ font-size:var(--yazi-3xl); font-weight:var(--agirlik-cok); }
h2{ font-size:var(--yazi-2xl); font-weight:var(--agirlik-cok); }
h3{ font-size:var(--yazi-lg); font-weight:var(--agirlik-kalin); letter-spacing:-0.01em; }

.etiket{
  display:inline-block;
  font-size:var(--yazi-xs);
  font-weight:var(--agirlik-yari);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--mavi);
  background:var(--mavi-acik);
  padding:7px 16px;
  border-radius:var(--yaricap-tam);
  margin-bottom:var(--bosluk-5);
}
.etiket-koyu{ color:var(--mavi-parlak); background:rgba(37,99,235,.16); }

.bolum-bas{ max-width:640px; margin-bottom:var(--bosluk-12); }
.bolum-bas.orta{ margin-left:auto; margin-right:auto; text-align:center; }
.bolum-bas p{ color:var(--gri-700); font-size:var(--yazi-lg); margin-top:var(--bosluk-3); }

/* ---------- 4. Butonlar ---------- */
.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--bosluk-2);
  font-size:var(--yazi-sm); font-weight:var(--agirlik-yari);
  padding:13px 24px;
  min-height:48px;
  border-radius:var(--yaricap-tam);
  border:1px solid transparent;
  transition:background var(--gecis), color var(--gecis), border-color var(--gecis),
             transform var(--gecis), box-shadow var(--gecis);
  text-align:center;
}
.dugme-ana{ background:var(--mavi); color:var(--beyaz); box-shadow:var(--golge-1); }
.dugme-ana:hover{ background:var(--mavi-koyu); transform:translateY(-1px); box-shadow:0 8px 20px rgba(37,99,235,.25); }
.dugme-cizgi{ background:transparent; color:var(--siyah); border-color:var(--gri-300); }
.dugme-cizgi:hover{ border-color:var(--siyah); background:var(--gri-50); }
.dugme-koyu-cizgi{ background:transparent; color:var(--beyaz); border-color:rgba(255,255,255,.28); }
.dugme-koyu-cizgi:hover{ border-color:var(--beyaz); background:rgba(255,255,255,.08); }
.dugme-buyuk{ padding:16px 32px; font-size:var(--yazi-md); min-height:56px; }
.dugme-kucuk{ padding:9px 18px; min-height:44px; font-size:var(--yazi-xs); }

.metin-bag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--yazi-sm); font-weight:var(--agirlik-yari); color:var(--mavi);
  min-height:44px;
}
.metin-bag:hover{ color:var(--mavi-koyu); }
.metin-bag .ok{ transition:transform var(--gecis); }
.metin-bag:hover .ok{ transform:translateX(3px); }

/* ---------- 5. Başlık: 3 kolon — logo | menü ortada | çağrı ---------- */
.ust{
  position:sticky; top:0; z-index:var(--kat-baslik);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gri-200);
}
.ust-ic{
  display:grid;
  grid-template-columns:1fr auto 1fr;   /* menü gerçek sayfa merkezinde */
  align-items:center;
  gap:var(--bosluk-5);
  min-height:var(--bas-yuksek);
}
.marka{ justify-self:start; }
.marka a{ display:flex; align-items:center; min-height:44px; min-width:44px; }
.logo{ height:32px; width:auto; }

.menu-liste{ display:flex; align-items:center; gap:var(--bosluk-2); }
.menu-liste a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:0 var(--bosluk-3);
  font-size:var(--yazi-sm); font-weight:var(--agirlik-orta); color:var(--gri-700);
  border-radius:var(--yaricap-sm);
  transition:color var(--gecis), background var(--gecis);
}
.menu-liste a:hover{ color:var(--siyah); background:var(--gri-100); }

.ust-cta{ justify-self:end; }

/* mobil menü — <details>, JavaScript yok */
.mobil-menu{ display:none; }

@media (max-width:900px){
  .ust-ic{ grid-template-columns:auto 1fr auto; }
  .menu-masaustu{ display:none; }
  .ust-cta{ display:none; }
  .mobil-menu{ display:block; justify-self:end; position:relative; }
  .mobil-menu > summary{
    list-style:none;
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px;
    border-radius:var(--yaricap-sm);
    cursor:pointer;
    color:var(--siyah);
  }
  .mobil-menu > summary::-webkit-details-marker{ display:none; }
  .mobil-menu > summary:hover{ background:var(--gri-100); }
  .mobil-menu .cizgiler, .mobil-menu .cizgiler::before, .mobil-menu .cizgiler::after{
    content:""; display:block; width:20px; height:2px; border-radius:2px;
    background:currentColor; position:relative;
    transition:transform var(--gecis), opacity var(--gecis);
  }
  .mobil-menu .cizgiler::before{ position:absolute; top:-6px; }
  .mobil-menu .cizgiler::after{ position:absolute; top:6px; }
  .mobil-menu[open] .cizgiler{ background:transparent; }
  .mobil-menu[open] .cizgiler::before{ transform:translateY(6px) rotate(45deg); }
  .mobil-menu[open] .cizgiler::after{ transform:translateY(-6px) rotate(-45deg); }
  .mobil-panel{
    position:absolute; top:calc(100% + 8px); right:0;
    min-width:230px; padding:var(--bosluk-2);
    background:var(--beyaz); border:1px solid var(--gri-200);
    border-radius:var(--yaricap); box-shadow:var(--golge-3);
  }
  .mobil-panel a{
    display:flex; align-items:center;
    min-height:48px; padding:0 var(--bosluk-4);
    font-size:var(--yazi-md); font-weight:var(--agirlik-orta); color:var(--gri-900);
    border-radius:var(--yaricap-sm);
  }
  .mobil-panel a:hover{ background:var(--gri-100); }
  .mobil-panel .mobil-cta{ margin-top:var(--bosluk-2); border-top:1px solid var(--gri-200); padding-top:var(--bosluk-2); }
  .mobil-panel .mobil-cta a{ color:var(--mavi); font-weight:var(--agirlik-yari); }
}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:var(--bosluk-20) 0;
  background:
    radial-gradient(58% 46% at 50% 0%, rgba(37,99,235,.17) 0%, rgba(0,0,0,0) 68%),
    var(--siyah);
  color:var(--beyaz);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.085) 1px, transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 52%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 0%, black 52%, transparent 100%);
}
.hero .kapsayici{ position:relative; z-index:1; }
.hero-duzen{ display:grid; grid-template-columns:1.12fr .88fr; gap:var(--bosluk-16); align-items:center; }
.hero h1{ color:var(--beyaz); max-width:16ch; }
.hero-alt{
  color:var(--gri-300); font-size:var(--yazi-lg);
  max-width:44ch; margin-top:var(--bosluk-5); line-height:var(--satir-genis);
}
.hero-cta{ display:flex; align-items:center; gap:var(--bosluk-4); flex-wrap:wrap; margin-top:var(--bosluk-8); }
.hero-cta .metin-bag{ color:var(--gri-300); }
.hero-cta .metin-bag:hover{ color:var(--beyaz); }
.hero-guven{
  margin-top:var(--bosluk-8); padding-top:var(--bosluk-4);
  border-top:1px solid rgba(255,255,255,.12);
  color:var(--gri-400); font-size:var(--yazi-sm); max-width:46ch;
}

/* ---------- 7. Sohbet kartları ---------- */
.sohbet{
  background:var(--murekkep); border:1px solid rgba(255,255,255,.10);
  border-radius:20px; padding:var(--bosluk-6); box-shadow:var(--golge-3);
}
.sohbet-bas{
  display:flex; align-items:center; gap:var(--bosluk-3);
  padding-bottom:var(--bosluk-4); margin-bottom:var(--bosluk-5);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.sohbet-nokta{ width:9px; height:9px; border-radius:50%; background:#25d366; flex-shrink:0; }
.sohbet-nokta-ig{ background:linear-gradient(45deg,#fd5949,#d6249f); }
.sohbet-bas span{ font-size:var(--yazi-xs); color:var(--gri-400); letter-spacing:.04em; text-transform:uppercase; }
.sohbet-rozet{
  margin-left:auto; font-size:0.68rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--gri-500); border:1px solid rgba(255,255,255,.14);
  padding:3px 9px; border-radius:var(--yaricap-tam); white-space:nowrap;
}
.balon{
  max-width:84%; padding:10px 14px; border-radius:15px;
  font-size:var(--yazi-sm); line-height:var(--satir-orta); margin-bottom:var(--bosluk-3);
}
.balon-musteri{ background:rgba(255,255,255,.09); color:var(--gri-300); border-bottom-left-radius:5px; }
.balon-sistem{ background:var(--mavi); color:var(--beyaz); margin-left:auto; border-bottom-right-radius:5px; }
.sohbet-not{
  margin-top:var(--bosluk-4); padding-top:var(--bosluk-4);
  border-top:1px solid rgba(255,255,255,.09);
  font-size:var(--yazi-xs); color:var(--gri-500); line-height:var(--satir-orta);
}
.sohbet-not strong{ color:var(--gri-300); font-weight:var(--agirlik-yari); }

/* açık zeminde sohbet (örnekler bölümü) */
.ornekler .sohbet{ background:var(--beyaz); border-color:var(--gri-200); box-shadow:var(--golge-2); }
.ornekler .sohbet-bas{ border-color:var(--gri-200); }
.ornekler .balon-musteri{ background:var(--gri-100); color:var(--gri-900); }
.ornekler .sohbet-not{ border-color:var(--gri-200); }
.ornekler .sohbet-not strong{ color:var(--siyah); }
.ornekler .sohbet-rozet{ color:var(--gri-500); border-color:var(--gri-300); }

/* Tolgolog monogramı */
.dm-kimlik{ display:flex; align-items:center; gap:10px; }
.dm-mono{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:var(--siyah); color:var(--beyaz);
  display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; font-weight:var(--agirlik-kalin);
}
.ornekler .dm-mono{ background:var(--siyah); }

/* ---------- 8. Problem — 3 kart ---------- */
.problem{ background:var(--gri-50); padding:var(--bosluk-24) 0; }
.problem-liste{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bosluk-4); }
.problem-oge{
  background:var(--beyaz); border:1px solid var(--gri-200);
  border-radius:var(--yaricap); padding:var(--bosluk-6);
}
.problem-no{
  font-family:'Fraunces','Inter',serif; font-style:italic; font-weight:var(--agirlik-orta);
  font-size:1.4rem; line-height:1; color:var(--mavi); margin-bottom:var(--bosluk-4);
}
.problem-oge h3{ font-size:var(--yazi-md); margin-bottom:var(--bosluk-2); }
.problem-oge p{ color:var(--gri-700); font-size:var(--yazi-sm); line-height:var(--satir-orta); }

/* ---------- 9. Çözümler — kompakt 2x2 ---------- */
.cozumler{ padding:var(--bosluk-24) 0; }
.cozum-izgara{ display:grid; grid-template-columns:1fr 1fr; gap:var(--bosluk-4); }
.cozum{
  background:var(--beyaz); border:1px solid var(--gri-200);
  border-radius:var(--yaricap); padding:var(--bosluk-8);
  transition:border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.cozum:hover{ border-color:var(--gri-300); box-shadow:var(--golge-2); transform:translateY(-2px); }
.cozum h3{ margin-bottom:var(--bosluk-3); }
.cozum p{ color:var(--gri-700); font-size:var(--yazi-sm); line-height:var(--satir-genis); margin-bottom:var(--bosluk-5); }
.rozetler{ display:flex; gap:var(--bosluk-2); flex-wrap:wrap; }
.rozet{
  font-size:var(--yazi-xs); font-weight:var(--agirlik-orta);
  color:var(--gri-700); background:var(--gri-100);
  padding:5px 12px; border-radius:var(--yaricap-tam);
}
.destek-satir{
  display:flex; align-items:baseline; gap:var(--bosluk-3) var(--bosluk-2);
  flex-wrap:wrap; margin-top:var(--bosluk-8);
  color:var(--gri-500); font-size:var(--yazi-sm);
}
.destek-satir b{ color:var(--gri-700); font-weight:var(--agirlik-yari); flex-shrink:0; }
.destek-satir span{
  background:var(--gri-50); border:1px solid var(--gri-200);
  padding:4px 12px; border-radius:var(--yaricap-tam); font-size:var(--yazi-xs);
}

/* ---------- 10. Örnek akışlar ---------- */
.ornekler{ background:var(--gri-50); padding:var(--bosluk-24) 0; }
.ornek-izgara{ display:grid; grid-template-columns:1fr 1fr; gap:var(--bosluk-5); align-items:start; }
.ornek-son{ text-align:center; margin-top:var(--bosluk-10); }

/* ---------- 11. Çalışan sistemler — vaka hiyerarşisi ---------- */
.sistemler{ padding:var(--bosluk-24) 0; }
.vaka-izgara{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--bosluk-4); }
.vaka{
  background:var(--beyaz); border:1px solid var(--gri-200);
  border-radius:var(--yaricap); overflow:hidden;
  display:flex; flex-direction:column;
}
.vaka-gorsel{
  background:var(--gri-50); border-bottom:1px solid var(--gri-200);
  padding:var(--bosluk-5); min-height:150px;
  display:flex; align-items:center; justify-content:center;
}
.vaka-ic{ padding:var(--bosluk-6); }
.vaka-kategori{
  font-size:var(--yazi-xs); font-weight:var(--agirlik-yari);
  letter-spacing:.06em; text-transform:uppercase; color:var(--mavi);
  margin-bottom:var(--bosluk-2);
}
.vaka h3{ font-size:var(--yazi-md); margin-bottom:var(--bosluk-2); }
.vaka p{ color:var(--gri-700); font-size:var(--yazi-sm); line-height:var(--satir-orta); }
.vaka p b{ font-weight:var(--agirlik-yari); color:var(--siyah); }

/* mini akış görseli (vaka kartlarında) */
.mini-akis{ width:100%; max-width:230px; }
.mini-akis .k{ fill:var(--beyaz); stroke:var(--gri-300); }
.mini-akis .ka{ fill:var(--siyah); stroke:var(--siyah); }
.mini-akis .y{ font-family:'Inter',sans-serif; font-size:9.5px; fill:var(--gri-700); font-weight:500; }
.mini-akis .ya{ fill:var(--beyaz); font-weight:600; }
.mini-akis .c{ stroke:var(--gri-300); stroke-width:1.3; fill:none; }
.mini-akis .cv{ stroke:var(--mavi); stroke-width:1.3; fill:none; }

/* temsilî panel çerçevesi — gerçek ekran görüntüsü değildir */
.panel-cerceve{
  width:100%; max-width:230px;
  background:var(--beyaz); border:1px solid var(--gri-300);
  border-radius:var(--yaricap-sm); overflow:hidden;
  box-shadow:var(--golge-1);
}
.panel-ust{ display:flex; gap:4px; padding:7px 9px; border-bottom:1px solid var(--gri-200); }
.panel-ust i{ width:6px; height:6px; border-radius:50%; background:var(--gri-300); }
.panel-govde{ padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.panel-kut{ background:var(--gri-100); border-radius:6px; height:26px; }
.panel-kut-genis{ grid-column:1/-1; height:34px; background:var(--mavi-acik); position:relative; }
.panel-kut-genis::after{
  content:""; position:absolute; left:8px; top:12px; width:56%; height:5px;
  border-radius:3px; background:var(--mavi); opacity:.55;
}
.panel-not{
  font-size:0.65rem; color:var(--gri-500); text-align:center;
  padding:5px 8px 8px; letter-spacing:.03em;
}

.kompakt-sira{
  display:flex; gap:var(--bosluk-3) var(--bosluk-8); flex-wrap:wrap;
  margin-top:var(--bosluk-8); padding-top:var(--bosluk-6);
  border-top:1px solid var(--gri-200);
}
.kompakt{ font-size:var(--yazi-sm); color:var(--gri-700); }
.kompakt b{ color:var(--siyah); font-weight:var(--agirlik-yari); }
.sistem-son{ text-align:center; margin-top:var(--bosluk-10); }

/* ---------- 12. Süreç ---------- */
.surec{ background:var(--siyah); color:var(--beyaz); padding:var(--bosluk-24) 0; }
.surec h2{ color:var(--beyaz); }
.surec .bolum-bas p{ color:var(--gri-400); }
.adimlar{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--bosluk-4); }
.adim{
  padding:var(--bosluk-6); border-radius:var(--yaricap);
  background:var(--murekkep); border:1px solid rgba(255,255,255,.09);
}
.adim-no{
  font-family:'Fraunces','Inter',serif; font-style:italic;
  font-size:1.5rem; color:var(--mavi-parlak); line-height:1; margin-bottom:var(--bosluk-4);
}
.adim h3{ color:var(--beyaz); font-size:var(--yazi-md); margin-bottom:var(--bosluk-2); }
.adim p{ color:var(--gri-400); font-size:var(--yazi-sm); line-height:var(--satir-orta); }

/* ---------- 13. Hakkımızda ---------- */
.neden{ padding:var(--bosluk-24) 0; }
.neden-duzen{ display:grid; grid-template-columns:1.2fr 1fr; gap:var(--bosluk-16); align-items:start; }
.neden p{ color:var(--gri-700); line-height:var(--satir-genis); margin-bottom:var(--bosluk-4); }
.neden p strong{ color:var(--siyah); font-weight:var(--agirlik-yari); }
.neden-imza{
  margin-top:var(--bosluk-5); padding-top:var(--bosluk-4);
  border-top:1px solid var(--gri-200);
  font-family:'Fraunces','Inter',serif; font-style:italic;
  font-size:var(--yazi-lg); color:var(--siyah);
}
.sayilar{ display:flex; flex-direction:column; }
.sayi{
  display:flex; align-items:baseline; gap:var(--bosluk-5);
  padding:var(--bosluk-4) 0; border-bottom:1px solid var(--gri-200);
}
.sayi:first-child{ border-top:1px solid var(--gri-200); }
.sayi b{
  flex-shrink:0; min-width:76px;
  font-family:'Fraunces','Inter',serif; font-style:italic; font-weight:var(--agirlik-orta);
  font-size:1.7rem; line-height:1; color:var(--mavi); font-variant-numeric:tabular-nums;
}
.sayi span{ color:var(--gri-700); font-size:var(--yazi-sm); line-height:var(--satir-orta); }
.sayilar-not{ margin-top:var(--bosluk-3); font-size:var(--yazi-xs); color:var(--gri-500); }

/* ---------- 14. SSS ---------- */
.sss{ background:var(--gri-50); padding:var(--bosluk-24) 0; }
.sss-liste{ max-width:var(--genislik-dar); margin:0 auto; }
.sss-oge{ border-bottom:1px solid var(--gri-200); }
.sss-oge:first-of-type{ border-top:1px solid var(--gri-200); }
.sss-oge summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--bosluk-5);
  padding:var(--bosluk-5) var(--bosluk-1);
  font-weight:var(--agirlik-yari); font-size:var(--yazi-md);
  cursor:pointer; list-style:none; min-height:56px;
}
.sss-oge summary::-webkit-details-marker{ display:none; }
.sss-oge summary::after{
  content:""; flex-shrink:0; width:10px; height:10px;
  border-right:2px solid var(--gri-500); border-bottom:2px solid var(--gri-500);
  transform:rotate(45deg) translateY(-3px);
  transition:transform var(--gecis);
}
.sss-oge[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.sss-oge summary:hover{ color:var(--mavi); }
.sss-cevap{ padding:0 var(--bosluk-1) var(--bosluk-5); color:var(--gri-700); line-height:var(--satir-genis); max-width:62ch; }
.sss-not{
  max-width:var(--genislik-dar); margin:var(--bosluk-6) auto 0;
  font-size:var(--yazi-xs); color:var(--gri-500); line-height:var(--satir-orta);
}

/* ---------- 15. Kapanış ---------- */
.kapanis{
  position:relative; overflow:hidden; text-align:center;
  padding:var(--bosluk-24) 0;
  background:
    radial-gradient(58% 46% at 50% 0%, rgba(37,99,235,.17) 0%, rgba(0,0,0,0) 68%),
    var(--siyah);
  color:var(--beyaz);
}
.kapanis::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.085) 1px, transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 52%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 0%, black 52%, transparent 100%);
}
.kapanis .kapsayici{ position:relative; z-index:1; }
.kapanis h2{ color:var(--beyaz); max-width:18ch; margin:0 auto var(--bosluk-4); }
.kapanis p{ color:var(--gri-300); max-width:48ch; margin:0 auto var(--bosluk-8); line-height:var(--satir-genis); }
.kapanis-cta{ display:flex; gap:var(--bosluk-3); justify-content:center; flex-wrap:wrap; }

/* ---------- 16. Alt bilgi ---------- */
.alt{ background:var(--beyaz); border-top:1px solid var(--gri-200); padding:var(--bosluk-12) 0 var(--bosluk-8); }
.alt-duzen{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--bosluk-10); margin-bottom:var(--bosluk-8); }
.alt-marka p{ color:var(--gri-700); font-size:var(--yazi-sm); line-height:var(--satir-genis); margin-top:var(--bosluk-3); max-width:32ch; }
.alt h4{ font-size:var(--yazi-xs); font-weight:var(--agirlik-yari); letter-spacing:.09em; text-transform:uppercase; color:var(--gri-500); margin-bottom:var(--bosluk-3); }
.alt li a, .alt-iletisim a{
  display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  color:var(--gri-700); font-size:var(--yazi-sm);
}
.alt li a:hover, .alt-iletisim a:hover{ color:var(--siyah); }
.alt-sosyal{ display:flex; gap:var(--bosluk-3); margin-top:var(--bosluk-4); }
.alt-sosyal a{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--beyaz); transition:transform var(--gecis);
}
.alt-sosyal a:hover{ transform:translateY(-2px); }
.alt-sosyal svg{ width:20px; height:20px; }
.sosyal-ig{ background:radial-gradient(circle at 30% 105%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.sosyal-wa{ background:#25d366; }
.alt-son{
  display:flex; align-items:center; justify-content:space-between; gap:var(--bosluk-5);
  flex-wrap:wrap; padding-top:var(--bosluk-5); border-top:1px solid var(--gri-200);
}
.alt-son p, .alt-son a{ font-size:var(--yazi-xs); color:var(--gri-500); }
.alt-son a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px;
  text-decoration:underline; text-underline-offset:3px; }
.alt-son a:hover{ color:var(--siyah); }

/* ---------- 17. Kaydırma ritmi — JavaScript'siz ----------
   animation-timeline: view() destekleyen tarayıcıda bölüm içeriği görünür alana
   girerken 12px'lik sakin bir belirme yapar. Desteklemeyende animasyon hiç
   uygulanmaz; içerik her zaman görünür. Yalnızca bir kez çalışır (both). */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .belir{
      animation:belirme linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 32%;
    }
    @keyframes belirme{
      from{ opacity:0; transform:translateY(12px); }
      to{ opacity:1; transform:none; }
    }
  }
}

/* ---------- 18. Duyarlı ---------- */
@media (max-width:1000px){
  .hero-duzen{ grid-template-columns:1fr; gap:var(--bosluk-10); }
  .neden-duzen{ grid-template-columns:1fr; gap:var(--bosluk-10); }
  .adimlar{ grid-template-columns:repeat(2,1fr); }
  .problem-liste{ grid-template-columns:1fr; }
  .cozum-izgara{ grid-template-columns:1fr; }
  .ornek-izgara{ grid-template-columns:1fr; }
  .vaka-izgara{ grid-template-columns:1fr; }
  .alt-duzen{ grid-template-columns:1fr 1fr; gap:var(--bosluk-8); }
}

@media (max-width:640px){
  .kapsayici{ padding:0 var(--bosluk-5); }
  :root{
    --bosluk-24:64px; --bosluk-20:56px; --bosluk-16:44px;
    --bas-yuksek:64px;
  }
  .ust-ic{ min-height:64px; }
  .adimlar{ grid-template-columns:1fr; }
  .alt-duzen{ grid-template-columns:1fr; gap:var(--bosluk-8); }
  .hero-cta .dugme, .kapanis-cta .dugme{ width:100%; }
  .sayi b{ min-width:64px; font-size:1.45rem; }
  .balon{ max-width:92%; }
}

/* ---------- 19. Hareket azaltma ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .dugme-ana:hover, .cozum:hover, .alt-sosyal a:hover{ transform:none; }
}