/* ============ KartPDKS Tema ============ */
:root {
    --renk-arka: #f4f5fb;
    --renk-yuzey: #ffffff;
    --renk-kenar: #e6e8f0;
    --renk-metin: #1f2333;
    --renk-soluk: #6b7186;
    --renk-vurgu: #1b3a73;       /* kurumsal lacivert (logo) */
    --renk-vurgu-koyu: #142a54;
    --renk-vurgu-soft: #e8eef7;
    --renk-yan: #14233f;          /* koyu lacivert sidebar (logo) */
    --renk-yan-metin: #aebbd4;
    --renk-yesil: #17a06a;        /* logo yeşili */
    --renk-kirmizi: #e0445b;
    --renk-amber: #e0922f;
    --golge: 0 1px 2px rgba(16,20,40,.06), 0 4px 16px rgba(16,20,40,.05);
    --r: 14px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--font);
    color: var(--renk-metin);
    background: var(--renk-arka);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .4rem; font-weight: 700; letter-spacing: -.01em; }
a { color: var(--renk-vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============ Uygulama kabuğu ============ */
.kabuk { display: flex; min-height: 100vh; }

.yan-menu {
    width: 248px; flex-shrink: 0;
    background: var(--renk-yan);
    color: var(--renk-yan-metin);
    padding: 18px 14px; position: sticky; top: 0; height: 100vh;
    overflow-y: auto;
}
.marka { padding: 4px 6px 20px; }
.marka-kutu { background: #fff; border-radius: 12px; padding: 12px 10px; display: flex; align-items: center; justify-content: center; }
.marka-kutu img { width: 100%; max-height: 130px; object-fit: contain; }
.marka-logo {
    width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(135deg, var(--renk-vurgu), var(--renk-yesil));
    color: #fff; font-weight: 800; font-size: 20px;
    display: grid; place-items: center;
}
.marka-ad { font-weight: 800; font-size: 18px; color: #fff; line-height: 1.1; }
.marka-ad span { display: block; font-size: 11px; font-weight: 500; color: var(--renk-yan-metin); margin-top: 2px; }

.menu-bolum { margin-bottom: 18px; }
.menu-baslik { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: #6b7194; padding: 6px 10px; }
.menu-link {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 10px; color: var(--renk-yan-metin);
    font-size: 14px; font-weight: 500; margin-bottom: 2px; transition: all .15s;
}
.menu-link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.menu-link.active { background: var(--renk-yesil); color: #fff; box-shadow: 0 4px 14px rgba(23,160,106,.35); }
.menu-link.active .mi { opacity: 1; }
/* Kurumsal: renkli emoji yerine tek-renk (beyaz) simgeler */
.menu-link .mi { font-size: 15px; width: 20px; text-align: center; filter: grayscale(1) brightness(0) invert(1); opacity: .8; }

.ana { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ust-bar {
    height: 64px; background: var(--renk-yuzey); border-bottom: 1px solid var(--renk-kenar);
    display: flex; align-items: center; padding: 0 26px; gap: 16px; position: sticky; top: 0; z-index: 5;
}
.ust-bos { flex: 1; }
.kullanici-kutu { display: flex; align-items: center; gap: 12px; }
.kullanici-bilgi { text-align: right; line-height: 1.15; }
.kullanici-ad { display: block; font-weight: 600; font-size: 14px; }
.kullanici-rol { display: block; font-size: 12px; color: var(--renk-soluk); }
.avatar {
    width: 38px; height: 38px; border-radius: 50%; background: var(--renk-vurgu-soft);
    color: var(--renk-vurgu-koyu); font-weight: 700; display: grid; place-items: center;
}
.cikis-btn {
    border: 1px solid var(--renk-kenar); background: #fff; color: var(--renk-soluk);
    padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.cikis-btn:hover { border-color: var(--renk-kirmizi); color: var(--renk-kirmizi); }

.icerik { padding: 28px 30px; flex: 1; }

/* ============ Auth ekranı ============ */
.auth-kabuk { display: flex; min-height: 100vh; }
.auth-sol {
    flex: 1; background: linear-gradient(150deg, #14233f 0%, #1b3a73 60%, #17a06a 140%);
    color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 40px;
}
.auth-logo-kutu { background: #fff; border-radius: 18px; padding: 22px 26px; display: inline-flex; max-width: 340px; box-shadow: 0 14px 40px rgba(0,0,0,.25); }
.auth-logo-kutu img { width: 100%; object-fit: contain; }
.auth-marka h1 { font-size: 40px; margin: 20px 0 10px; }
.auth-slogan { color: #d4e4f5; font-size: 16px; line-height: 1.6; margin-top: 22px; }
.auth-ozellik { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.auth-ozellik li { color: #dadcf2; font-size: 15px; }
.auth-sag { flex: 1; display: grid; place-items: center; padding: 40px; background: var(--renk-arka); }
@media (max-width: 860px) { .auth-sol { display: none; } }

.auth-form { width: 100%; max-width: 380px; }
.auth-form h2 { font-size: 26px; }
.auth-form .alt { color: var(--renk-soluk); margin-bottom: 26px; }

/* ============ Form ============ */
.alan { margin-bottom: 16px; }
.alan label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #424862; }
.girdi {
    width: 100%; padding: 11px 13px; border: 1px solid var(--renk-kenar); border-radius: 10px;
    font-size: 14px; font-family: var(--font); background: #fff; transition: border .15s, box-shadow .15s;
}
.girdi:focus { outline: none; border-color: var(--renk-vurgu); box-shadow: 0 0 0 3px var(--renk-vurgu-soft); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
    font-size: 14px; font-weight: 600; font-family: var(--font); transition: all .15s;
}
.btn-ana { background: var(--renk-vurgu); color: #fff; }
.btn-ana:hover { background: var(--renk-vurgu-koyu); }
.btn-ana:disabled { opacity: .6; cursor: not-allowed; }
.btn-blok { width: 100%; }
.btn-cizgi { background: #fff; border-color: var(--renk-kenar); color: var(--renk-metin); }
.btn-cizgi:hover { border-color: var(--renk-vurgu); color: var(--renk-vurgu); }
.btn-kucuk { padding: 7px 12px; font-size: 13px; }

/* ============ Kart / panel ============ */
.kart {
    background: var(--renk-yuzey); border: 1px solid var(--renk-kenar);
    border-radius: var(--r); box-shadow: var(--golge); padding: 22px;
}
.kart + .kart { margin-top: 18px; }
.sayfa-baslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.sayfa-baslik h1 { font-size: 24px; }
.sayfa-baslik .alt { color: var(--renk-soluk); font-size: 14px; }

/* İstatistik kartları */
.stat-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 22px; }
.stat {
    background: var(--renk-yuzey); border: 1px solid var(--renk-kenar); border-radius: var(--r);
    padding: 20px; box-shadow: var(--golge); display: flex; gap: 15px; align-items: center;
}
.stat .ikon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--renk-vurgu-soft); }
.stat .deger { font-size: 26px; font-weight: 800; line-height: 1; }
.stat .etiket { font-size: 13px; color: var(--renk-soluk); margin-top: 4px; }

/* Tablo */
.tablo { width: 100%; border-collapse: collapse; }
.tablo th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--renk-soluk); padding: 10px 12px; border-bottom: 1px solid var(--renk-kenar); }
.tablo td { padding: 12px; border-bottom: 1px solid #f0f1f6; font-size: 14px; }
.tablo tr:hover td { background: #fafaff; }

/* Rozet */
.rozet { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.rozet-yesil { background: #e4f7ec; color: var(--renk-yesil); }
.rozet-kirmizi { background: #fce7ea; color: var(--renk-kirmizi); }
.rozet-amber { background: #fcf1e1; color: var(--renk-amber); }
.rozet-gri { background: #eef0f5; color: var(--renk-soluk); }

/* Uyarı */
.uyari { padding: 11px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; }
.uyari-hata { background: #fce7ea; color: #b32338; border: 1px solid #f3c6cf; }
.uyari-bilgi { background: var(--renk-vurgu-soft); color: var(--renk-vurgu-koyu); }

.yukleniyor, .yetki-yok { padding: 40px; text-align: center; color: var(--renk-soluk); }

/* Modal */
.modal-arka { position: fixed; inset: 0; background: rgba(16,20,40,.45); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal-kutu { background: #fff; border-radius: var(--r); padding: 26px; width: 100%; max-width: 580px; box-shadow: 0 24px 60px rgba(0,0,0,.28); max-height: 90vh; overflow-y: auto; }
.modal-kutu h3 { font-size: 20px; margin-bottom: 18px; }
.modal-alt { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.validation-message, .validation-errors { color: var(--renk-kirmizi); font-size: 13px; }

/* Plan kartları */
.plan-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 14px; }
.plan-kart { border: 1px solid var(--renk-kenar); border-radius: var(--r); padding: 20px; transition: border .15s, box-shadow .15s; }
.plan-kart:hover { border-color: var(--renk-vurgu); box-shadow: var(--golge); }
.plan-ad { font-weight: 700; font-size: 16px; }
.plan-fiyat { font-size: 30px; font-weight: 800; margin: 8px 0; color: var(--renk-vurgu); }
.plan-fiyat span { font-size: 14px; font-weight: 500; color: var(--renk-soluk); }
.plan-aciklama { color: var(--renk-soluk); font-size: 13px; min-height: 36px; margin-bottom: 14px; }

/* Vardiya / rotasyon */
.renk-nokta { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.rotasyon-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.rotasyon-gun { border: 1px solid var(--renk-kenar); border-radius: 8px; padding: 7px; text-align: center; }
.rotasyon-gun .rg-no { font-size: 11px; font-weight: 700; color: var(--renk-soluk); display: block; margin-bottom: 4px; }
.rotasyon-gun .girdi { padding: 5px; font-size: 12px; }

/* Sekmeler */
.sekme-bar { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--renk-kenar); flex-wrap: wrap; }
.sekme { background: none; border: none; padding: 10px 16px; cursor: pointer; font-size: 14px; font-weight: 600;
    color: var(--renk-soluk); border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font); }
.sekme:hover { color: var(--renk-metin); }
.sekme.aktif { color: var(--renk-vurgu); border-bottom-color: var(--renk-vurgu); }
h4 { font-size: 14px; color: var(--renk-soluk); }

/* Profil fotoğrafı */
.foto-cerceve { width: 84px; height: 84px; border-radius: 14px; overflow: hidden; background: var(--renk-vurgu-soft);
    display: grid; place-items: center; font-size: 32px; font-weight: 700; color: var(--renk-vurgu-koyu);
    flex-shrink: 0; border: 1px solid var(--renk-kenar); }
.foto-cerceve img { width: 100%; height: 100%; object-fit: cover; }

/* Yazdırma (bordro fişi) */
@media print {
    .yan-menu, .ust-bar, .sayfa-baslik, .yazdirma-gizle, .icerik > .kart, .icerik > .uyari { display: none !important; }
    .modal-arka { position: static; background: none; padding: 0; display: block; }
    .modal-kutu { box-shadow: none; max-width: 100% !important; max-height: none; }
}

/* ============ Şablon (loading + hata) ============ */
.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem; }
.loading-progress circle { fill: none; stroke: #e6e8f0; stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--renk-vurgu); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: 700; inset: calc(20vh + 3.25rem) 0 auto 0; color: var(--renk-soluk); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Yükleniyor"); }

#blazor-error-ui {
    background: #fff3cd; bottom: 0; box-shadow: 0 -1px 6px rgba(0,0,0,.15);
    display: none; left: 0; padding: 0.9rem 1.4rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .7rem; }