/*
 * Kurumsal tema (745#86; EDenizcilik.Ui paketinden, _content/EDenizcilik.Ui/css/kurumsal.css) — giriş sistemi (e-denizcilikv2/ui
 * #47–53) ve SSO yönetim paneli v2 (e-denizciliksso/ui #82–88) ile aynı görünüm; tüm Razor arayüzleri bu tek dosyayı kullanır.
 * Projeye özgü küçük eklemeler projenin kendi CSS dosyasında kalır (bu dosyadan SONRA yüklenir).
 * Bölümler:
 *  1) Ortak: renk / yazı değişkenleri, üst bant (.hb-topbar, eski bantla birebir; _EdUstBant), düğmeler, alt bilgi (_EdAltBilgi),
 *     giriş sayfası (_EdGiris), kullanıcı menüsü, tek kartlı sayfalar (.hb-card; _EdKart).
 *  2) Kabuk (body.kr.kr-panel): yapışkan uygulama çubuğu (_EdUygulamaCubugu), kenar menü (_EdKenarMenu; telefonda çekmece),
 *     sayfa başlığı şeridi (#sayfa-basligi).
 *  3) İçerik bileşenleri: Metronic / Bootstrap kart / düğme / sekme ve DevExtreme tablo / form / pencere görünümü; gece modu.
 *
 * İlkeler:
 * - Okunurluk: gövde 16 px, en küçük yazı 13 px; tüm metinlerde en az 4,5:1 kontrast; metin her zaman düz yüzeyde.
 * - Sakin hareket: sürekli animasyon yok. Yalnız giriş panelindeki deniz haritası açılışta bir kez (≤1 sn) çizilir ve geri bildirim
 *   geçişleri (≤200 ms) vardır; "azaltılmış hareket" tercihinde hiçbiri çalışmaz.
 * - Gece modu (html.kr-night) ve büyük yazı (html.kr-large) tercihleri js/gorunum.js ile sayfa çizilmeden uygulanır. Kabukta gece
 *   modu Metronic / Bootstrap'e (data-bs-theme="dark") ve DevExtreme'e (generic.dark, projenin dx.dark.css dosyası) de geçer.
 * - Uluslararası deniz sancakları ve benzetmeli dil (biniş kartı, rıhtım, fırtına …) kullanılmaz.
 * Yazı tipi sistemdekidir (Inter / Segoe UI); başlıklarda kurumsal görünüm için Georgia. Dış yazı tipi yüklenmez.
 */

/* ================================================================ 1) ORTAK (giriş sistemiyle aynı) */

/* ---------------------------------------------------------------- Renk ve yazı değişkenleri */
.kr {
    --kr-bg: #f2f5f8; --kr-surface: #ffffff; --kr-soft: #f7f9fb; --kr-ink: #14223a; --kr-muted: #4d5c70;
    --kr-line: #d8dfe7; --kr-line-2: #b9c4d1; --kr-heading: #0a2342; --kr-primary: #0a2342; --kr-primary-2: #143a68;
    --kr-on-primary: #ffffff; --kr-link: #143a68; --kr-gold: #c99a3a; --kr-star: #b07d16; --kr-star-off: #7d8ea5;
    --kr-ok: #1d7a4c; --kr-ok-bg: #e3f4ea; --kr-ok-dot: #1f9d55; --kr-warn: #7a4f00; --kr-warn-bg: #fdf1d4; --kr-warn-dot: #d08a00;
    --kr-unknown-dot: #9aa7b8; --kr-info: #e8f1fb; --kr-info-line: #9fc0e6; --kr-red: #c8102e; --kr-red-2: #a90d26;
    --kr-danger: #a8201a; --kr-danger-bg: #fbe7e5; --kr-grid: rgba(20, 58, 104, 0.05); --kr-shadow: rgba(10, 35, 66, 0.10);
    --kr-scrim: rgba(6, 21, 43, 0.55); --kr-tile-bg-l: 91%; --kr-tile-fg-l: 24%; --kr-tile-bd-l: 76%;
    --kr-font: Inter, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --kr-display: Georgia, "Times New Roman", serif;
    --kr-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    /* Gövde (Metronic) flex sütunudur: içerik ekrandan uzunsa kap büzülmesin, zemin sayfanın sonuna kadar uzansın */
    min-height: 100vh; flex: 1 0 auto; display: flex; flex-direction: column;
    background: var(--kr-bg); color: var(--kr-ink); font-family: var(--kr-font); font-size: 16px; line-height: 1.5;
}
html.kr-night .kr {
    --kr-bg: #0b1626; --kr-surface: #13223a; --kr-soft: #172a45; --kr-ink: #e8eef6; --kr-muted: #a9b8cb;
    --kr-line: #26395a; --kr-line-2: #3a5277; --kr-heading: #f3f6fa; --kr-primary: #e0b44c; --kr-primary-2: #f0c75d;
    --kr-on-primary: #0a2342; --kr-link: #9fc3ea; --kr-star: #f0c75d; --kr-star-off: #8a9bb3;
    --kr-ok: #7fd3a5; --kr-ok-bg: #12301f; --kr-ok-dot: #3fcf7f; --kr-warn: #f6d48a; --kr-warn-bg: #3a2c0c; --kr-warn-dot: #f0b429;
    --kr-unknown-dot: #6d7d93; --kr-info: #132c4a; --kr-info-line: #2d5486; --kr-danger: #ff9a90; --kr-danger-bg: #3a1714;
    --kr-grid: rgba(159, 195, 234, 0.06); --kr-shadow: rgba(0, 0, 0, 0.35); --kr-scrim: rgba(0, 0, 0, 0.6);
    --kr-tile-bg-l: 25%; --kr-tile-fg-l: 87%; --kr-tile-bd-l: 40%;
}
html.kr-night body { background: #0b1626; }
.kr *, .kr *::before, .kr *::after { box-sizing: border-box; }
.kr [hidden] { display: none !important; }
.kr a { color: var(--kr-link); }
/* 745#92: düğmeler çevre yazısını devralır ama sınıflı düğmenin (kr-btn, Metronic .btn …) kendi yazı ayarını ezmez — :where özgüllüğü 0'a
   indirir (eski ".kr button" 0,1,1 idi ve <button class="kr-btn"> 14,5 px / kalın yerine sayfa yazısını alıyordu). */
:where(.kr) button { font: inherit; }
.kr h1, .kr h2, .kr h3 { margin: 0; color: var(--kr-heading); text-wrap: balance; }
.kr :focus-visible { outline: 3px solid var(--kr-gold); outline-offset: 2px; }
.kr kbd { font-family: var(--kr-mono); font-size: 13px; border: 1px solid var(--kr-line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; background: var(--kr-surface); color: var(--kr-muted); }
.kr-body { flex: 1 0 auto; display: flex; flex-direction: column; }
html.kr-large .kr-body { zoom: 1.12; }
.kr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Harita ızgarası zemin (giriş kartı alanı, uygulama seçimi başlığı, tek kartlı sayfalar) */
.kr-grid-bg { background-image: linear-gradient(var(--kr-grid) 1px, transparent 1px), linear-gradient(90deg, var(--kr-grid) 1px, transparent 1px); background-size: 28px 28px; }

/* ---------------------------------------------------------------- Üst bant (eski "Liman" tasarımıyla birebir: .hb-topbar) */
.kr-topbar-wrap { background: linear-gradient(180deg, #06152b 0%, #0d2b52 100%); color: #fff; }
/* 745#111 (02.11.2026): bant ekranı daraltmasın diye alçaltıldı (113 → ~69 px); üç logo aynı yükseklikte (52 px; dar ekranda
   42 / 34 px); TKYGM ile DGM arasında dikey altın ayraç (.hb-ayrac). SystemPageLayout.cs'teki kopya aynı değerleri taşır. */
.kr .hb-topbar { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; max-width: 1280px; margin: 0 auto; padding: 8px 28px; border-bottom: 1px solid rgba(224, 180, 76, 0.45); }
.kr .hb-logo { flex: 1 1 0; display: flex; justify-content: flex-start; }
.kr .hb-logo img { height: 52px; width: auto; display: block; }
.kr .hb-logos-right { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.kr .hb-topbar-title { flex: 0 1 auto; text-align: center; line-height: 1.3; }
.kr .hb-topbar-title span { display: block; color: #e0b44c; font-size: 13.65px; letter-spacing: 0.16em; margin-bottom: 2px; text-transform: uppercase; font-weight: 600; }
.kr .hb-topbar-title strong { display: block; color: #fff; font-size: clamp(16px, 1.8vw, 21px); font-weight: 700; letter-spacing: 0.03em; }
.kr .hb-dgm { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(224, 180, 76, 0.7), 0 3px 10px rgba(0, 0, 0, 0.3); }
.kr .hb-dgm img { width: 46px; height: 46px; object-fit: contain; }
.kr .hb-tkygm { display: block; flex: 0 0 auto; }
.kr .hb-tkygm img { height: 52px; width: auto; display: block; }
.kr .hb-ayrac { flex: 0 0 auto; width: 3px; height: 46px; border-radius: 2px; background: linear-gradient(180deg, rgba(224, 180, 76, 0) 0%, #e0b44c 18%, #f3d58a 50%, #e0b44c 82%, rgba(224, 180, 76, 0) 100%); box-shadow: 0 0 6px rgba(224, 180, 76, 0.35); }
@media (max-width: 768px) {
    .kr .hb-topbar { padding-left: 16px; padding-right: 16px; }
    .kr .hb-logo img, .kr .hb-tkygm img { height: 42px; }
    .kr .hb-dgm { width: 42px; height: 42px; }
    .kr .hb-dgm img { width: 37px; height: 37px; }
    .kr .hb-ayrac { height: 36px; }
    .kr .hb-topbar-title span { font-size: 10.4px; }
    .kr .hb-topbar-title strong { font-size: 16px; }
}
@media (max-width: 480px) {
    .kr .hb-topbar-title { display: none; }
    .kr .hb-topbar { justify-content: space-between; gap: 10px; }
    .kr .hb-logos-right { gap: 10px; }
    .kr .hb-logo img, .kr .hb-tkygm img { height: 34px; }
    .kr .hb-dgm { width: 34px; height: 34px; }
    .kr .hb-dgm img { width: 30px; height: 30px; }
    .kr .hb-ayrac { height: 28px; }
}

/* ---------------------------------------------------------------- Ortak düğmeler */
.kr-btn { background: var(--kr-surface); border: 1px solid var(--kr-line); color: var(--kr-heading); border-radius: 8px; padding: 8px 14px; font-size: 14.5px; font-weight: 600; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.kr-btn:hover { border-color: var(--kr-line-2); background: var(--kr-soft); color: var(--kr-heading); }
.kr-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.kr-btn[aria-pressed="true"] { background: var(--kr-primary); color: var(--kr-on-primary); border-color: var(--kr-primary); }
.kr-btn-primary { background: var(--kr-primary); color: var(--kr-on-primary); border-color: var(--kr-primary); }
.kr-btn-primary:hover { background: var(--kr-primary-2); color: var(--kr-on-primary); }
.kr-icon-btn { width: 44px; padding: 0; justify-content: center; }
/* Bağlantı olarak çizilen düğmede genel bağlantı rengi (.kr a) düğme rengini ezmesin */
.kr a.kr-btn { color: var(--kr-heading); }
.kr a.kr-btn-primary { color: var(--kr-on-primary); }

/* ---------------------------------------------------------------- Alt bilgi */
.kr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 12px 28px; border-top: 1px solid var(--kr-line); background: var(--kr-surface); font-size: 13.5px; color: var(--kr-muted); margin-top: auto; }
.kr-foot a { color: var(--kr-link); }
.kr-foot-end { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kr-view { display: inline-flex; gap: 6px; }
.kr-view .kr-btn { min-height: 36px; padding: 4px 10px; font-size: 13.5px; }

/* ---------------------------------------------------------------- Giriş sayfası */
.kr-login { display: grid; grid-template-columns: 5fr 6fr; flex: 1 0 auto; min-height: 600px; }
.kr-intro { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 85% 10%, #123a68 0%, #0a2342 55%, #071a33 100%); }
.kr-chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kr-rose { position: absolute; right: -34px; bottom: -34px; width: 230px; height: 230px; color: #e0b44c; opacity: 0.55; pointer-events: none; }
.kr-intro-in { position: relative; padding: 48px 44px 40px; display: flex; flex-direction: column; gap: 18px; height: 100%; max-width: 620px; margin-left: auto; }
.kr-eyebrow { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #e0b44c; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.kr-eyebrow::before { content: ""; width: 24px; height: 1px; background: #e0b44c; }
.kr-intro h2 { font-family: var(--kr-display); font-size: 34px; line-height: 1.15; color: #fff; }
.kr-intro p { color: #d5deea; margin: 0; max-width: 40ch; }
.kr-intro ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 12px; }
.kr-intro li { display: flex; gap: 12px; align-items: flex-start; color: #e7edf5; font-size: 15.5px; }
.kr-intro li svg { width: 20px; height: 20px; color: #e0b44c; flex-shrink: 0; margin-top: 2px; }
.kr-notices { margin-top: auto; max-width: 46ch; background: rgba(6, 21, 43, 0.78); border: 1px solid rgba(224, 180, 76, 0.35); border-radius: 10px; padding: 14px 16px; font-size: 14.5px; color: #d5deea; }
.kr-notices h3 { font-size: 13px; font-family: var(--kr-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #f0d79c; font-weight: 600; margin-bottom: 6px; }
.kr-notices ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kr-notices time { display: block; font-family: var(--kr-mono); font-size: 13px; color: #f0d79c; }
.kr-notices a { color: #fff; font-weight: 600; text-decoration: none; }
.kr-notices a:hover { text-decoration: underline; }
.kr-notices .kr-empty { color: #d5deea; }
.kr-coords { font-family: var(--kr-mono); font-size: 13px; color: rgba(213, 222, 234, 0.8); letter-spacing: 0.06em; }

.kr-card-area { display: grid; place-items: center; padding: 40px 32px; }
.kr-card { width: 100%; max-width: 460px; background: var(--kr-surface); border: 1px solid var(--kr-line); border-radius: 14px; padding: 30px 32px; box-shadow: 0 18px 40px var(--kr-shadow); }
.kr-greet { font-size: 14.5px; color: var(--kr-muted); font-weight: 600; margin: 0 0 2px; }
.kr-card h1 { font-family: var(--kr-display); font-size: 28px; margin-bottom: 4px; }
.kr-card .kr-sub { color: var(--kr-muted); margin: 0 0 18px; font-size: 15.5px; }

/* Doğrulama yolu: e-Devlet → yetki kontrolü → hedef (sistem durumu görünür; hedef adres ve kurum alan adı açık yazılır) */
.kr-steps { list-style: none; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--kr-line); border-radius: 10px; background: var(--kr-soft); display: grid; gap: 2px; }
.kr-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; position: relative; padding: 6px 0; font-size: 15px; color: var(--kr-muted); }
.kr-steps li + li::before { content: ""; position: absolute; left: 12px; top: -10px; height: 18px; border-left: 2px dotted var(--kr-line-2); }
.kr-step-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--kr-line-2); display: grid; place-items: center; font-family: var(--kr-mono); font-size: 13px; font-weight: 600; color: var(--kr-muted); background: var(--kr-surface); transition: background .2s, border-color .2s, color .2s; }
.kr-steps b { color: var(--kr-ink); }
.kr-steps small { display: block; font-size: 13.5px; color: var(--kr-muted); overflow-wrap: anywhere; }
.kr-url { font-family: var(--kr-mono); font-size: 13px; }
.kr-steps .is-active .kr-step-dot { border-color: var(--kr-primary); color: var(--kr-primary); box-shadow: 0 0 0 4px var(--kr-info); }
.kr-steps .is-done .kr-step-dot { background: var(--kr-primary); border-color: var(--kr-primary); color: var(--kr-on-primary); }
.kr-step-dot i { font-style: normal; display: none; }
.kr-steps .is-done .kr-step-dot i { display: inline; }
.kr-steps .is-done .kr-step-dot span { display: none; }
.kr-secure { display: inline-flex; align-items: center; gap: 4px; color: var(--kr-ok); font-weight: 600; font-size: 13px; }
.kr-secure svg { width: 14px; height: 14px; }

.kr-edevlet { width: 100%; min-height: 54px; border: 0; border-radius: 10px; background: var(--kr-red); color: #fff; font-weight: 700; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 18px rgba(200, 16, 46, 0.25); text-decoration: none; transition: background .15s; }
.kr-edevlet:hover, .kr-edevlet:focus { background: var(--kr-red-2); color: #fff; }
.kr-edevlet[aria-busy="true"] { cursor: progress; background: var(--kr-red-2); }
.kr-ed-logo { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--kr-red); display: grid; place-items: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.kr-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: kr-spin .8s linear infinite; }
@keyframes kr-spin { to { transform: rotate(360deg); } }
.kr-help-text { font-size: 14px; color: var(--kr-muted); margin: 12px 0 0; }
.kr-trouble { margin-top: 16px; border-top: 1px solid var(--kr-line); padding-top: 12px; font-size: 15px; }
.kr-trouble summary { cursor: pointer; font-weight: 700; color: var(--kr-heading); list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.kr-trouble summary::-webkit-details-marker { display: none; }
.kr-trouble summary::after { content: "+"; font-family: var(--kr-mono); color: var(--kr-muted); }
.kr-trouble[open] summary::after { content: "−"; }
.kr-trouble ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--kr-muted); }
/* Panelin giriş düğmesi (e-Denizcilik giriş sistemine yönlendirir): giriş kartında tam genişlik, lacivert */
.kr-login-btn { width: 100%; min-height: 54px; justify-content: center; font-size: 17px; border-radius: 10px; }
.kr-login-btn svg { width: 20px; height: 20px; }
.kr-error { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: var(--kr-danger-bg); color: var(--kr-danger); font-weight: 600; font-size: 15px; }

/* ---------------------------------------------------------------- Kullanıcı menüsü (uygulama seçimindeki menüyle aynı) */
.kr-user { position: relative; }
.kr-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--kr-primary); color: var(--kr-on-primary); display: grid; place-items: center; font-size: 13px; font-weight: 700; } /* ui#84: en küçük yazı 13 px (giriş sistemiyle aynı ölçüt) */

.kr-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--kr-surface); border: 1px solid var(--kr-line); border-radius: 10px; box-shadow: 0 14px 34px var(--kr-shadow); padding: 6px; z-index: 30; }
.kr-menu button, .kr-menu a, .kr-menu .kr-menu-head { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; text-align: left; background: transparent; border: 0; padding: 10px 12px; border-radius: 6px; color: var(--kr-ink); cursor: pointer; font-size: 15px; text-decoration: none; }
.kr-menu button:hover, .kr-menu a:hover { background: var(--kr-soft); color: var(--kr-ink); }
.kr-menu .kr-menu-head { cursor: default; color: var(--kr-muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding-bottom: 4px; }
.kr-menu .kr-hint { color: var(--kr-muted); font-size: 13px; }
.kr-menu hr { border: 0; border-top: 1px solid var(--kr-line); margin: 4px 6px; }
.kr-menu [aria-checked="true"]::after { content: "✓"; color: var(--kr-ok); font-weight: 700; }

/* ---------------------------------------------------------------- Tek kartlı sayfalar (_Layout "card") — eski .hb-card sınıfları */
.kr-cardpage { flex: 1 0 auto; display: flex; justify-content: center; align-items: flex-start; padding: 56px 16px 64px; }
.kr .hb-card { width: 100%; max-width: 560px; background: var(--kr-surface); color: var(--kr-ink); border: 1px solid var(--kr-line); border-radius: 14px; padding: 32px; box-shadow: 0 18px 40px var(--kr-shadow); text-align: center; position: relative; }
.kr .hb-card-wide { max-width: 880px; text-align: left; }
.kr .hb-card-icon { width: 64px; height: 64px; border-radius: 16px; display: inline-grid; place-items: center; background: var(--kr-info); color: var(--kr-heading); margin-bottom: 14px; }
.kr .hb-card-icon svg { width: 34px; height: 34px; }
.kr .hb-card-icon.is-danger { background: var(--kr-danger-bg); color: var(--kr-danger); }
.kr .hb-card-kicker { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kr-muted); font-weight: 700; }
.kr .hb-card-title { font-family: var(--kr-display); font-size: 28px; color: var(--kr-heading); margin: 0 0 8px; }
.kr .hb-card-text { color: var(--kr-muted); margin: 0 0 6px; }
.kr .hb-card-date { display: block; font-family: var(--kr-mono); font-size: 13px; color: var(--kr-muted); margin-bottom: 16px; }
.kr .hb-card-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.kr .hb-card-back { position: absolute; top: 18px; right: 18px; }
/* 745#69: hata kartında destek kodu kutusu (HK-xxxxxxxx + Kopyala + zaman) */
.kr .hb-card-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 4px; padding: 10px 12px; border: 1px dashed var(--kr-line); border-radius: 10px; background: var(--kr-soft); color: var(--kr-ink); }
.kr .hb-card-code code { font-family: var(--kr-mono); font-size: 15px; user-select: all; }
.kr .hb-card-code-time { font-family: var(--kr-mono); font-size: 13px; color: var(--kr-muted); }
.kr .hb-card-wide .hb-card-icon { display: none; }
.kr .hb-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 9px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; border: 1px solid var(--kr-line); background: var(--kr-surface); color: var(--kr-heading); }
.kr .hb-btn svg { width: 18px; height: 18px; }
.kr .hb-btn-navy { background: var(--kr-primary); border-color: var(--kr-primary); color: var(--kr-on-primary); }
.kr .hb-btn-navy:hover { background: var(--kr-primary-2); color: var(--kr-on-primary); }
.kr .hb-btn-outline:hover { background: var(--kr-soft); color: var(--kr-heading); }
.kr .hb-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13.5px; }

/* ================================================================ 2) PANEL KABUĞU (ui#84, _Layout: body.kr.kr-panel) */
/*
 * Yerleşim (yukarıdan aşağı): üst bant (_PortalTopbar, sayfayla birlikte kayar) → yapışkan uygulama çubuğu (.kr-appbar) →
 * .kr-shell [kenar menü (.kr-nav, yapışkan) | .kr-main (sayfa başlığı şeridi + içerik)] → alt bilgi (_PortalFooter).
 * Metronic'in "app" yerleşimi (kt_app_* ve data-kt-app-*) kullanılmaz; Metronic yalnız içerik bileşenleri (kart, düğme, ızgara
 * sınıfları, ikon yazı tipi) için yüklenir.
 */
.kr-panel { --kr-appbar-h: 64px; --kr-nav-w: 264px; --kr-zoom: 1; }
/* Metronic html/body'yi %100 yüksekliğe ve 13 px yazıya sabitler: yapışkan öğeler sayfa boyunca çalışsın diye yükseklik serbest,
   yazı 15 px kök / 16 px gövde (rem tabanlı Metronic aralıkları buna göre büyür; DevExtreme px ile kendi boyutundadır). */
html:has(body.kr-panel), html:has(body.kr-sayfa) { height: auto; font-size: 15px !important; }
body.kr-panel, body.kr-sayfa { height: auto; font-size: 16px !important; font-family: var(--kr-font); margin: 0; }
body.kr-panel { min-height: 100vh; }
/* Büyük yazı: panelde açılır pencereler (DevExtreme katmanları gövdeye eklenir) dahil tüm sayfa büyür */
html.kr-large body.kr-panel { zoom: 1.12; }
html.kr-large .kr-panel { --kr-zoom: 1.12; }
html.kr-large .kr-panel .kr-body { zoom: 1; }
/* En küçük yazı 13 px: Metronic'in küçük yazı sınıfları alt sınıra çekilir */
.kr .fs-8, .kr .fs-9, .kr .fs-10 { font-size: 13px !important; }
.kr .text-muted { color: var(--kr-muted) !important; }

/* Klavye kullanıcısı için "İçeriğe geç" bağlantısı (yalnız odaklanınca görünür) */
.kr-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--kr-surface); color: var(--kr-heading); border: 2px solid var(--kr-gold); border-radius: 8px; padding: 8px 14px; font-weight: 700; text-decoration: none; }
.kr-skip:focus { top: 12px; }

/* ---------------------------------------------------------------- Uygulama çubuğu */
.kr-appbar { position: sticky; top: 0; z-index: 40; background: var(--kr-surface); border-bottom: 1px solid var(--kr-line); box-shadow: 0 2px 10px var(--kr-shadow); }
.kr-appbar-in { display: flex; align-items: center; gap: 12px; min-height: var(--kr-appbar-h); padding: 8px 24px; }
.kr-appname { display: flex; flex-direction: column; line-height: 1.2; text-decoration: none; min-width: 0; }
.kr .kr-appname small { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kr-muted); font-weight: 700; }
.kr .kr-appname strong { font-family: var(--kr-display); font-size: 20px; color: var(--kr-heading); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kr-appbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kr-nav-toggle { display: none; }
.kr-user-btn { padding-left: 8px; }
.kr-user-btn .kr-chev { width: 16px; height: 16px; color: var(--kr-muted); }
.kr-user-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.kr-menu form { margin: 0; }
.kr-menu .kr-menu-exit { color: var(--kr-danger); font-weight: 600; }

/* ---------------------------------------------------------------- Kabuk ve kenar menü */
.kr-shell { flex: 1 0 auto; display: grid; grid-template-columns: var(--kr-nav-w) minmax(0, 1fr); align-items: start; }
.kr-nav { position: sticky; top: var(--kr-appbar-h); height: calc(100vh / var(--kr-zoom) - var(--kr-appbar-h)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--kr-surface); border-right: 1px solid var(--kr-line); padding: 8px 12px 28px; }
.kr-nav-head { font-family: var(--kr-font); font-size: 13px !important; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--kr-muted) !important; margin: 18px 10px 6px !important; }
.kr-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* 745#89: bölüm başlığı düğmesi — başlıkla aynı görünüm, tıklayınca bölüm katlanır; ok işareti kapalıyken sağa döner */
.kr-nav-head-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; border-radius: 6px; padding: 2px 0; }
.kr-nav-head-btn:hover { color: var(--kr-heading); }
.kr-nav-head-btn:focus-visible { outline: 2px solid var(--kr-primary); outline-offset: 2px; }
.kr-nav-caret { margin-left: auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.kr-nav-head-btn[aria-expanded="false"] .kr-nav-caret { transform: rotate(-45deg); }
.kr-nav ul[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .kr-nav-caret { transition: none; } }
.kr .kr-nav a, .kr-panel .kr-nav a:not(.btn):not(.kr-btn) { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: 8px; color: var(--kr-ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.kr-nav a:hover { background: var(--kr-soft); }
.kr .kr-nav a[aria-current="page"], .kr-panel .kr-nav a[aria-current="page"]:not(.btn) { background: var(--kr-info); color: var(--kr-heading); font-weight: 700; box-shadow: inset 3px 0 0 var(--kr-primary); }
.kr-nav .kr-nav-ico { width: 24px; flex: 0 0 24px; display: grid; place-items: center; }
.kr-nav .kr-nav-ico i, .kr-nav .kr-nav-ico i span::before { color: var(--kr-muted) !important; font-size: 20px; }
.kr-nav a[aria-current="page"] .kr-nav-ico i, .kr-nav a[aria-current="page"] .kr-nav-ico i span::before { color: var(--kr-heading) !important; }
.kr-nav .kr-ext { margin-left: auto; width: 16px; height: 16px; color: var(--kr-muted); flex-shrink: 0; }
.kr-nav-scrim { position: fixed; inset: 0; background: var(--kr-scrim); z-index: 55; }

/* ---------------------------------------------------------------- Sayfa başlığı şeridi ve içerik */
.kr-main { min-width: 0; display: flex; flex-direction: column; }
.kr-pagehead { background-color: var(--kr-surface); border-bottom: 1px solid var(--kr-line); padding: 18px 28px 16px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.kr-crumb { display: block; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kr-muted); font-weight: 700; margin-bottom: 2px; }
.kr .kr-page-title { font-family: var(--kr-display); font-size: 27px; line-height: 1.2; color: var(--kr-heading); font-weight: 700; margin: 0; }
.kr-page-sub { color: var(--kr-muted); margin: 4px 0 0; font-size: 15px; }
.kr-page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kr-content { padding: 22px 28px 32px; flex: 1 0 auto; }
/* Yetkisiz erişim kartı panel içinde (oturum açık) */
.kr-content > .kr-cardpage { padding: 24px 0 32px; }

/* ================================================================ 3) İÇERİK BİLEŞENLERİ (ui#87) */
/* ---------------------------------------------------------------- Metronic: kart, düğme, sekme, uyarı */
.kr-panel .card { --bs-card-bg: var(--kr-surface); --bs-card-color: var(--kr-ink); --bs-card-border-color: var(--kr-line);
    border: 1px solid var(--kr-line); border-radius: 12px; box-shadow: none; }
.kr-panel .card .card-header { border-bottom: 1px solid var(--kr-line); min-height: 58px; }
.kr-panel .card .card-title, .kr-panel .card-header h3 { font-family: var(--kr-display); color: var(--kr-heading); font-weight: 700; font-size: 18px; }
.kr-panel .btn { font-weight: 600; border-radius: 8px; }
.kr-panel .btn.btn-sm { font-size: 14px; min-height: 36px; }
.kr-panel .btn.btn-primary { background: var(--kr-primary); border-color: var(--kr-primary); color: var(--kr-on-primary); }
.kr-panel .btn.btn-primary:hover, .kr-panel .btn.btn-primary:focus { background: var(--kr-primary-2) !important; border-color: var(--kr-primary-2) !important; color: var(--kr-on-primary) !important; }
.kr-panel .btn.btn-light-primary { background: var(--kr-info); color: var(--kr-heading); }
.kr-panel .btn.btn-light-primary:hover { background: var(--kr-primary) !important; color: var(--kr-on-primary) !important; }
.kr-panel .btn.btn-light, .kr-panel .btn.btn-secondary { background: var(--kr-surface); border: 1px solid var(--kr-line); color: var(--kr-heading); }
.kr-panel .btn.btn-light:hover, .kr-panel .btn.btn-secondary:hover { background: var(--kr-soft) !important; border-color: var(--kr-line-2) !important; color: var(--kr-heading) !important; }
.kr-panel .btn i, .kr-panel .btn i span::before { color: inherit !important; }
.kr-panel .nav-line-tabs .nav-link.active { border-bottom-color: var(--kr-gold) !important; color: var(--kr-heading) !important; }
.kr-panel .alert { border-radius: 10px; font-size: 15px; }
.kr-panel .kr-content a:not(.btn):not(.kr-btn):not(.hb-btn) { color: var(--kr-link); }
.kr-panel .badge { font-size: 13px; }

/* ---------------------------------------------------------------- DevExtreme: tablo, form, pencere */
.kr-panel { --dx-font-size: 15px; --dx-color-primary: #143a68; --dx-color-link: #143a68; }
.kr-panel .dx-widget, .kr-panel .dx-widget input, .kr-panel .dx-widget textarea, .dx-overlay-wrapper .dx-widget { font-family: var(--kr-font); }
.kr-panel .dx-datagrid .dx-header-row { background-color: var(--kr-soft); color: var(--kr-heading); }
.kr-panel .dx-datagrid-headers { color: var(--kr-heading); font-weight: 600; border-bottom: 2px solid var(--kr-line-2); }
.kr-panel .dx-datagrid-rowsview .dx-row.dx-selection > td, .kr-panel .dx-datagrid-rowsview .dx-row.dx-selection > tr > td,
.kr-panel .dx-treelist-rowsview .dx-row.dx-selection > td { background-color: var(--kr-info) !important; color: var(--kr-ink) !important; }
.kr-panel .dx-datagrid-rowsview .dx-row.dx-data-row:hover:not(.dx-selection) > td { background-color: var(--kr-soft); }
/* Birincil (default) DevExtreme düğmesi kurumsal laciverte; gece modunda altın zemin + lacivert yazı (kontrast ≥ 4,5:1) */
.kr-panel .dx-button-mode-contained.dx-button-default, .dx-overlay-wrapper .dx-button-mode-contained.dx-button-default { background-color: var(--kr-primary, #0a2342); color: var(--kr-on-primary, #fff); }
.kr-panel .dx-button-mode-contained.dx-button-default .dx-icon, .dx-overlay-wrapper .dx-button-mode-contained.dx-button-default .dx-icon { color: var(--kr-on-primary, #fff); }
.kr-panel .dx-button-mode-contained.dx-button-default.dx-state-hover, .dx-overlay-wrapper .dx-button-mode-contained.dx-button-default.dx-state-hover { background-color: var(--kr-primary-2, #143a68); }
.kr-panel .dx-button { border-radius: 8px; }
.dx-popup-title .dx-toolbar-label { font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 700; }
.dx-popup-wrapper > .dx-overlay-content { border-radius: 12px; }
.kr-panel .dx-tabs .dx-tab.dx-tab-selected .dx-tab-text, .kr-panel .dx-tabs .dx-tab.dx-tab-selected .dx-icon { color: var(--kr-heading); font-weight: 700; }

/* ---------------------------------------------------------------- Ana sayfa göstergeleri (sade kart; madalyon / pano süsü yok) */
.kr-panel .panel-kpi .card-body { display: flex; align-items: center; gap: 16px; }
.kr-kpi-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; display: grid; place-items: center; background: var(--kr-info); color: var(--kr-heading); }
.kr-kpi-icon svg { width: 26px; height: 26px; }
.kr-kpi-label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kr-muted); font-weight: 700; margin-bottom: 2px; }
.kr-panel .panel-kpi .fs-2hx { color: var(--kr-heading); font-variant-numeric: tabular-nums; }
.kr-panel .panel-kpi .card.as-alarm .kr-kpi-icon { background: var(--kr-danger-bg); color: var(--kr-danger); }
.kr-panel .panel-kpi .card.as-alarm .fs-2hx { color: var(--kr-danger); }

/* ---------------------------------------------------------------- Gece modu: Metronic ve DevExtreme yüzeyleri kurumsal koyu renklere */
html.kr-night { color-scheme: dark; --bs-body-bg: #0b1626; --bs-body-bg-rgb: 11, 22, 38; --bs-body-color: #e8eef6; --bs-body-color-rgb: 232, 238, 246;
    --bs-border-color: #26395a; --bs-gray-600: #a9b8cb; --bs-text-muted: #a9b8cb; --bs-emphasis-color: #f3f6fa; --bs-heading-color: #f3f6fa; }
html.kr-night .kr-panel { --dx-component-color-bg: #13223a; --dx-color-main-bg: #13223a; --dx-color-border: #3a5277; --dx-color-separator: #26395a;
    --dx-color-text: #e8eef6; --dx-color-icon: #c9d5e3; --dx-texteditor-color-text: #e8eef6; --dx-texteditor-color-label: #a9b8cb;
    --dx-color-primary: #e0b44c; --dx-color-link: #9fc3ea; --dx-datagrid-row-alternation-bg: #172a45; }
html.kr-night .dx-overlay-wrapper { --dx-component-color-bg: #13223a; --dx-color-main-bg: #13223a; --dx-color-border: #3a5277; --dx-color-text: #e8eef6; }
html.kr-night .kr-panel .dx-datagrid, html.kr-night .kr-panel .dx-treelist, html.kr-night .kr-panel .dx-datagrid-headers,
html.kr-night .kr-panel .dx-datagrid-rowsview, html.kr-night .kr-panel .dx-datagrid .dx-row > td { background-color: var(--kr-surface); color: var(--kr-ink); }
html.kr-night .kr-panel .dx-datagrid .dx-header-row, html.kr-night .kr-panel .dx-datagrid-filter-row { background-color: var(--kr-soft); }
html.kr-night .kr-panel .dx-datagrid .dx-header-row > td { color: var(--kr-heading); }
html.kr-night .dx-popup-wrapper > .dx-overlay-content, html.kr-night .dx-popover-wrapper .dx-overlay-content { background-color: #13223a; color: #e8eef6; border-color: #3a5277; }
html.kr-night .dx-popup-title { background-color: #13223a; border-bottom-color: #26395a; }
html.kr-night .dx-popup-title .dx-toolbar-label { color: #f3f6fa; }
/* Gece modunda düzenleyiciler (metin kutusu, seçim, tarih) ve açılır listeler kurumsal koyu yüzeyde (DevExtreme koyu teması gri #2a2a2a çizer) */
html.kr-night .dx-texteditor.dx-editor-outlined, html.kr-night .dx-texteditor.dx-editor-filled { background-color: #0f1d33; border-color: #3a5277; }
html.kr-night .dx-texteditor.dx-state-readonly { background-color: #172a45; }
html.kr-night .dx-dropdowneditor-overlay .dx-overlay-content, html.kr-night .dx-dropdowneditor-overlay .dx-list { background-color: #13223a; color: #e8eef6; }
/* Düğme grubunda seçili öğe kurumsal birincil renkte (açık: lacivert, gece: altın + lacivert yazı) */
.kr-panel .dx-buttongroup .dx-buttongroup-item.dx-item-selected { background-color: var(--kr-primary); border-color: var(--kr-primary); color: var(--kr-on-primary); }
.kr-panel .dx-buttongroup .dx-buttongroup-item.dx-item-selected .dx-icon { color: var(--kr-on-primary); }
html.kr-night .kr-panel .alert { background-color: var(--kr-soft); color: var(--kr-ink); border-color: var(--kr-line); }
/* ---------------------------------------------------------------- Paket eklemeleri (745#86) */
/* Kenar menüsü olmayan sayfa (menüsüz kullanıcı ya da tek sayfalı uygulama): içerik tam genişlik */
.kr-shell:not(:has(> .kr-nav)) { grid-template-columns: minmax(0, 1fr); }
/* Kullanıcı menüsünde ikinci satır (etkin rol / kurum) */
.kr-menu .kr-menu-head.kr-menu-sub { text-transform: none; letter-spacing: 0; font-weight: 500; padding-top: 0; }
/* Kenar menüde açılır kapanır alt menü (<details>): başlık bağlantıyla aynı görünümde, alt öğeler girintili */
.kr-nav-sub > summary { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 10px; border-radius: 8px; color: var(--kr-ink); font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
.kr-nav-sub > summary::-webkit-details-marker { display: none; }
.kr-nav-sub > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--kr-muted); border-bottom: 2px solid var(--kr-muted); transform: rotate(-45deg); transition: transform .15s; }
.kr-nav-sub[open] > summary::after { transform: rotate(45deg); }
.kr-nav-sub > summary:hover { background: var(--kr-soft); }
.kr-nav-sub > ul { padding-left: 14px !important; margin: 2px 0 4px !important; border-left: 1px solid var(--kr-line); margin-left: 21px !important; }
.kr .kr-nav-sub > ul a, .kr-panel .kr-nav .kr-nav-sub > ul a:not(.btn):not(.kr-btn) { min-height: 38px; font-size: 14.5px; }
.kr-nav-sub .kr-nav-ico i, .kr-nav-sub .kr-nav-ico i span::before { color: var(--kr-muted) !important; font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .kr-nav-sub > summary::after { transition: none; } }

/* ---------------------------------------------------------------- Menüde arama, araç satırı, daraltma (745#90) */
/* Arama paneli ve araç satırı menüyle birlikte kaymaz: menünün üstünde yapışkan durur */
.kr-nav-tools, .kr-nav-tools * { box-sizing: border-box; }
.kr-nav-tools { position: sticky; top: -8px; z-index: 2; margin: -8px -12px 6px; padding: 12px 12px 8px; background: var(--kr-surface); border-bottom: 1px solid var(--kr-line); display: grid; gap: 8px; }
.kr-nav-row { display: flex; align-items: center; gap: 4px; }
.kr-nav-search { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.kr-nav-search-ico { position: absolute; left: 11px; width: 18px; height: 18px; color: var(--kr-muted); pointer-events: none; }
.kr-nav-search input { width: 100%; min-height: 40px; padding: 8px 34px 8px 36px; border: 1px solid var(--kr-line); border-radius: 10px; background: var(--kr-soft); color: var(--kr-ink); font: inherit; font-size: 14.5px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.kr-nav-search input::placeholder { color: var(--kr-muted); opacity: 1; }
.kr-nav-search input:focus { border-color: var(--kr-primary); background: var(--kr-surface); box-shadow: 0 0 0 3px var(--kr-info); }
.kr-nav-search input::-webkit-search-cancel-button { cursor: pointer; }
.kr-nav-search-kbd { position: absolute; right: 9px; pointer-events: none; }
.kr-nav-search input:focus ~ .kr-nav-search-kbd, .kr-nav-search input:not(:placeholder-shown) ~ .kr-nav-search-kbd { display: none; }
.kr-nav-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.kr-nav-act { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; min-height: 30px; padding: 4px 5px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--kr-muted); }
.kr-nav-act svg { width: 14px; height: 14px; flex-shrink: 0; }
.kr-nav-rail-btn svg { width: 16px; height: 16px; }
.kr-nav-act:hover { background: var(--kr-soft); color: var(--kr-heading); }
.kr-nav-act:focus-visible { outline: 2px solid var(--kr-primary); outline-offset: 1px; }
.kr-nav-rail-btn { justify-content: center; width: 34px; min-height: 40px; }
.kr-nav-rail-only { display: none; }
.kr-nav-empty { margin: 14px 10px; padding: 12px; border: 1px dashed var(--kr-line-2); border-radius: 10px; color: var(--kr-muted); font-size: 14px; text-align: center; }
/* Arama sonucu: eşleşmeyen öğe / bölüm gizli; katlı bölüm arama süresince açık; eşleşen metin vurgulu */
.kr-nav .kr-ara-gizli { display: none !important; }
/* .kr [hidden] !important olduğu için burada da !important (daha özgül seçici kazanır) */
.kr-nav.kr-nav-arama ul[hidden]:not(.kr-ara-gizli) { display: grid !important; }
.kr-nav mark.kr-nav-mark { background: rgba(224, 180, 76, 0.38); color: inherit; border-radius: 3px; padding: 0 1px; }
html.kr-night .kr-nav mark.kr-nav-mark { background: rgba(224, 180, 76, 0.32); }
/* Ana-alt (master-child) yapı: etkin sayfayı içeren alt menü başlığı vurgulu; her alt düzey girintili ve kılavuz çizgili */
.kr-nav-sub:has(a[aria-current="page"]) > summary { color: var(--kr-heading); font-weight: 700; }
.kr-nav-sub:has(a[aria-current="page"]) > summary .kr-nav-ico i, .kr-nav-sub:has(a[aria-current="page"]) > summary .kr-nav-ico i span::before { color: var(--kr-heading) !important; }
.kr-nav-sub > ul > li { position: relative; }
.kr-nav-sub > ul > li > a[aria-current="page"]::before { content: ""; position: absolute; left: -15px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--kr-primary); box-shadow: 0 0 0 3px var(--kr-surface); }
.kr-nav-sub .kr-nav-sub > ul { margin-left: 18px !important; }
/* 745#111: simgesi olmayan öğede baş harf kutusu artık çizilmez (02.11.2026 kullanıcı kararı). Bir listedeki öğelerin hiçbirinde
   simge yoksa boş simge alanı yer kaplamaz, ad sola yaslanır; listede simgeli öğe de varsa boş alan hizalama için kalır.
   Daraltılmış menüde (simge şeridi) simgesiz öğe küçük bir nokta ile gösterilir; adı fareyle üzerine gelince title ipucunda. */
.kr-nav ul:not(:has(> li > :is(a, details > summary) > .kr-nav-ico:not(:empty))) > li > :is(a, details > summary) > .kr-nav-ico:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .kr-nav-search input { transition: none; } }

/* Geniş ekranda kenar menü sayfa yüksekliğini büyütmez (745#97, ilk bulgu essui#258).
   Sorun: .kr-nav yapışkan ve yüksekliği sabit "ekran − uygulama çubuğu"dur; kabuk ızgarasının tek satırında olduğu için satırı
   EN AZ bu kadar uzatıyordu. Üstteki kurum bandı da eklenince içerik ne kadar kısa olursa olsun sayfa ekrandan uzun oluyor,
   alt bilgi ekranın altına oturmuyor, kaydırınca görünüyordu (tüm projelerde).
   Çözüm: menü yükseklik hesabına katılmaz ("contain: size": kendi içeriği satırı büyütmez), satırın yüksekliğini alır
   ("align-self: stretch") ve en çok eski sabit yükseklik kadar uzar. Kabuk kalan boşluğu zaten doldurduğu için
   (.kr-shell flex: 1 0 auto) menü yine ekranın altına kadar uzanır; sayfa kaydırılınca eskisi gibi uygulama çubuğunun
   altında yapışık kalır, uzun menü kendi içinde kayar. Dar ekran çekmecesi (≤ 991 px, position: fixed) etkilenmez. */
@media (min-width: 992px) {
    .kr-shell > .kr-nav { contain: size; align-self: stretch; height: auto; max-height: calc(100vh / var(--kr-zoom) - var(--kr-appbar-h)); }
}

/* Daraltılmış menü (simge şeridi): yalnız geniş ekranda; html.kr-nav-dar (gorunum.js sayfa çizilmeden, kabuk.js düğmeyle koyar) */
@media (min-width: 992px) {
    html.kr-nav-dar .kr-panel { --kr-nav-w: 76px; }
    html.kr-nav-dar .kr-nav { padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
    html.kr-nav-dar .kr-nav-tools { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
    html.kr-nav-dar .kr-nav-search, html.kr-nav-dar .kr-nav-act[data-kr-nav="ac"], html.kr-nav-dar .kr-nav-act[data-kr-nav="kapat"],
    html.kr-nav-dar .kr-nav-head, html.kr-nav-dar .kr-nav-empty, html.kr-nav-dar .kr-nav .kr-ext,
    html.kr-nav-dar .kr-nav a > span:not(.kr-nav-ico), html.kr-nav-dar .kr-nav-sub > summary > span:not(.kr-nav-ico),
    html.kr-nav-dar .kr-nav-sub > summary::after, html.kr-nav-dar .kr-nav-sub > ul { display: none !important; }
    html.kr-nav-dar .kr-nav-actions, html.kr-nav-dar .kr-nav-row { flex-direction: column; }
    html.kr-nav-dar .kr-nav-rail-only { display: inline-flex; }
    html.kr-nav-dar .kr-nav-act { justify-content: center; width: 40px; min-height: 36px; }
    html.kr-nav-dar .kr-nav-rail-btn svg { transform: scaleX(-1); }
    html.kr-nav-dar .kr-nav-act svg { width: 18px; height: 18px; }
    html.kr-nav-dar .kr-nav ul[hidden]:not(.kr-ara-gizli) { display: grid !important; }
    html.kr-nav-dar .kr-nav ul + h2 + ul, html.kr-nav-dar .kr-nav ul + ul { border-top: 1px solid var(--kr-line); padding-top: 6px; margin-top: 6px; }
    html.kr-nav-dar .kr-nav a, html.kr-nav-dar .kr-nav-sub > summary { justify-content: center; padding-left: 0; padding-right: 0; }
    html.kr-nav-dar .kr-nav-sub:has(a[aria-current="page"]) > summary { background: var(--kr-info); box-shadow: inset 3px 0 0 var(--kr-primary); }
    /* 745#111: simgesiz öğe şeritte boş kalmasın — baş harf yerine küçük nötr nokta */
    html.kr-nav-dar .kr-nav .kr-nav-ico:empty { display: grid !important; }
    html.kr-nav-dar .kr-nav .kr-nav-ico:empty::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kr-muted); opacity: 0.6; }
}
@media (max-width: 991px) { .kr-nav-rail-btn { display: none !important; } }

/* ================================================================ Dar ekran */
@media (max-width: 991px) {
    .kr-shell { grid-template-columns: minmax(0, 1fr); }
    /* Kenar menü telefonda / dar tablette soldan açılan çekmece (kabuk.js: body.kr-nav-open) */
    .kr-nav { position: fixed; top: 0; left: 0; bottom: 0; height: auto; width: min(300px, 86vw); z-index: 60; transform: translateX(-100%); visibility: hidden;
        transition: transform .2s ease, visibility 0s linear .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .3); padding-top: 12px; }
    .kr-nav-open .kr-nav { transform: none; visibility: visible; transition: transform .2s ease; }
    .kr-nav-toggle { display: inline-flex; }
    .kr-appbar-in { padding: 8px 16px; gap: 10px; }
    .kr-pagehead { padding: 14px 16px 12px; }
    .kr .kr-page-title { font-size: 23px; }
    .kr-content { padding: 16px 16px 24px; }
}
@media (max-width: 760px) {
    .kr-login { grid-template-columns: 1fr; min-height: 0; }
    .kr-intro { order: 2; min-height: 380px; }
    .kr-intro-in { padding: 28px 20px 30px; margin: 0; }
    .kr-intro h2 { font-size: 25px; }
    .kr-rose { width: 170px; height: 170px; }
    .kr-card-area { padding: 18px 14px; }
    .kr-card { padding: 22px 18px; box-shadow: none; }
    .kr-foot { padding: 12px 16px; }
    .kr-foot-end { margin-left: 0; }
    .kr .hb-card { padding: 24px 18px; }
    .kr-hide-narrow { display: none !important; }
    .kr .kr-appname small { display: none; }
    .kr .kr-appname strong { font-size: 17px; }
    /* Sayfalardaki sabit genişlikli araç kutuları (ör. arama min-width:320px) telefonda kart içine sığar */
    .kr-panel .kr-content [style*="min-width"] { min-width: 0 !important; flex: 1 1 100%; max-width: 100%; }
    .kr-panel .card > .card-body { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .kr-edevlet, .kr-step-dot, .kr-nav, .kr-nav-open .kr-nav { transition: none; }
    .kr-spin { animation: none; }
}