/* ============================================================
   VALOR, kurumsal stil
   Marka: lacivert + altın + gümüş (HM Finans logosundan)
   Düz (flat) görünüm; degrade/parlama yok.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --lacivert:       #1B3A66;
  --lacivert-koyu:  #0F2748;
  --lacivert-acik:  #2A4E80;
  --altin:          #C9A227;
  --altin-koyu:     #AE881C;
  --gumus:          #9CA3AF;
  --yuzey:          #F5F7FA;
  --kart:           #FFFFFF;
  --metin:          #16233A;
  --metin-soluk:    #5B6B82;
  --kenar:          #E2E8F0;
  --basari:         #15794C;
  --hata:           #C0392B;
  --hata-bg:        #FCEBEB;

  --kenar-menu-genislik: 252px;
  --r: 10px;

  --golge: 0 1px 2px rgba(15, 39, 72, 0.06), 0 2px 8px rgba(15, 39, 72, 0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--metin);
  background: var(--yuzey);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
}

.tabular { font-variant-numeric: tabular-nums; }

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

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r);
  padding: 11px 18px; font-size: 15px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  text-align: center;
}
/* Ana aksiyon: lacivert */
.btn-ana { background: var(--lacivert); color: #fff; }
.btn-ana:hover { background: var(--lacivert-acik); color: #fff; }
/* Premium aksiyon: altın zemin + lacivert yazı (kontrast yüksek) */
.btn-altin { background: var(--altin); color: var(--lacivert-koyu); font-weight: 600; }
.btn-altin:hover { background: var(--altin-koyu); color: #fff; }
.btn-cizgi { background: transparent; border-color: var(--kenar); color: var(--metin); }
.btn-cizgi:hover { border-color: var(--gumus); background: #fff; }
.btn-blok { width: 100%; }

/* ---------- Formlar ---------- */
.alan { margin-bottom: 16px; }
.alan label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--metin-soluk); margin-bottom: 6px;
}
.girdi {
  width: 100%; padding: 11px 13px; font-size: 15px; font-family: inherit;
  color: var(--metin); background: #fff;
  border: 1px solid var(--kenar); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
.girdi:focus {
  outline: none; border-color: var(--lacivert);
  box-shadow: 0 0 0 3px rgba(27, 58, 102, 0.12);
}
.girdi::placeholder { color: #9aa6b8; }

.onay { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--metin-soluk); }
.onay input { width: 16px; height: 16px; accent-color: var(--lacivert); }

/* ---------- Uyarılar ---------- */
.uyari {
  border-radius: var(--r); padding: 12px 14px; font-size: 14px; margin-bottom: 16px;
  border: 1px solid transparent;
}
.uyari-hata { background: var(--hata-bg); border-color: #f2c4c4; color: var(--hata); }
.uyari-basari { background: #e8f5ee; border-color: #b9e2cd; color: var(--basari); }
.uyari ul { margin: 0; padding-left: 18px; }

/* ============================================================
   GİRİŞ EKRANI
   ============================================================ */
.giris-sahne {
  min-height: 100%;
  background: var(--lacivert-koyu);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.giris-kart {
  width: 100%; max-width: 408px;
  background: var(--kart); border-radius: 16px;
  border-top: 3px solid var(--altin);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  padding: 36px 32px 30px;
}
.giris-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 26px; }
.giris-logo img, img.giris-logo { width: 72px; height: 72px; border-radius: 16px; box-shadow: var(--golge); object-fit: cover; display: block; margin: 0 auto 16px; }
.giris-marka { margin-top: 14px; font-size: 22px; font-weight: 700; letter-spacing: 3px; color: var(--lacivert); }
.giris-alt { font-size: 13px; color: var(--metin-soluk); margin-top: 2px; }
.giris-baslik { font-size: 15px; font-weight: 500; color: var(--metin); margin-bottom: 18px; text-align: center; }

/* ============================================================
   UYGULAMA DÜZENİ (kenar menü + üst bar + içerik)
   ============================================================ */
.kabuk { display: flex; min-height: 100vh; }

/* Kenar menü */
.kenar {
  width: var(--kenar-menu-genislik); flex-shrink: 0;
  background: var(--lacivert-koyu); color: #cdd6e4;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.kenar-tepe { padding: 20px 20px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.kenar-tepe img { width: 38px; height: 38px; border-radius: 9px; }
.kenar-marka { font-size: 18px; font-weight: 700; letter-spacing: 2px; color: #fff; }
.kenar-marka small { display: block; font-size: 11px; font-weight: 400; letter-spacing: .5px; color: var(--gumus); }

.kenar-menu { flex: 1; overflow-y: auto; padding: 14px 12px; }
.kenar-menu .baslikcik { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #6b7a92; padding: 6px 12px 8px; }
.menu-oge {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 8px; color: #cdd6e4;
  font-size: 14.5px; font-weight: 500; margin-bottom: 2px;
  border-left: 3px solid transparent;
}
.menu-oge:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu-oge.aktif { background: rgba(201, 162, 39, .14); color: #fff; border-left-color: var(--altin); }

.kenar-dip { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.kenar-kullanici { font-size: 13.5px; color: #fff; font-weight: 500; }
.kenar-rol { font-size: 12px; color: var(--gumus); margin-bottom: 10px; text-transform: capitalize; }

/* Ana alan */
.ana { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ust-bar {
  height: 62px; background: #fff; border-bottom: 1px solid var(--kenar);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: sticky; top: 0; z-index: 20;
}
.ust-baslik { font-size: 18px; font-weight: 600; color: var(--metin); }
.ust-sag { display: flex; align-items: center; gap: 16px; }
.surum-rozet {
  font-size: 12px; color: var(--lacivert); background: #eef2f8;
  border: 1px solid var(--kenar); border-radius: 20px; padding: 4px 11px; font-weight: 500;
}
.menu-dugme { display: none; background: none; border: none; cursor: pointer; font-size: 22px; color: var(--lacivert); line-height: 1; }

.icerik { padding: 26px 24px 40px; }

/* ---------- Kartlar / özet ---------- */
.izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.kart {
  background: var(--kart); border: 1px solid var(--kenar); border-radius: var(--r);
  padding: 18px 20px; box-shadow: var(--golge);
}
.ozet-etiket { font-size: 13px; color: var(--metin-soluk); margin-bottom: 8px; }
.ozet-deger { font-size: 26px; font-weight: 600; color: var(--metin); }
.ozet-bos { font-size: 14px; color: var(--gumus); font-style: italic; }

.kart-baslik { font-size: 16px; font-weight: 600; color: var(--metin); margin-bottom: 4px; }
.kart-aciklama { font-size: 14px; color: var(--metin-soluk); }

.bos-durum {
  background: #fff; border: 1px dashed var(--kenar); border-radius: var(--r);
  padding: 30px; text-align: center; color: var(--metin-soluk);
}
.bos-durum .rozet-yapim {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .5px;
  color: var(--altin-koyu); background: #fbf3dc; border: 1px solid #f0e0a8;
  border-radius: 20px; padding: 4px 12px; margin-bottom: 12px;
}

.ipucu {
  font-size: 13px; color: var(--metin-soluk);
  background: #eef2f8; border-left: 3px solid var(--lacivert);
  border-radius: 0 8px 8px 0; padding: 12px 14px; margin-top: 20px;
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .kenar {
    position: fixed; z-index: 50; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .kabuk.acik .kenar { transform: translateX(0); }
  .menu-dugme { display: block; }
  .kabuk.acik::after {
    content: ''; position: fixed; inset: 0; background: rgba(15,39,72,.5); z-index: 40;
  }
}

/* ============================================================
   FİRMA SİHİRBAZI / LİSTE  (eklenen bileşenler)
   ============================================================ */
.liste-ust { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }

/* Tablo */
.tablo { width:100%; border-collapse:collapse; font-size:14px; }
.tablo thead th {
  text-align:left; font-weight:600; color:var(--metin-soluk);
  background:var(--yuzey); padding:12px 14px; border-bottom:1px solid var(--kenar);
  font-size:12px; text-transform:uppercase; letter-spacing:.03em;
}
.tablo tbody td { padding:13px 14px; border-bottom:1px solid var(--kenar); color:var(--metin); vertical-align:top; }
.tablo tbody tr:last-child td { border-bottom:none; }
.tablo tbody tr:hover { background:#fafbfd; }
.alt-bilgi { font-size:12px; color:var(--metin-soluk); margin-top:3px; }

/* Kod rozeti */
.rozet {
  display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:600; letter-spacing:.08em; font-size:13px;
  background:var(--lacivert-koyu); color:#fff; padding:4px 9px; border-radius:6px;
}

/* Durum etiketi */
.durum { display:inline-block; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; }
.durum-taslak { background:#fdf3e3; color:var(--altin-koyu); }
.durum-aktif  { background:#e8f5ee; color:var(--basari); }
.durum-pasif  { background:#eef1f5; color:var(--metin-soluk); }

/* Sihirbaz bölümleri */
.bolum { margin-bottom:18px; }
.bolum-baslik { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; color:var(--metin); margin-bottom:6px; }
.adim {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--lacivert); color:#fff; font-size:13px; font-weight:600;
}
.form-izgara { display:grid; grid-template-columns:repeat(2,1fr); gap:0 18px; }
@media (max-width:720px){ .form-izgara { grid-template-columns:1fr; } }

/* Firma türü seçim kartları */
.secim-izgara { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:12px; }
@media (max-width:720px){ .secim-izgara { grid-template-columns:1fr; } }
.secim-kart {
  position:relative; display:flex; flex-direction:column; gap:6px;
  border:1.5px solid var(--kenar); border-radius:var(--r); padding:16px 16px 16px 44px;
  cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s;
}
.secim-kart:hover { border-color:var(--gumus); }
.secim-kart input[type="radio"] { position:absolute; top:17px; left:16px; width:18px; height:18px; accent-color:var(--lacivert); }
.secim-kart.secili { border-color:var(--lacivert); background:#f4f7fc; box-shadow:0 0 0 3px rgba(27,58,102,.10); }
.secim-ust { font-weight:600; color:var(--metin); }
.secim-alt { font-size:13px; color:var(--metin-soluk); line-height:1.45; }
.secim-satir { display:flex; flex-wrap:wrap; gap:14px 22px; }

.finans-alt { border-top:1px dashed var(--kenar); padding-top:14px; }

/* Alan altı hata */
.alan-hata { color:var(--hata); font-size:13px; margin-top:6px; }

/* Sihirbaz dip aksiyonları */
.sihirbaz-dip { display:flex; justify-content:flex-end; gap:12px; margin-top:6px; }

/* Beyanname PDF okuma adimi */
.pdf-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.pdf-dosya{max-width:420px}
.pdf-ozet{margin-top:12px;padding:10px 12px;border:1px solid #cdebd6;background:#f1faf4;border-radius:8px;font-size:14px;color:#1f5132}
.pdf-ozet .pdf-kaldir{margin-left:8px;color:#8a5b00;text-decoration:underline}
.girdi[readonly]{background:#f3f4f6;color:#374151;cursor:not-allowed}
.pdf-rozet{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:10px;background:#e7eef9;color:#274b8f;font-size:11px;font-weight:700;vertical-align:middle}

/* Adim adim sihirbaz */
.adim-panel{display:none}
.adim-panel.aktif{display:block;animation:adimGir .18s ease}
@keyframes adimGir{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sihirbaz-ilerleme{display:flex;gap:6px;margin:0 0 18px;flex-wrap:wrap}
.ilerleme-adim{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e3e7ee;border-radius:999px;background:#fff;cursor:pointer;font-size:13px;color:#6b7280;flex:1 1 auto;min-width:120px}
.ilerleme-adim .ilerleme-no{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#e7eef9;color:#274b8f;font-weight:700;font-size:12px}
.ilerleme-adim.aktif{border-color:#1f4b8f;color:#13315c;font-weight:600;box-shadow:0 1px 6px rgba(31,75,143,.12)}
.ilerleme-adim.aktif .ilerleme-no{background:#1f4b8f;color:#fff}
.ilerleme-adim.tamam .ilerleme-no{background:#1f8f5a;color:#fff}
.adim-dip{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.adim-hata{color:#b3261e;font-size:13px;margin-top:8px}

/* Surum notlari sayfasi */
.surum-kart{margin-top:14px}
.surum-bas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.surum-rozet{display:inline-block;padding:2px 9px;border-radius:999px;background:#1f4b8f;color:#fff;font-weight:700;font-size:12px}
.surum-baslik{font-weight:600;color:#13315c}
.surum-tarih{color:#8a93a3;font-size:12px;margin-left:auto}
.surum-liste{margin:6px 0 0;padding-left:20px}
.surum-liste li{margin:5px 0;line-height:1.5}

/* ============================================================
   KAYIT KARTLARI (Formul / Metodoloji) ve SURUM DETAY KUNYESI
   ============================================================ */
.kayit-kart{margin-top:14px}
.kayit-bas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.kayit-kod{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:12px;background:var(--lacivert-koyu);color:#fff;padding:3px 9px;border-radius:6px;letter-spacing:.04em}
.kayit-ad{font-weight:600;color:#13315c;font-size:15px}
.kayit-durum{margin-left:auto;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.kd-uygulandi{background:#e8f5ee;color:var(--basari)}
.kd-referans{background:#eef2f8;color:#274b8f}
.kd-gelecek{background:#fbf3dc;color:var(--altin-koyu)}

.kunye{display:grid;grid-template-columns:210px 1fr;gap:8px 18px;font-size:14px;margin:0}
.kunye dt{color:var(--metin-soluk);font-weight:500}
.kunye dd{color:var(--metin);margin:0}
.kunye dd ul{margin:0;padding-left:18px}
.kunye dd li{margin:3px 0;line-height:1.5}
@media (max-width:680px){
  .kunye{grid-template-columns:1fr;gap:2px 0}
  .kunye dt{margin-top:10px}
}

.ifade-kutu{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;background:var(--lacivert-koyu);color:#e7eef9;padding:11px 13px;border-radius:8px;line-height:1.55;overflow-x:auto}

.bolge-varsayilan{display:inline-block;font-size:11px;font-weight:700;color:var(--basari);background:#e8f5ee;border-radius:999px;padding:1px 9px}

.surum-detay{margin-top:12px;border-top:1px dashed var(--kenar);padding-top:12px}

/* ============================================================
   AYARLAR: SEKMELER, PANELLER, AYAR SATIRLARI, DURUM ETIKETLERI
   ============================================================ */
.sekme-cubugu{
  display:flex; flex-wrap:wrap; gap:8px;
  position:sticky; top:0; z-index:20;
  background:var(--yuzey); padding:10px 0 12px; margin-bottom:4px;
  border-bottom:1px solid var(--kenar);
  overflow-x:auto;
}
.sekme{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--metin);
  border:1px solid var(--kenar); border-radius:999px;
  padding:8px 14px; font-size:13.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
}
.sekme:hover{ border-color:var(--altin); color:var(--lacivert); }
.sekme.aktif{ background:var(--lacivert); color:#fff; border-color:var(--lacivert); }
.sekme.aktif:hover{ background:var(--lacivert-acik); color:#fff; border-color:var(--lacivert-acik); }
.sekme-nokta{ width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--gumus); }
.nokta-hazir{ background:var(--basari); }
.nokta-eksik{ background:var(--gumus); }
.nokta-karar{ background:var(--altin); }
.nokta-hatali{ background:var(--hata); }

/* Panel */
.ayar-panel{ display:none; }
.ayar-panel.acik{ display:block; }
.ayar-panel-kart{
  background:#fff; border:1px solid var(--kenar);
  border-left:4px solid var(--lacivert);
  border-radius:var(--r); box-shadow:var(--golge);
  padding:18px 20px; margin-top:6px;
}
.ayar-panel-bas{ margin-bottom:6px; }
.ayar-panel-baslik{ font-size:17px; font-weight:700; color:var(--lacivert); }
.ayar-panel-aciklama{ font-size:13.5px; color:var(--metin-soluk); margin-top:5px; line-height:1.5; }
.ayar-met-link{ font-size:12.5px; }
.ayar-met-link a{ color:#274b8f; text-decoration:none; }
.ayar-met-link a:hover{ text-decoration:underline; }

/* Iki sutunlu ayar satiri */
.ayar-satir{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:10px 22px; align-items:start;
  padding:14px 0; border-top:1px solid var(--kenar);
}
.ayar-satir:first-of-type{ border-top:none; }
.ayar-sol-ad{ font-size:14px; font-weight:600; color:var(--metin); }
.ayar-sol-aciklama{ font-size:12.5px; color:var(--metin-soluk); margin-top:3px; line-height:1.45; }
.ayar-sol-kod{
  display:inline-block; margin-top:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  color:#5b6b82; background:#eef1f5; border-radius:6px; padding:2px 7px;
}
.ayar-sag .girdi{ font-size:14px; padding:9px 11px; }
.ayar-sag-not{ font-size:12px; color:var(--metin-soluk); margin-top:5px; }
.ayar-hesaplanan{
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; color:var(--lacivert);
  background:#f3f6fb; border:1px solid var(--kenar); border-radius:var(--r);
  padding:9px 12px;
}
.ayar-hesaplanan .rozet-hesap{
  font-size:10.5px; font-weight:700; color:#274b8f; background:#e6edf8;
  border-radius:999px; padding:1px 8px; margin-left:auto; white-space:nowrap;
}
.ayar-dip{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--kenar); }
.ayar-grup-ek{ margin-top:8px; }

/* Durum etiketleri (Veri Sagligi ve sekme paneli) */
.vs-pill{ display:inline-block; font-size:12px; font-weight:700; border-radius:999px; padding:2px 10px; white-space:nowrap; }
.vs-hazir{ background:#e8f5ee; color:var(--basari); }
.vs-eksik{ background:#eef1f5; color:var(--metin-soluk); }
.vs-karar{ background:#fbf3dc; color:var(--altin-koyu); }
.vs-hatali{ background:var(--hata-bg); color:var(--hata); }
.vs-guncel{ background:#fdf3e3; color:var(--altin-koyu); }

@media (max-width:680px){
  .ayar-satir{ grid-template-columns:1fr; gap:6px 0; }
  .ayar-sag{ margin-top:2px; }
  .sekme-cubugu{ flex-wrap:nowrap; }
}

/* Ayarlar sekme grup etiketi (Referans Veriler | Model ve Sistem Ayarlari) */
.sekme-grup-ad{font-size:11px;font-weight:700;color:#1B3A66;text-transform:uppercase;letter-spacing:.05em;margin:14px 2px 6px;opacity:.8;}
.sekme-grup-ad:first-child{margin-top:0;}