/* ============================================================
   Kişisel Takip — CRM (kullanıcı web arayüzü) stili
   Token'lar tanıtım sitesiyle BİREBİR aynı: tek görsel kimlik.
   Dış kaynak yok — yazı tipi sistem yığını (Manrope CDN'den çekilmiyor).
   ============================================================ */

/* ---------- 1. Token'lar ---------- */
:root{
  --ink:    #16243A;
  --petrol: #147D73;
  --paper:  #F7F8F6;
  --amber:  #E8A13D;
  --red:    #D64545;
  --slate:  #6B7688;

  --c-belge:    #147D73;
  --c-garanti:  #4F5FD5;
  --c-abonelik: #8B5CF6;
  --c-ilac:     #E05D7B;
  --c-ev:       #C98A2D;

  --bg:        var(--paper);
  --bg-alt:    #EEF1EE;
  --card:      #FFFFFF;
  --fg:        var(--ink);
  --muted:     #5C6678;          /* küçük punto için koyulaştırılmış slate */
  --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-text:   #146B62;
  --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;
  --yan-en:    244px;
}

@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-text:   #57C4B6;
    --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%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;               /* taşma sıfır olmalı — son emniyet kemeri */
}
h1,h2,h3{ margin:0; line-height:1.25; letter-spacing:-.01em; overflow-wrap:anywhere; }
h1{ font-size:23px; } h2{ font-size:18px; } h3{ font-size:16px; }
p{ margin:0 0 10px; overflow-wrap:anywhere; }
a{ color:var(--brand); }
img,svg{ max-width:100%; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:6px; }
.gizli{ display:none !important; }
.gorunmez{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- 3. Açılış / yükleme ---------- */
.acilis{ min-height:100vh; display:grid; place-items:center; }
.donen{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--brand);
  animation:don .8s linear infinite;
}
@keyframes don{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .donen{ animation-duration:2.4s; } }

/* ---------- 4. Giriş / kayıt ekranı ---------- */
.kapi{ min-height:100vh; display:grid; place-items:center; padding:20px 16px 40px; }
.kapi-kutu{ width:100%; max-width:420px; }
.kapi-logo{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.kapi-logo .im{ width:34px; height:34px; border-radius:10px; background:var(--brand);
  display:grid; place-items:center; color:var(--brand-fg); font-weight:800; flex:none; }
.kapi-logo b{ font-size:19px; }
.kapi-alt{ text-align:center; margin-top:14px; color:var(--muted); font-size:14px; }
.sekmeler{ display:flex; gap:6px; background:var(--bg-alt); padding:4px; border-radius:12px; margin-bottom:16px; }
.sekmeler button{
  flex:1; min-width:0; padding:9px 6px; border:0; border-radius:9px; background:transparent;
  color:var(--muted); font:inherit; font-size:15px; font-weight:600; cursor:pointer;
}
.sekmeler button[aria-selected="true"]{ background:var(--card); color:var(--fg); box-shadow:var(--shadow-sm); }

/* ---------- 5. Uygulama iskeleti ---------- */
.iskelet{ min-height:100vh; }
.tepe{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line);
}
.tepe .marka{ display:flex; align-items:center; gap:9px; font-weight:800; min-width:0; }
.tepe .marka .im{ width:28px; height:28px; border-radius:8px; background:var(--brand);
  color:var(--brand-fg); display:grid; place-items:center; font-size:14px; flex:none; }
.tepe .marka span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tepe .bosluk{ flex:1; }
.menu-dugme{
  display:none; width:40px; height:40px; flex:none; border:1px solid var(--line);
  background:var(--card); color:var(--fg); border-radius:10px; cursor:pointer; font-size:18px;
}
.govde{ display:block; }
.yan{
  position:fixed; top:0; bottom:0; left:0; width:var(--yan-en); z-index:40;
  background:var(--card); border-right:1px solid var(--line);
  padding:14px 12px; overflow-y:auto; display:flex; flex-direction:column; gap:2px;
}
.yan .baslikcik{ font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:14px 8px 6px; }
.yan a{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
  color:var(--fg); text-decoration:none; font-size:15px; font-weight:600;
}
.yan a:hover{ background:var(--bg-alt); }
.yan a[aria-current="page"]{ background:var(--brand-soft); color:var(--brand); }
.yan a .nokta{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--muted); }
.yan .kapat{ display:none; }
.icerik{ padding:18px 16px 60px; max-width:980px; }
@media (min-width:900px){
  .tepe{ padding-left:calc(var(--yan-en) + 18px); }
  .icerik{ margin-left:var(--yan-en); padding:24px 26px 70px; }
}
@media (max-width:899.98px){
  .menu-dugme{ display:block; }
  .yan{ transform:translateX(-102%); transition:transform .18s ease; box-shadow:var(--shadow); }
  body.menu-acik .yan{ transform:none; }
  .yan .kapat{ display:block; align-self:flex-end; border:0; background:transparent;
    color:var(--muted); font-size:22px; cursor:pointer; padding:2px 8px; }
}
@media (prefers-reduced-motion:reduce){ .yan{ transition:none; } }
.katman{ position:fixed; inset:0; z-index:35; background:rgba(10,16,26,.45); }

/* ---------- 6. Kart ve yerleşim ---------- */
.kart{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow-sm); margin-bottom:14px;
}
.kart.sik{ padding:13px 14px; }
.satir{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.satir .bosluk{ flex:1 1 auto; min-width:0; }
.izgara{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.sayfa-basi{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.sayfa-basi .bosluk{ flex:1 1 200px; min-width:0; }
.aciklama{ color:var(--muted); font-size:14px; margin:4px 0 0; }
.bos{ text-align:center; color:var(--muted); padding:34px 16px; }
.bos .bos-im{ font-size:30px; display:block; margin-bottom:8px; }

/* ---------- 7. Düğmeler ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 16px; border-radius:11px; border:1px solid transparent;
  background:var(--brand); color:var(--brand-fg); font:inherit; font-size:15px; font-weight:700;
  cursor:pointer; text-decoration:none; min-height:42px; max-width:100%;
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn.ikincil{ background:var(--card); color:var(--fg); border-color:var(--line); }
.btn.ikincil:hover{ background:var(--bg-alt); }
.btn.sessiz{ background:transparent; color:var(--muted); border-color:transparent; padding:8px 10px; min-height:36px; }
.btn.sessiz:hover{ background:var(--bg-alt); color:var(--fg); }
.btn.tehlike{ background:var(--red); color:#fff; }
.btn.kucuk{ padding:7px 11px; font-size:14px; min-height:34px; border-radius:9px; }
.btn.tam{ width:100%; }

/* ---------- 8. Form ---------- */
.form{ display:grid; gap:13px; }
.form.ikili{ grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .form.ikili{ grid-template-columns:1fr; } }
.alan{ display:grid; gap:5px; min-width:0; }
.alan.genis{ grid-column:1 / -1; }
.alan > label{ font-size:13px; font-weight:700; color:var(--muted); }
.alan input,.alan select,.alan textarea{
  width:100%; max-width:100%; padding:11px 12px; border-radius:11px; font:inherit; font-size:16px;
  border:1px solid var(--line); background:var(--card); color:var(--fg);
}
.alan textarea{ min-height:84px; resize:vertical; }
.alan .ipucu{ font-size:12.5px; color:var(--muted); }
.alan input:disabled{ background:var(--bg-alt); color:var(--muted); }
.onay{ display:flex; align-items:flex-start; gap:9px; font-size:14.5px; }
.onay input{ width:19px; height:19px; margin-top:2px; flex:none; }
.hata-metin{ color:var(--crit-text); font-size:13.5px; }

/* ---------- 9. Uyarı kutuları ---------- */
.uyari{ border-radius:12px; padding:12px 14px; font-size:14.5px; border:1px solid transparent; margin-bottom:12px; }
.uyari.bilgi{ background:var(--brand-soft); color:var(--fg); border-color:var(--line-soft); }
.uyari.dikkat{ background:var(--warn-soft); color:var(--warn-text); }
.uyari.kritik{ background:var(--crit-soft); color:var(--crit-text); }
.uyari.olumlu{ background:var(--ok-soft); color:var(--ok-text); }
.uyari b{ display:block; margin-bottom:2px; }

/* ---------- 10. Rozet ---------- */
.rozet{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  font-size:12.5px; font-weight:700; background:var(--bg-alt); color:var(--muted); white-space:nowrap;
}
.rozet.olumlu{ background:var(--ok-soft); color:var(--ok-text); }
.rozet.dikkat{ background:var(--warn-soft); color:var(--warn-text); }
.rozet.kritik{ background:var(--crit-soft); color:var(--crit-text); }
.rozet .nokta{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }

/* ---------- 11. Zaman şeridi (ana ekranın imzası) ---------- */
.serit{ position:relative; margin:0; padding:0 0 0 26px; list-style:none; }
.serit::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--line),var(--line-soft)); border-radius:2px;
}
.serit-baslik{
  display:flex; align-items:center; gap:8px; margin:20px 0 10px; font-size:13px;
  font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
}
.serit-baslik:first-child{ margin-top:4px; }
.serit li{ position:relative; margin-bottom:10px; }
.serit li::before{
  content:""; position:absolute; left:-23px; top:20px; width:12px; height:12px; border-radius:50%;
  background:var(--modul,var(--brand)); border:2px solid var(--card); box-shadow:0 0 0 2px var(--modul,var(--brand));
}
.oge{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--modul,var(--brand));
  border-radius:12px; padding:12px 13px; cursor:pointer; font:inherit; color:var(--fg);
  box-shadow:var(--shadow-sm);
}
.oge:hover{ border-color:var(--modul,var(--brand)); }
.oge .metin{ flex:1 1 auto; min-width:0; }
.oge .metin b{ display:block; font-size:15.5px; overflow-wrap:anywhere; }
.oge .metin small{ color:var(--muted); font-size:13px; }
.sayac{
  flex:none; text-align:center; min-width:62px; padding:6px 8px; border-radius:10px;
  background:var(--bg-alt); color:var(--fg);
}
.sayac b{ display:block; font-size:19px; line-height:1.1; }
.sayac small{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.sayac.dikkat{ background:var(--warn-soft); color:var(--warn-text); }
.sayac.dikkat small{ color:inherit; }
.sayac.kritik{ background:var(--crit-soft); color:var(--crit-text); }
.sayac.kritik small{ color:inherit; }
.modul-etiket{ font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--modul); }

/* ---------- 12. Liste kartları ---------- */
.kayit{
  display:flex; align-items:flex-start; gap:12px; padding:13px 14px;
  border:1px solid var(--line); border-left:4px solid var(--modul,var(--brand));
  border-radius:12px; background:var(--card); margin-bottom:10px; box-shadow:var(--shadow-sm);
}
.kayit .govdesi{ flex:1 1 auto; min-width:0; }
.kayit .govdesi b{ font-size:15.5px; overflow-wrap:anywhere; }
.kayit .ozet{ color:var(--muted); font-size:13.5px; margin-top:3px; overflow-wrap:anywhere; }
.kayit .islem{ display:flex; gap:4px; flex:none; flex-wrap:wrap; justify-content:flex-end; }
.suzgec{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.suzgec input,.suzgec select{
  padding:9px 11px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--fg); font:inherit; font-size:15px; min-width:0; flex:1 1 180px;
}

/* ---------- 13. Kip (modal) ---------- */
.kip-zemin{
  position:fixed; inset:0; z-index:60; background:rgba(10,16,26,.5);
  display:flex; align-items:flex-end; justify-content:center; padding:0;
  overflow-y:auto; overscroll-behavior:contain;
}
@media (min-width:640px){ .kip-zemin{ align-items:flex-start; padding:36px 18px; } }
.kip{
  background:var(--card); width:100%; max-width:560px; border-radius:18px 18px 0 0;
  border:1px solid var(--line); box-shadow:var(--shadow); max-height:92vh;
  display:flex; flex-direction:column;
}
@media (min-width:640px){ .kip{ border-radius:18px; max-height:none; } }
.kip-bas{ display:flex; align-items:center; gap:10px; padding:15px 16px; border-bottom:1px solid var(--line-soft); }
.kip-bas h2{ flex:1; min-width:0; overflow-wrap:anywhere; }
.kip-bas button{ border:0; background:transparent; color:var(--muted); font-size:22px; cursor:pointer;
  line-height:1; padding:4px 8px; border-radius:8px; }
.kip-ic{ padding:16px; overflow-y:auto; }
.kip-alt{ display:flex; gap:9px; justify-content:flex-end; padding:13px 16px;
  border-top:1px solid var(--line-soft); flex-wrap:wrap; }
.kip-alt .btn{ flex:1 1 auto; }
@media (min-width:640px){ .kip-alt .btn{ flex:0 0 auto; } }

/* ---------- 14. Bildirim (toast) ---------- */
.bildirimler{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:80;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
}
.bildirim{
  background:var(--fg); color:var(--bg); padding:11px 15px; border-radius:12px;
  font-size:14.5px; font-weight:600; box-shadow:var(--shadow); max-width:520px; width:100%;
  overflow-wrap:anywhere;
}
.bildirim.hata{ background:var(--red); color:#fff; }
.bildirim.olumlu{ background:var(--petrol); color:#fff; }

/* ---------- 15. Tablo benzeri satırlar ---------- */
.dizi{ display:grid; gap:2px; }
.dizi .cift{ display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.dizi .cift:last-child{ border-bottom:0; }
.dizi .cift dt{ color:var(--muted); font-size:14px; flex:0 0 150px; }
.dizi .cift dd{ margin:0; flex:1 1 160px; min-width:0; overflow-wrap:anywhere; font-size:14.5px; }

/* ---------- 16. Anahtar (toggle) ---------- */
.anahtar{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.anahtar:last-child{ border-bottom:0; }
.anahtar .bosluk{ flex:1; min-width:0; }
.anahtar .ad{ font-weight:700; font-size:15px; }
.anahtar .alt{ color:var(--muted); font-size:13px; }
.svic{ position:relative; width:48px; height:28px; flex:none; }
.svic input{ position:absolute; inset:0; opacity:0; margin:0; width:100%; height:100%; cursor:pointer; }
.svic span{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .15s; pointer-events:none; }
.svic span::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; transition:transform .15s; box-shadow:var(--shadow-sm); }
.svic input:checked + span{ background:var(--brand); }
.svic input:checked + span::after{ transform:translateX(20px); }
.svic input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- 17. Kaydırma kutusu (uzun içerik) ---------- */
.kaydir{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.kod{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px;
  background:var(--bg-alt); border:1px dashed var(--line); border-radius:10px;
  padding:10px 12px; overflow-wrap:anywhere; user-select:all;
}
.metin-kutu{ max-height:340px; overflow-y:auto; white-space:pre-wrap; font-size:14.5px;
  background:var(--bg-alt); border-radius:10px; padding:12px; overflow-wrap:anywhere; }