/* Nurçevik HKS */
:root {
  --zemin: #f4f6f3;
  --kart: #ffffff;
  --metin: #1c2421;
  --soluk: #66726c;
  --cizgi: #dfe5e0;
  --ana: #1f6f4a;
  --ana-koyu: #155237;
  --ana-acik: #e6f2ec;
  --uyari: #b45309;
  --uyari-acik: #fff7e6;
  --hata: #b42318;
  --hata-acik: #fdecea;
  --mor: #6d28d9;
  --yaricap: 10px;
  --golge: 0 1px 2px rgba(16, 24, 20, .06), 0 1px 8px rgba(16, 24, 20, .04);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* display:grid/flex verilen öğelerde hidden işe yarasın */
html, body { margin: 0; }
body {
  background: var(--zemin); color: var(--metin);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--ana); }
.soluk { color: var(--soluk); }
small { font-size: 12px; }

/* Üst menü */
.ust { background: #10291d; color: #e8f0eb; position: sticky; top: 0; z-index: 20; }
.ust-ic { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 0 16px; min-height: 52px; flex-wrap: wrap; }
.marka { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 650; letter-spacing: .1px; }
.marka small { color: #9fc7b1; font-weight: 600; margin-left: 2px; }
.marka-isaret { width: 28px; height: 28px; border-radius: 7px; background: #2f9e6a; display: grid; place-items: center; font-weight: 800; }
.ust nav { display: flex; gap: 2px; flex-wrap: wrap; }
.ust nav a { color: #c7d8ce; text-decoration: none; padding: 7px 11px; border-radius: 7px; font-weight: 500; }
.ust nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ust nav a.aktif { background: rgba(255, 255, 255, .14); color: #fff; }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.ust-sag .soluk { color: #9fb5a8; }
.cikis { color: #c7d8ce; }

.sayfa { max-width: 1240px; margin: 0 auto; padding: 20px 16px 60px; }
.sayfa-baslik { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.sayfa-baslik h1 { font-size: 21px; margin: 0; font-weight: 680; }

.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--golge); padding: 18px; margin-bottom: 14px; }
.kart h2 { font-size: 15px; margin: 0 0 12px; font-weight: 650; }

/* Rozetler */
.rozet { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 3px 8px; border-radius: 999px; }
.rozet-sari { background: #fde68a; color: #78350f; }
.rozet-yesil { background: #bbf7d0; color: #14532d; }
.rozet-mor { background: #ede9fe; color: var(--mor); }
.rozet-gri { background: #eef1ef; color: #4a554f; }
.rozet-kirmizi { background: var(--hata-acik); color: var(--hata); }

/* Form */
label { display: block; font-size: 12.5px; font-weight: 600; color: #39443e; margin-bottom: 5px; }
input, select, textarea {
  width: 100%; font: inherit; color: inherit; background: #fff;
  border: 1px solid #cdd6d0; border-radius: 8px; padding: 8px 10px; min-height: 38px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 3px rgba(31, 111, 74, .15); }
input:disabled, select:disabled { background: #f3f5f3; color: #8a948e; }
input.secildi { border-color: #8cc5a8; background: #f6fbf8; }
.yardim { font-size: 12px; color: var(--soluk); margin-top: 4px; }

.alan-izgara { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 16px; }
.alan { grid-column: span 4; min-width: 0; }
.alan.g6 { grid-column: span 6; } .alan.g3 { grid-column: span 3; } .alan.g12 { grid-column: span 12; } .alan.g8 { grid-column: span 8; }
.no { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--ana-acik); color: var(--ana); font-size: 11px; font-weight: 750; margin-right: 6px; vertical-align: 1px; }
.bolum-baslik { grid-column: span 12; font-size: 12px; font-weight: 700; color: var(--soluk); text-transform: uppercase; letter-spacing: .6px; border-top: 1px solid var(--cizgi); padding-top: 14px; margin-top: 2px; }
.bolum-baslik:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
@media (max-width: 860px) { .alan, .alan.g3, .alan.g6, .alan.g8 { grid-column: span 12; } }

.bilgi-kutu { border-radius: 8px; padding: 9px 11px; font-size: 13px; background: #f3f6f4; border: 1px solid var(--cizgi); }
.bilgi-kutu.uyari { background: var(--uyari-acik); border-color: #f7d9a4; color: #7a3e06; }
.bilgi-kutu.hata { background: var(--hata-acik); border-color: #f5c2bd; color: #7a1a12; }
.bilgi-kutu.iyi { background: var(--ana-acik); border-color: #bfe0cf; color: #14422c; }

/* Butonlar */
button, .dugme {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 8px; padding: 8px 14px; min-height: 38px;
  border: 1px solid #cdd6d0; background: #fff; color: var(--metin); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
button:hover { background: #f3f6f4; }
button.ana { background: var(--ana); border-color: var(--ana); color: #fff; }
button.ana:hover { background: var(--ana-koyu); }
button.buyuk { padding: 11px 22px; font-size: 15px; min-height: 46px; }
button.kucuk { padding: 4px 9px; min-height: 28px; font-size: 12.5px; }
button.tehlike { color: var(--hata); border-color: #f2c0bb; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* Aramalı liste */
.secici { position: relative; }
.secici-liste { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #cdd6d0; border-radius: 9px; box-shadow: 0 8px 28px rgba(16, 24, 20, .14); max-height: 300px; overflow: auto; z-index: 30; }
.secici-oge { padding: 7px 11px; cursor: pointer; border-bottom: 1px solid #f0f3f1; }
.secici-oge:last-child { border-bottom: 0; }
.secici-oge.isaretli, .secici-oge:hover { background: var(--ana-acik); }
.secici-alt { font-size: 12px; color: var(--soluk); }
.secici-bos { padding: 10px 11px; color: var(--soluk); }

/* Tablo */
.tablo-sar { overflow: auto; border: 1px solid var(--cizgi); border-radius: 9px; max-height: 70vh; background: #fff; }
table.tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablo th, .tablo td { padding: 7px 10px; border-bottom: 1px solid #edf1ee; text-align: left; white-space: nowrap; }
.tablo th { background: #f5f7f5; font-weight: 650; color: #39443e; position: sticky; top: 0; z-index: 1; }
.tablo tbody tr:hover { background: #fafcfb; }
.tablo td.sag, .tablo th.sag { text-align: right; }
.tablo tr.secili-satir { background: var(--ana-acik) !important; }
.tablo tr.tiklanir { cursor: pointer; }
th.sirala { cursor: pointer; user-select: none; }
th.sirala::after { content: " ↕"; color: #b8c2bc; font-size: 10px; }
th.sirala[data-ok="asc"]::after { content: " ▲"; color: var(--ana); }
th.sirala[data-ok="desc"]::after { content: " ▼"; color: var(--ana); }

.filtre { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filtre > div { min-width: 140px; }
.filtre .genis { flex: 1; min-width: 200px; }
.sekmeler { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--cizgi); }
.sekmeler button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--soluk); }
.sekmeler button.aktif { color: var(--ana); border-bottom-color: var(--ana); }

/* Modal */
.modal-zemin { position: fixed; inset: 0; background: rgba(12, 20, 16, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: #fff; border-radius: 12px; width: min(620px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.modal-bas { padding: 16px 18px 10px; font-weight: 700; font-size: 16px; }
.modal-ic { padding: 0 18px 8px; }
.modal-alt { padding: 12px 18px 16px; display: flex; justify-content: flex-end; gap: 8px; }
dl.ozet { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
dl.ozet dt { color: var(--soluk); }
dl.ozet dd { margin: 0; font-weight: 600; }
pre.json { background: #0f1914; color: #cfe7d9; border-radius: 8px; padding: 12px; font-size: 12px; overflow: auto; max-height: 340px; }

/* Bildirim (toast) */
#ncv-bildirimler { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: #1c2421; color: #fff; padding: 10px 14px; border-radius: 9px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); max-width: 420px; font-size: 13.5px; }
.toast-iyi { background: var(--ana); } .toast-hata { background: var(--hata); }

.gonder-cubuk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sonuc-kutu { margin-top: 14px; }
.buyuk-no { font-size: 20px; font-weight: 750; letter-spacing: .3px; font-variant-numeric: tabular-nums; }

/* Giriş */
.giris-zemin { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, #10291d, #1f6f4a); }
.giris-kart { width: min(380px, 100%); background: #fff; border-radius: 14px; padding: 26px; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
.giris-kart h1 { font-size: 19px; margin: 12px 0 4px; }