/* =====================================================================
   e-Kayıt Sözleşme Yönetim Sistemi - arayüz stilleri
   ===================================================================== */

:root {
    --ana:        #12355b;
    --ana-koyu:   #0c2440;
    --ana-acik:   #1e4d80;
    --vurgu:      #0f7b6c;
    --zemin:      #f4f6f9;
    --kart:       #ffffff;
    --kenar:      #dde3ec;
    --metin:      #1c2430;
    --soluk:      #64748b;
    --basari:     #0f7b3f;
    --uyari:      #b7791f;
    --hata:       #c0392b;
    --bekleyen:   #2563eb;
    --golge:      0 1px 2px rgba(16, 30, 54, .06), 0 4px 14px rgba(16, 30, 54, .05);
    --yuvarlak:   8px;
}

* { box-sizing: border-box; }

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

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

/* ---------- Üst çubuk ---------- */
.ust-cubuk {
    background: var(--ana);
    color: #fff;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    box-shadow: var(--golge);
    position: sticky;
    top: 0;
    z-index: 20;
}
.ust-cubuk .marka {
    font-weight: 700;
    font-size: 15px;
    padding: 14px 0;
    letter-spacing: .2px;
    white-space: nowrap;
}
.ust-cubuk .marka span { display: block; font-weight: 400; font-size: 11px; color: #9fb6d4; }
.ust-cubuk nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.ust-cubuk nav a {
    color: #cfdcec;
    padding: 16px 12px;
    font-size: 13.5px;
    border-bottom: 3px solid transparent;
}
.ust-cubuk nav a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.06); }
.ust-cubuk nav a.aktif { color: #fff; border-bottom-color: #6fb2ff; }
.ust-cubuk .kullanici { font-size: 12.5px; color: #cfdcec; white-space: nowrap; }
.ust-cubuk .kullanici a { color: #ffd7d0; }

/* ---------- Yerleşim ---------- */
.kapsayici { max-width: 1240px; margin: 0 auto; padding: 22px; }
.sayfa-basligi { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sayfa-basligi h1 { margin: 0; font-size: 21px; letter-spacing: -.2px; }
.sayfa-basligi p { margin: 4px 0 0; color: var(--soluk); font-size: 13px; }

.kart {
    background: var(--kart);
    border: 1px solid var(--kenar);
    border-radius: var(--yuvarlak);
    box-shadow: var(--golge);
    margin-bottom: 18px;
}
.kart > h2 {
    margin: 0;
    padding: 13px 18px;
    font-size: 14px;
    border-bottom: 1px solid var(--kenar);
    background: #fafbfd;
    border-radius: var(--yuvarlak) var(--yuvarlak) 0 0;
    color: var(--ana);
}
.kart > .govde { padding: 18px; }
.kart > .govde > :first-child { margin-top: 0; }
.kart > .govde > :last-child { margin-bottom: 0; }

.izgara { display: grid; gap: 18px; }
.izgara.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .izgara.k2, .izgara.k3, .izgara.k4 { grid-template-columns: 1fr; } }

/* ---------- Sayaç kutuları ---------- */
.sayac {
    background: var(--kart);
    border: 1px solid var(--kenar);
    border-left: 4px solid var(--ana);
    border-radius: var(--yuvarlak);
    padding: 14px 16px;
    box-shadow: var(--golge);
}
.sayac .etiket { font-size: 12px; color: var(--soluk); text-transform: uppercase; letter-spacing: .4px; }
.sayac .deger { font-size: 26px; font-weight: 700; margin-top: 4px; }
.sayac.bekleyen { border-left-color: var(--bekleyen); }
.sayac.onayli   { border-left-color: var(--basari); }
.sayac.iptal    { border-left-color: var(--hata); }

/* ---------- Tablolar ---------- */
table.liste { width: 100%; border-collapse: collapse; font-size: 13px; }
table.liste th {
    text-align: left;
    background: #f2f5f9;
    color: var(--ana);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--kenar);
    white-space: nowrap;
}
table.liste td { padding: 9px 12px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
table.liste tr:hover td { background: #f9fbfd; }
table.liste td.sayi, table.liste th.sayi { text-align: right; font-variant-numeric: tabular-nums; }
table.liste .bos { text-align: center; color: var(--soluk); padding: 28px; }

table.detay { width: 100%; border-collapse: collapse; font-size: 13px; }
table.detay th {
    text-align: left; width: 34%; color: var(--soluk); font-weight: 600;
    padding: 7px 10px 7px 0; border-bottom: 1px solid #eef1f6; vertical-align: top;
}
table.detay td { padding: 7px 0; border-bottom: 1px solid #eef1f6; word-break: break-word; }

/* ---------- Rozetler ---------- */
.rozet {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.7;
}
.rozet.ONAYBEKLIYOR { background: #e5efff; color: #1d4ed8; }
.rozet.ONAYLANDI    { background: #e3f5ea; color: #0f7b3f; }
.rozet.IPTALEDILDI  { background: #fdeaea; color: #c0392b; }
.rozet.SURESIDOLDU  { background: #f1f2f4; color: #64748b; }
.rozet.kod          { background: #eef2f7; color: #12355b; font-family: ui-monospace, Consolas, monospace; }
.rozet.basari       { background: #e3f5ea; color: #0f7b3f; }
.rozet.hata         { background: #fdeaea; color: #c0392b; }
.rozet.uyari        { background: #fdf3e0; color: #b7791f; }

/* ---------- Formlar ---------- */
.alan { margin-bottom: 14px; }
.alan label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: #34405a; }
.alan .ipucu { font-size: 11.5px; color: var(--soluk); margin-top: 4px; line-height: 1.45; }
.alan .zorunlu { color: var(--hata); }

input[type=text], input[type=password], input[type=number], input[type=search],
input[type=date], input[type=email], input[type=url], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccd4e0;
    border-radius: 6px;
    font: inherit;
    font-size: 13.5px;
    background: #fff;
    color: var(--metin);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--ana-acik);
    box-shadow: 0 0 0 3px rgba(30, 77, 128, .12);
}
textarea { min-height: 74px; resize: vertical; }
select { appearance: auto; }

.dugme {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid var(--ana);
    background: var(--ana);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.dugme:hover { background: var(--ana-koyu); text-decoration: none; color: #fff; }
.dugme.ikincil { background: #fff; color: var(--ana); }
.dugme.ikincil:hover { background: #eef2f7; color: var(--ana); }
.dugme.tehlike { background: var(--hata); border-color: var(--hata); }
.dugme.tehlike:hover { background: #a43022; }
.dugme.onay { background: var(--basari); border-color: var(--basari); }
.dugme.kucuk { padding: 5px 10px; font-size: 12px; }
.dugme:disabled { opacity: .55; cursor: not-allowed; }

.dugme-grubu { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.filtre-formu { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filtre-formu .alan { margin-bottom: 0; min-width: 150px; }

/* ---------- Bildirimler ---------- */
.bildirim {
    padding: 11px 15px; border-radius: var(--yuvarlak); margin-bottom: 14px;
    border: 1px solid; font-size: 13.5px;
}
.bildirim.basari { background: #eafaf0; border-color: #a9dfc0; color: #14653c; }
.bildirim.hata   { background: #fdecec; border-color: #f2b8b3; color: #8c2820; }
.bildirim.uyari  { background: #fff8e6; border-color: #f0d698; color: #7a5a10; }
.bildirim.bilgi  { background: #eaf1fb; border-color: #b9cdec; color: #17427c; }
.bildirim ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Parametre formu ---------- */
.parametre-grubu { border: 1px solid var(--kenar); border-radius: var(--yuvarlak); margin-bottom: 14px; }
.parametre-grubu > summary {
    padding: 11px 16px; font-weight: 600; cursor: pointer; background: #fafbfd;
    color: var(--ana); font-size: 13.5px; border-radius: var(--yuvarlak);
}
.parametre-grubu[open] > summary { border-bottom: 1px solid var(--kenar); border-radius: var(--yuvarlak) var(--yuvarlak) 0 0; }
.parametre-grubu .ic { padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 20px; }
@media (max-width: 800px) { .parametre-grubu .ic { grid-template-columns: 1fr; } }
.parametre-grubu .ic .genis { grid-column: 1 / -1; }

.anahtar { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 11.5px; color: var(--soluk); }

/* ---------- Kod / JSON ---------- */
pre.kod {
    background: #0f1b2d; color: #d6e4f5; padding: 14px; border-radius: var(--yuvarlak);
    overflow: auto; font: 12px/1.5 ui-monospace, Consolas, "Courier New", monospace;
    max-height: 460px; margin: 0;
}
pre.kod.acik { background: #f6f8fb; color: #22304a; border: 1px solid var(--kenar); }

/* ---------- Sayfalama ---------- */
.sayfalama { display: flex; gap: 6px; align-items: center; margin-top: 14px; flex-wrap: wrap; font-size: 13px; }
.sayfalama a, .sayfalama span {
    padding: 5px 11px; border: 1px solid var(--kenar); border-radius: 6px; background: #fff;
}
.sayfalama .simdiki { background: var(--ana); color: #fff; border-color: var(--ana); }

/* ---------- Giriş ekranı ---------- */
.giris-kutusu { max-width: 400px; margin: 8vh auto; }
.giris-kutusu .kart { padding: 8px; }
.giris-basligi { text-align: center; margin-bottom: 20px; }
.giris-basligi h1 { font-size: 19px; margin: 0 0 6px; color: var(--ana); }
.giris-basligi p { margin: 0; color: var(--soluk); font-size: 13px; }

/* ---------- Simülatör ---------- */
.sim-uyari {
    background: #fff8e6; border: 1px solid #f0d698; border-left: 4px solid var(--uyari);
    padding: 12px 16px; border-radius: var(--yuvarlak); margin-bottom: 18px; font-size: 13px;
}
.basvuru-karti { border: 1px solid var(--kenar); border-radius: var(--yuvarlak); margin-bottom: 14px; background: #fff; }
.basvuru-karti .ust {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--kenar); background: #fafbfd; flex-wrap: wrap;
}
.basvuru-karti .ust strong { font-size: 14px; }
.basvuru-karti .ic { padding: 16px; }
.basvuru-karti .islemler { padding: 12px 16px; border-top: 1px solid var(--kenar); background: #fafbfd; }

.dogrulanmis {
    background: #eaf1fb; border: 1px solid #b9cdec; border-radius: 6px;
    padding: 10px 14px; font-size: 13px; margin-bottom: 14px;
}
.dogrulanmis b { color: var(--ana); }

/* ---------- Yardımcılar ---------- */
.soluk { color: var(--soluk); }
.kucuk { font-size: 12px; }
.sag { text-align: right; }
.orta { text-align: center; }
.bosluk-ust { margin-top: 18px; }
.tek-satir { white-space: nowrap; }
.kir { word-break: break-all; }
.gizli { display: none; }
hr.ince { border: none; border-top: 1px solid var(--kenar); margin: 16px 0; }