/* Panel — site ile aynı tasarım jetonları, yoğun veri için sıkılaştırılmış ölçek. */

:root {
    --n-0:#fff; --n-50:#f6f8fa; --n-100:#eef1f5; --n-200:#e1e6ec;
    --n-300:#c9d1da; --n-400:#93a0ad; --n-500:#67757f; --n-700:#33414b; --n-900:#0f1c22;

    --p-50:#eefaf7; --p-100:#d3f2ea; --p-200:#a7e5d6;
    --p-600:#0d5450; --p-700:#0b423f;

    --a-400:#cfe92b; --a-300:#dcf24f; --a-ink:#12352f;

    --ok-50:#ecfdf5; --ok-200:#a7f3d0; --ok-700:#047857;
    --wa-50:#fffbeb; --wa-200:#fde68a; --wa-700:#b45309;
    --da-50:#fef2f2; --da-200:#fecaca; --da-700:#b91c1c;

    --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
    --s-5:1.25rem; --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem;

    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px;
    --sh-sm:0 1px 2px rgba(6,43,41,.06);
    --sh-md:0 4px 14px rgba(6,43,41,.07);
    --side-w: 232px;
}

*,*::before,*::after { box-sizing: border-box; }

body {
    margin: 0; background: var(--n-50); color: var(--n-700);
    font: 400 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr);
    min-height: 100dvh;
}
/* Giriş ekranında kenar çubuğu yok */
body.bare { grid-template-columns: 1fr; place-items: center; }

h1,h2,h3 { margin: 0; color: var(--n-900); letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--p-600); }
.muted { color: var(--n-500); }
.small { font-size: .86rem; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Kenar çubuğu ---------- */
.side {
    background: var(--p-700); color: #cfe3e0;
    padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-5);
    position: sticky; top: 0; block-size: 100dvh; overflow-y: auto;
}
.side .brand {
    display: flex; align-items: center; gap: var(--s-2);
    color: #fff; text-decoration: none; font-weight: 800; font-size: 1.15rem;
}
.brand-mark {
    display: grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem;
    border-radius: 50%; background: var(--a-400); color: var(--a-ink); font-size: 1rem;
}
.side nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-group {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: #7fa5a1; margin-block: var(--s-4) var(--s-1); font-weight: 700;
}
.side nav a {
    color: #cfe3e0; text-decoration: none; padding: .5rem .7rem;
    border-radius: var(--r-sm); font-size: .92rem; font-weight: 550;
}
.side nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.side nav a.on { background: var(--a-400); color: var(--a-ink); font-weight: 700; }
.signout { margin-block-start: auto; }
.signout .btn-ghost { color: #cfe3e0; border-color: rgba(255,255,255,.25); background: transparent; }
.signout .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ---------- İçerik ----------
   Genişlik sınırı yok: panel veri yoğun tablolar gösteriyor (eşleştirme
   ekranında geniş seçim kutuları var), ekranın tamamı kullanılmalı.
   Yalnızca giriş ekranı dar kalıyor. */
.content { padding: var(--s-6) var(--s-8); inline-size: 100%; min-inline-size: 0; }
body.bare .content { padding: var(--s-6); max-inline-size: 400px; }

/* Uzun metinler ekran boyunca yayılıp okunmaz hale gelmesin */
.page-head p, .hint { max-inline-size: 90ch; }

.page-head { margin-block-end: var(--s-6); }
.page-head p { color: var(--n-500); margin-block-start: var(--s-1); }

.card {
    background: var(--n-0); border: 1px solid var(--n-200);
    border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--sh-sm);
    margin-block-end: var(--s-5);
}
.card > h2 { margin-block-end: var(--s-4); }

/* ---------- Form ---------- */
.field { margin-block-end: var(--s-4); }
.label { display: block; font-size: .86rem; font-weight: 650; color: var(--n-700); margin-block-end: var(--s-2); }
.hint { font-size: .82rem; color: var(--n-500); margin-block-start: var(--s-2); }

.input, .select, .textarea {
    inline-size: 100%; background: var(--n-0);
    border: 1.5px solid var(--n-300); border-radius: var(--r-md);
    padding: .6rem .75rem; font: inherit; color: var(--n-900);
    transition: border-color .15s, box-shadow .15s;
}
.textarea { min-block-size: 5rem; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--p-600); box-shadow: 0 0 0 3px var(--p-100);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    border: 1.5px solid transparent; border-radius: var(--r-full);
    padding: .6rem 1.2rem; font: inherit; font-weight: 700; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    background: var(--a-400); color: var(--a-ink); transition: background .15s;
}
.btn:hover { background: var(--a-300); }
.btn-dark { background: var(--p-600); color: #fff; }
.btn-dark:hover { background: var(--p-700); }
.btn-ghost { background: var(--n-0); color: var(--n-700); border-color: var(--n-300); }
.btn-ghost:hover { background: var(--n-50); }
.btn-sm { padding: .4rem .9rem; font-size: .85rem; }
.btn-block { inline-size: 100%; }

.alert { border-radius: var(--r-md); padding: .7rem 1rem; font-size: .9rem; border: 1px solid; margin-block-end: var(--s-4); }
.alert-error { background: var(--da-50); border-color: var(--da-200); color: var(--da-700); }
.alert-ok { background: var(--ok-50); border-color: var(--ok-200); color: var(--ok-700); }
.alert-warn { background: var(--wa-50); border-color: var(--wa-200); color: var(--wa-700); }
.alert:empty { display: none; }

/* Alan doğrulama mesajı. Ayrı sınıf, çünkü boşken gizlenmesi satır içi
   stille ezilmemeli — satır içi display:block, .alert:empty kuralını
   her zaman yener ve boş kırmızı kutular ekranda kalır. */
.val {
    display: block; margin-block-start: var(--s-2);
    border: 1px solid var(--da-200); border-radius: var(--r-md);
    background: var(--da-50); color: var(--da-700);
    padding: .5rem .8rem; font-size: .85rem;
}
.val:empty { display: none; }
/* Doğrulama özeti hatasızken boş <ul> üretiyor — o hâlde de gizlensin. */
.val.validation-summary-valid { display: none; }
.val ul { margin: 0; padding-inline-start: 1.1rem; }

.badge {
    display: inline-flex; align-items: center; gap: var(--s-2);
    border-radius: var(--r-full); padding: .2rem .6rem;
    font-size: .78rem; font-weight: 700; border: 1px solid;
}
.badge-ok { background: var(--ok-50); color: var(--ok-700); border-color: var(--ok-200); }
.badge-wait { background: var(--wa-50); color: var(--wa-700); border-color: var(--wa-200); }
.badge-bad { background: var(--da-50); color: var(--da-700); border-color: var(--da-200); }
.badge-info { background: var(--p-50); color: var(--p-700); border-color: var(--p-200); }

/* ---------- Görsel yükleme ---------- */
.media {
    display: grid; grid-template-columns: 260px 1fr; gap: var(--s-5); align-items: start;
}
.preview {
    aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--n-200); background: var(--n-100);
    display: grid; place-items: center; color: var(--n-400); font-size: .85rem;
}
.preview img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.drop {
    border: 2px dashed var(--n-300); border-radius: var(--r-lg);
    padding: var(--s-6); text-align: center; background: var(--n-50);
    transition: border-color .15s, background .15s;
}
.drop:hover { border-color: var(--p-200); background: var(--p-50); }
.drop input[type=file] { display: block; margin-inline: auto; margin-block-start: var(--s-3); font-size: .85rem; }

/* ---------- İstatistik kutuları ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--s-4); margin-block-end: var(--s-6); }
.stat { background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); }
.stat .k { font-size: .8rem; color: var(--n-500); font-weight: 600; }
.stat .v { font-size: 1.6rem; font-weight: 800; color: var(--n-900); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---------- Tablo ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--n-200); border-radius: var(--r-lg); background: var(--n-0); }
table { inline-size: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .7rem .9rem; text-align: start; white-space: nowrap; }
th { background: var(--n-50); color: var(--n-500); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-block-end: 1px solid var(--n-200); }
tbody tr + tr td { border-block-start: 1px solid var(--n-100); }
tbody tr:hover td { background: var(--n-50); }

.empty { text-align: center; color: var(--n-500); padding: var(--s-10); }

/* ---------- Aramalı seçim kutusu ----------
   Altta gerçek <select> duruyor; JS yoksa o görünür ve normal çalışır. */
.combo { position: relative; }
.combo-native { display: none; }

.combo-input { padding-inline-end: 2rem; cursor: text; }
.combo-input.is-empty { color: var(--n-400); }
.combo::after {
    content: ""; position: absolute; inset-inline-end: .75rem; top: 1.1rem;
    inline-size: 0; block-size: 0; pointer-events: none;
    border-inline: 4px solid transparent; border-block-start: 5px solid var(--n-400);
}

.combo-list {
    position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px);
    margin: 0; padding: 4px; list-style: none;
    max-block-size: 17rem; overflow-y: auto;
    background: var(--n-0); border: 1px solid var(--n-200);
    border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(6,43,41,.16);
}
.combo-list[hidden] { display: none; }
.combo-list.is-empty::after {
    content: "Eşleşen ürün yok";
    display: block; padding: .6rem .7rem; color: var(--n-400); font-size: .86rem;
}

.combo-item {
    padding: .5rem .7rem; border-radius: var(--r-sm);
    font-size: .88rem; cursor: pointer; white-space: normal; line-height: 1.4;
}
.combo-item:hover { background: var(--n-50); }
.combo-item.on { background: var(--p-50); color: var(--p-700); font-weight: 600; }
.combo-item[hidden] { display: none; }

/* ---------- Modal ----------
   Native <dialog>: odak tuzağı, Esc ile kapanma ve arka plan engelleme
   tarayıcıdan geliyor — JS ile taklit etmeye gerek yok. */
dialog.modal {
    border: 0; padding: 0; border-radius: var(--r-lg);
    inline-size: min(760px, calc(100vw - 2rem));
    max-block-size: calc(100dvh - 4rem);
    background: var(--n-0); color: var(--n-700);
    box-shadow: 0 24px 64px rgba(6,43,41,.28);
    overflow: hidden;
}
dialog.modal::backdrop { background: rgba(6,43,41,.45); backdrop-filter: blur(2px); }

dialog.modal .modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-5) var(--s-6); border-block-end: 1px solid var(--n-200);
    position: sticky; top: 0; background: var(--n-0); z-index: 1;
}
dialog.modal .modal-body { padding: var(--s-6); overflow-y: auto; max-block-size: calc(100dvh - 15rem); }
dialog.modal .modal-foot {
    display: flex; gap: var(--s-3); justify-content: flex-end;
    padding: var(--s-4) var(--s-6); border-block-start: 1px solid var(--n-200);
    background: var(--n-50); position: sticky; bottom: 0;
}

.modal-close {
    border: 0; background: transparent; cursor: pointer; color: var(--n-400);
    inline-size: 2rem; block-size: 2rem; border-radius: var(--r-sm);
    display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
}
.modal-close:hover { background: var(--n-100); color: var(--n-900); }

/* Modal açıkken arkadaki sayfa kaymasın */
body:has(dialog.modal[open]) { overflow: hidden; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.form-grid .span-all { grid-column: 1 / -1; }

.check { display: inline-flex; gap: .5rem; align-items: center; font-size: .92rem; }

@media (prefers-reduced-motion: no-preference) {
    dialog.modal[open] { animation: modal-in .18s ease-out; }
    @keyframes modal-in {
        from { opacity: 0; transform: translateY(8px) scale(.98); }
        to   { opacity: 1; transform: none; }
    }
}

@media (max-width: 860px) {
    body { grid-template-columns: 1fr; }
    .side { position: static; block-size: auto; }
    .side nav { flex-direction: row; flex-wrap: wrap; }
    .nav-group { display: none; }
    .media { grid-template-columns: 1fr; }
    .content { padding: var(--s-5); }
}