/* ---------------------------------------------------------------------------
   Yonetim paneli stilleri.
   Amac: sade, hizli, okunabilir. Cerceve/kutuphane kullanilmaz.
   --------------------------------------------------------------------------- */

:root {
    --kenar: #d8dde3;
    --zemin: #f4f6f8;
    --kart: #ffffff;
    --metin: #1f2933;
    --soluk: #6b7785;
    --ana: #1f6feb;
    --ana-koyu: #1a5fd0;
    --yesil: #1b873f;
    --kirmizi: #c62828;
    --sari: #a36a00;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font: 14px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

a { color: var(--ana); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Ust menu --- */
.ust {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 18px;
    background: #1f2933;
    color: #fff;
}

.ust .marka { color: #fff; font-weight: 600; font-size: 15px; }
.ust nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }

.ust nav a {
    color: #cfd6de;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.ust nav a:hover { background: #2f3b47; text-decoration: none; }
.ust nav a.aktif { background: var(--ana); color: #fff; }
.ust-sag { display: flex; align-items: center; gap: 10px; }
.ust-sag .soluk { color: #cfd6de; }

.rozet {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--kirmizi);
    color: #fff;
    font-size: 11px;
    text-align: center;
}

main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px;
}

main h1 { margin: 0 0 14px; font-size: 20px; }
main h2 { margin: 22px 0 10px; font-size: 16px; }

.alt {
    max-width: 1180px;
    margin: 10px auto 30px;
    padding: 0 18px;
    color: var(--soluk);
    font-size: 12px;
}

/* --- Kart --- */
.kart {
    background: var(--kart);
    border: 1px solid var(--kenar);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.kart h2 { margin-top: 0; }

/* --- Ozet kutulari --- */
.kutular {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.kutu {
    background: var(--kart);
    border: 1px solid var(--kenar);
    border-radius: 6px;
    padding: 12px 14px;
}

.kutu .sayi { font-size: 22px; font-weight: 600; }
.kutu .etiket { color: var(--soluk); font-size: 12px; }
.kutu.vurgu { border-color: var(--ana); }

/* --- Tablo --- */
table {
    width: 100%;
    background: var(--kart);
    border: 1px solid var(--kenar);
    border-radius: 6px;
    border-collapse: collapse;
    overflow: hidden;
}

th, td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--kenar);
    vertical-align: top;
}

th { background: #eef1f4; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--soluk); }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }

td.sag, th.sag { text-align: right; }
td.orta, th.orta { text-align: center; }
.tablo-sarmal { overflow-x: auto; }

/* --- Form --- */
label { display: block; margin-bottom: 10px; font-size: 13px; color: #46525e; }

input[type=text], input[type=password], input[type=number], input[type=search],
select, textarea {
    width: 100%;
    margin-top: 3px;
    padding: 7px 9px;
    border: 1px solid var(--kenar);
    border-radius: 4px;
    background: #fff;
    color: var(--metin);
    font: inherit;
}

textarea { min-height: 80px; resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #bcd4fb; border-color: var(--ana); }

.satir {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 14px;
}

.satir.ikili { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.kisa { max-width: 160px; }
.onay { display: flex; align-items: center; gap: 6px; }
.onay input { width: auto; margin: 0; }

/* --- Dugme --- */
.dugme {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--kenar);
    border-radius: 4px;
    background: #fff;
    color: var(--metin);
    font: inherit;
    cursor: pointer;
}

.dugme:hover { background: #f0f2f5; text-decoration: none; }
.dugme.birincil { background: var(--ana); border-color: var(--ana); color: #fff; }
.dugme.birincil:hover { background: var(--ana-koyu); }
.dugme.olumlu { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.dugme.tehlike { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.dugme.kucuk { padding: 4px 9px; font-size: 12px; }
.dugme.tam { width: 100%; }
.dugme-grup { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- Uyari --- */
.uyari {
    padding: 9px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    border: 1px solid transparent;
}

.uyari.basari { background: #e7f6ec; border-color: #bfe3cb; color: #14652f; }
.uyari.hata { background: #fdecea; border-color: #f5c6c2; color: #9f2018; }
.uyari.bilgi { background: #eaf2fd; border-color: #c5daf8; color: #17457f; }

/* --- Etiketler --- */
.etiket {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 12px;
    background: #eef1f4;
    color: #46525e;
    white-space: nowrap;
}

.etiket.bekliyor { background: #fff4e0; color: var(--sari); }
.etiket.kontrol { background: #eaf2fd; color: #17457f; }
.etiket.odendi { background: #e7f6ec; color: #14652f; }
.etiket.tamam { background: #d9f0e1; color: #0f5a29; }
.etiket.iptal { background: #fdecea; color: #9f2018; }
.etiket.acik { background: #e7f6ec; color: #14652f; }
.etiket.kapali { background: #eef1f4; color: var(--soluk); }

.soluk { color: var(--soluk); }
.kucuk { font-size: 12px; }
.kod { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.sarmal { white-space: pre-wrap; word-break: break-word; }

/* --- Filtre cubugu --- */
.filtre {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.filtre label { margin: 0; }
.filtre input, .filtre select { min-width: 150px; }

/* --- Sayfalama --- */
.sayfalama {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 14px 0;
}

.sayfalama .bilgi, .sayfalama .pasif { color: var(--soluk); font-size: 13px; }

/* --- Giris ekrani --- */
.giris-sayfasi {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.giris-kutu {
    width: 320px;
    padding: 22px;
    background: var(--kart);
    border: 1px solid var(--kenar);
    border-radius: 8px;
}

.giris-kutu h1 { margin: 0 0 16px; font-size: 18px; text-align: center; }

/* --- Kucuk ekran --- */
@media (max-width: 700px) {
    .ust { gap: 8px; }
    main { padding: 12px; }
    th, td { padding: 6px 8px; }
}