/* entak - proje-ozel stiller.
   Bootstrap 5.3.3 ve Bootstrap Icons static/vendor/ altindan yerel yuklenir
   (CDN kullanilmaz, bkz. md/softwarestandarts.md > "Template / Frontend
   Standartlari"). Bu dosya Bootstrap'i EZMEZ, ustune ekler: renk paleti,
   app shell (navbar+sidebar fixed layout), sidebar detaylari, dark mode,
   font, link gorunumu. */

/* ============================================================
   Font: Roboto (self-hosted)
   ============================================================ */

/* NOT: Google Fonts CSS2 API bu subsetler icin variable font sunmadigi
   icin indirilen dosyalar sabit 400 (normal) agirliktadir. font-weight:
   normal olarak tanimlanir; kalin metin (h1-h6, .fw-bold vb.) tarayicinin
   sentetik bold'una duser - gercek bir Bold woff2 eklenirse ikinci bir
   @font-face (font-weight: 700) ile burasi genisletilir. */
@font-face {
    font-family: "Roboto";
    src: url("../vendor/roboto/roboto-latin.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    src: url("../vendor/roboto/roboto-latin-ext.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Rusca arayuz (bkz. entak.md > "21.12"). unicode-range sayesinde yalnizca
   sayfada Kiril harf varsa indirilir; TR/EN kullanicisi bu dosyayi hic almaz. */
@font-face {
    font-family: "Roboto";
    src: url("../vendor/roboto/roboto-cyrillic.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

body {
    font-family: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ============================================================
   Global Renk Paleti (bkz. softwarestandarts.md > "Global Renk Paleti")
   ============================================================ */

:root {
    /* Marka / vurgu */
    --primary: #2a78d6;
    --primary-hover: #2064b8;
    --primary-subtle: #e8f1fb;

    /* Durum (temalanmaz) */
    --status-good: #0ca30c;
    --status-warning: #fab219;
    --status-serious: #ec835a;
    --status-critical: #d03b3b;

    /* Yuzey */
    --surface-page: #f9f9f7;
    --surface-card: #fcfcfb;
    --surface-hover: #f1f0ed;

    /* Metin */
    --text-primary: #0b0b0b;
    --text-secondary: #52514e;
    --text-muted: #898781;

    /* Kenarlik */
    --border: #e1e0d9;
    --border-strong: #c3c2b7;

    /* App shell */
    --topbar-height: 56px;
    --sidebar-width: 240px;
    --sidebar-width-collapsed: 64px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #3987e5;
        --primary-hover: #4c96ea;
        --primary-subtle: #1a2c40;
        --surface-page: #0d0d0d;
        --surface-card: #1a1a19;
        --surface-hover: #242422;
        --text-primary: #ffffff;
        --text-secondary: #c3c2b7;
        --border: #2c2c2a;
        --border-strong: #383835;
    }
}

:root[data-theme="dark"] {
    --primary: #3987e5;
    --primary-hover: #4c96ea;
    --primary-subtle: #1a2c40;
    --surface-page: #0d0d0d;
    --surface-card: #1a1a19;
    --surface-hover: #242422;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --border: #2c2c2a;
    --border-strong: #383835;
}

body {
    background-color: var(--surface-page);
    color: var(--text-primary);
}

/* ============================================================
   Link Gorunumu (bkz. softwarestandarts.md > "Link Gorunumu Standardi")
   ============================================================ */

a {
    text-decoration: none;
    color: var(--text-primary);
}
a:hover {
    text-decoration: underline;
}
.app-navbar a, .app-sidebar a, .navbar-brand-slot a {
    color: inherit;
}

/* ============================================================
   Erisilebilirlik: skip-to-content linki
   ============================================================ */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
}
.skip-link:focus {
    left: 8px;
    top: 8px;
    padding: 8px 16px;
    background: var(--surface-card);
    color: var(--text-primary);
    border-radius: 4px;
}

/* ============================================================
   App Shell Fixed Layout (bkz. softwarestandarts.md > "App Shell Fixed Layout")
   ============================================================ */

body {
    padding-top: var(--topbar-height);
    margin: 0;
}

.app-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    z-index: 1030;
    display: flex;
    align-items: stretch;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border);
}

.app-sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    overflow-y: auto;
    z-index: 1025;
    transition: width 0.2s ease;
    background: var(--surface-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.app-shell.sidebar-collapsed .app-sidebar {
    width: var(--sidebar-width-collapsed);
}

.app-content {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.2s ease;
    padding: 24px;
}

.app-shell.sidebar-collapsed .app-content {
    margin-left: var(--sidebar-width-collapsed);
}

@media (max-width: 768px) {
    .app-sidebar {
        display: none;
    }
    .app-content {
        margin-left: 0;
    }
    .app-shell.sidebar-mobile-open .app-sidebar {
        display: flex;
        width: 240px;
        z-index: 1040;
    }
}

/* ============================================================
   Navbar ic yapisi
   ============================================================ */

.navbar-brand-slot {
    width: var(--sidebar-width);
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-right: 1px solid var(--border);
    font-weight: 700;
    font-size: 1.1rem;
    transition: width 0.2s ease;
    flex-shrink: 0;
}
.app-shell.sidebar-collapsed .navbar-brand-slot {
    width: var(--sidebar-width-collapsed);
    justify-content: center;
    padding: 0;
}
.app-shell.sidebar-collapsed .navbar-brand-slot .brand-full {
    display: none;
}
.navbar-brand-slot .brand-mini {
    display: none;
}
.app-shell.sidebar-collapsed .navbar-brand-slot .brand-mini {
    display: inline;
}
.bildirim-satir:last-child {
    border-bottom: 0 !important;
}
/* Logo kok URL'e (/) giden baglantidir; img boyut kurallari bozulmasin
   diye baglanti flex kutu olarak davranir. */
.navbar-brand-slot .navbar-brand-link {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
}
.navbar-brand-slot .brand-logo-full {
    height: 32px;
    max-width: 100%;
    object-fit: contain;
}
.navbar-brand-slot .brand-logo-mini {
    display: none;
}
.app-shell.sidebar-collapsed .navbar-brand-slot .brand-logo-full {
    display: none;
}
.app-shell.sidebar-collapsed .navbar-brand-slot .brand-logo-mini {
    display: block;
    height: 28px;
    object-fit: contain;
}

.navbar-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.navbar-hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--text-primary);
    cursor: pointer;
}
@media (max-width: 768px) {
    .navbar-hamburger {
        display: inline-flex;
    }
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.navbar-actions .nav-icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.navbar-actions .nav-icon-btn:hover {
    background: var(--surface-hover);
}
.navbar-actions .badge-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-critical);
}

/* ============================================================
   Sidebar menu
   ============================================================ */

.app-sidebar .nav {
    flex: 1 1 auto;
    list-style: none;
    padding-left: 0;
    margin: 8px 0;
}

/* KRITIK: ic ice nav-submenu .nav sinifini TASIMAZ, list-style ayrica
   tanimlanmazsa tarayici varsayilan disc bullet'i ikonla ust uste biner.
   bkz. softwarestandarts.md > "Sidebar standardi" kritik hata kalibi. */
.nav-submenu {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
}
.app-sidebar .nav-link:hover {
    background: var(--surface-hover);
    text-decoration: none;
}
.app-sidebar .nav-link.active {
    background: var(--primary-subtle);
    color: var(--primary);
}
.app-sidebar .nav-submenu .nav-link {
    padding-left: 40px;
}
.app-sidebar .label {
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-shell.sidebar-collapsed .app-sidebar .label,
.app-shell.sidebar-collapsed .app-sidebar .chevron {
    display: none;
}
.app-sidebar .chevron {
    margin-left: auto;
    transition: transform 0.15s ease;
}
.app-sidebar .nav-link[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}

/* Daraltilmis modda flyout (hover/focus ile acilan alt menu) */
.app-shell.sidebar-collapsed .has-submenu {
    position: relative;
}
.app-shell.sidebar-collapsed .has-submenu .nav-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1026;
}
.app-shell.sidebar-collapsed .has-submenu:hover .nav-submenu,
.app-shell.sidebar-collapsed .has-submenu:focus-within .nav-submenu {
    display: block;
}
.app-shell.sidebar-collapsed .has-submenu .nav-submenu .nav-link {
    padding-left: 16px;
}
.app-shell.sidebar-collapsed .has-submenu .nav-submenu .label {
    display: inline;
}

/* Sidebar toggle butonu: .app-shell'in DOGRUDAN COCUGU olmali, <aside>
   icinde OLMAMALI - aksi halde stacking context yuzunden navbar arkasinda
   kaybolur. bkz. softwarestandarts.md kritik hata kalibi. */
.sidebar-toggle-btn {
    position: fixed;
    top: calc(var(--topbar-height) / 2);
    left: var(--sidebar-width);
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface-card);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1031;
    transition: left 0.2s ease;
    padding: 0;
}
/* Descendant combinator (bosluk) - sibling (~) DEGIL. Toggle buton
   .app-shell'in cocugu, sidebar'in kardesi oldugu icin ~ hicbir zaman
   eslesmez. bkz. softwarestandarts.md kritik hata kalibi. */
.app-shell.sidebar-collapsed .sidebar-toggle-btn {
    left: var(--sidebar-width-collapsed);
}
@media (max-width: 768px) {
    .sidebar-toggle-btn {
        display: none;
    }
}

/* Sidebar versiyon satiri */
.sidebar-version {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding: 8px 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.app-shell.sidebar-collapsed .sidebar-version {
    padding: 8px 4px;
    font-size: 0.65rem;
    flex-wrap: wrap;
}
.sidebar-ozet-badge {
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
}
.sidebar-ozet-badge-yesil {
    background-color: #198754;
    color: #fff;
}

/* ============================================================
   Ortak yardimci siniflar
   ============================================================ */

.help-icon {
    cursor: help;
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 16px;
}
.empty-state .bi {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

/* Kolon basliklarinin altindaki filtre satiri (orn. templates/demirbaslar/liste.html).
   Select'ler kolon genisligini doldurur; dar kolonlarda secenek metni
   okunabilsin diye alt sinir var. */
.tablo-filtre-satiri th {
    padding-top: 0;
    font-weight: normal;
}
/* Baslik ile filtresi tek blok gorunsun: aradaki satir cizgisi kaldirilir. */
thead tr:has(+ .tablo-filtre-satiri) > th {
    border-bottom-width: 0;
}
.tablo-filtre-satiri .form-select {
    min-width: 140px;
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.table-toolbar .filters {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}
.table-toolbar .filters .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* Bootstrap .btn-group, dogrudan child (>) secicileriyle kenar
   yuvarlakligi/negatif margin uyguluyor (bkz. bootstrap.min.css > .btn-group
   > .btn). `display:contents` yalnizca layout'u etkiler, DOM agacini
   degistirmez - form icine alinan butonlar artik .btn-group'un dogrudan
   child'i olmadigi icin Bootstrap'in kurallari onlara hic uygulanmaz ve
   grup, birbirinden kopuk/bosluklu butonlar olarak gorunur. Asagidaki
   kurallar Bootstrap'in aym mantigini form-sarmali butonlara da tasir. */
.btn-group-with-form .btn-group-item-form {
    display: contents;
}
.btn-group-with-form > .btn-group-item-form > .btn {
    position: relative;
    flex: 1 1 auto;
}
.btn-group-with-form > .btn-group-item-form:not(:first-child) > .btn {
    margin-left: -1px;
}
.btn-group-with-form > *:not(:first-child) > .btn,
.btn-group-with-form > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group-with-form > *:not(:last-child) > .btn,
.btn-group-with-form > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group-with-form > .btn-group-item-form > .btn:hover,
.btn-group-with-form > .btn-group-item-form > .btn:focus,
.btn-group-with-form > .btn-group-item-form > .btn:active {
    z-index: 1;
}

.simulation-banner {
    background: var(--status-warning);
    color: #3d2b00;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

/* ============================================================
   Form bolumleri (uzun modal formlari, or. Yeni Demirbas)
   Modal yuzeyi Bootstrap temasini izler (data-theme=dark iken de
   beyaz kalir); bu yuzden renkler proje token'lari yerine Bootstrap'in
   --bs-* degiskenlerinden alinir, aksi halde koyu temada beyaz modal
   icinde siyah kutu / okunmaz metin olusur.
   ============================================================ */

.form-bolum {
    margin-bottom: 1.5rem;
}
.form-bolum-baslik {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.form-bolum-baslik .bi {
    color: var(--primary);
    font-size: 1rem;
}
/* Kartli form modali (or. Yeni Demirbas): her konu basligi bir kart,
   modal govdesi hafif gri zemin ki kartlar ayrissin */
.form-kart-govde {
    background: var(--bs-tertiary-bg);
}
.form-kart {
    border-color: var(--bs-border-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.form-kart-baslik {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bs-body-bg);
    padding: 0.75rem 1rem;
}
.form-kart-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 1.1rem;
}
.form-kart-baslik-metin {
    font-weight: 600;
    line-height: 1.2;
}
.form-kart-alt-metin {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}
/* Anahtar ve ona bagli alanin birlikte durdugu kutu (or. Periyodik Bakim + periyot) */
.form-secenek-kutu {
    height: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
}

/* ============================================================
   Liste ekranlari ortak bilesenleri (Zimmetler, Belgeler): sayac
   filtre kartlari, tiklanabilir envanter adi, kisi avatari, envanter kutusu
   ============================================================ */

/* Sayac kartlari ayni zamanda filtre butonudur. */
.filtre-sayac {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 0.875rem 1rem;
    text-align: left;
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.filtre-sayac:hover {
    border-color: var(--border-strong);
}
.filtre-sayac.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
.filtre-sayac-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
    color: var(--primary);
    background: var(--primary-subtle);
    border-radius: 0.5rem;
}
.filtre-sayac-deger {
    display: block;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.1;
}
.filtre-sayac-ad {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.liste-ad {
    color: var(--text-primary);
    text-decoration: none;
}
.liste-ad:hover,
.liste-ad:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}
/* Avatar ve envanter kutusu modal icinde de kullanilir; modal yuzeyi
   Bootstrap temasini izledigi icin --bs-* degiskenleri kullanilir
   (bkz. "Form bolumleri" notu). */
.kisi-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
    border-radius: 50%;
}
.envanter-kutu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}
.envanter-kutu > .bi {
    font-size: 1.25rem;
    color: var(--primary);
}

/* Bakim ekrani: durum renkli sayac ikonlari (durum renkleri temalanmaz). */
.filtre-sayac-ikon.bkm-ikon-yaklasan {
    color: var(--status-warning);
    background: color-mix(in srgb, var(--status-warning) 16%, transparent);
}
.filtre-sayac-ikon.bkm-ikon-geciken {
    color: var(--status-critical);
    background: color-mix(in srgb, var(--status-critical) 14%, transparent);
}

/* Arizalar ekrani: durum renkli sayac ikonlari ve uzun ariza tanimi. */
.filtre-sayac-ikon.arz-ikon-kritik {
    color: var(--status-critical);
    background: color-mix(in srgb, var(--status-critical) 14%, transparent);
}
.filtre-sayac-ikon.arz-ikon-durus {
    color: var(--status-serious);
    background: color-mix(in srgb, var(--status-serious) 14%, transparent);
}
.arz-tanim {
    max-width: 360px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ariza Bildir penceresi: numarali adimlar, demirbas secici, onem kartlari. */
.arz-adim {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.arz-adim.mb-0 { border-bottom: 0; padding-bottom: 0; }
.arz-adim-baslik {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    margin-bottom: .75rem;
}
.arz-adim-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: .8rem;
    color: #fff;
    background: var(--primary);
}
.arz-demirbas-liste {
    max-height: 260px;
    overflow-y: auto;
    margin-top: .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.arz-demirbas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .5rem .75rem;
    text-align: left;
    color: inherit;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
}
.arz-demirbas:last-child { border-bottom: 0; }
.arz-demirbas:hover,
.arz-demirbas:focus-visible {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    outline: none;
}
.arz-secili {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
    border-radius: var(--bs-border-radius);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.min-w-0 { min-width: 0; }
.arz-onem-kart {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    height: 100%;
    padding: .6rem .75rem;
    cursor: pointer;
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    border-radius: var(--bs-border-radius);
}
.arz-onem-low { border-left-color: var(--bs-secondary); }
.arz-onem-medium { border-left-color: var(--bs-info); }
.arz-onem-high { border-left-color: var(--status-warning); }
.arz-onem-critical { border-left-color: var(--status-critical); }
.btn-check:checked + .arz-onem-kart {
    border-color: var(--primary);
    border-left-width: 4px;
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--primary) 30%, transparent);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.btn-check:focus-visible + .arz-onem-kart { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Fotograf alani, galeri ve buyutme. */
.arz-surukle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1.25rem;
    cursor: pointer;
    text-align: center;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s, background .15s;
}
.arz-surukle > .bi { font-size: 1.75rem; color: var(--primary); }
.arz-surukle:hover,
.arz-surukle.surukleniyor {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.arz-galeri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .5rem;
}
.arz-foto {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-border-color);
}
.arz-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arz-foto-ac { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.arz-foto-sil {
    position: absolute;
    top: .25rem;
    right: .25rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    color: #fff;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
}
.arz-foto-sil:hover { background: var(--status-critical); }
.arz-bolum {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}
#arzBilgi > .arz-bolum:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.arz-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 4rem;
    background: rgba(0, 0, 0, .88);
}
.arz-lightbox figure { text-align: center; max-width: 100%; max-height: 100%; }
.arz-lightbox img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: 4px; }
.arz-lightbox figcaption { margin-top: .5rem; color: rgba(255, 255, 255, .8); font-size: .875rem; }
.arz-lb-kapat,
.arz-lb-ok {
    position: absolute;
    color: #fff;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
}
.arz-lb-kapat:hover,
.arz-lb-ok:hover { background: rgba(255, 255, 255, .25); }
.arz-lb-kapat { top: 1rem; right: 1rem; }
.arz-lb-onceki { left: 1rem; top: 50%; transform: translateY(-50%); }
.arz-lb-sonraki { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 575.98px) {
    .arz-lightbox { padding: 3.5rem .5rem; }
    .arz-lb-onceki { left: .25rem; }
    .arz-lb-sonraki { right: .25rem; }
}

/* Kaydirilabilir modalda header/body/footer bir <form> ile sarildiginda
   Bootstrap'in flex duzeni form'da kopar: govde kaymaz, footer (gonder
   dugmesi) ekran disinda kalir. Form ayni flex kolonunu surdurur. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

/* Kalibrasyon: "Uygun" sonuc karti yesil serit. */
.arz-onem-kart.kal-sonuc-uygun { border-left-color: var(--status-good); }

/* Garanti durum rozetleri (bkz. entak.md > "9": 90+ gun iyi, 30-90 uyari,
   <30 ciddi, dolmus kritik). Renk tek basina anlam tasimaz; rozette ikon ve metin var. */
.badge.grt-rozet-gecerli { background: var(--status-good); color: #fff; }
.badge.grt-rozet-yaklasan { background: var(--status-warning); color: #212529; }
.badge.grt-rozet-kritik { background: var(--status-serious); color: #fff; }
.badge.grt-rozet-dolan { background: var(--status-critical); color: #fff; }
.badge.grt-rozet-yok { background: transparent; color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); }

/* Kategori ikonlari (Tanimlar > Kategoriler). Renk ayirt etmeyi kolaylastirir;
   yaninda kategori adi oldugu icin tek basina anlam tasimaz. Zemin rengin
   saydam karisimidir; acik ve koyu temada okunur. */
.kat-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    font-size: 1.05rem;
    color: var(--kat-renk);
    background: color-mix(in srgb, var(--kat-renk) 14%, transparent);
}
/* Anahtarlar app/models/asset_category.py > RENK_SECENEKLERI ile ayni. */
.kat-renk-gri { --kat-renk: #6c757d; }
.kat-renk-mavi { --kat-renk: #1c7ed6; }
.kat-renk-camgobegi { --kat-renk: #1098ad; }
.kat-renk-yesil { --kat-renk: #5c940d; }
.kat-renk-sari { --kat-renk: #d9a300; }
.kat-renk-turuncu { --kat-renk: #e8590c; }
.kat-renk-kirmizi { --kat-renk: #e03131; }
.kat-renk-pembe { --kat-renk: #d6336c; }
.kat-renk-mor { --kat-renk: #7048e8; }
.kat-renk-varsayilan { --kat-renk: #868e96; }
.kat-ikon-sm { width: 1.6rem; height: 1.6rem; font-size: .9rem; border-radius: .4rem; }

/* Kategori penceresi: ikon ve renk secici. */
.kat-ikon-secici {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
    gap: .35rem;
    max-height: 11.5rem;
    overflow-y: auto;
    padding: .35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
.kat-ikon-secenek {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    font-size: 1.15rem;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: .45rem;
}
.kat-ikon-secenek:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.btn-check:checked + .kat-ikon-secenek {
    color: var(--primary);
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.kat-renk-secenek {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    cursor: pointer;
    border-radius: 50%;
    background: var(--kat-renk);
}
/* Secili renk: dis halka + onay isareti (renk tek basina secimi belirtmez). */
.btn-check:checked + .kat-renk-secenek {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--kat-renk);
}
.btn-check:checked + .kat-renk-secenek::after {
    content: "\F26E"; /* bi-check */
    font-family: "bootstrap-icons";
    font-size: 1.2rem;
    color: #fff;
}
.btn-check:focus-visible + .kat-ikon-secenek,
.btn-check:focus-visible + .kat-renk-secenek { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Yazilabilir + onerili alan (input + datalist): form-select oku "listeden
   de secilebilir" ipucudur; Chrome'un kendi datalist oku gizlenir, cift ok olmasin. */
input.form-select::-webkit-calendar-picker-indicator { opacity: 0; }

/* Yetkilendirme modali (ecedoc > _yetkilendirme.html ile ayni gorunum).
   Renk anahtarin etkisini anlatir: yesil zararsiz, sari degisiklik yapan,
   kirmizi geri alinamayan islem. */
.yetki-kart .card-header { font-weight: 600; }
.yetki-switch { display: flex; align-items: center; padding-left: 0; }
.yetki-switch .form-check-input { width: 2.5em; height: 1.3em; margin-left: 0; flex-shrink: 0; }
.yetki-switch .form-check-label { margin-left: 0.75rem; }
.yetki-yesil .form-check-input:checked { background-color: #198754; border-color: #198754; }
.yetki-sari .form-check-input:checked { background-color: #ffc107; border-color: #ffc107; }
.yetki-kirmizi .form-check-input:checked { background-color: #dc3545; border-color: #dc3545; }

/* Zimmetle modali: ajax personel aramasi (demirbaslar.js > personelAramaKur) */
.personel-ara { position: relative; }
.personel-ara-liste {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface-card);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}
.personel-ara-oge {
    display: block;
    width: 100%;
    padding: .6rem .9rem;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--text-primary);
}
.personel-ara-oge:last-child { border-bottom: 0; }
.personel-ara-oge:hover, .personel-ara-oge.aktif { background: var(--bs-tertiary-bg); }
.personel-ara-bos { padding: .6rem .9rem; color: var(--bs-secondary-color); }

/* El imzasi alani ve ortak imza penceresi (macros/form.html > imza_alani,
   partials/imza_modal.html, static/js/imza.js). Imza siyah murekkeple
   cizildigi icin onizleme ve tuval zemini temadan bagimsiz beyazdir. */
.imza-onizleme {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 72px;
    padding: 4px;
    background: #fff;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--primary);
    cursor: pointer;
}
.imza-onizleme:hover,
.imza-onizleme:focus-visible { border-color: var(--primary); }
.imza-alani.imzali .imza-onizleme { border-style: solid; }
.imza-onizleme img { max-width: 100%; max-height: 100%; object-fit: contain; }
.imza-bos { font-size: .875rem; }
.imza-tuval-kutu {
    position: relative;
    background: #fff;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}
#imzaTuval {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    cursor: crosshair;
}
.imza-tuval-ipucu {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    pointer-events: none;
}

/* Dashboard sayac kutusu: tiklaninca kayit penceresi acilir (static/js/dashboard.js). */
.dashboard-kutu { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.dashboard-kutu:hover, .dashboard-kutu:focus-visible { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12); transform: translateY(-1px); }