/* ====================================================================
   Kapital Finans - portal, yonetim ve kimlik ekranlari.
   kurumsal.css icindeki marka degiskenlerini (--navy, --gold, --cream,
   --display, --body) KULLANIR; yeniden tanimlamaz.

   RENK KURALI
     olumlu  yesil   --iyi
     olumsuz kirmizi --kotu
     uyari   turuncu --uyari
     not     mavi    --bilgi
   Zemin DAIMA opasiteli. Renk TEK BASINA anlam tasimaz: her rozetin
   yazili karsiligi vardir.
   ==================================================================== */

:root {
  --iyi:        #1f6d43;
  --iyi-zemin:  #e7f2ec;
  --kotu:       #a02121;
  --kotu-zemin: #f7e8e8;
  --uyari:      #9a5b12;
  --uyari-zemin:#fbeedd;
  --bilgi:      #17457a;
  --bilgi-zemin:#e6eefa;
  --kabuk-genislik: 264px;
}

/* ---------- ust menu: giris / hesap olustur ---------- */
.nav-menu .nav-auth-giris { font-weight: 600; }
.nav-cikis-form { margin: 0; display: inline; }
.nav-cikis {
  font: inherit; font-family: var(--body); font-size: .92rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; letter-spacing: .01em;
}
.nav-cikis:hover { color: var(--gold); }
.hero-giris-not { margin-top: 18px; font-size: .95rem; color: var(--cream-warm); }
.hero-giris-not a { color: var(--gold-light); text-decoration: underline; }

/* Klavye odagi HER YERDE gorunur. Renk tek basina degil, cerceve de var. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==================================================================
   KIMLIK EKRANLARI (giris, kayit, sifre, onay bekliyor)
   ================================================================== */
.kimlik {
  min-height: 72vh;
  background: var(--cream);
  padding: 120px 20px 72px;
  display: flex; justify-content: center; align-items: flex-start;
}
.kimlik-kart {
  width: 100%; max-width: 460px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 40px 34px;
}
.kimlik-kart.genis { max-width: 720px; }
.kimlik-baslik {
  font-family: var(--display); font-size: 1.9rem; font-weight: 600;
  color: var(--navy-deep); margin: 0 0 6px;
}
.kimlik-alt { color: var(--muted); font-size: .95rem; margin: 0 0 26px; }

/* ---------- form ogeleri ---------- */
.alan { margin-bottom: 18px; }
.alan label {
  display: block; font-size: .86rem; font-weight: 600;
  color: var(--navy); margin-bottom: 6px; letter-spacing: .02em;
}
.alan .zorunlu { color: var(--kotu); }
.alan input, .alan select, .alan textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--body); font-size: .98rem;
  padding: 11px 13px;
  border: 1px solid #cfc9bb; background: #fff; color: var(--ink);
}
.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--gold); }
.alan input[aria-invalid="true"] { border-color: var(--kotu); background: var(--kotu-zemin); }
.alan-ipucu { font-size: .82rem; color: var(--muted); margin-top: 5px; }
.alan-hata { font-size: .84rem; color: var(--kotu); margin-top: 5px; font-weight: 600; }

.onay-satiri { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0; }
.onay-satiri input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.onay-satiri label { font-size: .9rem; font-weight: 400; color: var(--ink); margin: 0; }

.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .ikili { grid-template-columns: 1fr; } }

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-size: .95rem; font-weight: 600; letter-spacing: .02em;
  padding: 12px 22px; border: 1px solid transparent; cursor: pointer;
  background: var(--navy-deep); color: var(--cream); text-decoration: none;
}
.dugme:hover { background: var(--navy); }
.dugme.tam { width: 100%; }
.dugme.altin { background: var(--gold); color: var(--navy-deep); }
.dugme.altin:hover { background: var(--gold-light); }
.dugme.sade { background: transparent; color: var(--navy-deep); border-color: #cfc9bb; }
.dugme.sade:hover { border-color: var(--navy); }
.dugme.kucuk { padding: 7px 14px; font-size: .85rem; }
.dugme:disabled, .dugme[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.kimlik-ayrac {
  margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: .9rem; color: var(--muted); text-align: center;
}
.kimlik-ayrac a { color: var(--navy); font-weight: 600; }

/* ==================================================================
   BILDIRIM KUTULARI - renk + ikon YAZISI + metin
   ================================================================== */
.kutu { padding: 14px 16px; margin-bottom: 20px; border-left: 4px solid; font-size: .93rem; }
.kutu strong { display: block; margin-bottom: 3px; }
.kutu.iyi   { background: var(--iyi-zemin);   border-color: var(--iyi);   color: #12482c; }
.kutu.kotu  { background: var(--kotu-zemin);  border-color: var(--kotu);  color: #7a1919; }
.kutu.uyari { background: var(--uyari-zemin); border-color: var(--uyari); color: #7a470e; }
.kutu.bilgi { background: var(--bilgi-zemin); border-color: var(--bilgi); color: #123458; }
.kutu ul { margin: 6px 0 0; padding-left: 20px; }

.rozet {
  display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; white-space: nowrap;
}
.rozet.iyi   { background: var(--iyi-zemin);   color: var(--iyi); }
.rozet.kotu  { background: var(--kotu-zemin);  color: var(--kotu); }
.rozet.uyari { background: var(--uyari-zemin); color: var(--uyari); }
.rozet.bilgi { background: var(--bilgi-zemin); color: var(--bilgi); }
.rozet.notr  { background: #ece8de; color: #5a5346; }

/* ==================================================================
   PORTAL KABUGU - sol menu + orta alan
   ================================================================== */
.kabuk { display: flex; min-height: 100vh; background: var(--cream); }

.yan {
  width: var(--kabuk-genislik); flex: none;
  background: var(--navy-deep); color: var(--cream);
  display: flex; flex-direction: column;
}
.yan-marka {
  padding: 22px 22px 18px; border-bottom: 1px solid rgba(201,169,97,.22);
  display: flex; align-items: center; gap: 11px; text-decoration: none;
}
.yan-marka .im {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: var(--gold); color: var(--navy-deep);
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
}
.yan-marka .ad { font-family: var(--display); font-size: 1.15rem; color: var(--cream); }
.yan-marka .ad span { color: var(--gold); }

.yan-menu { padding: 16px 0; flex: 1; overflow-y: auto; }
.yan-baslik {
  padding: 16px 22px 7px; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(247,244,237,.45);
}
.yan-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 22px; color: rgba(247,244,237,.82);
  font-size: .93rem; text-decoration: none; border-left: 3px solid transparent;
}
.yan-menu a:hover { background: rgba(255,255,255,.05); color: #fff; }
.yan-menu a.secili {
  background: rgba(201,169,97,.13); color: #fff;
  border-left-color: var(--gold); font-weight: 600;
}
.yan-menu .bos-not { padding: 4px 22px 10px; font-size: .82rem; color: rgba(247,244,237,.5); }

.yan-alt { padding: 16px 22px; border-top: 1px solid rgba(201,169,97,.22); font-size: .85rem; }
.yan-alt .kim { color: var(--cream); font-weight: 600; }
.yan-alt .eposta { color: rgba(247,244,237,.55); font-size: .78rem; word-break: break-all; }
.yan-alt form { margin-top: 10px; }
.yan-alt button {
  font: inherit; background: none; border: 1px solid rgba(247,244,237,.3);
  color: rgba(247,244,237,.8); padding: 6px 12px; cursor: pointer; font-size: .82rem;
}
.yan-alt button:hover { border-color: var(--gold); color: var(--gold); }

.orta { flex: 1; min-width: 0; padding: 30px 34px 60px; }
.orta-ust {
  display: flex; flex-wrap: wrap; gap: 14px 20px;
  align-items: baseline; justify-content: space-between; margin-bottom: 26px;
}
.orta-baslik { font-family: var(--display); font-size: 2rem; font-weight: 600; color: var(--navy-deep); margin: 0; }
.orta-alt { color: var(--muted); font-size: .95rem; margin: 4px 0 0; }

.mobil-menu-dugme { display: none; }

/* ---------- olcum serisi (dashboard ust bandi) ---------- */
.olcumler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 30px; }
.olcum { background: #fff; padding: 18px 20px; min-width: 0; }
.olcum .ad { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.olcum .deger { font-family: var(--display); font-size: 1.8rem; font-weight: 600; color: var(--navy-deep); margin-top: 6px; line-height: 1.1; }
.olcum .deger.yok { font-family: var(--body); font-size: .95rem; font-weight: 400; color: var(--muted); }
.olcum .not { font-size: .8rem; color: var(--muted); margin-top: 4px; }

/* ---------- bolum ---------- */
/* KURUMSAL SAYFA DOLGUSU PORTALA SIZIYORDU (Codex HOLD3 md.7 sinifi).
   Butun duzenler once kurumsal.css yukluyor ve orada GENEL bir
   `section { padding: 8rem 0 }` kurali var. Portal bolumleri de
   <section> oldugu icin bu dolguyu aliyorlardi: 768px'te olculen
   bolum arasi 56 + 34 + 56 = 146px. Ekran goruntusunde bos bir bant
   olarak gorundu ve DOM olcumuyle dogrulandi.

   Portal kabugu icindeki bolumler kendi araligini kullanir. */
.kabuk section { padding: 0; }
.bolum { margin-bottom: 34px; }
.bolum-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.bolum-baslik { font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--navy-deep); margin: 0; }
.bolum-bag { font-size: .88rem; color: var(--navy); font-weight: 600; }

/* ---------- is listesi (yapilmasi gerekenler) ---------- */
.isler { border: 1px solid var(--border); background: #fff; }
.is {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  padding: 13px 18px; border-bottom: 1px solid var(--border);
}
.isler .is:last-child { border-bottom: 0; }
.is .metin { flex: 1; min-width: 180px; font-size: .93rem; }

/* ---------- uygulama listesi (kart coplugu DEGIL, satir listesi) ---------- */
.uygulamalar { border: 1px solid var(--border); background: #fff; }
.uygulama {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 4px 16px; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.uygulamalar .uygulama:last-child { border-bottom: 0; }
.uygulama .im {
  grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--navy-deep); color: var(--gold);
  font-family: var(--display); font-size: 1.1rem; font-weight: 700;
}
.uygulama .ad { font-weight: 600; color: var(--navy-deep); font-size: 1rem; }
.uygulama .ad .rozet { margin-left: 8px; vertical-align: 2px; }
.uygulama .aciklama { grid-column: 2; font-size: .88rem; color: var(--muted); }
.uygulama .eylem { grid-row: span 2; grid-column: 3; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.uygulama .gerekce { grid-column: 2; font-size: .85rem; color: var(--uyari); margin-top: 2px; }

/* ---------- tablo ---------- */
.tablo-sarmal { overflow-x: auto; border: 1px solid var(--border); background: #fff; }
table.veri { width: 100%; border-collapse: collapse; font-size: .91rem; min-width: 560px; }
table.veri th, table.veri td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.veri th { background: var(--cream-warm); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); font-weight: 700; }
table.veri tr:last-child td { border-bottom: 0; }
table.veri td.sayi, table.veri th.sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- bos durum ---------- */
.bos {
  border: 1px dashed #cfc9bb; background: #fff;
  padding: 34px 24px; text-align: center; color: var(--muted); font-size: .95rem;
}
.bos strong { display: block; color: var(--navy-deep); font-family: var(--display); font-size: 1.15rem; margin-bottom: 6px; }

/* ---------- yukleniyor ---------- */
.yukleniyor { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: .9rem; }
.yukleniyor::before {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 2px solid #cfc9bb; border-top-color: var(--gold); border-radius: 50%;
  animation: doner .8s linear infinite;
}
@keyframes doner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .yukleniyor::before { animation: none; } }

/* ==================================================================
   YONETIM KABUGU - kullanici kabugundan GORSEL OLARAK AYRI
   Sol menu daha koyu, ustte acik "Yonetim" bandi, altin yerine
   soguk vurgu. Iki kabuk asla ayni gorunmez.
   ================================================================== */
.kabuk.yonetim .yan { background: #0c1420; }
.kabuk.yonetim .yan-marka .im { background: #24507f; color: #eaf1fb; }
.kabuk.yonetim .yan-marka .ad span { color: #7ea6d8; }
.kabuk.yonetim .yan-menu a.secili { background: rgba(126,166,216,.16); border-left-color: #7ea6d8; }
.kabuk.yonetim .yan-alt button:hover { border-color: #7ea6d8; color: #7ea6d8; }
.yonetim-bant {
  background: #17293f; color: #cfe0f5; padding: 9px 34px;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.kabuk.yonetim .orta { background: #f4f5f7; }
.kabuk.yonetim .olcum .deger { color: #17293f; }

/* ==================================================================
   DUYARLI YERLESIM
   1440 / 768 / 390 uc kirilimda YATAY TASMA OLMAMALI.
   ================================================================== */
@media (max-width: 1100px) {
  .olcumler { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .kabuk { display: block; }
  .yan {
    width: auto; position: sticky; top: 0; z-index: 40;
    flex-direction: row; align-items: center; justify-content: space-between;
    padding-right: 14px;
  }
  .yan-marka { border-bottom: 0; padding: 14px 16px; }
  .yan-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy-deep); padding: 8px 0 16px; max-height: 72vh;
  }
  .yan-menu.acik { display: block; }
  .kabuk.yonetim .yan-menu { background: #0c1420; }
  .yan-alt { display: none; }
  .mobil-menu-dugme {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1px solid rgba(247,244,237,.35); color: var(--cream);
    font: inherit; font-size: .88rem; padding: 8px 14px; cursor: pointer;
  }
  .orta { padding: 22px 18px 48px; }
  .yonetim-bant { padding: 9px 18px; }
}

@media (max-width: 560px) {
  .olcumler { grid-template-columns: 1fr; }
  .orta-baslik { font-size: 1.55rem; }
  .uygulama { grid-template-columns: 38px minmax(0,1fr); }
  .uygulama .im { width: 38px; height: 38px; grid-row: span 1; }
  .uygulama .aciklama, .uygulama .gerekce { grid-column: 1 / -1; }
  .uygulama .eylem { grid-row: auto; grid-column: 1 / -1; justify-content: flex-start; margin-top: 8px; }
  .kimlik { padding: 96px 14px 48px; }
  .kimlik-kart { padding: 28px 20px; }
}

/* ---------- ozet liste (etiket / deger) ---------- */
.ozet-liste { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 22px 0 0; font-size: .93rem; }
.ozet-liste dt { color: var(--muted); }
.ozet-liste dd { margin: 0; color: var(--ink); font-weight: 600; word-break: break-word; }
.ayrac-form { margin-top: 12px; }

/* ---------- katlanabilir bolum ---------- */
.firma-katla { border: 1px solid var(--border); background: var(--cream); padding: 0 16px; margin: 6px 0 18px; }
.firma-katla > summary {
  cursor: pointer; padding: 13px 0; font-weight: 600; color: var(--navy);
  font-size: .92rem; list-style: none;
}
.firma-katla > summary::-webkit-details-marker { display: none; }
.firma-katla > summary::before { content: "+ "; color: var(--gold); font-weight: 700; }
.firma-katla[open] > summary::before { content: "- "; }
.firma-katla[open] { padding-bottom: 8px; }

/* ---------- gecis (SSO) ara ekrani ---------- */
.gecis { min-height: 60vh; display: grid; place-items: center; padding: 120px 20px; background: var(--cream); }
.gecis-kart { text-align: center; max-width: 420px; }
.gecis-kart h1 { font-family: var(--display); font-size: 1.6rem; color: var(--navy-deep); margin: 0 0 10px; }
.gecis-kart p { color: var(--muted); font-size: .95rem; }

/* ---------- filtre satiri ---------- */
.filtre { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 18px; }
.filtre .alan { margin-bottom: 0; }
.filtre input, .filtre select { min-width: 180px; }

/* ---------- satir ici form (tablo icinde) ---------- */
.satir-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.satir-form input[type="text"], .satir-form input[type="date"], .satir-form select { min-width: 120px; padding: 7px 9px; font-size: .88rem; border: 1px solid #cfc9bb; }

/* ---------- yeni kayit paneli ---------- */
.panel { border: 1px solid var(--border); background: #fff; padding: 20px; margin-bottom: 26px; }
.panel h2 { font-family: var(--display); font-size: 1.15rem; color: var(--navy-deep); margin: 0 0 14px; }
.panel .satirlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.modul-secim { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 16px; }
.modul-secim label { display: inline-flex; gap: 7px; align-items: center; font-size: .9rem; font-weight: 400; }
.modul-secim input { width: 17px; height: 17px; }

/* Ekran okuyucuya gorunur, goze gorunmez baslik. */
.gizli-baslik {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- mobil cikis (yan menu icinde) ----------
   Masaustunde .yan-alt icindeki cikis gorunur; mobilde .yan-alt gizlendigi
   icin cikis menunun icine tasinir. Onceki surumde mobilde cikis dugmesi
   0x0 boyutundaydi, yani YOKTU. */
.yan-menu-cikis { display: none; }
@media (max-width: 900px) {
  .yan-menu-cikis { display: block; padding: 14px 22px 4px; border-top: 1px solid rgba(201,169,97,.22); margin-top: 10px; }
  .yan-menu-cikis .dugme { color: var(--cream); border-color: rgba(247,244,237,.35); }
  .yan-menu-cikis .dugme:hover { border-color: var(--gold); color: var(--gold); }
}

/* ---------- katlanabilir satir ici bolum ---------- */
.yenile-katla > summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--navy); padding: 6px 0; }
.yenile-katla[open] { padding-bottom: 6px; }
.alan-kumesi { border: 0; padding: 0; margin: 0; min-width: 0; }
.alan-kumesi[disabled] input, .alan-kumesi[disabled] select { background: #f4f2ec; color: var(--muted); }
.ayrac-cizgi { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

/* ---------- davet baglantisi (bir kez gosterilir) ---------- */
.davet-kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86rem; background: #fff; border: 1px solid var(--border);
  padding: 10px 12px; margin: 10px 0 6px; word-break: break-all;
}

/* ---------- mobilde dikey bosluklari azalt ---------- */
@media (max-width: 560px) {
  .bolum { margin-bottom: 22px; }
  .olcum { padding: 13px 15px; }
  .panel { padding: 15px; margin-bottom: 18px; }
  .kutu { padding: 11px 13px; margin-bottom: 14px; }
  .orta-ust { margin-bottom: 18px; }
  .bos { padding: 22px 16px; }
  .kimlik { padding: 84px 14px 36px; }
}