/* ============================================================
   Kişisel Takip — tanıtım sitesi ortak stil
   Dış kaynak YOK: font CDN'i, analytics, dış görsel kullanılmaz.
   Yazı tipi: Manrope istenmişti; dışarıdan çekilmediği için
   sistem yığınına düşülüyor (aynı geometrik-hümanist his).
   ============================================================ */

/* ---------- 1. Token'lar ---------- */
:root{
  /* marka token'ları — değiştirilmez */
  --ink:    #16243A;
  --petrol: #147D73;
  --paper:  #F7F8F6;
  --amber:  #E8A13D;
  --red:    #D64545;
  --slate:  #6B7688;

  /* modül renkleri */
  --c-belge:    #147D73;
  --c-garanti:  #4F5FD5;
  --c-abonelik: #8B5CF6;
  --c-ilac:     #E05D7B;
  --c-ev:       #C98A2D;

  /* açık tema uygulaması */
  --bg:        var(--paper);
  --bg-alt:    #EEF1EE;
  --card:      #FFFFFF;
  --fg:        var(--ink);
  /* küçük punto için koyulaştırılmış slate (AA kontrast) */
  --muted:     #5C6678;
  --line:      #DFE3DF;
  --line-soft: #E9ECE9;
  --brand:     var(--petrol);
  --brand-fg:  #FFFFFF;
  --brand-soft:#E4F0EE;
  --warn-text: #8A5A0C;
  --warn-soft: #FBF0DC;
  --crit-text: #B93A3A;
  --crit-soft: #FBE6E6;
  --ok-soft:   #E4F0EE;
  --shadow:    0 1px 2px rgba(22,36,58,.05), 0 8px 24px rgba(22,36,58,.06);
  --shadow-sm: 0 1px 2px rgba(22,36,58,.06);
  --radius:    14px;
  --radius-sm: 10px;
  --maxw:      1100px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:        #0E1622;
    --bg-alt:    #131D2B;
    --card:      #16202E;
    --fg:        #E9EDF3;
    --muted:     #A3AFC0;
    --line:      #263243;
    --line-soft: #1E2939;
    --brand:     #37AFA1;
    --brand-fg:  #06201D;
    --brand-soft:#123531;
    --warn-text: #E8A13D;
    --warn-soft: #33260F;
    --crit-text: #F08585;
    --crit-soft: #351B1B;
    --ok-soft:   #123531;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);

    --c-belge:    #37AFA1;
    --c-garanti:  #8E99EE;
    --c-abonelik: #B392FB;
    --c-ilac:     #F58FA6;
    --c-ev:       #E0B263;
  }
}

/* ---------- 2. Temel ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
     transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;              /* yatay kaydırma sıfır kalsın */
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  word-break:normal;
}

img,svg,table{ max-width:100%; }
svg{ height:auto; }

h1,h2,h3,h4{ line-height:1.22; margin:0 0 .5em; font-weight:750; letter-spacing:-.015em; }
h1{ font-size:clamp(28px,5.2vw,44px); }
h2{ font-size:clamp(23px,3.6vw,31px); }
h3{ font-size:clamp(18px,2.4vw,21px); }
h4{ font-size:17px; }
p{ margin:0 0 1em; }
p:last-child,ul:last-child,ol:last-child{ margin-bottom:0; }
strong{ font-weight:700; }
small{ font-size:14px; }

a{ color:var(--brand); text-underline-offset:3px; }
a:hover{ text-decoration:none; }

:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}

hr{ border:0; border-top:1px solid var(--line); margin:36px 0; }

/* ---------- 3. Yerleşim ---------- */
.kap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }
.bolum{ padding:56px 0; }
.bolum-alt{ background:var(--bg-alt); }
.dar{ max-width:70ch; }
.orta{ text-align:center; margin-inline:auto; }
.ustluk{
  font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand); margin:0 0 10px;
}
.giris{ font-size:clamp(17px,2.2vw,20px); color:var(--muted); max-width:62ch; }
.atla{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brand); color:var(--brand-fg); padding:10px 16px; border-radius:0 0 8px 0;
}
.atla:focus{ left:0; }

/* ---------- 4. Başlık / gezinme ---------- */
.ust{
  position:sticky; top:0; z-index:40;
  background:var(--bg);   /* color-mix desteklemeyen tarayıcı için düz zemin */
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter: blur(4px)){ .ust{ background:var(--bg); } }
/* İki satırlı başlık: 1) marka + çağrı düğmesi, 2) gezinme.
   Tek satıra sığdırmak 1100px kapta ancak 14px yazıyla mümkündü ve yazı tipi
   metrikleri değişince taşıyordu; iki satır her genişlikte kararlı. */
.ust-ic{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 16px;
  padding-block:11px;
}
.marka{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:800; font-size:18px; letter-spacing:-.02em;
  color:var(--fg); text-decoration:none; flex:0 0 auto;
}
.marka svg{ flex:0 0 auto; }
.gez{
  order:3; width:100%; display:flex; flex-wrap:wrap; gap:2px 2px;
  margin-top:7px; padding-top:6px; border-top:1px solid var(--line-soft);
}
.gez a{
  color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:600;
  padding:6px 9px; border-radius:8px; white-space:nowrap;
}
.gez a:hover{ color:var(--fg); background:var(--line-soft); }
.gez a[aria-current="page"]{ color:var(--brand); background:var(--brand-soft); }
.ust .dugme{ margin-inline-start:auto; }
/* Dar ekranda gezinme iki satıra sarıyor ve yapışkan başlık 179px'e çıkıyordu —
   ekranın beşte biri. O yüzden telefonda başlık yapışkan DEĞİL; çağrı düğmesi
   zaten her sayfanın giriş bölümünde ve kapanış bandında tekrar ediyor. */
@media (max-width:700px){
  .ust{ position:static; backdrop-filter:none; background:var(--bg); }
}
@media (max-width:430px){
  /* marka + çağrı düğmesi tek satırda kalsın (360px'de bile) */
  .ust-ic{ gap:0 10px; }
  .marka{ gap:7px; }
  .marka span{ font-size:15.5px; }
  .marka svg{ width:26px; height:26px; }
  .ust .dugme{ padding:9px 12px; font-size:14px; }
  .gez a{ font-size:14px; padding:5px 8px; }
}
/* 375px altında marka + düğme yan yana 4px taşıyordu; düğmeyi kısaltmak yerine
   tam genişliğe alıyoruz — dar telefonda daha büyük dokunma hedefi. */
@media (max-width:375px){
  .marka span{ font-size:15px; }
  .ust .dugme{ order:2; width:100%; margin:9px 0 0; padding:11px 12px; font-size:15px; }
}

/* ---------- 5. Düğmeler ---------- */
.dugme{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:11px;
  font-size:16px; font-weight:700; text-decoration:none; text-align:center;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  max-width:100%;
}
.dugme:hover{ transform:translateY(-1px); }
.dugme-ana{ background:var(--brand); color:var(--brand-fg); box-shadow:var(--shadow-sm); }
.dugme-ana:hover{ box-shadow:var(--shadow); }
.dugme-ikincil{ background:transparent; color:var(--fg); border-color:var(--line); }
.dugme-ikincil:hover{ border-color:var(--brand); color:var(--brand); }
.dugme-kucuk{ padding:9px 15px; font-size:15px; border-radius:9px; }
.dugmeler{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.orta .dugmeler{ justify-content:center; }
.not-kart{ margin-top:14px; font-size:14.5px; color:var(--muted); }

/* ---------- 6. Kartlar / ızgara ---------- */
.izgara{ display:grid; gap:18px; }
.iz-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); }
/* auto-fit 1060px kapta 3 sütun veriyor ve 4 kartlık bölümler 3+1 kalıyordu;
   iki sütun bu bölümlerin tasarım niyeti. */
@media (min-width:860px){ .iz-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.iz-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); }
.iz-4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.izgara > *{ min-width:0; }

.kart{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-sm); min-width:0;
}
.kart h3{ margin-bottom:.35em; }
.kart p{ color:var(--muted); font-size:16px; }

/* modül kartı: sol renk şeridi + rozet */
a.modul-kart{ display:block; text-decoration:none; color:inherit; }
.modul-kart{
  position:relative; overflow:hidden;
  border-top:3px solid var(--mrenk,var(--brand));
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a.modul-kart:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.modul-kart .mbaslik{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.mikon{
  width:40px; height:40px; flex:0 0 auto; border-radius:11px;
  display:grid; place-items:center;
  background:var(--line-soft);
  background:color-mix(in srgb, var(--mrenk) 14%, transparent);
  color:var(--mrenk);
}
.modul-kart h3{ margin:0; font-size:19px; }
.devam{ display:inline-block; margin-top:14px; font-weight:700; font-size:15px; color:var(--mrenk,var(--brand)); }

/* ---------- 7. Zaman şeridi (ana ekran imzası) ---------- */
.serit{ list-style:none; margin:0; padding:0; position:relative; }
.serit::before{
  content:""; position:absolute; left:19px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(180deg,var(--line),var(--line) 70%,transparent);
}
.serit li{ position:relative; padding:0 0 14px 52px; }
.serit li:last-child{ padding-bottom:0; }
.nokta{
  position:absolute; left:11px; top:20px; width:18px; height:18px; border-radius:50%;
  background:var(--card); border:3px solid var(--mrenk,var(--brand));
  box-shadow:0 0 0 4px var(--bg);
}
.serit-kart{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--mrenk,var(--brand));
  border-radius:var(--radius-sm); padding:13px 15px;
  display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-sm);
}
.serit-metin{ min-width:0; flex:1 1 auto; }
.serit-metin .b{ font-weight:700; font-size:15.5px; display:block; }
.serit-metin .t{ font-size:13.5px; color:var(--muted); }
.sayac{ flex:0 0 auto; position:relative; width:56px; height:56px; }
.sayac svg{ display:block; transform:rotate(-90deg); }
.sayac .rakam{
  position:absolute; inset:0; display:grid; place-items:center; line-height:1;
  font-size:15px; font-weight:800; color:var(--mrenk,var(--brand));
}
.sayac .rakam small{ display:block; font-size:9px; font-weight:700; color:var(--muted); letter-spacing:.04em; }

.ekran{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:20px 18px; box-shadow:var(--shadow); min-width:0;
}
.ekran-ust{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line-soft);
}
.ekran-ust b{ font-size:15px; }
.ekran-ust span{ font-size:13px; color:var(--muted); }
.kahraman{
  display:grid; gap:36px; align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
@media (max-width:880px){ .kahraman{ grid-template-columns:1fr; gap:30px; } }

/* ---------- 8. Adımlar ---------- */
.adimlar{ counter-reset:adim; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.adim{ position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); min-width:0; }
.adim::before{
  counter-increment:adim; content:counter(adim);
  display:grid; place-items:center; width:34px; height:34px; margin-bottom:14px;
  border-radius:10px; background:var(--brand-soft); color:var(--brand);
  font-weight:800; font-size:16px;
}
.adim h3{ font-size:18px; }
.adim p{ color:var(--muted); font-size:16px; margin:0; }

/* ---------- 9. Listeler ---------- */
.onay{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.onay li{ position:relative; padding-left:30px; color:var(--fg); }
.onay li::before{
  content:""; position:absolute; left:2px; top:.52em;
  width:14px; height:8px; border-left:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:rotate(-45deg);
}
.nokta-liste{ margin:0; padding-left:1.15em; }
.nokta-liste li{ margin-bottom:.5em; }
.nokta-liste li::marker{ color:var(--brand); }

/* alan tablosu */
.alanlar{ width:100%; border-collapse:collapse; font-size:16px; }
.alanlar caption{ text-align:left; color:var(--muted); font-size:14.5px; padding-bottom:10px; }
.alanlar th,.alanlar td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.alanlar thead th{ font-size:13.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-bottom:1px solid var(--line); }
.alanlar tbody th{ font-weight:700; white-space:nowrap; }
.alanlar tr:last-child td,.alanlar tr:last-child th{ border-bottom:0; }
.tablo-sar{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card); padding:6px 4px; }

/* ---------- 10. Rozet / uyarı kutusu ---------- */
.rozet{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:999px; font-size:13.5px; font-weight:700;
  background:var(--brand-soft); color:var(--brand); border:1px solid transparent;
}
.rozet-uyari{ background:var(--warn-soft); color:var(--warn-text); }
.rozet-kritik{ background:var(--crit-soft); color:var(--crit-text); }
.rozet-notr{ background:var(--line-soft); color:var(--muted); }

.kutu{
  border:1px solid var(--line); border-left:4px solid var(--brand);
  background:var(--card); border-radius:var(--radius-sm);
  padding:18px 20px; margin:24px 0;
}
.kutu h3,.kutu h4{ margin-top:0; }
.kutu-uyari{ border-left-color:var(--amber); background:var(--warn-soft); }
.kutu-uyari p{ color:var(--fg); }
.kutu-kritik{ border-left-color:var(--red); background:var(--crit-soft); }

/* senaryo */
.senaryo{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow-sm); }
.senaryo .kim{ font-size:14px; font-weight:700; color:var(--mrenk,var(--brand));
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; }

/* ---------- 11. SSS ---------- */
.sss{ display:grid; gap:10px; }
.sss details{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:2px 18px;
}
.sss summary{
  cursor:pointer; padding:15px 30px 15px 0; font-weight:700; font-size:17px;
  list-style:none; position:relative;
}
.sss summary::-webkit-details-marker{ display:none; }
.sss summary::after{
  content:""; position:absolute; right:2px; top:50%; width:9px; height:9px;
  border-right:2.5px solid var(--muted); border-bottom:2.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); transition:transform .15s ease;
}
.sss details[open] summary::after{ transform:translateY(-25%) rotate(-135deg); }
.sss details > div{ padding:0 0 16px; color:var(--muted); }
.sss details > div p:last-child{ margin-bottom:0; }

/* ---------- 12. Kapanış bandı ---------- */
.band{
  background:var(--ink); color:#F2F5F9; border-radius:20px; padding:44px 32px; text-align:center;
}
@media (prefers-color-scheme: dark){ .band{ background:var(--bg-alt); border:1px solid var(--line); } }
.band h2{ color:#FFFFFF; }
.band p{ color:#C2CBD8; max-width:56ch; margin-inline:auto; }
.band .dugme-ana{ background:var(--petrol); color:#FFFFFF; }
@media (prefers-color-scheme: dark){ .band .dugme-ana{ background:var(--brand); color:var(--brand-fg); } }
.band .dugme-ikincil{ color:#F2F5F9; border-color:rgba(255,255,255,.32); }
.band .dugme-ikincil:hover{ color:#FFFFFF; border-color:#FFFFFF; }
@media (max-width:480px){ .band{ padding:34px 20px; } }

/* ---------- 13. Alt bilgi ---------- */
.alt{ border-top:1px solid var(--line); background:var(--bg-alt); padding:44px 0 30px; margin-top:64px; }
.alt-izgara{ display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.alt h2{ font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:12px; }
.alt ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.alt a{ color:var(--fg); text-decoration:none; font-size:15.5px; }
.alt a:hover{ color:var(--brand); text-decoration:underline; }
.alt-son{
  margin-top:32px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between;
  font-size:14px; color:var(--muted);
}
.alt-son p{ margin:0; }

/* ---------- 14. Hukuki metin sayfaları ---------- */
.hukuk{ max-width:74ch; }
.hukuk h2{ margin-top:1.8em; font-size:21px; }
.hukuk h2:first-of-type{ margin-top:1em; }
.hukuk p,.hukuk li{ color:var(--fg); }
.hukuk ul{ padding-left:1.15em; }
.taslak-uyari{
  border:1px solid var(--amber); background:var(--warn-soft); color:var(--warn-text);
  border-radius:var(--radius-sm); padding:14px 18px; font-size:15px; font-weight:600; margin-bottom:28px;
}

/* ---------- 15. Küçük ekran düzeltmeleri ---------- */
@media (max-width:480px){
  body{ font-size:16.5px; }
  .kap{ padding-inline:16px; }
  .bolum{ padding:42px 0; }
  .kart,.adim,.senaryo{ padding:20px; }
  .serit li{ padding-left:46px; }
  .serit::before{ left:16px; }
  .nokta{ left:8px; }
  .serit-kart{ gap:10px; padding:12px; }
  .sayac{ width:50px; height:50px; }
  .dugmeler .dugme{ flex:1 1 auto; }
}