/*
 * essigner tasarım sistemi (13.10, UI:Shell = v2). site.css'ten SONRA yüklenir; klasik görünümde yüklenmez.
 * 1) Tasarım değişkenleri (--es-*): yeni ekranlar (app-shell.css, signer.css) ve bu dosya aynı değerleri kullanır.
 * 2) Bootstrap 5.3 değişkenleri bu değerlere bağlanır: henüz elden geçmemiş eski sayfalar da yeni renk, köşe ve düğmeyle görünür.
 * 3) Bileşenler: düğme, form, kart, pencere, açılır menü, tablo, rozet, uyarı, sekme. site.css'teki !important köşe kuralları ezilir.
 */

:root {
    /* Renk */
    --es-ink: #0e1726;
    --es-ink-2: #2b3545;
    --es-muted: #5b6576;
    --es-line: #e3e7ed;
    --es-line-2: #cbd2dc;
    --es-ground: #f3f5f8;
    --es-surface: #ffffff;
    --es-accent: #1f4fd8;
    --es-accent-hover: #1a43b8;
    --es-accent-soft: #eef2fd;
    --es-success: #137a3f;
    --es-success-soft: #e8f5ee;
    --es-warning: #e3a008;
    --es-warning-soft: #fff4d6;
    --es-due: #8a4b00;
    --es-danger: #b42318;
    --es-danger-soft: #fdf2f2;
    --es-seal: #0f766e; /* kurum e-mührü */
    --es-seal-soft: #e6f4f2;
    /* Biçim */
    --es-radius-sm: 8px;
    --es-radius: 10px;
    --es-radius-lg: 16px;
    --es-radius-xl: 20px;
    --es-shadow: 0 1px 2px rgba(14, 23, 38, .05);
    --es-shadow-pop: 0 12px 32px rgba(14, 23, 38, .14);
    --es-focus: 0 0 0 3px rgba(31, 79, 216, .22);
    --es-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Bootstrap'a bağlama */
    --bs-primary: var(--es-accent);
    --bs-primary-rgb: 31, 79, 216;
    --bs-success: var(--es-success);
    --bs-success-rgb: 19, 122, 63;
    --bs-danger: var(--es-danger);
    --bs-danger-rgb: 180, 35, 24;
    --bs-warning: var(--es-warning);
    --bs-warning-rgb: 227, 160, 8;
    --bs-info: var(--es-accent);
    --bs-info-rgb: 31, 79, 216;
    --bs-body-font-family: var(--es-font);
    --bs-body-color: var(--es-ink);
    --bs-body-color-rgb: 14, 23, 38;
    --bs-body-bg: var(--es-ground);
    --bs-secondary-color: var(--es-muted);
    --bs-tertiary-bg: #f6f8fa;
    --bs-border-color: var(--es-line);
    --bs-border-radius: var(--es-radius);
    --bs-border-radius-sm: var(--es-radius-sm);
    --bs-border-radius-lg: var(--es-radius-lg);
    --bs-link-color: var(--es-accent);
    --bs-link-color-rgb: 31, 79, 216;
    --bs-link-hover-color: var(--es-accent-hover);
    --bs-link-hover-color-rgb: 26, 67, 184;
    --bs-focus-ring-color: rgba(31, 79, 216, .22);
    --bs-primary-text-emphasis: #163ba6;
    --bs-primary-bg-subtle: var(--es-accent-soft);
    --bs-primary-border-subtle: #c9d6f7;
    --bs-success-text-emphasis: #0f5a30;
    --bs-success-bg-subtle: var(--es-success-soft);
    --bs-success-border-subtle: #9bd3b1;
    --bs-danger-text-emphasis: #8e1b1b;
    --bs-danger-bg-subtle: var(--es-danger-soft);
    --bs-danger-border-subtle: #f3c7c7;
    --bs-warning-text-emphasis: var(--es-due);
    --bs-warning-bg-subtle: #fff1db;
    --bs-warning-border-subtle: #f5d29a;
}

/* ---------- Temel ---------- */

html { font-size: 15px; }
@media (max-width: 575.98px) { html { font-size: 14.5px; } }

body {
    font-family: var(--es-font);
    background-color: var(--es-ground);
    color: var(--es-ink);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--es-ink); font-weight: 700; letter-spacing: -0.01em; }
.text-secondary, .text-muted { color: var(--es-muted) !important; }
.text-primary { color: var(--es-accent) !important; }
.text-success { color: var(--es-success) !important; }
.text-danger { color: var(--es-danger) !important; }
.text-warning { color: var(--es-due) !important; }
.bg-light { background-color: #f6f8fa !important; }
a { color: var(--es-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--es-accent-hover); }
:focus-visible { outline: none; box-shadow: var(--es-focus); }

/* Eski sayfaların renkli başlık bandı sadeleşir */
.page-header-band {
    background: var(--es-surface) !important;
    border-bottom: 1px solid var(--es-line) !important;
    padding: 1.5rem 0 !important;
    margin-bottom: 1.5rem !important;
}
.page-header-band h2, .page-header-band h1 { font-size: 1.6rem !important; font-weight: 800 !important; color: var(--es-ink) !important; }

/* ---------- Düğme ---------- */

.btn, .btn-sm, .btn-lg { border-radius: var(--es-radius) !important; font-weight: 600; }
.btn { --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .95rem; --bs-btn-focus-box-shadow: var(--es-focus); transition: filter .12s, background-color .12s, border-color .12s; }
.btn-sm { --bs-btn-padding-y: .38rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .85rem; }
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.4rem; --bs-btn-font-size: 1.05rem; }

.btn-primary {
    --bs-btn-bg: var(--es-accent); --bs-btn-border-color: var(--es-accent);
    --bs-btn-hover-bg: var(--es-accent-hover); --bs-btn-hover-border-color: var(--es-accent-hover);
    --bs-btn-active-bg: #163ba6; --bs-btn-active-border-color: #163ba6;
    --bs-btn-disabled-bg: var(--es-accent); --bs-btn-disabled-border-color: var(--es-accent);
}
.btn-success {
    --bs-btn-bg: var(--es-success); --bs-btn-border-color: var(--es-success);
    --bs-btn-hover-bg: #0f6634; --bs-btn-hover-border-color: #0f6634;
    --bs-btn-active-bg: #0c5229; --bs-btn-active-border-color: #0c5229;
    --bs-btn-disabled-bg: var(--es-success); --bs-btn-disabled-border-color: var(--es-success);
}
.btn-danger {
    --bs-btn-bg: var(--es-danger); --bs-btn-border-color: var(--es-danger);
    --bs-btn-hover-bg: #961d13; --bs-btn-hover-border-color: #961d13;
    --bs-btn-active-bg: #7d180f; --bs-btn-active-border-color: #7d180f;
}
.btn-warning {
    --bs-btn-color: #3a2700; --bs-btn-bg: #ffd37a; --bs-btn-border-color: #ffd37a;
    --bs-btn-hover-color: #3a2700; --bs-btn-hover-bg: #ffc94f; --bs-btn-hover-border-color: #ffc94f;
}
.btn-outline-primary {
    --bs-btn-color: var(--es-accent); --bs-btn-border-color: #c9d6f7; --bs-btn-bg: var(--es-surface);
    --bs-btn-hover-color: var(--es-accent); --bs-btn-hover-bg: var(--es-accent-soft); --bs-btn-hover-border-color: #9db3ee;
    --bs-btn-active-color: var(--es-accent); --bs-btn-active-bg: var(--es-accent-soft); --bs-btn-active-border-color: #9db3ee;
}
.btn-outline-secondary, .btn-light {
    --bs-btn-color: var(--es-ink); --bs-btn-bg: var(--es-surface); --bs-btn-border-color: var(--es-line-2);
    --bs-btn-hover-color: var(--es-ink); --bs-btn-hover-bg: #f6f8fa; --bs-btn-hover-border-color: #aeb7c4;
    --bs-btn-active-color: var(--es-ink); --bs-btn-active-bg: #eef1f5; --bs-btn-active-border-color: #aeb7c4;
}
.btn-outline-success {
    --bs-btn-color: var(--es-success); --bs-btn-border-color: #9bd3b1; --bs-btn-bg: var(--es-surface);
    --bs-btn-hover-color: var(--es-success); --bs-btn-hover-bg: var(--es-success-soft); --bs-btn-hover-border-color: #6fbf8f;
}
.btn-outline-danger {
    --bs-btn-color: var(--es-danger); --bs-btn-border-color: #f3c7c7; --bs-btn-bg: var(--es-surface);
    --bs-btn-hover-color: var(--es-danger); --bs-btn-hover-bg: var(--es-danger-soft); --bs-btn-hover-border-color: #e2a9a9;
}
.btn-link { --bs-btn-color: var(--es-accent); --bs-btn-hover-color: var(--es-accent-hover); font-weight: 600; text-decoration: none; }

/* ---------- Form ---------- */

.form-control, .form-select, .input-group-text {
    border-radius: var(--es-radius) !important;
    border-color: var(--es-line-2);
    min-height: 44px;
    font-size: .95rem;
    color: var(--es-ink);
}
.form-control-sm, .form-select-sm { min-height: 38px; font-size: .9rem; }
textarea.form-control { min-height: 0; }
.form-control:focus, .form-select:focus { border-color: var(--es-accent); box-shadow: var(--es-focus); }
.form-label { font-weight: 600; font-size: .9rem; color: var(--es-ink-2); margin-bottom: .35rem; }
.form-text { color: var(--es-muted); }
.form-check-input { width: 1.15em; height: 1.15em; border-color: var(--es-line-2); }
.form-check-input:checked { background-color: var(--es-accent); border-color: var(--es-accent); }
.form-check-input:focus { box-shadow: var(--es-focus); border-color: var(--es-accent); }

/* ---------- Kart, pencere, menü ---------- */

.card, .card-custom, .card-hero {
    border-radius: var(--es-radius-lg) !important;
    border: 1px solid var(--es-line) !important;
    box-shadow: var(--es-shadow) !important;
    background: var(--es-surface);
}
.card-custom:hover { box-shadow: var(--es-shadow) !important; border-color: var(--es-line) !important; }
.card-header { background: var(--es-surface) !important; border-bottom-color: var(--es-line) !important; padding: .9rem 1.1rem !important; }
.card-header:first-child { border-radius: var(--es-radius-lg) var(--es-radius-lg) 0 0 !important; }
.card-header h6, .card-header .h6 { font-size: 1rem; font-weight: 700; }
.card-body { padding: 1.1rem 1.2rem; }

.modal-content { border-radius: var(--es-radius-xl) !important; border: 0; box-shadow: var(--es-shadow-pop); }
.modal-header { border-bottom-color: var(--es-line); padding: 1.1rem 1.3rem; }
.modal-title { font-weight: 800; font-size: 1.2rem; }
.modal-body { padding: 1.2rem 1.3rem; }
.modal-footer { border-top-color: var(--es-line); }
.modal-backdrop.show { opacity: .55; }

.dropdown-menu { border-radius: 12px !important; border-color: var(--es-line); box-shadow: var(--es-shadow-pop); padding: .35rem; }
.dropdown-item { border-radius: var(--es-radius-sm); padding: .5rem .75rem; }
.dropdown-item:active { background-color: var(--es-accent-soft); color: var(--es-ink); }

/* ---------- Tablo, rozet, uyarı, sekme ---------- */

.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f6f8fa; --bs-table-active-bg: var(--es-accent-soft); --bs-table-border-color: #eef1f5; color: var(--es-ink); }
.table > thead th, .table-light th { background: transparent !important; color: var(--es-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--es-line) !important; }
.table td { vertical-align: middle; }

.badge, .rounded-pill { border-radius: 999px !important; }
.badge { font-weight: 600; padding: .38em .7em; letter-spacing: 0; }
.badge.bg-primary { background-color: var(--es-accent-soft) !important; color: var(--es-accent) !important; }
.badge.bg-success { background-color: var(--es-success-soft) !important; color: var(--es-success) !important; }
.badge.bg-danger { background-color: var(--es-danger-soft) !important; color: var(--es-danger) !important; }
.badge.bg-warning { background-color: #fff1db !important; color: var(--es-due) !important; }
.badge.bg-secondary { background-color: #eef1f5 !important; color: var(--es-ink-2) !important; }
.badge.bg-info { background-color: var(--es-accent-soft) !important; color: var(--es-accent) !important; }
.rounded-3, .rounded-4 { border-radius: var(--es-radius-lg) !important; }

.alert { border-radius: 12px !important; border-width: 1px; font-size: .92rem; }
.alert-success { --bs-alert-bg: var(--es-success-soft); --bs-alert-border-color: #9bd3b1; --bs-alert-color: #0f5a30; }
.alert-danger { --bs-alert-bg: var(--es-danger-soft); --bs-alert-border-color: #f3c7c7; --bs-alert-color: #8e1b1b; }
.alert-warning { --bs-alert-bg: #fff8e8; --bs-alert-border-color: #f5d29a; --bs-alert-color: var(--es-due); }
.alert-info, .alert-primary { --bs-alert-bg: var(--es-accent-soft); --bs-alert-border-color: #c9d6f7; --bs-alert-color: #23409a; }

.nav-pills { --bs-nav-pills-border-radius: var(--es-radius-sm); --bs-nav-pills-link-active-bg: var(--es-surface); --bs-nav-pills-link-active-color: var(--es-ink); }
.nav-pills .nav-link { color: var(--es-ink-2); font-weight: 600; }
.nav-pills .nav-link.active { box-shadow: 0 1px 3px rgba(14, 23, 38, .12); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--es-ink); --bs-nav-tabs-border-color: var(--es-line); }
.nav-tabs .nav-link { color: var(--es-muted); font-weight: 600; }

.list-group { --bs-list-group-border-color: var(--es-line); --bs-list-group-active-bg: var(--es-accent-soft); --bs-list-group-active-color: var(--es-ink); --bs-list-group-active-border-color: #c9d6f7; }
.progress { border-radius: 999px; background: var(--es-line); }
.progress-bar { background-color: var(--es-success); }
.spinner-border.text-primary { color: var(--es-accent) !important; }

/* Eski sayfaların menü / ikon renkleri (mor, camgöbeği) sakin tona iner */
.bg-purple { background-color: var(--es-accent) !important; }
.text-info { color: var(--es-accent) !important; }

/* ---------- Nitelikli imza ve mühür öne çıkar ---------- */
/* İlk çıkış e-imza ve e-mühürle: bu adımların rozet ve düğmeleri ayırt edilir */
.es-chip-qes { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--es-accent-soft); color: var(--es-accent); }
.es-chip-seal { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--es-seal-soft); color: var(--es-seal); }
.es-chip-simple { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #eef1f5; color: var(--es-ink-2); }

/* ---------- Belge doğrula (13.10 UX-4): tek bırakma alanı; tanıtım ve panel çerçevesinde aynı ---------- */
.vf-page { max-width: 760px; margin: 0 auto; padding: 40px 20px 64px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; }
.vf-head { text-align: center; }
.vf-head h1 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -0.02em; color: var(--es-ink); }
.vf-head p { margin: 8px auto 0; font-size: 17px; color: var(--es-ink-2); max-width: 620px; }
.vf-form { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.vf-drop { position: relative; border: 2px dashed #9db2ee; border-radius: 20px; background: #fff; padding: 44px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-align: center; margin: 0; }
.vf-drop:hover, .vf-drop:focus-within { border-color: var(--es-accent); background: var(--es-accent-soft); }
.vf-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.vf-drop strong { font-size: 18px; color: var(--es-accent); }
.vf-drop span { font-size: 14px; color: var(--es-muted); }
.vf-btn { align-self: center; min-height: 48px; padding: 0 32px; border: 0; border-radius: var(--es-radius); background: var(--es-accent); color: #fff; font-weight: 700; font-size: 16px; }
.vf-btn:hover { background: var(--es-accent-hover); }
.vf-btn-outline { background: #fff; color: var(--es-ink); border: 1px solid var(--es-line-2); font-size: 15px; min-height: 44px; }
.vf-btn-outline:hover { background: var(--es-ground); color: var(--es-ink); }
.vf-note { text-align: center; font-size: 13px; color: var(--es-muted); margin: 0; }
.vf-result { display: flex; flex-direction: column; gap: 12px; }
.vf-again { align-self: center; font-weight: 600; }
.vf-more { font-size: 14px; color: var(--es-muted); border-top: 1px solid var(--es-line); padding-top: 16px; }
.vf-more summary { cursor: pointer; font-weight: 600; color: var(--es-ink-2); }
.vf-more form { margin-top: 12px; display: flex; flex-direction: column; }
.vf-more .vf-btn { align-self: flex-start; }
.vf-more .vf-note { text-align: left; margin-top: 10px; }
@media (max-width: 575.98px) { .vf-head h1 { font-size: 28px; } .vf-page { padding: 24px 16px 48px; } }

/* Dil seçimi (LanguageSwitch): panel ve tanıtım üst çubuğunda aynı anahtar — TR | EN ikisi de görünür, etkin olan sayfa zemini renginde */
.es-lang { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 3px; border: 1px solid var(--es-line); border-radius: 999px;
    background: var(--es-surface); white-space: nowrap; flex-shrink: 0; }
.es-lang-opt { display: inline-flex; align-items: center; justify-content: center; height: 100%; min-width: 34px; padding: 0 10px; border-radius: 999px;
    color: #9aa2ad; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1; text-decoration: none;
    transition: background-color .15s, color .15s; }
a.es-lang-opt:hover, a.es-lang-opt:focus-visible { color: var(--es-ink); }
.es-lang-opt.is-active { background: var(--es-ground); color: var(--es-ink); box-shadow: inset 0 0 0 1px var(--es-line); cursor: default; }
@media (max-width: 575.98px) { .es-lang { height: 32px; } .es-lang-opt { min-width: 30px; padding: 0 8px; } }