/* ============================================================================
   site.css — AkubelaKontrol site geneli: sıfırlama, yerleşim (kenar çubuğu + içerik),
   ortak parçalar (düğme, kart, rozet, alan, tablo, uyarı). Sayfaya özel stil kendi dosyasında.
   Renk/ölçü YALNIZ tokens.css değişkenlerinden.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh;
    font-family: var(--font-sans); font-size: var(--fs-15); line-height: var(--lh-base); color: var(--text);
    background:
        radial-gradient(900px 600px at 85% -10%, rgba(255, 157, 0, .14), transparent 60%),
        radial-gradient(1000px 700px at -10% 110%, rgba(47, 123, 255, .18), transparent 60%),
        linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--ai); }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0; }
code, .mono { font-family: var(--font-mono); font-size: .92em; }
.kucuk { font-size: var(--fs-13); }
.metin-sonuk { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.orta { text-align: center; }
[hidden] { display: none !important; }

/* ---------- ikonlar ---------- */
.ik { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.15em; }

/* ---------- yerleşim ---------- */
.uyg { display: flex; min-height: 100vh; }
.kenar {
    width: var(--sidebar-w); flex: none; position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; padding: var(--space-5) var(--space-4);
    background: rgba(5, 10, 26, .55); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
    border-right: 1px solid var(--border);
}
.marka { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); margin-bottom: var(--space-6); }
.marka img { width: 150px; height: auto; }
.marka span { font-weight: 700; font-size: var(--fs-18); letter-spacing: .01em; }
.marka b { color: var(--primary); }
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md);
    color: var(--text-muted); text-decoration: none; font-weight: 500;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu a:hover { background: var(--surface-2); color: var(--text); }
.menu a.aktif { background: var(--primary-soft); color: var(--primary); }
.menu .ik { width: 20px; height: 20px; }
.kenar-alt { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: var(--space-4); border-top: 1px solid var(--border); }

.icerik { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ust-bar {
    height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 var(--space-6);
    border-bottom: 1px solid var(--border); background: rgba(5, 10, 26, .35);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 5;
}
.sayfa-baslik { font-size: var(--fs-20); font-weight: 700; }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.kullanici { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-14); }
.ana { padding: var(--space-6); width: 100%; max-width: 1480px; }
.alt-bilgi { margin-top: auto; padding: var(--space-3) var(--space-6); color: var(--text-dim); font-size: var(--fs-12); }
.ust-bar .kenar-ac { display: none; }   /* (0,2,0): .btn-ikon'un inline-flex'ini ezer; dar ekranda media query açar */
.perde { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 15; }

/* ---------- düğmeler ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--btn-radius); border: 1px solid transparent;
    font: 600 var(--btn-fs)/1.2 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: var(--btn-disabled-opacity); cursor: not-allowed; }
.btn-birincil { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-birincil:hover { background: var(--btn-primary-bg-hover); }
.btn-birincil:active { background: var(--btn-primary-bg-active); }
.btn-ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-fg); border-color: var(--border); }
.btn-ghost:hover { background: var(--btn-ghost-bg-hover); }
.btn-tehlike { background: var(--btn-danger-bg); color: var(--btn-danger-fg); border-color: rgba(248, 113, 113, .4); }
.btn-kucuk { padding: 6px 12px; font-size: var(--fs-13); }
.btn-genis { width: 100%; }
.btn-ikon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.baglanti { background: none; border: 0; padding: 0; color: var(--ai); font: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.baglanti:hover { color: var(--text); }

/* ---------- odak ---------- */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn:focus-visible, .giris:focus-visible { outline-offset: 1px; }

/* ---------- kart ---------- */
.kart {
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-pad);
    backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-sm);
}
.kart-baslik { display: flex; align-items: center; gap: 8px; font-size: var(--fs-16); font-weight: 700; margin-bottom: var(--space-4); }
.kart-baslik .ik { color: var(--primary); }
.kart-tablo { padding: 0; overflow-x: auto; }

/* ---------- rozet ---------- */
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--badge-radius); font-size: var(--badge-fs); font-weight: 600; line-height: 1.3; border: 1px solid transparent; white-space: nowrap; }
.rozet-ok { background: var(--ok-soft); color: var(--ok); border-color: rgba(52, 211, 153, .35); }
.rozet-warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(251, 191, 36, .35); }
.rozet-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(248, 113, 113, .35); }
.rozet-ai { background: var(--ai-soft); color: var(--ai); border-color: rgba(141, 182, 255, .35); }
.rozet-notr { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }

/* ---------- form alanları ---------- */
.alan { display: flex; flex-direction: column; gap: 6px; }
.etiket { font-size: var(--fs-13); color: var(--text-muted); font-weight: 500; }
.giris {
    width: 100%; padding: var(--input-pad-y) var(--input-pad-x); border-radius: var(--input-radius);
    border: 1px solid var(--input-border); background: var(--input-bg); color: var(--input-fg); font: inherit;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.giris::placeholder { color: var(--input-placeholder); }
.giris:hover { border-color: var(--border-strong); }
.giris:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 3px rgba(255, 186, 77, .2); }
.giris-kucuk { padding: 6px 10px; font-size: var(--fs-13); }
select.giris { cursor: pointer; }
select.giris option { background: var(--navy-800); color: var(--text); }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.onay-kutucuk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-14); color: var(--text-muted); }
.alan-hata { color: var(--danger); font-size: var(--fs-13); }
.filtre { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.filtre .alan { min-width: 180px; }
.alan-genis { flex: 1; min-width: 240px; }

/* ---------- tablo ---------- */
.tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.tablo th { text-align: left; padding: 12px 14px; color: var(--table-head-fg); font-weight: 600; font-size: var(--fs-12); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tablo td { padding: 10px 14px; border-bottom: 1px solid var(--table-row-border); vertical-align: middle; }
.tablo tbody tr:hover { background: var(--table-row-hover); }
.tablo tr:last-child td { border-bottom: 0; }
.tablo .bos { text-align: center; color: var(--text-muted); padding: var(--space-8); }
.satir-pasif { opacity: .55; }

/* ---------- uyarı ---------- */
.uyari { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: var(--space-4); font-size: var(--fs-14); border: 1px solid transparent; }
.uyari:empty { display: none; }
.uyari .ik { margin-top: 2px; }
.uyari-ok { background: var(--ok-soft); color: var(--ok); border-color: rgba(52, 211, 153, .35); }
.uyari-hata { background: var(--danger-soft); color: var(--danger); border-color: rgba(248, 113, 113, .35); }
.uyari ul { margin: 0; padding-left: 18px; }

/* ---------- canlı uyarı bildirimi (canli.js toast) ---------- */
.toastlar { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.toast { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg-2); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); font-size: var(--fs-14); }
.toast b { grid-column: 1; }
.toast span { grid-column: 1; color: var(--text-muted); overflow-wrap: anywhere; }
.toast button { grid-column: 2; grid-row: 1 / span 2; background: none; border: 0; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.toast-kritik { border-color: var(--danger); background: var(--danger-soft); }
.toast-kritik b { color: var(--danger); }
.toast-uyari { border-color: rgba(251, 191, 36, .6); }
.toast-uyari b { color: var(--warn); }
.toast-bilgi { border-color: rgba(141, 182, 255, .5); }
.toast-bilgi b { color: var(--ai); }

/* ---------- detay listesi ---------- */
.detay { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.detay dt { color: var(--text-muted); font-size: var(--fs-13); }
.detay dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- hata sayfası ---------- */
.hata-kart { max-width: 520px; margin: 10vh auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hata-ikon { width: 56px; height: 56px; color: var(--warn); }

/* ---------- duyarlı ---------- */
@media (max-width: 1023px) {
    .kenar { position: fixed; left: 0; top: 0; z-index: 20; transform: translateX(-100%); transition: transform var(--dur-base) var(--ease); }
    .kenar.acik { transform: none; box-shadow: var(--shadow-md); }
    .ust-bar .kenar-ac { display: inline-flex; }
    .ana { padding: var(--space-4); }
    .ust-bar { padding: 0 var(--space-4); }
}
@media (max-width: 767px) {
    .sayfa-baslik { font-size: var(--fs-18); }
    .filtre .alan { min-width: 0; flex: 1 1 140px; }
    .detay { grid-template-columns: 1fr; gap: 2px; }
    .detay dd { margin-bottom: 8px; }
}