/* ------------------------------------------------------------------ *
 *  Suud Panel — tasarim
 *
 *  Tailwind CDN yardimci siniflari saglar; tekrar eden parcalar (menu
 *  ogesi, rozet, kart, tablo) burada tek yerde tanimlanir. Boylece sayfa
 *  dosyalarinda uzun sinif zincirleri tasinmaz.
 * ------------------------------------------------------------------ */

:root {
    --sp-kenar: #e4e4e7;
    --sp-zemin: #fafafa;
    --sp-kart: #ffffff;
    --sp-metin: #09090b;
    --sp-soluk: #71717a;
    --sp-vurgu: #0f766e;
}

html.dark {
    --sp-kenar: rgba(255, 255, 255, .10);
    --sp-zemin: #09090b;
    --sp-kart: #18181b;
    --sp-metin: #ffffff;
    --sp-soluk: #a1a1aa;
    --sp-vurgu: #2dd4bf;
}

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Arka plandaki ince kare izgara — giris ekraninda kullanilir. */
.kod-izgara {
    background-image:
        linear-gradient(to right, rgba(113, 113, 122, .10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(113, 113, 122, .10) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ---------------------------- Sol menu ---------------------------- */

.nav-sidebar {
    width: 14rem;
    transition: width .18s ease;
}

html[data-nav="mini"] .nav-sidebar { width: 4.25rem; }
html[data-nav="mini"] .nav-sidebar .nav-wide { display: none !important; }
html[data-nav="mini"] .nav-sidebar .nav-head { flex-direction: column; gap: .5rem; }
html[data-nav="mini"] .nav-sidebar .nav-head > a { flex: none; padding: 0; }
html[data-nav="mini"] .nav-sidebar .nav-item { justify-content: center; padding-left: .5rem; padding-right: .5rem; }
html[data-nav="mini"] .nav-sidebar .nav-section {
    height: 1px;
    margin: .6rem .55rem;
    padding: 0;
    overflow: hidden;
    text-indent: -9999px;
    background: rgba(113, 113, 122, .3);
}
html[data-nav="mini"] .nav-sidebar .nav-wide-mt { margin-top: 0; }
html[data-nav="mini"] .nav-sidebar .nav-foot { padding: .4rem; }
html[data-nav="mini"] .nav-sidebar .nav-foot-btn { padding-left: 0; padding-right: 0; }
html[data-nav="mini"] .nav-toggle-icon { transform: rotate(180deg); }

.nav-item {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: .625rem;
    white-space: nowrap;
    border-radius: .5rem;
    padding: .5rem .625rem;
    font-size: .875rem;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

.nav-item-idle { color: #52525b; }
.nav-item-idle:hover { background: #f4f4f5; color: #09090b; }
html.dark .nav-item-idle { color: #a1a1aa; }
html.dark .nav-item-idle:hover { background: rgba(255, 255, 255, .10); color: #ffffff; }

.nav-item-active {
    background: #09090b;
    color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(9, 9, 11, .10);
}

html.dark .nav-item-active { background: #ffffff; color: #09090b; }

/* ----------------------------- Rozet ------------------------------ */

.rozet {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: 9999px;
    padding: .125rem .5rem;
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.rozet-notr    { background: #f4f4f5; color: #3f3f46; }
.rozet-yesil   { background: #d1fae5; color: #065f46; }
.rozet-sari    { background: #fef3c7; color: #92400e; }
.rozet-kirmizi { background: #ffe4e6; color: #9f1239; }
.rozet-mavi    { background: #e0f2fe; color: #075985; }
.rozet-mor     { background: #ede9fe; color: #5b21b6; }

html.dark .rozet-notr    { background: rgba(255, 255, 255, .10); color: #d4d4d8; }
html.dark .rozet-yesil   { background: rgba(16, 185, 129, .15); color: #a7f3d0; }
html.dark .rozet-sari    { background: rgba(245, 158, 11, .15); color: #fde68a; }
html.dark .rozet-kirmizi { background: rgba(244, 63, 94, .15); color: #fecdd3; }
html.dark .rozet-mavi    { background: rgba(56, 189, 248, .15); color: #bae6fd; }
html.dark .rozet-mor     { background: rgba(139, 92, 246, .15); color: #ddd6fe; }

/* ------------------------------ Kart ------------------------------ */

.kart {
    border: 1px solid var(--sp-kenar);
    background: var(--sp-kart);
    border-radius: .75rem;
}

.kart-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--sp-kenar);
    padding: .875rem 1rem;
}

.kart-govde { padding: 1rem; }

/* ----------------------------- Tablo ------------------------------ */

.tablo { width: 100%; border-collapse: collapse; font-size: .8125rem; }

.tablo thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sp-kart);
    border-bottom: 1px solid var(--sp-kenar);
    padding: .5rem .75rem;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sp-soluk);
    white-space: nowrap;
}

.tablo tbody td {
    border-bottom: 1px solid var(--sp-kenar);
    padding: .5rem .75rem;
    vertical-align: top;
}

.tablo tbody tr:hover { background: rgba(113, 113, 122, .05); }
.tablo .sayi { font-family: ui-monospace, SFMono-Regular, monospace; white-space: nowrap; }

/* ----------------------------- Form ------------------------------- */

.alan {
    width: 100%;
    border: 1px solid var(--sp-kenar);
    background: var(--sp-kart);
    border-radius: .5rem;
    padding: .625rem .875rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--sp-metin);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.alan:focus {
    border-color: var(--sp-vurgu);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.alan-etiket {
    display: block;
    margin-bottom: .375rem;
    font-size: .75rem;
    font-weight: 600;
    color: #52525b;
}

html.dark .alan-etiket { color: #d4d4d8; }

.alan-ipucu {
    margin-top: .375rem;
    font-size: .6875rem;
    color: var(--sp-soluk);
}

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .5rem;
    padding: .625rem 1rem;
    font-size: .875rem;
    font-weight: 700;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    cursor: pointer;
}

.dugme-birincil { background: #09090b; color: #ffffff; border: 1px solid #09090b; }
.dugme-birincil:hover { background: #27272a; }
html.dark .dugme-birincil { background: #ffffff; color: #09090b; border-color: #ffffff; }
html.dark .dugme-birincil:hover { background: #e4e4e7; }

.dugme-ikincil {
    background: var(--sp-kart);
    color: #3f3f46;
    border: 1px solid var(--sp-kenar);
}

.dugme-ikincil:hover { background: #f4f4f5; }
html.dark .dugme-ikincil { color: #d4d4d8; }
html.dark .dugme-ikincil:hover { background: rgba(255, 255, 255, .08); }

/* --------------------------- Durum kutusu -------------------------- */

.durum {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border-radius: .5rem;
    border: 1px solid var(--sp-kenar);
    padding: .75rem 1rem;
    font-size: .8125rem;
}

.durum-ok    { border-color: #6ee7b7; background: #ecfdf5; color: #065f46; }
.durum-hata  { border-color: #fda4af; background: #fff1f2; color: #9f1239; }
.durum-bekle { border-color: #fcd34d; background: #fffbeb; color: #92400e; }

html.dark .durum-ok    { border-color: rgba(16, 185, 129, .35); background: rgba(16, 185, 129, .10); color: #a7f3d0; }
html.dark .durum-hata  { border-color: rgba(244, 63, 94, .35); background: rgba(244, 63, 94, .10); color: #fecdd3; }
html.dark .durum-bekle { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .10); color: #fde68a; }

/* Uzun hata metinleri tabloyu tasirmasin. */
.durum pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .6875rem;
    line-height: 1.5;
    margin-top: .375rem;
}