/* ============================================================================
   PATROFF PANEL TASARIM SISTEMI (D2+)
   Mobil once (380px taban), 44px dokunma hedefi, tablo->kart, iskelet, bos durum.
   Tek stil dosyasi. Isik + koyu tema (prefers-color-scheme). Dis bagimlilik YOK
   (CSP: default-src 'self'). Ham enum ekrana durum_sozluk ile cevrilir; bu dosya
   yalniz gorunumu tasir.
   ============================================================================ */

/* ---- 1. Tokenlar -------------------------------------------------------- */
:root{
  /* Renk (isik) */
  --arka:#f4f6f8;        /* sayfa zemini */
  --kart:#ffffff;        /* kart/panel zemini */
  --kart2:#fbfcfd;       /* ikincil zemin (satir, ic kutu) */
  --metin:#1b2733;       /* ana metin */
  --soluk:#5b6b7b;       /* ikincil metin */
  --cizgi:#dce3ea;       /* kenarlik */
  --vurgu:#0d7d6b;       /* marka yesili (aksan) */
  --vurgu-koyu:#0a6153;
  --iyi:#127a3e;         /* saglikli/olumlu */
  --iyi-zemin:#e6f4ec;
  --kotu:#b42318;        /* hata/kritik */
  --kotu-zemin:#fbeae8;
  --uyari:#b25e00;       /* dikkat/sari */
  --uyari-zemin:#fbf1e2;
  --bilgi:#1d5fbf;       /* bilgi/mavi */
  --bilgi-zemin:#e7f0fb;
  /* Olcek */
  --bosluk:16px;
  --bosluk-s:8px;
  --bosluk-l:24px;
  --yuvarlak:12px;
  --yuvarlak-s:8px;
  --dokunma:44px;        /* asgari dokunma hedefi */
  --golge:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);
  --olcu:1180px;         /* icerik azami genislik */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --arka:#0f151b; --kart:#1a2430; --kart2:#141d27; --metin:#e6edf3; --soluk:#94a5b6;
    --cizgi:#2a3744; --vurgu:#3bbfa7; --vurgu-koyu:#5fd4be;
    --iyi:#4ade80; --iyi-zemin:#12301f; --kotu:#f87171; --kotu-zemin:#3a1a17;
    --uyari:#fbbf6b; --uyari-zemin:#33260f; --bilgi:#7cb0f5; --bilgi-zemin:#132538;
    --golge:0 1px 2px rgba(0,0,0,.35);
  }
}

/* ---- 2. Sifirlama + taban ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);font-size:16px;line-height:1.5;
  color:var(--metin);background:var(--arka);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--vurgu);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em}
h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.05rem}
p{margin:0 0 .8em}
small{font-size:.82rem}
code,pre,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px;border-radius:4px}
img{max-width:100%;height:auto}

/* ---- 3. Baslik seridi (ust) -------------------------------------------- */
.ust{
  display:flex;align-items:center;gap:var(--bosluk);flex-wrap:wrap;
  padding:10px var(--bosluk);background:var(--kart);border-bottom:1px solid var(--cizgi);
  position:sticky;top:0;z-index:30;
}
.marka{font-weight:800;font-size:1.15rem;color:var(--metin);white-space:nowrap}
.marka span{color:var(--vurgu)}
/* Menu TEK SATIR yatay kaydirir (mobilde dikey yigilip tasmaz) */
.menu{display:flex;gap:2px;flex-wrap:nowrap;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.menu a{
  display:inline-flex;align-items:center;min-height:var(--dokunma);
  padding:6px 12px;border-radius:999px;color:var(--soluk);font-size:.92rem;white-space:nowrap;flex:none;
}
.menu a:hover{background:var(--kart2);text-decoration:none;color:var(--metin)}
.menu a.et{background:var(--vurgu);color:#fff}
.cikis{display:flex;align-items:center;gap:10px}
.cikis .kim{color:var(--soluk);font-size:.85rem}
/* Mobil baslik: marka + cikis ustte, menu tam genislik altta yatay kaydirir */
@media(max-width:640px){
  .ust{gap:8px;padding:8px 12px}
  .marka{order:1}
  .cikis{order:2;margin-left:auto}
  .cikis .kim{display:none}
  .menu{order:3;flex-basis:100%;width:100%;padding-bottom:2px}
}
.govde{max-width:var(--olcu);margin:0 auto;padding:var(--bosluk-l) var(--bosluk) 64px}
.altbilgi,.alt{max-width:var(--olcu);margin:0 auto;padding:20px var(--bosluk);color:var(--soluk);font-size:.82rem;display:flex;gap:14px;flex-wrap:wrap;border-top:1px solid var(--cizgi)}
.alt span::before{content:"·";margin-right:14px;color:var(--cizgi)}
.alt span:first-child::before{content:none}

/* ---- 4. Dugmeler + form ------------------------------------------------ */
button,.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--dokunma);padding:10px 18px;border-radius:var(--yuvarlak-s);
  border:1px solid var(--vurgu);background:var(--vurgu);color:#fff;
  font:600 .95rem/1 var(--font);cursor:pointer;
}
button:hover,.dugme:hover{background:var(--vurgu-koyu);text-decoration:none}
button.ikincil,.dugme.ikincil{background:transparent;color:var(--vurgu)}
button.tehlike,.dugme.tehlike{background:var(--kotu);border-color:var(--kotu)}
button.sade,.dugme.sade{background:var(--kart);color:var(--metin);border-color:var(--cizgi)}
button:disabled{opacity:.5;cursor:not-allowed}
label{display:block;font-weight:600;font-size:.9rem;margin:12px 0 4px}
.alan,input[type=text],input[type=number],input[type=password],input[type=email],
input[type=search],input[type=tel],input[type=date],select,textarea{
  width:100%;min-height:var(--dokunma);padding:10px 12px;
  border:1px solid var(--cizgi);border-radius:var(--yuvarlak-s);
  background:var(--kart);color:var(--metin);font:inherit;font-size:.95rem;
}
textarea{min-height:96px;resize:vertical}
.alan-yardim,.ipucu{color:var(--soluk);font-size:.82rem;margin:4px 0 0}
.zorunlu::after{content:" *";color:var(--kotu)}
.birim{color:var(--soluk);font-size:.85rem;margin-left:6px}
.dar{max-width:420px}
.gelismis,details.gelismis{margin-top:12px}
details>summary{cursor:pointer;min-height:var(--dokunma);display:flex;align-items:center;color:var(--vurgu);font-weight:600}
.schema-form,.settings-form{display:flex;flex-direction:column;gap:2px}
.cift-onay-kutu{border:1px solid var(--uyari);background:var(--uyari-zemin);border-radius:var(--yuvarlak-s);padding:12px;margin:12px 0}
.cift-onay-kutu label{display:flex;align-items:center;gap:8px;font-weight:600}
.cift-onay-kutu input{width:auto;min-height:auto}

/* ---- 5. Kart + panel + izgara ----------------------------------------- */
.panel{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:var(--bosluk);box-shadow:var(--golge);margin-bottom:var(--bosluk)}
.altbaslik{color:var(--soluk);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:var(--bosluk);box-shadow:var(--golge);display:block;color:var(--metin)}
a.kart:hover{border-color:var(--vurgu);text-decoration:none;transform:translateY(-1px)}
.kartlar{display:grid;grid-template-columns:1fr;gap:var(--bosluk)}
@media(min-width:560px){.kartlar{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}

/* Istatistik dizisi (rakam + etiket) */
.rakamlar{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:var(--bosluk) 0}
@media(min-width:560px){.rakamlar{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.rakam{display:flex;flex-direction:column;gap:2px;background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:14px}
.rakam b,.rakam .deger{font-size:1.6rem;font-weight:800;line-height:1.1}
.rakam .etiket,.etiket{color:var(--soluk);font-size:.82rem}
.rakam.dikkat{border-color:var(--uyari);background:var(--uyari-zemin)}
.rakam.kotu{border-color:var(--kotu);background:var(--kotu-zemin)}
.rakam.iyi{border-color:var(--iyi);background:var(--iyi-zemin)}

/* ---- 6. Rozet (durum etiketi) ----------------------------------------- */
.rozet{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:600;border:1px solid transparent;white-space:nowrap}
.rozet::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.rz-iyi{color:var(--iyi);background:var(--iyi-zemin)}
.rz-kotu{color:var(--kotu);background:var(--kotu-zemin)}
.rz-uyari{color:var(--uyari);background:var(--uyari-zemin)}
.rz-notr{color:var(--soluk);background:var(--kart2)}
.rz-bilgi{color:var(--bilgi);background:var(--bilgi-zemin)}
.rozet-cift{display:inline-flex;gap:4px;flex-wrap:wrap}

/* ---- 7. Tablo + mobilde karta donusum --------------------------------- */
.tablo-sar{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);background:var(--kart)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
thead th{text-align:left;color:var(--soluk);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;border-bottom:1px solid var(--cizgi);background:var(--kart2)}
tbody td{padding:11px 12px;border-bottom:1px solid var(--cizgi);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--kart2)}
.matris td,.matris th{white-space:nowrap}
/* Mobilde her satir bir kart: her td, veri-etiketi (data-e) ile basliklanir */
@media(max-width:600px){
  /* kartli tablo mobilde kart olur; yatay kaydirma yok, uzun metin sarar */
  .tablo-sar:has(table.kartli){overflow-x:visible;border:none;background:none;border-radius:0}
  table.kartli{width:100%;display:block}
  table.kartli thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.kartli tbody{display:block;width:100%}
  table.kartli tbody tr{display:block;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);margin:0 0 10px;background:var(--kart)}
  table.kartli tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--cizgi);padding:9px 12px;min-width:0;overflow-wrap:anywhere;word-break:break-word;text-align:right}
  table.kartli tbody td::before{content:attr(data-e);color:var(--soluk);font-weight:600;font-size:.8rem;flex:none;text-align:left}
  table.kartli tbody td:last-child{border-bottom:none}
  .tablo-sar:has(table.kartli){border:none;background:none;overflow:visible}
}

/* ---- 8. Bos durum ------------------------------------------------------ */
.bos{text-align:center;padding:40px var(--bosluk);color:var(--soluk)}
.bos .simge{font-size:2rem;margin-bottom:8px}
.bos h3{color:var(--metin)}
.bos-liste{display:inline-flex;flex-direction:column;gap:6px;text-align:left;margin-top:12px;color:var(--soluk);font-size:.9rem}
.bos-liste li{list-style:none;display:flex;gap:8px;align-items:center}
.bos-liste li::before{content:"•";color:var(--iyi)}

/* ---- 9. Iskelet (yukleniyor) ------------------------------------------ */
.iskelet{position:relative;overflow:hidden;background:var(--kart2);border-radius:var(--yuvarlak-s);min-height:16px}
.iskelet::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(125,145,165,.14),transparent);animation:kayan 1.3s infinite}
@keyframes kayan{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.iskelet::after{animation:none}}

/* ---- 10. Bilgi kutulari ------------------------------------------------ */
.kutu{border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:12px 14px;margin:10px 0;font-size:.92rem}
.iyi-kutu,.info{border-color:var(--bilgi);background:var(--bilgi-zemin)}
.uyari-kutu{border-color:var(--uyari);background:var(--uyari-zemin)}
.hata-kutu{border-color:var(--kotu);background:var(--kotu-zemin)}
.ipucu-kutu{border-color:var(--iyi);background:var(--iyi-zemin)}
.bildirim{margin:10px 0}
.bildirim:empty{display:none}

/* Dikkat satiri: NEDEN + NE YAPMALI */
.dikkat-satir{display:grid;grid-template-columns:1fr;gap:6px;border-left:4px solid var(--uyari);background:var(--kart);border:1px solid var(--cizgi);border-left-width:4px;border-radius:var(--yuvarlak-s);padding:12px 14px;margin:8px 0}
.dikkat-satir.kirmizi{border-left-color:var(--kotu)}
.dikkat-satir .neden{font-weight:600}
.dikkat-satir .ne-yapmali{color:var(--soluk);font-size:.9rem}
.dikkat-satir .ne-yapmali::before{content:"→ "}

/* ---- 11. Cesitli yardimcilar ------------------------------------------ */
.satir{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sag{margin-left:auto}
.kaydir{overflow-x:auto}
.aday-satir,.arac-satir{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--cizgi)}
.aday-bilgi{display:flex;flex-direction:column}
.adim-liste{line-height:1.9}
.admin-baglam{border:1px dashed var(--uyari);background:var(--uyari-zemin);border-radius:var(--yuvarlak-s);padding:12px;margin:12px 0}
.giris-kutu{max-width:380px;margin:48px auto;padding:var(--bosluk-l)}
.bildirim-alan{margin-top:12px}
.kaynak{border-bottom:1px dotted var(--soluk);cursor:help}
a.kaynak:hover{border-bottom-style:solid}

/* Kanit sinifi etiketi (resmi/okunmus/beyan/algoritmik/tahmin) */
.kanit{font-size:.72rem;color:var(--soluk);font-weight:600;text-transform:uppercase;letter-spacing:.03em}

/* Sekme seridi (isletme detayi) */
.sekmeler{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--cizgi);margin:0 0 var(--bosluk);-webkit-overflow-scrolling:touch}
.sekmeler a{display:inline-flex;align-items:center;min-height:var(--dokunma);padding:8px 14px;color:var(--soluk);border-bottom:2px solid transparent;white-space:nowrap;font-weight:600;font-size:.92rem}
.sekmeler a:hover{color:var(--metin);text-decoration:none}
.sekmeler a.et{color:var(--vurgu);border-bottom-color:var(--vurgu)}

/* ---- 12. V3 mevcut sinifler (tokenlere baglandi, korunur) ------------- */
.v3-grid,.v3-nav-kartlar{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.v3-grid,.v3-nav-kartlar{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
.v3-isletme{display:block;color:var(--metin);background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:var(--bosluk);box-shadow:var(--golge)}
.v3-isletme:hover{text-decoration:none;border-color:var(--vurgu)}
.v3-isletme h2,.v3-nav-kartlar h2{margin:8px 0 4px}
.v3-kod{display:inline-block;font:700 12px/1 ui-monospace,monospace;background:var(--kart2);padding:5px 8px;border-radius:7px;color:var(--soluk)}
.v3-kapsam{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:var(--kart);border:1px solid var(--cizgi);border-radius:10px;margin-bottom:18px;font-size:13px}
.v3-kapsam code{color:var(--soluk);margin-left:auto}
.v3-kategori{border-bottom:1px solid var(--cizgi);padding-bottom:7px;margin-top:30px}
.v3-yetenek-satir{display:grid;grid-template-columns:58px minmax(180px,1fr) auto 150px 48px;align-items:center;gap:12px;background:var(--kart);border:1px solid var(--cizgi);border-radius:10px;padding:12px;margin:8px 0;color:var(--metin);min-height:var(--dokunma)}
.v3-yetenek-satir:hover{text-decoration:none;border-color:var(--vurgu)}
.v3-yetenek-kod{font-weight:800;color:var(--vurgu)}
.v3-yetenek-ana{display:flex;flex-direction:column}.v3-yetenek-ana small{color:var(--soluk)}
.v3-readiness{height:8px;background:var(--kart2);border-radius:999px;overflow:hidden}
.v3-readiness span{display:block;height:100%;background:var(--vurgu)}
.v3-yuzde{font-size:12px;color:var(--soluk);text-align:right}
.v3-baslik-satir{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap}
.v3-durum-kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:12px;padding:14px;display:flex;flex-direction:column;min-width:160px}
.v3-durum-kart span{color:var(--soluk);font-size:13px}
.v3-sekmeler{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 20px}
.v3-sekmeler a{background:var(--kart);border:1px solid var(--cizgi);border-radius:999px;padding:6px 12px;font-size:13px;min-height:var(--dokunma);display:inline-flex;align-items:center}
.v3-chipler{display:flex;gap:8px;flex-wrap:wrap}
.v3-chip{border:1px solid var(--cizgi);border-radius:999px;padding:7px 10px;background:var(--kart2)}
.v3-action-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:620px){.v3-action-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
.v3-action{border:1px solid var(--cizgi);border-radius:10px;padding:13px;display:grid;grid-template-columns:1fr;gap:10px;background:var(--kart)}
.v3-action strong{display:block;margin-top:6px}.v3-action p{font-size:13px;color:var(--soluk)}
.v3-dokuman{max-width:980px}.v3-dokuman p{max-width:80ch}
.dok-baslik{margin-top:24px}.dok-liste{line-height:1.7}
.dok-kod,.dok-tablo{overflow:auto;background:var(--kart2);padding:12px;border-radius:8px}
.v3-wrap{white-space:normal;max-width:440px}
.v3-timeline{display:flex;flex-direction:column;gap:12px}
.v3-msg{max-width:820px;padding:13px 15px;border-radius:12px;border:1px solid var(--cizgi);background:var(--kart)}
.v3-msg.giden{margin-left:auto;border-left:4px solid var(--vurgu)}
.v3-msg.gelen{border-left:4px solid var(--bilgi)}
.v3-msg.ic{border-left:4px solid var(--uyari);opacity:.92}
.v3-msg header{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--soluk)}
.v3-msg pre{white-space:pre-wrap;overflow:auto;background:var(--kart2);padding:10px;border-radius:8px}
.v3-medya{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.v3-medya img,.v3-medya .thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--cizgi);background:var(--kart2);display:flex;align-items:center;justify-content:center;color:var(--soluk);font-size:22px}
.v3-gates{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.v3-gates>div{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--cizgi);border-radius:8px;padding:8px;background:var(--kart)}
@media(max-width:600px){
  .v3-yetenek-satir{grid-template-columns:50px 1fr auto}
  .v3-readiness,.v3-yuzde{display:none}
}