@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700;800&family=Manrope:wght@700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

/* KCM Lojistik — Ana Stil Dosyası (statik CSS)
 * Dinamik tema değişkenleri index.php içindeki <style>:root{} bloğunda kalır.
 * Burası: tüm layout, component ve utility sınıfları.
 */

:root {
    --control-radius: var(--radius);
    --control-border-color: var(--border);
    --control-border-width: 1px;
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);

    /* Z-index katman sistemi */
    --z-sticky:   3;
    --z-sidebar:  10;
    --z-dropdown: 100;
    --z-header:   1000;
    --z-modal:    2000;
    --z-modal-top: 5000;
    --z-toast:    9999;
    --z-confirm:  99999;

    /* Border-radius skalası — tema --radius'una oranlı, admin hangi değeri seçerse seçsin sm < radius < lg hiyerarşisi korunur */
    --radius-sm:   max(2px, calc(var(--radius, 4px) - 2px));
    --radius-lg:   calc(var(--radius, 4px) + 4px);
    --radius-pill: 999px;

    /* Buton yükseklik skalası */
    --btn-height:    44px;
    --btn-height-sm: 36px;
    --btn-height-xs: 28px;

    /* Spacing skalası (4px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Typography skalası */
    --text-xs:   10px;
    --text-sm:   12px;
    --text-base: 13px;
    --text-md:   15px;
    --text-lg:   18px;
    --text-xl:   22px;

    /* Design System — durum renkleri */
    --ds-focus-ring: color-mix(in srgb, var(--primary-accent) 35%, transparent);
    --ds-focus-width: 3px;
    --ds-error: #DC2626;
    --ds-error-bg: #FEF2F2;
    --ds-error-border: #FCA5A5;
    --ds-success: #059669;
    --ds-success-bg: #F0FDF4;
    --ds-success-border: #BBF7D0;
    --ds-disabled-opacity: 0.45;

    /* Design System — geçiş süresi */
    --ds-transition: 0.15s ease;

    /* Gölge skalası — tüm kart/dropdown/modal gölgeleri buradan türer */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .10);
    --shadow-lg: 0 10px 28px rgba(15, 23, 42, .14);
    --shadow-xl: 0 18px 48px rgba(15, 23, 42, .18);
}

/* Global heading hiyerarşisi */
.kcm-ui-core h1, .kcm-ui-core h2, .kcm-ui-core h3, .kcm-ui-core h4 { margin:0 0 8px; line-height:1.2; font-family:var(--font-main); }
.kcm-ui-core h1 { font-size: var(--fs-xl); font-weight:800; }
.kcm-ui-core h2 { font-size: var(--fs-lg); font-weight:800; }
.kcm-ui-core h3 { font-size: var(--fs-md); font-weight:700; }
.kcm-ui-core h4 { font-size: var(--fs-base); font-weight:700; color:var(--text-light); }


*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        /* Kök font-size — rem tabanlı boyutların (--fs-*, dönüştürülmüş font-size'lar) Ayarlar>Font Boyutu ile ölçeklenmesini sağlar. font_scale=100'de tarayıcı varsayılanıyla (16px) birebir aynı, görsel değişiklik yok. */
        html { height: -webkit-fill-available; overscroll-behavior: none; font-size: calc(16px * var(--font-scale, 100) / 100); }
        body { font-family: var(--font-main); background: var(--bg); margin: 0; padding: 0; font-size: calc(12.5px * var(--font-scale) / 100); color: var(--text); overflow-x: hidden; width: 100%; min-height: -webkit-fill-available; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; letter-spacing: var(--letter-spacing, 0em); line-height: var(--line-height, 1.5); }

        .app-container { display: flex; height: 100dvh; overflow: hidden; width: 100%; }
        /* FIX2: var(--sal), var(--sar) fallback eklendi */
        .app-header { position: fixed; top: 0; left: 0; right: 0; height: calc(46px + var(--sat)); padding-top: var(--sat); background: var(--card-bg); border-bottom: 1px solid var(--border); display: flex; align-items: flex-end; padding-left: calc(12px + var(--sal, 0px)); padding-right: calc(12px + var(--sar, 0px)); z-index: var(--z-header); box-shadow: var(--header-shadow, 0 1px 4px rgba(0,0,0,.08)); }
        .app-header-inner { display:flex; align-items:center; gap:8px; width:100%; height:46px; }
        .header-logo { width:26px; height:26px; border-radius:6px; object-fit:cover; flex-shrink:0; }
        .header-title { font-size: var(--fs-md); font-weight:800; color:var(--text); flex:1; text-align:center; }
        .header-exit { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:4px 10px; font-size: 0.7188rem; font-weight:600; cursor:pointer; min-height:var(--btn-height-sm); }

        .sidebar { width:220px; background:var(--sidebar-bg); display:flex; flex-direction:column; padding:0; z-index:var(--z-sidebar); flex-shrink:0; padding-top:0; }
        .logo-area { padding:16px 14px; border-bottom:1px solid rgba(255,255,255,0.05); }
        .logo-area-inner { display:flex; flex-direction:column; align-items:center; gap:8px; }
        .logo-area img { width:100px; height:auto; border-radius:10px; }
        .logo-area-text { color:#111827; font-size: var(--fs-base); font-weight:700; text-align:center; }
        .logo-area-sub { color:var(--text-tertiary); font-size: 0.5938rem; text-align:center; }
        .sidebar-section { padding:6px 0; }
        .sidebar-section-title { font-size: var(--fs-xs); font-weight:700; color:var(--text-tertiary); padding:6px 14px 4px; }
        .menu-item { padding:10px 12px; cursor:pointer; font-weight:500; font-size: var(--fs-sm); color:var(--sidebar-text, #CBD5E1); display:flex; align-items:center; gap:8px; margin:3px 8px; border-radius:var(--radius); min-height:44px; transition:background 0.15s, color 0.15s; border-left:3px solid transparent; }
        .menu-item:hover:not(.active) { background:rgba(255,255,255,0.07); color:#F8FAFC; }
        .menu-item.active { background:var(--sidebar-active); color:#fff; font-weight:700; border-left-color:rgba(255,255,255,0.4); }
        .mi-icon, .icon { opacity: 0.7; font-size: 1rem; width:22px; text-align:center; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .mi-icon svg { display:block; }
        .menu-item.active .mi-icon { opacity: 1; }
        .nav-item.active:not(.nav-img-icon) .icon { filter: sepia(100%) saturate(500%) hue-rotate(5deg) brightness(0.9); opacity: 1; }
        .nav-item.active.nav-img-icon .icon { opacity: 1; }

        .sidebar-footer { margin-top:auto; padding:8px 8px calc(8px + var(--sab)); border-top:1px solid rgba(255,255,255,0.05); }
        .sidebar-user { padding:8px 12px; display:flex; align-items:center; gap:8px; }
        .sidebar-user-avatar { width:28px; height:28px; border-radius:6px; background:var(--sidebar-active); display:flex; align-items:center; justify-content:center; color:var(--sidebar-active-text); font-weight:700; font-size: var(--fs-sm); }
        .sidebar-user-name { color:#F9FAFB; font-size: 0.7188rem; font-weight:600; }
        .sidebar-user-role { color:var(--text-tertiary); font-size: 0.5938rem; }

        /* FIX4: padding-top'tan hayalet 46px header boşluğu kaldırıldı (app-header HTML'de yok) */
        .main-content { flex:1; overflow-y:auto; overflow-x:hidden; background:var(--bg); padding:12px; padding-top:calc(12px + var(--sat, 0px)); padding-bottom:calc(60px + var(--sab, 0px) + 16px); padding-left:calc(12px + var(--sal, 0px)); padding-right:calc(12px + var(--sar, 0px)); -webkit-overflow-scrolling:touch; }

        /* ===== DASHBOARD ===== */
        .d-row { display: flex; gap: 8px; margin-bottom: 8px; }
        .d-row-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
        .d-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
        .d-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
        @media(min-width:1025px) { .d-row-4 { grid-template-columns: repeat(4, 1fr); } }
        @media(max-width:480px) { .d-row-3 { grid-template-columns: 1fr 1fr; } }

        .d-kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; position: relative; overflow: hidden; }
        .d-kpi-label { font-size: var(--fs-xs); font-weight: 700; margin-bottom: 2px; color: var(--text-light); }
        .d-kpi-val { font-size: 1.5rem; font-weight: 800; line-height: 1.15; color: var(--text); letter-spacing: -0.03em; }
        .d-kpi-badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 2px 6px; border-radius: var(--radius); margin-top: 4px; }

        .d-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 6px; box-shadow: var(--card-shadow); }
        .d-card-head { padding: 10px 12px 6px; display: flex; justify-content: space-between; align-items: center; }
        .d-card-title { font-size: var(--fs-base); font-weight: 800; color: var(--text); line-height: 1.2; letter-spacing: -0.02em; }
        .d-card-sub { font-size: 0.5625rem; color: var(--text-tertiary); font-weight: 600; }
        .d-card-badge { font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius); background: #FEF3C7; color: #B45309; }
        .d-card-body { padding: 0 12px 10px; }

        /* Kompakt metrik kartları — tek satırda 7'ye kadar sığar */
        .d-metric-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 10px; }
        .d-metric-row.row-4 { grid-template-columns: repeat(4, 1fr); }
        .d-metric-row.row-5 { grid-template-columns: repeat(5, 1fr); }
        .d-metric-row.row-6 { grid-template-columns: repeat(6, 1fr); }
        .d-metric-row.row-7 { grid-template-columns: repeat(7, 1fr); justify-content: center; }
        .d-metric-row.row-8 { grid-template-columns: repeat(8, 1fr); justify-content: center; }
        /* Tek satır korumak için mobilde sadece font/padding küçültülür, kart sayısı değişmez */
        @media (max-width: 768px) {
            .d-metric-row.row-7 .d-metric, .d-metric-row.row-8 .d-metric, .d-metric-row .d-metric { padding: 5px 3px; }
            .d-metric-row.row-7 .d-metric-val, .d-metric-row.row-8 .d-metric-val, .d-metric-row .d-metric-val { font-size: var(--fs-xl); }
            .d-metric-row.row-7 .d-metric-val.sm, .d-metric-row.row-8 .d-metric-val.sm, .d-metric-row .d-metric-val.sm { font-size: var(--fs-sm); }
            .d-metric-row.row-7 .d-metric-lbl, .d-metric-row.row-8 .d-metric-lbl, .d-metric-row .d-metric-lbl { font-size: var(--fs-2xs); letter-spacing: 0; }
        }
        @media (max-width: 480px) {
            .d-metric-row.row-7 .d-metric-val, .d-metric-row.row-8 .d-metric-val, .d-metric-row .d-metric-val { font-size: var(--fs-xl); }
            .d-metric-row.row-7 .d-metric-val.sm, .d-metric-row.row-8 .d-metric-val.sm, .d-metric-row .d-metric-val.sm { font-size: var(--fs-xs); }
            .d-metric-row.row-7 .d-metric-lbl, .d-metric-row.row-8 .d-metric-lbl, .d-metric-row .d-metric-lbl { font-size: 0.4375rem; }
        }
        .d-metric { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 13px 12px 11px; text-align: center; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--card-shadow); transition: transform .15s ease, box-shadow .15s ease; overflow: hidden; }
        .d-metric::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 3px; border-radius: 0 0 3px 3px; background: var(--border); }
        .d-metric.clickable { cursor: pointer; }
        .d-metric-val { font-size: var(--fs-xl); font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -0.02em; }
        .d-metric-val.sm { font-size: 0.875rem; }
        .d-metric-lbl { font-size: var(--fs-xs); font-weight: 700; color: var(--text-light); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* Renk varyantları */
        .d-metric.accent .d-metric-val { color: var(--primary-accent); }
        .d-metric.green .d-metric-val { color: var(--green); }
        .d-metric.yellow .d-metric-val { color: #D97706; }
        .d-metric.yellow .d-metric-lbl { color: #B45309; }
        .d-metric.red .d-metric-val, .d-metric.red .d-metric-lbl { color: #DC2626; }
        .d-metric.amber .d-metric-val, .d-metric.amber .d-metric-lbl { color: #B45309; }
        .d-metric.gray .d-metric-val, .d-metric.gray .d-metric-lbl { color: #4B5563; }
        .d-metric.slate .d-metric-val, .d-metric.slate .d-metric-lbl { color: #374151; }

        /* Accordion başlığı (tekrar eden pattern) */
        .d-acc-head { font-size: 0.6875rem; font-weight: 700; padding: 9px 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: var(--card-bg); border-bottom: 1px solid var(--border); transition: background .15s ease; }
        .d-acc-head:hover { background: color-mix(in srgb, var(--text) 4%, var(--card-bg)); }
        .d-acc-head.plain { color: var(--text-light); }
        .d-acc-head.warn { color: #B91C1C; border-bottom-color: #FCA5A5; }
        .d-acc-head.purple { color: #7C3AED; border-bottom-color: #DDD6FE; }
        /* Kategori başlık bantları — kart farkındalığı (nötr zemin + renkli alt çizgi: dolu pastel bant yerine sakin, ürün-tipi başlık) */
        .d-band { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.6875rem; font-weight: 800; padding: 11px 14px; text-transform: uppercase; letter-spacing: .04em; background: var(--card-bg); border-bottom: 2px solid; transition: background .15s ease; }
        .d-band:hover { background: color-mix(in srgb, var(--text) 3%, var(--card-bg)); }
        .d-band.amber  { color: #B45309; border-bottom-color: #F59E0B; }
        .d-band.rose   { color: #B91C1C; border-bottom-color: #EF4444; }
        .d-band.violet { color: #6D28D9; border-bottom-color: #8B5CF6; }
        .d-band.indigo { color: #4338CA; border-bottom-color: #6366F1; }
        .d-band.blue   { color: #1D4ED8; border-bottom-color: #3B82F6; }
        .d-band.green  { color: #15803D; border-bottom-color: #10B981; }
        .d-band .d-band-x { font-size: var(--fs-xs); font-weight: 700; text-transform: none; letter-spacing: 0; }
        /* Alarm rozeti — gerçek aciliyet (gecikmiş/kritik) kategori bandını yener */
        .d-band .d-band-alert { font-size: 0.5625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; padding: 2px 8px; border-radius: var(--radius-pill); color: #fff; }
        .d-section-title { font-size: 0.6875rem; font-weight: 700; color: var(--text-light); padding: 10px 14px 0; }

        /* Settings widget/menu checkbox pattern (14x repeat) */
        .izin-arsiv-badge { display:inline-block; font-size: 0.5625rem; font-weight:700; padding:1px 6px; border-radius: var(--radius-pill); background:#F3F4F6; color:#4B5563; border:1px solid #E5E7EB; white-space:nowrap; vertical-align:middle; }
        .ayar-cb-widget { display:flex; align-items:center; gap:5px; font-size: 0.6875rem; padding:3px 5px; background:var(--card-bg); border-radius:6px; cursor:pointer; }
        .ayar-cb-menu { display:flex; align-items:center; gap:4px; font-size: 0.6875rem; cursor:pointer; }
        .ayar-cb-widget input[type="checkbox"], .ayar-cb-menu input[type="checkbox"] { width:14px; height:14px; cursor:pointer; flex-shrink:0; }

        /* Mini başlık — tiny uppercase label (5+ tekrar) */
        .tiny-lbl { font-size: var(--fs-xs); font-weight:700; color:var(--text-light); }
        .tiny-lbl-dim { font-size: var(--fs-xs); color:var(--text-tertiary); }
        .pnl-head { display:flex; justify-content:space-between; align-items:baseline; }

        /* Utility classes — tekrarlayan inline patterns */
        .u-center { text-align:center; }
        .u-hidden { display:none; }
        .u-flex-1 { flex:1; }
        .u-fs-10 { font-size: var(--fs-xs); }
        .u-fs-12 { font-size: var(--fs-sm); padding:0px; }
        .u-fs-13 { font-size: var(--fs-base); }
        .u-fw-700 { font-weight:700; }


/* FIX3: Eksik utility sınıfları eklendi */
.u-flex-1-min { flex:1; min-width:0; }
.u-ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-pointer { cursor:pointer; }
.system-message { position:fixed; top:calc(8px + var(--sat, 0px)); left:50%; transform:translateX(-50%); z-index:var(--z-toast); padding:12px 20px; border-radius:var(--radius); font-size: var(--fs-base); font-weight:700; max-width:90%; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.system-message.success { background:#F0FDF4; color:#16a34a; border:1px solid #86EFAC; }
.system-message.error { background:#FEF2F2; color:#DC2626; border:1px solid #FCA5A5; }

        /* Font size */
        .u-fs-9  { font-size: 0.5625rem; }
        .u-fs-11 { font-size: 0.6875rem; }
        .u-fs-14 { font-size: 0.875rem; }
        .u-fs-15 { font-size: var(--fs-md); }
        .u-fs-20 { font-size: 1.25rem; }
        /* Font weight */
        .u-fw-500 { font-weight:500; }
        .u-fw-600 { font-weight:600; }
        .u-fw-800 { font-weight:800; }
        /* Color */
        .u-text-light { color:var(--text-light); }
        .u-text-main  { color:var(--text); }
        .u-color-primary { color:var(--primary-accent); }
        /* Margin */
        .u-mb-0  { margin-bottom:0; }
        .u-mb-4  { margin-bottom:4px; }
        .u-mb-6  { margin-bottom:6px; }
        .u-mb-8  { margin-bottom:8px; }
        .u-mb-10 { margin-bottom:10px; }
        .u-mb-12 { margin-bottom:12px; }
        .u-mb-14 { margin-bottom:14px; }
        .u-mb-16 { margin-bottom:16px; }
        /* Padding */
        .u-p-4-8 { padding:4px 8px; }
        .u-p-6-8 { padding:6px 8px; }
        .u-p-8   { padding:8px; }
        .u-p-12  { padding:28px; }
        .u-p-20  { padding:20px; }
        /* Layout */
        .u-w-full { width:100%; }
        .u-pos-rel    { position:relative; }
        .u-pos-static { position:static; }
        .u-col-span-full { grid-column:1/-1; }
        .u-flex-gap-4 { display:flex; gap:4px; }
        .u-flex-gap-6 { display:flex; gap:6px; }
        .u-flex-gap-8 { display:flex; gap:8px; }
        .u-flex-gap-3-c { display:flex; gap:3px; align-items:center; }
        .u-flex-ac  { display:flex; align-items:center; }
        .u-flex-sb  { display:flex; justify-content:space-between; align-items:center; }
        /* Misc */
        .u-dim { color:#000000; }
        .u-dim-9 { font-size: var(--fs-xs); color:var(--text-tertiary); }
        .u-dim-8 { font-size: var(--fs-xs); color:var(--text-tertiary); }
        .u-lbl-ul { font-size: var(--fs-xs); font-weight:700; color:var(--text-light); }
        .u-scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }
        .u-cb-14 { width:14px; height:14px; cursor:pointer; flex-shrink:0; }
        .u-cb-16 { width:16px; height:16px; cursor:pointer; flex-shrink:0; }
        .u-color-swatch { width:28px; height:28px; border:none; padding:0; cursor:pointer; }
        .u-code-text { font-size: var(--fs-xs); color:var(--text-light); font-family:monospace; }
        .u-input-sm { min-height:34px; padding:6px 8px; }
        .u-title-md { font-size: var(--fs-md); font-weight:800; color:var(--text); }

        /* Sayfalama (pager) — izin ve mazot tabloları */
        .pager { display:flex; justify-content:center; align-items:center; gap:4px; padding:8px; border-top:1px solid var(--border); background:var(--bg); flex-wrap:wrap; }
        .pager-btn { min-width:32px; height:32px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; background:var(--card-bg); color:var(--text); border:1px solid var(--border); border-radius:6px; font-size: 0.6875rem; font-weight:700; text-decoration:none; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
        .pager-btn:hover { background:var(--primary-accent); color:var(--button-text,#111827); border-color:var(--primary-accent); }
        .pager-btn.active { background:var(--primary-accent); color:var(--button-text,#111827); border-color:var(--primary-accent); }
        .pager-btn.disabled { opacity:0.4; pointer-events:none; cursor:not-allowed; }
        .pager-info { font-size: 0.6875rem; color:var(--text-light); font-weight:600; padding:0 8px; }

        /* Sayfalama (pagination) */
        .pg-wrap { display:flex; justify-content:center; align-items:center; gap:4px; padding:8px; flex-wrap:wrap; font-size: 0.6875rem; }
        .pg-btn { min-width:32px; height:32px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; background:var(--card-bg); border:1px solid var(--border); border-radius:6px; cursor:pointer; font-weight:700; color:var(--text); text-decoration:none; transition:all 0.15s; font-size: 0.6875rem; }
        .pg-btn:hover { background:var(--primary-accent); color:var(--button-text,#111827); border-color:var(--primary-accent); }
        .pg-btn.active { background:var(--primary-accent); color:var(--button-text,#111827); border-color:var(--primary-accent); }
        .pg-btn.disabled { opacity:0.4; cursor:not-allowed; pointer-events:none; }
        .pg-info { font-size: var(--fs-xs); color:var(--text-tertiary); padding:0 6px; font-weight:600; }

        .d-opr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
        .d-opr-item { padding: 8px 0; text-align: center; }
        .d-opr-item:nth-child(odd) { border-right: 1px solid var(--border); }
        .d-opr-item:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
        .d-opr-label { font-size: var(--fs-xs); font-weight: 700; color: var(--text-light); margin-bottom: 1px; }
        .d-opr-val { font-size: var(--fs-lg); font-weight: 800; line-height: 1.1; }

        .d-chart-wrap { position: relative; height: 130px; }

        .d-list-row { display: flex; align-items: center; padding: 5px 12px; border-bottom: 1px solid var(--border); font-size: 0.6875rem; gap: 6px; }
        .d-list-row:last-child { border-bottom: none; }
.kcm-ui-core #view-dashboard .d-list-row {
    min-height: 22px !important;
}
        .d-list-name { flex: 1; font-weight: 600; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.6875rem; }
        .d-list-bar { height: 5px; border-radius: 3px; background: var(--primary-accent); flex-shrink: 0; transition: width 0.3s; }
        .d-list-val { min-width: 22px; text-align: right; font-weight: 800; color: var(--text); font-size: 0.6875rem; }
        .d-list-footer { display: flex; justify-content: space-between; padding: 6px 12px; background: var(--bg); font-weight: 800; font-size: 0.6875rem; border-top: 1px solid var(--border); }
        .d-list-title { font-size: var(--fs-base); font-weight: 800; color: var(--text); padding: 10px 12px 6px; }
        
        .card { background:var(--card-bg); border-radius:var(--radius-lg); box-shadow:var(--card-shadow); padding:13px 14px; margin-bottom:12px; border:1px solid var(--border); }
        .card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; border-bottom:1px solid var(--border); padding-bottom:10px; }
        .card-title { font-size: 0.875rem; font-weight:700; color:var(--text); margin:0; }

        .metric-card { background:var(--card-bg); padding:8px 10px; border-radius:var(--radius); border:1px solid var(--border); }
        .metric-card.m-blue { border-left-color: #3b82f6; } .metric-card.m-orange{ border-left-color: var(--primary-accent); } .metric-card.m-teal { border-left-color: #4B5563; }
        .metric-info h3 { margin:0 0 2px; font-size: 1rem; font-weight:800; color:var(--text); line-height:1; }
        .metric-info p  { margin:0; color:var(--text-light); font-size: var(--fs-xs); font-weight:700; }
        
        .dash-body { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        .grid-container { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
        .col { display:flex; flex-direction:column; gap:6px; }
        
        .form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
        .form-group label { font-size: 0.6875rem; font-weight:700; color:var(--text-light); }
        .form-control { padding:7px 12px; border:var(--control-border-width,1px) solid var(--control-border-color,var(--border)); border-radius:var(--control-radius,var(--radius)); font-size: var(--fs-base); background:var(--bg); width:100%; box-sizing:border-box; color:var(--text); min-height:36px; font-family: var(--font-main); transition:0.2s; }
        .form-control:focus { border-color:var(--primary-accent); outline:none; background:var(--card-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-accent) 15%, transparent); }
        textarea.form-control { min-height:60px; resize:vertical; }
        .readonly { background:var(--bg) !important; pointer-events:none; }
        .span-2 { grid-column:span 2; }

        .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 16px; border-radius:var(--radius); font-weight:700; cursor:pointer; border:none; font-size: var(--fs-base); min-height:44px; font-family: var(--font-main); transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s; text-decoration:none; -webkit-tap-highlight-color:transparent; }
        .btn:active { transform:scale(0.97); }
        .btn-primary  { background:var(--primary-accent); color:var(--primary-text); }
        .btn-primary:active  { background:var(--primary-strong); }
        .btn-secondary{ background:var(--bg); color:var(--text); border:1px solid var(--border); }
        .btn-secondary:active { background:color-mix(in srgb, var(--text) 8%, var(--bg)); }
        .btn-success  { background:var(--green); color:#FFFFFF; }
        .btn-warning  { background:#D97706; color:#FFFFFF; }
        .btn-danger   { background:var(--red); color:#FFFFFF; }
        
        .btn-sil { background: var(--bg); color: #4B5563; border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; transition: all 0.2s ease; gap: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); min-height: var(--btn-height-xs); }
        .btn-sil:hover { background: #FEE2E2; color: #DC2626; border-color: #FCA5A5; }
        .plist-item:active, .plist-item:hover { background:var(--bg); }
        .plist-item:last-of-type { border-bottom:none; }
        .combo-list { position:absolute; left:0; right:0; top:100%; z-index:var(--z-dropdown); background:var(--card-bg); border:var(--control-border-width,1px) solid var(--control-border-color,var(--border)); border-top:none; border-radius:0 0 var(--control-radius,var(--radius)) var(--control-radius,var(--radius)); max-height:220px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.12); -webkit-overflow-scrolling:touch; }
        .combo-list .plist-item { padding:9px 12px; border-bottom:1px solid var(--border); font-size: var(--fs-sm); font-weight:600; cursor:pointer; }
        .combo-empty { padding:12px; text-align:center; color:var(--text-tertiary); font-size: 0.6875rem; }

        .bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:calc(56px + var(--sab)); padding-bottom:var(--sab); background:var(--card-bg); border-top:1px solid var(--border); z-index:var(--z-header); justify-content:space-around; align-items:flex-start; padding-top:6px; padding-left:0; padding-right:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
        .nav-item { display:flex; flex-direction:column; align-items:center; color:var(--text-tertiary); font-size: 0.5625rem; cursor:pointer; flex:1; min-width:0; font-weight:600; padding:2px 1px; text-align:center; min-height:44px; justify-content:center; -webkit-tap-highlight-color:transparent; white-space:nowrap; position:relative; transition:color 0.15s; }
        .nav-item .icon { font-size: var(--fs-lg); line-height:1; margin-bottom:2px; transition:transform 0.15s; }
        .nav-item .nav-label { overflow:hidden; text-overflow:ellipsis; max-width:100%; }
        .nav-item.active { color:var(--primary-accent); font-weight:700; }
        .nav-item.active::before { content:''; position:absolute; top:0; left:25%; right:25%; height:2px; background:var(--primary-accent); border-radius:0 0 2px 2px; }
        .nav-item:active .icon { transform:scale(0.88); }

        .view-section { display:none; }
        .view-section.active { display:block; animation:fadeIn var(--anim, 200ms) ease; min-height:calc(100dvh - 120px); padding-top:8px; }
        @keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
        @media (prefers-reduced-motion: reduce) { .view-section.active { animation:none; } }

        .ios-group { background:var(--card-bg); border-radius:var(--radius); overflow:hidden; margin-bottom:8px; border:1px solid var(--border); }
        .ios-group-title { font-size: 0.6875rem; font-weight:700; color:var(--text-light); padding:8px 12px 5px; background:var(--bg); border-bottom:1px solid var(--border); }
        .ios-row { display:flex; align-items:center; padding:6px 12px; border-bottom:1px solid var(--border); font-size: var(--fs-sm); min-height:32px; }
        .ios-row.compact { padding:5px 12px; min-height:28px; font-size: 0.6875rem; }
        .ios-row:last-child { border-bottom:none; }
        .ios-row[onclick]:active { background:var(--bg); }
        .ios-row-label { color:var(--text-light); flex-shrink:0; font-size: 0.6875rem; font-weight:600; min-width:90px; }
        .ios-row-value { font-weight:600; font-size: var(--fs-sm); color:var(--text); text-align:left; flex:1; word-break:break-word; }

        .personel-avatar { width:60px; height:76px; border-radius:var(--radius); background:var(--bg); flex-shrink:0; overflow:hidden; border:1px solid var(--border); }
        .personel-avatar img { width:100%; height:100%; object-fit:cover; }
        .personel-avatar-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size: var(--fs-2xl); color:var(--text-tertiary); }
        .dept-badge { display:inline-block; background:#FEF3C7; color:#D97706; font-size: var(--fs-xs); font-weight:700; padding:4px 8px; border-radius:var(--radius); margin-right:4px; border:1px solid #FDE68A; }
        .gorev-badge { display:inline-block; background:var(--bg); color:var(--text-light); font-size: var(--fs-xs); font-weight:600; padding:4px 8px; border-radius:var(--radius); border:1px solid var(--border); }

        .op-card-list { display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--card-bg); }
        .op-day-row { display:flex; align-items:center; background:var(--card-bg); padding:5px 12px; border-bottom:1px solid var(--border); cursor:pointer; min-height:40px; transition:background 0.12s; }
        .op-day-row:hover { background:color-mix(in srgb, var(--primary-accent) 4%, var(--card-bg)); }
        .op-day-row:active, .op-day-row.selected { background:color-mix(in srgb, var(--primary-accent) 8%, var(--card-bg)); }
        .op-day-row:last-child { border-bottom:none; }
        .op-day-date { min-width:44px; display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
        .op-day-num { font-size: var(--fs-md); font-weight:800; color:var(--text); line-height:1.1; }
        .op-day-name { font-size: 0.5625rem; font-weight:600; color:var(--text-light); text-transform:uppercase; letter-spacing:0.03em; }
        .op-day-bars { padding:0 10px; display:flex; flex-direction:column; gap:4px; justify-content:center; }
        .op-bar-row { display:flex; align-items:center; gap:5px; }
        .op-bar { height:6px; border-radius:3px; min-width:5px; }
        .op-bar.cfs { background:var(--primary-accent); }
        .op-bar.sun { background:var(--text-tertiary); }
        .op-bar-lbl { font-size: var(--fs-xs); font-weight:700; }
        .op-bar-lbl.cfs { color:var(--primary-accent); }
        .op-bar-lbl.sun { color:var(--text-light); }
        .op-day-nil { font-size: 0.6875rem; color:var(--border); }
        .op-day-total { font-size: 1rem; font-weight:800; color:var(--text); min-width:30px; text-align:right; }
        .op-day-total-nil { color:var(--text-tertiary); }
        .op-detay-grp-lbl { font-size: 0.5625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:5px; }
        .op-detay-card { border-radius:var(--radius); padding:8px 10px; border:1px solid var(--border); }
        .op-detay-card-lbl { font-size: 0.5625rem; font-weight:700; color:var(--text-light); margin-bottom:2px; }
        .op-detay-card-val { font-size: 1.0625rem; font-weight:800; color:var(--text); line-height:1; }
        .op-detay-sum { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; border-top:1px solid var(--border); padding-top:10px; margin-top:4px; }
        .op-detay-sum-item { text-align:center; padding:7px 4px; border-radius:var(--radius); border:1px solid var(--border); }
        .op-detay-sum-lbl { font-size: 0.5625rem; font-weight:700; }
        .op-detay-sum-val { font-size: 1.25rem; font-weight:800; line-height:1.1; }

        .compact-table { width:100%; border-collapse:collapse; font-size: 0.7812rem; background:var(--card-bg); table-layout:auto; text-align:left; }
        .compact-table th, .compact-table td { padding:5px 7px; font-size: var(--fs-sm); border-bottom:1px solid var(--border); word-wrap: break-word; overflow-wrap: break-word; white-space: normal; line-height: 1.3; }
        .compact-table th { background:var(--bg); font-weight:700; color:var(--text-light); font-size: 0.6875rem; border-bottom:1px solid var(--border); }
        .compact-table tbody tr { transition: background 0.1s; }
        .compact-table tbody tr:hover { background: color-mix(in srgb, var(--primary-accent) 8%, var(--card-bg)); }
        
        
        .modal { display:none; position:fixed; z-index:var(--z-modal); left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.55); align-items:center; justify-content:center; -webkit-overflow-scrolling:touch; }
        .modal.active { display:flex; }
        .modal.centered-modal { align-items:center !important; justify-content:center !important; }
        .modal.centered-modal.active { display:flex !important; }

        /* Desktop modal */
        .modal-content {
            background:var(--card-bg);
            padding:20px;
            border-radius:var(--radius) var(--radius) 0 0;
            width:100%; max-width:500px;
            position:relative;
            padding-bottom:calc(20px + var(--sab));
            max-height:92dvh;
            overflow-y:auto;
            box-shadow:0 -2px 20px rgba(0,0,0,0.12);
        }
        @media (min-width:769px) {
            .modal-content { border-radius:var(--radius); max-width:520px; box-shadow:0 8px 32px rgba(0,0,0,0.18); margin-bottom:0; }
        }

        /* Mobil: gerçek bottom sheet */
        @media (max-width:768px) {
            .modal:not(.centered-modal) { align-items:flex-end; }
            .modal:not(.centered-modal) .modal-content {
                border-radius:16px 16px 0 0 !important;
                max-width:100% !important;
                width:100% !important;
                padding-top:12px !important;
                padding-bottom:calc(16px + var(--sab)) !important;
                max-height:88dvh !important;
                box-shadow:0 -4px 24px rgba(0,0,0,0.16) !important;
            }
            .modal:not(.centered-modal).active .modal-content { animation:slideUp var(--anim,200ms) cubic-bezier(0.32,0.72,0,1); }
            /* drag handle */
            .modal:not(.centered-modal) .modal-content::before {
                content:''; display:block; width:36px; height:4px;
                background:color-mix(in srgb, var(--text) 18%, transparent);
                border-radius:2px; margin:0 auto 12px; flex-shrink:0;
            }
        }

        @keyframes slideUp { from { transform:translateY(48px); opacity:0; } to { transform:translateY(0); opacity:1; } }
        @media (prefers-reduced-motion: reduce) { .modal-content { animation:none !important; } }

        .centered-modal .modal-content { border-radius:var(--radius) !important; max-width:460px; padding:20px; padding-bottom:calc(20px + var(--sab,0px)); margin:0; pointer-events:auto; width:calc(100% - 32px); box-shadow:0 8px 32px rgba(0,0,0,0.2); }
        [data-modal-style="glass"] .modal-content { background:var(--card-bg) !important; }
        .close-btn { position:absolute; right:11px; top:10px; cursor:pointer; color:var(--text-light); width:32px; height:32px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-weight:700; font-size: 1rem; transition:0.15s; z-index:10; }
        .close-btn:active { background:var(--border); transform:scale(0.93); }

        .toast-container { position:fixed; top:calc(8px + var(--sat)); left:50%; transform:translateX(-50%); z-index:var(--z-toast); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; width:92%; max-width:380px; }
        .toast { background:rgba(30,30,30,0.95); color:#FFFFFF; padding:14px 16px; border-radius:8px; font-size: var(--fs-base); font-weight:500; display:flex; align-items:flex-start; gap:12px; width:100%; box-shadow:0 2px 8px rgba(0,0,0,0.15); pointer-events:auto; opacity:0; transition:opacity 0.2s ease; }
        .toast.show { opacity:1; }
        .toast-app-icon { width:36px; height:36px; border-radius:8px; background:var(--primary-accent); display:flex; align-items:center; justify-content:center; font-size: var(--fs-lg); flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
        .toast-app-icon.error { background:#DC2626; }
        .toast-body { flex:1; min-width:0; }
        .toast-app-name { font-size: 0.6875rem; font-weight:700; color:rgba(255,255,255,0.6); margin-bottom:2px; }
        .toast-msg { font-size: var(--fs-base); font-weight:500; color:#fff; line-height:1.4; }
        .toast-time { font-size: var(--fs-xs); color:rgba(255,255,255,0.4); flex-shrink:0; margin-top:2px; }

        .dark-chart-title { font-size: 0.6875rem; font-weight: 700; color: var(--text-light); margin-bottom: 4px; display: block; }

        @media (min-width:1025px) {
    .app-header { display:none !important; }
    /* FIX10: Sabit #F8FAFC yerine CSS değişkeni — tema sidebar override'ları artık çalışır */
    .sidebar {
        display:flex !important;
        width:220px !important;
        background:var(--sidebar-bg) !important;
        border-right:1px solid rgba(255,255,255,0.06) !important;
        padding-top:0 !important;
    }
    .logo-area { border-bottom:1px solid rgba(255,255,255,0.06) !important; }
    .menu-item { margin:1px 8px !important; border-radius:8px !important; }
    .sidebar-footer { border-top:1px solid rgba(255,255,255,0.06) !important; }
    .main-content {
        padding-top:2px !important;
        padding-bottom:16px !important;
        padding-left:20px !important;
        padding-right:20px !important;
        background:var(--bg) !important;
        flex:1 !important;
        height:100dvh !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
    }
    .app-container { height:100dvh !important; overflow:hidden !important; }
    .bottom-nav { display:none !important; }

    .view-section.active { min-height:calc(100vh - 32px) !important; }
    #view-muhasebe.active { min-height:auto !important; }
    .pkh-back-fab { bottom: 24px; }
    .personel-list-table-wrap { max-height: calc(100dvh - 300px) !important; overflow-y: auto; }
    #view-izinler.active { display:block; }
}
        /* İzin/Rapor özet chip'leri (mobil öncelikli) */
        .izin-chip-card { display:flex; flex-direction:column; gap:8px; }
        .izin-chip-group { display:flex; flex-direction:column; gap:5px; }
        .izin-chip-lbl { font-size: var(--fs-xs); font-weight:800; color:var(--text-light); text-transform:uppercase; letter-spacing:.04em; }
        .izin-chip-row { display:flex; gap:6px; flex-wrap:wrap; }
        .izin-chip { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:4px 9px; border-radius:var(--radius); font-size: 0.6875rem; font-weight:700; border:1px solid; white-space:nowrap; }
        .izin-chip .izin-chip-ad { color:var(--text); }
        .izin-chip .izin-chip-gun { font-weight:800; }
        .izin-chip.chip-rapor { background:#FEE2E2; border-color:#FECACA; }
        .izin-chip.chip-rapor .izin-chip-gun { color:#B91C1C; }
        .izin-chip.chip-izin { background:#DCFCE7; border-color:#BBF7D0; }
        .izin-chip.chip-izin .izin-chip-gun { color:#15803D; }
        /* Tablet: 769–900px — slim sidebar (ikon only) */
        @media (min-width:769px) and (max-width:1024px) {
            .app-container { flex-direction:row !important; }
            .sidebar { display:flex !important; width:60px !important; min-width:60px !important; overflow:hidden !important; }
            .sidebar .logo-area { padding:10px 0 !important; justify-content:center !important; }
            .sidebar .logo-area img { width:32px !important; height:auto !important; }
            .sidebar .logo-area-text, .sidebar .logo-area-sub, .sidebar .sidebar-section-title,
            .sidebar .menu-item span:not(.mi-icon), .sidebar .sidebar-user-name,
            .sidebar .sidebar-user-role, .sidebar .sidebar-user-avatar { display:none !important; }
            .sidebar .menu-item { justify-content:center !important; padding:10px 0 !important; margin:3px 6px !important; }
            .sidebar .mi-icon, .sidebar .icon { width:auto !important; }
            .sidebar .sidebar-footer { padding:8px 0 !important; justify-content:center !important; }
            .main-content { padding:12px 16px !important; padding-bottom:16px !important; }
            .bottom-nav { display:none !important; }
            .app-header { display:none !important; }
        }

        @media (max-width:1024px) {
            .app-container { flex-direction:column; } .sidebar { display:none; } .bottom-nav { display:flex; }
            .grid-container { grid-template-columns:1fr 1fr; } .span-2 { grid-column:1 / -1; } .dash-body { grid-template-columns:1fr; }
            .main-content { padding:8px; padding-top:calc(8px + var(--sat, 0px)); padding-bottom:calc(64px + var(--sab, 0px) + 12px); }
            .compact-table th, .compact-table td { padding:4px 8px; font-size: var(--fs-xs); }
            .compact-table th { font-size: var(--fs-xs); }
            .form-control { min-height:42px; padding:10px 12px; font-size: 0.875rem; }
            .form-group { margin-bottom:8px; }
            .form-group label { font-size: var(--fs-xs); }
            .btn { min-height:44px; font-size: var(--fs-base); padding:10px 14px; }
            .card { padding:8px; }
            .card-title { font-size: var(--fs-base); }
            .card-header { margin-bottom:8px; padding-bottom:8px; }
            .modal-content { padding:16px; padding-bottom:calc(16px + var(--sab)); }
            .centered-modal .modal-content { padding:16px; padding-bottom:calc(16px + var(--sab, 0px)); }
            /* Inline grid 3-sütun → 2-sütun mobilde */
            .ayar-grid-3 { grid-template-columns:1fr 1fr !important; }
            .ayar-grid-2 { grid-template-columns:1fr !important; }
            /* Tablo scroll wrapper */
            .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
        }
        @media (max-width:480px) {
            body { font-size: calc(11px * var(--font-scale) / 100); }
            .ayar-grid-3 { grid-template-columns:1fr !important; }
            .d-row-4, .d-row-3, .d-row-2 { grid-template-columns:1fr 1fr; }
            .grid-container { grid-template-columns:1fr; }
            .nav-item { font-size: var(--fs-2xs); padding:2px 0; }
            .nav-item .icon { font-size: var(--fs-md); }
            .modal-content { padding:12px; padding-bottom:calc(12px + var(--sab)); }
            .centered-modal .modal-content { padding:12px; padding-bottom:calc(12px + var(--sab, 0px)); }
        }
        
        /* Ekipman detay modal */
        .ekp-detail-foto { width:100%; max-height:200px; object-fit:cover; border-radius:8px; margin-bottom:12px; }
        .ekp-detail-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size: var(--fs-sm); }
        .ekp-detail-label { color:var(--text-light); font-weight:600; }
        .ekp-detail-val { color:var(--text); font-weight:700; text-align:right; }

/* Ayarlar accordion — yapısal/renk kuralları tek kaynak: #view-ayarlar bloğu (v7/v8, aşağıda).
   Bu üstteki tanımlar hep o bloktaki daha spesifik #view-ayarlar seçicileri tarafından eziliyordu
   (ölü kod — denetimde bulunup kaldırıldı, 2026-08-27); .ayar-kaydet-bar ve .compact-form-group
   canlı kaldı çünkü bunlar Ayarlar dışında da (ör. modallarda) kullanılıyor. */
                .ayar-kaydet-bar { margin-top:12px; padding:10px; background:var(--card-bg); border:2px solid var(--primary-accent); border-radius:var(--radius); text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
                .ayar-kaydet-bar button { padding:10px 24px; width:100%; font-size: var(--fs-base); font-weight:800; }
                .compact-form-group { margin-bottom:6px; }
                .compact-form-group label { font-size: 0.6562rem; font-weight:600; color:var(--text-light); margin-bottom:3px; display:block; }
                .compact-form-group .form-control { min-height:30px; padding:4px 8px; font-size: 0.7188rem; }

/* PDKS mini kartlar (detay modal) */
.pdks-mini-card { text-align:center; padding:3px 2px; border-radius:6px; }
.pdks-mc { text-align:center; padding:2px 2px; border-radius:4px; min-width:0; }
.pdks-mc .pdks-mc-v { font-size: var(--fs-base); font-weight:800; line-height:1.1; color:var(--text); }
.pdks-mc-v { font-size: 0.875rem; font-weight:800; line-height:1.1; }
.pdks-mc-l { font-size: 0.5625rem; font-weight:700; color:var(--text-light); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* ===== v6 App Görünümü / Kompakt Ayarlar =====
   Mevcut PHP akışını değiştirmez; sadece style layer. */
input, select, textarea { border-radius: var(--control-radius, var(--radius)); }
select.form-control { appearance:auto; }
button, .btn, .nav-item, .menu-item, [onclick] { touch-action: manipulation; }

/* Modal form kontrolleri — tüm ekran boyutlarında card-bg (beyaz/koyu tema uyumlu) */
.modal .form-control,
.modal input:not([type="hidden"]),
.modal select,
.modal textarea { background: var(--card-bg); }

@media (max-width: 1024px) {
    html, body { width:100%; max-width:100vw; overflow-x:hidden; }
    .app-container { min-height:100dvh; width:100%; max-width:100vw; }
    .main-content { width:100%; max-width:100vw; overflow-x:hidden; }
    .view-section.active { min-height:calc(100dvh - 114px); }
    .modal { padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right)); }
    .modal.active .form-control,
    .modal.active input:not([type="hidden"]),
    .modal.active select,
    .modal.active textarea {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 1rem;
    }
}

#view-ayarlar .ayar-acc-body .compact-form-group { margin-bottom:4px; }
#view-ayarlar .ayar-acc-body .form-control { min-height:28px; }
#view-ayarlar .ayar-acc-body .btn { min-height:30px; }
#view-ayarlar .ayar-kaydet-bar { position:static; bottom:auto; z-index:auto; }
#view-ayarlar .acc-icon { background:transparent !important; box-shadow:none !important; }

/* Touch hedefleri: başlık büyük kalsın, açılan içerik compact olsun. */
#view-ayarlar .ayar-acc-head { touch-action:manipulation; }
#view-ayarlar .theme-preset-card { touch-action:manipulation; }


/* ===== v7 — Tema kayıt düzeltmesi & non-floating kayıt barı ===== */
#view-ayarlar .ayar-kaydet-bar {
    position: static !important;
    margin: 14px 0 18px !important;
    padding: 8px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}
#view-ayarlar .ayar-kaydet-bar .btn {
    width: 100%;
    min-height: 38px;
    border-radius: var(--control-radius, var(--radius));
}
#view-ayarlar .theme-preset-manual {
    border-style: dashed !important;
}
#view-ayarlar .theme-preset-card input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-accent);
}
#view-ayarlar .settings-preset-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
@media (max-width: 1024px) {
    #view-ayarlar .settings-preset-grid { grid-template-columns: 1fr !important; }
    #view-ayarlar .ayar-acc-body { max-height: min(68dvh, 560px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
    #view-ayarlar .ayar-kaydet-bar { margin-bottom: calc(72px + var(--sab)) !important; }
}


/* ===== v8 — index.php içinden taşınan responsive/talep/ayarlar stilleri ===== */
        html, body { margin:0; padding:0; max-width:100vw; overflow-x:hidden; }
        .app-container { display:flex; width:100%; max-width:100vw; overflow-x:hidden; box-sizing:border-box; }
        .main-content { flex:1; min-width:0; width:100%; max-width:100%; box-sizing:border-box; }
        .view-section, .card { width:100% !important; max-width:100% !important; box-sizing:border-box; }
        .u-scroll-x, .personel-list-table-wrap { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
        @media (min-width:1025px) {
            .personel-list-table .sticky-th,
            .personel-list-table .sticky-td { position:sticky; left:0; z-index:2; background:var(--card-bg); }
            .personel-list-table .sticky-th { background:#F3F4F6; z-index:3; }
            .personel-list-table .sticky-td::after,
            .personel-list-table .sticky-th::after { content:''; position:absolute; right:-1px; top:0; bottom:0; width:1px; background:var(--border); }
        }

        @media (max-width: 1024px) {
            body { padding-top:0 !important; }
            .app-container, .main-content {
                margin-top:0 !important;
                padding-top:env(safe-area-inset-top, 0) !important;
            }
            .app-header { position:relative !important; top:0; }
        }
        /* Personel listesi — mobil/desktop satır gösterimi */
        .per-desktop-head { display:none; }
        .per-desktop-row { display:none; }
        @media(min-width:1025px) {
            .per-desktop-head { display:table-header-group; }
            .per-desktop-row { display:table-row; }
            .per-mobile-head { display:none !important; }
            .per-mobile-row { display:none !important; }
        }

        /* Ekipman Excel export butonu — sadece desktop */
        .ekp-excel-btn { display:none; }
        @media(min-width:1025px) { .ekp-excel-btn { display:inline-flex !important; align-items:center; } }

        /* Talep girişi — genel tasarıma uyumlu, mobilde tam oturan yapı */
        .talep-modal-content { background:color-mix(in srgb, var(--primary-accent) 5%, var(--card-bg)); width:min(340px, calc(100vw - 32px)) !important; max-width:calc(100vw - 32px) !important; max-height:calc(100dvh - 24px); overflow-y:auto; padding:10px 12px !important; box-sizing:border-box; }
        .talep-form-grid { display:grid; gap:12px; margin-bottom:8px; }
        .talep-two-col { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
        .talep-modal-content label { color:var(--text); font-weight:700; display:block; margin-top:4px; margin-bottom:2px; font-size: 0.6875rem; }
        .talep-modal-content .u-mb-12, .talep-modal-content .u-mb-10, .talep-modal-content .u-mb-14 { margin-bottom:6px; }
        .talep-modal-content .form-control { min-height:34px !important; padding:6px 8px !important; font-size: var(--fs-sm) !important; }
        .talep-modal-content textarea.form-control { min-height:48px !important; }
        .talep-modal-content .form-control,
        .talep-unit-select,
        .talep-table-wrap .form-control { min-height:36px; font-size: var(--fs-base); border:1px solid var(--border); border-radius:var(--radius); background:var(--card-bg); color:var(--text); box-sizing:border-box; }
        .talep-type-row .talep-type-btn { padding:10px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); color:var(--text); transition:var(--anim); }
        .talep-type-row .talep-type-btn.active { border-color:var(--primary-accent); background:var(--bg); color:var(--primary-accent); }
        .talep-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:8px; }
        .talep-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
        .talep-table { min-width:560px; }
        .talep-action-btn { padding:3px 7px; min-height:24px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card-bg); color:var(--text); font-weight:700; cursor:pointer; }
        #talepForm .form-control,
        #talepForm select,
        #talepForm textarea { margin-top:4px; }
        #talepForm button:not(.talep-type-btn) { margin-top:8px; }
        @media (max-width: 768px) {
            .modal.centered-modal:not(#pdksDetayModal) { overflow-y:auto; }
            .talep-modal-content { max-height:calc(100dvh - 16px); border-radius:var(--radius) !important; margin:0 auto; }
            .talep-two-col { grid-template-columns:1fr; gap:8px; }
            .talep-type-row { gap:6px !important; }
            .talep-type-row button { padding:9px 6px !important; font-size: 0.6875rem !important; }
            .talep-summary-grid { grid-template-columns:repeat(0,minmax(0,1fr)); }
            .talep-subsummary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
        }


        /* Ayarlar ekranı */
        #view-ayarlar { background:var(--settings-surface); border-radius:var(--radius); padding:10px; min-height:calc(100dvh - 32px); }
        #view-ayarlar .card { background:var(--card-bg); border:1px solid color-mix(in srgb, var(--text) 7%, transparent); box-shadow:var(--card-shadow); }
        .settings-ios-hero { margin:2px 0 12px; }
        .settings-ios-hero h1 { margin:0 0 10px; font-size: var(--fs-lg); line-height:1.2; font-weight:800; color:var(--text); }
        .settings-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
        .settings-search { display:flex; align-items:center; gap:8px; min-height:42px; border-radius:18px; background:var(--settings-muted); color:var(--text-tertiary); padding:0 13px; box-sizing:border-box; border:1px solid color-mix(in srgb, var(--text) 5%, transparent); }
        .settings-search input { width:100%; border:0 !important; outline:0; background:transparent !important; color:var(--text); font-size: var(--fs-md); font-family:var(--font-main); min-height:40px !important; padding:0 !important; box-shadow:none !important; }
        .settings-search input::placeholder { color:var(--text-tertiary); }
        .settings-note { margin-top:8px; color:var(--text-light); font-size: var(--fs-sm); line-height:1.42; }
        #view-ayarlar .ayar-acc { margin:0 0 9px; background:var(--card-bg); border:1px solid color-mix(in srgb, var(--text) 6%, transparent); border-radius:var(--radius); overflow:hidden; transition:border-color var(--anim); }
        #view-ayarlar .ayar-acc:hover { border-color:var(--border); }
        #view-ayarlar .ayar-acc-head { min-height:62px; padding:9px 12px !important; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; user-select:none; border:0 !important; background:var(--card-bg) !important; }
        #view-ayarlar .ayar-acc-head > span:first-child { display:grid; grid-template-columns:36px 1fr; column-gap:10px; align-items:center; min-width:0; color:var(--text); font-size: 0.875rem; line-height:1.12; font-weight:800; }
        #view-ayarlar .acc-icon { width:36px; height:36px; border-radius:0; display:inline-flex; align-items:center; justify-content:center; color:var(--primary-accent); background:transparent !important; box-shadow:none !important; font-size: 1.3125rem; grid-row:1 / span 2; filter:saturate(.78); opacity:.92; }
        #view-ayarlar .acc-sub { display:block; margin-top:3px; color:var(--text-light); font-weight:600; font-size: 0.6875rem; letter-spacing:0; line-height:1.4; }
        #view-ayarlar .arr { flex:0 0 auto; width:24px; height:24px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size: var(--fs-base); font-weight:900; color:var(--primary-accent); background:color-mix(in srgb, var(--primary-accent) 9%, transparent); transition:transform var(--anim); }
        #view-ayarlar .ayar-acc.open .arr { transform:rotate(90deg); }
        #view-ayarlar .ayar-acc-body { padding:10px 12px 12px !important; border-top:1px solid color-mix(in srgb, var(--text) 7%, transparent); display:none; background:var(--bg); }
        #view-ayarlar .ayar-acc.open .ayar-acc-body { display:block; }
        #view-ayarlar .ayar-acc-body > div { gap:6px !important; }
        #view-ayarlar .ayar-section { background:color-mix(in srgb,var(--card-bg,#fff) 60%,transparent); border:1px solid color-mix(in srgb,var(--text) 9%,transparent); border-radius:6px; padding:8px 10px; margin-bottom:6px; }
        #view-ayarlar .ayar-section:last-child { margin-bottom:0; }
        #view-ayarlar .ayar-section-head { font-size: 0.6875rem; font-weight:700; margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent); }
        #view-ayarlar .compact-form-group { min-width:0; margin-bottom:4px; }
        #view-ayarlar .compact-form-group label, #view-ayarlar .form-group label { display:block; margin:0 0 3px; color:var(--text-light); font-size: 0.6562rem !important; font-weight:700; line-height:1.15; }
        #view-ayarlar .form-control, #view-ayarlar input[type="text"], #view-ayarlar input[type="email"], #view-ayarlar input[type="number"], #view-ayarlar select, #view-ayarlar textarea { min-height:28px; border:var(--control-border-width,1px) solid var(--control-border-color,var(--border)) !important; border-radius:var(--control-radius,var(--radius)) !important; background:#fff !important; color:var(--text) !important; padding:4px 8px !important; font-family:var(--font-main); font-size: var(--fs-sm) !important; box-sizing:border-box; box-shadow:none !important; }
        #view-ayarlar textarea { line-height:1.4; min-height:48px; padding:5px 8px !important; }
        #view-ayarlar .form-control:focus, #view-ayarlar input:focus, #view-ayarlar select:focus, #view-ayarlar textarea:focus { outline:0; border-color:var(--primary-accent) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-accent) 14%, transparent) !important; }
        #view-ayarlar .btn, #view-ayarlar button { min-height:30px; border-radius:var(--control-radius,var(--radius)) !important; font-family:var(--font-main); font-size: var(--fs-sm); box-shadow:none; }
        #view-ayarlar .btn-primary { box-shadow:none !important; }
        #view-ayarlar .btn-secondary { background:#fff !important; border:var(--control-border-width,1px) solid var(--control-border-color,var(--border)) !important; color:var(--text) !important; }
        .settings-preset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:9px; }
        .theme-preset-card { position:relative; display:flex; gap:9px; align-items:center; padding:9px; min-height:54px; border-radius:var(--radius); border:1px solid color-mix(in srgb, var(--text) 8%, transparent); background:#fff; cursor:pointer; }
        .theme-preset-card input { position:absolute; opacity:0; pointer-events:none; }
        .theme-preset-card:has(input:checked) { border-color:var(--primary-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-accent) 14%, transparent); }
        .theme-dots { display:flex; gap:4px; flex:0 0 auto; }
        .theme-dots i { width:16px; height:16px; border-radius:50%; border:1px solid rgba(15,23,42,.08); display:block; }
        .theme-preset-title { font-weight:850; font-size: 0.7812rem; color:var(--text); line-height:1.12; }
        .theme-preset-sub { margin-top:2px; font-size: 0.6562rem; color:var(--text-light); line-height:1.2; }
        .settings-filter-hidden { display:none !important; }
        .settings-control-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
        .settings-color-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:7px; }
        /* auto-fit yerine sabit repeat(3/5,..) kullanılıyordu: eleman sayısı bölüme uymayınca (5, 7, 11, 13 alan
           gibi) son satır yarı boş kalıyordu (denetimde bulunup düzeltildi, 2026-08-27). auto-fit, alan sayısı
           kadar sütun açıp mevcut satıra sığanları eşit paylaştırıyor — 3/4'lük bölümlerde görünüm aynı kalıyor. */
        .settings-style-grid { margin-top:7px; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:6px; }
        .settings-swatch-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; }

        /* Görünüm & UI — iç alt-sekmeler (18 alt-bölümü 4 gruba ayırır, tarama kolaylaşır) */
        .ayar-subtabs { display:flex; gap:4px; overflow-x:auto; margin-bottom:10px; padding-bottom:2px; scrollbar-width:none; }
        .ayar-subtabs::-webkit-scrollbar { display:none; }
        .ayar-subtab { flex:0 0 auto; appearance:none; border:1px solid color-mix(in srgb, var(--text) 10%, transparent); background:var(--card-bg); color:var(--text-light); font-family:var(--font-main); font-size: 0.7188rem; font-weight:700; padding:7px 13px; border-radius:var(--radius-pill); cursor:pointer; transition:background var(--anim), color var(--anim), border-color var(--anim); white-space:nowrap; }
        .ayar-subtab:hover { color:var(--text); border-color:color-mix(in srgb, var(--text) 18%, transparent); }
        .ayar-subtab:focus-visible { outline:2px solid var(--primary-accent); outline-offset:2px; }
        .ayar-subtab.active { background:var(--primary-accent); border-color:var(--primary-accent); color:#fff; }
        .ayar-acc-body[data-active-grup] .ayar-section[data-grup] { display:none; }
        .ayar-acc-body[data-active-grup="tipografi"] .ayar-section[data-grup="tipografi"],
        .ayar-acc-body[data-active-grup="renkler"] .ayar-section[data-grup="renkler"],
        .ayar-acc-body[data-active-grup="bilesenler"] .ayar-section[data-grup="bilesenler"],
        .ayar-acc-body[data-active-grup="efektler"] .ayar-section[data-grup="efektler"] { display:block; }

        /* Ayarlar bilgi bandı (token tabanlı — sabit hex renk yasak, DESIGN.md Theme-Token Rule) */
        .ayar-info-banner { display:flex; gap:8px; align-items:flex-start; font-size: 0.6875rem; line-height:1.42; padding:10px 12px; border-radius:var(--radius); background:color-mix(in srgb, var(--primary-accent) 8%, var(--card-bg)); border:1px solid color-mix(in srgb, var(--primary-accent) 22%, transparent); color:color-mix(in srgb, var(--primary-accent) 65%, var(--text)); }
        .ayar-info-banner b { color:var(--text); }
        @media (max-width:768px){
            #view-ayarlar { padding:8px 8px calc(76px + var(--sab)); border-radius:0; margin-left:-8px; margin-right:-8px; min-height:calc(100dvh - 8px); }
            .settings-ios-hero h1 { font-size: 1.0625rem; }
            .settings-preset-grid { grid-template-columns:1fr; }
            #view-ayarlar .ayar-acc { border-radius:var(--radius); margin-bottom:8px; }
            #view-ayarlar .ayar-acc-head { min-height:58px; padding:8px 11px !important; }
            #view-ayarlar .ayar-acc-head > span:first-child { grid-template-columns:34px 1fr; column-gap:9px; font-size: 0.8438rem; }
            #view-ayarlar .acc-icon { width:34px; height:34px; font-size: 1.25rem; }
            #view-ayarlar .ayar-acc-body { padding:9px 10px 10px !important; max-height:calc(100dvh - 210px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
            .settings-control-grid, .settings-color-grid, .settings-style-grid, .settings-swatch-grid { grid-template-columns:1fr 1fr !important; gap:6px !important; }
            #view-ayarlar .ayar-acc-body [style*="grid-template-columns:1fr 1fr 1fr 1fr"] { grid-template-columns:1fr 1fr !important; }
            #view-ayarlar .ayar-acc-body [style*="grid-template-columns:repeat(auto-fill"] { grid-template-columns:1fr !important; }
            #view-ayarlar .ayar-acc-body [style*="grid-template-columns:repeat(2"] { grid-template-columns:1fr !important; }
            #view-ayarlar .ayar-acc-body [style*="grid-template-columns:1fr 1fr 1fr"]:not(.theme-grid) { grid-template-columns:1fr 1fr !important; }
            #view-ayarlar .theme-grid { grid-template-columns:1fr 1fr !important; }
        }
        @media (max-width:480px){
            .settings-control-grid, .settings-color-grid, .settings-style-grid, .settings-swatch-grid { grid-template-columns:1fr !important; }
            .ayar-subtabs { margin-bottom:8px; }
            #view-ayarlar .form-control, #view-ayarlar select, #view-ayarlar input { font-size: var(--fs-sm) !important; }
        }
        /* Modal genişlikleri — TEK kaynak: tüm modallar standart 520px, mobilde tam ekran. Özel modal sınırları (520px) global kc-ui-core kuralından geliyor. */
        @media (max-width:1024px){
            .modal-content:not(#pdksDetayModal .modal-content):not(#pdksManuelModal .modal-content):not(#mazotModal .modal-content):not(#opModal .modal-content) { width:100% !important; max-width:100% !important; max-height:calc(100dvh - 16px) !important; }
        }
        #pdksManuelModal .modal-content,
        #mazotModal .modal-content { width:min(520px, calc(100vw - 32px)) !important; max-width:calc(100vw - 32px) !important; }
        /* Personel filtre dropdown'ları — mobilde dokunma hedefi 36px (masaüstünde kompakt 28px kalır) */
        @media (max-width:1024px){
            #perFiltreBar select { min-height:36px !important; font-size: var(--fs-sm) !important; }
        }

        #opModal .modal-content { width:min(520px, calc(100vw - 32px)) !important; max-width:calc(100vw - 32px) !important; }


/* ===== v8 — Buton kontrol ayarları, full-screen mobil modallar, sade talep tablosu ===== */
.btn {
    border-radius: var(--button-radius, var(--control-radius, var(--radius))) !important;
}
.btn-primary {
    background: var(--button-bg, var(--primary-accent)) !important;
    border: var(--button-border-width, 1px) solid var(--button-border-color, var(--button-bg, var(--primary-accent))) !important;
    color: #fff !important;
}
.btn-secondary,
.talep-type-btn,
.talep-action-btn {
    border-radius: var(--button-radius, var(--control-radius, var(--radius))) !important;
    border-width: var(--button-border-width, 1px) !important;
}

.talep-info-note {
    padding: 5px 8px;
    margin: 3px 0;
    border: 1px dashed var(--control-border-color, var(--border));
    border-radius: var(--control-radius, var(--radius));
    background: color-mix(in srgb, var(--primary-accent) 6%, var(--card-bg));
    color: var(--text-light);
    font-size: 0.6875rem;
    line-height: 1.35;
}
.talep-table-simple { min-width: 480px; }
.talep-table-simple th,
.talep-table-simple td { vertical-align: middle; }
.talep-status-pill {
    display: inline-block;
    padding: 4px 7px;
    border-radius: 6px;
    line-height: 1.15;
    white-space: nowrap;
}
.talep-approve-btn { margin-top: 4px; background:#F0FDF4 !important; color:#16a34a !important; border-color:#86efac !important; }
.talep-delete-btn { background:#FEF2F2 !important; color:#DC2626 !important; border-color:#FCA5A5 !important; }

/* ===== v9–v12 — Mobil modal & talep tablosu (konsolide edilmiş) =====
   FIX: Eski v9/v10/v11 blokları kaldırılıp v12 ile birleştirildi, çakışmalar giderildi. */
body.modal-open {
    overflow: hidden !important;
    touch-action: none;
}

@media (max-width: 1024px) {
    body:has(.modal.active) { overflow: hidden; }
    body.modal-open .bottom-nav,
    body.modal-open .app-header {
        pointer-events: none;
    }

    .modal.active {
        position: fixed !important;
        inset: 0 !important;
        width: 100dvw !important;
        height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(0,0,0,0.55) !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        z-index: var(--z-modal-top) !important;
    }

    .modal.active > .modal-content,
    .modal.centered-modal.active > .modal-content,
    .talep-modal-content,
    #talepModal.modal.active > .modal-content {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        flex-direction: column !important;
        width: 90vw !important;
        min-width: 0 !important;
        max-width: 560px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 90dvh !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        background: var(--bg) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .modal.active > .modal-content > h2 {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: flex-end !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 12px 52px 10px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        border-radius: var(--radius) var(--radius) 0 0 !important;
        background: color-mix(in srgb, var(--card-bg) 96%, var(--bg)) !important;
        color: var(--text) !important;
        font-size: 1rem !important;
        font-weight: 850 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
        box-shadow: 0 1px 0 rgba(15, 23, 42, .04) !important;
    }

    .modal.active > .modal-content > .close-btn {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border-radius: 8px !important;
        border: 1px solid color-mix(in srgb, var(--text) 10%, transparent) !important;
        background: var(--card-bg) !important;
        color: var(--text-light) !important;
        font-size: var(--fs-xl) !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        z-index: 50 !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
    }

    .modal.active > .modal-content > form,
    .modal.active > .modal-content > .modal-app-body {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        /* FIX7: overflow:visible → overflow-y:auto (form scroll desteği) */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 10px 10px 12px 10px !important;
    }

    .modal.active > .modal-content > div:not(.close-btn):not(.modal-app-body),
    .modal.active > .modal-content > table,
    .modal.active > .modal-content > .ios-group,
    .modal.active > .modal-content > .card {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .modal.active .form-group {
        margin-bottom: 8px !important;
        gap: 3px !important;
    }

    .modal.active .form-group label,
    .modal.active label {
        margin-bottom: 2px !important;
        color: var(--text-light) !important;
        font-size: 0.6875rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .modal.active .form-control,
    .modal.active input:not([type="hidden"]),
    .modal.active select,
    .modal.active textarea {
        width: 100% !important;
        min-height: 38px !important;
        padding: 8px 10px !important;
        border-radius: var(--control-radius, var(--radius)) !important;
        border: var(--control-border-width, 1px) solid var(--control-border-color, var(--border)) !important;
        background: var(--card-bg) !important;
        color: var(--text) !important;
        font-size: var(--fs-base) !important;
        font-weight: 650 !important;
        line-height: 1.15 !important;
        box-shadow: none !important;
    }

    .modal.active textarea.form-control,
    .modal.active textarea {
        min-height: 58px !important;
    }

    .modal.active .btn,
    .modal.active button:not(.close-btn) {
        min-height: 44px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        border-radius: var(--button-radius, var(--control-radius, var(--radius))) !important;
        font-size: 0.875rem !important;
        font-weight: 800 !important;
    }

    .modal.active .btn-primary {
        position: static !important;
        bottom: auto !important;
        box-shadow: none !important;
    }

    /* Operasyon modalı */
    #opModal .modal-content > form > div[style*="display:flex"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 6px !important;
    }
    #opModal .modal-content > form > div[style*="display:flex"] > div {
        width: 100% !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--border) !important;
        border-radius: calc(var(--radius) + 2px) !important;
        padding: 6px 8px !important;
    }
    #opModal .modal-content h4 {
        margin: 0 0 6px !important;
        padding-bottom: 5px !important;
        border-bottom: 1px solid var(--border) !important;
        font-size: var(--fs-sm) !important;
        color: var(--text) !important;
    }
    #opModal .modal-content .form-control {
        text-align: right !important;
        font-size: 1rem !important;
        font-weight: 850 !important;
    }
    #opModal .u-center.u-fw-800 {
        margin: 12px 0 !important;
        padding: 13px 12px !important;
        border-width: 1px !important;
        background: color-mix(in srgb, var(--primary-accent) 9%, var(--card-bg)) !important;
    }

    /* Yakıt fişi modalı */
    #mazotModal .form-group > div[style*="display:flex"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    #mazotModal .form-group > div[style*="display:flex"] button {
        width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /* Talep modal */
    .talep-modal-content,
    #talepModal .modal-content {
        width: min(340px, calc(100dvw - 32px)) !important;
        min-width: 0 !important;
        max-width: calc(100dvw - 32px) !important;
        max-height: 90dvh !important;
    }

    .talep-two-col {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .talep-info-note {
        font-size: 0.7188rem !important;
        padding: 10px 12px !important;
        margin: 4px 0 !important;
        border-radius: var(--control-radius, var(--radius)) !important;
    }

    .talep-type-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .talep-type-btn {
        min-height: 44px !important;
        padding: 10px 8px !important;
        border: 1px solid var(--control-border-color, var(--border)) !important;
        background: var(--card-bg) !important;
        color: var(--text) !important;
    }
    .talep-type-btn.active {
        background: color-mix(in srgb, var(--primary-accent) 12%, var(--card-bg)) !important;
        border-color: var(--primary-accent) !important;
        color: var(--primary-accent) !important;
    }

    /* Talep tablosu: yatay satır olarak kaydırılır */
    .talep-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius) !important;
    }
    .talep-table-simple,
    .talep-table {
        width: 100% !important;
        min-width: 480px !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
    }
    .talep-table-simple thead { display: table-header-group !important; }
    .talep-table-simple tbody { display: table-row-group !important; }
    .talep-table-simple tr { display: table-row !important; }
    .talep-table-simple th,
    .talep-table-simple td {
        display: table-cell !important;
        width: auto !important;
        padding: 3px 5px !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        border-bottom: 1px solid var(--border) !important;
        font-size: var(--fs-xs) !important;
        line-height: 1.15 !important;
    }
    .talep-table-simple td:nth-child(3),
    .talep-table-simple td:nth-child(4) {
        min-width: 100px !important;
        max-width: 180px !important;
        white-space: normal !important;
    }
    .talep-status-pill {
        padding: 2px 6px !important;
        border-radius: 6px !important;
        font-size: 0.5938rem !important;
        white-space: nowrap !important;
        max-width: none !important;
    }

    /* Kısa ekran kompaktlaştırma */
    @media (max-height: 740px) {
        .modal.active .form-group { margin-bottom: 6px !important; }
        .modal.active .form-control,
        .modal.active input:not([type="hidden"]),
        .modal.active select,
        .modal.active textarea { min-height: 34px !important; padding: 6px 8px !important; font-size: var(--fs-sm) !important; }
        .modal.active .btn,
        .modal.active button:not(.close-btn) { min-height: 34px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
        .modal.active > .modal-content > h2 { min-height: 44px !important; padding-top: 10px !important; padding-bottom: 8px !important; font-size: var(--fs-md) !important; }
        .modal.active > .modal-content > form,
        .modal.active > .modal-content > .modal-app-body { padding-top: 8px !important; padding-bottom: 8px !important; }
    }
}

@media (max-width: 480px) {
    .modal.active { padding: 5dvh 5dvw !important; }
    .modal.active > .modal-content,
    .modal.centered-modal.active > .modal-content,
    .talep-modal-content,
    #talepModal.modal.active > .modal-content {
        width: 90vw !important;
        max-width: 560px !important;
        max-height: 90dvh !important;
    }
    #mazotModal .form-group > div[style*="display:flex"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .modal.active > .modal-content > h2 {
        font-size: 1.0625rem !important;
        min-height: calc(66px + var(--sat, 0px)) !important;
        padding-left: calc(12px + var(--sal, 0px)) !important;
    }
    .modal.active > .modal-content > form,
    .modal.active > .modal-content > .modal-app-body {
        padding-left: calc(10px + var(--sal, 0px)) !important;
        padding-right: calc(10px + var(--sar, 0px)) !important;
    }
}

@media (min-width: 1025px) {
    .modal.active {
        padding: 5vh 33vw !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    .modal:not(.centered-modal) { align-items: center; padding: 24px; }
    .modal:not(.centered-modal) .modal-content,
    .modal.centered-modal .modal-content {
        border-radius: var(--radius);
        margin: 0;
        max-height: min(88vh, 760px);
    }
    #opModal .modal-content { max-width: 760px; }
    #mazotModal .modal-content,
    #talepModal .modal-content { max-width: 560px; }
    /* Sidebar arka plan/aktif renk artık FIX10 bloğundan (satır ~475) geliyor —
       burada önceden #f9fafb açık gri hardcode vardı, tema --sidebar-bg'sini
       (varsayılan koyu lacivert) hiç render etmiyordu. Kaldırıldı. */
}

/* ===== v13 — PDKS detay/düzenleme ve modal layout düzeltmeleri ===== */
@media (max-width: 1024px) {
    .modal.active:not(.confirm-modal) {
        padding: 5dvh 5dvw !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* FIX8: overflow:hidden → overflow-y:auto */
    .modal.active:not(.confirm-modal) > .modal-content,
    .modal.centered-modal.active:not(.confirm-modal) > .modal-content {
        width: 90vw !important;
        max-width: 560px !important;
        max-height: 90dvh !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .modal.active:not(.confirm-modal) > .modal-content > form,
    .modal.active:not(.confirm-modal) > .modal-content > .modal-app-body,
    .modal.active:not(.confirm-modal) > .modal-content > .pdks-detail-body {
        min-height: 0 !important;
        overflow: visible !important;
    }

    #pdksDetayModal [style*="display:flex"],
    #pdksDetayModal [style*="display: flex"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* PDKS detay düzenleme alanındaki tarih inputu */
#pdksDetayModal input[type="date"],
#pdksDetayModal .pdks-date-input,
#pdksDetayBody input[type="date"],
#pdksDetayBody .pdks-date-input {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 170px !important;
    flex: 0 0 145px !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    font-size: var(--fs-base) !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    background: var(--card-bg) !important;
    border: var(--control-border-width, 1px) solid var(--control-border-color, var(--border)) !important;
    border-radius: var(--control-radius, var(--radius)) !important;
    text-align: center !important;
    opacity: 1 !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

#pdksDetayModal input[type="time"],
#pdksDetayModal .pdks-time-input,
#pdksDetayBody input[type="time"],
#pdksDetayBody .pdks-time-input {
    min-width: 120px !important;
    flex: 1 1 120px !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: var(--text) !important;
    background: var(--card-bg) !important;
    border: var(--control-border-width, 1px) solid var(--control-border-color, var(--border)) !important;
    border-radius: var(--control-radius, var(--radius)) !important;
}

@media (max-width: 480px) {
    #pdksDetayModal input[type="date"],
    #pdksDetayModal .pdks-date-input,
    #pdksDetayBody input[type="date"],
    #pdksDetayBody .pdks-date-input {
        width: 132px !important;
        min-width: 132px !important;
        flex-basis: 132px !important;
        font-size: var(--fs-sm) !important;
    }

    #pdksDetayModal input[type="time"],
    #pdksDetayModal .pdks-time-input,
    #pdksDetayBody input[type="time"],
    #pdksDetayBody .pdks-time-input {
        min-width: 104px !important;
        flex-basis: 104px !important;
    }
}

/* PDKS detay satırları */
#pdksDetayBody table,
#pdksDetayModal table {
    width: 100% !important;
    table-layout: auto !important;
}

#pdksDetayBody td,
#pdksDetayBody th,
#pdksDetayModal td,
#pdksDetayModal th {
    vertical-align: middle !important;
}

#pdksDetayBody .pdks-action-btn,
#pdksDetayModal .pdks-action-btn {
    min-height: 20px !important;
    padding: 5px 10px !important;
    border-radius: var(--button-radius, var(--radius)) !important;
    font-size: 0.7188rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

#pdksDetayBody .pdks-action-edit,
#pdksDetayModal .pdks-action-edit {
    background: transparent !important;
    border: none !important;
    color: #2563EB !important;
    font-size: 0 !important;
    padding: 2px 3px !important;
    min-height: unset !important;
    box-shadow: none !important;
}

#pdksDetayBody .pdks-action-edit::before,
#pdksDetayModal .pdks-action-edit::before {
    content: '✏️';
    font-size: 0.6875rem;
}

#pdksDetayBody .pdks-action-delete,
#pdksDetayModal .pdks-action-delete {
    background: transparent !important;
    border: none !important;
    font-size: 0 !important;
    padding: 2px 3px !important;
    min-height: unset !important;
    box-shadow: none !important;
}

#pdksDetayBody .pdks-action-delete::before,
#pdksDetayModal .pdks-action-delete::before {
    content: '✕';
    font-size: 0.6875rem;
    color: #DC2626;
}

#pdksDetayBody .pdks-action-save,
#pdksDetayModal .pdks-action-save {
    background: var(--button-bg, var(--primary-accent)) !important;
    color: var(--primary-text, #fff) !important;
    border: var(--button-border-width, 1px) solid var(--button-border-color, var(--button-bg, var(--primary-accent))) !important;
}

#pdksDetayBody .pdks-action-cancel,
#pdksDetayModal .pdks-action-cancel {
    background: var(--bg) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border) !important;
}

/* Header sol padding ile tablo hizalaması */
#pdksDetayBody tr td:first-child,
#pdksDetayBody table th:first-child {
    padding-left: 16px !important;
}

/* Son sütun (butonlar) sağa yapışmasın */
#pdksDetayBody tr td:last-child {
    padding-right: 5px !important;
}
.modal-body table tr td:last-child {
    padding-right: 5px !important;
}
/* Action butonları arası */
#pdksDetayBody .pdks-action-btn + .pdks-action-btn {
    margin-left: 2px !important;
}

/* Modal başlık/kapama hizası */
#pdksDetayModal .modal-content > div:first-child {
    gap: 8px !important;
    align-items: center !important;
}
#pdksDetayModal .close-btn {
    flex: 0 0 auto !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
}
#opDetayModal .modal-content > div:first-child {
    gap: 8px !important;
    align-items: center !important;
}
#opDetayModal .close-btn {
    flex: 0 0 auto !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
}

/* PDKS detay modalı */

/* Özet kartları (üst kart grid) padding uyumu */
#pdksDetayBody > div:first-child {
    padding: 10px 16px !important;
}

/* pdksDetayBody table - yatay scroll olmadan sığsın */
#pdksDetayBody table {
    width: 100% !important;
    box-sizing: border-box !important;
}

#pdksDetayModal .pdks-detail-body,
#pdksDetayBody {
    max-height: none !important;
    overflow: visible !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-bottom: 4px !important;
}

#pdksDetayModal .pdks-detail-body table,
#pdksDetayBody table {
    border-collapse: collapse !important;
}

#pdksDetayModal .compact-table th,
#pdksDetayModal .compact-table td,
#pdksDetayBody .compact-table th,
#pdksDetayBody .compact-table td,
#pdksDetayBody table th,
#pdksDetayBody table td {
    padding: 5px 6px !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.15 !important;
    min-height: 0 !important;
}

#pdksDetayBody .ios-row,
#pdksDetayBody .d-list-row,
#pdksDetayBody .ekp-detail-row,
#pdksDetayBody .pdks-detail-row {
    padding: 5px 8px !important;
    min-height: 26px !important;
    font-size: var(--fs-sm) !important;
    line-height: 1.15 !important;
}

#pdksDetayBody .pdks-mini-card,
#pdksDetayBody .pdks-mc {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

/* ===== v14 — UI/UX güvenli override paketi =====
   Amaç: PHP/JS işleyişine dokunmadan modal, form, tablo, buton ve renk tutarlılığını düzeltmek.
   Not: Bu blok özellikle dosyanın en sonunda durmalıdır; önceki çakışan kuralları güvenli şekilde ezer. */
:root {
    --ui-surface: var(--card-bg, #fff);
    --ui-surface-soft: var(--bg, #f8fafc);
    --ui-border: var(--control-border-color, var(--border, #e5e7eb));
    --ui-radius: var(--radius, 8px);
    --ui-button-radius: var(--button-radius, var(--control-radius, var(--radius, 8px)));
    --ui-shadow-modal: var(--shadow-xl);
    --ui-shadow-card: var(--shadow-sm);
    --ui-danger: var(--red, #dc2626);
    --ui-success: var(--green, #16a34a);
    --ui-warning: #d97706;
    --ui-info: #2563eb;
}

/* Modal genel düzen: desktopta 33vw padding yüzünden daralma olmasın */
.modal.active,
.modal.centered-modal.active {
    padding: clamp(14px, 5vw, 28px) !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: rgba(15, 23, 42, .72) !important;
}

.modal.active > .modal-content,
.modal.centered-modal.active > .modal-content {
    width: min(92vw, 560px) !important;
    max-width: min(92vw, 760px) !important;
    max-height: min(90dvh, 760px) !important;
    margin: 0 auto !important;
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: calc(var(--ui-radius) + 4px) !important;
    box-shadow: var(--ui-shadow-modal) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Geniş içerikli modallar */
#pdksDetayModal.modal.active > .modal-content,
#pdksDetayModal.modal.centered-modal.active > .modal-content {
    width: min(99vw, 480px) !important;
    max-width: min(99vw, 480px) !important;
}

/* pdksHizliEditModal — kompakt, tek satırlık düzelt formu (genel 560px modal kuralını ezmesin) */
#pdksHizliEditModal.modal.active > .modal-content,
#pdksHizliEditModal.modal.centered-modal.active > .modal-content {
    width: min(92vw, 272px) !important;
    max-width: min(92vw, 272px) !important;
}
@media (max-width: 1024px) {
    #pdksDetayModal.modal.active > .modal-content,
    #pdksDetayModal.modal.centered-modal.active > .modal-content {
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        border-radius: 10px !important;
    }
}

#opModal.modal.active > .modal-content,
#arsivModal.modal.active > .modal-content {
    width: min(94vw, 760px) !important;
    max-width: min(94vw, 760px) !important;
}

#talepModal.modal.active > .modal-content,
#talepModal.modal.centered-modal.active > .modal-content,
.talep-modal-content {
    width: min(92vw, 520px) !important;
    max-width: min(92vw, 520px) !important;
}

/* Başlık satırı olan modallar: kapatma butonu yapışmasın */
.modal .modal-content > div:first-child[style*="border-bottom"],
.modal .modal-content > div:first-child[style*="justify-content:space-between"],
.modal .modal-content > div:first-child[style*="justify-content: space-between"] {
    min-height: 52px !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: color-mix(in srgb, var(--ui-surface) 96%, var(--ui-surface-soft)) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

.modal .modal-content > h2 {
    margin: 0 0 14px 0 !important;
    padding: 0 46px 12px 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    color: var(--text, #111827) !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
}

/* Kapatma butonu: ortak boyut/margin */
.modal .close-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin-left: 10px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-button-radius) !important;
    background: var(--ui-surface) !important;
    color: var(--text-light, #64748b) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: var(--ui-shadow-card) !important;
    cursor: pointer !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
.modal .close-btn:hover {
    background: #fef2f2 !important;
    color: var(--ui-danger) !important;
    border-color: #fecaca !important;
}
.modal .modal-content > .close-btn {
    top: 10px !important;
    right: 10px !important;
    margin-left: 0 !important;
}

/* Modal gövde boşlukları */
.modal.active > .modal-content > form,
.modal.active > .modal-content > .modal-app-body,
.modal.active > .modal-content > .pdks-detail-body,
.modal.active > .modal-content > div[id$="Body"],
#genericPopupBody,
#izinPopupIcerik {
    padding: 12px 14px !important;
}

/* Form okunabilirliği: label-input arası ve input yüksekliği */
.form-group,
.modal .form-group,
.compact-form-group,
.modal .compact-form-group {
    gap: 6px !important;
    margin-bottom: 13px !important;
}

.form-group label,
.compact-form-group label,
.modal .form-group label,
.modal .compact-form-group label,
.modal label {
    display: block !important;
    margin: 0 0 5px 0 !important;
    color: var(--text-light, #64748b) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.form-control,
.modal .form-control,
.modal input:not([type="hidden"]),
.modal select,
.modal textarea {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: var(--ui-radius) !important;
    border: var(--control-border-width, 1px) solid var(--ui-border) !important;
    background: var(--ui-surface) !important;
    color: var(--text, #111827) !important;
    font-size: var(--fs-base) !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
}
.form-control:focus,
.modal .form-control:focus,
.modal input:not([type="hidden"]):focus,
.modal select:focus,
.modal textarea:focus {
    outline: none !important;
    border-color: var(--primary-accent, #2563eb) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-accent, #2563eb) 14%, transparent) !important;
}
.modal textarea,
textarea.form-control { min-height: 64px !important; }

/* Buton standardı */
.btn,
.modal button:not(.close-btn),
.pager-btn,
.pg-btn,
.talep-action-btn,
.talep-type-btn,
.btn-sil {
    border-radius: var(--ui-button-radius) !important;
    font-family: var(--font-main) !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease !important;
}
.btn,
.modal button:not(.close-btn) {
    min-height: 44px !important;
    padding: 10px 14px !important;
}
.btn-primary,
.modal .btn-primary {
    background: var(--button-bg, var(--primary-accent, #2563eb)) !important;
    border: var(--button-border-width, 1px) solid var(--button-border-color, var(--button-bg, var(--primary-accent, #2563eb))) !important;
    color: var(--primary-text, #fff) !important;
}
.btn-secondary,
.modal .btn-secondary,
.talep-type-btn {
    background: var(--ui-surface-soft) !important;
    color: var(--text, #111827) !important;
    border: 1px solid var(--ui-border) !important;
}
.btn-warning,
.modal .btn-warning {
    background: #D97706 !important;
    color: #fff !important;
    border: 1px solid #B45309 !important;
}
.btn-danger,
.modal .btn-danger {
    background: #fef2f2 !important;
    color: var(--ui-danger) !important;
    border: 1px solid #fecaca !important;
}
.btn-success,
.modal .btn-success {
    background: #f0fdf4 !important;
    color: var(--ui-success) !important;
    border: 1px solid #bbf7d0 !important;
}

/* Modal içindeki tablolar: bitişik görünümü azalt */
.modal .compact-table,
.talep-table-simple,
.talep-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--ui-surface) !important;
}
.modal .compact-table th,
.modal .compact-table td,
.talep-table-simple th,
.talep-table-simple td,
.talep-table th,
.talep-table td {
    padding: 4px 7px !important;
    font-size: 0.6875rem !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--ui-border) !important;
}
.modal .compact-table th,
.talep-table-simple th,
.talep-table th {
    background: var(--ui-surface-soft) !important;
    color: var(--text-light, #64748b) !important;
    font-weight: 850 !important;
}

/* Talep tablosu: yatay satır kalsın ama daha nefesli olsun */
.talep-table-wrap {
    border: 1px solid var(--ui-border) !important;
    border-radius: calc(var(--ui-radius) + 2px) !important;
    overflow-x: auto !important;
    background: var(--ui-surface) !important;
}
.talep-table-simple,
.talep-table { min-width: 560px !important; }
.talep-status-pill {
    padding: 2px 6px !important;
    border-radius: 6px !important;
    font-size: var(--fs-xs) !important;
    font-weight: 800 !important;
}

/* PDKS detay: çok sıkışık tablo ve ikon zorlamasını düzelt */
#pdksDetayModal .pdks-detail-body,
#pdksDetayBody {
    padding: 12px 14px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}
#pdksDetayBody table,
#pdksDetayModal table {
    width: 100% !important;
    table-layout: auto !important;
}
#pdksDetayModal .compact-table th,
#pdksDetayModal .compact-table td,
#pdksDetayBody .compact-table th,
#pdksDetayBody .compact-table td,
#pdksDetayBody table th,
#pdksDetayBody table td {
    padding: 6px 8px !important;
    font-size: 0.6875rem !important;
    line-height: 1.22 !important;
    min-height: 0 !important;
}
#pdksDetayBody tr td:first-child,
#pdksDetayBody table th:first-child { padding-left: 10px !important; }
#pdksDetayBody tr td:last-child,
.modal-body table tr td:last-child { padding-right: 10px !important; }
.modal-body table tr { transform: none !important; }

#pdksDetayBody .pdks-action-btn,
#pdksDetayModal .pdks-action-btn {
    min-height: 28px !important;
    padding: 6px 10px !important;
    border-radius: var(--ui-button-radius) !important;
    font-size: 0.7188rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
#pdksDetayBody .pdks-action-edit,
#pdksDetayModal .pdks-action-edit {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: var(--ui-info) !important;
    font-size: 0.7188rem !important;
    padding: 6px 10px !important;
    min-height: 28px !important;
}
#pdksDetayBody .pdks-action-delete,
#pdksDetayModal .pdks-action-delete {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: var(--ui-danger) !important;
    font-size: 0.7188rem !important;
    padding: 6px 10px !important;
    min-height: 28px !important;
}
#pdksDetayBody .pdks-action-edit::before,
#pdksDetayModal .pdks-action-edit::before,
#pdksDetayBody .pdks-action-delete::before,
#pdksDetayModal .pdks-action-delete::before {
    content: none !important;
}
#pdksDetayBody .pdks-action-btn + .pdks-action-btn { margin-left: 18px !important; }
#pdksDetayBody td.pdks-ie-btn { padding-left: 10px !important; }
#pdksDetayBody td.pdks-ie-btn .pdks-action-btn { padding: 0 !important; min-height: unset !important; font-size: 0 !important; }

/* Mobil: 80vw dar kalıyordu; modalı okunabilir genişliğe çek */
@media (max-width: 1024px) {
    .modal.active,
    .modal.centered-modal.active {
        padding: max(14px, 4dvw) !important;
    }
    .modal.active > .modal-content,
    .modal.centered-modal.active > .modal-content {
        width: min(92vw, 520px) !important;
        max-width: 92vw !important;
        max-height: calc(100dvh - 28px) !important;
    }
    #pdksDetayModal.modal.active > .modal-content,
    #pdksDetayModal.modal.centered-modal.active > .modal-content {
        width: min(94vw, 720px) !important;
        max-width: 94vw !important;
    }
    .modal .modal-content > div:first-child[style*="border-bottom"],
    .modal .modal-content > div:first-child[style*="justify-content:space-between"],
    .modal .modal-content > div:first-child[style*="justify-content: space-between"] {
        padding: 12px 14px !important;
        min-height: 50px !important;
    }
    .modal.active > .modal-content > form,
    .modal.active > .modal-content > .modal-app-body,
    .modal.active > .modal-content > .pdks-detail-body,
    .modal.active > .modal-content > div[id$="Body"] {
        padding: 12px 14px !important;
    }
    .modal .compact-table th,
    .modal .compact-table td,
    .talep-table-simple th,
    .talep-table-simple td,
    .talep-table th,
    .talep-table td {
        padding: 6px 8px !important;
        font-size: 0.6875rem !important;
    }
}

@media (max-width: 480px) {
    .modal .close-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        margin-left: 8px !important;
    }
    .form-control,
    .modal .form-control,
    .modal input:not([type="hidden"]),
    .modal select,
    .modal textarea {
        min-height: 37px !important;
        font-size: 0.7812rem !important;
    }
}


/* ===== v15 Mazot toolbar/layout upgrade — çalışan yapıyı bozmadan ===== */
#view-mazot .mazot-kpi-card {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    min-width: 0;
}
#view-mazot .mazot-action-card {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary-accent);
    border-radius: var(--radius);
    background: var(--card-bg);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    min-height: 58px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
#view-mazot .mazot-action-card:hover {
    border-color: color-mix(in srgb, var(--primary-accent) 30%, var(--border));
    background: color-mix(in srgb, var(--primary-accent) 4%, var(--card-bg));
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
#view-mazot .mazot-action-card-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary-accent) 16%, var(--bg));
    color: var(--primary-accent);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    border: 1px solid color-mix(in srgb, var(--primary-accent) 18%, var(--border));
}
#view-mazot .mazot-action-card-text { display:flex; flex-direction:column; min-width:0; }
#view-mazot .mazot-action-card-text strong {
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--text);
}
#view-mazot .mazot-action-card-text small {
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--text-light);
    line-height: 1.3;
}

#view-mazot .mazot-toolbar {
    margin-bottom: 10px;
    background: var(--bg);
    padding: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
#view-mazot .mazot-toolbar-row {
    display: grid;
    grid-template-columns: minmax(84px, .9fr) minmax(150px, 1.35fr) minmax(130px, 1fr) minmax(130px, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}
#view-mazot .mazot-filter-control {
    min-height: 38px;
    padding: 6px 10px;
    width: 100%;
}
/* iOS Safari boş date input'u içeriğe göre büzüyor — grid hücresini doldurmaya zorla */
#view-mazot input[type="date"].mazot-filter-control {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    background: var(--card-bg);
    color: var(--text);
}
#view-mazot input[type="date"].mazot-filter-control::-webkit-date-and-time-value {
    text-align: left;
    line-height: 1.4;
}
#view-mazot .mazot-toolbar-btn {
    min-height: 38px;
    padding: 6px 12px;
    white-space: nowrap;
}
#view-mazot .mazot-btn-refresh {
    min-width: 44px;
    padding-left: 10px;
    padding-right: 10px;
}
#view-mazot .mazot-toolbar-meta {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}
#view-mazot .mazot-clear-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 10px;
    color: #DC2626;
    border: 1px solid #FCA5A5;
    border-radius: 8px;
    background: #FEF2F2;
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 700;
}
#view-mazot .mazot-clear-link:hover { background:#FEE2E2; }

@media (max-width: 1024px) {
    #view-mazot .mazot-toolbar-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #view-mazot .mazot-btn-filter,
    #view-mazot .mazot-btn-refresh {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #view-mazot .mazot-toolbar {
        padding: 8px;
    }
    #view-mazot .mazot-toolbar-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    #view-mazot .mazot-filter-control,
    #view-mazot .mazot-toolbar-btn {
        min-height: 36px;
        font-size: 0.6875rem;
        min-width: 0;
    }
    #view-mazot input[type="date"].mazot-filter-control {
        padding-right: 2px;
    }
}


.izin-gun-notu {
    margin-top: 5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #92400E;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-radius: 8px;
    padding: 4px 8px;
    line-height: 1.3;
}
/* .izin-gun-notu'nun kendi display:inline-flex'i, tek class'lik .u-hidden{display:none}'i
   eziyor (esit ozgulluk, sonraki kural kazanir) — bos halde bos sari serit gorunuyordu */
.izin-gun-notu.u-hidden {
    display: none;
}


/* ===== v17 Mazot üst kartları: tek satır + otomatik sıkışma ===== */
#view-mazot .mazot-top-panel {
    padding: clamp(6px, 1vw, 10px) !important;
}

#view-mazot .mazot-top-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(4px, .8vw, 8px) !important;
    align-items: stretch !important;
    width: 100%;
}

#view-mazot .mazot-top-grid > * {
    min-width: 0 !important;
}

#view-mazot .mazot-kpi-card,
#view-mazot .mazot-action-card {
    min-height: clamp(48px, 7vw, 68px) !important;
    height: auto !important;
    padding: clamp(4px, .7vw, 7px) clamp(5px, .9vw, 9px) !important;
}
#view-mazot .mazot-kpi-card {
    border-left-width: 1px !important;
}

#view-mazot .mazot-kpi-card .u-title-md,
#view-mazot .mazot-kpi-card .u-fw-800 {
    font-size: clamp(12px, 2.4vw, 22px) !important;
    line-height: 1.08 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#view-mazot .mazot-kpi-card .u-lbl-ul {
    font-size: clamp(6px, 1.25vw, 10px) !important;
    line-height: 1.05 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#view-mazot .mazot-action-card {
    gap: clamp(4px, .8vw, 9px) !important;
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
    border-left-color: var(--primary-accent) !important;
}

#view-mazot .mazot-action-card-icon {
    width: clamp(26px, 5.2vw, 38px) !important;
    height: clamp(26px, 5.2vw, 38px) !important;
    flex-basis: clamp(26px, 5.2vw, 38px) !important;
    border-radius: clamp(6px, 1.2vw, 10px) !important;
    font-size: clamp(13px, 2.4vw, 19px) !important;
    background: var(--primary-accent) !important;
    color: var(--primary-text) !important;
    border-color: var(--primary-accent) !important;
}

#view-mazot .mazot-action-card-text strong {
    font-size: clamp(10px, 1.8vw, 14px) !important;
    line-height: 1.08 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#view-mazot .mazot-action-card-text small {
    font-size: clamp(7px, 1.2vw, 10px) !important;
    line-height: 1.1 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Önceki 2 sütun/1 sütun media kurallarını ezer: her ekranda tek satır 4 kart */
@media (max-width: 1279px) {
    #view-mazot .mazot-top-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 480px) {
    #view-mazot .mazot-action-card-text small {
        display: none !important;
    }
    #view-mazot .mazot-kpi-card,
    #view-mazot .mazot-action-card {
        min-height: 46px !important;
    }
}

@media (max-width: 480px) {
    #view-mazot .mazot-action-card {
        justify-content: center !important;
        text-align: center !important;
    }
    #view-mazot .mazot-action-card-icon {
        display: none !important;
    }
}


/* ===== v17 Yakıt Ekle sağ ikon (fuel.jpg) ===== */
#view-mazot .mazot-action-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(6px, 1vw, 12px);
    padding: clamp(6px, 0.75vw, 10px) clamp(8px, 1vw, 12px);
    min-height: clamp(58px, 6vw, 72px);
}
#view-mazot .mazot-action-card-icon {
    display: none !important;
}
#view-mazot .mazot-action-card-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
#view-mazot .mazot-action-card-text strong {
    font-size: clamp(12px, 1.35vw, 14px);
    line-height: 1.15;
}
#view-mazot .mazot-action-card-text small {
    font-size: clamp(8.5px, 1vw, 10px);
    line-height: 1.25;
    margin-top: 2px;
}
#view-mazot .mazot-action-card-media {
    flex: 0 0 auto;
    margin-left: auto;
    width: clamp(28px, 4vw, 46px);
    height: clamp(28px, 4vw, 46px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary-accent) 8%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--primary-accent) 18%, var(--border));
}
#view-mazot .mazot-action-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
@media (max-width: 480px) {
    #view-mazot .mazot-action-card-media {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }
}


/* ===== v18 Yakıt Ekle sağ kart son düzeltme ===== */
#view-mazot .mazot-action-card {
    order: 99;
}
#view-mazot .mazot-action-card-text {
    justify-content: center;
}
#view-mazot .mazot-action-card-text strong {
    font-weight: 800;
}
#view-mazot .mazot-action-card-text small {
    display: none !important;
}


/* ===== v19 Buton yazı rengi düzeltmesi =====
   Sebep: önceki override'larda .btn-primary color var(--primary-text,#fff) kullanıyordu.
   Tema tarafında asıl değişken --button-text olduğu için bazı butonlar beyaza düşüyordu. */
.btn-primary,
.modal .btn-primary,
#view-mazot .mazot-btn-filter,
#pdksDetayBody .pdks-action-save,
#pdksDetayModal .pdks-action-save {
    color: var(--button-text, #111827) !important;
}
#view-mazot .mazot-action-card-media,
#view-mazot .mazot-action-card-icon {
    color: var(--button-text, #111827) !important;
}


/* ===== v19 PDKS edit modal + OPR nav + Yakıt Ekle renk düzeltmeleri ===== */
#view-mazot .mazot-action-card {
    background: #F5DA0B !important;
    border-color: #F5DA0B !important;
    border-left-color: #F5DA0B !important;
    color: #111827 !important;
}
#view-mazot .mazot-action-card:hover {
    background: #D4BC00 !important;
}
#view-mazot .mazot-action-card-text strong {
    color: #111827 !important;
}
#view-mazot .mazot-action-card-media {
    background: rgba(255,255,255,.24) !important;
    border-color: rgba(255,255,255,.35) !important;
}

/* OPR özet popup: modal z-index standart seviyede, nav üzerinde kalmasın */
#oprDetayModal.modal.active {
    z-index: var(--z-modal) !important;
}
body:has(#oprDetayModal.modal.active) .sidebar,
body:has(#oprDetayModal.modal.active) .bottom-nav {
    z-index: var(--z-header) !important;
    pointer-events: auto !important;
}

/* ===== v21 Modal UI konsolidasyonu + PDKS Düzelt hataları =====
   Amaç: çalışan akışı bozmadan en son katmanda tek standart uygulamak. */
:root {
    --modal-std-radius: calc(var(--radius, 8px) + 4px);
    --modal-std-border: var(--border, #e5e7eb);
    --modal-std-bg: var(--card-bg, #fff);
    --modal-std-soft: var(--bg, #f8fafc);
    --modal-std-shadow: var(--shadow-xl);
    --modal-control-h: 38px;
    --modal-gap: 10px;
}

/* Mobil modal ortak genişlik: kenarlarda toplam ~%20 boşluk, merkezde tek ölçü */
@media (max-width: 1024px) {
    .modal.active,
    .modal.centered-modal.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100dvw !important;
        height: 100dvh !important;
        padding: 10dvh 10dvw !important;
        overflow: hidden !important;
        background: rgba(15,23,42,.72) !important;
    }
    .modal.active > .modal-content,
    .modal.centered-modal.active > .modal-content,
    #pdksDetayModal.modal.active > .modal-content,
    #pdksDetayModal.modal.centered-modal.active > .modal-content,
    #opModal.modal.active > .modal-content,
    #mazotModal.modal.active > .modal-content,
    #mazotDuzenleModal.modal.active > .modal-content,
    #talepModal.modal.active > .modal-content,
    #pdksManuelModal.modal.active > .modal-content,
    #raporModal.modal.active > .modal-content,
    #bakimModal.modal.active > .modal-content,
    #ekpDetailModal.modal.active > .modal-content,
    #genericPopup.modal.active > .modal-content,
    #izinPopupModal.modal.active > .modal-content,
    .talep-modal-content {
        width: min(80vw, 420px) !important;
        max-width: min(80vw, 420px) !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 80dvh !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-radius: var(--modal-std-radius) !important;
        border: 1px solid var(--modal-std-border) !important;
        background: var(--modal-std-bg) !important;
        box-shadow: var(--modal-std-shadow) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    /* CSV onayı tablo/import gibi geniş içerik taşıyor; taşmasın diye istisna */
    #csvOnayModal.modal.active > .modal-content {
        width: min(94vw, 920px) !important;
        max-width: min(94vw, 920px) !important;
        max-height: 88dvh !important;
    }
}

@media (min-width: 1025px) {
    .modal.active,
    .modal.centered-modal.active {
        padding: 28px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .modal.active > .modal-content,
    .modal.centered-modal.active > .modal-content {
        width: min(92vw, 560px) !important;
        max-width: min(92vw, 560px) !important;
        max-height: calc(100dvh - 56px) !important;
        border-radius: var(--modal-std-radius) !important;
        background: var(--modal-std-bg) !important;
        box-shadow: var(--modal-std-shadow) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    #pdksDetayModal.modal.active > .modal-content,
    #csvOnayModal.modal.active > .modal-content {
        width: min(94vw, 760px) !important;
        max-width: min(94vw, 760px) !important;
    }
}

/* Modal başlık/kapama standardı */
.modal .modal-content > div:first-child[style*="border-bottom"],
.modal .modal-content > div:first-child[style*="justify-content:space-between"],
.modal .modal-content > div:first-child[style*="justify-content: space-between"] {
    min-height: 50px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: var(--modal-std-bg) !important;
    border-bottom: 1px solid var(--modal-std-border) !important;
}
.modal .close-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin-left: 10px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--button-radius, var(--radius, 8px)) !important;
    border: 1px solid var(--modal-std-border) !important;
    background: var(--modal-std-bg) !important;
    color: var(--text-light, #64748b) !important;
    box-shadow: none !important;
}

/* Modal gövde/form boşluk standardı */
.modal.active > .modal-content > form,
.modal.active > .modal-content > .modal-app-body,
.modal.active > .modal-content > .pdks-detail-body,
.modal.active > .modal-content > div[id$="Body"],
#genericPopupBody,
#izinPopupIcerik {
    padding: 12px 14px !important;
}
.modal .form-group,
.modal .compact-form-group,
.modal .u-mb-12,
.modal .u-mb-16 {
    margin-bottom: 11px !important;
}
.modal .form-group label,
.modal .compact-form-group label,
.modal label {
    display: block !important;
    margin: 0 0 5px 0 !important;
    font-size: 0.6875rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: var(--text-light, #64748b) !important;
}
.modal .form-control,
.modal input:not([type="hidden"]),
.modal select,
.modal textarea {
    min-height: var(--modal-control-h) !important;
    padding: 8px 10px !important;
    border-radius: var(--control-radius, var(--radius, 8px)) !important;
    border: 1px solid var(--modal-std-border) !important;
    background: var(--modal-std-bg) !important;
    color: var(--text, #111827) !important;
    font-size: var(--fs-base) !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
}
.modal .form-control:focus,
.modal input:not([type="hidden"]):focus,
.modal select:focus,
.modal textarea:focus {
    outline: none !important;
    border-color: var(--primary-accent, #2563eb) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-accent, #2563eb) 14%, transparent) !important;
}

/* Modal butonları tek aile */
.modal .btn,
.modal button:not(.close-btn) {
    min-height: 38px !important;
    padding: 8px 14px !important;
    border-radius: var(--button-radius, var(--radius, 8px)) !important;
    font-size: var(--fs-base) !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}
.modal .btn-primary {
    background: var(--button-bg, var(--primary-accent, #2563eb)) !important;
    border: var(--button-border-width, 1px) solid var(--button-border-color, var(--button-bg, var(--primary-accent, #2563eb))) !important;
    color: var(--button-text, #111827) !important;
}
.modal .btn-secondary {
    background: var(--modal-std-soft) !important;
    border: 1px solid var(--modal-std-border) !important;
    color: var(--text, #111827) !important;
}

@media (max-width: 480px) {
    .modal.active,
    .modal.centered-modal.active {
        padding: 8dvh 8dvw !important;
    }
    .modal.active > .modal-content,
    .modal.centered-modal.active > .modal-content {
        width: 84vw !important;
        max-width: 84vw !important;
        max-height: 84dvh !important;
    }
}


/* ===== v21 Modal mobil boşluk standardı: kenarlarda %5 ===== */
@media (max-width: 1024px) {
    .modal.active,
    .modal.centered-modal.active {
        padding: 5dvh 5vw !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .modal.active > .modal-content,
    .modal.centered-modal.active > .modal-content,
    .modal.active .modal-content,
    .modal.centered-modal.active .modal-content {
        width: 90vw !important;
        max-width: 560px !important;
        min-width: 0 !important;
        max-height: 80dvh !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    .modal .form-group,
    .modal .compact-form-group {
        gap: 5px !important;
        margin-bottom: 10px !important;
    }

    .modal label {
        margin-bottom: 4px !important;
        line-height: 1.25 !important;
    }

    .modal input.form-control,
    .modal select.form-control,
    .modal textarea.form-control,
    .modal input[type="date"],
    .modal input[type="time"],
    .modal input[type="tel"],
    .modal input[type="number"],
    .modal input[type="text"],
    .modal select,
    .modal textarea {
        min-height: 38px !important;
        padding: 8px 10px !important;
        line-height: 1.35 !important;
    }

    .modal .btn {
        min-height: 38px !important;
        padding: 8px 12px !important;
    }

    .modal .close-btn,
    .modal-close,
    .modal button[onclick*="closeModal"] {
        min-width: 38px !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    .modal.active,
    .modal.centered-modal.active {
        padding-left: 8vw !important;
        padding-right: 8vw !important;
    }

    .modal.active > .modal-content,
    .modal.centered-modal.active > .modal-content,
    .modal.active .modal-content,
    .modal.centered-modal.active .modal-content {
        width: 84vw !important;
        max-width: 84vw !important;
    }
}


/* ===== v22 PDKS detay sıkılaştırma + edit modal net düzeltme ===== */

/* Detay modalında tablo kenarındaki beyaz boşluğu yaklaşık %50 azalt */
#pdksDetayModal #pdksDetayBody {
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-bottom: 6px !important;
}

#pdksDetayModal #pdksDetayBody > div:first-child {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* PDKS detay tablosu: satır aralarını yaklaşık %25 düşür */
#pdksDetayModal #pdksDetayBody .compact-table {
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 0.6562rem !important;
    border-collapse: collapse !important;
}

#pdksDetayModal #pdksDetayBody .compact-table th,
#pdksDetayModal #pdksDetayBody .compact-table td {
    padding: 4px 5px !important;
    line-height: 1.05 !important;
    min-height: 0 !important;
    height: auto !important;
    vertical-align: middle !important;
}

#pdksDetayModal #pdksDetayBody .compact-table button {
    min-height: 26px !important;
    padding: 5px 8px !important;
    line-height: 1 !important;
}

@media (max-width: 1024px) {
    #pdksDetayModal #pdksDetayBody {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    #pdksDetayModal #pdksDetayBody .compact-table th,
    #pdksDetayModal #pdksDetayBody .compact-table td {
        padding: 3px 4px !important;
        line-height: 1.02 !important;
    }
}


/* =====================================================================
   v23 UI CORE TEMİZLİĞİ
   Amaç: çalışan yapıyı bozmadan buton/input/modal/tablo dilini tekleştirmek.
   Eski kurallar silinmez; bu katman en sonda güvenli standart verir.
   ===================================================================== */

:root {
    /* Ana UI ölçüleri */
    --ui-radius: var(--radius, 8px);
    --ui-radius-sm: max(4px, calc(var(--ui-radius) - 3px));
    --ui-radius-lg: calc(var(--ui-radius) + 4px);

    --ui-border: var(--border, #E5E7EB);
    --ui-border-strong: color-mix(in srgb, var(--ui-border) 82%, #111827);
    --ui-surface: var(--card-bg, #FFFFFF);
    --ui-surface-soft: var(--bg, #F9FAFB);
    --ui-text: var(--text, #111827);
    --ui-text-muted: var(--text-light, #6B7280);
    --ui-text-soft: var(--text-tertiary, #9CA3AF);

    --ui-primary: var(--button-bg, var(--primary-accent, #D6D76B));
    --ui-primary-text: var(--button-text, var(--primary-text, #111827));
    --ui-success: var(--green, #059669);
    --ui-danger: var(--red, #DC2626);
    --ui-warning: #D97706;
    --ui-info: #2563EB;

    --ui-control-height: 38px;
    --ui-control-height-sm: 32px;
    --ui-control-padding-x: 10px;
    --ui-control-padding-y: 8px;
    --ui-control-border-width: var(--control-border-width, 1px);
    --ui-control-border: var(--control-border-color, var(--ui-border));
    --ui-control-radius: var(--control-radius, var(--ui-radius));

    --ui-btn-height: 38px;
    --ui-btn-height-sm: 30px;
    --ui-btn-padding-x: 12px;
    --ui-btn-padding-y: 8px;
    --ui-btn-radius: var(--button-radius, var(--ui-radius));

    --ui-card-padding: 10px;
    --ui-gap: 8px;

    --ui-modal-mobile-space-x: 10vw;
    --ui-modal-mobile-space-y: 10dvh;
}

/* ---------- Genel kutu ve okunabilirlik ---------- */
.kcm-ui-core *,
.kcm-ui-core *::before,
.kcm-ui-core *::after {
    box-sizing: border-box;
}

.kcm-ui-core {
    color: var(--ui-text);
}

/* ---------- Buton çekirdeği ---------- */
.kcm-ui-core .btn,
.kcm-ui-core .ui-btn,
.kcm-ui-core button.btn,
.kcm-ui-core a.btn {
    min-height: var(--ui-btn-height);
    padding: var(--ui-btn-padding-y) var(--ui-btn-padding-x);
    border-radius: var(--ui-btn-radius);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-main, inherit);
    font-size: var(--fs-base);
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    box-shadow: none;
}

.kcm-ui-core .btn-primary,
.kcm-ui-core .ui-btn-primary {
    background: var(--ui-primary) !important;
    color: var(--ui-primary-text) !important;
    border-color: var(--button-border-color, var(--ui-primary)) !important;
}

.kcm-ui-core .btn-secondary,
.kcm-ui-core .ui-btn-secondary {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

.kcm-ui-core .btn-danger,
.kcm-ui-core .ui-btn-danger {
    background: #FEF2F2 !important;
    color: var(--ui-danger) !important;
    border-color: #FCA5A5 !important;
}

.kcm-ui-core .btn-success,
.kcm-ui-core .ui-btn-success {
    background: #F0FDF4 !important;
    color: var(--ui-success) !important;
    border-color: #86EFAC !important;
}

.kcm-ui-core .btn-warning,
.kcm-ui-core .ui-btn-warning {
    background: #D97706 !important;
    color: #fff !important;
    border-color: #B45309 !important;
}

.kcm-ui-core .btn-sm,
.kcm-ui-core .u-fs-11.btn,
.kcm-ui-core .u-fs-11.ui-btn {
    min-height: var(--ui-btn-height-sm);
    padding: 5px 9px;
    font-size: 0.7188rem;
}

.kcm-ui-core .btn-icon,
.kcm-ui-core .ui-btn-icon {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
}

/* ---------- Form çekirdeği ---------- */
.kcm-ui-core .form-group,
.kcm-ui-core .compact-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

.kcm-ui-core .form-group label,
.kcm-ui-core .compact-form-group label,
.kcm-ui-core .form-label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ui-text-muted);
    line-height: 1.25;
}

.kcm-ui-core .form-control,
.kcm-ui-core .ui-control,
.kcm-ui-core input[type="text"],
.kcm-ui-core input[type="number"],
.kcm-ui-core input[type="date"],
.kcm-ui-core input[type="time"],
.kcm-ui-core input[type="tel"],
.kcm-ui-core input[type="email"],
.kcm-ui-core input[type="password"],
.kcm-ui-core select,
.kcm-ui-core textarea {
    min-height: var(--ui-control-height);
    padding: var(--ui-control-padding-y) var(--ui-control-padding-x);
    border: var(--ui-control-border-width) solid var(--ui-control-border);
    border-radius: var(--ui-control-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-family: var(--font-main, inherit);
    font-size: var(--fs-base);
    font-weight: 650;
    line-height: 1.35;
    outline: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.kcm-ui-core textarea.form-control,
.kcm-ui-core textarea {
    min-height: 72px;
}

.kcm-ui-core .form-control:focus,
.kcm-ui-core .ui-control:focus,
.kcm-ui-core input:focus,
.kcm-ui-core select:focus,
.kcm-ui-core textarea:focus {
    border-color: var(--ui-primary);
    background: var(--ui-surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 18%, transparent);
}

/* ---------- Modal çekirdeği ---------- */
.kcm-ui-core .modal.active,
.kcm-ui-core .modal.centered-modal.active,
.kcm-ui-core .ui-modal.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--ui-modal-mobile-space-y) var(--ui-modal-mobile-space-x) !important;
    background: rgba(17, 24, 39, .54);
}

.kcm-ui-core .modal-content,
.kcm-ui-core .ui-modal-content {
    background: var(--ui-surface);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
    overflow: hidden;
}

@media (max-width: 1024px) {
    .kcm-ui-core .modal.active > .modal-content,
    .kcm-ui-core .modal.centered-modal.active > .modal-content,
    .kcm-ui-core .modal.active .ui-modal-content,
    .kcm-ui-core .ui-modal.active > .ui-modal-content {
        width: 90vw !important;
        max-width: 560px !important;
        min-width: 0 !important;
        max-height: 80dvh !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}

@media (min-width: 1025px) {
    .kcm-ui-core .modal.active > .modal-content,
    .kcm-ui-core .modal.centered-modal.active > .modal-content {
        width: min(92vw, 560px);
        max-height: 86vh;
        overflow-y: auto;
    }
}

.kcm-ui-core .close-btn,
.kcm-ui-core .ui-modal-close,
.kcm-ui-core .modal-close {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
    border-radius: var(--ui-radius-sm) !important;
    border: 1px solid var(--ui-border) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text-muted) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    flex: 0 0 38px !important;
}

/* Modal içi standart boşluk */
.kcm-ui-core .modal .form-group,
.kcm-ui-core .modal .compact-form-group {
    margin-bottom: 10px;
}

.kcm-ui-core .modal .btn {
    min-height: 38px;
}

/* ---------- Kart / Toolbar çekirdeği ---------- */
.kcm-ui-core .card,
.kcm-ui-core .d-card,
.kcm-ui-core .ios-group {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg, 12px);
    background: var(--ui-surface);
}

.kcm-ui-core .card-header,
.kcm-ui-core .d-card-head {
    gap: var(--ui-gap);
}

.kcm-ui-core .toolbar,
.kcm-ui-core .mazot-toolbar,
.kcm-ui-core .talep-toolbar {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-soft);
    padding: 10px;
    gap: 8px;
}

/* ---------- Tablo çekirdeği ---------- */
.kcm-ui-core .compact-table,
.kcm-ui-core .ui-table,
.kcm-ui-core table.data-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--ui-text);
}

.kcm-ui-core .compact-table th,
.kcm-ui-core .compact-table td,
.kcm-ui-core .ui-table th,
.kcm-ui-core .ui-table td,
.kcm-ui-core table.data-table th,
.kcm-ui-core table.data-table td {
    border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 72%, transparent);
    vertical-align: middle;
}

.kcm-ui-core .compact-table th,
.kcm-ui-core .ui-table th,
.kcm-ui-core table.data-table th {
    color: var(--ui-text-muted);
    font-weight: 700;
}

/* ---------- Aksiyon butonları ---------- */
.kcm-ui-core .pdks-action-btn,
.kcm-ui-core .table-action,
.kcm-ui-core .action-btn {
    min-height: 28px !important;
    padding: 5px 9px !important;
    border-radius: var(--ui-radius-sm) !important;
    font-size: 0.7188rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.kcm-ui-core .pdks-action-edit,
.kcm-ui-core .table-action-edit {
    background: #EFF6FF !important;
    border: 1px solid #BFDBFE !important;
    color: var(--ui-info) !important;
}

.kcm-ui-core .pdks-action-delete,
.kcm-ui-core .table-action-delete,
.kcm-ui-core .btn-sil {
    background: #FEF2F2 !important;
    border: 1px solid #FCA5A5 !important;
    color: var(--ui-danger) !important;
}

/* ---------- Mazot üst kartı: UI core ile uyum ---------- */
.kcm-ui-core #view-mazot .mazot-action-card {
    background: #F5DA0B !important;
    color: #111827 !important;
    border-color: #F5DA0B !important;
}

.kcm-ui-core #view-mazot .mazot-action-card strong,
.kcm-ui-core #view-mazot .mazot-action-card-text strong {
    color: #111827 !important;
}

.kcm-ui-core #view-mazot .mazot-action-card-media {
    background: color-mix(in srgb, var(--ui-primary-text) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--ui-primary-text) 22%, transparent) !important;
}

/* ---------- Mobil güvenlik ---------- */
@media (max-width: 480px) {
    :root {
        --ui-control-height: 36px;
        --ui-btn-height: 36px;
        --ui-control-padding-x: 9px;
        --ui-control-padding-y: 7px;
    }

    .kcm-ui-core .modal.active,
    .kcm-ui-core .modal.centered-modal.active {
        padding-left: 8vw !important;
        padding-right: 8vw !important;
    }

    .kcm-ui-core .modal.active > .modal-content,
    .kcm-ui-core .modal.centered-modal.active > .modal-content {
        width: 84vw !important;
        max-width: 84vw !important;
    }
}

/* ---------- Çok küçük ekranlarda yazı taşmasını engelle ---------- */
@media (max-width: 480px) {
    .kcm-ui-core .btn,
    .kcm-ui-core .ui-btn {
        font-size: var(--fs-sm);
        padding-left: 9px;
        padding-right: 9px;
    }

    .kcm-ui-core .form-control,
    .kcm-ui-core .ui-control {
        font-size: var(--fs-sm);
    }
}


/* =====================================================================
   v24 FAZ 5 — MOBİL QA MATRİSİ VE RESPONSIVE GÜVENLİK KATMANI
   Test hedefleri: 360 / 390 / 412 / 430 / 768 / 1024 / 1366 px
   Çalışan yapıyı bozmaz; son katmanda taşma/boşluk/touch standardı verir.
   ===================================================================== */

:root {
    --qa-safe-top: env(safe-area-inset-top, 0px);
    --qa-safe-bottom: env(safe-area-inset-bottom, 0px);
    --qa-safe-left: env(safe-area-inset-left, 0px);
    --qa-safe-right: env(safe-area-inset-right, 0px);

    --qa-page-pad: clamp(8px, 2.2vw, 26px);
    --qa-card-gap: clamp(6px, 1.6vw, 10px);
    --qa-touch: 38px;
    --qa-touch-sm: 32px;
    --qa-modal-side-space: 10vw;
    --qa-modal-top-space: 10dvh;

    --qa-font-xs: clamp(8px, 1.9vw, 10px);
    --qa-font-sm: clamp(10px, 2.4vw, 12px);
    --qa-font-md: clamp(12px, 2.8vw, 14px);
}

/* Genel taşma güvenliği */
html,
body.kcm-ui-core {
    max-width: 100%;
    overflow-x: hidden;
}

.kcm-ui-core img,
.kcm-ui-core video,
.kcm-ui-core canvas,
.kcm-ui-core svg {
    max-width: 100%;
}

.kcm-ui-core .main-content {
    padding-top: calc(22px + var(--qa-safe-top)) !important;
    padding-left: calc(var(--qa-page-pad) + var(--qa-safe-left)) !important;
    padding-right: calc(var(--qa-page-pad) + var(--qa-safe-right)) !important;
    padding-bottom: calc(40px + var(--qa-safe-bottom)) !important;
}
@media (max-width: 480px) {
    .kcm-ui-core .main-content { padding-top: calc(8px + var(--qa-safe-top)) !important; }
}

/* Dokunma hedefi standardı */
.kcm-ui-core .qa-touch,
.kcm-ui-core button,
.kcm-ui-core a.btn,
.kcm-ui-core .nav-item,
.kcm-ui-core .menu-item {
    min-height: var(--qa-touch-sm);
}

@media (max-width: 768px) {
    .kcm-ui-core .qa-touch,
    .kcm-ui-core button,
    .kcm-ui-core a.btn,
    .kcm-ui-core .nav-item {
        min-height: var(--qa-touch) !important;
    }
}

/* Bottom nav: safe-area ve taşma kontrolü */
@media (max-width: 1024px) {
    .kcm-ui-core .bottom-nav {
        height: calc(54px + var(--qa-safe-bottom)) !important;
        padding-bottom: var(--qa-safe-bottom) !important;
        padding-left: max(2px, var(--qa-safe-left)) !important;
        padding-right: max(2px, var(--qa-safe-right)) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
    }

    .kcm-ui-core .bottom-nav::-webkit-scrollbar {
        display: none;
    }

    .kcm-ui-core .bottom-nav .nav-item {
        min-width: 48px !important;
        max-width: 82px;
        padding: 3px 2px !important;
        font-size: clamp(8px, 2.1vw, 10px) !important;
        line-height: 1.1 !important;
    }

    .kcm-ui-core .bottom-nav .icon {
        font-size: clamp(14px, 4vw, 18px) !important;
    }
}

/* Modal QA: bütün mobil cihazlarda ortalı ve %10 kenar boşluklu */
@media (max-width: 1024px) {
    .kcm-ui-core .modal.active,
    .kcm-ui-core .modal.centered-modal.active {
        padding-top: var(--qa-modal-top-space) !important;
        padding-bottom: var(--qa-modal-top-space) !important;
        padding-left: var(--qa-modal-side-space) !important;
        padding-right: var(--qa-modal-side-space) !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .kcm-ui-core .modal.active > .modal-content,
    .kcm-ui-core .modal.centered-modal.active > .modal-content,
    .kcm-ui-core .modal.active .ui-modal-content,
    .kcm-ui-core .modal.active .qa-modal-content {
        width: calc(100vw - (var(--qa-modal-side-space) * 2)) !important;
        max-width: calc(100vw - (var(--qa-modal-side-space) * 2)) !important;
        max-height: calc(100dvh - (var(--qa-modal-top-space) * 2)) !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
}

/* 360 px sınıfı: modal %10 hedefi korunur ama mikro taşmalar yumuşatılır */
@media (max-width: 480px) {
    :root {
        --qa-modal-side-space: 8vw;
        --qa-modal-top-space: 8dvh;
        --qa-page-pad: 6px;
        --qa-touch: 36px;
    }

    .kcm-ui-core .btn,
    .kcm-ui-core .form-control,
    .kcm-ui-core input,
    .kcm-ui-core select,
    .kcm-ui-core textarea {
        font-size: var(--fs-sm) !important;
    }

    .kcm-ui-core .close-btn,
    .kcm-ui-core .ui-modal-close {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }
}

/* Kart/grid responsive dengesi */
@media (max-width: 480px) {
    .kcm-ui-core .d-row-4,
    .kcm-ui-core .grid-container,
    .kcm-ui-core .dash-body {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--qa-card-gap) !important;
    }

    .kcm-ui-core .d-row-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--qa-card-gap) !important;
    }

    .kcm-ui-core .card,
    .kcm-ui-core .d-card {
        padding: clamp(7px, 2vw, 10px) !important;
        margin-bottom: var(--qa-card-gap) !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .kcm-ui-core .d-row-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .kcm-ui-core .grid-container,
    .kcm-ui-core .dash-body {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Toolbarlar: 360-430 arası taşma yapmasın */
@media (max-width: 480px) {
    .kcm-ui-core .mazot-toolbar-row,
    .kcm-ui-core .talep-toolbar,
    .kcm-ui-core form[id*="Filtre"],
    .kcm-ui-core form[id*="filtre"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        align-items: stretch !important;
    }

    .kcm-ui-core .mazot-toolbar-row > *,
    .kcm-ui-core .talep-toolbar > *,
    .kcm-ui-core form[id*="Filtre"] > *,
    .kcm-ui-core form[id*="filtre"] > * {
        min-width: 0 !important;
        width: 100% !important;
    }

    .kcm-ui-core .mazot-toolbar .btn,
    .kcm-ui-core .talep-toolbar .btn {
        width: 100% !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .kcm-ui-core .mazot-toolbar-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Tablolar: yatay taşma kontrollü scroll olsun */
.kcm-ui-core .qa-scroll-x,
.kcm-ui-core .u-scroll-x,
.kcm-ui-core .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}
/* Tablo taşıyorsa solma efektiyle ipucu ver */
.kcm-ui-core .u-scroll-x {
    background:
        linear-gradient(to right, var(--card-bg,#fff) 10%, transparent 30%) left center / 20px 100% no-repeat,
        linear-gradient(to left,  var(--card-bg,#fff) 10%, transparent 30%) right center / 20px 100% no-repeat,
        radial-gradient(ellipse at left,  rgba(0,0,0,.08) 0%, transparent 70%) left center / 10px 100% no-repeat,
        radial-gradient(ellipse at right, rgba(0,0,0,.08) 0%, transparent 70%) right center / 10px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.kcm-ui-core table.qa-table-wide,
.kcm-ui-core .u-scroll-x > table,
.kcm-ui-core .table-responsive > table {
    min-width: max-content;
}

/* PDKS ana ekran mobil güvenliği */
@media (max-width: 768px) {
    .kcm-ui-core #view-pdks .card,
    .kcm-ui-core #view-pdks .d-card {
        border-radius: var(--ui-radius, 8px) !important;
    }

    .kcm-ui-core #pdksTabloWrap {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    .kcm-ui-core #pdksTabloWrap table {
        min-width: 860px;
    }

    .kcm-ui-core #view-pdks .compact-table th,
    .kcm-ui-core #view-pdks .compact-table td {
        touch-action: manipulation;
    }
}

/* PDKS detay modalı: tablo ve edit formu cihazlara otursun */
@media (max-width: 480px) {
    .kcm-ui-core #pdksDetayModal #pdksDetayBody {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .kcm-ui-core #pdksDetayModal #pdksDetayBody .compact-table {
        font-size: var(--fs-xs) !important;
    }

    .kcm-ui-core #pdksDetayModal #pdksDetayBody .compact-table th,
    .kcm-ui-core #pdksDetayModal #pdksDetayBody .compact-table td {
        padding: 3px 3px !important;
    }

}

/* Mazot üst kartları: her cihazda tek satır; çok dar alanda içeriği küçült */
.kcm-ui-core #view-mazot .mazot-top-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(4px, 1.3vw, 8px) !important;
}

.kcm-ui-core #view-mazot .mazot-kpi-card,
.kcm-ui-core #view-mazot .mazot-action-card {
    min-height: clamp(48px, 8.5vw, 72px) !important;
    padding: clamp(4px, 1vw, 8px) !important;
}
.kcm-ui-core #view-mazot .mazot-kpi-card {
    border-left-width: 1px !important;
}

.kcm-ui-core #view-mazot .mazot-kpi-card .u-title-md,
.kcm-ui-core #view-mazot .mazot-kpi-card .u-fw-800 {
    font-size: clamp(12px, 3.2vw, 18px) !important;
    line-height: 1.1 !important;
}

.kcm-ui-core #view-mazot .mazot-kpi-card .u-lbl-ul,
.kcm-ui-core #view-mazot .mazot-action-card strong {
    font-size: clamp(7px, 2vw, 10px) !important;
    line-height: 1.1 !important;
}

.kcm-ui-core #view-mazot .mazot-action-card-media {
    width: clamp(22px, 5.5vw, 38px) !important;
    height: clamp(22px, 5.5vw, 38px) !important;
}

@media (max-width: 480px) {
    .kcm-ui-core #view-mazot .mazot-action-card-media {
        display: none !important;
    }
}

/* Form gridleri: küçük cihazlarda dikeyleşsin */
@media (max-width: 480px) {
    .kcm-ui-core .u-flex-gap-6 {
        gap: 6px !important;
    }

    .kcm-ui-core .modal .u-flex-gap-6 {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .kcm-ui-core .modal .span-2 {
        grid-column: auto !important;
    }
}

/* Tablet düzeni */
@media (min-width: 769px) and (max-width: 1024px) {
    .kcm-ui-core .main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .kcm-ui-core .modal.active > .modal-content,
    .kcm-ui-core .modal.centered-modal.active > .modal-content {
        max-width: min(86vw, 680px) !important;
    }

    .kcm-ui-core #pdksTabloWrap table {
        min-width: 980px;
    }
}

/* Desktop QA */
@media (min-width: 1025px) {
    .kcm-ui-core .modal.active > .modal-content,
    .kcm-ui-core .modal.centered-modal.active > .modal-content {
        max-width: min(92vw, 720px);
    }

    .kcm-ui-core #pdksDetayModal.modal.active > .modal-content {
        max-width: 560px !important;
    }
}


/* =====================================================================
   v25 İzinler sekmesi — admin / operatör / izleyici tablo uyumu
   ===================================================================== */
.kcm-ui-core #view-izinler {
    --izin-row-pad-y: 7px;
    --izin-row-pad-x: 8px;
    --izin-border: var(--ui-border, var(--border));
}

.kcm-ui-core #view-izinler .izin-history-card {
    padding: 10px !important;
    overflow: visible !important;
}

.kcm-ui-core #view-izinler .izin-history-head {
    gap: 8px !important;
    align-items: center !important;
}

.kcm-ui-core #view-izinler .izin-history-tools {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

.kcm-ui-core #view-izinler .izin-history-tools button,
.kcm-ui-core #view-izinler .izin-history-tools select {
    min-height: 32px !important;
    border-radius: var(--ui-radius-sm, 6px) !important;
}

.kcm-ui-core #view-izinler .izin-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid var(--izin-border) !important;
    border-radius: var(--radius) !important;
    background: var(--ui-surface, var(--card-bg)) !important;
}

.kcm-ui-core #view-izinler .izin-table {
    width: 100% !important;
    min-width: 720px !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}

.kcm-ui-core #view-izinler .izin-table th,
.kcm-ui-core #view-izinler .izin-table td {
    box-sizing: border-box !important;
    padding: 2px 5px !important;
    line-height: 1.22 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--izin-border) 72%, transparent) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.kcm-ui-core #view-izinler .izin-table th {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    color: var(--ui-text-muted, var(--text-light)) !important;
    background: var(--ui-surface-soft, var(--bg)) !important;
}

.kcm-ui-core #view-izinler .izin-table td {
    font-size: 0.6562rem !important;
    color: var(--ui-text, var(--text)) !important;
}

.kcm-ui-core #view-izinler .izin-personel-cell {
    width: 170px !important;
    max-width: 170px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 750 !important;
}

.kcm-ui-core #view-izinler .izin-date-cell {
    width: 66px !important;
    text-align: center !important;
    font-weight: 750 !important;
}

.kcm-ui-core #view-izinler .izin-isbasi-cell {
    width: 92px !important;
    text-align: center !important;
    color: var(--ui-text-muted, var(--text-light)) !important;
}

.kcm-ui-core #view-izinler .izin-gun-cell {
    width: 48px !important;
    text-align: center !important;
}

.kcm-ui-core #view-izinler .izin-actions-th,
.kcm-ui-core #view-izinler .izin-actions-cell {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    text-align: center !important;
}

.kcm-ui-core #view-izinler .izin-menu-btn {
    min-width: 32px !important;
    width: 32px !important;
    min-height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--ui-radius-sm, 6px) !important;
}

.kcm-ui-core #view-izinler .izin-menu-popup {
    border-radius: var(--ui-radius, 8px) !important;
    overflow: hidden !important;
}

.kcm-ui-core #view-izinler .pager {
    margin-top: 8px !important;
    border-radius: var(--ui-radius, var(--radius)) !important;
}

/* İzleyici / operatör / admin rol farkından doğan dar-ferah görüntüyü azalt */
.kcm-ui-core #view-izinler:not(:has(#izin_form)) .izin-history-card {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .kcm-ui-core #view-izinler .izin-history-head {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        row-gap: 4px !important;
    }

    .kcm-ui-core #view-izinler .izin-history-tools {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }

    .kcm-ui-core #view-izinler .izin-history-tools button,
    .kcm-ui-core #view-izinler .izin-history-tools select {
        width: 100% !important;
    }

    .kcm-ui-core #view-izinler .izin-table {
        min-width: 660px !important;
    }

    .kcm-ui-core #view-izinler .izin-table th,
    .kcm-ui-core #view-izinler .izin-table td {
        padding: 2px 5px !important;
    }
}

@media (max-width: 480px) {
    .kcm-ui-core #view-izinler .izin-history-card {
        padding: 8px !important;
    }

    .kcm-ui-core #view-izinler .izin-table {
        min-width: 620px !important;
    }

    .kcm-ui-core #view-izinler .izin-table th,
    .kcm-ui-core #view-izinler .izin-table td {
        padding: 5px 6px !important;
        font-size: var(--fs-xs) !important;
    }

    .kcm-ui-core #view-izinler .izin-personel-cell {
        width: 145px !important;
        max-width: 145px !important;
    }
}


/* =====================================================================
   v26 İzinler tablosu final: scrollsuz, tam isim, hizalı başlık/veri
   ===================================================================== */

/* Scroll çıkmasın: tablo her çözünürlükte bulunduğu alana yayılsın */
.kcm-ui-core #view-izinler .izin-table-wrap {
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
}

.kcm-ui-core #view-izinler .izin-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    white-space: normal !important;
}

/* Sabit oranlı kolonlar: başlık ve veri aynı hizaya oturur */
.kcm-ui-core #view-izinler .izin-col-personel { width: 27%; }
.kcm-ui-core #view-izinler .izin-col-baslangic { width: 10%; }
.kcm-ui-core #view-izinler .izin-col-bitis { width: 10%; }
.kcm-ui-core #view-izinler .izin-col-isbasi { width: 16%; }
.kcm-ui-core #view-izinler .izin-col-gun { width: 7%; }
.kcm-ui-core #view-izinler .izin-col-tur { width: 22%; }
.kcm-ui-core #view-izinler .izin-col-rapor { width: 4%; }
.kcm-ui-core #view-izinler .izin-col-actions { width: 4%; }

.kcm-ui-core #view-izinler .izin-table th,
.kcm-ui-core #view-izinler .izin-table td {
    box-sizing: border-box !important;
    padding: 2px 5px !important;
    line-height: 1.22 !important;
    vertical-align: middle !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

/* Başlık hizaları */
.kcm-ui-core #view-izinler .izin-table th:nth-child(1),
.kcm-ui-core #view-izinler .izin-table td:nth-child(1) { text-align: left !important; }

.kcm-ui-core #view-izinler .izin-table th:nth-child(2),
.kcm-ui-core #view-izinler .izin-table th:nth-child(3),
.kcm-ui-core #view-izinler .izin-table th:nth-child(4),
.kcm-ui-core #view-izinler .izin-table th:nth-child(5),
.kcm-ui-core #view-izinler .izin-table th:nth-child(7),
.kcm-ui-core #view-izinler .izin-table th:nth-child(8),
.kcm-ui-core #view-izinler .izin-table td:nth-child(2),
.kcm-ui-core #view-izinler .izin-table td:nth-child(3),
.kcm-ui-core #view-izinler .izin-table td:nth-child(4),
.kcm-ui-core #view-izinler .izin-table td:nth-child(5),
.kcm-ui-core #view-izinler .izin-table td:nth-child(7),
.kcm-ui-core #view-izinler .izin-table td:nth-child(8) {
    text-align: center !important;
}

.kcm-ui-core #view-izinler .izin-table th:nth-child(6),
.kcm-ui-core #view-izinler .izin-table td:nth-child(6) {
    text-align: left !important;
}

/* İsimler tam çıksın: ellipsis kaldırıldı */
.kcm-ui-core #view-izinler .izin-personel-cell {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-weight: 800 !important;
}

/* Tür de kesilmesin */
.kcm-ui-core #view-izinler .izin-tur-cell {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
}

/* Desktop tabloda badge + ek ikonu daha kompakt */
.kcm-ui-core #view-izinler .izin-table .izin-mobile-badge {
    min-height: 18px !important;
    padding: 2px 7px !important;
    font-size: var(--fs-xs) !important;
}
.kcm-ui-core #view-izinler .izin-table .izin-mobile-attach {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: var(--fs-base) !important;
}

/* Tarih/gün hücreleri dar ama hizalı */
.kcm-ui-core #view-izinler .izin-date-cell,
.kcm-ui-core #view-izinler .izin-isbasi-cell,
.kcm-ui-core #view-izinler .izin-gun-cell {
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* Satır yüksekliğini bozan ikonlar yerine küçük açılır menü butonu */
.kcm-ui-core #view-izinler .izin-actions-th,
.kcm-ui-core #view-izinler .izin-actions-cell {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    text-align: center !important;
}

.kcm-ui-core #view-izinler .izin-menu-btn,
.kcm-ui-core #view-izinler .izin-doc-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: none !important;
    background: transparent !important;
    color: #000 !important;
    font-size: var(--fs-base) !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.kcm-ui-core #view-izinler .izin-doc-btn {
    font-size: var(--fs-sm) !important;
    cursor: pointer !important;
}

/* Açılır menü küçük ve satır yüksekliğine etki etmez */
.kcm-ui-core #view-izinler .izin-menu-popup {
    min-width: 112px !important;
    right: 0 !important;
    top: calc(100% + 2px) !important;
}

.kcm-ui-core #view-izinler .izin-menu-popup > div {
    min-height: 32px !important;
    padding: 7px 10px !important;
    font-size: 0.6875rem !important;
    line-height: 1.15 !important;
}

/* Mobil: font ve kolonlar daha kompakt; scroll yok */
@media (max-width: 768px) {
    .kcm-ui-core #view-izinler .izin-col-personel { width: 25%; }
    .kcm-ui-core #view-izinler .izin-col-baslangic { width: 10%; }
    .kcm-ui-core #view-izinler .izin-col-bitis { width: 10%; }
    .kcm-ui-core #view-izinler .izin-col-isbasi { width: 15%; }
    .kcm-ui-core #view-izinler .izin-col-gun { width: 7%; }
    .kcm-ui-core #view-izinler .izin-col-tur { width: 25%; }
    .kcm-ui-core #view-izinler .izin-col-rapor { width: 4%; }
    .kcm-ui-core #view-izinler .izin-col-actions { width: 4%; }

    .kcm-ui-core #view-izinler .izin-table th,
    .kcm-ui-core #view-izinler .izin-table td {
        padding: 5px 3px !important;
        font-size: 0.575rem !important;
        line-height: 1.12 !important;
    }

    .kcm-ui-core #view-izinler .izin-table th {
        font-size: 0.5312rem !important;
        letter-spacing: 0 !important;
    }

    .kcm-ui-core #view-izinler .izin-menu-btn,
    .kcm-ui-core #view-izinler .izin-doc-btn {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        font-size: var(--fs-sm) !important;
    }
}

@media (max-width: 480px) {
    .kcm-ui-core #view-izinler .izin-history-card {
        padding: 7px !important;
    }

    .kcm-ui-core #view-izinler .izin-col-personel { width: 24%; }
    .kcm-ui-core #view-izinler .izin-col-baslangic { width: 10%; }
    .kcm-ui-core #view-izinler .izin-col-bitis { width: 10%; }
    .kcm-ui-core #view-izinler .izin-col-isbasi { width: 15%; }
    .kcm-ui-core #view-izinler .izin-col-gun { width: 7%; }
    .kcm-ui-core #view-izinler .izin-col-tur { width: 26%; }
    .kcm-ui-core #view-izinler .izin-col-rapor { width: 4%; }
    .kcm-ui-core #view-izinler .izin-col-actions { width: 4%; }

    .kcm-ui-core #view-izinler .izin-table th,
    .kcm-ui-core #view-izinler .izin-table td {
        padding: 4px 2px !important;
        font-size: 0.5437rem !important;
    }

    .kcm-ui-core #view-izinler .izin-table th {
        font-size: 0.4875rem !important;
    }

    .kcm-ui-core #view-izinler .izin-isbasi-cell {
        font-size: 0.5062rem !important;
    }

    .kcm-ui-core #view-izinler .izin-menu-btn,
    .kcm-ui-core #view-izinler .izin-doc-btn {
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        font-size: 0.6875rem !important;
        border-radius: 5px !important;
    }
}

/* İzleyici modunda aksiyon kolonu yokken kalan kolonlar otomatik genişlesin */
.kcm-ui-core #view-izinler .izin-table:not(:has(.izin-actions-cell)) .izin-col-personel { width: 28%; }
.kcm-ui-core #view-izinler .izin-table:not(:has(.izin-actions-cell)) .izin-col-tur { width: 25%; }


/* =====================================================================
   v27 İzinler mobil kart görünümü
   ===================================================================== */
.kcm-ui-core #view-izinler .izin-mobile-list,
.kcm-ui-core #view-izinler .izin-mobile-hint {
    display: none;
}

.kcm-ui-core #view-izinler .izin-mobile-card {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(203,213,225,.9);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15,23,42,.06);
    padding: 14px 14px 13px;
    margin-bottom: 12px;
}

.kcm-ui-core #view-izinler .izin-mobile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.kcm-ui-core #view-izinler .izin-mobile-name {
    flex: 1 1 auto;
    min-width: 0;
    color: #0b1f5c;
    font-size: var(--fs-md);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.01em;
    word-break: break-word;
}

.kcm-ui-core #view-izinler .izin-mobile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}
.kcm-ui-core #view-izinler .izin-mobile-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 68px;
    flex: 0 0 68px;
}

.kcm-ui-core #view-izinler .izin-mobile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px !important;
    padding: 7px 12px;
    border-radius: 5px;
    font-size: 0.6875rem;
    line-height: 1.1;
    font-weight: 700;
    white-space: nowrap;
}
.kcm-ui-core #view-izinler .izin-mobile-badge.badge-yillik { background:#e8f6ea; color:#1f8a4c; }
.kcm-ui-core #view-izinler .izin-mobile-badge.badge-ucretsiz { background:#f0e7fa; color:#7b46c5; }
.kcm-ui-core #view-izinler .izin-mobile-badge.badge-kaza { background:#fde9df; color:#d46b1e; }
.kcm-ui-core #view-izinler .izin-mobile-badge.badge-rapor { background:#dc262669; color:#0d2b35; }
.kcm-ui-core #view-izinler .izin-mobile-badge.badge-evlilik { background:#f8e6f0; color:#ba3a74; }
.kcm-ui-core #view-izinler .izin-mobile-badge.badge-olum { background:#eef1f4; color:#475569; }
.kcm-ui-core #view-izinler .izin-mobile-badge.badge-default { background:#eef2f6; color:#334155; }

.kcm-ui-core #view-izinler .izin-mobile-menu-wrap {
    position: relative;
    flex: 0 0 auto;
}

.kcm-ui-core #view-izinler .izin-mobile-menu-btn,
.kcm-ui-core #view-izinler .izin-mobile-doc-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 12px;
    border: none;
    background: #fff;
    color: #0b1f5c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    line-height: 1;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

.kcm-ui-core #view-izinler .izin-mobile-popup {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: 180px !important;
    max-width: min(78vw, 220px);
}

.kcm-ui-core #view-izinler .izin-mobile-popup > div {
    min-height: 38px;
    font-size: var(--fs-sm) !important;
}

.kcm-ui-core #view-izinler .izin-mobile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    color: #5b6783;
    font-size: var(--fs-sm);
    line-height: 1.25;
}

.kcm-ui-core #view-izinler .izin-mobile-date,
.kcm-ui-core #view-izinler .izin-mobile-return,
.kcm-ui-core #view-izinler .izin-mobile-days {
    white-space: nowrap;
}

.kcm-ui-core #view-izinler .izin-mobile-days {
    color: #344054;
    font-weight: 700;
}

.kcm-ui-core #view-izinler .izin-mobile-sep {
    color: #a0aec0;
}

.kcm-ui-core #view-izinler .izin-mobile-empty {
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-light);
    background: var(--bg);
}

.kcm-ui-core #view-izinler .izin-mobile-hint {
    margin-top: 8px;
    color: #7b8798;
    font-size: 0.6875rem;
    text-align: center;
}
.kcm-ui-core #view-izinler .izin-mobile-hint-icon { margin-right: 6px; }

/* Ekipman Raporu Gönder modalı — kayıtlı alıcı listesi dar ekranda tam genişlik yığılsın
   (flex-wrap pill'ler dar modalda yarım satır boş bırakıp düzensiz görünüyordu) */
@media (max-width: 480px) {
    .kcm-ui-core #raporModal .rapor-alici-list {
        flex-direction: column !important;
    }
    .kcm-ui-core #raporModal .rapor-alici-pill {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Personel Listesi araç çubuğu — desktop: btn-grid'e flex/wrap yoktu (yalnızca mobil
   media query'de tanımlıydı), bu yüzden içindeki 4 öğe (Arşiv/Şartlı Onaylı butonları +
   Excel/Sütunlar'ın .u-pos-rel sarmalayıcı div'leri) block akışında üst üste 3 satıra
   dağılıyor, kart taşması (overflow:hidden) yüzünden üst satır kırpılmış görünüyordu. (v2026-08-27) */
.kcm-ui-core #view-muhasebe .per-list-toolbar {
    flex-wrap: wrap;
    row-gap: 6px;
}
.kcm-ui-core #view-muhasebe .per-list-btn-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Personel Listesi araç çubuğu — mobilde nizami 2 sütunlu düzen (v2026-08-26) */
@media (max-width: 768px) {
    .kcm-ui-core #view-muhasebe .per-list-head {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .kcm-ui-core #view-muhasebe .per-list-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .kcm-ui-core #view-muhasebe .per-list-btn-primary {
        width: 100% !important;
        min-height: 42px !important;
    }
    .kcm-ui-core #view-muhasebe .per-list-btn-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .kcm-ui-core #view-muhasebe .per-list-btn-grid > button,
    .kcm-ui-core #view-muhasebe .per-list-btn-grid > .u-pos-rel {
        width: 100% !important;
    }
    .kcm-ui-core #view-muhasebe .per-list-btn-grid button {
        width: 100% !important;
        min-height: 42px !important;
    }
    .kcm-ui-core #view-muhasebe .per-list-search {
        width: 100% !important;
        min-height: 42px !important;
    }
}

/* desktop/tablet table retains current table layout */
@media (max-width: 768px) {
    .kcm-ui-core #view-izinler .izin-table-wrap {
        display: none !important;
    }
    .kcm-ui-core #view-izinler .izin-mobile-list,
    .kcm-ui-core #view-izinler .izin-mobile-hint {
        display: block;
    }
    .kcm-ui-core #view-izinler .izin-history-card {
        padding: 10px !important;
        border-radius: 14px;
    }
    .kcm-ui-core #view-izinler .izin-history-tools {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .kcm-ui-core #view-izinler .izin-history-tools > * {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        font-size: var(--fs-base) !important;
        border-radius: 12px !important;
    }
    .kcm-ui-core #view-izinler .izin-history-tools button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .kcm-ui-core #view-izinler .pager {
        margin-top: 12px !important;
    }
}

@media (max-width: 480px) {
    .kcm-ui-core #view-izinler .izin-mobile-card {
        padding: 12px 12px 11px;
        border-radius: 14px;
        margin-bottom: 10px;
    }
    .kcm-ui-core #view-izinler .izin-mobile-top {
        gap: 8px;
        margin-bottom: 8px;
    }
    .kcm-ui-core #view-izinler .izin-mobile-name {
        font-size: 0.875rem;
    }
    .kcm-ui-core #view-izinler .izin-mobile-badge {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 0.6562rem;
        border-radius: 10px;
    }
    .kcm-ui-core #view-izinler .izin-mobile-menu-btn,
    .kcm-ui-core #view-izinler .izin-mobile-doc-btn {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        border-radius: 10px;
        font-size: 1.0625rem;
    }
    .kcm-ui-core #view-izinler .izin-mobile-popup {
        min-width: 164px !important;
        max-width: min(76vw, 204px);
    }
    .kcm-ui-core #view-izinler .izin-mobile-meta {
        gap: 6px 8px;
        font-size: 0.6875rem;
    }
}


/* =====================================================================
   v28 Kompakt izin kartları + Mazot tek ⋮ menü
   ===================================================================== */

/* İzin mobil kartları %20 daha kompakt ve daha düşük radius */
@media (max-width: 768px) {
    .kcm-ui-core #view-izinler .izin-mobile-card {
        padding: 5px 8px 5px !important;
        border-radius: 5px !important;
        margin-bottom: 6px !important;
        box-shadow: 0 3px 10px rgba(15, 23, 42, .045) !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-top {
        margin-bottom: -7px !important;
        gap: 7px !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-name {
        font-size: 0.825rem !important;
        line-height: 1.12 !important;
        letter-spacing: 0 !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-actions {
        gap: 6px !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-badge {
        min-height: 22px !important;
        padding: 2px 4px !important;
        border-radius: 3px !important;
        font-size: 0.6875rem !important;
        line-height: 1.0 !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: nowrap !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-menu-btn,
    .kcm-ui-core #view-izinler .izin-mobile-doc-btn {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 8px !important;
        font-size: var(--fs-md) !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-meta {
        font-size: 0.6562rem !important;
        gap: 4px 7px !important;
        line-height: 1.18 !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-popup {
        top: calc(100% + 6px) !important;
        min-width: 154px !important;
        border-radius: 10px !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-popup > div {
        min-height: 34px !important;
        padding: 8px 10px !important;
        font-size: 0.6875rem !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-hint {
        font-size: 0.6562rem !important;
        margin-top: 6px !important;
    }
}

@media (max-width: 480px) {
    .kcm-ui-core #view-izinler .izin-mobile-card {
        padding: 9px 10px 8px !important;
        border-radius: 10px !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-name {
        font-size: 0.8rem !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-badge {
        max-width: 112px !important;
        font-size: 0.5875rem !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-meta {
        font-size: 0.6375rem !important;
    }
}

/* Genel satır aksiyon menüsü */
.kcm-ui-core .kcm-row-menu-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    border: none !important;
    background: var(--ui-surface, #fff) !important;
    color: var(--ui-text-muted, #64748b) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.kcm-ui-core .kcm-row-menu-popup {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: var(--z-dropdown);
    min-width: 122px;
    overflow: hidden;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15,23,42,.14);
}

.kcm-ui-core .kcm-row-menu-item {
    min-height: 34px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text, #111827);
    font-size: 0.7188rem;
    font-weight: 800;
    cursor: pointer;
}

.kcm-ui-core .kcm-row-menu-item:hover {
    background: var(--bg, #f8fafc);
}

.kcm-ui-core .kcm-row-menu-item.danger {
    color: #DC2626;
    border-top: 1px solid var(--border, #e5e7eb);
}

.kcm-ui-core .kcm-row-menu-item.danger:hover {
    background: #FEF2F2;
}

/* Mazot tablo aksiyonları: kalem/X yerine tek menü */
.kcm-ui-core #view-mazot .mazot-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.kcm-ui-core #view-mazot .mazot-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.kcm-ui-core #view-mazot .mazot-table th,
.kcm-ui-core #view-mazot .mazot-table td {
    padding: 3px 7px !important;
    line-height: 1.12 !important;
    vertical-align: middle !important;
}

.kcm-ui-core #view-mazot .mazot-actions-th,
.kcm-ui-core #view-mazot .mazot-actions-cell {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    text-align: center !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap !important;
}

.kcm-ui-core #view-mazot .mazot-menu-popup {
    min-width: 116px !important;
}

@media (max-width: 768px) {
    .kcm-ui-core #view-mazot .mazot-table th,
    .kcm-ui-core #view-mazot .mazot-table td {
        padding: 5px 5px !important;
        font-size: 0.6562rem !important;
    }

    .kcm-ui-core #view-mazot .mazot-actions-th,
    .kcm-ui-core #view-mazot .mazot-actions-cell {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
    }

    .kcm-ui-core #view-mazot .mazot-menu-btn {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        border-radius: 7px !important;
    }
}


/* =====================================================================
   v29 Talep mobil kart + İzin menü boşluk fix + Mazot/Ekipman kart standardı
   ===================================================================== */

/* İzin açılır menüsündeki gri boşluğu oluşturan separator yüksekliğini kilitle */
.kcm-ui-core .izin-menu-popup .kcm-menu-sep,
.kcm-ui-core #view-izinler .izin-menu-popup .kcm-menu-sep {
    display: block !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    background: var(--border, #e5e7eb) !important;
}

/* Genel row menüde success rengi */
.kcm-ui-core .kcm-row-menu-item.success {
    color: #16A34A;
}
.kcm-ui-core .kcm-row-menu-item.success:hover {
    background: #F0FDF4;
}

/* Talep mobil kart görünümü */
.kcm-ui-core #view-talep .talep-mobile-list {
    display: none;
}

@media (max-width: 768px) {
    .kcm-ui-core #view-talep .talep-table {
        display: none !important;
    }

    .kcm-ui-core #view-talep .talep-table-wrap {
        padding: 0px !important;
        border-radius: 3px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .kcm-ui-core #view-talep .talep-mobile-list {
        display: block;
    }

    .kcm-ui-core #view-talep .talep-mobile-card {
        position: relative;
        background: var(--card-bg, #fff);
        border: 1px solid rgba(203,213,225,.92);
        border-radius: var(--radius);
        box-shadow: 0 3px 10px rgba(15,23,42,.045);
        padding: 10px 11px 9px;
        margin-bottom: 8px;
    }

    .kcm-ui-core #view-talep .talep-mobile-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin-bottom: 5px;
    }

    .kcm-ui-core #view-talep .talep-mobile-main {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 5px;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .kcm-ui-core #view-talep .talep-mobile-no {
        color: #0b1f5c;
        font-size: var(--fs-sm);
        font-weight: 850;
        line-height: 1.2;
        flex-shrink: 0;
    }

    .kcm-ui-core #view-talep .talep-mobile-date {
        color: var(--text-light, #6b7280);
        font-size: var(--fs-xs);
        line-height: 1.2;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kcm-ui-core #view-talep .talep-mobile-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        flex: 0 0 auto;
    }

    .kcm-ui-core #view-talep .talep-mobile-status,
    .kcm-ui-core #view-talep .talep-mobile-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 27px;
        padding: 5px 9px;
        border-radius: 8px;
        font-size: 0.6125rem;
        line-height: 1.05;
        font-weight: 800;
        white-space: nowrap;
    }

    .kcm-ui-core #view-talep .talep-mobile-badge.talep-badge-personel {
        background: #E8F0FF;
        color: #2C67D8;
    }

    .kcm-ui-core #view-talep .talep-mobile-badge.talep-badge-ekipman {
        background: #F0E7FA;
        color: #7B46C5;
    }

    .kcm-ui-core #view-talep .talep-mobile-menu-wrap {
        position: relative;
        flex: 0 0 auto;
    }

    .kcm-ui-core #view-talep .talep-mobile-bottom {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0 5px;
        font-size: var(--fs-xs);
        line-height: 1.2;
        color: #5b6783;
        overflow: hidden;
        white-space: nowrap;
        margin-top: 5px;
    }

    .kcm-ui-core #view-talep .talep-mb-detail {
        color: #344054;
        font-weight: 700;
        flex-shrink: 0;
    }

    .kcm-ui-core #view-talep .talep-mb-sure {
        color: #5b6783;
        flex-shrink: 0;
    }

    .kcm-ui-core #view-talep .talep-mb-birim {
        color: #5b6783;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kcm-ui-core #view-talep .talep-mb-lokasyon {
        color: #5b6783;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kcm-ui-core #view-talep .talep-mobile-sep {
        color: #a0aec0;
    }

    .kcm-ui-core #view-talep .talep-menu-popup {
        min-width: 126px;
    }

    .kcm-ui-core #view-talep .talep-summary-grid,
    .kcm-ui-core #view-talep .talep-subsummary-grid {
        gap: 6px !important;
    }
}

@media (max-width: 480px) {
    .kcm-ui-core #view-talep .talep-mobile-card {
        padding: 9px 10px 8px;
        border-radius: 10px;
    }

    .kcm-ui-core #view-talep .talep-mobile-no {
        font-size: 0.7875rem;
    }

    .kcm-ui-core #view-talep .talep-mobile-status,
    .kcm-ui-core #view-talep .talep-mobile-badge {
        min-height: 25px;
        padding: 5px 8px;
        font-size: 0.575rem;
    }

    .kcm-ui-core #view-talep .talep-mobile-bottom {
        font-size: 0.5938rem;
    }
}

/* Mazot görselini ekteki tasarıma sabitle: tek menü, kompakt satır, Yakıt Ekle canEdit ile korunur */
.kcm-ui-core #view-mazot .mazot-table-wrap {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 3px;
    overflow: hidden !important;
    background: var(--card-bg, #fff);
}

.kcm-ui-core #view-mazot .mazot-table th {
    background: #F8FAFC;
    color: #64748B;
    font-weight: 850;
    text-transform: none;
}

.kcm-ui-core #view-mazot .mazot-table td {
    color: #263445;
}

.kcm-ui-core #view-mazot .mazot-menu-popup {
    min-width: 118px !important;
}

/* Ekipman mobil kart görünümü */
@media (max-width: 768px) {
    .kcm-ui-core #view-ekipman .ekipman-list-wrap {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .kcm-ui-core #view-ekipman .ekipman-group-head {
        margin: 8px 0 6px !important;
        padding: 7px 10px !important;
        border: 1px solid var(--border, #e5e7eb) !important;
        border-left: 4px solid var(--primary-accent) !important;
        border-radius: 10px !important;
        background: var(--bg, #f8fafc) !important;
    }

    .kcm-ui-core #view-ekipman .ekipman-mobile-card {
        background: var(--card-bg, #fff);
        border: 1px solid rgba(203, 213, 225, .92) !important;
        border-radius: 3px;
        box-shadow: 0 3px 10px rgba(15, 23, 42, .045);
        padding: 5px 11px !important;
        margin-bottom: 8px;
    }

    .kcm-ui-core #view-ekipman .ekipman-mobile-card img,
    .kcm-ui-core #view-ekipman .ekipman-mobile-card > div:first-child {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 2px !important;
    }

    .kcm-ui-core #view-ekipman .ekipman-mobile-card .u-fs-11 {
        font-size: var(--fs-sm) !important;
    }

    .kcm-ui-core #view-ekipman .ekipman-mobile-card .u-text-light {
        font-size: var(--fs-xs) !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 480px) {
    .kcm-ui-core #view-ekipman .ekipman-mobile-card {
        padding: 5px 11px !important;
        border-radius: 3px;
        gap: 8px !important;
    }

    .kcm-ui-core #view-ekipman .ekipman-mobile-card img,
    .kcm-ui-core #view-ekipman .ekipman-mobile-card > div:first-child {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 2px !important;
    }
}


/* =====================================================================
   v30 İzin mobil kart rapor ataç göstergesi
   ===================================================================== */
.kcm-ui-core #view-izinler .izin-mobile-attach {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: #d97706 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
}

.kcm-ui-core #view-izinler .izin-mobile-attach:hover {
    background: transparent !important;
    border-color: transparent !important;
}

@media (max-width: 768px) {
    .kcm-ui-core #view-izinler .izin-mobile-actions {
        gap: 5px !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-attach {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        font-size: var(--fs-base) !important;
    }
}

@media (max-width: 480px) {
    .kcm-ui-core #view-izinler .izin-mobile-attach {
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        min-height: 26px !important;
        border-radius: 7px !important;
        font-size: var(--fs-sm) !important;
    }

    .kcm-ui-core #view-izinler .izin-mobile-badge {
        max-width: 104px !important;
    }
}


/* =====================================================================
   v31 İzin form kompakt: Gün küçük, İşbaşı textbox, ek önizleme kapalı
   ===================================================================== */
.kcm-ui-core #view-izinler > .card:first-of-type {
    padding: 8px 10px !important;
}

.kcm-ui-core #izin_form {
    --izin-form-gap: 6px;
}

.kcm-ui-core #izin_form .form-group {
    margin-bottom: 7px !important;
    gap: 4px !important;
}

.kcm-ui-core #izin_form label {
    font-size: 0.5938rem !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
}

.kcm-ui-core #izin_form .form-control,
.kcm-ui-core #izin_form select,
.kcm-ui-core #izin_form input {
    min-height: 34px !important;
    padding: 6px 9px !important;
    font-size: var(--fs-sm) !important;
    border-radius: var(--control-radius, var(--radius)) !important;
}

.kcm-ui-core #izin_form .u-flex-gap-6 {
    gap: var(--izin-form-gap) !important;
}

.kcm-ui-core #izin_form .izin-gun-form-group {
    flex: 0 0 72px !important;
    max-width: 72px !important;
}
.kcm-ui-core #izin_form .izin-tur-form-group {
    flex: 2 1 0 !important;
}

.kcm-ui-core #izin_form .izin-gun-input {
    text-align: center !important;
    font-weight: 850 !important;
}

.kcm-ui-core #izin_form .izin-isbasi-text {
    background: var(--bg, #f8fafc) !important;
    color: var(--text, #111827) !important;
    font-weight: 750 !important;
}

.kcm-ui-core #izin_form #izinRaporPreview,
.kcm-ui-core #izin_form .izin-rapor-preview-off {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.kcm-ui-core #izin_form #izinRaporName {
    font-size: var(--fs-xs) !important;
    max-width: 100% !important;
}

.kcm-ui-core #izin_form #izin_kaydet_btn {
    min-height: 38px !important;
    padding: 8px 40px !important;
    margin-top: 2px !important;
    width: auto !important;
}

.kcm-ui-core #izin_gun_notu {
    margin-top: 4px !important;
    font-size: 0.5938rem !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
}

@media (max-width: 768px) {
    .kcm-ui-core #izin_form .izin-date-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .kcm-ui-core #izin_form .izin-type-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .kcm-ui-core #izin_form .izin-gun-form-group {
        flex: 0 0 64px !important;
        max-width: 64px !important;
    }

    .kcm-ui-core #izin_form .izin-tur-form-group {
        flex: 2 1 0 !important;
        min-width: 0 !important;
    }
}

@media (max-width: 480px) {
    .kcm-ui-core #view-izinler > .card:first-of-type {
        padding: 7px 8px !important;
    }

    .kcm-ui-core #izin_form .form-control,
    .kcm-ui-core #izin_form select,
    .kcm-ui-core #izin_form input {
        min-height: 32px !important;
        padding: 5px 8px !important;
        font-size: 0.7188rem !important;
    }

    .kcm-ui-core #izin_form #izin_kaydet_btn {
        min-height: 36px !important;
    }
}


/* =====================================================================
   v32 UI kalite düzeltmeleri
   Kapsam: dashboard 8 kart, operasyon satırları, ekipman taşma,
   PDKS küçük ekran, sidebar aktif menü, rapor overlay X butonu.
   ===================================================================== */

/* 1) Küçük ekranda KPI kartları TEK SATIR + kompakt (2026-06-12) */
@media (max-width: 480px) {
    .kcm-ui-core .d-metric-row.row-5,
    .kcm-ui-core .d-metric-row.row-6,
    .kcm-ui-core .d-metric-row.row-7,
    .kcm-ui-core .d-metric-row.row-8 {
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
        overflow: visible !important;
        margin-bottom: 4px !important;
    }
    .kcm-ui-core .d-metric-row.row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    .kcm-ui-core .d-metric-row.row-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    .kcm-ui-core .d-metric-row.row-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    .kcm-ui-core .d-metric-row.row-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }

    .kcm-ui-core .d-metric-row .d-metric {
        min-width: 0 !important;
        padding: 4px 2px !important;
        border-radius: var(--ui-radius-sm, 6px) !important;
    }

    .kcm-ui-core .d-metric-row .d-metric-val,
    .kcm-ui-core .d-metric-row .d-metric-val.sm {
        font-size: clamp(10px, 2.9vw, 13px) !important;
        line-height: 1.05 !important;
    }

    .kcm-ui-core .d-metric-row .d-metric-lbl {
        font-size: clamp(6px, 1.8vw, 8px) !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Dashboard kartları kompakt: başlık/satır paddingleri düşük */
    .kcm-ui-core #view-dashboard .d-card { margin-bottom: 5px !important; }
    .kcm-ui-core #view-dashboard .d-acc-head,
    .kcm-ui-core #view-dashboard .d-band { padding: 6px 10px !important; font-size: var(--fs-xs) !important; }
    .kcm-ui-core #view-dashboard .d-list-row { padding: 4px 10px !important; font-size: 0.6562rem !important; }
    .kcm-ui-core #view-dashboard .dash-notify-row { padding: 4px 10px !important; }
    .kcm-ui-core #view-dashboard .d-section-title { padding: 7px 10px 4px !important; font-size: var(--fs-xs) !important; }
}

/* 2) Operasyon günlük satır/bar dokunma ve okunabilirlik düzeltmesi */
.kcm-ui-core .op-day-row {
    min-height: 38px !important;
    align-items: center !important;
    gap: 6px !important;
}

.kcm-ui-core .op-day-bars {
    min-height: 16px !important;
    justify-content: center !important;
    gap: 3px !important;
}

.kcm-ui-core .op-bar {
    height: 8px !important;
    min-height: 8px !important;
    border-radius: 4px !important;
}

@media (max-width: 480px) {
    .kcm-ui-core .op-day-row {
        min-height: 36px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .kcm-ui-core .op-bar {
        height: 7px !important;
        min-height: 7px !important;
    }
}

/* Operasyon sekme — kartlar daha büyük */
#view-operasyon .d-metric { padding: 10px 5px; }
#view-operasyon .d-metric-val.sm { font-size: 1.0625rem; }
#view-operasyon .d-metric-lbl { font-size: 0.5625rem; }
@media (max-width: 768px) {
    #view-operasyon .d-metric { padding: 7px 3px; }
    #view-operasyon .d-metric-val.sm { font-size: 0.875rem; }
    #view-operasyon .d-metric-lbl { font-size: var(--fs-2xs); }
}
@media (max-width: 480px) {
    #view-operasyon .d-metric-val.sm { font-size: var(--fs-sm); }
    #view-operasyon .d-metric-lbl { font-size: 0.4375rem; }
}

/* 3) Ekipman mobil kartta uzun açıklama / arıza metni sıkışmasın */
@media (max-width: 768px) {
    .kcm-ui-core #view-ekipman .ekipman-mobile-card {
        align-items: flex-start !important;
    }

    .kcm-ui-core #view-ekipman .ekipman-mobile-card > div {
        min-width: 0 !important;
    }

    .kcm-ui-core #view-ekipman .ekipman-mobile-card .u-text-light,
    .kcm-ui-core #view-ekipman .ekipman-mobile-card .u-dim,
    .kcm-ui-core #view-ekipman .ekipman-mobile-card small {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 3px 5px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}

/* 4) PDKS küçük ekranda hücreler daha dengeli */
@media (max-width: 480px) {
    .kcm-ui-core #pdksTabloWrap .compact-table th,
    .kcm-ui-core #pdksTabloWrap .compact-table td {
        padding: 3px 2px !important;
        font-size: 0.5625rem !important;
        line-height: 1.08 !important;
    }

    .kcm-ui-core #pdksTabloWrap .compact-table td div,
    .kcm-ui-core #pdksTabloWrap .compact-table td span {
        line-height: 1.08 !important;
    }

    .kcm-ui-core #pdksTabloWrap .compact-table th:first-child,
    .kcm-ui-core #pdksTabloWrap .compact-table td:first-child {
        min-width: 92px !important;
        max-width: 116px !important;
    }
}

/* 5) Desktop sidebar aktif menü daha net görünsün */
@media (min-width: 1025px) {
    .kcm-ui-core .menu-item.active,
    .kcm-ui-core .sidebar .menu-item.active,
    .kcm-ui-core .side-nav .menu-item.active {
        background: color-mix(in srgb, var(--ui-primary, var(--primary-accent)) 82%, #ffffff) !important;
        color: var(--ui-primary-text, var(--button-text, #111827)) !important;
        border-left-color: currentColor !important;
        font-weight: 850 !important;
    }

    .kcm-ui-core .menu-item.active .icon,
    .kcm-ui-core .menu-item.active span {
        color: inherit !important;
    }
}

/* 6) Rapor overlay kapatma butonu mobilde daha rahat tıklansın */
.kcm-ui-core #raporOverlay > button[onclick*="raporOverlayKapat"],
#raporOverlay > button[onclick*="raporOverlayKapat"] {
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: var(--fs-2xl) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 7) Bottom nav uzun etiket güvenliği */
@media (max-width: 1024px) {
    .kcm-ui-core .bottom-nav .nav-label,
    .kcm-ui-core .bottom-nav .nav-item span:last-child {
        font-size: clamp(7px, 2vw, 9px) !important;
        letter-spacing: -0.2px !important;
        line-height: 1.05 !important;
        max-width: 74px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* 8) Mazot Yakıt Ekle çok dar ekranda taşmasın */
@media (max-width: 480px) {
    .kcm-ui-core #view-mazot .mazot-action-card-text strong {
        font-size: clamp(8.5px, 2.7vw, 11px) !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }
}

/* 9) Modal içi yatay formlarda hafif nefes payı */
.kcm-ui-core .modal .u-flex-gap-6 {
    gap: 10px !important;
}

@media (max-width: 480px) {
    .kcm-ui-core .modal .u-flex-gap-6 {
        gap: 8px !important;
    }
}


/* =====================================================================
   v33 İzin/Rapor akışı + evrensel modal X standardı
   ===================================================================== */

/* Rapor ekleme alanı sadece Hastalık Raporu / İş Kazası türünde görünür */
.kcm-ui-core #izinRaporGroup.u-hidden,
.kcm-ui-core #izinRaporGroup[style*="display: none"] {
    display: none !important;
}

.kcm-ui-core #izinRaporGroup {
    border: 1px dashed var(--border, #d1d5db);
    border-radius: 10px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--bg, #f8fafc) 72%, #fff);
    margin-top: 17px !important;
}

.kcm-ui-core #izinRaporGroup label {
    margin-bottom: 6px !important;
}

.kcm-ui-core #izinRaporGroup > div {
    gap: 8px !important;
}

.kcm-ui-core #izin_gun_notu {
    background: #FEF3C7 !important;
    color: #92400E !important;
    border: 1px solid #FDE68A !important;
}

/* Gün alanı tamamen otomatik hesap alanı gibi dursun */
.kcm-ui-core #izin_gun[readonly] {
    background: var(--bg, #f8fafc) !important;
    color: var(--text, #111827) !important;
    cursor: default !important;
}

/* Tüm modallarda X butonu evrensel 44px ve standart margin */
.kcm-ui-core .modal .close-btn,
.kcm-ui-core .modal .ui-modal-close,
.kcm-ui-core .modal .modal-close,
.kcm-ui-core .modal button[onclick*="closeModal"],
.kcm-ui-core .modal button[onclick*="ModalKapat"],
.kcm-ui-core .modal button[onclick*="modalKapat"] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0px 10px 0px auto !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border, #e5e7eb) !important;
    background: var(--card-bg, #fff) !important;
    color: var(--text-light, #6b7280) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    flex: 0 0 44px !important;
}

.kcm-ui-core .modal .modal-content > div:first-child .close-btn,
.kcm-ui-core .modal .modal-content > .modal-header .close-btn {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.kcm-ui-core #izin_form_baslik {
    margin-bottom: 6px !important;
}

.kcm-ui-core #izin_form .izin-isbasi-form-group label::after {
    content: "  +1 otomatik";
    color: var(--text-tertiary, #9ca3af);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.5625rem;
}

@media (max-width: 768px) {
    .kcm-ui-core #izinRaporGroup {
        padding: 0px 7px;
        border-radius: 0px;
    }

    .kcm-ui-core #izinRaporGroup button {
        min-height: 32px !important;
    }
}


/* =====================================================================
   v34 Ekipman detay modal kompakt/kurumsal düzeltme
   ===================================================================== */

/* Modal genel ölçü: içeriği taşırmadan, footer'ı kırpmadan göster */
.kcm-ui-core #ekpDetailModal .ekp-detail-modal-content {
    width: min(92vw, 420px) !important;
    max-width: 420px !important;
    max-height: min(86dvh, 760px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 14px 12px !important;
    border-radius: 12px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Fotoğraf fazla yer kaplamasın */
.kcm-ui-core #ekpDetailModal .ekp-detail-photo-wrap {
    margin: 0 -14px 10px -14px !important;
    border-radius: 12px 12px 0 0 !important;
    max-height: 165px !important;
    overflow: hidden !important;
    background: var(--bg, #f8fafc) !important;
}

.kcm-ui-core #ekpDetailModal .ekp-detail-photo-img {
    width: 100% !important;
    height: 165px !important;
    max-height: 165px !important;
    object-fit: cover !important;
    display: block !important;
}

/* X butonu: 44px, 12px margin, foto üstünde rahat tıklanır */
.kcm-ui-core #ekpDetailModal .ekp-detail-x {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 8 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(226,232,240,.95) !important;
    background: rgba(255,255,255,.94) !important;
    color: #4b5563 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--fs-2xl) !important;
    line-height: 1 !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.13) !important;
}

/* Başlık alanı daha dengeli */
.kcm-ui-core #ekpDetailModal .ekp-detail-title {
    margin: 10px 0 6px !important;
    padding-right: 50px !important;
    gap: 9px !important;
}

.kcm-ui-core #ekpDetailModal #ekpDetIcon {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--fs-lg) !important;
}

.kcm-ui-core #ekpDetailModal #ekpDetAdi {
    font-size: 1rem !important;
    line-height: 1.12 !important;
}

.kcm-ui-core #ekpDetailModal #ekpDetSeri {
    font-size: var(--fs-xs) !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
}

.kcm-ui-core #ekpDetailModal .ekp-detail-badge-row {
    margin-bottom: 8px !important;
}

.kcm-ui-core #ekpDetailModal #ekpDetDurumBadge {
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: var(--fs-xs) !important;
    line-height: 1 !important;
}

/* Bilgi satırları %20 daha kompakt */
.kcm-ui-core #ekpDetailModal .ekp-detail-info-box {
    margin-bottom: 10px !important;
    padding: 2px 10px !important;
    border-radius: var(--radius) !important;
}

.kcm-ui-core #ekpDetailModal .ekp-detail-row {
    padding: 6px 0 !important;
    min-height: 31px !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.7188rem !important;
}

.kcm-ui-core #ekpDetailModal .ekp-detail-label {
    min-width: 82px !important;
    color: var(--text-light, #6b7280) !important;
    font-weight: 750 !important;
}

.kcm-ui-core #ekpDetailModal .ekp-detail-val {
    flex: 1 !important;
    min-width: 0 !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
    font-weight: 850 !important;
}

/* Durum üstte badge ile zaten göründüğü için tekrar satırını gizle */
.kcm-ui-core #ekpDetailModal .ekp-detail-status-row {
    display: none !important;
}

/* Arıza / not blokları daha kompakt */
.kcm-ui-core #ekpDetailModal #ekpDetArizaBlok,
.kcm-ui-core #ekpDetailModal #ekpDetNotlarBlok {
    margin-bottom: 10px !important;
}

.kcm-ui-core #ekpDetailModal #ekpDetArizaBlok {
    padding: 8px 10px !important;
    border-radius: 10px !important;
}

.kcm-ui-core #ekpDetailModal #ekpDetNotlar {
    padding: 7px 10px !important;
    border-radius: 10px !important;
    line-height: 1.3 !important;
}

/* Bakım alanı */
.kcm-ui-core #ekpDetailModal .ekp-detail-maint {
    margin-bottom: 8px !important;
}

.kcm-ui-core #ekpDetailModal .ekp-detail-maint-head {
    margin-bottom: 6px !important;
    gap: 8px !important;
}

.kcm-ui-core #ekpDetailModal .ekp-detail-maint-btn {
    min-height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-size: 0.6875rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.kcm-ui-core #ekpDetailModal #ekpDetBakimList {
    border-radius: 10px !important;
    background: var(--bg, #f8fafc) !important;
}

.kcm-ui-core #ekpDetailModal .ekp-bakim-empty {
    min-height: 40px !important;
    padding: 8px 10px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0.6875rem !important;
    line-height: 1.2 !important;
}

/* Footer aksiyonları kırpılmasın */
.kcm-ui-core #ekpDetailModal .ekp-detail-footer {
    display: grid !important;
    grid-template-columns: 1fr 46px !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin-top: 8px !important;
    padding: 10px 0 4px !important;
    border-top: 1px solid var(--border, #e5e7eb) !important;
    background: var(--card-bg, #fff) !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    overflow: visible !important;
}

.kcm-ui-core #ekpDetailModal .ekp-detail-edit-btn {
    min-height: 42px !important;
    height: auto !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    font-size: var(--fs-base) !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}

.kcm-ui-core #ekpDetailModal .ekp-detail-delete-btn {
    width: 46px !important;
    min-width: 46px !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--fs-lg) !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Mobilde daha kısa modal */
@media (max-width: 768px) {
    .kcm-ui-core #ekpDetailModal .ekp-detail-modal-content {
        width: min(86vw, 420px) !important;
        max-height: 82dvh !important;
        padding: 0 12px 10px !important;
        border-radius: var(--radius) !important;
    }

    .kcm-ui-core #ekpDetailModal .ekp-detail-photo-wrap {
        margin-left: -12px !important;
        margin-right: -12px !important;
        max-height: 150px !important;
    }

    .kcm-ui-core #ekpDetailModal .ekp-detail-photo-img {
        height: 150px !important;
        max-height: 150px !important;
    }

    .kcm-ui-core #ekpDetailModal .ekp-detail-x {
        top: 10px !important;
        right: 10px !important;
    }

    .kcm-ui-core #ekpDetailModal .ekp-detail-row {
        padding: 5px 0 !important;
        min-height: 29px !important;
    }

    .kcm-ui-core #ekpDetailModal .ekp-detail-title {
        margin-top: 8px !important;
    }
}

@media (max-width: 480px) {
    .kcm-ui-core #ekpDetailModal .ekp-detail-modal-content {
        width: 86vw !important;
    }

    .kcm-ui-core #ekpDetailModal .ekp-detail-photo-wrap {
        max-height: 140px !important;
    }

    .kcm-ui-core #ekpDetailModal .ekp-detail-photo-img {
        height: 140px !important;
        max-height: 140px !important;
    }

    .kcm-ui-core #ekpDetailModal #ekpDetAdi {
        font-size: var(--fs-md) !important;
    }

    .kcm-ui-core #ekpDetailModal .ekp-detail-maint-btn {
        min-height: 32px !important;
        padding: 5px 9px !important;
    }

    .kcm-ui-core #ekpDetailModal .ekp-detail-edit-btn,
    .kcm-ui-core #ekpDetailModal .ekp-detail-delete-btn {
        height: auto !important;
        min-height: 40px !important;
    }
}


/* =====================================================================
   EKİPMAN DETAY MODAL — Compact DM redesign
   ===================================================================== */
.kcm-ui-core .ekp-dm { padding: 0 !important; overflow: hidden !important; border-radius: 14px !important; }

/* Header */
.kcm-ui-core .ekp-dm-head {
    display: flex !important; align-items: flex-start !important; gap: 10px !important;
    padding: 12px 14px 10px !important; border-bottom: 1px solid var(--border) !important;
}
.kcm-ui-core .ekp-dm-head-body { flex: 1 !important; min-width: 0 !important; }
.kcm-ui-core .ekp-dm-head-right {
    display: flex !important; flex-direction: column !important;
    align-items: flex-end !important; gap: 6px !important; flex-shrink: 0 !important;
}

/* Close button — sağ üst köşe, head-right içinde */
.kcm-ui-core .ekp-dm-close {
    width: 36px !important; height: 36px !important; border-radius: 50% !important;
    border: 1px solid var(--border) !important; background: var(--card-bg, #fff) !important;
    color: var(--text-light) !important; font-size: 1rem !important; line-height: 1 !important;
    cursor: pointer !important; display: flex !important; align-items: center !important;
    justify-content: center !important; padding: 0 !important; flex-shrink: 0 !important;
}

/* Thumbnail — close butonun hemen altında, head-right genişliğine uyumlu */
.kcm-ui-core .ekp-dm-thumb {
    width: 44px !important; height: 44px !important; border-radius: 6px !important;
    overflow: hidden !important; border: 1px solid var(--border) !important; background: var(--bg) !important;
    align-self: flex-end !important;
}
.kcm-ui-core .ekp-dm-thumb-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; cursor: zoom-in !important; }

.kcm-ui-core .ekp-dm-title { display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 4px !important; }
.kcm-ui-core .ekp-dm-icon { font-size: 0.875rem !important; flex-shrink: 0 !important; }
.kcm-ui-core .ekp-dm-name { font-size: var(--fs-md) !important; font-weight: 800 !important; color: var(--text) !important; line-height: 1.2 !important; }
.kcm-ui-core .ekp-dm-sub { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.kcm-ui-core .ekp-dm-badge { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; border-radius: 6px !important; font-size: var(--fs-xs) !important; font-weight: 700 !important; }
.kcm-ui-core .ekp-dm-seri { font-size: var(--fs-xs) !important; color: var(--text-light) !important; }

/* Info grid */
.kcm-ui-core .ekp-dm-grid {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    margin: 0 14px !important; padding: 4px 0 !important;
}
.kcm-ui-core .ekp-dm-cell { display: flex !important; flex-direction: column !important; padding: 5px 0 !important; border-bottom: 1px solid var(--border) !important; }
.kcm-ui-core .ekp-dm-cell:nth-child(odd) { padding-right: 12px !important; border-right: 1px solid var(--border) !important; }
.kcm-ui-core .ekp-dm-cell:nth-child(even) { padding-left: 12px !important; }
.kcm-ui-core .ekp-dm-cell:nth-last-child(-n+2) { border-bottom: none !important; }
.kcm-ui-core .ekp-dm-lbl { font-size: var(--fs-xs) !important; font-weight: 700 !important; color: var(--text-light) !important; margin-bottom: 1px !important; }
.kcm-ui-core .ekp-dm-val { font-size: var(--fs-sm) !important; font-weight: 800 !important; color: var(--text) !important; }

/* Arıza alert — display JS ile kontrol edilir (display:none inline başlangıç) */
.kcm-ui-core .ekp-dm-ariza {
    gap: 8px !important; align-items: flex-start !important;
    margin: 8px 14px !important; padding: 8px 10px !important;
    background: #FFFBEB !important; border: 1px solid #FCD34D !important; border-radius: 8px !important; font-size: 0.6875rem !important;
}
.kcm-ui-core .ekp-dm-ariza-txt { font-weight: 700 !important; color: var(--text) !important; }
.kcm-ui-core .ekp-dm-termin { font-size: var(--fs-xs) !important; color: #D97706 !important; margin-top: 2px !important; }

/* Notlar */
.kcm-ui-core .ekp-dm-notlar {
    margin: 4px 14px 6px !important; padding: 6px 10px !important;
    background: var(--bg) !important; border-radius: 8px !important; font-size: 0.6875rem !important; color: var(--text) !important;
}

/* Sections */
.kcm-ui-core .ekp-dm-section { margin: 0 14px 8px !important; }
.kcm-ui-core .ekp-dm-sec-hd {
    font-size: 0.6875rem !important; font-weight: 700 !important; color: var(--text-light) !important;
    padding: 8px 0 5px !important; border-top: 1px solid var(--border) !important; margin-bottom: 6px !important;
}

/* Inline kayıt formu */
.kcm-ui-core .ekp-dm-form .ekp-dm-form-row {
    display: grid !important; grid-template-columns: 1.4fr 1fr 1.4fr 1fr !important; gap: 4px !important;
}
.kcm-ui-core .ekp-dm-form .ekp-dm-lbl { display: block !important; }
/* Date + select eşit yükseklik */
.kcm-ui-core .ekp-dm-form .form-control {
    font-size: 0.6875rem !important; padding: 0px 7px !important;
    height: 35px !important; min-height: 35px !important;
    box-sizing: border-box !important; line-height: 35px !important;
    border-radius: 6px !important;
}
.kcm-ui-core .ekp-dm-form select.form-control { padding-right: 4px !important; border-radius: 2px !important; }
.kcm-ui-core .ekp-dm-form-acik { display: flex !important; gap: 6px !important; margin-top: 6px !important; align-items: flex-end !important; }
.kcm-ui-core .ekp-dm-form-acik .form-control { flex: 1 !important; height: auto !important; min-height: 34px !important; line-height: 1.4 !important; padding: 6px 7px !important; resize: vertical !important; }
.kcm-ui-core .ekp-dm-submit { padding: 0 12px !important; height: 34px !important; min-height: 34px !important; font-size: var(--fs-base) !important; flex-shrink: 0 !important; border-radius: 6px !important; }

/* Geçmiş tablosu */
.kcm-ui-core .ekp-dm-history { border: 1px solid var(--border) !important; border-radius: 3px !important; overflow: hidden !important; }
.kcm-ui-core #ekpDetailModal #ekpDetBakimList { border-radius: 3px !important; }
.kcm-ui-core .ekp-dm-empty { padding: 12px !important; text-align: center !important; font-size: 0.6875rem !important; color: var(--text-light) !important; }
.kcm-ui-core .ekp-dm-tbl { width: 100% !important; border-collapse: collapse !important; font-size: 0.6875rem !important; }
.kcm-ui-core .ekp-dm-tbl thead th { background: var(--bg) !important; font-size: 0.6875rem !important; font-weight: 700 !important; color: var(--text-light) !important; padding: 4px 7px !important; text-align: left !important; border-bottom: 1px solid var(--border) !important; }
.kcm-ui-core .ekp-dm-tbl tbody tr { border-bottom: 1px solid var(--border) !important; }
.kcm-ui-core .ekp-dm-tbl tbody tr:last-child { border-bottom: none !important; }
.kcm-ui-core .ekp-dm-tbl td { padding: 0px 7px !important; vertical-align: middle !important; color: var(--text) !important; height: 28px !important; }
.kcm-ui-core .ekp-dm-td-tarih { white-space: nowrap !important; font-size: var(--fs-xs) !important; font-weight: 700 !important; color: var(--text-light) !important; }
.kcm-ui-core .ekp-dm-td-tip { white-space: nowrap !important; font-size: var(--fs-xs) !important; font-weight: 800 !important; }
.kcm-ui-core .ekp-dm-td-acik { font-size: var(--fs-xs) !important; color: var(--text-light) !important; max-width: 110px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.kcm-ui-core .ekp-dm-durum { display: inline-flex !important; align-items: center !important; padding: 2px 5px !important; border-radius: 8px !important; font-size: var(--fs-sm) !important; }
.kcm-ui-core .ekp-dm-del-row { background: none !important; border: none !important; color: var(--text-light) !important; cursor: pointer !important; font-size: 0.875rem !important; padding: 2px 3px !important; line-height: 1 !important; }
.kcm-ui-core .ekp-dm-sonraki { font-size: 0.5625rem !important; color: var(--text-light) !important; margin-top: 1px !important; }
.kcm-ui-core .ekp-dm-gecti { color: #DC2626 !important; font-weight: 800 !important; }
.kcm-ui-core .ekp-dm-foto { width: 100% !important; max-height: 90px !important; object-fit: cover !important; border-radius: 0 !important; cursor: zoom-in !important; display: block !important; }

/* Footer — kompakt, butonlar eşit yükseklik */
.kcm-ui-core .ekp-dm-footer {
    display: flex !important; gap: 6px !important; align-items: center !important;
    padding: 3px 4px !important; border-top: 1px solid var(--border) !important;
    background: var(--card-bg, #fff) !important; position: sticky !important; bottom: 0 !important; z-index: 5 !important;
    padding-bottom: max(3px, env(safe-area-inset-bottom, 0px)) !important;
}
.kcm-ui-core .ekp-dm-edit-btn,
.kcm-ui-core .btn.ekp-dm-edit-btn,
.kcm-ui-core .ui-btn.ekp-dm-edit-btn {
    flex: 1 !important; height: 34px !important; min-height: 34px !important;
    font-size: var(--fs-xs) !important; font-weight: 700 !important; border-radius: 4px !important; padding: 0 8px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    white-space: nowrap !important; overflow: hidden !important; min-width: 0 !important;
}
.kcm-ui-core .ekp-dm-del-btn {
    height: 34px !important; width: 34px !important; flex-shrink: 0 !important;
    background: #FEE2E2 !important; color: #DC2626 !important;
    border: 1px solid #FCA5A5 !important; border-radius: 4px !important; cursor: pointer !important;
    font-size: 0.875rem !important; display: flex !important; align-items: center !important; justify-content: center !important;
}

/* =====================================================================
   v35 Dashboard mobil okunabilirlik düzeltmeleri
   7 öneri: bildirim tarihi, iş günü kaybı etiketleri, mazot stok,
   mazot anomali, bölüm dağılımı, grafik boşluğu, bottom nav kontrastı.
   ===================================================================== */

/* 1) Bildirim satırı ve tarih okunabilirliği */
.kcm-ui-core #view-dashboard .dash-notify-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--border) !important;
}
.kcm-ui-core #view-dashboard .dash-notify-msg {
    min-width: 0 !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
.kcm-ui-core #view-dashboard .dash-notify-date {
    white-space: nowrap !important;
    color: #64748B !important;
    font-size: 0.5938rem !important;
    font-weight: 850 !important;
    background: rgba(255,255,255,.65) !important;
    border: 1px solid rgba(203,213,225,.65) !important;
    border-radius: 7px !important;
    padding: 2px 6px !important;
}

/* 2) İş günü kaybı: gün/kayıt bilgisini açık göster */
.kcm-ui-core #view-dashboard .dash-loss-chips {
    gap: 5px !important;
}
.kcm-ui-core #view-dashboard .dash-loss-chip {
    border-radius: 7px !important;
    padding: 5px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 104px !important;
}
.kcm-ui-core #view-dashboard .dash-loss-chip-main {
    font-size: var(--fs-xs) !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
}
.kcm-ui-core #view-dashboard .dash-loss-chip-sub {
    font-size: 0.6562rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

/* 3) Mazot stok alt bilgisini iki kolon yap */
.kcm-ui-core #view-dashboard .dash-mazot-foot {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 4px !important;
}
.kcm-ui-core #view-dashboard .dash-mazot-pct {
    color: var(--text-light) !important;
    font-size: 0.5938rem !important;
    font-weight: 750 !important;
}
.kcm-ui-core #view-dashboard .dash-mazot-mini {
    min-width: 72px !important;
    display: grid !important;
    gap: 1px !important;
    text-align: right !important;
}
.kcm-ui-core #view-dashboard .dash-mazot-mini span {
    color: var(--text-light) !important;
    font-size: var(--fs-xs) !important;
    font-weight: 700 !important;
}
.kcm-ui-core #view-dashboard .dash-mazot-mini strong {
    color: var(--text) !important;
    font-size: var(--fs-xs) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

/* 4) Mazot anomali satırlarını mobilde okunur hizala */
.kcm-ui-core #view-dashboard .dash-anom-row {
    display: grid !important;
    grid-template-columns: 20px 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 7px 12px !important;
    border-bottom: 1px solid rgba(220,38,38,.16) !important;
    background: #FEF2F2 !important;
}
.kcm-ui-core #view-dashboard .dash-anom-icon {
    font-size: var(--fs-base) !important;
}
.kcm-ui-core #view-dashboard .dash-anom-main {
    min-width: 0 !important;
}
.kcm-ui-core #view-dashboard .dash-anom-top {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
    color: #991B1B !important;
}
.kcm-ui-core #view-dashboard .dash-anom-top strong {
    font-size: 0.6875rem !important;
    font-weight: 900 !important;
}
.kcm-ui-core #view-dashboard .dash-anom-top span {
    font-size: 0.6562rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}
.kcm-ui-core #view-dashboard .dash-anom-sub {
    margin-top: 2px !important;
    color: #7F1D1D !important;
    font-size: 0.5625rem !important;
    font-weight: 650 !important;
}
.kcm-ui-core #view-dashboard .dash-anom-badge {
    background: #DC2626 !important;
    color: #fff !important;
    padding: 3px 7px !important;
    border-radius: 6px !important;
    font-size: var(--fs-xs) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* 5) Bölüm dağılımı: satırlar biraz daha kompakt */
.kcm-ui-core #view-dashboard .d-list-row {
    min-height: 28px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.kcm-ui-core #view-dashboard .d-list-name,
.kcm-ui-core #view-dashboard .d-list-val {
    line-height: 1.15 !important;
}

/* 6) Grafiklere alt boşluk ver, bottom nav ile nefes payı bırak */
.kcm-ui-core #view-dashboard .dash-chart-card .d-chart-wrap {
    overflow: visible;
    margin-bottom: 4px !important;
}
.kcm-ui-core #view-dashboard .dash-chart-card-last {
    margin-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 7) Bottom nav pasif ikon/metin kontrastı */
@media (max-width: 1024px) {
    .kcm-ui-core .bottom-nav .nav-item:not(.active),
    .kcm-ui-core .bottom-nav .nav-item:not(.active) .icon,
    .kcm-ui-core .bottom-nav .nav-item:not(.active) .nav-label {
        color: var(--text-light) !important;
        opacity: 1 !important;
        font-weight: 650 !important;
    }
    .kcm-ui-core .bottom-nav .nav-item.active,
    .kcm-ui-core .bottom-nav .nav-item.active .icon,
    .kcm-ui-core .bottom-nav .nav-item.active .nav-label {
        font-weight: 850 !important;
    }
}

@media (max-width: 480px) {
    .kcm-ui-core #view-dashboard .dash-notify-row {
        align-items: flex-start !important;
    }
    .kcm-ui-core #view-dashboard .dash-notify-date {
        font-size: 0.5625rem !important;
        padding: 2px 5px !important;
    }
    .kcm-ui-core #view-dashboard .dash-loss-chip {
        min-width: calc(50% - 4px) !important;
        padding: 5px 7px !important;
    }
    .kcm-ui-core #view-dashboard .dash-mazot-foot {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .kcm-ui-core #view-dashboard .dash-mazot-pct {
        grid-column: 1 / -1 !important;
    }
    .kcm-ui-core #view-dashboard .dash-mazot-mini {
        min-width: 0 !important;
        text-align: left !important;
        background: rgba(248,250,252,.75) !important;
        border: 1px solid rgba(226,232,240,.9) !important;
        border-radius: 7px !important;
        padding: 4px 6px !important;
    }
    .kcm-ui-core #view-dashboard .dash-anom-row {
        grid-template-columns: 18px 1fr auto !important;
        padding: 7px 10px !important;
        gap: 7px !important;
    }
}


/* === v36: dashboard mazot anomali + mobil PDKS kart görünümü === */
.kcm-ui-core #view-dashboard .dash-anom-row {
    grid-template-columns: 18px minmax(0, 1fr) auto auto !important;
    gap: 7px !important;
}
.kcm-ui-core #view-dashboard .dash-anom-main {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.kcm-ui-core #view-dashboard .dash-anom-name {
    color: #991B1B !important;
    font-size: 0.6875rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}
.kcm-ui-core #view-dashboard .dash-anom-sub-inline {
    color: #7F1D1D !important;
    font-size: 0.5625rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.kcm-ui-core #view-dashboard .dash-anom-val {
    color: #991B1B !important;
    font-size: 0.6875rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}
@media (max-width: 480px) {
    .kcm-ui-core #view-dashboard .dash-anom-row {
        grid-template-columns: 16px minmax(0, 1fr) auto auto !important;
        gap: 6px !important;
        padding: 7px 8px !important;
    }
    .kcm-ui-core #view-dashboard .dash-anom-name {
        font-size: 0.6562rem !important;
    }
    .kcm-ui-core #view-dashboard .dash-anom-sub-inline,
    .kcm-ui-core #view-dashboard .dash-anom-val,
    .kcm-ui-core #view-dashboard .dash-anom-badge {
        font-size: 0.5625rem !important;
    }
}

/* === v40: dashboard bento grid (desktop) — 12 kolonluk tek grid, .dash-col-left/right
   sadece DOM sarmalayıcısı olarak kalır (display:contents), kart yerleşimi dash-cell-*
   sınıflarıyla doğrudan üst gridde belirlenir. Kart içerikleri/onclick'leri değişmedi. */
@media (min-width: 1024px) {
    .kcm-ui-core #view-dashboard .dash-2col {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
    }
    .kcm-ui-core #view-dashboard .dash-col-left,
    .kcm-ui-core #view-dashboard .dash-col-right {
        display: contents;
    }
    .kcm-ui-core #view-dashboard .dash-cell { min-width: 0; margin-bottom: 0 !important; }
    .kcm-ui-core #view-dashboard .dash-cell-alerts        { grid-column: span 8; }
    .kcm-ui-core #view-dashboard .dash-cell-loss          { grid-column: span 4; align-self: start; }
    .kcm-ui-core #view-dashboard .dash-cell-opr           { grid-column: span 4; }
    .kcm-ui-core #view-dashboard .dash-cell-mazot         { grid-column: span 4; }
    .kcm-ui-core #view-dashboard .dash-cell-ekipman       { grid-column: span 4; }
    /* v41: Bölüm Dağılımı, Yıllık grafikle eşit boyutta aynı satırda eşleşsin (C:\1.jpg
       referansı) — Aylık grafik tek başına tam genişlik satıra alındı, DOM sırası
       değişmeden 'order' ile görsel sıralama yapıldı. */
    .kcm-ui-core #view-dashboard .dash-cell-chart-aylik   { grid-column: span 12; order: 1; }
    .kcm-ui-core #view-dashboard .dash-cell-dept          { grid-column: span 6; order: 2; }
    .kcm-ui-core #view-dashboard .dash-cell-chart-yillik  { grid-column: span 6; order: 3; }
    .kcm-ui-core #view-dashboard .dash-cell-gorev         { grid-column: span 12; }
    .kcm-ui-core #view-dashboard .dash-chart-card-last {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 768px) {
    .kcm-ui-core #view-pdks .pdks-toolbar {
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .kcm-ui-core #view-pdks .pdks-toolbar > .u-flex-1 {
        order: -1 !important;
        flex: 1 0 100% !important;
        text-align: left !important;
        font-size: var(--fs-sm) !important;
    }
    .kcm-ui-core #view-pdks .pdks-toolbar > div:last-child {
        margin-left: auto !important;
    }
    .kcm-ui-core #view-pdks .pdks-top-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .kcm-ui-core #view-pdks .pdks-top-grid .u-metric-card {
        padding: 7px 5px !important;
        min-height: 56px !important;
    }
    .kcm-ui-core #view-pdks .pdks-top-grid .tiny-lbl {
        font-size: var(--fs-2xs) !important;
    }
    .kcm-ui-core #pdksTabloWrap {
        overflow-x: auto !important;
    }
}


/* === v37: İş günü kaybı tek satır kapalı + PDKS hata düzeltme === */
.kcm-ui-core #view-dashboard .dash-loss-card {
    overflow: hidden !important;
}
.kcm-ui-core #view-dashboard .dash-loss-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 16px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
}
.kcm-ui-core #view-dashboard .dash-loss-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 900 !important;
}
.kcm-ui-core #view-dashboard .dash-loss-summary {
    font-size: var(--fs-xs) !important;
    font-weight: 700 !important;
    color: #7C3AED !important;
    background: rgba(124,58,237,.08) !important;
    border: 1px solid rgba(124,58,237,.12) !important;
    border-radius: 6px !important;
    padding: 2px 7px !important;
    white-space: nowrap !important;
}
.kcm-ui-core #view-dashboard .dash-loss-body {
    border-top: 1px solid rgba(124,58,237,.10) !important;
}
@media (max-width: 480px) {
    .kcm-ui-core #view-dashboard .dash-loss-head {
        grid-template-columns: minmax(0, 1fr) auto 14px !important;
        padding: 7px 10px !important;
        gap: 6px !important;
    }
    .kcm-ui-core #view-dashboard .dash-loss-title {
        font-size: var(--fs-xs) !important;
    }
    .kcm-ui-core #view-dashboard .dash-loss-summary {
        font-size: 0.5625rem !important;
        padding: 2px 6px !important;
    }
}


/* =====================================================================
   v38 PDKS mobil: kompakt liste + takvim detay / düşük radius
   ===================================================================== */

/* İş günü kaybı: tek satır, varsayılan kapalı ve kompakt */
.kcm-ui-core #view-dashboard .dash-loss-card {
    border-radius: var(--radius) !important;
    overflow: hidden !important;
}
.kcm-ui-core #view-dashboard .dash-loss-head {
    min-height: 36px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 14px !important;
    gap: 8px !important;
    align-items: center !important;
}
.kcm-ui-core #view-dashboard .dash-loss-title {
    font-size: 0.6562rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.kcm-ui-core #view-dashboard .dash-loss-summary {
    font-size: 0.6875rem !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}
.kcm-ui-core #view-dashboard .dash-loss-body {
    border-top: 1px solid rgba(124,58,237,.12) !important;
}

/* PDKS toolbar ve özet daha az yer kaplasın */
@media (max-width: 768px) {
    .kcm-ui-core #view-pdks .pdks-toolbar {
        flex-wrap: wrap !important;
        gap: 5px !important;
        padding: 1px 0 !important;
    }
    .kcm-ui-core #view-pdks .pdks-toolbar > .u-flex-1 {
        order: -1 !important;
        flex: 1 0 100% !important;
        text-align: left !important;
        font-size: var(--fs-sm) !important;
        line-height: 1 !important;
    }
    .kcm-ui-core #view-pdks .pdks-top-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }
    .kcm-ui-core #view-pdks .pdks-top-grid .u-metric-card {
        min-height: 48px !important;
        padding: 6px 4px !important;
        border-radius: 5px !important;
    }
    .kcm-ui-core #view-pdks .pdks-top-grid .u-metric-card > div:first-child {
        font-size: 0.875rem !important;
        line-height: 1 !important;
    }
    .kcm-ui-core #view-pdks .pdks-top-grid .tiny-lbl {
        font-size: 0.4688rem !important;
    }
}
/* =====================================================================
   Modal Buton & Metin Normalize — genel modal türleri için tek kaynak
   Ekipman detay modal (#ekpDetailModal) kendi özel kurallarına sahip,
   buraya dahil edilmiyor.
   ===================================================================== */

/* PDKS detay tablosundaki aksiyon butonları — compact table içinde küçük kalacak */
#pdksDetayModal #pdksDetayBody .compact-table button {
    min-height: unset !important;
    padding: 0 3px !important;
    line-height: 1 !important;
    background: none !important;
    border: none !important;
    font-size: var(--fs-xs) !important;
    box-shadow: none !important;
}

.modal:not(#ekpDetailModal) .modal-content .btn,
.modal:not(#ekpDetailModal) .ui-modal-content .btn,
.modal:not(#ekpDetailModal) .qa-modal-content .btn,
.modal:not(#ekpDetailModal) .modal-content button:not(.close-btn),
.modal:not(#ekpDetailModal) .ui-modal-content button:not(.close-btn),
.modal:not(#ekpDetailModal) .qa-modal-content button:not(.close-btn) {
    min-height: 30px !important;
    height: auto !important;
    padding: 3px 10px !important;
    font-size: 0.6875rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    border-radius: var(--button-radius, var(--radius, 8px)) !important;
    font-family: var(--font-main) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Birincil submit butonları daha belirgin — modalın altındaki ana aksiyon */
.modal:not(#ekpDetailModal) .modal-content button[type="submit"].btn-primary,
.modal:not(#ekpDetailModal) .ui-modal-content button[type="submit"].btn-primary,
.modal:not(#ekpDetailModal) .qa-modal-content button[type="submit"].btn-primary {
    min-height: 44px !important;
    padding: 11px 18px !important;
    font-size: 0.875rem !important;
}

/* Başlıklar */
.modal:not(#ekpDetailModal) .modal-content h2,
.modal:not(#ekpDetailModal) .ui-modal-content h2,
.modal:not(#ekpDetailModal) .qa-modal-content h2 {
    font-size: 1.0625rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.modal:not(#ekpDetailModal) .modal-content h3,
.modal:not(#ekpDetailModal) .ui-modal-content h3,
.modal:not(#ekpDetailModal) .qa-modal-content h3 {
    font-size: 0.875rem !important;
    font-weight: 800 !important;
}

.modal:not(#ekpDetailModal) .modal-content h4,
.modal:not(#ekpDetailModal) .ui-modal-content h4,
.modal:not(#ekpDetailModal) .qa-modal-content h4 {
    font-size: var(--fs-base) !important;
    font-weight: 700 !important;
}

/* Etiketler */
.modal:not(#ekpDetailModal) .modal-content label,
.modal:not(#ekpDetailModal) .ui-modal-content label,
.modal:not(#ekpDetailModal) .qa-modal-content label {
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
    color: var(--ui-text-muted, var(--text-light, #6B7280)) !important;
}

/* Form kontrolleri — yüzeyden hafif fark için surface-soft */
.modal:not(#ekpDetailModal) .modal-content .form-control,
.modal:not(#ekpDetailModal) .ui-modal-content .form-control,
.modal:not(#ekpDetailModal) .qa-modal-content .form-control {
    font-size: var(--fs-base) !important;
    min-height: 38px !important;
    background: var(--ui-surface-soft, var(--bg, #F9FAFB)) !important;
    border: 1px solid var(--ui-border, var(--border, #E5E7EB)) !important;
}

.modal:not(#ekpDetailModal) .modal-content .form-control:focus,
.modal:not(#ekpDetailModal) .ui-modal-content .form-control:focus,
.modal:not(#ekpDetailModal) .qa-modal-content .form-control:focus {
    background: var(--ui-surface, var(--card-bg, #fff)) !important;
    border-color: var(--ui-primary, var(--primary-accent, #D6D76B)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary, #D6D76B) 22%, transparent) !important;
    outline: none !important;
}

/* Mobilde biraz daha kompakt */
@media (max-width: 480px) {
    .modal:not(#ekpDetailModal) .modal-content .btn,
    .modal:not(#ekpDetailModal) .ui-modal-content .btn,
    .modal:not(#ekpDetailModal) .qa-modal-content .btn,
    .modal:not(#ekpDetailModal) .modal-content button:not(.close-btn),
    .modal:not(#ekpDetailModal) .ui-modal-content button:not(.close-btn),
    .modal:not(#ekpDetailModal) .qa-modal-content button:not(.close-btn) {
        font-size: var(--fs-xs) !important;
        padding: 3px 8px !important;
        min-height: 28px !important;
    }
    .modal:not(#ekpDetailModal) .modal-content button[type="submit"].btn-primary,
    .modal:not(#ekpDetailModal) .ui-modal-content button[type="submit"].btn-primary,
    .modal:not(#ekpDetailModal) .qa-modal-content button[type="submit"].btn-primary {
        min-height: 42px !important;
        padding: 10px 14px !important;
        font-size: var(--fs-base) !important;
    }
    .modal:not(#ekpDetailModal) .modal-content .form-control,
    .modal:not(#ekpDetailModal) .ui-modal-content .form-control,
    .modal:not(#ekpDetailModal) .qa-modal-content .form-control {
        font-size: var(--fs-sm) !important;
        min-height: 36px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== BOTTOM SHEET — Tüm mobil modallar (≤900px) ===== */
@media (max-width: 1024px) {
    /* Overlay: aşağı hizalı */
    .modal.active {
        align-items: flex-end !important;
        justify-content: stretch !important;
        padding: 0 !important;
    }

    /* Sheet paneli */
    .modal.active > .modal-content,
    .modal.centered-modal.active > .modal-content,
    .talep-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: 85dvh !important;
        border-radius: 12px 12px 0 0 !important;
        border: 1px solid var(--border) !important;
        border-bottom: none !important;
        background: var(--card-bg, #fff) !important;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1) !important;
        margin: 0 !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        animation: kcm-sheet-up 0.2s ease-out;
    }

    /* Drag handle */
    .modal.active > .modal-content::before,
    .modal.centered-modal.active > .modal-content::before {
        content: '';
        display: block;
        flex-shrink: 0;
        width: 40px;
        height: 4px;
        margin: 10px auto 0;
        border-radius: 2px;
        background: color-mix(in srgb, var(--text, #1e293b) 18%, transparent);
        pointer-events: none;
    }

    /* Başlık — üst köşe radius 0 (sheet köşeleri taşır) */
    .modal.active > .modal-content > h2,
    .modal.centered-modal.active > .modal-content > h2 {
        border-radius: 0 !important;
    }

    /* Kapat butonu — handle'ın hemen altında */
    .modal.active > .modal-content > .close-btn,
    .modal.centered-modal.active > .modal-content > .close-btn {
        top: 4px !important;
        border-radius: 8px !important;
        padding: 3px 12px !important;
    }
}

@keyframes kcm-sheet-up {
    from { transform: translateY(55%); opacity: 0.75; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ===== perDuzenleModal / yeniPersonelModal — kompakt form elemanları + gruplar ===== */
#perDuzenleModal .form-control,
#yeniPersonelModal .form-control {
    padding: 4px 7px !important;
    min-height: 28px !important;
    font-size: var(--fs-sm) !important;
}
#perDuzenleModal .u-form-lbl,
#yeniPersonelModal .u-form-lbl {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 1px;
}
#perDuzenleModal textarea.form-control,
#yeniPersonelModal textarea.form-control {
    min-height: 32px !important;
}
/* Readonly (görüntüleme) modu: soluklaştırma yerine tam kontrast, kilitli-kutu görünümü (pdmTcNo ile aynı dil) */
#perDuzenleModal .form-control:disabled,
#perDuzenleModal .form-control[disabled] {
    opacity: 1 !important;
    background: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text);
    cursor: default !important;
}
/* Section kartları */
.pdm-section {
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.22);
    border-radius: 6px;
    padding: 6px 10px 7px;
}
.pdm-section-hdr {
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--primary-accent);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--border);
}
.pdm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; }
#izinPersonelFiltre:focus-visible { outline: none; border-color: var(--primary-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-accent) 22%, transparent); }
.pdm-gecmis-row { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; }
.pdm-gecmis-row > div { flex: 1 1 340px; min-width: 0; margin-top: 6px !important; padding: 8px 10px; border-radius: 10px; overflow: hidden; }
#pdmIzinGecmisi { background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.28); }
#pdmPdksGecmisi { background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.28); }
@media (max-width: 768px) { .pdm-gecmis-row > div { flex: 1 1 100%; } }
.pdm-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px 10px; }
.pdm-grid4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 3px 10px; }
.pdm-sections-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 900px) {
    .pdm-sections-wrap { grid-template-columns: 1fr; }
}
/* perDuzenleForm: tüm radius'lar 2px (butonlar hariç) */
#perDuzenleForm input,
#perDuzenleForm select,
#perDuzenleForm textarea,
#perDuzenleForm table,
#perDuzenleForm .pdm-section,
#perDuzenleForm .pdm-gecmis-row > div,
#perDuzenleForm .form-control:not(button),
#yeniPersonelModal input,
#yeniPersonelModal select,
#yeniPersonelModal textarea,
#yeniPersonelModal .pdm-section,
#yeniPersonelModal .form-control:not(button) { border-radius: 2px !important; }

/* yeniPersonelModal — modal 560px'e sabitlendiği için bölümler daha sık aralıklı */
#yeniPersonelModal .pdm-section { padding: 5px 8px 6px; margin-bottom: 6px; }
#yeniPersonelModal .pdm-section-hdr { font-size: 0.5625rem; margin-bottom: 3px; padding-bottom: 2px; }
#yeniPersonelModal .pdm-grid3,
#yeniPersonelModal .pdm-grid4 { gap: 2px 8px; }
#yeniPersonelModal form > button[type="submit"] { min-height: 34px; padding: 7px !important; }

/* pdksHizliEditModal — kompakt boyutlar (varsayılan .form-control 36px / .btn 44px çok büyük kalıyordu) */
#pdksHizliEditModal .pdks-he-input { min-height: 30px !important; padding: 4px 6px !important; font-size: 0.75rem !important; }
#pdksHizliEditModal .pdks-he-btn { min-height: 32px !important; padding: 6px 10px !important; font-size: 0.75rem !important; }

/* pdksDetayModal mobil genişlik — overlay padding'i sıfırla, içerik tam oturur */
@media (max-width: 1024px) {
    #pdksDetayModal.modal.active,
    #pdksDetayModal.modal.centered-modal.active {
        padding: 4px !important;
    }
    #pdksDetayModal.modal.active > .modal-content,
    #pdksDetayModal.modal.active .modal-content {
        width: 90vw !important;
        max-width: 90vw !important;
        margin: 0 auto !important;
    }
}

/* ===== Scroll-to-top butonu ===== */
#_scrollTopBtn {
    position: fixed;
    bottom: calc(64px + var(--sab, 0px));
    right: 16px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: var(--z-dropdown);
    opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .2s;
    transform: translateY(8px);
}
#_scrollTopBtn.visible {
    opacity: 1; pointer-events: auto; transform: translateY(0);
}

/* ===== Fetch loading spinner ===== */
.u-btn-loading { position: relative; pointer-events: none; }
.u-btn-loading::after {
    content: '';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: inherit;
    border-radius: inherit;
}
.u-btn-loading::before {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: _ptr_spin .6s linear infinite;
    z-index: 1;
}

/* ===== Empty state ===== */
.u-empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px 20px; text-align: center;
    color: var(--text-light);
    gap: 8px;
}
.u-empty-state svg { opacity: .35; }
.u-empty-state strong { font-size: var(--fs-base); font-weight: 700; color: var(--text); }
.u-empty-state span { font-size: 0.6875rem; }

/* ── Personel Kart — Geçiş Animasyonu ───────────────── */
#personelKartDetay {
    animation: none;
}
#personelKartDetay.pkh-entered {
    animation: pkhSlideIn 0.22s cubic-bezier(0.25,0.46,0.45,0.94) both;
}
#personelKartDetay.pkh-leaving {
    animation: pkhSlideOut 0.22s cubic-bezier(0.55,0,1,0.45) both;
}
@keyframes pkhSlideIn {
    from { opacity:0; transform:translateX(32px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes pkhSlideOut {
    from { opacity:1; transform:translateX(0); }
    to   { opacity:0; transform:translateX(32px); }
}

/* ── Personel kart profil header ─────────────────────── */
.pkh-header { background:var(--card-bg); border-bottom:1px solid var(--border); padding:14px; border-top:3px solid var(--primary-accent); }
.pkh-back-fab { position:fixed; bottom:calc(var(--sab,0px) + 70px); right:16px; z-index:600; display:none; align-items:center; gap:6px; padding:10px 18px; background:var(--card-bg); color:var(--primary-accent); border:1.5px solid color-mix(in srgb,var(--primary-accent) 30%,var(--border)); border-radius: var(--radius-pill); font-size: var(--fs-base); font-weight:700; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.14); transition:background .15s; font-family:inherit; }
.pkh-back-fab:active { background:color-mix(in srgb,var(--primary-accent) 8%,var(--bg)); }
.pkh-top-row { display:flex; align-items:flex-start; gap:12px; }
.pkh-avatar-wrap { width:72px; height:72px; flex-shrink:0; border-radius:var(--radius); overflow:hidden; border:2px solid color-mix(in srgb,var(--primary-accent) 50%,transparent); background:color-mix(in srgb,var(--primary-accent) 10%,var(--bg)); display:flex; align-items:center; justify-content:center; }
.pkh-avatar-placeholder { font-size: var(--fs-2xl); line-height:1; }
.pkh-info { flex:1; min-width:0; }
.pkh-name { font-size: var(--fs-md); font-weight:800; color:var(--text); margin-bottom:2px; line-height:1.2; }
.pkh-meta { display:flex; align-items:center; gap:5px; margin-bottom:8px; flex-wrap:wrap; }
.pkh-meta-text { font-size: 0.6875rem; color:var(--text-light); font-weight:600; }
.pkh-meta-sep { color:var(--border); font-size: var(--fs-sm); }
.pkh-quick-btns { display:flex; gap:6px; flex-wrap:wrap; }
.pkh-side-btns { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.pkh-side-btns .pkh-action-btn { font-size: var(--fs-xs); padding:5px 8px; }
.pkh-icon-btn { width:34px; height:34px; padding:0 !important; font-size: 1rem !important; flex-shrink:0; }
#personelKartDetay .ios-group-title { padding:5px 10px 4px; font-size: var(--fs-xs); }
#personelKartDetay .ios-row { padding:4px 10px; min-height:26px; font-size: 0.6875rem; }
#personelKartDetay .ios-row-label { font-size: var(--fs-xs); min-width:80px; }
#personelKartDetay .ios-row-value { font-size: 0.6875rem; }
.pkh-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:12px; }
.pkh-stat { text-align:center; padding:7px 4px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); }
.pkh-stat-val { font-size: var(--fs-sm); font-weight:800; color:var(--primary-accent); line-height:1.2; }
.pkh-stat-lbl { font-size: 0.5625rem; font-weight:600; color:var(--text-light); text-transform:uppercase; letter-spacing:0.03em; margin-top:2px; }
.pkh-action-btn { display:flex; align-items:center; justify-content:center; gap:4px; padding:6px 10px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); font-size: 0.6875rem; font-weight:700; color:var(--text); cursor:pointer; text-decoration:none; transition:background .15s, color .15s, border-color .15s; white-space:nowrap; }
.pkh-action-btn:active { background:color-mix(in srgb, var(--primary-accent) 10%, var(--bg)); }
.pkh-action-btn.disabled { opacity:0.35; pointer-events:none; }
#pkh_btn_ara { color:#2563EB; border-color:#BFDBFE; }
#pkh_btn_ara:not(.disabled):hover { background:#EFF6FF; }
#pkh_btn_wa  { color:#16a34a; border-color:#bbf7d0; }
#pkh_btn_wa:not(.disabled):hover  { background:#f0fdf4; }
.pkh-admin-btn { color:var(--primary-accent); border-color:color-mix(in srgb,var(--primary-accent) 30%,var(--border)); }
.pkh-admin-btn:hover { background:color-mix(in srgb,var(--primary-accent) 8%,var(--bg)); }
.pkh-danger-btn { color:#DC2626 !important; border-color:#FCA5A5 !important; }
.pkh-danger-btn:hover { background:#FEF2F2 !important; }
.pkh-myk-banner { display:none; margin:8px 0 0; padding:8px 10px; background:#FEF3C7; border:1px solid #FDE68A; border-radius:var(--radius); border-left:3px solid #D97706; }
.pkh-myk-banner-text { font-size: 0.6875rem; font-weight:700; color:#92400E; line-height:1.4; }

/* ── Density system ──────────────────────────────────── */
[data-density="compact"] .card { padding: 7px 10px !important; }
[data-density="compact"] .compact-table th,
[data-density="compact"] .compact-table td { padding: 3px 6px !important; font-size: 0.6875rem !important; }
[data-density="compact"] .form-group { margin-bottom: 8px !important; }
[data-density="compact"] .ayar-section { padding: 8px !important; margin-bottom: 6px !important; }
[data-density="comfortable"] .card { padding: 16px 20px !important; }
[data-density="comfortable"] .compact-table th,
[data-density="comfortable"] .compact-table td { padding: 10px 14px !important; font-size: var(--fs-base) !important; }
[data-density="comfortable"] .form-group { margin-bottom: 16px !important; }

/* ── Card style system ───────────────────────────────── */
[data-card-style="accent-left"] .card { border-left: 3px solid var(--primary-accent) !important; }
[data-card-style="shadow-only"] .card { border-color: transparent !important; box-shadow: 0 2px 12px rgba(0,0,0,.10) !important; }
[data-card-style="outlined"] .card { border: 2px solid var(--border) !important; box-shadow: none !important; }

/* ── Widget order sortable (ayarlar) ─────────────────── */
.widget-sort-item { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:4px; cursor:grab; user-select:none; transition:background 0.1s; }
.widget-sort-item.dragging { opacity:0.4; }
.widget-sort-item.drag-over { background:color-mix(in srgb, var(--primary-accent) 8%, var(--card-bg)); border-color:var(--primary-accent); }
.widget-sort-handle { color:var(--text-tertiary); font-size: 0.875rem; line-height:1; }
.widget-sort-label { flex:1; font-size: var(--fs-sm); font-weight:600; color:var(--text); }
.widget-sort-badge { font-size: 0.5625rem; font-weight:700; padding:2px 6px; border-radius: var(--radius-pill); background:var(--bg); color:var(--text-light); border:1px solid var(--border); }

/* ── Density segment control ─────────────────────────── */
.density-seg { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.density-seg label { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 4px; cursor:pointer; transition:background 0.15s; gap:2px; }
.density-seg label:not(:last-child) { border-right:1px solid var(--border); }
.density-seg input[type=radio] { display:none; }
.density-seg input[type=radio]:checked + span { color:var(--primary-accent); font-weight:800; }
.density-seg label:has(input:checked) { background:color-mix(in srgb, var(--primary-accent) 8%, var(--card-bg)); }
.density-seg-icon { font-size: 1rem; line-height:1; }
.density-seg-lbl { font-size: var(--fs-xs); font-weight:600; color:var(--text-light); }

/* ── Card style picker ───────────────────────────────── */
.card-style-pick { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.card-style-opt { position:relative; cursor:pointer; }
.card-style-opt input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.card-style-opt-inner { border:2px solid var(--border); border-radius:var(--radius); padding:10px 6px; text-align:center; transition:0.15s; background:var(--card-bg); }
.card-style-opt input:checked ~ .card-style-opt-inner { border-color:var(--primary-accent); background:color-mix(in srgb, var(--primary-accent) 8%, var(--card-bg)); }
.card-style-opt-preview { height:28px; border-radius:4px; margin-bottom:6px; background:var(--bg); border:1px solid var(--border); }


/* ========== YENİ PERSONEL MODAL (YPK) ========== */
.ypk-tabs { display:flex; border-bottom:2px solid #E5E7EB; background:#F9FAFB; }
.ypk-tab { padding:10px 20px; font-size: 0.6875rem; font-weight:700; color:#9CA3AF; cursor:pointer; display:flex; align-items:center; gap:5px; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s; }
.ypk-tab.active { color:#1E3A5F; border-bottom-color:#1E3A5F; }
.ypk-tab-icon { border-radius:50%; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; font-size: var(--fs-2xs); font-weight:900; }
.ypk-tab-icon.req { background:#EF4444; color:#fff; }
.ypk-tab-icon.opt { background:#E5E7EB; color:#6B7280; }
.ypk-panel { display:none; padding:16px 20px; }
.ypk-panel.active { display:block; }
.ypk-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ypk-field { display:flex; flex-direction:column; gap:3px; }
.ypk-field.span2 { grid-column:1/-1; }
.ypk-label { font-size: 0.5625rem; font-weight:800; text-transform:uppercase; color:#6B7280; letter-spacing:.05em; }
.ypk-label .req-star { color:#EF4444; }
.ypk-input { border:1px solid #E5E7EB; border-radius:6px; padding:8px 10px; font-size: var(--fs-sm); color:#1F2937; background:#fff; font-family:inherit; width:100%; box-sizing:border-box; }
.ypk-input:focus { outline:none; border-color:#3B82F6; box-shadow:0 0 0 2px rgba(59,130,246,.15); }
.ypk-input.required-focus { border-color:#3B82F6; background:#EFF6FF; }
.ypk-toggle-group { display:flex; gap:6px; }
.ypk-toggle-btn { flex:1; border:1px solid #E5E7EB; border-radius:6px; padding:7px 6px; font-size: 0.6875rem; font-weight:600; color:#9CA3AF; background:#fff; cursor:pointer; text-align:center; transition:all .12s; }
.ypk-toggle-btn.selected { border-color:#1E3A5F; border-width:1.5px; color:#1E3A5F; background:#EFF6FF; font-weight:800; }
.ypk-footer { padding:12px 20px; border-top:1px solid #E5E7EB; background:#F9FAFB; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ypk-footer-right { display:flex; gap:8px; }
@media (max-width: 768px) { .per-summary-row { display:none !important; } }

/* Topbar — tüm kullanıcılar için (dashboard view dışında da yüklenir) */
.p-topbar {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 3px 4px 2px;
    justify-content: space-around;
    align-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 8px;
}
.p-topbar img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.p-topbar-info { flex: 1; }
.p-topbar-firma { font-size: 0.875rem; font-weight: 900; color: var(--text); line-height: 1.2; }
.p-topbar-sub { font-size: var(--fs-xs); color: var(--muted-text, #64748B); font-weight: 600; margin-top: 1px; }

/* =====================================================================
   v36 — MOBİL-FIRST QA FİX PAKETİ
   Mevcut yapıyı bozmaz; son katmanda override ile düzeltir.
   Hedef: dokunma hedefleri ≥44px, scroll güvenliği, font okunabilirliği,
          geçersiz CSS, breakpoint tutarsızlıkları, viewport erişilebilirliği.
   ===================================================================== */

/* ── FIX-1: body.modal-open touch-action düzeltmesi ──
   Sorun: touch-action:none tüm body'ye uygulanınca modal içi scroll kırılıyordu.
   Çözüm: backdrop'u kilitle, modal-content scroll'unu serbest bırak. */
body.modal-open {
    touch-action: pan-y !important;
}
body.modal-open .modal.active {
    touch-action: none;
}
body.modal-open .modal.active > .modal-content {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ── FIX-2: Dokunma hedefleri (Touch Targets) ≥44px ── */
@media (max-width: 1024px) {
    .ios-row {
        min-height: 44px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .ios-row.compact {
        min-height: 40px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    #personelKartDetay .ios-row {
        min-height: 40px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    .talep-action-btn {
        min-height: 36px !important;
        padding: 6px 12px !important;
    }
    .pager-btn,
    .pg-btn {
        min-width: 36px !important;
        height: 36px !important;
    }
    .close-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    #pdksDetayBody .pdks-action-btn,
    #pdksDetayModal .pdks-action-btn {
        min-height: 32px !important;
        padding: 6px 12px !important;
    }
    #pdksDetayBody .pdks-action-edit,
    #pdksDetayModal .pdks-action-edit,
    #pdksDetayBody .pdks-action-delete,
    #pdksDetayModal .pdks-action-delete {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ayar-cb-widget input[type="checkbox"],
    .ayar-cb-menu input[type="checkbox"],
    .u-cb-14 {
        width: 20px !important;
        height: 20px !important;
    }
}

@media (max-width: 768px) {
    .ios-row {
        min-height: 44px !important;
    }
    .talep-action-btn {
        min-height: 40px !important;
        padding: 8px 14px !important;
    }
    .pager-btn,
    .pg-btn {
        min-width: 40px !important;
        height: 40px !important;
    }
    .close-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
}

@media (max-width: 480px) {
    .close-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    .pager-btn,
    .pg-btn {
        min-width: 44px !important;
        height: 44px !important;
        font-size: var(--fs-sm) !important;
    }
    .kcm-ui-core #view-izinler .izin-mobile-attach {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }
}

/* Kısa ekran cihazlarda butonları 44px altına düşürme */
@media (max-width: 1024px) and (max-height: 740px) {
    .modal.active .btn,
    .modal.active button:not(.close-btn) {
        min-height: 40px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .modal.active .form-control,
    .modal.active input:not([type="hidden"]),
    .modal.active select,
    .modal.active textarea {
        min-height: 36px !important;
        padding: 7px 9px !important;
        font-size: var(--fs-base) !important;
    }
}

/* ── FIX-3: Geçersiz grid (repeat(0,...)) düzeltmesi ── */
@media (max-width: 768px) {
    .talep-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ── FIX-4: Tablet sidebar çakışması güvenliği ──
   769-1024px arası slim sidebar zaten !important ile çalışıyor;
   max-width:1024px bloğundaki display:none'un ezememesini garanti altına al. */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        display: flex !important;
        width: 60px !important;
        min-width: 60px !important;
    }
    .bottom-nav {
        display: none !important;
    }
    .app-header {
        display: none !important;
    }
    .main-content {
        padding-bottom: 16px !important;
    }
}

/* ── FIX-5: Minimum font boyutları (WCAG okunabilirlik) ── */
@media (max-width: 1024px) {
    .nav-item {
        font-size: var(--fs-xs) !important;
        padding: 4px 2px !important;
    }
    .nav-item .icon {
        font-size: 1.0625rem !important;
    }
}
@media (max-width: 480px) {
    .nav-item {
        font-size: 0.5625rem !important;
        padding: 3px 2px !important;
    }
    .nav-item .icon {
        font-size: 1rem !important;
    }
}

@media (max-width: 768px) {
    .kcm-ui-core #view-izinler .izin-table th {
        font-size: var(--fs-xs) !important;
    }
    .kcm-ui-core #view-izinler .izin-table td {
        font-size: 0.6562rem !important;
    }
    .compact-table th,
    .compact-table td {
        font-size: 0.6875rem !important;
    }
}

/* ── FIX-6: Tablo yatay scroll göstergesi ── */
@media (max-width: 768px) {
    .table-wrap,
    .talep-table-wrap,
    .u-scroll-x,
    .personel-list-table-wrap {
        position: relative !important;
        scrollbar-width: thin !important;
    }
    .table-wrap::-webkit-scrollbar,
    .talep-table-wrap::-webkit-scrollbar,
    .u-scroll-x::-webkit-scrollbar {
        height: 4px;
    }
    .table-wrap::-webkit-scrollbar-thumb,
    .talep-table-wrap::-webkit-scrollbar-thumb,
    .u-scroll-x::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--text) 25%, transparent);
        border-radius: 4px;
    }
}

/* =====================================================================
   v37 — TASARIM SİSTEMİ ALTYAPISI
   Modal şablon (.modal-header/.modal-body/.modal-footer),
   buton/input boyut prop class'ları (btn-sm, btn-xs, input-sm, input-xs).
   Mevcut bileşenlere dokunmaz; yeni kullanımlar için altyapı sağlar.
   ===================================================================== */

/* ── Modal şablon yapısal class'ları ── */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
    border-radius: var(--radius) var(--radius) 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.modal-header h2 {
    margin: 0 !important;
    font-size: var(--fs-md);
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}
.modal-header .close-btn {
    position: static !important;
    flex-shrink: 0;
}

.modal-body {
    padding: 14px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-footer {
    padding: 10px 16px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    background: var(--card-bg);
    border-radius: 0 0 var(--radius) var(--radius);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

@media (max-width: 1024px) {
    .modal-header {
        padding: 12px 14px;
        min-height: 48px;
    }
    .modal-header h2 {
        font-size: 1rem;
    }
    .modal-body {
        padding: 12px 14px;
    }
    .modal-footer {
        padding: 10px 14px calc(10px + var(--sab, 0px));
    }
}

@media (max-width: 480px) {
    .modal-header {
        padding: 10px 12px;
    }
    .modal-body {
        padding: 10px 12px;
    }
    .modal-footer {
        padding: 8px 12px calc(8px + var(--sab, 0px));
    }
}

/* ── Buton boyut prop class'ları ── */
.btn-lg {
    min-height: var(--btn-height, 44px) !important;
    padding: 12px 20px !important;
    font-size: var(--fs-md) !important;
}
.btn-sm {
    min-height: var(--btn-height-sm, 36px) !important;
    padding: 6px 14px !important;
    font-size: var(--fs-sm) !important;
}
.btn-xs {
    min-height: var(--btn-height-xs, 28px) !important;
    padding: 4px 10px !important;
    font-size: 0.6875rem !important;
}

/* ── Input/select boyut prop class'ları ── */
.input-lg {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: var(--fs-md) !important;
}
.input-sm {
    min-height: 30px !important;
    padding: 4px 8px !important;
    font-size: var(--fs-sm) !important;
}
.input-xs {
    min-height: 24px !important;
    padding: 3px 6px !important;
    font-size: 0.6875rem !important;
}

/* ── Buton genişlik yardımcıları ── */
.btn-block {
    display: flex !important;
    width: 100% !important;
}
.btn-icon {
    width: var(--btn-height-sm, 36px) !important;
    height: var(--btn-height-sm, 36px) !important;
    min-height: var(--btn-height-sm, 36px) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-icon.btn-xs {
    width: var(--btn-height-xs, 28px) !important;
    height: var(--btn-height-xs, 28px) !important;
    min-height: var(--btn-height-xs, 28px) !important;
}

/* =====================================================================
   v38 — W3C RESPONSIVE REFLOW & WCAG 1.4.10 UYUMLULUK
   320px breakpoint, flex-wrap düzeltmeleri, modal reflow,
   bottom-nav taşma koruması, font-size minimum zemini,
   prefers-reduced-motion genişletme, rem token altyapısı.
   Mevcut kurallara dokunmaz; append-only override.
   ===================================================================== */

/* ── 0. REM TOKEN ALTYAPISI (T1) ──
   Mevcut px tokenları aynen kalır. Yeni bileşenler --fs-* kullanmalı.
   Tarayıcı font-size ayarına saygı duyar (WCAG 1.4.4). */
:root {
    --fs-2xs: 0.5rem;     /* 8px  @ 16px root */
    --fs-xs:  0.625rem;   /* 10px */
    --fs-sm:  0.75rem;    /* 12px */
    --fs-base: 0.8125rem; /* 13px */
    --fs-md:  0.9375rem;  /* 15px */
    --fs-lg:  1.125rem;   /* 18px */
    --fs-xl:  1.375rem;   /* 22px */
    --fs-2xl: 1.75rem;    /* 28px */
}

/* ── 1. FLEX CHILD TAŞMA KORUMASI (F3, F4) ── */
.main-content  { min-width: 0; }
.view-section  { min-width: 0; box-sizing: border-box; }
.card          { min-width: 0; }
.modal-content { min-width: 0; }

/* ── 2. FLEX-WRAP EKSİKLERİ (F1) ── */
.d-row         { flex-wrap: wrap; }
.ekp-detail-row { flex-wrap: wrap; }

/* ── 3. BOTTOM-NAV TAŞMA KORUMASI (F5) ──
   9 nav öğesi dar ekranda yatay scroll üretiyordu. */
.bottom-nav {
    overflow-x: clip !important;
    flex-wrap: nowrap !important;
}
.bottom-nav .nav-item {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}
.bottom-nav .nav-item .nav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 4. TABLO SCROLL GÜVENLİĞİ (H1-H6) ──
   min-width'li tablolar kendi wrapper'ları içinde kalsın. */
.u-scroll-x,
.talep-table-wrap,
.personel-list-table-wrap,
#pdksTabloWrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* PDKS tablo: sayfaya tam otursun, kendi dikey+yatay scroll'u içinde (masaüstü) —
   mobilde (≤768px) sayfa kendi kayıyor, bkz. #pdksTabloWrap overflow-y:visible override'ı. */
@media (min-width: 769px) {
    .kcm-ui-core #pdksTabloWrap {
        max-height: calc(100vh - 210px) !important;
        overflow-y: auto !important;
    }
    .kcm-ui-core #pdksTabloWrap thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }
}

/* ── 5. PDKS TABLO JS-INLINE OVERRIDE (H6, Z4) ── */
@media (max-width: 480px) {
    #pdksTabloWrap table th[style*="min-width"] {
        min-width: 20px !important;
    }
    #pdksTabloWrap table th:first-child {
        min-width: min(100px, 28vw) !important;
    }
    #pdksTabloWrap table {
        font-size: max(8px, 2.1vw) !important;
    }
}

/* ── 6. MODAL REFLOW — 320px/480px güvenliği (H7, Z3) ── */
@media (max-width: 480px) {
    #mazotModal .modal-content,
    #opModal .modal-content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
    .centered-modal .modal-content {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }
}

/* ── 7. GRID 481-768 ARALIĞI (F2, M2) ── */
@media (min-width: 481px) and (max-width: 767px) {
    .grid-container {
        grid-template-columns: 1fr 1fr !important;
    }
    .d-row-3 {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── 8. ADMİN PANEL İNLINE-STYLE OVERRIDE ── */
@media (max-width: 600px) {
    #sortable-table {
        min-width: 420px !important;
    }
    [style*="min-width:420px"] {
        min-width: 100% !important;
    }
    [style*="min-width:120px"] {
        min-width: 0 !important;
    }
    #personelListAra {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── 9. FONT-SIZE MİNİMUM ZEMİNİ (Z2) ── */
@media (max-width: 480px) {
    .compact-table:not(#pdksTabloWrap table) th,
    .compact-table:not(#pdksTabloWrap table) td {
        font-size: max(9px, 2.4vw) !important;
    }
}

/* ── 10. 320px BREAKPOINT — Galaxy Fold, iPhone SE, %400 zoom (M1, M2) ── */
@media (max-width: 359px) {
    /* Tüm grid'ler tek sütun */
    .d-row-4, .d-row-3, .d-row-2 {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    .grid-container {
        grid-template-columns: 1fr !important;
    }
    .dash-body {
        grid-template-columns: 1fr !important;
    }

    /* Ana içerik padding sıkıştır */
    .main-content {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* KPI kartlar kompakt */
    .d-kpi { padding: 8px !important; }
    .d-metric-val { font-size: 1.25rem !important; }
    .d-metric-lbl { font-size: 0.5625rem !important; }

    /* Kartlar */
    .card { padding: 6px !important; }
    .card-title { font-size: var(--fs-sm) !important; }

    /* Form öğeleri */
    .form-group label { font-size: 0.5625rem !important; }
    .form-control { padding: 6px 8px !important; font-size: var(--fs-base) !important; }

    /* Butonlar — dokunma hedefi 44px korunsun */
    .btn { padding: 8px 10px !important; font-size: var(--fs-sm) !important; }

    /* Nav kompakt */
    .bottom-nav .nav-item .nav-label {
        font-size: 0.4375rem !important;
    }
    .bottom-nav .nav-item .icon {
        font-size: 0.875rem !important;
    }

    /* Tablo hücreleri */
    .compact-table th, .compact-table td {
        padding: 2px 3px !important;
        font-size: var(--fs-2xs) !important;
    }

    /* İzin chip'leri */
    .izin-chip { padding: 2px 5px !important; font-size: 0.5625rem !important; }

    /* Modal — tam genişlik */
    .modal.active > .modal-content,
    .modal.centered-modal.active > .modal-content {
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        padding: 8px !important;
        padding-bottom: calc(8px + var(--sab, 0px)) !important;
    }
    .modal.active > .modal-content > h2,
    .modal-header h2 {
        font-size: 0.875rem !important;
    }
    .close-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: var(--fs-base) !important;
    }

    /* Personel arama — tam genişlik */
    #personelListAra {
        width: 100% !important;
    }

    /* iOS group satırları */
    .ios-row { padding: 5px 8px !important; font-size: 0.6875rem !important; }
    .ios-row-label { min-width: 70px !important; font-size: var(--fs-xs) !important; }

    /* Ayar grid'leri */
    .ayar-grid-3, .ayar-grid-2 {
        grid-template-columns: 1fr !important;
    }
    .settings-preset-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── 11. prefers-reduced-motion GENİŞLETME (S4) ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 12. YETKİ TABLOSU WRAP KORUMA ── */
@media (max-width: 1024px) {
    .ayar-acc-body > form > .u-scroll-x {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}

/* ── 13. PERSONEL LİSTE HEADER FLEX-WRAP ── */
@media (max-width: 480px) {
    .per-header-row,
    .per-topbar,
    [class*="per-header"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

/* ── 14. İZİN TABLO REFLOW ── */
@media (max-width: 480px) {
    .izin-table {
        min-width: 560px !important;
    }
}
@media (max-width: 359px) {
    .izin-table {
        min-width: 480px !important;
    }
    .izin-table th,
    .izin-table td {
        padding: 3px 4px !important;
        font-size: 0.5625rem !important;
    }
}

/* ── 15. TALEP TABLO REFLOW ── */
@media (max-width: 359px) {
    .talep-table,
    .talep-table-simple {
        min-width: 400px !important;
    }
    .talep-table th,
    .talep-table td,
    .talep-table-simple th,
    .talep-table-simple td {
        padding: 2px 3px !important;
        font-size: 0.5625rem !important;
    }
    .talep-status-pill {
        font-size: var(--fs-2xs) !important;
        padding: 1px 4px !important;
    }
}

/* ── 16. OPERASYON KARTLARı 320px ── */
@media (max-width: 359px) {
    .op-day-date { min-width: 36px !important; }
    .op-day-total { font-size: 0.875rem !important; min-width: 24px !important; }
    .op-card-list .ios-row { gap: 4px !important; }
}

/* ── 17. TOAST 320px TAŞMA ── */
@media (max-width: 359px) {
    .toast-container {
        width: calc(100% - 8px) !important;
        left: 4px !important;
        transform: none !important;
    }
    .toast {
        padding: 10px !important;
        font-size: var(--fs-sm) !important;
    }
}

/* ── 18. CENTERED-MODAL iOS REFLOW ── */
@media (max-width: 359px) {
    .centered-modal .modal-content {
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
    }
}

/* ── 19. SIDEBAR TABLET REFLOW (M3 subpixel fix) ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-content {
        width: calc(100% - 60px) !important;
        max-width: calc(100vw - 60px) !important;
    }
}

/* ── 20. AYARLAR ACCORDION 320px ── */
@media (max-width: 359px) {
    .ayar-acc-head {
        padding: 8px !important;
        font-size: var(--fs-sm) !important;
    }
    .ayar-acc-body {
        padding: 6px !important;
    }
    #view-ayarlar {
        padding: 4px !important;
    }
    .theme-preset-card {
        padding: 6px !important;
    }
}

/* =====================================================================
   v39 — KCM DESIGN SYSTEM: İNTERAKTİF ELEMENT STANDARTLARI
   WCAG 2.2 AA, Apple HIG (44px), Material Design uyumlu.
   Her element: default, hover, active, focus, disabled, error durumları.
   ===================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   A. GLOBAL FOCUS-VISIBLE (WCAG 2.4.7 — Klavye odak göstergesi)
   ═══════════════════════════════════════════════════════════════════════ */
*:focus { outline: none; }

.btn:focus-visible,
.form-control:focus-visible,
select.form-control:focus-visible,
textarea.form-control:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
.ds-toggle:focus-visible,
.ds-select-wrap select:focus-visible {
    outline: 2px solid var(--primary-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 var(--ds-focus-width) var(--ds-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════════════
   B. BUTONLAR (Button) — 4 varyasyon × 6 durum
   Mevcut .btn base'i (satır 310) korunur, eksik durumlar eklenir.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── B.1 Primary (Ana Aksiyon) ── */
.btn-primary:hover {
    background: var(--primary-strong, color-mix(in srgb, var(--primary-accent) 85%, #000));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-accent) 30%, transparent);
}
.btn-primary:active {
    background: var(--primary-strong);
    transform: scale(0.97);
    box-shadow: none;
}
.btn-primary:disabled,
.btn-primary.disabled {
    opacity: var(--ds-disabled-opacity);
    pointer-events: none;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── B.2 Secondary (İkincil) ── */
.btn-secondary:hover {
    background: color-mix(in srgb, var(--text) 6%, var(--bg));
    border-color: color-mix(in srgb, var(--text) 25%, var(--border));
}
.btn-secondary:active {
    background: color-mix(in srgb, var(--text) 10%, var(--bg));
    transform: scale(0.97);
}
.btn-secondary:disabled,
.btn-secondary.disabled {
    opacity: var(--ds-disabled-opacity);
    pointer-events: none;
    cursor: not-allowed;
}

/* ── B.3 Danger (Tehlike / Silme) ── */
.btn-danger:hover {
    background: #B91C1C;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}
.btn-danger:active {
    background: #991B1B;
    transform: scale(0.97);
    box-shadow: none;
}
.btn-danger:disabled,
.btn-danger.disabled {
    opacity: var(--ds-disabled-opacity);
    pointer-events: none;
    cursor: not-allowed;
}

/* ── B.4 Ghost (Hayalet — sadece metin/ikon) ── */
.btn-ghost {
    background: transparent;
    color: var(--text);
    border: none;
    box-shadow: none;
}
.btn-ghost:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}
.btn-ghost:active {
    background: color-mix(in srgb, var(--text) 12%, transparent);
    transform: scale(0.97);
}
.btn-ghost:disabled,
.btn-ghost.disabled {
    opacity: var(--ds-disabled-opacity);
    pointer-events: none;
    cursor: not-allowed;
}
.btn-ghost.ghost-primary { color: var(--primary-accent); }
.btn-ghost.ghost-primary:hover { background: color-mix(in srgb, var(--primary-accent) 8%, transparent); }
.btn-ghost.ghost-danger { color: var(--ds-error); }
.btn-ghost.ghost-danger:hover { background: color-mix(in srgb, var(--ds-error) 8%, transparent); }

/* ── B.5 Outline (Çerçeveli varyasyonlar) ── */
.btn-outline-primary {
    background: transparent;
    color: var(--primary-accent);
    border: 1.5px solid var(--primary-accent);
}
.btn-outline-primary:hover {
    background: color-mix(in srgb, var(--primary-accent) 8%, transparent);
}
.btn-outline-primary:active {
    background: color-mix(in srgb, var(--primary-accent) 15%, transparent);
    transform: scale(0.97);
}
.btn-outline-primary:disabled { opacity: var(--ds-disabled-opacity); pointer-events: none; }

.btn-outline-danger {
    background: transparent;
    color: var(--ds-error);
    border: 1.5px solid var(--ds-error);
}
.btn-outline-danger:hover {
    background: color-mix(in srgb, var(--ds-error) 8%, transparent);
}
.btn-outline-danger:active {
    background: color-mix(in srgb, var(--ds-error) 15%, transparent);
    transform: scale(0.97);
}
.btn-outline-danger:disabled { opacity: var(--ds-disabled-opacity); pointer-events: none; }

/* ── B.6 Success & Warning hover/active ── */
.btn-success:hover { background: #047857; box-shadow: 0 2px 8px rgba(5,150,105,0.25); }
.btn-success:active { background: #065F46; transform: scale(0.97); }
.btn-success:disabled { opacity: var(--ds-disabled-opacity); pointer-events: none; }
.btn-warning:hover { background: #B45309; box-shadow: 0 2px 8px rgba(217,119,6,0.25); }
.btn-warning:active { background: #92400E; transform: scale(0.97); }
.btn-warning:disabled { opacity: var(--ds-disabled-opacity); pointer-events: none; }

/* ── B.7 Global buton disabled ── */
.btn:disabled,
.btn.disabled {
    opacity: var(--ds-disabled-opacity);
    pointer-events: none;
    cursor: not-allowed;
    transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   C. INPUT / TEXTAREA — 6 durum
   Mevcut .form-control base'i (satır 304) korunur.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── C.1 Hover ── */
.form-control:hover:not(:focus):not(:disabled):not(.readonly) {
    border-color: color-mix(in srgb, var(--primary-accent) 40%, var(--border));
}

/* ── C.2 Disabled ── */
.form-control:disabled,
.form-control[disabled],
.form-control.disabled {
    opacity: var(--ds-disabled-opacity);
    background: var(--bg);
    cursor: not-allowed;
    pointer-events: none;
}

/* ── C.3 Error / Invalid ── */
.form-control.is-error,
.form-control:user-invalid,
.form-control[aria-invalid="true"] {
    border-color: var(--ds-error) !important;
    background: var(--ds-error-bg);
    box-shadow: 0 0 0 var(--ds-focus-width) color-mix(in srgb, var(--ds-error) 15%, transparent);
}
.form-control.is-error:focus,
.form-control:user-invalid:focus,
.form-control[aria-invalid="true"]:focus {
    border-color: var(--ds-error) !important;
    box-shadow: 0 0 0 var(--ds-focus-width) color-mix(in srgb, var(--ds-error) 30%, transparent);
}

/* ── C.4 Success / Valid ── */
.form-control.is-success,
.form-control[aria-invalid="false"].is-success {
    border-color: var(--ds-success) !important;
    box-shadow: 0 0 0 var(--ds-focus-width) color-mix(in srgb, var(--ds-success) 15%, transparent);
}

/* ── C.5 Yardımcı metin ── */
.form-hint {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary, var(--text-light));
    margin-top: 4px;
}
.form-hint.hint-error {
    color: var(--ds-error);
}
.form-hint.hint-success {
    color: var(--ds-success);
}

/* ── C.6 Form group error state propagation ── */
.form-group.has-error .form-control {
    border-color: var(--ds-error);
    background: var(--ds-error-bg);
}
.form-group.has-error label {
    color: var(--ds-error);
}

/* ═══════════════════════════════════════════════════════════════════════
   D. CHECKBOX — Custom tasarım, 6 durum
   Kullanım: <label class="ds-checkbox"><input type="checkbox"><span>Metin</span></label>
   ═══════════════════════════════════════════════════════════════════════ */
.ds-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
    min-height: 44px;
    padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ds-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    cursor: pointer;
    position: relative;
    transition: all var(--ds-transition);
    flex-shrink: 0;
}
.ds-checkbox input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid transparent;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    transition: border-color var(--ds-transition);
}
/* Hover */
.ds-checkbox:hover input[type="checkbox"]:not(:checked):not(:disabled) {
    border-color: var(--primary-accent);
    background: color-mix(in srgb, var(--primary-accent) 5%, var(--card-bg));
}
/* Checked */
.ds-checkbox input[type="checkbox"]:checked {
    background: var(--primary-accent);
    border-color: var(--primary-accent);
}
.ds-checkbox input[type="checkbox"]:checked::after {
    border-color: #fff;
}
/* Active */
.ds-checkbox input[type="checkbox"]:active:not(:disabled) {
    transform: scale(0.9);
}
/* Disabled */
.ds-checkbox input[type="checkbox"]:disabled {
    opacity: var(--ds-disabled-opacity);
    cursor: not-allowed;
}
.ds-checkbox:has(input:disabled) {
    opacity: var(--ds-disabled-opacity);
    cursor: not-allowed;
}
/* Error */
.ds-checkbox.is-error input[type="checkbox"] {
    border-color: var(--ds-error);
}
.ds-checkbox.is-error input[type="checkbox"]:checked {
    background: var(--ds-error);
    border-color: var(--ds-error);
}

/* ═══════════════════════════════════════════════════════════════════════
   E. RADIO BUTTON — Custom tasarım, 6 durum
   Kullanım: <label class="ds-radio"><input type="radio" name="x"><span>Metin</span></label>
   ═══════════════════════════════════════════════════════════════════════ */
.ds-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
    min-height: 44px;
    padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ds-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--card-bg);
    cursor: pointer;
    position: relative;
    transition: all var(--ds-transition);
    flex-shrink: 0;
}
.ds-radio input[type="radio"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%) scale(0);
    transition: all var(--ds-transition);
}
/* Hover */
.ds-radio:hover input[type="radio"]:not(:checked):not(:disabled) {
    border-color: var(--primary-accent);
    background: color-mix(in srgb, var(--primary-accent) 5%, var(--card-bg));
}
/* Checked */
.ds-radio input[type="radio"]:checked {
    border-color: var(--primary-accent);
    background: var(--card-bg);
}
.ds-radio input[type="radio"]:checked::after {
    background: var(--primary-accent);
    transform: translate(-50%, -50%) scale(1);
}
/* Active */
.ds-radio input[type="radio"]:active:not(:disabled) {
    transform: scale(0.9);
}
/* Disabled */
.ds-radio input[type="radio"]:disabled {
    opacity: var(--ds-disabled-opacity);
    cursor: not-allowed;
}
.ds-radio:has(input:disabled) {
    opacity: var(--ds-disabled-opacity);
    cursor: not-allowed;
}
/* Error */
.ds-radio.is-error input[type="radio"] {
    border-color: var(--ds-error);
}
.ds-radio.is-error input[type="radio"]:checked::after {
    background: var(--ds-error);
}

/* ═══════════════════════════════════════════════════════════════════════
   F. SELECT DROPDOWN — Custom ok işareti, 6 durum
   Kullanım: <div class="ds-select-wrap"><select class="form-control">...</select></div>
   ═══════════════════════════════════════════════════════════════════════ */
.ds-select-wrap {
    position: relative;
    display: block;
}
.ds-select-wrap select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    cursor: pointer;
    background: var(--bg);
}
.ds-select-wrap::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-light);
    pointer-events: none;
    transition: border-color var(--ds-transition);
}
/* Hover */
.ds-select-wrap:hover::after {
    border-top-color: var(--primary-accent);
}
.ds-select-wrap:hover select.form-control:not(:focus):not(:disabled) {
    border-color: color-mix(in srgb, var(--primary-accent) 40%, var(--border));
}
/* Focus — select'in kendi focus state'i */
.ds-select-wrap select.form-control:focus {
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 var(--ds-focus-width) var(--ds-focus-ring);
    background: var(--card-bg);
}
/* Disabled */
.ds-select-wrap select.form-control:disabled {
    opacity: var(--ds-disabled-opacity);
    cursor: not-allowed;
}
.ds-select-wrap:has(select:disabled)::after {
    opacity: var(--ds-disabled-opacity);
}
/* Error */
.ds-select-wrap.is-error select.form-control {
    border-color: var(--ds-error);
    background: var(--ds-error-bg);
}
.ds-select-wrap.is-error::after {
    border-top-color: var(--ds-error);
}

/* ═══════════════════════════════════════════════════════════════════════
   G. TOGGLE SWITCH — iOS tarzı, 6 durum
   Kullanım: <label class="ds-toggle"><input type="checkbox"><span class="ds-toggle-track"></span><span>Metin</span></label>
   ═══════════════════════════════════════════════════════════════════════ */
.ds-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
    min-height: 44px;
    padding: 4px 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ds-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.ds-toggle-track {
    position: relative;
    width: 44px;
    height: 26px;
    background: color-mix(in srgb, var(--text) 20%, var(--bg));
    border-radius: 13px;
    transition: background var(--ds-transition);
    flex-shrink: 0;
    border: 1px solid transparent;
}
.ds-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform var(--ds-transition);
}
/* Hover */
.ds-toggle:hover .ds-toggle-track {
    background: color-mix(in srgb, var(--text) 28%, var(--bg));
}
/* Checked (ON) */
.ds-toggle input:checked + .ds-toggle-track {
    background: var(--primary-accent);
}
.ds-toggle input:checked + .ds-toggle-track::after {
    transform: translateX(18px);
}
/* Checked Hover */
.ds-toggle:hover input:checked + .ds-toggle-track {
    background: var(--primary-strong, color-mix(in srgb, var(--primary-accent) 85%, #000));
}
/* Active */
.ds-toggle:active .ds-toggle-track::after {
    width: 24px;
}
.ds-toggle:active input:checked + .ds-toggle-track::after {
    transform: translateX(14px);
    width: 24px;
}
/* Disabled */
.ds-toggle:has(input:disabled) {
    opacity: var(--ds-disabled-opacity);
    cursor: not-allowed;
}
.ds-toggle input:disabled + .ds-toggle-track {
    cursor: not-allowed;
}
/* Focus-visible */
.ds-toggle input:focus-visible + .ds-toggle-track {
    outline: 2px solid var(--primary-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 var(--ds-focus-width) var(--ds-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════════════
   H. FORM GROUP LAYOUT — Label + input + hint kompozisyonu
   ═══════════════════════════════════════════════════════════════════════ */
.ds-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--space-3);
}
.ds-field > label,
.ds-field-label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-light);
}
.ds-field-required::after {
    content: ' *';
    color: var(--ds-error);
    font-weight: 800;
}
.ds-field.has-error > label,
.ds-field.has-error .ds-field-label {
    color: var(--ds-error);
}
.ds-field.has-error .form-control {
    border-color: var(--ds-error);
    background: var(--ds-error-bg);
}

/* ═══════════════════════════════════════════════════════════════════════
   I. CHECKBOX / RADIO GRUP LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
.ds-check-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ds-check-group.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}
.ds-check-group .ds-checkbox,
.ds-check-group .ds-radio {
    min-height: 40px;
}

/* ═══════════════════════════════════════════════════════════════════════
   J. MOBİL DOKUNMA HEDEFİ GARANTİLERİ (Apple HIG 44px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ds-checkbox,
    .ds-radio,
    .ds-toggle {
        min-height: 44px;
    }
    .ds-checkbox input[type="checkbox"],
    .ds-radio input[type="radio"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }
    .ds-checkbox input[type="checkbox"]::after {
        top: 3px;
        left: 7px;
        width: 5px;
        height: 10px;
    }
    .ds-toggle-track {
        width: 48px;
        height: 28px;
        border-radius: 14px;
    }
    .ds-toggle-track::after {
        width: 22px;
        height: 22px;
    }
    .ds-toggle input:checked + .ds-toggle-track::after {
        transform: translateX(20px);
    }
    .ds-toggle:active .ds-toggle-track::after {
        width: 26px;
    }
    .ds-toggle:active input:checked + .ds-toggle-track::after {
        transform: translateX(16px);
        width: 26px;
    }
    .ds-select-wrap select.form-control {
        min-height: 44px;
        font-size: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   K. DARK THEME UYUMLULUK
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root {
        --ds-error-bg: #450a0a;
        --ds-error-border: #7f1d1d;
        --ds-success-bg: #052e16;
        --ds-success-border: #14532d;
    }
}


/* =====================================================================
   v40 — "Ops Deck" görsel dili: Manrope başlıklar + IBM Plex Mono veri
   rakamları + ikon-chip rozetleri. Tema rengi (altın) sistem_ayarlari
   üzerinden geliyor (var(--primary-accent)); burada sabit hex yok,
   sadece yapısal/tipografik katman eklendi.
   ===================================================================== */
.kcm-ui-core .d-card-title,
.kcm-ui-core .d-card-head,
.kcm-ui-core .card-title,
.kcm-ui-core .header-title,
.kcm-ui-core .d-band,
.kcm-ui-core .dash-loss-title,
.kcm-ui-core h1, .kcm-ui-core h2, .kcm-ui-core h3 {
    font-family: 'Manrope', var(--font-main);
    letter-spacing: -.01em;
}

/* Dashboard KPI/özet rakamları: IBM Plex Mono — sadece gerçekten sayısal
   göstergeler, tablo hücreleri (isim vb. metin içerebildiğinden) hariç */
.kcm-ui-core .d-metric-val,
.kcm-ui-core .d-kpi-val,
.kcm-ui-core .d-list-val,
.kcm-ui-core .dash-loss-summary {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* İkon-chip: kart başlıklarındaki emoji için yuvarlak, kategori renkli rozet zemini */
.kcm-ui-core .ico-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px; font-size: 12px;
    flex-shrink: 0; line-height: 1;
    background: color-mix(in srgb, var(--primary-accent) 16%, white);
}
.kcm-ui-core .ico-chip.accent  { background: color-mix(in srgb, var(--primary-accent) 16%, white); }
.kcm-ui-core .ico-chip.success { background: color-mix(in srgb, var(--green, #16A34A) 14%, white); }
.kcm-ui-core .ico-chip.danger  { background: color-mix(in srgb, #DC2626 14%, white); }
.kcm-ui-core .ico-chip.violet  { background: color-mix(in srgb, #7C3AED 14%, white); }

/* KPI kartları (d-metric — Dashboard/Operasyon/Mazot/Ekipman/PDKS ortak
   bileşeni): eski üstteki düz renkli çizgi kaldırıldı, sade kart kaldı.
   İkon rozeti denendi, kullanıcı istemedi — markup'ta span.ico-chip hâlâ
   duruyor ama burada gizli; kart görünümü sade değer+etiket. */
.kcm-ui-core .d-metric::before { content: none; }
.kcm-ui-core .d-metric .ico-chip { display: none; }