/* ═══════════════════════════════════════════════════════════════════════════
   v23.6.5 — YAZI TİPLERİ SELF-HOST EDİLDİ

   Önceden Inter ve JetBrains Mono her açılışta fonts.googleapis.com +
   fonts.gstatic.com'dan çekiliyordu. Bu, satılabilirlik denetiminin son açık
   dış bağımlılığıydı: her kullanıcının IP'si ve ziyaret zamanı üçüncü tarafa
   gidiyor, ağ kesildiğinde yazı tipi düşüyor, CSP iki dış hosta açık kalıyordu.

   Yalnız latin + latin-ext alt kümeleri indirildi — Türkçe için latin-ext ŞART
   (ğ ş ı İ ç ö ü). unicode-range korunduğu için tarayıcı gereksiz alt kümeyi
   indirmez; Türkçe bir kullanıcı ~130 KB çeker, tamamı değil.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter/inter-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter/inter-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter/inter-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter/inter-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter/inter-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter/inter-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/jetbrains/jetbrains-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/jetbrains/jetbrains-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/jetbrains/jetbrains-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/jetbrains/jetbrains-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ============================================================
       MEVCUT KLASIK DARK TEMA — değişmedi, korundu
       Aşağıdaki tüm satırlar mevcut MerCont CSS'inin orijinalidir.
       ============================================================ */

    /* Base Variables (Shared) */
    --accent-blue: #b3840e;
    --accent-purple: #c99520;
    --accent-green: #34d399;
    --accent-orange: #fb923c;
    --accent-red: #f87171;
    --accent-terracotta: #e2725b;
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;

    /* Dark Mode FORCED (Default) */
    --primary-bg: #121214;
    --glass-bg: rgba(30, 30, 35, 0.5);
    --glass-border: rgba(255, 255, 255, 0.06);
    --text-main: #f0f0f0;
    --text-muted: #8b8b9a;

    /* 2026-09-24: kodda kullanılıp HİÇ tanımlanmamış renkler. --bg-card yedeksiz
       kullanıldığı 6 panelde (Ücret Yönetimi, Portal Logları, IICL Bültenler, Rapor
       Künyesi, Raporu İndir, QR) zemini ŞEFFAF bırakıyordu. Açık tema karşılıkları
       body.light-mode'da, tema yüzeyleri body[data-theme] bloklarında. Temaya göre
       değişen takma adlar (--text-secondary vb.) aşağıdaki `body` kuralındadır:
       :root'ta yazılan var() klasik-dark değerinde donar, temalara geçmez.
       Yeni bir var(--x) yazarken tanımlı mı diye grep'le. */
    --bg-card: #1a1a1e;          /* = .modal-content zemini */
    --accent-yellow: #fbbf24;
    --accent-cyan: #22d3ee;
    --bg-secondary: #1e293b;     /* kullanıldığı yerlerdeki yedek değerle aynı → görünüm değişmez */
    --bg-color: #1a1a1a;         /* 〃 */
    --accent: #38bdf8;           /* 〃 */

    /* ============================================================
       FAZ 1A — TEMA ALTYAPISI SKELETON (eklendi, görsel 0 etki)
       Aşağıdaki tokenlar yeni tema sistemine zemin hazırlar.
       Klasik Dark için varsayılan değerler — mevcut görünüm aynen.
       Yeni temalar (Endüstriyel/Karanlık/Saha/Mono) bu değişkenleri
       body[data-theme="..."] altında override edecek.
       ============================================================ */

    /* --- Yüzey katmanları (mevcut glassmorphism ile uyumlu) --- */
    --surface: var(--glass-bg);
    --surface-alt: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(255, 255, 255, 0.06);

    /* --- Sınırlar --- */
    --border: var(--glass-border);
    --border-strong: rgba(255, 255, 255, 0.12);

    /* --- Metin tonları --- */
    --text-faint: #5b5b6a;
    --on-accent: #121214;

    /* --- Statü semantikleri (rapor ve badge için stabil isimler) --- */
    --status-success: var(--accent-green);
    --status-warn: var(--accent-orange);
    --status-danger: var(--accent-red);
    --status-info: var(--accent-blue);
    --status-repair: var(--accent-orange);
    --status-waiting: var(--text-muted);
    --status-done: var(--accent-green);
    --status-out: var(--accent-red);
    --status-pti: var(--accent-purple);
    --status-wash: var(--accent-blue);

    /* --- Köşeler --- */
    --radius-sm: 8px;
    --radius-btn: 12px;
    --radius-input: 12px;
    --radius-card: 16px;
    --radius-pill: 999px;

    /* --- Tipografi takma isimleri (mevcut font-family üzerine alias) --- */
    --font-ui: var(--font-family);
    --font-num: var(--font-family);
    --num-features: normal;

    /* --- Yoğunluk (gelecekteki Saha teması için referans) --- */
    --row-h: 44px;
    --base-fs: 14px;
    --btn-h: 38px;
    --tap-target-min: 44px;

    /* --- Stil yönlendiriciler (yeni temalar override eder) --- */
    --status-style: pill;     /* pill | dot | bracket | maritime */
    --card-style: glass;      /* glass | flat | elevated | hard-border */
    --scheme: dark;           /* dark | light */
}

/* Unit Selection Styles */
#unit-selection-view {
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0 100px 0;
}

.unit-selection-container {
    width: 100%;
    max-width: 800px;
    padding: 20px;
}

.unit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.unit-card {
    padding: 35px 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
}

.unit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.unit-card.dry:hover {
    border-color: var(--accent-terracotta);
    background: rgba(226, 114, 91, 0.08);
}

.unit-card.reefer:hover {
    border-color: var(--accent-blue);
    background: rgba(200, 230, 0, 0.08);
}

.unit-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: 0.8px;
}

.unit-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.unit-card-icon {
    font-size: 4rem;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}

.unit-card.dry .unit-card-icon {
    color: var(--accent-terracotta);
}

.unit-card.reefer .unit-card-icon {
    color: var(--accent-blue);
}

@media (max-width: 600px) {
    .unit-grid {
        grid-template-columns: 1fr;
    }
}

/* Liquid Glass Unit Toggle */
.unit-toggle-container {
    display: flex;
    position: relative;
    background: rgba(30, 30, 35, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 3px;
    width: 140px;
    height: 34px;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.unit-toggle-segment {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    z-index: 2;
    transition: color 0.3s ease;
    letter-spacing: 0.5px;
}

.unit-toggle-segment.active {
    color: #fff;
}

.unit-toggle-active-bg {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    border-radius: 25px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.unit-toggle-container.dry-active .unit-toggle-active-bg {
    left: 3px;
    background: var(--accent-blue);
    box-shadow: 0 0 15px rgba(200, 230, 0, 0.4);
}

.unit-toggle-container.reefer-active .unit-toggle-active-bg {
    left: 50%;
    background: var(--accent-blue);
    box-shadow: 0 0 15px rgba(200, 230, 0, 0.4);
}

/* Update notification banner */
.update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    color: white;
    /* v22.1.3: iPhone Dynamic Island / notch altına düşmemesi için safe-area-inset-top */
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 12px;
    z-index: 10000;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.4s ease-out;
    font-weight: 600;
}

.update-banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .update-banner {
        padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
    }

    .update-banner-content {
        gap: 6px;
        font-size: 0.75rem;
    }

    .update-banner-content i {
        font-size: 1rem;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.update-banner.hidden {
    display: none;
}

/* Mobile-responsive folder shortcuts */
#folder-shortcuts-container {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    #folder-shortcuts-container {
        margin-top: 10px;
        gap: 6px;
    }

    #folder-shortcuts-container .btn {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }

    /* Move folder header elements on separate lines on mobile */
    .folder-view>div:first-child {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: var(--primary-bg);
    min-height: 100%;
    margin: 0;
    padding: 0;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none; /* block native bounce so custom pull-to-refresh works reliably  */
    position: relative;
    width: 100%;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    height: auto; /* Relaxed height to allow natural scrolling content  */
}

/* Contain the zoomed app root so pinch/button zoom >100% doesn't
   force the body to scroll horizontally.  */
/* v22.0.4: Body flex centering — zoom < 100%'de app-root yatayda
   ortalanmış kalır. Daha önce sola kayıyordu. position:fixed olan
   modallar bu flex flow'undan etkilenmez. */
html, body {
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

#mercont-app-root {
    max-width: 100vw;
    width: 100%;
    overflow-x: hidden;
    flex: 1 0 auto;
}

/* ===== v19.12.28: MODERN LOGIN & REGISTER UI ===== */
.modern-login-card {
    background: rgba(18, 18, 20, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    border-radius: 28px;
    padding: 40px;
    width: 90%;
    max-width: 420px;
}

.modern-input-group {
    margin-bottom: 20px;
    text-align: left;
}

.modern-input-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i.prefix-icon {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    font-size: 1.3rem;
    transition: color 0.3s;
}

.modern-input {
    width: 100%;
    padding: 14px 16px 14px 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: white;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 4px rgba(200, 230, 0, 0.15);
    outline: none;
}

.modern-input:focus + i.prefix-icon {
    color: var(--accent-blue);
}

/* Visibility toggle for password items */
.input-wrapper i.suffix-icon {
    position: absolute;
    right: 16px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.input-wrapper i.suffix-icon:hover {
    color: var(--accent-blue);
}

/* Custom Checkbox for Remember Me */
.remember-me-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    cursor: pointer;
    font-size: 0.9rem;
    /* v23.2.8: --text-muted (#555b63) koyu login zemininde ~2.5:1 kontrast veriyordu
       → "Beni Hatırla" yazısı okunmuyordu (telefonda "yazı yok" diye bildirildi).
       ⚠️ İlk düzeltmede --text-main kullandım ama login kartı HER TEMADA koyu
       (rgba(18,18,20,0.7)); --text-main aydınlık temalarda KOYU renk → yazı
       büsbütün kayboldu (review yakaladı). Kart sabit koyu olduğu için renk de
       SABİT açık olmalı — temaya bağlama. opacity yerine doğrudan alfa
       (checkbox'ı soldurmasın). */
    color: rgba(255, 255, 255, 0.82);
}

.remember-me-container input[type="checkbox"] {
    /* v23.2.1: global `input[type=checkbox]{appearance:auto!important;width:auto!important}` (checkbox-fix)
       bu özel kutuyu eziyordu → native tik + ::after ✓ çakışıp bozuk görünüyordu. !important ile geri al. */
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    flex: 0 0 20px;
    border-radius: 6px;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    background-image: none !important;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.remember-me-container input[type="checkbox"]:checked {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.remember-me-container input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    color: black;
    font-size: 0.8rem;
    font-weight: 800;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.modern-btn-primary {
    background: var(--accent-blue);
    color: black !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(200, 230, 0, 0.25);
    transition: all 0.3s;
    border: none;
    width: 100%;
}

.modern-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(200, 230, 0, 0.35);
}

.modern-btn-primary:active {
    transform: translateY(1px);
}

/* Global overlay constraint — prevents ANY fixed overlay from overflowing viewport on iOS */
/* WP-03b: `overflow: hidden !important` pencerelerin kendi `overflow-y:auto`sunu eziyordu
   (Ücret Yönetimi telefonda hiçbir müşteri satırını göstermiyordu, fareyle de kaymıyordu).
   Artık yalnız YATAY taşma kilitli; dikeyi pencere kendisi belirler. padding-top da
   !important değil → satır içi üst boşluklar (40px/30px/24px) geri geldi. iOS PWA'daki
   çentik boşluğu "@WP-03b" bölümündeki kuralla korunur. */
div[id$="-overlay"],
div[id$="-modal"],
div[id$="-modal-overlay"],
.modal-overlay {
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-top: env(safe-area-inset-top, 0px);
}

body {
    color: var(--text-main);
    font-family: var(--font-family);
    min-height: 100vh;
    background: #121214;
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 20px);

    /* 2026-09-24: tanımsız kullanılan takma adlar. BODY'de, çünkü temalar kendi
       değişkenlerini body üzerinde ezer (body.light-mode / body[data-theme]); var()
       burada çözülünce her tema kendi değerini alır.
       --text-secondary bilerek --text-main: tanımsızken miras alınan renk buydu (survey
       onay kutuları, ücret etiketleri); --text-muted'a bağlamak bugünkü görünümü
       değiştirip açık temada koyu kutu içinde kontrastı 3,9'a düşürüyordu (ölçüldü). */
    --text-primary: var(--text-main);
    --text-color: var(--text-main);
    --text-secondary: var(--text-main);
    --bg-main: var(--primary-bg);
    --bg-dark: var(--bg-card);
}

/* iOS 26 Glassmorphism Ambient Bg
   ⚠️ 2026-09-24: sonsuz `floatingGlow` animasyonu KALDIRILDI. Bu iki daire z-index:-1
   ile body'nin opak zemininin ALTINDA kalıyor, hiçbir temada görünmüyor (10 temada
   ekran görüntüsüyle ölçüldü) — ama animasyon ekranı boştayken saniyede 60 kez
   çizdirip GPU'yu çalıştırıyordu (pil/ısınma; 4 sn'de 240 kare → 0). Statik hâl
   görünümü değiştirmez. */
body::before,
body::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    opacity: 0.15;
    pointer-events: none;
}

body::before {
    background: radial-gradient(circle, var(--accent-blue) 0%, transparent 60%);
    transform: translate(-80%, -80%);
}

body::after {
    background: radial-gradient(circle, var(--accent-orange) 0%, transparent 60%);
    transform: translate(0%, 20%);
}

.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    margin-top: 0;
}

/* Glassmorphism Classes */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* v21.3.10: Mobilde uzun listelerde backdrop-filter scroll FPS'i düşürüyor (audit fix).
   Blur'u 8px'e indirip görsel kayıp minimum, GPU yükü ~3x azaldı. */
@media (max-width: 768px) {
    .glass {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* Header — v19.11.0: Sticky */
header {
    background: rgba(18, 18, 20, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    margin-bottom: 0;
    padding: 10px 15px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* --- Header Layout --- */
.header-main-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.header-left-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
}

.header-right-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}

.logo {
    background: #121214;
    padding: 6px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.logo img {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.btn-logout-compact {
    color: var(--accent-red) !important;
}

#user-info-compact {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    gap: 15px;
    overflow: hidden;
    min-width: 0;
}

#user-info-compact .search-box {
    display: flex !important;
    align-items: center;
    max-width: 200px;
    position: relative;
}

#user-info-compact .search-box input {
    padding: 6px 30px !important;
    padding-right: 35px !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
    width: 100%;
}

#user-info-compact .search-box i.ph-magnifying-glass {
    position: absolute;
    left: 10px !important;
    font-size: 0.9rem !important;
}

#user-info-compact .btn-clear {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-info-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    line-height: 1.1;
    min-width: 0;
}

/* Desktop Dashboard Header Alignment */
.dashboard-header-container {
    margin-bottom: 25px;
}

/* v22.4.5: Geniş ekranda (masaüstü/tablet) "İş Akış Paneli" satırı — arama
   kutusu + REEFER birim seçici — header'ın hemen altına sabitlenir. Header
   yüksekliği JS ile ölçülüp --header-h'ye yazılır (güvenli alan + tema farkları).
   Telefonda (≤1024px) satır alt alta dizilip uzadığı için SABİTLENMEZ. */
@media (min-width: 1025px) {
    .dashboard-header-container {
        position: sticky;
        top: 0;
        z-index: 900;
        background: var(--primary-bg);
        padding-top: 12px;
        padding-bottom: 12px;
        margin-bottom: 13px;
        box-shadow: 0 8px 14px -10px rgba(0, 0, 0, 0.55);
    }
}

.dashboard-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dashboard-search-wrapper {
    flex: 1;
    max-width: 600px;
    padding: 10px !important;
    margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
    .dashboard-header-container {
        margin-bottom: 20px;
        padding: 0 5px;
    }

    .dashboard-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .dashboard-search-wrapper {
        max-width: none;
        width: 100%;
        order: 3;
        margin: 0 !important;
        padding: 5px !important;
    }

    #ui-dashboard-title {
        order: 1;
        font-size: 1.4rem !important;
    }
}

#active-user-name {
    font-weight: 700;
    color: white;
    font-size: 0.8rem;
    white-space: nowrap;
}

#live-currency {
    color: var(--accent-blue);
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}

#live-date {
    font-weight: 700;
    color: var(--accent-blue);
    font-size: 0.65rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    header {
        padding: 5px 10px !important;
        padding-top: calc(env(safe-area-inset-top, 0px) + 5px) !important;
    }

    .header-main-grid {
        display: grid !important;
        /* v22.10.2: 1fr-1fr sağ kolonu 78px'e eziyordu (sol butonlar min-content dayatıyor)
           → sol içerik kadar, sağ KALAN alanı alır; kur/tarih artık kırpılmaz */
        grid-template-columns: auto auto 1fr !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 4px !important;
        width: 100%;
    }

    /* v22.10.2: TR/EN anahtarı mobilde kompakt — sağdaki bilgi alanına yer aç */
    #lang-switch-container .unit-toggle-container {
        width: 64px !important;
    }
    #lang-switch-container .unit-toggle-segment {
        font-size: 0.6rem !important;
    }

    .header-left-actions {
        display: flex;
        gap: 6px;
        justify-content: flex-start;
        align-items: center;
    }

    .header-right-actions {
        display: flex;
        gap: 4px;
        justify-content: flex-end;
        align-items: center;
        overflow: hidden;
        min-width: 0;
    }

    #user-info-compact {
        overflow: hidden;
        min-width: 0;
        /* v22.10.2: mobilde 15px padding + 15px gap kur/tarihi kırpıyordu */
        padding-left: 8px;
        gap: 8px;
    }

    .user-info-inner {
        overflow: hidden;
        min-width: 0;
    }

    #active-user-name {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80px;
    }

    #live-currency {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .logo {
        grid-column: 2;
        justify-self: center;
        padding: 2px 4px !important;
    }

    .logo img {
        height: 20px !important;
    }

    #user-info-compact {
        margin-right: 0 !important;
        min-width: 0;
    }

    .user-info-inner div {
        font-size: 0.55rem !important;
    }
}

/* Dashboard Search Sizing (v17.4.0: Narrowed and Centered) */
.dashboard-search-wrapper,
.search-container {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 25px !important;
}

#folder-shortcuts-container {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 12px !important;
    width: 100%;
    padding-bottom: 4px;
}

/* Buttons become icons only on mobile */
.btn-logout-compact {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
}

.btn-logout-compact i {
    font-size: 1.2rem !important;
}

#user-info-compact {
    padding-left: 5px !important;
    border-left: none !important;
}

.user-info-inner {
    gap: 0 !important;
}

#active-user-name {
    font-size: 0.75rem !important;
    white-space: nowrap !important;
}

#live-currency,
#live-date {
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

/* Analytics & Shortcut Fixes */
.analytics-btn-scroll {
    flex-wrap: wrap !important;
    display: flex !important;
    gap: 6px !important;
}

.analytics-btn-scroll button {
    flex: 1 1 auto;
    min-width: 45px;
}

#folder-shortcuts-container {
    flex-wrap: wrap !important;
    margin-top: 10px;
}

.logo img:hover {
    transform: scale(1.05);
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.category-card {
    position: relative;
    padding: 35px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background: rgba(30, 30, 35, 0.4);
    overscroll-behavior-x: none;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.category-card:hover {
    transform: translateY(-8px) scale(1.02);
    background: rgba(40, 40, 45, 0.7);
    border-color: rgba(179, 132, 14, 0.5);
    /* var(--accent-blue) ama transparan */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5), 0 0 20px rgba(179, 132, 14, 0.1);
}

/* Mobile Optimizations */
@media (max-width: 500px) {
    body {
        padding: 0;
    }

    .app-container {
        padding: 10px;
        width: 100%;
    }

    #login-view {
        width: 90% !important;
        margin-top: calc(env(safe-area-inset-top, 20px) + 20px) !important;
        margin-bottom: 40px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 30px 20px !important;
    }

    header {
        padding: 10px;
        padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
        margin-bottom: 15px;
        flex-direction: column;
        gap: 15px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    /* Improved mobile table layout with sticky headers */
    .damage-table-container {
        max-height: 60vh;
        overflow-y: auto;
        position: relative;
    }

    .damage-table-container thead {
        display: none;
        /* Hide on mobile, we'll use labels instead */
    }

    .damage-table-container table {
        min-width: 100% !important;
    }

    .damage-table-container tbody {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .damage-table-container tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 0 !important;
    }

    .damage-table-container td {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        padding: 6px 0 !important;
        border-bottom: none !important;
        text-align: left;
    }

    /* Add labels before each field on mobile */
    .damage-table-container td::before {
        content: attr(data-label);
        font-size: 0.65rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 700;
    }

    .damage-table-container td:nth-child(2),
    .damage-table-container td:nth-child(4) {
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        padding-left: 10px !important;
    }

    .damage-table-container td:last-child {
        grid-column: span 2;
        border-top: 1px dashed rgba(255, 255, 255, 0.08);
        margin-top: 6px;
        padding-top: 8px !important;
        justify-content: center;
        align-items: center;
    }

    .damage-table-container td:last-child::before {
        content: none;
        /* No label for delete button */
    }

    .damage-table-container td input {
        width: 100% !important;
        font-size: 0.85rem;
        padding: 8px !important;
    }

    .modal-content {
        max-height: 95vh;
        border-radius: 0;
    }
}

.category-card .badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--accent-blue);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #000;
    /* Açık zeminde koyu yazı kuralı */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.category-card h3 {
    font-size: 1rem;
    font-weight: 600;
}

/* Specific category colors — unified single accent
   v21.3.12: .cat-washing kaldırıldı (eski kategori, hiç kullanılmıyor) */
.cat-reported,
.cat-pending,
.cat-repairing,
.cat-completed,
.cat-rejected {
    border-left: 4px solid var(--accent-blue);
}

/* ===== v22.11.6: KONTEYNER PLACARD klasör kartları =====
   Konteyner kapısı estetiği: oluklu doku + köşe döküm fitingleri + ISO-plaka sayaç
   + birime özel filigran motifi. Renkler temanın vurgusundan (--accent-blue) gelir →
   8 temada da uyumlu. İçerik/tıklama/sayaç JS tarafında AYNI (bkz. renderDashboardCards). */
.category-card.cc-placard-card {
    padding: 20px 14px 18px;
    gap: 8px;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(140, 140, 140, 0.14);
    border-left: 1px solid rgba(140, 140, 140, 0.14); /* cat-* sol-şeridini nötrle */
}
/* Oluklu konteyner-kapı dokusu — nötr gri, koyu+açık temada da görünür */
.cc-placard-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: repeating-linear-gradient(90deg,
        var(--cc-ridge, rgba(140, 140, 140, 0.06)) 0 1px, transparent 1px 9px);
}
/* Köşe döküm noktaları (ISO konteyner köşe fitingleri) */
.cc-placard-card::before {
    content: '';
    position: absolute;
    inset: 7px;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle 2.5px at left top, var(--cc-cast, rgba(150, 150, 150, 0.30)) 96%, transparent 100%),
        radial-gradient(circle 2.5px at right top, var(--cc-cast, rgba(150, 150, 150, 0.30)) 96%, transparent 100%),
        radial-gradient(circle 2.5px at left bottom, var(--cc-cast, rgba(150, 150, 150, 0.30)) 96%, transparent 100%),
        radial-gradient(circle 2.5px at right bottom, var(--cc-cast, rgba(150, 150, 150, 0.30)) 96%, transparent 100%);
    background-repeat: no-repeat;
}
.cc-placard-card > * { position: relative; z-index: 2; }
.cc-placard-card .cc-icon { font-size: 1.7rem; }
/* Birime özel filigran (dry=kutu, reefer=kar, yıkama=damla, opentop=tepsi) */
.cc-placard-card .cc-watermark {
    position: absolute;
    right: 6px;
    bottom: 30px;
    font-size: 3.4rem;
    line-height: 1;
    color: var(--accent-blue);
    opacity: 0.07;
    z-index: 0;
    pointer-events: none;
}
/* ISO plaka sayaç — v22.11.7: NORMAL AKIŞTA (ikon→başlık→plaka). Absolute değil →
   mobilde başlıkla ÇAKIŞMAZ (dar ekranda üst üste binme sorunu çözüldü). */
.cc-placard-card .cc-plate {
    display: inline-block;
    margin-top: 2px;
    background: var(--cc-plate, rgba(0, 0, 0, 0.28));
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    border-radius: 3px;
    padding: 2px 14px;
    min-width: 34px;
    text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 2px;
    line-height: 1.4;
}
/* Açık temalarda plaka ve doku okunaklılığı */
body.light-mode .cc-placard-card,
body[data-theme$="-light"] .cc-placard-card {
    --cc-ridge: rgba(90, 90, 90, 0.07);
    --cc-cast: rgba(90, 90, 90, 0.30);
    --cc-plate: rgba(0, 0, 0, 0.06);
}

/* Modal / Form Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    /* Controlled by JS */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    padding-top: calc(env(safe-area-inset-top, 20px) + 20px);
}

.modal-content {
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* v22.0.8: backdrop-filter render gecikmesi sırasında modal-content opak
       görünsün — "blur sağda önce gözüküyor" sorununu engelle. */
    background-color: #1a1a1e;
    will-change: backdrop-filter;
}

body.light-mode .modal-content {
    background-color: #f4f4f0;
}

.modal-header {
    padding: 30px;
    border-bottom: 1px solid var(--glass-border);
}

.modal-body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 20px 30px;
    border-top: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px 14px;
    background: #1e293b;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-main);
    font-size: 1rem;
    transition: all 0.3s ease;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(179, 132, 14, 0.2);
}

/* Checkbox Fix: Exclude from global appearance:none  */
input[type="checkbox"] {
    width: auto !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    background-image: none !important;
    cursor: pointer;
}

select option {
    background-color: #121214;
    /* Dropdown listesi için koyu arka plan */
    color: var(--text-main);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    background: #334155;
}

/* Dynamic Table */
.damage-table-container {
    overflow-x: auto;
    margin-top: 20px;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

.modal-totals-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    margin-top: 30px;
}

@media (max-width: 768px) {
    .modal-totals-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    /* removed global min-width:800px — it forced body horizontal scroll
       whenever a PWA window was resized below 800px (e.g. macOS Safari standalone).
       Tables that genuinely need a min width now set it via their container.  */
}

th {
    text-align: left;
    padding: 12px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--glass-border);
}

td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    font-size: 0.65rem;
    height: 32px;
}

.btn i {
    font-size: 0.85rem;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, #d89b14, #eea400);
    color: #000;
    box-shadow: 0 4px 15px rgba(238, 164, 0, 0.25);
}

.btn-primary:hover {
    box-shadow: 0 8px 25px rgba(238, 164, 0, 0.4);
    background: linear-gradient(135deg, #e5a71a, #f7b116);
    color: #000;
}

.btn.glass {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    /* Koyu zeminde açık yazı */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn.glass:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.btn-add-row {
    background: rgba(200, 230, 0, 0.1);
    color: var(--accent-blue);
    border: 1px dashed var(--accent-blue);
    margin-top: 10px;
    width: 100%;
}

/* Mobile damage form toolbar — compact buttons */
@media (max-width: 500px) {
    .damage-table-container+div {
        gap: 6px !important;
    }

    .damage-table-container+div .btn {
        min-width: 0 !important;
        flex: 0 1 auto !important;
        padding: 8px 10px !important;
        font-size: 0.65rem !important;
        white-space: nowrap !important;
    }

    .damage-table-container+div .btn span {
        display: none !important;
    }

    .damage-table-container+div .btn-add-row span {
        display: inline !important;
    }
}

.badge {
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 800;
    color: #000;
    /* Genel badge kuralı: Açık zemin koyu yazı */
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* Utility */
.hidden {
    display: none !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-content {
        max-height: 95vh;
        border-radius: 15px;
    }

    .modal-header,
    .modal-body,
    .modal-content {
        padding: 30px 20px;
    }

    /* Fix form labels on mobile portrait */
    .modal-body>div[style*="grid"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .form-group {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Aggressive label styling for mobile
       ⚠️ v24.3.2: survey formu HARİÇ — bu kural (≤768 px) survey'deki onay kutusu
       satırlarını (Standards Applied, sektör rehberi, EOR) blok + BÜYÜK HARF +
       turuncu yapıyordu; alan etiketleri de masaüstünden farklı görünüyordu.
       ⚠️ Hariç tutma `:where()` İÇİNDE: çıplak `:not(#survey-modal *)` kimlik seçicisi
       yüzünden özgüllüğü (1,0,1)'e çıkarıyor ve sınıfa bağlı !important istisnaları
       (.folder-perm-item, .remember-me-container label) eziyordu. `:where` özgüllüğü
       sıfırlar → kural 24.3.2 öncesi ağırlığına (0,0,1) döner.
       Profilim'deki dosya düğmesi etiketleri (kamera, "Görsel Yükle") da hariç: dosya
       input'u KARDEŞTE olduğu için :has yakalamıyor; ayrıca JS salt-okunur profilde onları
       satır içi display:none ile gizliyor — buradaki `display:block !important` bunu ezerdi.
       STOK-2: Stok sayfası (#inventory-overlay) ve Kit oluştur (#set-creator-overlay) da hariç —
       alış formunun etiketleri (Tarih, Miktar, Kur…) telefonda gizleniyor/turuncu büyük harf oluyordu.
       STOK-2 (inceleme): Alış düzenleme penceresi (#edit-purchase-overlay — body'nin çocuğu, stok
       sayfasının DIŞINDA) ve Sarfiyat (#stock-consumption-overlay) da hariç: telefonda sekiz etiketin
       hepsi gizliydi, yan yana "Alınan" ile "Kalan" ayırt edilemiyordu; Sarfiyat'ın Başlangıç/Bitiş
       tarih kutularında placeholder de yok.
       24.9.5: Lojilog otomatik işler (#hasar-overlay), Wan Hai (#wanhai-overlay — köprü kutusu), Portaldan Çek (#tk-overlay, #fs-overlay)
       ve estimate formunun Lojilog satırı (#est-ljl) da hariç — onay kutusu etiketleri telefonda turuncu büyük harf blok oluyordu.
       24.9.6 (S3): İncele (#preview-modal — alan adları telefonda gizleniyordu) ve tamamlama penceresi (#repair-photo-modal) da hariç.
       24.9.6 (S4): ortak pencere kabuğundaki HER pencere (.mc-pencere-panel — `_pencere`, app.js) hariç; yeni pencere için kimlik eklemek gerekmez. */
    .modal-body .form-group label:not(:where(#survey-modal *, #settings-modal *, #inventory-overlay *, #set-creator-overlay *, #edit-purchase-overlay *, #stock-consumption-overlay *, #stock-reconcile-overlay *, #cekim-view *, #isaret-overlay *, #hasar-overlay *, #wanhai-overlay *, #tk-overlay *, #fs-overlay *, #est-ljl *, #preview-modal *, #repair-photo-modal *, .mc-pencere-panel *, #profile-photo-edit-btn, #profile-sign-edit-btn)),
    .modal-body label:not(:where(#survey-modal *, #settings-modal *, #inventory-overlay *, #set-creator-overlay *, #edit-purchase-overlay *, #stock-consumption-overlay *, #stock-reconcile-overlay *, #cekim-view *, #isaret-overlay *, #hasar-overlay *, #wanhai-overlay *, #tk-overlay *, #fs-overlay *, #est-ljl *, #preview-modal *, #repair-photo-modal *, .mc-pencere-panel *, #profile-photo-edit-btn, #profile-sign-edit-btn)),
    label:not(:where(#survey-modal *, #settings-modal *, #inventory-overlay *, #set-creator-overlay *, #edit-purchase-overlay *, #stock-consumption-overlay *, #stock-reconcile-overlay *, #cekim-view *, #isaret-overlay *, #hasar-overlay *, #wanhai-overlay *, #tk-overlay *, #fs-overlay *, #est-ljl *, #preview-modal *, #repair-photo-modal *, .mc-pencere-panel *, #profile-photo-edit-btn, #profile-sign-edit-btn)) {
        display: block !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
        color: var(--accent-orange) !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 50px;
        padding: 15px 10px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 15px);
        background: rgba(0, 0, 0, 0.4);
        border-radius: 20px 20px 0 0;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    footer>* {
        flex: 1 1 auto;
        min-width: fit-content;
        max-width: 100%;
        justify-content: center;
    }

    footer button,
    #footer-notification-container {
        font-size: 0.7rem !important;
        padding: 6px 10px !important;
        white-space: nowrap;
    }

    footer i {
        font-size: 1rem !important;
    }

    .modal-header h2 {
        font-size: 1.2rem;
    }

    table {
        min-width: 600px;
        /* Reduction for mobile touch targets */
    }

    input,
    select,
    textarea {
        font-size: 0.9rem;
        padding: 10px;
    }

    .modal-footer {
        flex-direction: column;
        gap: 10px;
    }

    .modal-footer div {
        flex-wrap: wrap;
        justify-content: center !important;
    }

    .modal-footer select {
        width: 100% !important;
    }

    .modal-footer button {
        flex: 1;
        min-width: 120px;
    }
}

#folder-view>div:first-child {
    flex-wrap: wrap;
    gap: 10px !important;
    /* v22.6.12: Klasör başlık çubuğu (GERİ + ad + adet + tutar) folder-view'ın
       KENDİ iç-scroll'una göre üstte sabitlenir (top:0). iPhone dahil her cihazda
       güvenilir — pencere-scroll sticky iOS'ta tutmuyordu, iç-scroll kapsayıcı çözüm.
       Aktivasyon: #main-app-container.folder-mode (aşağıda). */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--primary-bg);
    padding: 10px 0;
    box-shadow: 0 8px 14px -10px rgba(0, 0, 0, 0.55);
}

/* v22.6.12: KLASÖR İÇ-SCROLL MİMARİSİ — header üstte sabit, klasör içeriği KENDİ
   İÇİNDE kayar (pencere kaymaz). iPhone'da sticky'nin güvenilir çalışmasının tek
   yolu bu (clip/pencere-scroll iOS'ta tutmuyor). showFolder .folder-mode ekler,
   showMain kaldırır.
   YÜKSEKLİK = 100svh (small viewport): iç-scroll'da iOS Safari alt araç çubuğu
   küçülmediği için 100dvh kapsayıcıyı çubuğun altına taşırıyordu (liste sonu
   gizleniyordu). svh = araç-çubuğu-açıkken garanti yükseklik → içerik hep çubuğun
   üstünde kalır. Alt padding araç çubuğu + home-indicator için ek tampon. */
#main-app-container.folder-mode {
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
#main-app-container.folder-mode > header {
    flex: 0 0 auto;
    margin-bottom: 0;   /* flex'te header alt boşluğu bar ile arasında 15px açıyordu */
}
#main-app-container.folder-mode > #folder-view {
    flex: 1 1 auto;
    /* v23.7.5: `width:100%` ŞART. Bu kapsayıcı folder-mode'da `display:flex` ve
       v23.7.1'de ortalama için eklenen `margin-inline:auto` (style.css sonu) bir
       FLEX ÇOCUĞUNDA `align-items:stretch`i iptal eder → öğe içerik genişliğine
       (fit-content) düşer. Sonuç: ana panel tam genişlikken klasöre girince liste
       ortada dar bir sütuna sıkışıyordu ("mobil site gibi", Tolga bildirdi).
       `width:100%` esnemeyi geri verir; max-width + auto margin ortalamayı sürdürür. */
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Alt boşluk: yükseklik zaten 100svh (Safari araç çubuğunu hesaba katar) →
       burada yalnız home-indicator (safe-area) + küçük pay yeter. Eskiden +40 idi,
       PWA'da (araç çubuğu yokken) fazla boşluk bırakıyordu (Tolga bildirdi). */
    padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
}
/* Footer (zoom kontrolü + sürüm) folder-mode'da alta sabitlenip yer kaplamasın —
   gizle; zoom ayarı dashboard'dan yapılır. Liste için tam yükseklik. */
#main-app-container.folder-mode > footer {
    display: none;
}

#folder-view h2 {
    font-size: 1.2rem;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
        /* Two columns on very small screens */
        gap: 12px;
    }

    .category-card {
        padding: 15px 10px;
    }

    .category-card i {
        font-size: 1.5rem;
    }

    .category-card h3 {
        font-size: 0.8rem;
    }
}

/* Search Bar Styles (v5.8) */
.search-container {
    margin: 0 auto 30px auto;
    max-width: 600px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-box {
    position: relative;
    flex: 1;
}

.search-box input {
    width: 100%;
    padding: 15px 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    color: white;
    font-size: 1rem;
    transition: all 0.3s;
}

.search-box input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 20px rgba(200, 230, 0, 0.2);
}

.search-box i.ph-magnifying-glass {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.2rem;
}

.btn-clear {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.btn-clear:hover {
    color: var(--accent-red);
}

/* Modern Card Layout  */
.v1004-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: visible;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.report-card-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: none;
}

.report-card-check {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
}

.card-top-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.card-top-left h4 {
    color: var(--accent-blue);
    font-size: 1.1rem;
    margin: 0;
    cursor: pointer;
    text-decoration: underline;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-customer-info {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 15px;
}

.card-top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.card-top-right-row {
    display: flex;
    align-items: center;
    gap: 25px;
}

.card-summary-price {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.card-total-hours {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.card-total-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-blue);
}

.card-primary-actions {
    display: flex;
    gap: 8px;
}

.card-primary-actions .btn {
    height: 32px;
    font-size: 0.75rem;
}

/* Body Content */
.report-card-body {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 0;
}

.report-card-table-side {
    padding: 15px 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.preview-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.preview-scroll-container table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.preview-scroll-container th {
    text-align: left;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.preview-scroll-container td {
    padding: 10px;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

/* ── 24.9.6: KALEM LİSTESİ (rapor kartı gövdesi, _kartGovdesiHtml) ───────────────────────────────────────
   Tolga: "konum parça işlem kodları adları … hem yatay hem dikey çok boşluklu". Ölçüldü (390 px dokunmatik): tablo 700 px
   (global `table { min-width: 700px }`), kapsayıcı 292 px → yatay kaydırma; ≤430 px genel `[style*="display: flex"][style*="gap"]
   { flex-wrap: wrap }` kuralı stok kontrollerini ÜÇ satıra kırıyordu → kalem satırı 153–195 px.
   Masaüstü: tablo kalır, satır sıkılaşır (dolgu 10 → 6 px, kısa sütunlar tek satır).
   Telefon (≤600 px): her kalem kompakt blok — 1. satır Konum · Parça | Adet · Toplam, 2. satır Hasar → İşlem, 3. satır stok
   kontrolleri + çöp (sağda, tutarın altında). Satır kırılımı tr::before / ::after (flex-basis 100 %, yükseklik 0) ile; satırlar
   arası boşluk row-gap DEĞİL margin (kırılım öğesi kendi satırını açar, row-gap iki kez sayılırdı). Stok satırı inline display:flex
   TAŞIMAZ (yukarıdaki ≤430 kuralı onu kırmasın). */
.kalem-tablo th { padding: 6px 10px; }
.kalem-tablo td { padding: 6px 10px; vertical-align: middle; }
.kalem-tablo .kk-kon,
.kalem-tablo .kk-adet,
.kalem-tablo .kk-tutar { white-space: nowrap; }
.kalem-tablo .kk-has { color: var(--accent-red); }
.kalem-tablo .kk-adet { text-align: center; }
.kalem-tablo .kk-tutar { text-align: right; font-weight: 600; }
.kalem-tablo .kk-stok { text-align: right; border-left: 1px solid var(--glass-border); padding-left: 8px; }
.kalem-tablo .kk-sil { text-align: center; padding-left: 5px; }
.kk-stok-ic { display: flex; flex-direction: column; align-items: flex-end; }
.stock-cell-row { display: flex; gap: 2px; align-items: center; }
.stock-cell-row select { width: 110px; }
/* Adet kutusu 44 px: sayı okları "Adet" yazısını "Ade" diye kesiyordu (masaüstü) — oklar gizli, yazılarak girilir */
.stock-cell-row input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.stock-cell-row input[type="number"]::-webkit-inner-spin-button,
.stock-cell-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kk-kullanim { font-size: 0.65rem; color: var(--accent-green); margin-top: 2px; display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
/* Blok düzeni: telefon (≤600 px) + dokunmatik tablet (≤1100 px — iPad dikeyde kapsayıcı 661 px, tablo 776 px taşıyordu) */
@media (max-width: 600px), (pointer: coarse) and (max-width: 1100px) {
    .preview-scroll-container.kalem-kap { overflow-x: visible !important; }
    .kalem-kap .kalem-tablo, .kalem-kap .kalem-tablo tbody { display: block; width: 100%; min-width: 0; }
    /* 24.9.6 (inceleme D3): tablette blok KAPSAYICI genişliğinde (eskiden 36rem'de kalıyordu — sağ kenarı çubuktaki TAMAMLA'nın ve alttaki iş akışı
       düğmelerinin sağ kenarıyla hizasızdı). Telefonda kapsayıcı zaten 36rem'den dar. */
    .kalem-tablo thead { display: none; }
    .kalem-tablo tr.kk-satir {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 6px;
        padding: 8px 0;
        border-bottom: 1px solid var(--glass-border);
    }
    .kalem-tablo tr.kk-satir:first-child { padding-top: 0; }
    .kalem-tablo tr.kk-satir:last-child { border-bottom: 0; padding-bottom: 0; }
    .kalem-tablo tr.kk-satir > td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; font-size: 0.8rem; line-height: 1.3; overflow-wrap: anywhere; }
    .kalem-tablo tr.kk-satir::before,
    .kalem-tablo tr.kk-satir::after { content: ''; flex-basis: 100%; height: 0; }
    /* 1. satır */
    .kalem-tablo .kk-kon {
        order: 1;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--text-muted);
        padding: 1px 5px;
        border: 1px solid var(--glass-border);
        border-radius: 4px;
    }
    .kalem-tablo .kk-kon.kk-bos { display: none; }
    .kalem-tablo .kk-par { order: 2; flex: 1 1 0; font-weight: 600; }
    /* Adet hücresi açılır (display: contents): adet 1. satırın sağında, ölçü (60X120) 2. satırda işlemin yanında —
       ölçü 1. satırda kalınca parça adı ikiye kırılıyordu */
    .kalem-tablo tr.kk-satir > td.kk-adet { display: contents; }
    .kalem-tablo .kk-adet-n { order: 3; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
    .kalem-tablo .kk-adet-n::after { content: ' ' attr(data-birim); }
    .kalem-tablo .kk-tutar { order: 4; }
    .kalem-tablo .kk-tutar[data-birim]::after { content: ' ' attr(data-birim); }
    /* 2. satır */
    .kalem-tablo tr.kk-satir::before { order: 5; }
    .kalem-tablo .kk-has { order: 6; margin-top: 3px; }
    .kalem-tablo .kk-isl { order: 7; margin-top: 3px; }
    .kalem-tablo .kk-isl::before { content: '→'; color: var(--text-muted); margin-right: 6px; }
    .kalem-tablo .kk-has:empty,
    .kalem-tablo .kk-isl:empty { display: none; }   /* kodsuz kalemde tek başına "→" kalmasın */
    .kalem-tablo .kk-olcu { order: 8; margin-top: 3px; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
    /* 3. satır — görüntüleyende yok */
    .kalem-tablo tr.kk-satir::after { order: 9; }
    .kalem-tablo tr.kk-salt::after { display: none; }
    .kalem-tablo .kk-stok { order: 10; flex: 1 1 0; align-self: flex-start; margin-top: 6px; border-left: 0; padding-left: 0; container: kkstok / inline-size; }
    .kalem-tablo .kk-sil { order: 11; align-self: flex-start; margin-top: 6px; padding-left: 0; }
    .kalem-tablo .kk-stok-ic { align-items: stretch; }
    .kalem-tablo .stock-cell-row select { width: auto; flex: 1 1 auto; min-width: 0; }
    .kalem-tablo .stock-cell-row input,
    .kalem-tablo .stock-cell-row .btn { flex: 0 0 auto; }
    .kalem-tablo .stok-oneri-not,
    .kalem-tablo .stok-bekliyor-not { white-space: normal; margin-top: 3px; }
    .kalem-tablo .kk-kullanim { justify-content: flex-start; font-size: 0.7rem; margin-top: 4px; }
    /* DÜŞ'te ok simgesi yok (yazı yeterli — seçiciye yer) */
    .kalem-tablo .kart-stok-dus i { display: none; }
}
/* Dar stok sırası (kullanıcı yakınlaştırması — %115'te seçici 54 px, %130'da 15 px kalıyordu; tek sıra seçici ≥ 90 + adet 44 + DÜŞ ~48 +
   barkod 44 + aralıklar ≈ 244 px ister): seçici kendi satırına, adet · DÜŞ · barkod altına. Kapsayıcı yalnız blok düzende tanımlı. */
@container kkstok (max-width: 250px) {
    .kalem-tablo .stock-cell-row { flex-wrap: wrap; row-gap: 6px; }
    .kalem-tablo .stock-cell-row select { flex: 1 1 100%; }
}
/* Telefonda kart gövdesinin yan boşluğu 20 → 12 px (kartın başlık hizası) */
@media (max-width: 600px) { .report-card-table-side { padding: 12px; } }
/* Açık temada kartın kırmızı / yeşil / limonu beyaz zeminde soluk (2:1 – 2,8:1) — koyu tonlar */
body.light-mode .kalem-tablo .kk-has { color: #b91c1c; }
body.light-mode .kalem-tablo .kk-kullanim { color: #047857; }
body.light-mode .kalem-tablo .stok-oneri-not { color: #4d5c00; }

.report-card-workflow-side {
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;
}

.workflow-btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workflow-btn-group .btn {
    width: 100%;
    justify-content: flex-start;
    height: 36px;
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .report-card-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .card-top-right {
        width: 100%;
        align-items: flex-start;
    }

    .card-top-right-row {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 600px) {
    .report-card-body {
        grid-template-columns: 1fr;
    }

    .report-card-table-side {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .card-primary-actions span {
        display: none;
    }

    .card-primary-actions button {
        width: 40px;
        padding: 0 !important;
    }
}

/* Modern Preview Styles  */
.preview-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 600px) {
    .preview-meta-grid {
        grid-template-columns: 1fr 1fr;
        /* Keep it 2-column even on small phones */
        padding: 15px;
        gap: 12px;
    }
}

.preview-meta-item label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.preview-meta-item strong {
    font-size: 1rem;
    /* 24.9.6: tema yazı rengi — açık temada İncele zemini beyaz, sabit beyaz değerler görünmüyordu */
    color: var(--text-main, inherit);
}

/* Modern Preview Table Styles  */
.preview-damage-table-wrapper {
    width: 100%;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
}

.preview-damage-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
}

.preview-damage-table th {
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.preview-damage-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.85rem;
    color: var(--text-main, inherit);   /* 24.9.6: açık temada beyaz zemine beyaz yazıydı */
}

.preview-damage-table tr:last-child td {
    border-bottom: none;
}

/* removed grid conversion to favor horizontal scrolling */
@media (max-width: 500px) {
    .preview-damage-table {
        min-width: 700px !important;
    }
}

@media (max-width: 500px) {

    .report-card {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }

    .report-card-check {
        border-right: 0;
        padding: 0;
        justify-content: flex-start;
        height: auto;
    }
}

/* Modern Permission Settings (v14.1.3) */
.perm-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.role-perm-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.role-perm-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

.role-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}

.role-name {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--accent-blue);
}

.folder-perm-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    visibility: visible !important;
}

.folder-perm-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    min-width: 0;
    min-height: 38px;
    visibility: visible !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: rgba(96, 165, 250, 0.2);
}

/* v21.3.8: iOS Safari PWA — folder-perm checkbox'larının render edilmemesi
   sorununa karşı garanti — input'lar her zaman görünür ve tıklanabilir */
.folder-perm-item input[type="checkbox"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    margin: 0;
}

.folder-perm-item span {
    flex: 1;
    min-width: 0;
    visibility: visible !important;
}

.folder-perm-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.folder-perm-item input {
    margin: 0;
    width: 16px;
    height: 16px;
}

.folder-perm-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
    /* Better scroll space for mobile */
}

/* Force horizontal scroll on specific containers */
.report-card-table-side,
.preview-scroll-container,
#profit-results,
.analytics-btn-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Tablet breakpoint for accounting grid & filter panel */
@media (max-width: 1024px) {
    .accounting-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .accounting-grid input[type="date"] {
        font-size: 0.8rem !important;
        padding: 8px !important;
        height: 40px !important;
    }

    .accounting-grid select {
        font-size: 0.8rem !important;
        padding: 8px !important;
        height: 40px !important;
    }

    #filter-panel>div {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
        gap: 8px !important;
    }

    #filter-panel input[type="date"] {
        font-size: 0.75rem !important;
        padding: 6px !important;
        height: 36px !important;
    }
}

@media (max-width: 600px) {
    .accounting-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .accounting-grid input[type="date"] {
        font-size: 0.85rem !important;
        padding: 10px !important;
        height: 44px !important;
    }

    .profit-cards-grid {
        display: flex !important;
        overflow-x: auto !important;
        gap: 15px !important;
        padding-bottom: 10px !important;
        min-width: 100% !important;
    }

    .profit-cards-grid>div {
        min-width: 200px !important;
        flex: 0 0 auto !important;
    }
}

/* v20.11.41: iPad/tablet'te (≤1024px) izin grupları tek-kolon olsun —
   uzun finansal label'lar 2-kolon hücresine sığmıyordu, yatay scroll oluşuyordu. */
@media (max-width: 1024px) {
    .folder-perm-grid {
        grid-template-columns: 1fr;
    }
}

/* Offline Banner Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

#offline-banner {
    animation: slideDown 0.3s ease !important;
}

/* Loading Skeleton Animations */
.skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
    min-height: 20px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-card {
    background: rgba(30, 30, 35, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 35px 20px;
    min-height: 150px;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 10px;
}

.skeleton-title {
    height: 24px;
    width: 60%;
    margin-bottom: 15px;
}

/* Mobile Form Optimization - Hide labels, use placeholders
   ⚠️ v24.3.2: SURVEY FORMU HARİÇ (`:not(#survey-modal *)`). Bu toplu kural telefonda
   survey'deki TÜM etiketleri gizliyordu: alan adları (tarih kutuları ne olduğu
   anlaşılmıyordu — tarih alanının placeholder'ı yok), Standards Applied / sektör
   rehberi / EOR onay kutuları (etiket içinde), "Add Photos" düğmesi (label + gizli
   file input) ve fotoğraf düzeni seçimi. Placeholder bir onay kutusunun ya da
   düğmenin yerini TUTAMAZ. Survey etiketleri kendi inline display'lerini korur.
   ⚠️ 2026-09-24 (24.3.2 gerilemesi): (1) hariç tutma `:where()` içinde — çıplak kimlik
   seçicisi özgüllüğü (1,0,1)'e çıkarıp sınıf istisnalarını eziyordu (Yetkiler'deki
   153 onay kutusu + "Beni Hatırla" gizlendi). (2) İÇİNDE KONTROL OLAN etiket hiç
   gizlenmez (`:not(:has(...))`): onay kutusu, dosya düğmesi, seçim placeholder'la
   telafi edilemez (Toplu Faturalama çipleri, "Dosya Ekle", stok ret kutuları…).
   `:has` desteklemeyen tarayıcıda (Safari < 15.4) kural BÜTÜNÜYLE düşer → etiketler
   görünür kalır (güvenli taraf). Bu yüzden `:has` `:where` içine ALINMAZ — orada
   sessizce yok sayılır ve kural her etiketi gizlerdi.
   (3) Profilim'deki dosya düğmesi etiketleri (input kardeşte) adıyla hariç — ≤768 kuralıyla aynı liste.
   (4) STOK-2: Stok sayfası + Kit oluştur + Alış düzenleme + Sarfiyat hariç (≤768 kuralıyla aynı liste).
   (5) 24.6.4: Depo kontrolü incelemesi (#stock-reconcile-overlay) hariç — satırlar onay kutulu <label display:flex>;
       ≤768 kuralı onları blok + turuncu büyük harfe çeviriyordu (≤768 kuralıyla aynı liste). */
@media (max-width: 600px) {
    .form-group label:not(:where(#survey-modal *, #settings-modal *, #inventory-overlay *, #set-creator-overlay *, #edit-purchase-overlay *, #stock-consumption-overlay *, #stock-reconcile-overlay *, #cekim-view *, #isaret-overlay *, #hasar-overlay *, #wanhai-overlay *, #tk-overlay *, #fs-overlay *, #est-ljl *, #preview-modal *, #repair-photo-modal *, .mc-pencere-panel *, #profile-photo-edit-btn, #profile-sign-edit-btn)):not(:has(input, select, button, textarea)) {
        display: none !important;
    }

    label:not(:where(#survey-modal *, #settings-modal *, #inventory-overlay *, #set-creator-overlay *, #edit-purchase-overlay *, #stock-consumption-overlay *, #stock-reconcile-overlay *, #cekim-view *, #isaret-overlay *, #hasar-overlay *, #wanhai-overlay *, #tk-overlay *, #fs-overlay *, #est-ljl *, #preview-modal *, #repair-photo-modal *, .mc-pencere-panel *, #profile-photo-edit-btn, #profile-sign-edit-btn)):not(:has(input, select, button, textarea)) {
        display: none !important;
    }

    .form-group {
        margin-bottom: 12px;
    }

    /* Make placeholders more visible on mobile */
    input::placeholder,
    select::placeholder,
    textarea::placeholder {
        color: rgba(148, 163, 184, 0.9);
        opacity: 1;
        font-size: 0.8rem;
    }

    /* Keep labels visible in PTI modal and barcode scanner */
    #pti-modal label,
    #pti-form label,
    #barcode-scanner-modal label {
        display: block !important;
        color: rgba(148, 163, 184, 0.8) !important;
        font-size: 0.7rem !important;
    }

    /* v23.6.8: Toplu PTI içe aktarma modalında etiket bir CHECKBOX'a aittir —
       placeholder ile telafi EDİLEMEZ (checkbox'ın placeholder'ı olmaz; aynı ders
       aşağıda .remember-me-container için de yazılı). Yukarıdaki toplu
       `label{display:none}` yüzünden mobilde firma adı ve seçim kutusu HİÇ
       görünmüyordu: kullanıcı hangi firmayı aktardığını göremiyor, seçimi
       kaldıramıyordu. Renk/boyut inline style'da — burada yalnız display açılır. */
    #pti-import-overlay label {
        display: flex !important;
    }

    #pti-edit-overlay label {
        display: block !important;
    }

    /* v23.3.0: "Beni Hatırla" mobilde YAZIsız görünüyordu — yukarıdaki toplu
       `label{display:none}` kuralı login kutusunun etiketini de gizliyordu.
       Placeholder ile telafi edilemeyen tek etiket bu (checkbox'ın placeholder'ı
       olmaz) → istisna. Renk .remember-me-container'dan miras alınır (login kartı
       her temada koyu, bkz. style.css:471 notu) — burada renk EZİLMEZ. */
    .remember-me-container label {
        display: inline !important;
        font-size: 0.9rem !important;
    }
}

/* Damage Analytics Modal Responsive */
.damage-analytics-content {
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.damage-analytics-scroll {
    touch-action: pan-y;
    overscroll-behavior: contain;
}

/* Charts container - horizontal scroll on mobile */
.damage-charts-container {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-scroll-snap-type: x mandatory;
}

.damage-charts-container>div {
    scroll-snap-align: start;
}

/* Desktop: Side-by-side charts, 4-column stats */
@media (min-width: 768px) {
    .damage-stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .damage-charts-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        overflow-x: visible !important;
    }

    .damage-charts-container>div {
        min-width: auto !important;
    }

    .damage-analytics-content {
        height: auto !important;
        max-height: 90vh !important;
    }
}

/* Landscape mobile: Optimize for wider screens */
@media (max-height: 500px) and (orientation: landscape) {
    .damage-analytics-content {
        margin: 5px !important;
        height: 98vh !important;
        max-height: 98vh !important;
    }

    .damage-stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }

    .damage-charts-container {
        flex-direction: row !important;
    }

    .damage-charts-container canvas {
        max-height: 150px !important;
    }
}

/* Custom Autocomplete Dropdown */
.ac-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
}

.ac-dropdown {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 10vh;
    width: 94%;
    max-width: 480px;
    background: var(--bg-secondary, #1e293b);
    border-radius: 16px;
    max-height: 70vh;
    z-index: 9999;
    display: none;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    flex-direction: column;
    overflow: hidden;
}

.ac-dropdown.active {
    display: flex;
}

.ac-overlay.active {
    display: block;
}

.ac-dropdown .ac-header {
    padding: 12px 16px 8px;
    position: sticky;
    top: 0;
    background: var(--bg-secondary, #1e293b);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ac-dropdown .ac-header .ac-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent, #38bdf8);
    margin-bottom: 8px;
    font-weight: 700;
}

.ac-dropdown .ac-search {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

.ac-dropdown .ac-search:focus {
    border-color: var(--accent, #38bdf8);
}

.ac-dropdown .ac-list {
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

.ac-dropdown .ac-item {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}

.ac-dropdown .ac-item:active,
.ac-dropdown .ac-item.ac-highlighted {
    background: rgba(200, 230, 0, 0.18);
    color: #fff;
}

.ac-dropdown .ac-item .ac-code {
    font-weight: 700;
    color: var(--accent, #38bdf8);
    margin-right: 6px;
}

.ac-dropdown .ac-item .ac-desc {
    color: rgba(255, 255, 255, 0.7);
}

.ac-dropdown .ac-empty {
    padding: 20px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
}

/* Offline Queue Badge Pulse */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* iOS Safe Area — All fullscreen overlays */
/* #global-search-overlay — v23.5.9: ölü arama zinciriyle birlikte kaldırıldı */
#portal-overlay,
#tag-manager-overlay,
#template-overlay,
#smart-notif-overlay,
#offline-status-overlay,
#qr-modal-overlay,
#field-options-overlay,
#ac-overlay {
    padding-top: env(safe-area-inset-top, 0px) !important;
}

/* End of file */

/* Card Overflow Menu */
.card-overflow-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    background: rgba(26, 29, 33, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 6px;
    z-index: 1500;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}

/* Üç-nokta menüsü açılınca üst kapsayıcıların overflow:hidden
   engelini geçici olarak iptal et — mobilde menü kart altında kaybolmasın.  */
.report-card.card-overflow-active,
.report-card.card-overflow-active .report-card-top-bar,
.report-card.card-overflow-active .card-primary-actions,
.report-card.card-overflow-active .card-overflow-wrapper {
    overflow: visible !important;
}
.report-card.card-overflow-active {
    z-index: 2000;
    position: relative;
}
/* Menüyü viewport'tan taşmaması için yukarı doğru aç */
.card-overflow-menu.flip-up {
    top: auto;
    bottom: calc(100% + 6px);
}

.card-overflow-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    text-align: left;
    width: 100%;
}

.card-overflow-menu button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.card-overflow-menu button i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* Card Body Toggle Bar */
.card-body-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    font-size: 0.7rem;
    color: var(--text-muted);
    cursor: pointer;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s;
}

.card-body-toggle:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--accent-blue);
}

.card-toggle-icon {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
}

/* Sidebar */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9998;
}

.sidebar-overlay.open {
    display: block;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    background: rgba(18, 18, 22, 0.97);
    backdrop-filter: blur(24px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.sidebar-section-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    padding: 8px 12px 4px;
    opacity: 0.7;
}

.sidebar-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s;
}

.sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.sidebar-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-btn i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

/* Sidebar Submenu Styles */
.sidebar-submenu-body .sidebar-btn {
    padding: 10px 12px;
    font-size: 0.8rem;
    opacity: 0.9;
}

.sidebar-submenu-body .sidebar-btn i {
    font-size: 0.95rem;
}

/* 24.8.5 — sol menü düzeni (Tolga: "kayıt araçlarını açınca düzensiz duruyor"): uzun yazı SOLA hizalı (düğme varsayılanı
   ortalıyordu), alt öğeler grubuna ince bir çizgiyle bağlı + girintili, grup başlığı belirgin, kapalı grubun rozeti başlıkta. */
.sidebar-btn { text-align: left; line-height: 1.3; }
.sidebar-btn > span { min-width: 0; }
.sidebar-grup-btn { position: relative; font-weight: 600; }
.sidebar-submenu-chevron { margin-left: auto; font-size: 0.7rem !important; color: var(--text-muted); transition: transform 0.3s; }
.sidebar-submenu-body { margin: 0 0 6px 23px; padding-left: 6px; border-left: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08)); }
.sidebar-rozet { margin-left: auto; min-width: 18px; text-align: center; color: #fff; font-size: 0.62rem; font-weight: 800; border-radius: 10px; padding: 1px 6px; flex-shrink: 0; }
.sb-grup-rozet { position: absolute; left: 24px; top: 3px; min-width: 16px; height: 16px; line-height: 16px; text-align: center; background: #b45309; color: #fff; font-size: 0.58rem; font-weight: 800; border-radius: 8px; padding: 0 4px; box-sizing: border-box; pointer-events: none; }   /* simgenin köşesinde — uzun grup adı sıkışmasın */

.sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 10px 0;
}

.sidebar-footer {
    padding: 12px 20px;
    font-size: 0.65rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ===== THEME TOGGLE SWITCH ===== */
.theme-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.theme-toggle-wrapper:hover {
    background: rgba(255, 255, 255, 0.1);
}

.theme-toggle-track {
    position: relative;
    width: 38px;
    height: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.3s ease;
}

.theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-blue);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* v21.3.12: .theme-toggle-label kaldırıldı (tema toggle ikon-only) — audit fix. */

.theme-toggle-icon {
    font-size: 1rem;
    transition: opacity 0.3s;
}

/* Light mode active toggle state */
body.light-mode .theme-toggle-thumb {
    left: 20px;
}

body.light-mode .theme-toggle-track {
    background: rgba(200, 230, 0, 0.3);
}

body.light-mode .theme-toggle-wrapper {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .theme-toggle-wrapper:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* ===== LIGHT MODE OVERRIDES ===== */
body.light-mode {
    --primary-bg: #e8e8e4;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.1);
    --text-main: #1a1a1a;
    --text-muted: #555b63;
    --bg-card: #f4f4f0;          /* = açık tema .modal-content zemini */
    --accent-yellow: #b45309;    /* açık zeminde okunur amber */
    --accent-cyan: #0e7490;
    background: radial-gradient(circle at 50% 50%, #f0f0ec 0%, #e4e4e0 100%);
}

/* 2026-09-24: --bg-card açık temada artık AÇIK zemin (önceden tanımsızdı → panel
   şeffaftı, arkadaki %85 siyah perde görünüyor, koyu yazılar okunmuyordu). Aynı
   panellerde koyu zemin için yazılmış satır içi renkler açık zeminde kaybolmasın:
   - ✕ kapat düğmesi (`color:white`) — bu 5 panelde sınıfsız TEK düğme odur;
   - IICL birim çipleri (#e2e8f0 vb. açık renkler) + seçili çipin beyaz vurgusu. */
body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay) button:not([class]) {
    color: var(--text-main) !important;
    background: rgba(0, 0, 0, 0.06) !important;
}

body.light-mode #iicl-overlay .iicl-birim-chip {
    color: var(--text-main) !important;
}

body.light-mode #iicl-overlay .iicl-birim-chip[style*="255, 255, 255, 0.14"] {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* 2026-09-24 (inceleme): aynı panellerin VERİ metinleri de koyu zemin için yazılmış
   satır içi renk taşır. Panel açık zemine geçince okunmaz oldular (ölçüldü: müşteri adı
   1,6 · ücret rozeti 1,1 · bülten no 1,5 · "İnceleme bekliyor" 2,5). Şablonlara dokunmadan
   açık temada karşılıkları verilir:
   - `color:white` veri metni (Ücret Yönetimi, Portal Logları) → tema yazısı;
   - koyu şerit/kart zemini rgba(0,0,0,.2/.3) → hafif gri (renkli yazı koyu şeritte kayboluyordu);
   - ücret rozetleri → tema yazısı (renk kodu rozetin zemininde kalır);
   - sabit açık tonlar (#fbbf24 sarı uyarı, #4ade80, #f87171 …) → aynı tonun koyusu;
   - Klasik Aydınlık kendi vurgu renklerini TANIMLAMAZ (koyu temanınkiler kalır, yeşil
     #34d399 açık zeminde 1,7) → bu panellerde koyuları verilir. Diğer açık temalar
     zaten koyu vurgu tanımlar.
   ⚠️ Seçiciler satır içi yazımı OLDUĞU GİBİ arar (`color:#x` / `color: #x`); şablonda
   renk ya da yazım değişirse burası da güncellenmeli. */
body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) :is(span, div, b):is([style*="color:white"], [style*="color: white"]) {
    color: var(--text-main) !important;
}

body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) :is(span, div):is([style*="background:rgba(0,0,0,0.2)"], [style*="background: rgba(0,0,0,0.2)"], [style*="background:rgba(0,0,0,0.3)"], [style*="background: rgba(0,0,0,0.3)"]) {
    background: rgba(0, 0, 0, 0.045) !important;
}

body.light-mode #customer-fees-list span[style*="background: rgba"] {
    color: var(--text-main) !important;
}

body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) :is([style*="color:#fbbf24"], [style*="color: #fbbf24"]) { color: #92400e !important; }
body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) :is([style*="color:#4ade80"], [style*="color: #4ade80"]) { color: #15803d !important; }
body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) :is([style*="color:#f87171"], [style*="color: #f87171"]) { color: #b91c1c !important; }
body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) :is([style*="color:#a78bfa"], [style*="color: #a78bfa"]) { color: #6d28d9 !important; }
body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) :is([style*="color:#c084fc"], [style*="color: #c084fc"]) { color: #7e22ce !important; }
body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) :is([style*="color:#60a5fa"], [style*="color: #60a5fa"]) { color: #1d4ed8 !important; }
body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) :is([style*="color:#22d3ee"], [style*="color: #22d3ee"]) { color: #0e7490 !important; }
body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) :is([style*="color:#fb923c"], [style*="color: #fb923c"]) { color: #c2410c !important; }
body.light-mode :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) :is([style*="color:#94a3b8"], [style*="color: #94a3b8"]) { color: #475569 !important; }

body.light-mode[data-theme="klasik-light"] :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) {
    --accent-blue: #8a6410;
    --accent-purple: #8a6410;
    --accent-green: #047857;
    --accent-orange: #c2410c;
    --accent-red: #b91c1c;
}

/* Yeşil zeminli "Kaydet" düğmeleri (IICL) koyu yeşil yazı (#062) taşır; koyu yeşil vurgulu
   açık temalarda (Klasik — yukarıda koyulaştı —, Endüstriyel, Liman) kontrast 1,1–1,4 → beyaz.
   Saha/Mono Aydınlık HARİÇ: `button.btn` zeminini !important ile BEYAZ yapar, orada beyaz
   yazı görünmez olurdu (ölçüldü). */
body.light-mode:is([data-theme="klasik-light"], [data-theme="endustriyel-light"], [data-theme="liman-light"]) :is(#portal-logs-overlay, #iicl-overlay, #survey-ayar-overlay, #survey-cikti-overlay, #tl-bulk-overlay, #settings-modal) button[style*="color:#062"] {
    color: #fff !important;
}

/* Raporu İndir: seçili olmayan dil düğmesinin çerçevesi beyaz → açık zeminde görünmüyordu */
body.light-mode #survey-cikti-overlay .srv-btn-secenek {
    border-color: rgba(0, 0, 0, 0.18) !important;
}

/* Klasör açılır listesi satır içi SABİT koyu zemin (#1a1a1a) taşır, satır yazısı
   var(--text-primary). O değişken artık tanımlı (= --text-main) → açık temada koyu
   zemine koyu yazı düşmesin diye zemin de temaya bağlanır. (Tanımsızken yedek #fff
   kullanılıyordu; Endüstriyel/Liman Aydınlık'ta düğme zemini açık olduğu için
   beyaz yazı zaten okunmuyordu — bu kuralla ikisi de düzelir.) */
body.light-mode #folders-popover {
    background: var(--bg-card) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

body.light-mode .glass {
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode header {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .logo {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .sidebar {
    background: rgba(255, 255, 255, 0.97);
    border-right-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .sidebar-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .sidebar-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.light-mode .sidebar-btn:active {
    background: rgba(0, 0, 0, 0.08);
}

body.light-mode .sidebar-divider {
    background: rgba(0, 0, 0, 0.06);
}

body.light-mode .sidebar-footer {
    border-top-color: rgba(0, 0, 0, 0.04);
}

body.light-mode .category-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.light-mode .category-card:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

body.light-mode .skeleton-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .category-card .badge {
    color: #000;
}

body.light-mode .btn-primary {
    color: #000;
}

/* Light mode form inputs */
body.light-mode input,
body.light-mode select,
body.light-mode textarea {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #1a1a1a !important;
}

body.light-mode input::placeholder {
    color: #9ca3af !important;
}

/* Light mode modals */
body.light-mode .modal-content {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Light mode select dropdown */
body.light-mode select option {
    background-color: #ffffff;
    color: #1a1a1a;
}

/* Light mode search box */
body.light-mode .search-box input:focus {
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 20px rgba(179, 132, 14, 0.2);
}

/* Light mode unit toggle */
body.light-mode .unit-toggle-container {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Light mode scrollbar */
body.light-mode ::-webkit-scrollbar-track {
    background: #f0f0ec;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Light mode: Username & header info readability */
body.light-mode #active-user-name {
    color: #1a1a1a;
}

body.light-mode #live-currency,
body.light-mode #live-date {
    color: #8b6914;
}

/* Light mode: Glass buttons need dark text */
body.light-mode .btn.glass {
    color: #333;
    border-color: rgba(0, 0, 0, 0.12);
}

body.light-mode .btn.glass:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Light mode: Footer version text */
body.light-mode footer {
    background: rgba(255, 255, 255, 0.6);
}

/* Light mode: Autocomplete dropdown */
body.light-mode .ac-dropdown {
    background: #ffffff;
}

body.light-mode .ac-dropdown .ac-header {
    background: #ffffff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .ac-dropdown .ac-search {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
}

body.light-mode .ac-dropdown .ac-item {
    color: #333;
    border-bottom-color: rgba(0, 0, 0, 0.04);
}

body.light-mode .ac-dropdown .ac-empty {
    color: #999;
}

/* Light mode: Card overflow menu */
body.light-mode .card-overflow-menu {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.1);
}

body.light-mode .card-overflow-menu button:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* ===== v19.5.1: SMOOTH THEME TRANSITION ===== */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
    transition: background-color 0.45s ease,
        color 0.45s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.45s ease !important;
}

/* ===== v19.5.1: REPORT LIST SKELETON LOADING ===== */
.report-skeleton-card {
    background: rgba(30, 30, 35, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-skeleton-card .skel-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.report-skeleton-card .skel-bar {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 6px;
    height: 14px;
}

.report-skeleton-card .skel-bar.skel-title {
    height: 18px;
    width: 45%;
}

.report-skeleton-card .skel-bar.skel-badge {
    height: 22px;
    width: 60px;
    border-radius: 10px;
}

.report-skeleton-card .skel-bar.skel-text {
    width: 30%;
}

.report-skeleton-card .skel-bar.skel-short {
    width: 20%;
}

.report-skeleton-card .skel-bar.skel-amount {
    width: 25%;
    margin-left: auto;
}

body.light-mode .report-skeleton-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .report-skeleton-card .skel-bar {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* ===== v19.5.1: EMPTY STATE ILLUSTRATIONS ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    text-align: center;
    animation: emptyFadeIn 0.5s ease;
}

@keyframes emptyFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.empty-state svg {
    width: 120px;
    height: 120px;
    margin-bottom: 24px;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px 0;
    opacity: 0.8;
}

.empty-state p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 280px;
}

body.light-mode .empty-state svg {
    opacity: 0.4;
}

/* ===== v19.5.1: ENHANCED OFFLINE/ONLINE BANNER ===== */
#offline-banner {
    animation: slideDown 0.3s ease !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* v21.3.12: .online-restored-banner + .fade-out + @keyframes fadeUp
   hiçbir yerden kullanılmıyordu — audit fix (banner yerine offline-banner aktif). */

/* ===== v19.5.1: BULK ACTION BAR ===== */
.bulk-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* v22.5.2: backdrop-filter KALDIRILDI — iOS WebKit'te position:fixed + backdrop-filter,
       çubuğu sayfa kaydırılınca viewport'a sabit tutamıyor (ortaya/yukarı kayıyordu).
       Arka plan zaten ~opak; blur'a gerek yok. */
    background: rgba(18, 18, 22, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 8000;
    display: none;
    align-items: center;
    gap: 10px;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.25s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.bulk-action-bar.active {
    display: flex;
}

.bulk-action-bar .bulk-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-blue);
    white-space: nowrap;
    min-width: 80px;
}

.bulk-action-bar .bulk-actions {
    display: flex;
    gap: 8px;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bulk-action-bar .bulk-actions::-webkit-scrollbar {
    display: none;
}

.bulk-action-bar .bulk-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.1s;
}

.bulk-action-bar .bulk-btn:active {
    transform: scale(0.95);
}

.bulk-action-bar .bulk-btn.bulk-clear {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.2);
    color: var(--accent-red);
}

.report-card.selected {
    border-left: 3px solid var(--accent-blue) !important;
    background: rgba(179, 132, 14, 0.06) !important;
}

/* Light mode overrides for bulk */
body.light-mode .bulk-action-bar {
    background: rgba(255, 255, 255, 0.98);
    border-top-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.08);
}

body.light-mode .bulk-action-bar .bulk-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: #333;
}

body.light-mode .report-card.selected {
    background: rgba(179, 132, 14, 0.08) !important;
}

/* ===== v19.5.1: OFFLINE INDICATOR BAR ===== */
.offline-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(135deg, #92400e, #b45309);
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.offline-bar.active {
    transform: translateY(0);
}

.offline-bar.online {
    background: linear-gradient(135deg, #065f46, #047857);
}

.offline-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

.offline-content i {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.offline-sync-status {
    font-size: 0.7rem;
    opacity: 0.8;
    font-weight: 400;
    margin-left: auto;
}

/* ===== v19.5.1: KEYBOARD SHORTCUTS PANEL ===== */
.keyboard-shortcuts-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(18, 18, 22, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 0;
    z-index: 10001;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.keyboard-shortcuts-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.kb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kb-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}

.kb-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 4px;
    border-radius: 8px;
    transition: background 0.2s;
}

.kb-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
}

.kb-list {
    padding: 12px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kb-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.kb-item:last-child {
    border-bottom: none;
}

.kb-item kbd {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-blue);
    min-width: 70px;
    text-align: center;
}

.kb-item span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Light mode overrides for shortcuts panel */
body.light-mode .keyboard-shortcuts-panel {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

body.light-mode .kb-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .kb-close:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.light-mode .kb-item {
    border-bottom-color: rgba(0, 0, 0, 0.04);
}

body.light-mode .kb-item kbd {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
}

/* 24.9.6 (S3): Tarihçe penceresinin (timeline-modal) stilleri kaldırıldı — pencere kalktı */

/* Barcode Scanner Scan Line Animation */
@keyframes scanLine {
    0%, 100% { transform: translateY(-20px); opacity: 0.4; }
    50% { transform: translateY(20px); opacity: 1; }
}
/* Modern Barcode Scanner UI */
.scanner-viewfinder {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}

.scanner-viewfinder video {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
}

.scanner-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 160px;
    border: 2px solid var(--accent-purple);
    border-radius: 12px;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 10;
}

.scanner-laser {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 2px;
    background: var(--accent-red);
    box-shadow: 0 0 12px var(--accent-red), 0 0 4px var(--accent-red);
    animation: scannerLaserMove 2s infinite ease-in-out;
    z-index: 11;
}

@keyframes scannerLaserMove {
    0%, 100% { top: 10%; opacity: 0.3; }
    50% { top: 90%; opacity: 1; }
}

.scanner-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid var(--accent-purple);
}

.scanner-corner-tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.scanner-corner-tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.scanner-corner-bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.scanner-corner-br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }

/* Premium Sync Success Animation (Corrected Centering & Brand Colors) */
@keyframes syncSuccessPop {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.sync-success-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    background: var(--accent-blue); /* MerCont Amber/Gold */
    color: black; /* High contrast on gold */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    z-index: 11000;
    pointer-events: none;
    animation: syncSuccessPop 1s ease-out forwards;
    box-shadow: 0 0 50px rgba(200, 230, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* System Auditor Specific Styles */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
    display: inline-block;
}

#audit-results-container {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Tab active state refinement */
.audit-tabs .active-tab {
    background: rgba(251, 146, 60, 0.1) !important;
    border-color: var(--accent-orange) !important;
    color: var(--accent-orange) !important;
}

/* =========================================================
   v20.3.0 — Görsel İyileştirme Paketi
   Mevcut davranışı bozmayacak biçimde EKLENMİŞ tamamlayıcı stiller.
   ========================================================= */

:root {
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --blur-standard: 14px;
    --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.28);
    --shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.42);
    --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Semantic accent aliases (davranışı değiştirmez; okunurluk için) */
    --gold-primary: #b3840e;
    --gold-warm: #c99520;
}

/* Tipografi: başlıklar biraz sakinleşsin */
h1, h2, h3 {
    letter-spacing: -0.01em;
}

/* ---- Toast: dinamik ikon + yumuşak giriş ---- */
@keyframes toastSlideUp {
    from { transform: translate(-50%, 18px); opacity: 0; }
    to   { transform: translate(-50%, 0);     opacity: 1; }
}

#notification-toast:not(.hidden) {
    animation: toastSlideUp 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
#notification-toast.toast-success {
    border-color: var(--accent-green) !important;
    background: rgba(52, 211, 153, 0.14) !important;
}
#notification-toast.toast-error {
    border-color: var(--accent-red) !important;
    background: rgba(248, 113, 113, 0.18) !important;
}
#notification-toast .toast-icon {
    margin-right: 10px;
    vertical-align: middle;
}
#notification-toast.toast-success .toast-icon { color: var(--accent-green); }
#notification-toast.toast-error   .toast-icon { color: var(--accent-red);   }

/* ---- Yatay kaydırılabilir sekme şeridi (mobilde) ---- */
.hscroll-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.hscroll-tabs::-webkit-scrollbar {
    height: 4px;
}
.hscroll-tabs::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
}
.hscroll-tabs::-webkit-scrollbar-track {
    background: transparent;
}
.hscroll-tabs > button {
    flex-shrink: 0;
}

/* ---- Boş durum bileşeni ---- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 20px;
    color: var(--text-muted);
    text-align: center;
}
/* v21.3.12: .empty-state alt class'ları (empty-icon/-title/-sub) hiçbir yerden
   kullanılmıyordu — audit fix. Live olan parent .empty-state korunuyor (app.js:9580'de SVG/h3/p ile kullanılıyor). */

/* ---- Responsive — tablet ve mobil ---- */
@media (max-width: 1024px) {
    .modal-content { max-width: 92vw; }
    .modal-body, .modal-header { padding: 22px; }
    .modal-footer { padding: 16px 22px; }
}
@media (max-width: 640px) {
    .modal-content { max-height: 94vh; border-radius: var(--radius-lg); }
    .modal-header, .modal-body { padding: 18px; }
    .modal-footer { padding: 14px 18px; flex-wrap: wrap; gap: 8px; }
    .modal-footer .btn { flex: 1; min-width: 120px; }
    /* Tariff overlay: tab şeridi iki satıra kaymasın, kaydırılsın */
    #tariff-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    #tariff-tabs > button { flex-shrink: 0; }
    /* Bildirim toast mobilde biraz yukarıda dursun (iOS home-indicator) */
    #notification-toast {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
        max-width: 92vw;
        padding: 12px 20px !important;
    }
    /* Unit grid zaten 1fr'a düşüyor; unit card biraz daha kompakt */
    .unit-card { min-height: 200px; padding: 28px 18px; }
    .unit-card-icon { height: 80px; width: 80px; font-size: 3rem; margin-bottom: 18px; }
    .unit-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
}
@media (max-width: 480px) {
    .btn { padding: 9px 14px; font-size: 0.82rem; }
    header { padding: 8px 12px; }
}

/* ---- Kaydırılabilir overflow içinde hover parazitini kes ---- */
@media (hover: none) {
    .unit-card:hover { transform: none; }
}

/* ---- Focus ring — klavye erişilebilirliği ---- */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   v20.3.2 — Inline cost row, TL suggestion chip, TL total
   ═══════════════════════════════════════════════════════════ */

/* Total USD ($) + TL equivalent, stacked cleanly under the hours line */
.card-total-tl {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(200, 230, 0, 0.85);
    background: rgba(200, 230, 0, 0.06);
    border: 1px solid rgba(200, 230, 0, 0.18);
    border-radius: 6px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    align-self: flex-end;
}

/* Inline cost entry row on repairing/completed cards */
.cost-inline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    background: rgba(255, 255, 255, 0.015);
}

.cost-inline-label {
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.25px;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cost-inline-input {
    width: 88px;
    height: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: white;
    text-align: right;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.cost-inline-input:hover {
    border-color: rgba(255, 255, 255, 0.22);
}
.cost-inline-input:focus {
    border-color: var(--accent-blue);
    background: rgba(56, 189, 248, 0.08);
    outline: none;
}

/* TL cost suggestion chip — appears when cost is empty */
.cost-suggest-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #c8e600;
    background: rgba(200, 230, 0, 0.1);
    border: 1px dashed rgba(200, 230, 0, 0.4);
    border-radius: 14px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.2px;
    transition: all 0.18s ease;
    user-select: none;
}
.cost-suggest-chip:hover {
    background: rgba(200, 230, 0, 0.22);
    border-style: solid;
    border-color: rgba(200, 230, 0, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(200, 230, 0, 0.15);
}
.cost-suggest-chip:active {
    transform: translateY(0);
}

/* Let the description field grow to fill remaining space */
.cost-inline-row #inline-marintek-desc- ,
.cost-inline-row select[id^="inline-marintek-desc-"],
.cost-inline-row input[id^="inline-marintek-desc-"] {
    flex: 1 1 120px;
    min-width: 120px;
    height: 30px;
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Keep the currency select aligned with the input */
.cost-inline-row select[id^="inline-marintek-currency-"] {
    height: 30px;
    flex: 0 0 58px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 6px;
}

/* v23.6.3: Yıkama/Open Top gider satırındaki personel ve işlem seçicileri
   hiçbir yükseklik kuralına takılmıyordu (kural yalnız inline-marintek-desc-
   ve -currency- öneklerini seçiyor) → 21px kalıyor, komşu input ve döviz
   seçicisi 30px oluyordu. 9px sapma, her Yıkama/OT kartında görünür.
   flex VERİLMEZ — OT seçicisinin kendi inline flex:0 0 88px'i ile çakışır. */
.cost-inline-row select[id^="inline-personnel-"],
.cost-inline-row select[id^="inline-ot-op-"] {
    height: 30px;
    box-sizing: border-box;
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Responsive: on narrow screens, stack cleanly without cramming */
@media (max-width: 640px) {
    .cost-inline-row { padding: 8px 10px; gap: 6px; }
    .cost-inline-input { width: 72px; }
    .cost-inline-row #inline-marintek-desc-,
    .cost-inline-row select[id^="inline-marintek-desc-"],
    .cost-inline-row input[id^="inline-marintek-desc-"],
    .cost-inline-row select[id^="inline-personnel-"] {
        flex-basis: 100%;
        min-width: 100%;
    }
    .cost-suggest-chip { order: -1; }
}

/* ==========================================================================
   v20.3.3 — Profit/Loss badge on cost-inline-row
   ========================================================================== */
.profit-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: transform 0.15s ease;
    margin-left: auto;
}
.profit-badge i { font-size: 0.85rem; }
.profit-badge small { font-weight: 600; opacity: 0.85; font-size: 0.65rem; }
.profit-badge-pos {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.profit-badge-neg {
    background: rgba(220, 38, 38, 0.16);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.4);
}
.profit-badge:hover { transform: translateY(-1px); }

@media (max-width: 640px) {
    .profit-badge {
        margin-left: 0;
        order: 10;
        flex-basis: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   v20.3.3 — Rate-not-yet-locked pill (month-end lock mode)
   ========================================================================== */
.rate-pending-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ==========================================================================
   v20.3.3 — Bulk cost modal
   ========================================================================== */
.bulk-cost-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 10010;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.bulk-cost-modal {
    width: 100%;
    max-width: 420px;
    padding: 24px;
    border-radius: 14px;
}
.bulk-cost-modal h3 {
    margin: 0 0 14px;
    font-size: 1rem;
    color: var(--accent-green, #c8e600);
    display: flex; align-items: center; gap: 8px;
}
.bulk-cost-modal .bc-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.bulk-cost-modal .bc-option {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.bulk-cost-modal .bc-option:hover {
    border-color: var(--accent-green, #c8e600);
    background: rgba(200, 230, 0, 0.05);
}
.bulk-cost-modal .bc-option.selected {
    border-color: var(--accent-green, #c8e600);
    background: rgba(200, 230, 0, 0.08);
}
.bulk-cost-modal .bc-option-title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: #fff;
}
.bulk-cost-modal .bc-option-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.bulk-cost-modal .bc-fixed-input {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    align-items: center;
}
.bulk-cost-modal .bc-fixed-input input {
    flex: 1;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
}
.bulk-cost-modal .bc-fixed-input select {
    width: 70px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 0.8rem;
}
.bulk-cost-modal .bc-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.bulk-cost-modal .bc-btn {
    flex: 1;
    padding: 11px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
}
.bulk-cost-modal .bc-btn-apply {
    background: var(--accent-green, #c8e600);
    color: #1a1a1a;
}
.bulk-cost-modal .bc-btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.bulk-cost-modal .bc-preview {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    max-height: 140px;
    overflow-y: auto;
}
.bulk-cost-modal .bc-preview-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.bulk-cost-modal .bc-preview-row:last-child { border-bottom: none; }
.bulk-cost-modal .bc-preview-row b { color: #c8e600; }

/* ==========================================================================
   v20.3.4 — Mobile compaction: keep report cards tidy on narrow screens
   ==========================================================================
   Goal: nothing overflows the card, pills wrap neatly, font sizes scale down.
*/
@media (max-width: 768px) {
    /* final: hard viewport clamp so nothing drifts past the edge  */
    .report-card,
    .report-card.v1004-card,
    .report-card.glass {
        max-width: 100% !important;
        width: auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    #report-list,
    .report-list {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* final: 2-row layout. Row 1 = container info (full width).
       Row 2 = price block on the left + action buttons on the right — one line,
       flush to edges, no empty gap.  */
    .report-card-top-bar {
        padding: 10px 12px;
        gap: 10px;
        flex-direction: column !important;
        align-items: stretch !important;
        max-width: 100%;
        overflow: hidden;
    }
    .card-top-left {
        gap: 10px;
        width: 100%;
        min-width: 0;
    }
    .card-top-right {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px;
    }
    .card-top-right-row {
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px;
        flex-wrap: nowrap;
    }
    .card-summary-price {
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 8px;
        text-align: left;
        flex-wrap: wrap;
    }
    .card-primary-actions {
        gap: 6px;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
    .card-top-left h4 {
        font-size: 1rem;
        flex-wrap: wrap;
        row-gap: 4px;
        column-gap: 6px;
        line-height: 1.35;
        /* removed word-break:break-word — it was splitting "20 DC" into two lines */
        overflow-wrap: normal;
        word-break: normal;
    }
    /* All inline pills inside h4 — keep each pill on one line, never split text internally */
    .card-top-left h4 > span {
        font-size: 0.58rem !important;
        padding: 2px 6px !important;
        letter-spacing: 0.2px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        flex-shrink: 0;
    }
    .card-top-left h4 > span i {
        font-size: 0.72rem !important;
    }
    .card-customer-info {
        font-size: 0.78rem;
        padding-left: 0;
        border-left: none;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 5px;
        row-gap: 3px;
        margin-top: 3px;
    }
    .card-customer-info > span {
        font-size: 0.55rem !important;
        padding: 2px 6px !important;
    }
    .card-top-right {
        gap: 6px;
    }
    .card-top-right-row {
        gap: 12px;
    }
    .card-total-price {
        font-size: 1.15rem;
    }
    .card-total-hours {
        font-size: 0.66rem;
    }
    .card-total-tl {
        font-size: 0.62rem;
        padding: 1px 7px;
    }
    .card-primary-actions .btn {
        height: 32px;
        font-size: 0.75rem;
        padding: 0 10px;
    }
    /* Inline cost row compaction */
    .cost-inline-row {
        padding: 7px 10px !important;
        gap: 7px !important;
        row-gap: 5px !important;
    }
    .cost-inline-label {
        font-size: 0.56rem !important;
    }
    .cost-inline-input {
        width: 74px;
        font-size: 0.76rem;
    }
    .cost-suggest-chip {
        font-size: 0.64rem !important;
        padding: 2px 8px !important;
    }
    .profit-badge {
        font-size: 0.64rem;
        padding: 3px 8px;
    }
    .profit-badge i { font-size: 0.76rem; }
    .profit-badge small { font-size: 0.56rem; }
    .rate-pending-pill {
        font-size: 0.54rem;
        padding: 2px 6px;
    }
    /* Bitirme tarihi satırı mobilde kompakt */
    .card-meta-date {
        font-size: 0.64rem !important;
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        align-self: flex-start !important;  /* Prevent parent flex stretch */
        flex: 0 0 auto !important;
    }
    .card-meta-date input[type="date"] {
        font-size: 0.62rem !important;
        padding: 1px 4px !important;
        width: 108px !important;
        max-width: 108px !important;
        min-width: 0 !important;
        flex: 0 0 108px !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    /* Status + unit badges inside customer info */
    .card-customer-info > span[style*="border-radius:4px"] {
        font-size: 0.52rem !important;
        padding: 1px 5px !important;
    }
    /* Report body tables — allow horizontal scroll without breaking layout */
    .report-card-body { grid-template-columns: 1fr; }
}

/* Extra-narrow phones (≤420px) — tighten further */
@media (max-width: 420px) {
    .card-top-left h4 {
        font-size: 0.85rem;
    }
    .card-top-left h4 > span {
        font-size: 0.46rem !important;
    }
    .card-total-price {
        font-size: 0.95rem;
    }
    .cost-inline-input {
        width: 58px;
    }
    .card-primary-actions .btn {
        height: 28px;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * v20.11.16 — RESPONSIVE LAYER
 * Target: iPad portrait/Stage-Manager + iPhone narrow widths.
 * Strategy: hit known overflow patterns (inline grids, fixed
 * widths, footer zoom control) without rewriting every modal.
 * ═══════════════════════════════════════════════════════════════ */

/* iPad landscape & below — constrain content card + shrink form controls so
   the layout doesn't feel sparse and oversized on tablet. */
@media (max-width: 1400px) {
    /* v21.5.3: "#zoom-control { display:none }" kuralı kaldırıldı — zoom kontrolü
       mobil/tablette de görünür olmalı (kullanıcı talebi). Eskiden v20.11.16'da
       mobilde zoom kapatıldığı için gizleniyordu; artık zoom mobilde de aktif. */
    section, main, #main-app-container { max-width: 100vw; overflow-x: hidden; }

    /* Center the section content with a sane max width */
    #accounting-view > div:first-child,
    #accounting-view > .glass {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    #accounting-view .glass { padding: 22px !important; }
}

/* Date inputs + dropdown + Excel button — hepsi aynı kompakt boyut.
   Grid kolonlarını sabit genişliğe çekiyoruz ki 1fr stretch'i durdurur. */
#accounting-view .accounting-grid {
    grid-template-columns: 180px 180px 180px auto !important;
    justify-content: start !important;
    gap: 12px !important;
}

/* Tablet portrait / small tablets — 2 satır halinde sığsın */
@media (max-width: 720px) {
    #accounting-view .accounting-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

/* iPhone — her kontrol kendi satırında */
@media (max-width: 480px) {
    #accounting-view .accounting-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    #accounting-view .accounting-grid .btn {
        width: 100% !important;
        min-width: 0;
    }
}

#accounting-view .accounting-grid input[type="date"],
#accounting-view .accounting-grid select,
#accounting-view .accounting-grid .btn {
    height: 44px !important;
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
/* Date input — iOS Safari native styling'i kapat ki height/padding dinlensin */
#accounting-view .accounting-grid input[type="date"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: white !important;
    line-height: 28px !important;
    min-height: 44px !important;
    max-height: 44px !important;
}
/* iOS Safari'nin internal date display element'i */
#accounting-view .accounting-grid input[type="date"]::-webkit-date-and-time-value {
    text-align: left !important;
    line-height: 28px !important;
    height: 28px !important;
    margin: 0 !important;
}
#accounting-view .accounting-grid input[type="date"]::-webkit-datetime-edit {
    line-height: 28px !important;
    padding: 0 !important;
}
/* Excel button — kompakt genişlik */
#accounting-view .accounting-grid > div:last-child {
    width: auto;
}
#accounting-view .accounting-grid .btn {
    width: auto !important;
    min-width: 130px;
    padding: 0 14px !important;
    margin-bottom: 0 !important;
}
/* Form-group margin-bottom'ını sıfırla ki bottom hizası eşit olsun */
#accounting-view .accounting-grid .form-group {
    margin-bottom: 0 !important;
}

/* Narrow tablet portrait (≤900px) — start collapsing wide grids */
@media (max-width: 900px) {
    .accounting-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    .accounting-grid > div { width: 100%; }
    .accounting-grid .btn { width: 100%; margin-bottom: 0 !important; }
    .profit-cards-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .glass { padding: 16px !important; }
}

/* Phone (≤600px) — single column for everything */
@media (max-width: 600px) {
    .accounting-grid { grid-template-columns: 1fr !important; }
    .profit-cards-grid { grid-template-columns: 1fr !important; }
    .glass { padding: 12px !important; }
}

/* Phone — collapse anything that's still 2+ columns */
@media (max-width: 600px) {
    /* Inline-styled 2-column grids in modals (catches most "form-row" patterns) */
    [style*="grid-template-columns: 1fr 1fr"]:not(.no-stack) {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns: repeat(2"]:not(.no-stack) {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns: repeat(3"]:not(.no-stack) {
        grid-template-columns: 1fr !important;
    }
    [style*="grid-template-columns: repeat(4"]:not(.no-stack) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Modal headers can crowd on narrow widths — let them wrap */
    [id$="-overlay"] h2, [id$="-overlay"] h3 { font-size: 0.95rem !important; }

    /* Tighten padding everywhere on phones */
    .glass { padding: 12px !important; }
}

/* iPhone Pro Max width range (≤430px) — hardest case */
@media (max-width: 430px) {
    /* Buttons in toolbars often overflow — let them wrap */
    /* 25.0.1: sütun yönlü listeler HARİÇ — yüksekliği sınırlı sütunda sarma yeni SÜTUN açar, içerik sağdan taşar
       (Sürüm Geçmişi telefonda sağdan kesik görünüyordu). :where → özgüllük eskisi gibi (0,2,0) */
    [style*="display:flex"][style*="gap"]:not(:where([style*="flex-direction:column"], [style*="flex-direction: column"])) { flex-wrap: wrap; }
    [style*="display: flex"][style*="gap"]:not(:where([style*="flex-direction:column"], [style*="flex-direction: column"])) { flex-wrap: wrap; }

    /* Section title rows — keep stacked */
    section > div:first-child { flex-wrap: wrap; }
}

/* v20.11.35: Quick Entry form — label/input alignment lock.
   Flex column çünkü form-group'lar Elle-Gir toggle için 2 alternatif input içerir
   (biri gizli, biri görünür — display:none olan layoutu işgal etmesin diye flex).
   Label 22px + görünür çocuk 46px = 68px sabit yükseklik. Sapma imkânsız. */
#quick-entry-container .form-group {
    display: flex;
    flex-direction: column;
}
#quick-entry-container .form-group > label {
    margin-bottom: 0 !important;
    line-height: 22px;
    height: 22px;
}
#quick-entry-container .form-group > input,
#quick-entry-container .form-group > select,
#quick-entry-container .form-group > div {
    height: 46px;
    box-sizing: border-box;
    margin: 0;
}
#quick-entry-container .form-group > div > input {
    height: 46px;
    box-sizing: border-box;
}

/* ============================================================
   FAZ 2 — ENDÜSTRİYEL TEMASI (opt-in)
   Karakter: sıcak ekru zemin, çelik mavi accent, mono sayılar,
   keskin köşeler, glassmorphism yok (düz panel).
   light-mode altyapısı üzerine binar — JS ikisini birlikte set eder.
   ============================================================ */
body[data-theme="endustriyel-light"] {
    /* Mevcut Klasik token'larını Endüstriyel değerlere taşı */
    --primary-bg: #F7F6F2;
    --glass-bg: #FDFCF9;
    --glass-border: rgba(30, 30, 35, 0.10);
    --text-main: #1A1814;
    --text-muted: #514D44;
    --accent-blue: #1E3A5F;
    --accent-purple: #3B5E7C;
    --accent-green: #16693B;
    --accent-orange: #92580B;
    --accent-red: #A8201C;
    --accent-terracotta: #A8201C;

    /* Yeni semantic token'lar — Endüstriyel için override */
    --surface: #FDFCF9;
    --bg-card: var(--surface);   /* panel zemini = tema yüzeyi (.modal-content ile aynı) */
    --surface-alt: #EFEDE6;
    --surface-hover: #F2F0EA;
    --border: rgba(30, 30, 35, 0.10);
    --border-strong: rgba(30, 30, 35, 0.20);
    --text-faint: #98948A;
    --on-accent: #FDFCF9;
    --status-success: #16693B;
    --status-warn: #92580B;
    --status-danger: #A8201C;
    --status-info: #1E3A5F;
    --status-repair: #92580B;
    --status-waiting: #514D44;
    --status-done: #16693B;
    --status-out: #A8201C;
    --status-pti: #3B5E7C;
    --status-wash: #0E7490;
    --radius-btn: 6px;
    --radius-input: 6px;
    --radius-card: 6px;
    --radius-sm: 4px;
    --status-style: dot;
    --card-style: flat;
    --scheme: light;
}

/* Body zemin override — radial gradient yerine düz ekru */
body[data-theme="endustriyel-light"] {
    background: var(--primary-bg) !important;
    color: var(--text-main);
}

/* Glassmorphism kapat — Endüstriyel düz panel ister */
body[data-theme="endustriyel-light"] .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Sidebar daha sağlam */
body[data-theme="endustriyel-light"] .sidebar {
    background: var(--surface) !important;
    border-right-color: var(--border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Header */
body[data-theme="endustriyel-light"] header {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Primary buton: çelik mavi */
body[data-theme="endustriyel-light"] .btn-primary,
body[data-theme="endustriyel-light"] .modern-btn-primary {
    background: var(--accent-blue) !important;
    color: var(--on-accent) !important;
    border-color: var(--accent-blue) !important;
    border-radius: var(--radius-btn) !important;
}

body[data-theme="endustriyel-light"] .btn-primary:hover,
body[data-theme="endustriyel-light"] .modern-btn-primary:hover {
    background: #142A48 !important;
    border-color: #142A48 !important;
}

/* Form elemanları: keskin köşe, sıcak zemin */
body[data-theme="endustriyel-light"] input,
body[data-theme="endustriyel-light"] select,
body[data-theme="endustriyel-light"] textarea {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-input) !important;
}

body[data-theme="endustriyel-light"] input::placeholder,
body[data-theme="endustriyel-light"] textarea::placeholder {
    color: var(--text-faint) !important;
}

body[data-theme="endustriyel-light"] input:focus,
body[data-theme="endustriyel-light"] select:focus,
body[data-theme="endustriyel-light"] textarea:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.10) !important;
}

/* Modal */
body[data-theme="endustriyel-light"] .modal-content {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Generic buton köşeleri */
body[data-theme="endustriyel-light"] .btn,
body[data-theme="endustriyel-light"] button.btn,
body[data-theme="endustriyel-light"] .btn-add-row,
body[data-theme="endustriyel-light"] .btn-danger {
    border-radius: var(--radius-btn) !important;
}

/* Mono font: konteyner no'lar, sayısal alanlar
   Geniş tutuyoruz — class adlarını bilmediğimiz için input[type=number]
   ve numeric alanlara uygulanır. Görsel yan etki: tablolarda sayılar mono. */
body[data-theme="endustriyel-light"] input[type="number"],
body[data-theme="endustriyel-light"] input[inputmode="numeric"],
body[data-theme="endustriyel-light"] input[inputmode="decimal"],
body[data-theme="endustriyel-light"] .modern-input[data-mono],
body[data-theme="endustriyel-light"] [data-numeric],
body[data-theme="endustriyel-light"] code,
body[data-theme="endustriyel-light"] kbd {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-feature-settings: 'tnum' 1;
}

/* Logo görseli light moda zaten geçiyor — Endüstriyel için ek müdahale yok */

/* ============================================================
   FAZ 2B — SAHA TEMASI (opt-in)
   Karakter: yüksek kontrast saf beyaz zemin, 2px siyah çerçeve,
   hard shadow (3-4px), turuncu accent, kalın font.
   Hedef: sahadaki tamirci, telefon, dış ortam okunabilirliği.
   light-mode altyapısı üzerine binar — JS ikisini paralel set eder.
   ============================================================ */
body[data-theme="saha-light"] {
    --primary-bg: #FFFFFF;
    --glass-bg: #FFFFFF;
    --glass-border: #000000;
    --text-main: #000000;
    --text-muted: #1F2937;
    --accent-blue: #EA580C;
    --accent-purple: #C2410C;
    --accent-green: #15803D;
    --accent-orange: #EA580C;
    --accent-red: #B91C1C;
    --accent-terracotta: #B91C1C;

    --surface: #FFFFFF;
    --bg-card: var(--surface);   /* panel zemini = tema yüzeyi (.modal-content ile aynı) */
    --surface-alt: #F3F4F6;
    --surface-hover: #F9FAFB;
    --border: #000000;
    --border-strong: #000000;
    --text-faint: #4B5563;
    --on-accent: #FFFFFF;
    --status-success: #15803D;
    --status-warn: #B45309;
    --status-danger: #B91C1C;
    --status-info: #1E40AF;
    --status-repair: #B45309;
    --status-waiting: #1F2937;
    --status-done: #15803D;
    --status-out: #B91C1C;
    --status-pti: #1E40AF;
    --status-wash: #0E7490;
    --radius-btn: 8px;
    --radius-input: 8px;
    --radius-card: 8px;
    --radius-sm: 6px;
    --scheme: light;
}

body[data-theme="saha-light"] {
    background: #FFFFFF !important;
    color: #000000;
    font-weight: 500;
}

/* Glassmorphism kapat — Saha kalın çerçeveli düz panel ister */
body[data-theme="saha-light"] .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #FFFFFF !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 1) !important;
}

/* Header: kalın siyah alt çizgi */
body[data-theme="saha-light"] header {
    background: #FFFFFF !important;
    border: 0 !important;
    border-bottom: 2px solid #000000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Sidebar: kalın siyah sağ çizgi */
body[data-theme="saha-light"] .sidebar {
    background: #FFFFFF !important;
    border-right: 2px solid #000000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Primary button: turuncu zemin, siyah çerçeve, hard shadow, kalın yazı */
body[data-theme="saha-light"] .btn-primary,
body[data-theme="saha-light"] .modern-btn-primary {
    background: #EA580C !important;
    color: #FFFFFF !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #000000 !important;
    font-weight: 700 !important;
}

body[data-theme="saha-light"] .btn-primary:hover,
body[data-theme="saha-light"] .modern-btn-primary:hover {
    background: #C2410C !important;
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 #000000 !important;
}

body[data-theme="saha-light"] .btn-primary:active,
body[data-theme="saha-light"] .modern-btn-primary:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 #000000 !important;
}

/* Generic butonlar: keskin siyah çerçeve, kalın yazı */
body[data-theme="saha-light"] .btn,
body[data-theme="saha-light"] button.btn {
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    background: #FFFFFF !important;
    color: #000000 !important;
}

body[data-theme="saha-light"] .btn.glass {
    background: #FFFFFF !important;
    box-shadow: 2px 2px 0 #000000 !important;
}

/* Tehlike butonu */
body[data-theme="saha-light"] .btn-danger {
    background: #B91C1C !important;
    color: #FFFFFF !important;
    border: 2px solid #000000 !important;
    box-shadow: 3px 3px 0 #000000 !important;
    font-weight: 700 !important;
}

/* Form elemanları: beyaz zemin, kalın siyah çerçeve */
body[data-theme="saha-light"] input,
body[data-theme="saha-light"] select,
body[data-theme="saha-light"] textarea {
    background: #FFFFFF !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

body[data-theme="saha-light"] input::placeholder,
body[data-theme="saha-light"] textarea::placeholder {
    color: #6B7280 !important;
    font-weight: 400;
}

body[data-theme="saha-light"] input:focus,
body[data-theme="saha-light"] select:focus,
body[data-theme="saha-light"] textarea:focus {
    border-color: #EA580C !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.20) !important;
}

/* Modal — daha güçlü shadow */
body[data-theme="saha-light"] .modal-content {
    background: #FFFFFF !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    box-shadow: 6px 6px 0 #000000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Mevcut light-mode modal override'ı için */
body[data-theme="saha-light"] select option {
    background-color: #FFFFFF;
    color: #000000;
}

/* ============================================================
   BADGE KONTRAST DÜZELTMESI (Endüstriyel + Saha)
   Mevcut .category-card .badge "color: #000" hardcoded. Yeni
   accent renkleri (çelik mavi koyu, turuncu) üzerinde siyah yazı
   yetersiz kalıyor — light tema variantlarında beyaz yap.
   ============================================================ */
body[data-theme="endustriyel-light"] .category-card .badge,
body[data-theme="endustriyel-light"] .category-card .badge,
body[data-theme="saha-light"] .category-card .badge,
body[data-theme="saha-light"] .category-card .badge {
    color: #FFFFFF !important;
}

/* ============================================================
   FAZ 2C — ENDÜSTRİYEL DARK
   Klasik Karanlık'ta sıkışmış glassmorphism yerine düz koyu
   panel + çelik mavi accent. Mono sayılar Endüstriyel kimliği.
   ============================================================ */
body[data-theme="endustriyel-dark"] {
    --primary-bg: #1F1D19;
    --glass-bg: #2A2823;
    --glass-border: rgba(255, 250, 240, 0.10);
    --text-main: #F0EDE6;
    --text-muted: #A8A39A;
    --accent-blue: #6B9FB8;
    --accent-purple: #8AB5CC;
    --accent-green: #4ADE80;
    --accent-orange: #F59E0B;
    --accent-red: #F87171;
    --accent-terracotta: #F87171;

    --surface: #2A2823;
    --bg-card: var(--surface);   /* panel zemini = tema yüzeyi (.modal-content ile aynı) */
    --surface-alt: #34322C;
    --surface-hover: #38362F;
    --border: rgba(255, 250, 240, 0.10);
    --border-strong: rgba(255, 250, 240, 0.20);
    --text-faint: #6B6862;
    --on-accent: #1F1D19;
    --status-success: #4ADE80;
    --status-warn: #F59E0B;
    --status-danger: #F87171;
    --status-info: #6B9FB8;
    --status-repair: #F59E0B;
    --status-waiting: #A8A39A;
    --status-done: #4ADE80;
    --status-out: #F87171;
    --status-pti: #8AB5CC;
    --status-wash: #5DADE2;
    --radius-btn: 6px;
    --radius-input: 6px;
    --radius-card: 6px;
    --radius-sm: 4px;
    --scheme: dark;
}

body[data-theme="endustriyel-dark"] {
    background: var(--primary-bg) !important;
    color: var(--text-main);
}

/* Glassmorphism kapalı, düz panel */
body[data-theme="endustriyel-dark"] .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: none !important;
}

body[data-theme="endustriyel-dark"] header,
body[data-theme="endustriyel-dark"] .sidebar {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="endustriyel-dark"] .btn-primary,
body[data-theme="endustriyel-dark"] .modern-btn-primary {
    background: var(--accent-blue) !important;
    color: var(--on-accent) !important;
    border-radius: var(--radius-btn) !important;
}

body[data-theme="endustriyel-dark"] input,
body[data-theme="endustriyel-dark"] select,
body[data-theme="endustriyel-dark"] textarea {
    background: var(--surface-alt) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-input) !important;
}

body[data-theme="endustriyel-dark"] .category-card .badge {
    color: var(--on-accent) !important;
}

/* Mono sayılar Endüstriyel Dark için de */
body[data-theme="endustriyel-dark"] input[type="number"],
body[data-theme="endustriyel-dark"] input[inputmode="numeric"],
body[data-theme="endustriyel-dark"] input[inputmode="decimal"],
body[data-theme="endustriyel-dark"] [data-numeric],
body[data-theme="endustriyel-dark"] code,
body[data-theme="endustriyel-dark"] kbd {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-feature-settings: 'tnum' 1;
}

/* ============================================================
   FAZ 2C — SAHA DARK
   Saha'nın yüksek-kontrast karakterini koyu zemine taşır.
   Beyaz çerçeve + beyaz glow (hard shadow yerine), turuncu kalır.
   ============================================================ */
body[data-theme="saha-dark"] {
    --primary-bg: #000000;
    --glass-bg: #0A0A0A;
    --glass-border: #FFFFFF;
    --text-main: #FFFFFF;
    --text-muted: #E5E5E5;
    --accent-blue: #EA580C;
    --accent-purple: #C2410C;
    --accent-green: #4ADE80;
    --accent-orange: #EA580C;
    --accent-red: #F87171;
    --accent-terracotta: #F87171;

    --surface: #0A0A0A;
    --bg-card: var(--surface);   /* panel zemini = tema yüzeyi (.modal-content ile aynı) */
    --surface-alt: #141414;
    --surface-hover: #1A1A1A;
    --border: #FFFFFF;
    --border-strong: #FFFFFF;
    --text-faint: #A3A3A3;
    --on-accent: #FFFFFF;
    --status-success: #4ADE80;
    --status-warn: #F59E0B;
    --status-danger: #F87171;
    --status-info: #5EB3FF;
    --status-repair: #F59E0B;
    --status-waiting: #A3A3A3;
    --status-done: #4ADE80;
    --status-out: #F87171;
    --status-pti: #5EB3FF;
    --status-wash: #5DADE2;
    --radius-btn: 8px;
    --radius-input: 8px;
    --radius-card: 8px;
    --radius-sm: 6px;
    --scheme: dark;
}

body[data-theme="saha-dark"] {
    background: #000000 !important;
    color: #FFFFFF;
    font-weight: 500;
}

/* Beyaz çerçeve + beyaz glow (hard shadow'un dark karşılığı) */
body[data-theme="saha-dark"] .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #0A0A0A !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 8px !important;
    box-shadow: 4px 4px 0 #FFFFFF !important;
}

body[data-theme="saha-dark"] header {
    background: #000000 !important;
    border: 0 !important;
    border-bottom: 2px solid #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="saha-dark"] .sidebar {
    background: #000000 !important;
    border-right: 2px solid #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="saha-dark"] .btn-primary,
body[data-theme="saha-dark"] .modern-btn-primary {
    background: #EA580C !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #FFFFFF !important;
    font-weight: 700 !important;
}

body[data-theme="saha-dark"] .btn,
body[data-theme="saha-dark"] button.btn {
    border: 2px solid #FFFFFF !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    background: #0A0A0A !important;
    color: #FFFFFF !important;
}

body[data-theme="saha-dark"] .btn.glass {
    background: #0A0A0A !important;
    box-shadow: 2px 2px 0 #FFFFFF !important;
}

body[data-theme="saha-dark"] input,
body[data-theme="saha-dark"] select,
body[data-theme="saha-dark"] textarea {
    background: #0A0A0A !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

body[data-theme="saha-dark"] .modal-content {
    background: #0A0A0A !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 8px !important;
    box-shadow: 6px 6px 0 #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="saha-dark"] .category-card .badge {
    background: #EA580C !important;
    color: #FFFFFF !important;
}

/* Tema ızgarası — Ayarlar › Tercihlerim (Ayarlar P1: ayrı Tema penceresi kalktı) */
.theme-picker-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 10px;
}

/* v22.0.6: token-tabanlı renkler — her temada okunabilir görünür */
.theme-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--surface-alt, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-main);
    transition: background 0.15s, border-color 0.15s;
    text-align: left;
    font-family: inherit;
}

.theme-picker-btn:hover {
    background: var(--surface-hover, rgba(255, 255, 255, 0.10));
    border-color: var(--accent-blue);
}

.theme-picker-btn.is-active {
    border-color: var(--accent-blue);
    background: var(--surface-hover, rgba(255, 255, 255, 0.10));
    border-width: 2px;
    padding: 11px 13px; /* border 1→2 dengelemek için */
}

.theme-picker-btn .theme-picker-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.4;
}

.theme-picker-btn .theme-picker-check {
    color: var(--accent-blue);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-left: 10px;
    font-weight: 700;
}

/* ============================================================
   FAZ 2D — LIMAN TEMASI (light + dark)
   Karakter: maritime navy zemin, sinyal sarısı accent, mono ID'ler,
   keskin 4px köşeler, denizcilik/liman operasyon havası.
   ============================================================ */

/* --- LIMAN LIGHT (revised v22.0.5 — denizci günlüğü hissi) ---
   Yellow-cream zemin (maritime log paper), navy accent, sinyal sarısı badge.
   Endüstriyel Light'tan net ayrışır: bu sıcak sarı-krem, accent navy-yellow combo. */
body[data-theme="liman-light"] {
    --primary-bg: #FFFBE6;
    --glass-bg: #FFFFFF;
    --glass-border: rgba(15, 27, 45, 0.18);
    --text-main: #0A1F33;
    --text-muted: #3D547A;
    --accent-blue: #0A3D62;
    --accent-purple: #0A3D62;
    --accent-green: #15803D;
    --accent-orange: #B45309;
    --accent-red: #B91C1C;
    --accent-terracotta: #B91C1C;

    --surface: #FFFFFF;
    --bg-card: var(--surface);   /* panel zemini = tema yüzeyi (.modal-content ile aynı) */
    --surface-alt: #FFF6CC;
    --surface-hover: #FFF1B8;
    --border: rgba(10, 61, 98, 0.18);
    --border-strong: rgba(10, 61, 98, 0.35);
    --text-faint: #6B7A8C;
    --on-accent: #FFFBE6;
    --status-success: #15803D;
    --status-warn: #B45309;
    --status-danger: #B91C1C;
    --status-info: #0A3D62;
    --status-repair: #B45309;
    --status-waiting: #3D547A;
    --status-done: #15803D;
    --status-out: #B91C1C;
    --status-pti: #0A3D62;
    --status-wash: #0E7490;
    --radius-btn: 4px;
    --radius-input: 4px;
    --radius-card: 6px;
    --radius-sm: 3px;
    --scheme: light;
}

/* Liman Light için signal yellow badge — navy text */
body[data-theme="liman-light"] .category-card .badge {
    background: #F4D03F !important;
    color: #0A1F33 !important;
    border: 1px solid rgba(10, 61, 98, 0.25);
    font-weight: 800 !important;
}

/* Liman Light hover'da yellow tint */
body[data-theme="liman-light"] .glass:hover {
    border-color: rgba(244, 208, 63, 0.50) !important;
}

body[data-theme="liman-light"] {
    background: var(--primary-bg) !important;
    color: var(--text-main);
}

body[data-theme="liman-light"] .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 1px 3px rgba(15, 27, 45, 0.06) !important;
}

body[data-theme="liman-light"] header {
    background: var(--surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-strong) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="liman-light"] .sidebar {
    background: var(--surface) !important;
    border-right: 1px solid var(--border-strong) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="liman-light"] .btn-primary,
body[data-theme="liman-light"] .modern-btn-primary {
    background: var(--accent-blue) !important;
    color: var(--on-accent) !important;
    border: 1px solid var(--accent-blue) !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 600 !important;
}

body[data-theme="liman-light"] .btn-primary:hover,
body[data-theme="liman-light"] .modern-btn-primary:hover {
    background: #093A5E !important;
    border-color: #093A5E !important;
}

body[data-theme="liman-light"] input,
body[data-theme="liman-light"] select,
body[data-theme="liman-light"] textarea {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-input) !important;
}

body[data-theme="liman-light"] input:focus,
body[data-theme="liman-light"] select:focus,
body[data-theme="liman-light"] textarea:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(15, 76, 117, 0.12) !important;
}

/* v22.0.5: Liman Light badge - üstte yeni signal-yellow override var,
   buradaki eski navy override iptal edildi (yukarıda yellow ile değişti) */

body[data-theme="liman-light"] .modal-content {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-radius: var(--radius-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Mono ID'ler — IICL konteyner numarası, kayıt no'lar */
body[data-theme="liman-light"] input[type="number"],
body[data-theme="liman-light"] input[inputmode="numeric"],
body[data-theme="liman-light"] input[inputmode="decimal"],
body[data-theme="liman-light"] [data-numeric],
body[data-theme="liman-light"] code,
body[data-theme="liman-light"] kbd {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-feature-settings: 'tnum' 1;
}

/* --- LIMAN DARK (asıl Liman karakteri — derin lacivert + sinyal sarısı) --- */
body[data-theme="liman-dark"] {
    --primary-bg: #0F1B2D;
    --glass-bg: #16263F;
    --glass-border: rgba(244, 208, 63, 0.15);
    --text-main: #E8EEF7;
    --text-muted: #94A8C4;
    --accent-blue: #F4D03F;
    --accent-purple: #F7DC6F;
    --accent-green: #2ECC71;
    --accent-orange: #F39C12;
    --accent-red: #E74C3C;
    --accent-terracotta: #E74C3C;

    --surface: #16263F;
    --bg-card: var(--surface);   /* panel zemini = tema yüzeyi (.modal-content ile aynı) */
    --surface-alt: #1D2F4A;
    --surface-hover: #1A2A42;
    --border: rgba(244, 208, 63, 0.15);
    --border-strong: rgba(244, 208, 63, 0.30);
    --text-faint: #5F7796;
    --on-accent: #0F1B2D;
    --status-success: #2ECC71;
    --status-warn: #F39C12;
    --status-danger: #E74C3C;
    --status-info: #5DADE2;
    --status-repair: #F39C12;
    --status-waiting: #94A8C4;
    --status-done: #2ECC71;
    --status-out: #E74C3C;
    --status-pti: #5DADE2;
    --status-wash: #5DADE2;
    --radius-btn: 4px;
    --radius-input: 4px;
    --radius-card: 6px;
    --radius-sm: 3px;
    --scheme: dark;
}

body[data-theme="liman-dark"] {
    background: var(--primary-bg) !important;
    color: var(--text-main);
}

body[data-theme="liman-dark"] .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30) !important;
}

body[data-theme="liman-dark"] header {
    background: var(--surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-strong) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="liman-dark"] .sidebar {
    background: var(--surface) !important;
    border-right: 1px solid var(--border-strong) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Primary button: sinyal sarısı zemin, lacivert yazı — denizci uyarı havası */
body[data-theme="liman-dark"] .btn-primary,
body[data-theme="liman-dark"] .modern-btn-primary {
    background: var(--accent-blue) !important;
    color: var(--on-accent) !important;
    border: 1px solid var(--accent-blue) !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 700 !important;
}

body[data-theme="liman-dark"] .btn-primary:hover,
body[data-theme="liman-dark"] .modern-btn-primary:hover {
    background: #F7DC6F !important;
    border-color: #F7DC6F !important;
}

body[data-theme="liman-dark"] input,
body[data-theme="liman-dark"] select,
body[data-theme="liman-dark"] textarea {
    background: var(--surface-alt) !important;
    border-color: var(--border) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-input) !important;
}

body[data-theme="liman-dark"] input:focus,
body[data-theme="liman-dark"] select:focus,
body[data-theme="liman-dark"] textarea:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(244, 208, 63, 0.15) !important;
}

body[data-theme="liman-dark"] .category-card .badge {
    background: var(--accent-blue) !important;
    color: var(--on-accent) !important;
}

body[data-theme="liman-dark"] .modal-content {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    border-radius: var(--radius-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="liman-dark"] input[type="number"],
body[data-theme="liman-dark"] input[inputmode="numeric"],
body[data-theme="liman-dark"] input[inputmode="decimal"],
body[data-theme="liman-dark"] [data-numeric],
body[data-theme="liman-dark"] code,
body[data-theme="liman-dark"] kbd {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-feature-settings: 'tnum' 1;
}

/* ============================================================
   FAZ 2E — MONO CONSOLE TEMASI (light + dark)
   Karakter: tüm UI monospace, terminal estetiği, yeşil accent,
   keskin 2px köşeler, [BRACKET] statu, glassmorphism kapalı.
   ============================================================ */

/* --- MONO LIGHT --- */
body[data-theme="mono-light"] {
    --primary-bg: #FAFAFA;
    --glass-bg: #FFFFFF;
    --glass-border: #1F1F1F;
    --text-main: #0A0A0A;
    --text-muted: #525252;
    --accent-blue: #059669;
    --accent-purple: #047857;
    --accent-green: #059669;
    --accent-orange: #525252;
    --accent-red: #1F1F1F;
    --accent-terracotta: #1F1F1F;

    --surface: #FFFFFF;
    --bg-card: var(--surface);   /* panel zemini = tema yüzeyi (.modal-content ile aynı) */
    --surface-alt: #F3F3F3;
    --surface-hover: #F8F8F8;
    --border: #1F1F1F;
    --border-strong: #0A0A0A;
    --text-faint: #A3A3A3;
    --on-accent: #FAFAFA;
    --status-success: #059669;
    --status-warn: #404040;
    --status-danger: #0A0A0A;
    --status-info: #525252;
    --status-repair: #404040;
    --status-waiting: #525252;
    --status-done: #059669;
    --status-out: #0A0A0A;
    --status-pti: #525252;
    --status-wash: #525252;
    --radius-btn: 2px;
    --radius-input: 2px;
    --radius-card: 2px;
    --radius-sm: 0;
    --scheme: light;
}

/* Mono Light: tüm metinler monospace (Phosphor icon font'ları korunur) */
body[data-theme="mono-light"],
body[data-theme="mono-light"] *:not(i):not([class*="ph-"]):not([class^="ph "]) {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
    font-feature-settings: 'tnum' 1;
}

body[data-theme="mono-light"] {
    background: var(--primary-bg) !important;
    color: var(--text-main);
}

body[data-theme="mono-light"] .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: none !important;
}

body[data-theme="mono-light"] header {
    background: var(--surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="mono-light"] .sidebar {
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="mono-light"] .btn-primary,
body[data-theme="mono-light"] .modern-btn-primary {
    background: var(--text-main) !important;
    color: var(--surface) !important;
    border: 1px solid var(--text-main) !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-theme="mono-light"] .btn-primary:hover,
body[data-theme="mono-light"] .modern-btn-primary:hover {
    background: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
}

body[data-theme="mono-light"] .btn,
body[data-theme="mono-light"] button.btn {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-btn) !important;
    background: var(--surface) !important;
    color: var(--text-main) !important;
}

body[data-theme="mono-light"] input,
body[data-theme="mono-light"] select,
body[data-theme="mono-light"] textarea {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-input) !important;
}

body[data-theme="mono-light"] input:focus,
body[data-theme="mono-light"] select:focus,
body[data-theme="mono-light"] textarea:focus {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 0 1px var(--accent-green) !important;
}

/* Mono Light badge: [N] bracket'ler ile, square corners */
body[data-theme="mono-light"] .category-card .badge {
    background: var(--text-main) !important;
    color: var(--surface) !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
}
body[data-theme="mono-light"] .category-card .badge::before { content: '['; opacity: 0.7; margin-right: 2px; }
body[data-theme="mono-light"] .category-card .badge::after { content: ']'; opacity: 0.7; margin-left: 2px; }

body[data-theme="mono-light"] .modal-content {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="mono-light"] h1,
body[data-theme="mono-light"] h2,
body[data-theme="mono-light"] h3 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- MONO DARK --- */
body[data-theme="mono-dark"] {
    --primary-bg: #000000;
    --glass-bg: #0A0A0A;
    --glass-border: #FFFFFF;
    --text-main: #FAFAFA;
    --text-muted: #A3A3A3;
    --accent-blue: #10B981;
    --accent-purple: #34D399;
    --accent-green: #10B981;
    --accent-orange: #A3A3A3;
    --accent-red: #FAFAFA;
    --accent-terracotta: #FAFAFA;

    --surface: #0A0A0A;
    --bg-card: var(--surface);   /* panel zemini = tema yüzeyi (.modal-content ile aynı) */
    --surface-alt: #141414;
    --surface-hover: #1A1A1A;
    --border: #FFFFFF;
    --border-strong: #FFFFFF;
    --text-faint: #525252;
    --on-accent: #000000;
    --status-success: #10B981;
    --status-warn: #A3A3A3;
    --status-danger: #FAFAFA;
    --status-info: #A3A3A3;
    --status-repair: #A3A3A3;
    --status-waiting: #A3A3A3;
    --status-done: #10B981;
    --status-out: #FAFAFA;
    --status-pti: #A3A3A3;
    --status-wash: #A3A3A3;
    --radius-btn: 2px;
    --radius-input: 2px;
    --radius-card: 2px;
    --radius-sm: 0;
    --scheme: dark;
}

body[data-theme="mono-dark"],
body[data-theme="mono-dark"] *:not(i):not([class*="ph-"]):not([class^="ph "]) {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace !important;
    font-feature-settings: 'tnum' 1;
}

body[data-theme="mono-dark"] {
    background: #000000 !important;
    color: var(--text-main);
}

body[data-theme="mono-dark"] .glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: none !important;
}

body[data-theme="mono-dark"] header {
    background: #000000 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="mono-dark"] .sidebar {
    background: #000000 !important;
    border-right: 1px solid var(--border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="mono-dark"] .btn-primary,
body[data-theme="mono-dark"] .modern-btn-primary {
    background: var(--accent-green) !important;
    color: var(--on-accent) !important;
    border: 1px solid var(--accent-green) !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-theme="mono-dark"] .btn-primary:hover,
body[data-theme="mono-dark"] .modern-btn-primary:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

body[data-theme="mono-dark"] .btn,
body[data-theme="mono-dark"] button.btn {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-btn) !important;
    background: #0A0A0A !important;
    color: var(--text-main) !important;
}

body[data-theme="mono-dark"] input,
body[data-theme="mono-dark"] select,
body[data-theme="mono-dark"] textarea {
    background: #0A0A0A !important;
    border: 1px solid var(--border) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-input) !important;
}

body[data-theme="mono-dark"] input:focus,
body[data-theme="mono-dark"] select:focus,
body[data-theme="mono-dark"] textarea:focus {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 0 1px var(--accent-green) !important;
}

body[data-theme="mono-dark"] .category-card .badge {
    background: var(--accent-green) !important;
    color: var(--on-accent) !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
}
body[data-theme="mono-dark"] .category-card .badge::before { content: '['; opacity: 0.7; margin-right: 2px; }
body[data-theme="mono-dark"] .category-card .badge::after { content: ']'; opacity: 0.7; margin-left: 2px; }

body[data-theme="mono-dark"] .modal-content {
    background: #0A0A0A !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="mono-dark"] h1,
body[data-theme="mono-dark"] h2,
body[data-theme="mono-dark"] h3 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================================
   SURVEY MODAL — Hub & List view stilleri (v22.0.7)
   ============================================================ */
.survey-hub-tile {
    background: var(--surface-alt, rgba(255, 255, 255, 0.04));
    color: var(--text-main);
    font-family: inherit;
    text-align: left;
}
.survey-hub-tile:hover {
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
    border-color: var(--accent-blue) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.survey-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface-alt, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.10));
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 0.78rem;
}
.survey-list-item:hover {
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
    border-color: var(--accent-blue);
}
.survey-list-item__main {
    flex: 1;
    min-width: 0;
}
.survey-list-item__id {
    font-weight: 700;
    color: var(--text-main);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: 0.02em;
}
.survey-list-item__meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.survey-list-item__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.survey-list-item__btn {
    background: transparent;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s;
}
.survey-list-item__btn:hover {
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
    color: var(--text-main);
}
.survey-list-item__btn--danger:hover {
    border-color: var(--accent-red);
    color: var(--accent-red);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v23.2.6 — TARİFE TABLOSU
   Eskiden her satır tek bir serbest akan <span> idi; açıklama uzadıkça rozetler
   kayıyor, başlık hiç yoktu. Artık 8 sütunlu hizalı tablo.
   ═══════════════════════════════════════════════════════════════════════════ */
.tariff-table-container {
    overflow-x: auto;               /* dar masaüstü/tablet: yatay kaydır (mobilde karta döner) */
    -webkit-overflow-scrolling: touch;
}
.tariff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
    table-layout: auto;
}
/* ⚠️ position:sticky <thead>/<tr> üzerinde iOS Safari'de ÇALIŞMAZ — <th>'lere uygulanır.
   Arkaplan OPAK olmalı: overlay backdrop-filter kullanıyor, yarı saydam başlık
   altındaki satırları sızdırır. */
.tariff-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #15151c;
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
    padding: 8px 8px;
    border-bottom: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
    white-space: nowrap;
}
body[data-theme$="-light"] .tariff-table thead th { background: #f4f4f7; }

.tariff-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
    line-height: 1.3;
}
.tariff-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* Sayısal sütunlar sağa yaslı — göz alt alta okuyabilsin */
.tariff-table .tt-num { text-align: right; white-space: nowrap; }
.tariff-table .tt-hours { color: var(--accent-blue); font-weight: 600; }
.tariff-table .tt-labcost { color: var(--accent-blue); opacity: 0.85; }   /* işçilik TUTARI (saat × ücret) */
.tariff-table .tt-mat { color: var(--accent-orange); }
/* Adet ("1 addit", "2 pcs") — ölçü yoksa Ölçü sütununda, varsa Parça hücresinde rozet */
.tariff-table .tt-qty {
    color: var(--text-muted); font-size: 0.6rem;
    background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: 3px; white-space: nowrap;
}
.tariff-table .tt-total { color: var(--accent-green); font-weight: 800; }
.tariff-table .tt-code { color: var(--accent-cyan, #22d3ee); font-size: 0.62rem; white-space: nowrap; }
.tariff-table .tt-dim { color: var(--text-main); white-space: nowrap; }
.tariff-table .tt-qual { color: var(--text-muted); font-size: 0.6rem; }
.tariff-table .tt-actions { text-align: right; white-space: nowrap; }

/* Kategori grup başlığı — tam genişlik satır */
.tariff-table .tt-cat-row td {
    background: rgba(255, 255, 255, 0.045);
    font-weight: 700;
    font-size: 0.68rem;
    padding: 7px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tariff-table .tt-cat-row td:hover { background: rgba(255, 255, 255, 0.07); }

/* Düzenleme satırı (colspan form) */
.tariff-table .tt-edit-row td { background: rgba(59, 130, 246, 0.06); padding: 10px; }

@media (max-width: 500px) {
    /* Mobil: satırlar karta döner (ana app'in .damage-table-container deseni).
       Yatay kaydırma yerine kart — 8 sütun telefonda okunmaz. */
    .tariff-table-container { overflow-x: visible; }
    /* table/tbody block olmalı, AYRICA min-width sıfırlanmalı: style.css'te global
       `table { min-width: 700px }` kuralı var (~2228) — kart düzeninde onu miras
       alınca 390px ekranda tablo 700px kalıp sayfayı yatay taşırıyordu. */
    .tariff-table, .tariff-table tbody { display: block; width: 100%; }
    .tariff-table { min-width: 0; }
    .tariff-table thead { display: none; }
    .tariff-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 8px;
    }
    .tariff-table tbody tr.tt-cat-row {
        display: block;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 8px;
        padding: 0;
    }
    .tariff-table td {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 2px 0;
        border-bottom: none;
        text-align: left;
        min-width: 0;          /* grid çocuğunun min-content taşmasını kes */
        overflow-wrap: anywhere;
    }
    /* Masaüstünde nowrap doğru (sütun hizası), mobil kartta genişliği zorluyor → sarsın */
    .tariff-table .tt-num, .tariff-table .tt-code, .tariff-table .tt-dim { white-space: normal; }
    /* Rozetler (konum/niteleyici) flex-column içinde tam genişliğe yayılmasın */
    .tariff-table td.tt-comp > span { align-self: flex-start; }
    .tariff-table td::before {
        content: attr(data-label);
        font-size: 0.55rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        font-weight: 700;
    }
    .tariff-table .tt-num { text-align: left; }
    /* Parça adı ve düzenleme satırı tam genişlik */
    .tariff-table td.tt-comp, .tariff-table .tt-edit-row td { grid-column: span 2; }
    .tariff-table td.tt-actions {
        grid-column: span 2;
        flex-direction: row;
        justify-content: flex-end;
        gap: 8px;
        border-top: 1px dashed rgba(255, 255, 255, 0.08);
        margin-top: 4px;
        padding-top: 6px;
    }
    .tariff-table td.tt-actions::before { content: none; }
}

/* v23.3.2: shift+Tab ile GERİ gelinen autocomplete alanı — liste otomatik
   açılmaz (bkz. app._acHazirIsaretle). Kullanıcı alanın "canlı" olduğunu ve
   Enter'ın listeyi açacağını görsün diye kesikli halka. Yalnız görsel. */
input.ac-armed {
    outline: 2px dashed var(--accent-blue, #60a5fa);
    outline-offset: 1px;
    border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v23.6.2 — KONTROL HİZALAMA (tek kaynak)

   Tolga: "bu simetri sorunu mercont.com'un her yerinde var."

   KÖK NEDEN: hiçbir yerde kontrol YÜKSEKLİĞİ tanımlı değildi. `<input type=date>`,
   `<select>` ve düz `<input>` aynı padding + font-size ile bile tarayıcıda FARKLI
   doğal yükseklik alır (date/time native görünümü height'i tümden yok sayar).
   Yan yana konunca taban çizgileri 10–13px kayıyordu. Ölçüm (23.6.1, masaüstü):
   ana ekran 2/2 satır sapmalı, ayarlar 3/3, muhasebe raporlama 6/7.

   Bu blok, `#accounting-view .accounting-grid` için zaten yazılmış olan nokta
   çözümün genelleştirilmiş hâlidir — orası `!important` kullandığı için kendi
   kurallarını korur, buradan etkilenmez.

   ⚠️ Değişkenler ZATEN vardı (--btn-h, --tap-target-min), sadece kullanılmıyordu.
   ⚠️ `.mc-bar` YENİ bir sınıf: mevcut hiçbir ekranı etkilemez, ekranlar ona
      kademeli geçirilir. Global kısım yalnız date/time normalizasyonudur.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --ctl-h: var(--btn-h, 38px);      /* kontroller butonlarla aynı yükseklikte */
}
/* Dokunmatik cihazda 44px — Apple HIG minimum dokunma hedefi.
   `pointer: coarse` viewport genişliğine değil GİRDİ TÜRÜNE bakar; masaüstü
   tarayıcıyı daraltmak bunu tetiklemez, gerçek telefon/tablet tetikler. */
@media (pointer: coarse) {
    :root { --ctl-h: var(--tap-target-min, 44px); }
}

/* Tarih/saat girdilerinin native görünümü height ve padding'i yok sayar.
   Kapatılınca kutu modeli normal input gibi davranır ve hizaya girer. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    -webkit-appearance: none;
    appearance: none;
}
/* iOS Safari'nin iç değer elemanları — dikey ortalamayı bunlar bozuyor */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
    padding: 0;
}

/* ── Hizalı filtre/araç çubuğu ────────────────────────────────────────────
   Kullanım:
     <div class="mc-bar">
       <div class="mc-field" style="flex:1 1 200px;"><label>Ara</label><input …></div>
       <div class="mc-field"><label>Başlangıç</label><input type="date" …></div>
       <button class="btn glass">Temizle</button>
     </div>
   Alanların tümü aynı yükseklikte ve tek taban çizgisinde durur; dar ekranda
   alt alta sarar (flex-wrap), her satır kendi içinde yine hizalıdır. */
.mc-bar {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.mc-bar .mc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;            /* uzun placeholder çubuğu taşırmasın */
}
.mc-bar .mc-field > label {
    font-size: 0.62rem;
    color: var(--text-muted);
    white-space: nowrap;
    line-height: 1;
}
.mc-bar input,
.mc-bar select,
.mc-bar button,
.mc-bar .btn {
    height: var(--ctl-h);
    box-sizing: border-box;
    padding: 0 10px;
    margin: 0;
    font-size: 0.78rem;
    border-radius: var(--radius-input, 10px);
    line-height: 1.2;
}
/* İkon önekli arama kutusu (mc-field içinde sarmalayıcı ile) */
.mc-bar .mc-ico-wrap { position: relative; display: block; }
.mc-bar .mc-ico-wrap > i {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); font-size: 0.85rem; pointer-events: none;
}
.mc-bar .mc-ico-wrap > input { padding-left: 28px; }

/* Alan genişlikleri SINIFLA verilir — inline `flex:` medya kuralını ezer ve
   dar ekranda kutu yarım kalır (mobil testinde "Birim" 124px'te takılı kaldı). */
.mc-bar .mc-field--grow { flex: 1 1 220px; }
.mc-bar .mc-field--date { flex: 0 0 132px; }
.mc-bar .mc-field--sel  { flex: 0 0 124px; }

/* Dar ekran: arama ve seçim tam genişlik, iki tarih yan yana (ikisi de sığar) */
@media (max-width: 600px) {
    .mc-bar { gap: 8px; }
    .mc-bar .mc-field--grow,
    .mc-bar .mc-field--sel { flex: 1 1 100%; }
    .mc-bar .mc-field--date { flex: 1 1 calc(50% - 4px); }
    .mc-bar button,
    .mc-bar .btn { flex: 1 1 100%; }
}

/* Tam ekran araç başlığı — dar ekranda kapatma düğmesi alta düşmesin */
.mc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.mc-head .mc-head-title { flex: 1 1 auto; min-width: 0; }
.mc-head .mc-head-title > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-head .mc-head-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
@media (max-width: 600px) {
    /* Başlık altındaki açıklama satırı dar ekranda yer kaplamasın */
    .mc-head .mc-head-title > .mc-head-sub { display: none; }
    .mc-head .mc-head-actions .btn { padding: 0 10px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   v23.6.2 — KIRILIM NOKTASI STANDARDI (yeni kod için tek kaynak)

   Mevcut durum ölçüldü: 42 @media bloğu, 240+ kural, 12 farklı eşik
   (420·430·480·500·600·640·720·768·860·900·1024·1400).

   ⚠️ BUNLARI ÜÇE İNDİRMEDİK — bilinçli karar. Her eşik belirli bir cihazın
   belirli bir sorununu çözüyor (430 iPhone SE, 860 bir tablo, 500 sidebar…).
   240 kuralı taşımak "mobil ve tablet asla bozulmamalı" şartıyla çelişir:
   kazanç yalnız kod düzeni, risk ise gerçek görsel regresyon. Mevcut bloklara
   dokunulmadı; YENİ kod aşağıdaki üç eşiği kullanır, böylece dağılma büyümez.

     Mobil   : max-width 600px      (telefon dikey)
     Tablet  : max-width 1024px     (tablet + telefon yatay)
     Masaüstü: üstü

   Dokunma hedefi genişliğe DEĞİL girdi türüne bakar: `pointer: coarse`.
   Daraltılmış masaüstü tarayıcı bunu tetiklemez, gerçek cihaz tetikler —
   `--ctl-h` bu yüzden orada 44px'e çıkar.
   ─────────────────────────────────────────────────────────────────────────── */

/* Gelişmiş filtre paneli — v23.6.3: tarih kutuları global kuraldan 41px,
   seçiciler inline padding:8px yüzünden 32px geliyordu (9px sapma, ölçümle
   yakalandı). Inline stiller kaldırılıp ölçü tek yerden verildi. */
#filter-panel input,
#filter-panel select {
    height: var(--ctl-h);
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 0.82rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}
#filter-panel .btn,
#filter-panel button {
    height: var(--ctl-h);
    box-sizing: border-box;
}
#filter-panel .form-group > label {
    font-size: 0.72rem;
    display: block;
    margin-bottom: 4px;
}

/* v23.6.3 — Rapor kalemindeki "Stoktan Düş" hücresi.
   Ölçüldü: stok seçici 20px, adet kutusu 18px, DÜŞ ve barkod düğmeleri 32px
   (.btn'in sabit yüksekliği) — tek satırda üç farklı boy, 14px sapma.
   Dört kontrol de ortak yoğun bir yüksekliği paylaşır; hücre dar olduğu için
   --ctl-h değil kendi kompakt ölçüsü kullanılır. */
.stock-cell-row select,
.stock-cell-row input,
.stock-cell-row .btn,
.stock-cell-row button {
    height: 24px;
    box-sizing: border-box;
    padding: 0 6px;
    line-height: 1.1;
}

/* ── v23.6.8: Toplu PTI içe aktarma — konteyner çipi (Kısa/Uzun/hariç) ──────
   Çipin içinde İKİ tıklama alanı var: ad+etiket (süreyi çevirir) ve × (hariç
   tutar). Ölçtüğümde masaüstünde 104×17 / 15×12 çıkıyordu — parmakla × ye
   basmak imkânsızdı. Dokunma hedefi GİRDİ TÜRÜNE bakar (`pointer: coarse`),
   ekran genişliğine değil: daraltılmış masaüstü tarayıcı bu bloğu tetiklemez,
   gerçek telefon tetikler. */
#pti-import-overlay .pti-dur-chip > button {
    min-height: 24px;
    box-sizing: border-box;
}

#pti-import-overlay .pti-dur-chip > button:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
}

@media (pointer: coarse) {
    #pti-import-overlay .pti-dur-chip {
        min-height: 42px;
        padding: 4px 4px 4px 10px;
        font-size: 0.75rem;
    }

    #pti-import-overlay .pti-dur-chip > button {
        min-height: 38px;
    }

    #pti-import-overlay .pti-dur-chip > button:last-child {
        min-width: 34px;
        font-size: 1rem;
        opacity: 0.7;
    }
}

/* ── v23.7.1: Pano alt bölümü — 2×2 kare ızgara ────────────────────────────
   Tolga: "günün cirosu, müşteri kârlılık analizi, malzeme ihtiyacı ve carrier
   güncelleme 4'lü kare olsa daha güzel görünmez mi? … daha küçük de olabilir
   sığarsa, sayfa da aşağı az iner."
   Eskiden dördü alt alta tam genişlik bloklardı; sayfa gereksiz uzuyordu.
   Kırılım noktaları style.css'in kendi standardına uyar (600 / 1024). */
.dashboard-quad {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Tolga: "simetrik ve düzgün, aynı ölçülerde olacak hepsi."
       `1fr` satır yüksekliği → İKİ SATIR da birbirine eşit; `stretch` (varsayılan)
       ile aynı satırdaki iki kare zaten eşitlenir. Sonuç: dördü de birebir aynı kutu. */
    grid-auto-rows: 1fr;
    gap: 12px;
    margin-top: 20px;
}

/* Yetkiye/birime göre boş kalan bölüm ızgarada DELİK bırakmasın.
   (Carrier yalnız reefer+admin'de, Malzeme İhtiyacı yalnız stok tutan birimde dolar.) */
.dashboard-quad > div:empty {
    display: none;
}

/* Kare içeriği: dıştaki kart kendi hücresini doldursun, iç boşluklar bir tık
   daralsın — dört bölüm aynı ekrana sığsın diye. */
.dashboard-quad > div {
    min-width: 0;   /* grid item'ın içeriğe göre şişip ızgarayı bozmasını engeller */
}

/* Kart dış kutusu hücreyi doldursun (`height:100%`) — eskiden doldurmuyordu ve
   ALTTA 42/116/78 px boşluk kalıyordu (Tolga: "işaretlediğim yerlerde boşluk
   istemiyorum"). Seçici `.glass` DEĞİL `*` — Malzeme İhtiyacı kartının `.glass`
   sınıfı yok, eski kural onu hiç kapsamıyordu.

   ⚠️ v24.0.4: `justify-content` ESKİDEN `space-between`'di ve bu YENİ BİR SORUN
   üretti: kalan boşluk kartın altında değil SATIR ARALARINA dağılıyordu. Yan
   karedeki Carrier kartı uzun olduğu için Malzeme İhtiyacı'nın 5 satırı ~140 px
   aralıklarla savruluyordu (Tolga: "burası da çok aralıklı"). Doğru davranış:
   içerik ÜSTTE toplanır, artan boşluk kartın altında kalır — kutu zaten dolu
   göründüğü için o boşluk göze batmaz, savrulan satırlar batıyordu. */
.dashboard-quad > div > * {
    margin-top: 0 !important;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Günlük özet karesi: 4 mini kart 2x2 olarak kareyi doldursun (eskiden üstte
   toplanıp altta ~196px boşluk bırakıyorlardı). */
#dashboard-widgets {
    height: 100%;
    align-content: stretch;
    grid-auto-rows: 1fr;
}

#dashboard-widgets > * {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tablet: kare düzen korunur (Tolga: "belki tablette olabilir güzel"),
   yalnız boşluklar biraz daralır. */
@media (max-width: 1024px) {
    .dashboard-quad {
        gap: 10px;
    }
}

/* Telefon: kare ŞART DEĞİL → tek sütun, eski dizilimin aynısı.
   (600px eşiği projenin mevcut mobil standardı.) */
@media (max-width: 600px) {
    .dashboard-quad {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;   /* tek sütunda eşit yükseklik gereksiz — boş alan üretir */
        gap: 10px;
        margin-top: 14px;
    }

    /* Telefonda kutular alt alta ve içerik kadar → yayma da eşitleme de gereksiz
       (ikisi de boş alan üretirdi). */
    .dashboard-quad > div > * {
        height: auto;
        display: block;
    }

    #dashboard-widgets {
        height: auto;
        grid-auto-rows: auto;
    }

    #dashboard-widgets > * {
        height: auto;
        display: block;
    }
}

/* ── v23.7.1: Zoom'lu view'lar sayfada ORTALI ──────────────────────────────
   Tolga: "sayfada ortalı olacak, sayfa bozulmayacak."
   Sorun: içerik view'leri `zoom: 0.9` ile küçülüyor ama `max-width` zoom'dan
   ÖNCEKİ CSS pikselinde (1280px) sınırlı kaldığı için görünen genişlik 1152px'e
   düşüyor ve artan yer HEP SAĞDA birikiyordu (sol 20px / sağ 108px = 88px kayık).
   Çözüm iki parça: (a) `margin-inline: auto` kalan boşluğu iki yana eşit dağıtır,
   (b) `--mc-zoom` ile max-width zoom'a göre telafi edilir → içerik alanı tam
   kullanılır, sayfa daha az aşağı iner. Zoom oranını setZoom yazar (kullanıcı
   %60-130 arasında değiştirebiliyor, sabit varsayım YANLIŞ olurdu).
   ⚠️ `#main-app-container`'ı flex yapıp ortalamak DENENDI ve ELENDI: sidebar
   (fixed, ekran dışında -280px) 280px yerine 1088px'e geriyordu. */
#main-view,
#folder-view,
#accounting-view,
#customer-reports-view,
#unit-selection-view {
    margin-inline: auto;
    max-width: calc(1280px / var(--mc-zoom, 1));
}


/* ── Analiz dönem butonları (GÜN / HAFTA / BU AY / 3 AY / YIL) ──────────────
   v24.0.4: `.btn:hover` tüm butonları `translateY(-2px)` ile yukarı kaldırıyor.
   Beş buton yan yana dizili olduğu için imleç gezdikçe SIRAYLA zıplıyorlar ve
   dizilim bozulmuş gibi görünüyordu (Tolga: "saçma şekilde sıralanıyor").
   Bu grupta zıplama ve gölge kapalı — seçim dolgu rengiyle zaten belli. */
.analytics-btn-scroll .btn:hover {
    transform: none !important;   /* ziplamayi kes, geri bildirimi kenarlikla ver */
    box-shadow: none;
    border-color: var(--accent-blue);
}

/* AKTİF DÖNEM — v24.0.4 (review düzeltmesi).
   İlk hâli inline `background: var(--accent-blue); color:#fff` idi ve İKİ yerde
   kırılıyordu:
     (a) `saha-light` / `saha-dark` / `mono-*` temaları `.btn`i `border` ve
         `font-weight` dahil `!important` ile eziyor → vurgu hiç görünmüyordu;
     (b) `liman-dark`ta `--accent-blue` SARI (#F4D03F) → üzerindeki beyaz yazı
         okunmuyordu.
   Bu yüzden METİN VE ZEMİN RENGİNE DOKUNULMUYOR: vurgu kalın accent çerçeve +
   alt çizgi ile veriliyor. Tema ne olursa olsun kontrast bozulmaz. */
.analytics-btn-scroll .btn.is-active {
    border: 2px solid var(--accent-blue) !important;
    font-weight: 800 !important;
    box-shadow: inset 0 -3px 0 var(--accent-blue) !important;
    opacity: 1 !important;
}
.analytics-btn-scroll .btn.is-active:hover {
    filter: brightness(1.08);
}

/* v24.3.1: SURVEY ANA BUTONLARI (Kaydet / Raporu İndir / PDF / Word / seçili dil).
   Eskiden biri --accent-blue, biri --accent-purple kullanıyordu: çoğu temada iki
   farklı ton (uyumsuz) ve açık vurgulu temalarda (ör. sarı #F4D03F) beyaz yazı
   OKUNMUYORDU. Tek renk + vurgunun %45 koyulaştırılmışı → her temada aynı buton,
   beyaz yazı AA kontrastında (sarıda ~4.7:1). color-mix yerine üst üste gradyan:
   eski Safari'de de çalışır. */
.srv-btn-ana {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--accent-blue) !important;
    color: #fff !important;
    border: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.srv-btn-ana:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), var(--accent-blue) !important;
}
/* Seçilmemiş seçenek (dil düğmesi): çerçeveli, dolgusuz */
.srv-btn-secenek {
    background: transparent !important;
    color: var(--text-main) !important;
    border: 2px solid rgba(255, 255, 255, 0.14) !important;
}

/* v24.3.2: survey onay kutusu satırları (Standards Applied, sektör rehberi, EOR…)
   dar ekranda kutu üstte, yazı altta kalıyordu: ≤430 px'te `[style*="display:flex"]
   [style*="gap"] { flex-wrap: wrap }` genel kuralı uzun metni alt satıra atıyor.
   Metin öğesi daralabilsin (flex-basis 0 + min-width 0) → kutunun yanında sarar. */
#survey-modal label[style*="display:flex"] > input[type="checkbox"] {
    flex: none;
}
#survey-modal label[style*="display:flex"] > :not(input) {
    flex: 1 1 0;
    min-width: 0;
}

/* v24.3.2: SURVEY FORMU — TEK KONTROL YÜKSEKLİĞİ (Tolga: "1'den sonuna kadar hiçbirinde
   hücrelerin yüksekliği aynı değil"). Metin, seçim, tarih, saat ve sayı kutuları
   tarayıcıda FARKLI doğal yükseklik alıyordu (select ~27 px, input ~34 px) ve
   yapısal durum tablosunda inline padding'ler de farklıydı. Filtre çubuklarındaki
   (.mc-bar) çözümün aynısı: sabit --ctl-h (masaüstü 38 px, dokunmatik 44 px) +
   box-sizing + dikey padding sıfır. Yatay padding ve yazı boyu inline'dan gelmeye
   devam eder. textarea bilerek hariç (çok satırlı). */
#survey-modal input.srv-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#survey-modal select.srv-input,
#survey-modal .srv-ctl-btn {
    height: var(--ctl-h) !important;
    min-height: var(--ctl-h);
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
    line-height: 1.2;
}
#survey-modal textarea.srv-input {
    box-sizing: border-box;
}

/* @WP-03b */
/* iOS'ta ana ekrana eklenmiş uygulama (PWA): durum çubuğu `black-translucent` +
   `viewport-fit=cover` olduğu için içerik saatin/çentiğin ALTINA uzanır. Genel overlay
   kuralı (dosya başı, "Global overlay constraint") artık satır içi üst boşluğa izin
   veriyor; `padding:0` taşıyan tam ekran panellerin (Stok, Tarife, Toplu Faturalama,
   Toplu Rapor Çek…) başlığı ve Kapat düğmesi durum çubuğunun altında kalmasın diye
   YALNIZ burada çentik boşluğu eskisi gibi zorlanır. `-webkit-touch-callout` yalnız
   iOS WebKit'te var → masaüstü/Android etkilenmez. (iOS teyidi telefonda yapılır.) */
@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
        div[id$="-overlay"],
        div[id$="-modal"],
        div[id$="-modal-overlay"],
        .modal-overlay {
            padding-top: env(safe-area-inset-top, 0px) !important;
        }
    }
}

/* @WP-10 */
/* Toplu Faturalama zemini HER temada sabit koyudur (rgba(0,0,0,.92)). Açık temaların genel girdi kuralı
   (Klasik Aydınlık: neredeyse saydam zemin + koyu yazı) bu ekranda koyu zemine koyu yazı üretiyordu
   (ölçülen kontrast 1,2). Bu ekranda girdiler her açık temada açık zemin + koyu yazı. */
body.light-mode #bulk-invoice-overlay :is(input, select, textarea) {
    background: #f9fafb !important;
    color: #111827 !important;
}

/* @WP-11 */
/* Toplu Faturalama alt bloğu (fatura no / tarih / tutar / ekler) telefonda katlanır: seçim yaparken tablo
   görünür kalsın. Başlık yalnız ≤600 px'te görünür; gövde kapalıyken gizli (`.bi-alt-acik` = açık).
   Gövdenin satır içi display:flex'i var → gizleme !important ister. */
#bulk-inv-footer .bi-alt-baslik {
    display: none;
}
/* FATURA-1: katlanma YATAY telefonda da (≤500 px yükseklik + dokunmatik) — orada alt blok ~220 px'ti ve
   yapışık alt çubuk olarak 286 px'lik listenin çoğunu kapatıyordu. */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    #bulk-inv-footer .bi-alt-baslik {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 0;
        background: none;
        border: none;
        color: var(--bi-text, #e5e7eb);
        font-size: 0.78rem;
        cursor: pointer;
        text-align: left;
    }
    #bulk-inv-footer .bi-alt-baslik b {
        color: #fbbf24;
    }
    #bulk-inv-footer.bi-alt-acik .bi-alt-baslik {
        margin-bottom: 8px;
    }
    #bulk-inv-footer .bi-alt-ok {
        transition: transform 0.15s;
    }
    #bulk-inv-footer.bi-alt-acik .bi-alt-ok {
        transform: rotate(180deg);
    }
    #bulk-inv-footer:not(.bi-alt-acik) .bi-alt-govde {
        display: none !important;
    }
}
@media (max-width: 600px) {
    /* Genel ≤600 px kuralı kontrolsüz etiketleri gizliyor ("placeholder'a güven") — bu ekranda tarih/seçim
       alanlarının placeholder'ı yok (BAŞLANGIÇ/BİTİŞ, FATURA TARİHİ, PARA BİRİMİ), etiketler görünür kalır. */
    #bulk-invoice-overlay label:not(:has(input, select, button, textarea)) {
        display: block !important;
    }
    /* Geçmiş Faturalar tablosu telefonda ekrandan geniş (kap içinde yatay kayar): Düzenle / Sil sütunu
       sağda yapışık kalır (alt alta, dar); açılan düzenleme formu ekrana sığar ve solda yapışık durur.
       Zemin sabit koyu — overlay her temada koyu (@WP-10). */
    #inv-history-table td.bi-gecmis-islem {
        position: sticky;
        right: 0;
        z-index: 1;
        background: #0b0d12;
        box-shadow: -8px 0 8px -6px rgba(0, 0, 0, 0.9);
    }
    #inv-history-table td.bi-gecmis-islem button {
        display: block;
        margin: 2px 0 2px auto;
    }
    #inv-history-table td.bi-gecmis-form > div {
        position: sticky;
        left: 0;
        box-sizing: border-box;
        max-width: calc(100vw - 52px);
    }
}

/* @FATURA-1 */
/* Toplu Faturalama telefonda: süzgeç + istatistik blokları (kaydırılmayan, flex-shrink:0) büyüyünce liste alanı
   390×844'te 0 px'e iniyordu — Bekleyen tablosu ve iş listesi hiç görünmüyordu. Telefonda (dar ekran ya da yatay
   telefon) süzgeç, istatistik ve liste TEK kapta (#bulk-inv-create) birlikte kayar; alt çubuk kabın altında
   yapışık kalır (iç-scroll kap + sticky — pencere kaydırması DEĞİL, CLAUDE.md §7). Satır içi stilleri ezmek için
   !important. Zemin sabit koyu (@WP-10) → alt çubuk opak. */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    #bulk-inv-create {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #bulk-inv-create > #bulk-inv-liste {
        flex: none !important;
        overflow: visible !important;
    }
    /* Tablo 390 px'e sığmıyor (~550 px): kap yalnız DİKEY kayar (satır içi overflow:hidden x'i keser) →
       Tarih / Tutar sütunları erişilmez kalıyordu. Yatay kaydırma yalnız tablonun kendi kutusunda. */
    #bulk-inv-create #bulk-inv-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #bulk-inv-create > #bulk-inv-footer {
        position: sticky;
        bottom: 0;
        z-index: 6;
        background: #0b0d12 !important;
    }
}

/* @WP-13b — 24.9.6 (S3): kart gövdesindeki "Başka birime taşı" grubu (.wp13b-tasi) kalktı; taşıma ⋯ › Birime taşı… */

/* Tekil durum değişikliğinden sonra 10 sn'lik "Geri Al" şeridi — document.body'nin doğrudan çocuğu
   (CLAUDE.md §7). Bildirim balonunun (bottom 30px) ÜSTÜNDE durur ki ikisi birlikte okunsun. Zemin
   temadan gelir (--bg-card koyu/açık temada tanımlı); vurgu yalnız ikon/kenarda.
   z-index `.modal`ın (1000) ALTINDA: İncele / Düzenle penceresi açılınca şerit onun form alanlarını ve
   alt düğmelerini örtmesin (pencere kapanınca süre dolmadıysa yeniden görünür). */
.wp13b-geri-al {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: max-content;
    max-width: min(92vw, 480px);
    padding: 8px 8px 8px 14px;
    border-radius: 12px;
    background: var(--bg-card, #1a1a1e);
    color: var(--text-main, #fff);
    border: 1px solid rgba(251, 146, 60, 0.55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    font-size: 0.8rem;
    overflow: hidden;
}
.wp13b-geri-al::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: rgba(251, 146, 60, 0.7);
    transform-origin: left center;
    animation: wp13bGeriAlSure 10s linear forwards;
}
@keyframes wp13bGeriAlSure {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
.wp13b-geri-al-ikon {
    color: var(--accent-orange);
    flex: 0 0 auto;
}
.wp13b-geri-al-metin {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wp13b-geri-al .wp13b-geri-al-dugme {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-orange);
    border: 1px solid rgba(251, 146, 60, 0.45);
    white-space: nowrap;
}
.wp13b-geri-al-kapat {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
}

/* @WP-22 */
/* 'Beni Hatırla' yalnız MASAÜSTÜ tarayıcı sekmesinde anlamlı (Tolga kararı C): telefonda (ince imleç
   yok) ve ana ekrana eklenmiş uygulamada oturum HEP kalıcıdır, kutu hiçbir şey değiştirmezdi → gizli.
   Koşul app.js `_masaustuTarayiciMi` ile BİREBİR aynı: standalone/fullscreen/minimal-ui DEĞİL ve
   pointer:fine. (iOS'taki navigator.standalone'ı CSS göremez; iOS dokunmatik olduğu için zaten gizli.) */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui), not all and (pointer: fine) {
    .remember-me-container {
        display: none !important;
    }
}

/* @WP-23 */
/* PTI Döküm penceresindeki "Yalnız faturalanmamışlar" etiketi bir ONAY KUTUSU taşır — telefonun genel
   etiket kuralları (≤768 px blok + BÜYÜK HARF + turuncu, ≤600 px gizleme) onu bozmasın. */
#pti-dokum-overlay label {
    display: flex !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    color: var(--text-main) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-bottom: 0 !important;
}
/* Ay seçimi: telefondaki genel `select` dolgusu (12px !important) metni sabit yükseklikte kırpıyordu */
#pti-dokum-overlay select {
    height: var(--ctl-h, 38px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* @WP-26 */
/* Ana ekran bildirim bandı (app.js `_bldBantGoster` — Bildirim F1; eskiden `_showPushHealthBanner`), document.body'nin doğrudan çocuğu.
   Eskiden satır içi z-index:11000 ile HER modalın üstündeydi; telefonda estimate formunun
   "Raporu Kaydet"ini, İncele'nin "Düzenle / Kapat"ını örtüyordu. Artık `.modal`ın (1000) ve tam ekran
   katmanların (10000+) ALTINDA; bir modal açıkken tamamen gizlenir (pencere kapanınca geri gelir). */
#push-health-banner {
    z-index: 998;
}
body:has(.modal[style*="display: flex"], .modal[style*="display:flex"],
         .modal[style*="display: block"], .modal[style*="display:block"]) #push-health-banner {
    display: none !important;
}

/* @WP-27 — Telefon arayüzü + ısı haritası doğruluğu.
   CLAUDE.md §7 okundu: zoom yalnız .main'e (burada dokunulmuyor); iOS'ta fixed+backdrop-filter
   sabit kalmaz (FAB'da backdrop-filter yok); zoom'lu parent içinde position:fixed viewport'a
   hapsolur (FAB #main-app-container'ın DOĞRUDAN çocuğu, zoom'lu view'lerin dışında — index.html);
   butona var(--accent-*) zemin + beyaz yazı verilmez (FAB'da sabit gradyan kullanıldı, tema
   değişkeni değil); hizalama sorunu YÜKSEKLİK eksikliğidir — dokunma hedefleri height ile büyütüldü. */

/* 1) PTI modal ızgaraları: boşluksuz "grid-template-columns:1fr 1fr" genel kural tarafından
   yakalanmıyor (kural boşluklu varyantı arıyor — kasıtlı, bkz. style.css üstündeki not).
   Hedefli sınıf: yalnız işaretlenen ızgaralar telefonda tek sütuna iner. Bu sayede PTI
   konteyner no kutusu tam genişlik alır ("TCNU6834602" son hanesi artık kesilmiyor). */
@media (max-width: 600px) {
    .mc-stack {
        grid-template-columns: 1fr !important;
    }
}

/* 2) Klasör kartlarında rozet/çip metinleri: ≤768 px'teki 0.52rem ve ≤420 px'teki 0.46rem
   değerleri (tip rozeti, "FOTOĞRAF YOK"/"MALİYET YOK" çipleri) varsayılan %90 zoom'la 6,6-7,5 px'e
   iniyordu. Bu iki kural zaten `!important` — buradaki (dosyada SONRA gelen) `!important` kural
   eşit özgüllükte olduğu için kazanır. initZoom'daki varsayılan-zoom düzeltmesiyle (dokunmatikte
   kayıt yoksa 100) birlikte gerçek boyut ~10 px'e çıkar.
   Yalnız ≤768 px: masaüstünde tip rozeti ("40HC") h4'ün 1.1rem'ini alır, bu kural onu küçültürdü. */
@media (max-width: 768px) {
    .card-top-left h4 > span {
        font-size: 0.62rem !important;
    }
    .card-customer-info > span[style*="border-radius:4px"] {
        font-size: 0.62rem !important;
    }
}

/* 3) Rapor listesi seçim kutusu: genel "Checkbox Fix" kuralı (`input[type="checkbox"]{width:auto!important}`)
   satır içi `width:20px;height:20px`'i eziyor, tarayıcı varsayılanına (~12-13 px) düşürüyordu.
   Daha özgül + `!important` bir kural şart (aksi hâlde genel kural kazanmaya devam eder). */
input.report-checkbox[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
}

/* 4) Dokunmatik cihazda kart düğmeleri (İncele/Fotoğraf Ekle/⋮) ≥40×44 olsun — masaüstünde
   fare için küçük kalabilir (Dokunma hedefi GİRDİ TÜRÜNE bakar, genişliğe değil — CLAUDE.md §7). */
@media (pointer: coarse) {
    .card-primary-actions .btn {
        min-height: 40px;
        height: 40px !important;
        min-width: 44px;
    }
}

/* 5) Üst çubuk: 360-390 px'te kur ("$1=48.86₺") ve tarih logoyla çakışıyordu (14-29 px örtüşme).
   ≤430 px'te kur/tarih gizlenir — bilgi kaybı görsel/ikincildir, profil zaten tek dokunuşla açılıyor.
   Boşalan yerde kullanıcı adına ≤768 px'teki 80 px sınırı yerine 130 px'e kadar izin verilir
   (daha uzunu yine oradaki ellipsis kuralıyla kısalır). */
@media (max-width: 430px) {
    #live-currency,
    #live-date {
        display: none !important;
    }
    #active-user-name {
        max-width: 130px;
    }
}

/* 6) "İncele" (openFeaturedPreview) hasar tablosu: sabit min-width (650→768'de 700 !important)
   kutusundan (286 px) taşıp yatay kaydırmayı belli etmeden fiyat sütununu ekran dışında
   bırakıyordu. HTML zaten her <td>'de `data-label` taşıyor (CLAUDE.md'de aranan "yalnız CSS"
   çözümü) — telefonda tabloyu kart/liste görünümüne çeviriyoruz, sunucu/JS tarafına dokunulmadı. */
@media (max-width: 600px) {
    .preview-damage-table-wrapper {
        overflow-x: visible;
    }
    .preview-damage-table {
        min-width: 0 !important;
        width: 100%;
    }
    .preview-damage-table thead {
        display: none;
    }
    .preview-damage-table,
    .preview-damage-table tbody,
    .preview-damage-table tr {
        display: block;
        width: 100%;
    }
    .preview-damage-table tr {
        padding: 8px 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .preview-damage-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 4px 8px;
        border-bottom: none;
        font-size: 0.8rem;
        text-align: right;
    }
    .preview-damage-table td::before {
        content: attr(data-label);
        font-size: 0.62rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        text-align: left;
        flex-shrink: 0;
    }
}

/* 7) Genel "table{min-width:600px}" tabanı daraltıldı — pek çok basit (2-3 sütunlu) tablo
   gereksiz yere yatay kaydırma zorluyordu. Sütunu çok tabloları etkilemez (kendi min-width'i
   varsa o kazanır — ör. yukarıdaki .preview-damage-table artık 0). */
@media (max-width: 768px) {
    table {
        min-width: 480px;
    }
}

/* 8) Estimate formu ve İncele alt çubukları: genel `.modal-footer{flex-direction:column}`
   kuralı (≤768 px) telefonda 4 düğmeyi alt alta diziyordu (İncele'de artık 3, "Kapat" kaldırıldı
   — index.html). Yalnız bu İKİ modalda tek satıra zorlanır; diğer modallerin sütun dizilimine
   dokunulmadı (bazı formlarda gerçekten gerekli olabilir). Excel düğmesinin metni de kısaltıldı
   (i18n.js `btn_download_excel`) — reviewer'ın doğruladığı asıl düzeltme; nowrap ikinci güvence. */
@media (max-width: 768px) {
    #report-modal .modal-footer,
    #preview-modal .modal-footer {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    /* İncele: genel ≤640/≤768 px `.modal-footer .btn|button { flex:1; min-width:120px }` üç düğmeyi
       ~380 px'e zorluyordu → 360-390 px'te "Düzenle" ekran dışına kesiliyordu. Eşit paylaşım,
       min-width sıfır; metin sığmazsa ellipsis (düğmenin kendisi hep ekranda kalır). Yan dolgu
       `!important`: düğmeler `.glass` da taşıyor ve ≤600 px `.glass{padding:12px !important}` ezer. */
    #preview-modal .modal-footer {
        padding-left: 10px;
        padding-right: 10px;
        gap: 6px !important;
    }
    #preview-modal .modal-footer .btn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 6px !important;
        padding-right: 6px !important;
        gap: 4px !important;
        font-size: 0.72rem;
        justify-content: center;
        overflow: hidden;
    }
    #preview-modal .modal-footer .btn > span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@media (max-width: 420px) {
    /* En dar ekranda ikon yer kaplamasın — etiket ("Excel TR" / "Düzenle") işi zaten anlatıyor. */
    #preview-modal .modal-footer .btn > i {
        display: none;
    }
}
#report-modal .modal-footer .btn,
#preview-modal .modal-footer .btn {
    white-space: nowrap;
}

/* 9) "Estimate Ekle" ana ekranın en dibindeydi — telefonda sabit hızlı-erişim FAB (index.html'de
   #main-app-container'ın DOĞRUDAN çocuğu). Sabit gradyan (rapor formundaki "Kaydet" düğmesiyle
   aynı, tema accent'ine bağlı DEĞİL) — CLAUDE.md §7 "açık renkli accent + beyaz yazı" tuzağı. */
.mc-fab {
    display: none;
}
@media (max-width: 768px) {
    .mc-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, #8b5cf6, #a78bfa);
        color: #fff;
        border: none;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        font-size: 1.4rem;
        z-index: 490;
        cursor: pointer;
        padding: 0;
    }
}
/* 24.4.3: bekleyen kayıt / fotoğraf rozetleri (app.js inline stil, sağ alt köşe) FAB'ın üstüne
   biniyor ve dokunuşu çalıyordu → telefonda rozetler FAB'ın SOLUNA alınır (FAB 16+52 px). */
@media (max-width: 768px) {
    #offline-queue-badge,
    #offline-badge {
        right: 80px !important;
    }
}
/* 24.9.7 (cila P1): FAB görünürken (≤768 px — telefon + dokunmatik tablet) "+" listenin SON kartının son kalemini (çöp düğmesi) örtüyordu.
   Klasör / arama listesinin (kayan kutu #folder-view) altına FAB yığını kadar dolgu: FAB 16 + 52 px; uzun listede üstündeki ▲ (80 + 46 px,
   .mc-kaydir) da dipte görünür → 140 px + çentik. #folder-view yakınlaştırılan görünümdür (setZoom) — kendi dolgusu da ölçeklenir, bu yüzden
   piksel `--mc-zoom` ile bölünür (her yakınlaştırmada ekranda aynı boşluk). */
@media (max-width: 768px) {
    #main-app-container.folder-mode > #folder-view {
        padding-bottom: calc((env(safe-area-inset-bottom, 0px) + 140px) / var(--mc-zoom, 1));
    }
}

/* 24.4.3: Görüntüleyen rapor/fotoğraf yazamaz (RTDB kuralı) → yazma girişleri gizlenir.
   Sınıfı refreshUIVisibility koyar (_goruntuleyenSinifi); işlevler ayrıca kendi içinde reddeder. */
body.mc-goruntuleyen [data-yazma] {
    display: none !important;
}

/* ── STOK-1: rapor kartında hatırlayan stok önerisi ─────────────────────────
   Önerilen kalem ön seçili gelir; seçici DÜŞ düğmesinin rengiyle çerçevelenir, altında
   "★ son kullanılan" notu durur. Kullanıcı başka kalem seçince ikisi de kalkar. */
/* 24.5.0: seçici `glass` sınıfı taşıyor — telefonda (≤600px) `.glass { padding: 12px !important }` 24px'lik
   kutuya 12px iç boşluk verip yazıyı tamamen gizliyordu (önerilen "★ Power Cable" seçili ama kutu boş görünüyordu). */
.stock-cell-row select.glass,
.stock-cell-row input.glass {
    padding: 0 6px !important;
}
.stock-cell-row select.stok-oneri {
    border-color: rgba(200, 230, 0, 0.75);
    box-shadow: 0 0 0 1px rgba(200, 230, 0, 0.35);
}
.stok-oneri-not {
    font-size: 0.6rem;
    color: #a3b800;
    margin-top: 2px;
    white-space: nowrap;
}
/* STOK-1 (inceleme): düşümü süren kalem — seçici/adet/DÜŞ yerine */
.stok-bekliyor-not {
    font-size: 0.62rem;
    font-weight: 600;
    color: #f59e0b;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ── STOK-1: Toplu Stok Düş penceresi ──────────────────────────────────────
   Overlay document.body'nin doğrudan çocuğu (zoom'lu kapsayıcıya hapsolmasın).
   <label> KULLANILMAZ: telefonda genel `label{display:none}` kuralı etiketleri gizler. */
#tsd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 16000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#tsd-overlay .tsd-panel {
    width: 100%;
    max-width: 980px;
    max-height: 90vh;
    overflow: auto;
    padding: 20px;
    border-radius: 16px;
    background: var(--bg-card, #1e293b);
    box-sizing: border-box;
}
#tsd-overlay .tsd-aciklama {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}
#tsd-overlay .tsd-grup {
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
#tsd-overlay .tsd-grup.tsd-kapali {
    opacity: 0.7;
}
#tsd-overlay .tsd-grup.tsd-grup-yok {
    border-color: #f87171;
    box-shadow: inset 3px 0 0 #f87171;
}
#tsd-overlay .tsd-bas {
    display: flex;
    align-items: center;
    gap: 10px;
}
#tsd-overlay .tsd-baslik {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
}
#tsd-overlay .tsd-kontrol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-left: 26px;
    font-size: 0.76rem;
}
#tsd-overlay select,
#tsd-overlay input[type="number"] {
    width: auto;
    height: var(--ctl-h, 38px);
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 0.8rem;
    border-radius: 8px;
}
#tsd-overlay .tsd-kontrol select,
#tsd-overlay .tsd-satirlar select {
    max-width: 320px;
    min-width: 180px;
}
#tsd-overlay input[type="number"] {
    width: 80px;
}
#tsd-overlay .tsd-ac {
    flex: 0 0 auto;
}
#tsd-overlay .tsd-etiket,
#tsd-overlay .tsd-soluk {
    color: var(--text-muted);
}
#tsd-overlay .tsd-soluk {
    font-size: 0.7rem;
}
#tsd-overlay .tsd-yildiz {
    color: #a3b800;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 4px;
}
#tsd-overlay .tsd-rozet {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.2));
    margin-left: 4px;
}
#tsd-overlay .tsd-durum {
    flex: 1 1 200px;
    font-weight: 600;
}
#tsd-overlay .tsd-ok { color: var(--accent-green); }
#tsd-overlay .tsd-yok { color: #f87171; }
#tsd-overlay .tsd-uyari { color: #fbbf24; }
#tsd-overlay .tsd-satirlar {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.76rem;
}
#tsd-overlay .tsd-satirlar td {
    padding: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}
#tsd-overlay .tsd-satirlar tr.tsd-haric td {
    opacity: 0.5;
}
#tsd-overlay .tsd-satirlar tr.tsd-hata td {
    background: rgba(248, 113, 113, 0.06);
}
#tsd-overlay .tsd-konteyner {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}
#tsd-overlay .tsd-yapilmadi {
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid #f87171;
    color: #f87171;
    font-weight: 700;
    min-width: 160px;
}
#tsd-overlay .tsd-yapilmadi > div {
    font-weight: 400;
}
#tsd-overlay .tsd-serit {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid;
}
#tsd-overlay .tsd-serit-ok { color: var(--accent-green); border-color: var(--accent-green); background: rgba(52, 211, 153, 0.12); }
#tsd-overlay .tsd-serit-bekliyor { color: #fbbf24; border-color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
#tsd-overlay .tsd-serit-hata { color: #f87171; border-color: #f87171; background: rgba(248, 113, 113, 0.14); }
/* Sonuç şeridi + düğmeler uzun listede de görünür kalsın (panelin altına yapışık) */
#tsd-overlay .tsd-dip {
    position: sticky;
    bottom: 0;
    margin: 0 -20px -20px;
    padding: 2px 20px 16px;
    background: var(--bg-card, #1e293b);
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    z-index: 1;
}
#tsd-overlay .tsd-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;
}
#tsd-overlay #tsd-ozet {
    margin-right: auto;
    font-weight: 700;
    font-size: 0.8rem;
}
@media (max-width: 600px) {
    #tsd-overlay { padding: 8px; }
    #tsd-overlay .tsd-panel { padding: 14px; max-height: 94vh; }
    #tsd-overlay .tsd-dip { margin: 0 -14px -14px; padding: 2px 14px 12px; }
    #tsd-overlay .tsd-kontrol { padding-left: 0; }
    #tsd-overlay .tsd-kontrol select,
    #tsd-overlay .tsd-satirlar select { min-width: 0; max-width: 100%; width: 100%; }
    /* Telefonda tablo satırı kart gibi alt alta dizilir (tablo düzeni genişliği taşırıyordu) */
    #tsd-overlay .tsd-satirlar,
    #tsd-overlay .tsd-satirlar tbody { display: block; width: 100%; min-width: 0; }   /* genel table{min-width:480px} kuralını ez */
    #tsd-overlay .tsd-satirlar tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
    #tsd-overlay .tsd-satirlar td { display: block; border-top: none; padding: 3px 2px; min-width: 0; box-sizing: border-box; }
    #tsd-overlay .tsd-satirlar td:nth-child(2) { flex: 1 1 auto; }
    #tsd-overlay .tsd-satirlar td:nth-child(3) { flex: 1 1 calc(100% - 96px); order: 3; }
    #tsd-overlay .tsd-satirlar td:nth-child(4) { flex: 0 0 auto; order: 4; }
    #tsd-overlay .tsd-satirlar td:nth-child(4) input { width: 72px; }
    #tsd-overlay .tsd-satirlar td:nth-child(5) { flex: 1 1 100%; order: 5; }
    #tsd-overlay .tsd-satirlar td:nth-child(5):empty { display: none; }
}

/* ── STOK-2: Stok sayfası (tek giriş · Liste · Sayım · Rapor) ─────────────────────────────
   Pencere document.body'nin DOĞRUDAN çocuğu (zoom'lu kapsayıcıya hapsolmasın). Zemin ve yazı
   temadan gelir (eski pencere her temada rgba(0,0,0,.92) + backdrop-filter idi: açık temalarda koyu
   zemine koyu yazı düşüyordu; fixed + backdrop-filter iOS'ta da sorunlu). iOS için iç kaydırma:
   height:100svh + flex kolon + .stk-govde overflow-y:auto (CLAUDE.md §7).
   Etiketler <label> DEĞİL div (.stk-lbl) — telefondaki genel `label{display:none}` kuralı; alış
   formundaki eski <label>'lar için genel kurala #inventory-overlay istisnası eklendi.
   Durum renkleri anlamsaldır (tema vurgusu değil): Bitti kırmızı · Azaldı sarı · Yeterli yeşil;
   açık temalarda koyu tonları kullanılır (kontrast). */
#inventory-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--primary-bg, #121214);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    height: 100svh;
    overflow: hidden;
    outline: none;
    --stk-kirmizi: #f87171;
    --stk-sari: #fbbf24;
    --stk-yesil: #4ade80;
    --stk-kutu: rgba(255, 255, 255, 0.035);
}
body.light-mode #inventory-overlay,
body.light-mode .stk-kart {
    --stk-kirmizi: #b91c1c;
    --stk-sari: #a16207;
    --stk-yesil: #15803d;
    --stk-kutu: rgba(0, 0, 0, 0.035);
}
/* Üst çubuk + sekmeler içerikle aynı 880 px sütuna hizalı (geniş ekranda sola yapışmasın) */
#inventory-overlay .stk-ust {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 14px max(16px, calc((100% - 880px) / 2)) 10px;
}
#inventory-overlay .stk-baslik {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}
#inventory-overlay .stk-sekmeler {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    padding: 0 max(16px, calc((100% - 880px) / 2)) 10px;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}
#inventory-overlay .stk-sekme {
    flex: 1 1 0;
    max-width: 180px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
#inventory-overlay .stk-sekme.aktif {
    color: var(--text-main);
    border-color: var(--accent-blue);
    box-shadow: inset 0 -3px 0 var(--accent-blue);
}
#inventory-overlay .stk-govde {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 28px;
}
#inventory-overlay .stk-ic {
    max-width: 880px;
    margin: 0 auto;
}
#inventory-overlay .stk-soluk { color: var(--text-muted); }
#inventory-overlay .stk-kirmizi, .stk-kart .stk-kirmizi { color: var(--stk-kirmizi); }
#inventory-overlay .stk-sari, .stk-kart .stk-sari { color: var(--stk-sari); }
#inventory-overlay .stk-yesil, .stk-kart .stk-yesil { color: var(--stk-yesil); }
#inventory-overlay .stk-not { font-size: 0.72rem; margin: 4px 0 8px; }
#inventory-overlay .stk-aciklama {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}
#inventory-overlay .stk-bos {
    padding: 24px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}
/* Arama + iş düğmeleri */
#inventory-overlay .stk-ara {
    position: relative;
}
#inventory-overlay .stk-ara i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
#inventory-overlay .stk-ara input {
    width: 100%;
    height: var(--ctl-h, 40px);
    box-sizing: border-box;
    padding: 0 12px 0 36px;
    font-size: 0.88rem;
    border-radius: 10px;
}
#inventory-overlay .stk-isler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 14px;
}
#inventory-overlay .stk-is {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
    background: transparent;
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#inventory-overlay .stk-is.aktif {
    border-color: var(--accent-blue);
    box-shadow: inset 0 0 0 1px var(--accent-blue);
}
#inventory-overlay .stk-is-sayi { color: var(--text-muted); font-weight: 700; }
#inventory-overlay .stk-is-uyari {
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--stk-kirmizi);
    border: 1px solid var(--stk-kirmizi);
    text-align: center;
}
/* Bölümler */
#inventory-overlay .stk-bolum-baslik {
    font-weight: 800;
    font-size: 0.86rem;
    margin: 14px 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
#inventory-overlay .stk-bolum-bas {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
#inventory-overlay .stk-bolum-bas .stk-bolum-baslik { margin: 0 0 2px; }
#inventory-overlay .stk-bolum-alt { font-size: 0.74rem; }
#inventory-overlay .stk-siparis {
    border: 1px solid var(--stk-kirmizi);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--stk-kutu);
}
#inventory-overlay .stk-tamam {
    border: 1px solid var(--stk-yesil);
    color: var(--stk-yesil);
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 8px;
}
#inventory-overlay .stk-liste-baslik { margin-top: 18px; }
/* Liste satırı: ad · marka · P/N | Elde | durum — düğme yok, satır dokunulur */
#inventory-overlay .stk-satir,
#inventory-overlay .stk-sayim-satir,
.stk-sip-satir {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--stk-kutu);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    margin-bottom: 6px;
}
#inventory-overlay .stk-satir { cursor: pointer; }
#inventory-overlay .stk-satir:hover,
#inventory-overlay .stk-satir:focus-visible {
    border-color: var(--accent-blue);
    outline: none;
}
#inventory-overlay .stk-satir-bitti { box-shadow: inset 3px 0 0 var(--stk-kirmizi); }
#inventory-overlay .stk-satir-azaldi { box-shadow: inset 3px 0 0 var(--stk-sari); }
#inventory-overlay .stk-satir-sol,
.stk-sip-satir .stk-satir-sol {
    flex: 1 1 auto;
    min-width: 0;
}
#inventory-overlay .stk-satir-ad,
.stk-sip-satir .stk-satir-ad {
    font-weight: 700;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}
#inventory-overlay .stk-satir-alt,
.stk-sip-satir .stk-satir-alt {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
    overflow-wrap: anywhere;
}
#inventory-overlay .stk-satir-sag {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
#inventory-overlay .stk-elde {
    font-weight: 800;
    font-size: 0.95rem;
    white-space: nowrap;
}
#inventory-overlay .stk-elde small { font-weight: 600; color: var(--text-muted); font-size: 0.72rem; }
.stk-durum {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
    line-height: 1.4;
}
.stk-durum-bitti { color: var(--stk-kirmizi, #f87171); }
.stk-durum-azaldi { color: var(--stk-sari, #fbbf24); }
.stk-durum-yeterli { color: var(--stk-yesil, #4ade80); }
/* Alt düğmeler: Yeni kalem · Diğer */
#inventory-overlay .stk-alt-dugmeler,
#inventory-overlay .stk-diger {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
#inventory-overlay .stk-diger { margin-top: 8px; }
#inventory-overlay .stk-ekle {
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px dashed var(--glass-border, rgba(255, 255, 255, 0.2));
}
#inventory-overlay .stk-ekle-satir {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    align-items: center;
}
#inventory-overlay .stk-ekle-satir input,
#inventory-overlay .stk-ekle-satir select {
    height: var(--ctl-h, 38px);
    box-sizing: border-box;
}
#inventory-overlay .stk-ekle-kaydet { width: 100%; margin-top: 4px; }
#inventory-overlay .stk-lbl {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 2px 0 4px;
}
/* Kalem ekranı */
#inventory-overlay .stk-geri {
    background: none;
    border: none;
    color: var(--accent-blue);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#inventory-overlay .stk-kalem-ust { margin: 6px 0 10px; }
#inventory-overlay .stk-kalem-ad { font-size: 1.15rem; font-weight: 800; overflow-wrap: anywhere; }
#inventory-overlay .stk-kalem-alt { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
#inventory-overlay .stk-elde-satir {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
#inventory-overlay .stk-elde-etiket { font-size: 0.85rem; color: var(--text-muted); font-weight: 700; }
#inventory-overlay .stk-elde-buyuk { font-size: 1.8rem; font-weight: 800; line-height: 1; }
#inventory-overlay .stk-elde-olcu { font-size: 0.95rem; font-weight: 700; color: var(--text-muted); }
#inventory-overlay .stk-elde-satir .stk-durum { font-size: 0.78rem; align-self: center; }
#inventory-overlay .stk-esik {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--stk-kutu);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    margin-bottom: 10px;
}
#inventory-overlay .stk-esik-ad { font-weight: 700; font-size: 0.85rem; }
#inventory-overlay .stk-esik input {
    width: 96px;
    height: var(--ctl-h, 38px);
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 0.9rem;
    border-radius: 8px;
}
#inventory-overlay .stk-esik-olcu { font-weight: 700; color: var(--text-muted); }
#inventory-overlay .stk-esik-not { flex: 1 1 100%; font-size: 0.72rem; }
#inventory-overlay .stk-ana-dugmeler {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
/* Büyük eylem düğmeleri: tema vurgusu zemin YOK (açık vurgulu temalarda beyaz yazı okunmuyordu) */
#inventory-overlay .stk-ana-dugme {
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--accent-blue);
    background: var(--stk-kutu);
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
#inventory-overlay .stk-ana-dugme i { color: var(--accent-blue); }
#inventory-overlay .stk-genis-dugme { width: 100%; margin-top: 12px; }
#inventory-overlay .stk-tablo-kap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 8px;
}
#inventory-overlay .stk-alis-tablo {
    width: 100%;
    min-width: 360px;
    border-collapse: collapse;
}
#inventory-overlay .stk-alis-tablo th {
    padding: 4px 6px;
    font-size: 0.66rem;
    color: var(--text-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}
#inventory-overlay .stk-ayrinti {
    margin-top: 12px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 0 12px;
}
#inventory-overlay .stk-ayrinti > summary {
    cursor: pointer;
    font-weight: 800;
    font-size: 0.86rem;
    padding: 12px 0;
}
#inventory-overlay .stk-ayrinti[open] { padding-bottom: 12px; }
#inventory-overlay .stk-alanlar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}
#inventory-overlay .stk-alan { position: relative; min-width: 0; }
#inventory-overlay .stk-alanlar input,
#inventory-overlay .stk-alanlar select,
#inventory-overlay .stk-barkod input {
    width: 100%;
    height: var(--ctl-h, 38px);
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 0.85rem;
    border-radius: 8px;
}
#inventory-overlay .stk-barkod {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
#inventory-overlay .stk-barkod input { flex: 1 1 160px; width: auto; }
#inventory-overlay .stk-qr {
    text-align: center;
    margin: 8px 0;
    padding: 8px;
    background: #fff;
    border-radius: 8px;
}
#inventory-overlay .stk-sil {
    margin-top: 14px;
    color: var(--stk-kirmizi);
}
#inventory-overlay .stk-kayit {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--stk-yesil);
}
#inventory-overlay .stk-alan .stk-kayit { margin: 2px 0 0; display: block; }
#inventory-overlay .stk-kayit[data-durum="pending"] { color: var(--stk-sari); }
#inventory-overlay .stk-kayit[data-durum="error"] { color: var(--stk-kirmizi); }
#inventory-overlay .stk-kapat-alt {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
#inventory-overlay .stk-kapat-alt .btn { min-width: 160px; justify-content: center; }
/* Kit */
#inventory-overlay .stk-kit-tarif { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
#inventory-overlay .stk-kit-maliyet { font-size: 0.76rem; margin-top: 2px; }
#inventory-overlay .stk-parca {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--stk-kutu);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    margin-bottom: 8px;
}
#inventory-overlay .stk-parca-eksik { color: var(--stk-kirmizi); font-size: 0.8rem; }
#inventory-overlay .stk-parca-bas { font-size: 0.86rem; margin-bottom: 6px; overflow-wrap: anywhere; }
#inventory-overlay .stk-parca-satir {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 0.8rem;
    margin-bottom: 8px;
}
#inventory-overlay .stk-parca-kit { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
#inventory-overlay .stk-parca-kit input {
    width: 72px;
    height: 32px;
    box-sizing: border-box;
    padding: 0 6px;
    font-size: 0.8rem;
    border-radius: 6px;
}
/* Sayım sekmesi */
#inventory-overlay .stk-sayim-satir .stk-elde { flex: 0 0 auto; }
/* Rapor sekmesi */
#inventory-overlay .stk-rapor-kart {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--stk-kutu);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    margin-bottom: 12px;
}
#inventory-overlay .stk-rapor-kart .stk-bolum-baslik { margin-top: 0; }
#inventory-overlay .stk-rapor-tablo {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 0.82rem;
}
#inventory-overlay .stk-rapor-tablo th,
#inventory-overlay .stk-rapor-tablo td {
    padding: 6px 4px;
    text-align: right;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
}
#inventory-overlay .stk-rapor-tablo th:first-child,
#inventory-overlay .stk-rapor-tablo td:first-child { text-align: left; }
#inventory-overlay .stk-rapor-tablo th { color: var(--text-muted); font-size: 0.7rem; }
#inventory-overlay .stk-rapor-toplam td { font-weight: 800; }
#inventory-overlay .stk-rapor-buyuk { font-size: 1.5rem; font-weight: 800; margin: 2px 0 6px; }
#inventory-overlay .stk-rapor-satir {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.82rem;
    padding: 3px 0;
}
/* Sipariş listesi penceresi */
#stk-siparis-overlay {
    position: fixed;
    inset: 0;
    z-index: 10030;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    --stk-kirmizi: #f87171;
    --stk-sari: #fbbf24;
    --stk-yesil: #4ade80;
    --stk-kutu: rgba(255, 255, 255, 0.035);
}
body.light-mode #stk-siparis-overlay {
    --stk-kirmizi: #b91c1c;
    --stk-sari: #a16207;
    --stk-yesil: #15803d;
    --stk-kutu: rgba(0, 0, 0, 0.035);
}
#stk-siparis-overlay .stk-sip-panel {
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 16px;
    border-radius: 14px;
    background: var(--bg-card, #1a1a1e);
    color: var(--text-main);
    box-sizing: border-box;
}
#stk-siparis-overlay .stk-bolum-baslik { font-weight: 800; font-size: 0.95rem; margin-bottom: 6px; }
#stk-siparis-overlay .stk-soluk,
#stk-siparis-overlay .stk-aciklama,
#stk-siparis-overlay .stk-lbl { color: var(--text-muted); }
#stk-siparis-overlay .stk-aciklama { font-size: 0.76rem; margin-bottom: 10px; }
#stk-siparis-overlay .stk-lbl { font-size: 0.7rem; font-weight: 600; margin: 10px 0 4px; }
#stk-siparis-overlay .stk-sip-miktar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.82rem;
}
#stk-siparis-overlay .stk-sip-miktar span { min-width: 38px; }
#stk-siparis-overlay .stk-sip-miktar input {
    width: 84px;
    height: var(--ctl-h, 38px);
    box-sizing: border-box;
    padding: 0 8px;
    font-size: 0.9rem;
    border-radius: 8px;
}
#stk-siparis-overlay textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    padding: 10px;
    border-radius: 10px;
}
/* Düğmeler uzun listede de görünür kalsın (panelin altına yapışık — iç kaydırma kapsayıcısında) */
#stk-siparis-overlay .stk-sip-dugmeler {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 12px -16px -16px;
    padding: 10px 16px 16px;
    background: var(--bg-card, #1a1a1e);
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}
#stk-siparis-overlay .stk-durum { margin-left: 4px; font-size: 0.62rem; vertical-align: middle; }
/* Ana ekran — her birimde AYNI tek "Stok" kartı */
.stk-kart {
    --stk-kirmizi: #f87171;
    --stk-sari: #fbbf24;
    --stk-yesil: #4ade80;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    padding: 12px;
    margin-top: 10px;
    cursor: pointer;
    color: var(--text-main);
}
.stk-kart:hover,
.stk-kart:focus-visible { border-color: var(--accent-blue); outline: none; }
.stk-kart .stk-soluk { color: var(--text-muted); }
.stk-kart-bas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.stk-kart-baslik { font-size: 0.85rem; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.stk-kart-ac { font-size: 0.72rem; font-weight: 700; color: var(--accent-blue); white-space: nowrap; }
.stk-kart-ozet { font-size: 0.78rem; font-weight: 700; margin-bottom: 6px; }
.stk-kart-satir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    padding: 4px 0;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
}
.stk-kart-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-kart-ad small { color: var(--text-muted); }
.stk-kart-sag { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.stk-kart-sag small { color: var(--text-muted); }
.stk-kart-dahasi { font-size: 0.68rem; padding-top: 4px; }
@media (max-width: 600px) {
    #inventory-overlay .stk-ust { padding: 12px 12px 8px; }
    #inventory-overlay .stk-sekmeler { padding: 0 12px 8px; }
    #inventory-overlay .stk-sekme { max-width: none; font-size: 0.8rem; }
    #inventory-overlay .stk-govde { padding: 12px 12px 28px; }
    #inventory-overlay .stk-bolum-bas .stk-kopyala { width: 100%; justify-content: center; }
    #inventory-overlay .stk-sayim-satir { flex-wrap: wrap; }
    #inventory-overlay .stk-sayim-satir .stk-satir-sol { flex: 1 1 60%; }
    #stk-siparis-overlay { padding: 8px; }
    #stk-siparis-overlay .stk-sip-panel { max-height: 94vh; padding: 14px; }
    #stk-siparis-overlay .stk-sip-dugmeler { margin: 12px -14px -14px; padding: 10px 14px 14px; }
}

/* ── STOK-3 (Aşama 2): kalem ekranı hareketleri, hazır fiyatlı Alış, nedenli Say, Sayım sekmesi, yeni kalem ──
   Etiketler <label> DEĞİL div (.stk-lbl) — telefondaki genel `label{display:none}` kuralı yeni formlara değmez.
   Satır içi display:flex+gap YOK (≤430 px genel `[style*="display:flex"][style*="gap"]` kuralı).
   Düğmelere tema vurgusu ZEMİN + beyaz yazı verilmez (açık vurgulu temalarda okunmuyordu) — çerçeve + ikon rengi.
   Say penceresi (.stk-pencere) body'nin DOĞRUDAN çocuğu; fixed katmanda backdrop-filter yok (iOS). */
#inventory-overlay [hidden],
.stk-pencere [hidden] { display: none !important; }
#inventory-overlay .stk-mono,
.stk-pencere .stk-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.2px; }
#inventory-overlay .stk-link,
.stk-pencere .stk-link {
    background: none;
    border: none;
    padding: 2px 4px;
    color: var(--accent-blue);
    font-weight: 700;
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
#inventory-overlay .stk-don { display: inline-block; animation: spin 1s linear infinite; }
#inventory-overlay .btn.stk-kaydet-dugme,
.stk-pencere .btn.stk-kaydet-dugme {
    height: 40px;
    padding: 0 16px;
    font-size: 0.78rem;
    font-weight: 800;
    border: 1px solid var(--accent-green, #4ade80);
    color: var(--text-main);
}
#inventory-overlay .btn.stk-kaydet-dugme i,
.stk-pencere .btn.stk-kaydet-dugme i { color: var(--accent-green, #4ade80); }
#inventory-overlay .btn.stk-kaydet-dugme:disabled,
.stk-pencere .btn.stk-kaydet-dugme:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
#inventory-overlay .stk-buyuk-girdi,
.stk-pencere .stk-buyuk-girdi {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 12px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 10px;
}
.stk-pencere .stk-girdi {
    width: 100%;
    height: var(--ctl-h, 40px);
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 0.85rem;
    border-radius: 8px;
}
#inventory-overlay .stk-bolum-ek { font-weight: 500; font-size: 0.7rem; }
#inventory-overlay .stk-kalem-ix { margin-top: 4px; }

/* Son 6 ay kullanım — gerçek rakam, küçük çubuk */
#inventory-overlay .stk-aylar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 4px;
}
#inventory-overlay .stk-ay { text-align: center; min-width: 0; }
#inventory-overlay .stk-ay-cubuk {
    height: 54px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 8px;
    background: var(--stk-kutu);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    overflow: hidden;
}
#inventory-overlay .stk-ay-cubuk span {
    display: block;
    width: 55%;
    background: var(--accent-blue);
    border-radius: 4px 4px 0 0;
    opacity: 0.85;
}
#inventory-overlay .stk-ay-sayi { font-weight: 800; font-size: 0.82rem; margin-top: 4px; overflow-wrap: anywhere; }
#inventory-overlay .stk-ay-ad { font-size: 0.68rem; color: var(--text-muted); }

/* Hareketler — tek liste (alış + / kullanım − / sayım ±) */
#inventory-overlay .stk-hrk-liste { display: flex; flex-direction: column; gap: 4px; }
#inventory-overlay .stk-hrk {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--stk-kutu);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-main);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
}
#inventory-overlay .stk-hrk-link { grid-template-columns: 84px minmax(0, 1fr) auto 14px; cursor: pointer; }
#inventory-overlay .stk-hrk-link:hover,
#inventory-overlay .stk-hrk-link:focus-visible { border-color: var(--accent-blue); outline: none; }
#inventory-overlay .stk-hrk-tarih { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; }
#inventory-overlay .stk-hrk-ne { min-width: 0; overflow-wrap: anywhere; }
#inventory-overlay .stk-hrk-miktar { font-weight: 800; white-space: nowrap; text-align: right; }
#inventory-overlay .stk-hrk-miktar small { font-weight: 600; color: var(--text-muted); }
#inventory-overlay .stk-hrk-ok { color: var(--text-muted); }
#inventory-overlay .stk-hrk-alis { box-shadow: inset 3px 0 0 var(--stk-yesil); }
#inventory-overlay .stk-hrk-sayim { box-shadow: inset 3px 0 0 var(--stk-sari); }
/* Kayda geçmemiş fark — suçlamasız bilgi kutusu */
#inventory-overlay .stk-fark {
    border: 1px dashed var(--stk-sari);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 0 10px;
    font-size: 0.78rem;
    display: grid;
    gap: 4px;
}
#inventory-overlay .stk-fark-baslik { font-weight: 700; }
#inventory-overlay .stk-fark-tamam { border-color: var(--stk-yesil); color: var(--stk-yesil); font-weight: 700; display: block; }

/* Hazır fiyatlı Alış */
#inventory-overlay .stk-alis {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--accent-blue);
    background: var(--stk-kutu);
    margin-bottom: 10px;
}
#inventory-overlay .stk-alis-baslik { font-weight: 800; font-size: 0.86rem; margin-bottom: 8px; overflow-wrap: anywhere; }
#inventory-overlay .stk-alis-ozet-satir {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 4px;
    font-size: 0.8rem;
}
#inventory-overlay .stk-alis-ozet { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
#inventory-overlay .stk-alis-detay { margin-top: 8px; }
#inventory-overlay .stk-kur-kap { position: relative; }
#inventory-overlay .stk-kur-yukleniyor {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -8px;
    border: 2px solid var(--text-muted);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
#inventory-overlay .stk-kur-yenile { cursor: pointer; margin-left: 4px; }
#inventory-overlay .stk-alis-onizleme { font-size: 0.78rem; min-height: 1.2em; margin: 6px 0 8px; }
#inventory-overlay .stk-alis-dugmeler {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
#inventory-overlay .stk-alis-dugmeler .btn { height: 40px; }
/* Alış tablosu (Ayrıntılar + kit parçaları) */
#inventory-overlay .stk-alis-tablo { min-width: 560px; }
#inventory-overlay .stk-alis-tablo td {
    padding: 6px;
    font-size: 0.74rem;
    text-align: center;
    vertical-align: top;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
    white-space: nowrap;
}
#inventory-overlay .stk-alis-tablo .stk-sol { text-align: left; white-space: normal; min-width: 110px; }
#inventory-overlay .stk-alis-tablo .stk-sag { text-align: right; }
#inventory-overlay .stk-alis-tablo small { color: var(--text-muted); }
#inventory-overlay .stk-alis-tablo .stk-soluk { font-size: 0.66rem; }
#inventory-overlay .stk-alis-sayim td { background: var(--stk-kutu); }
#inventory-overlay .stk-alis-islem .btn { height: 28px; padding: 0 8px; font-size: 0.8rem; }
/* Kit parçası: kısa düğmeler + katlanır alış tablosu */
#inventory-overlay .stk-parca-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
#inventory-overlay .stk-parca .stk-ana-dugme { height: 38px; padding: 0 14px; font-size: 0.85rem; }
#inventory-overlay .btn.stk-alis-parca-dugme { height: 38px; font-size: 0.72rem; }
#inventory-overlay .stk-parca-alislar > summary { cursor: pointer; font-size: 0.78rem; font-weight: 700; margin: 6px 0; }

/* Sayım sekmesi — toplu sayım */
#inventory-overlay .stk-sayim-liste { display: flex; flex-direction: column; }
#inventory-overlay .stk-sayim-satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 10px;
}
#inventory-overlay .stk-sayim-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#inventory-overlay .stk-sayim-elde { font-size: 0.8rem; white-space: nowrap; }
#inventory-overlay .stk-sayim-elde b { font-size: 0.95rem; }
#inventory-overlay .stk-sayim-elde small { color: var(--text-muted); }
#inventory-overlay .stk-sayim-giris { display: flex; align-items: center; gap: 6px; }
#inventory-overlay .stk-sayim-giris input {
    width: 96px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 8px;
}
#inventory-overlay .btn.stk-ayni { height: 38px; white-space: nowrap; border: 1px solid var(--stk-yesil); color: var(--text-main); }
#inventory-overlay .btn.stk-ayni:disabled { opacity: 0.5; cursor: default; transform: none; }
#inventory-overlay .stk-sayim-fark {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 0.76rem;
}
#inventory-overlay .stk-sayim-fark:empty { display: none; }
#inventory-overlay .stk-sayim-fark .stk-kayit { margin: 0; }
#inventory-overlay .stk-sayim-neden {
    height: 32px;
    box-sizing: border-box;
    padding: 0 8px;
    font-size: 0.76rem;
    border-radius: 8px;
    max-width: 100%;
}
#inventory-overlay .stk-sayim-ok { border-color: var(--stk-yesil); }
#inventory-overlay .stk-sayim-bekliyor,
#inventory-overlay .stk-sayim-yaziliyor { border-color: var(--stk-sari); }
#inventory-overlay .stk-sayim-hata { border-color: var(--stk-kirmizi); }
/* Kaydet çubuğu uzun listede görünür kalsın — iç kaydırma kapsayıcısında (.stk-govde) yapışık, zemin opak */
#inventory-overlay .stk-sayim-alt {
    position: sticky;
    bottom: -28px;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px -16px -28px;
    padding: 10px 16px 14px;
    background: var(--primary-bg, #121214);
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    font-size: 0.78rem;
}

/* Yeni kalem (6 alan) + "İlk alışı şimdi gir?" */
#inventory-overlay #new-inventory-unit { margin-top: 6px; }
#inventory-overlay .stk-ekle .stk-alanlar { margin-bottom: 6px; }
#inventory-overlay .stk-ekle-sonuc { font-size: 0.86rem; }
#inventory-overlay .stk-ekle-soru-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Say penceresi */
.stk-pencere {
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    --stk-kirmizi: #f87171;
    --stk-sari: #fbbf24;
    --stk-yesil: #4ade80;
    --stk-kutu: rgba(255, 255, 255, 0.035);
}
body.light-mode .stk-pencere {
    --stk-kirmizi: #b91c1c;
    --stk-sari: #a16207;
    --stk-yesil: #15803d;
    --stk-kutu: rgba(0, 0, 0, 0.035);
}
.stk-pencere .stk-pencere-panel {
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 14px;
    background: var(--bg-card, #1a1a1e);
    color: var(--text-main);
    border: 1px solid var(--accent-blue);
}
.stk-pencere .stk-pencere-baslik { font-weight: 800; font-size: 0.98rem; margin-bottom: 4px; overflow-wrap: anywhere; }
.stk-pencere .stk-soluk,
.stk-pencere .stk-lbl { color: var(--text-muted); }
.stk-pencere .stk-yazi { color: var(--text-main); }
.stk-pencere .stk-not { font-size: 0.74rem; margin: 2px 0 10px; }
.stk-pencere .stk-lbl { font-size: 0.72rem; font-weight: 600; margin: 8px 0 4px; }
.stk-pencere .stk-say-fark { font-weight: 800; font-size: 0.9rem; min-height: 1.3em; margin: 8px 0 2px; }
.stk-pencere .stk-say-fark[data-tur="eksik"] { color: var(--stk-sari); }
.stk-pencere .stk-say-fark[data-tur="fazla"] { color: var(--stk-yesil); }
.stk-pencere .stk-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.stk-pencere .stk-cip {
    min-height: 34px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
    background: transparent;
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.stk-pencere .stk-cip[aria-pressed="true"] { border-color: var(--accent-blue); box-shadow: inset 0 0 0 1px var(--accent-blue); }
.stk-pencere .stk-pencere-dugmeler { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.stk-pencere .stk-pencere-dugmeler .btn { height: 40px; }

@media (max-width: 600px) {
    #inventory-overlay .stk-hrk { grid-template-columns: minmax(0, 1fr) auto; }
    #inventory-overlay .stk-hrk-link { grid-template-columns: minmax(0, 1fr) auto 14px; }
    #inventory-overlay .stk-hrk-tarih { grid-column: 1 / -1; }
    #inventory-overlay .stk-sayim-satir { grid-template-columns: minmax(0, 1fr); }
    #inventory-overlay .stk-sayim-sag { flex-direction: row; justify-content: space-between; align-items: center; }
    #inventory-overlay .stk-sayim-alt { margin: 12px -12px -28px; padding: 10px 12px 14px; }
    #inventory-overlay .stk-alis-ozet-satir { flex-wrap: wrap; }
    .stk-pencere { padding: 8px; align-items: flex-end; }
    .stk-pencere .stk-pencere-panel { max-width: none; max-height: 94vh; border-radius: 14px 14px 10px 10px; }
}
/* Alış düzenle penceresi (#edit-purchase-overlay.stk-pencere) — kararı 2: Kalan kilitli, kullanılmış alışta Alınan da */
.stk-pencere .stk-alanlar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px 10px;
}
.stk-pencere .stk-alan { min-width: 0; }
.stk-pencere .stk-alan .stk-lbl { margin-top: 0; }
.stk-pencere .stk-girdi:disabled { opacity: 0.6; cursor: not-allowed; }
.stk-pencere .stk-kur-kap { position: relative; }
.stk-pencere .stk-kur-yukleniyor {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -8px;
    border: 2px solid var(--text-muted);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.stk-pencere .stk-kur-yenile { cursor: pointer; margin-left: 4px; }
#inventory-overlay .stk-kilit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    vertical-align: middle;
    cursor: help;
}

/* ═══ STOK-4 (Aşama 3) — Rapor sekmesi · 0 TL uyarısı ═══════════════════════════════════════════
   Ne kullandık tablosu: masaüstünde ad + 6 ay + toplam tek satır; telefonda ad üstte, sayılar altta
   (7 sütun). Satırlar düğme (dokununca kalem açılır). Etiket (<label>) kullanılmaz — telefondaki
   genel `label{display:none}` kuralına takılmaz. Renkler tema değişkenlerinden. */
#inventory-overlay .stk-rapor-giris {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    margin-bottom: 10px;
}
#inventory-overlay .stk-rapor-durum { white-space: nowrap; }
#inventory-overlay .stk-rk {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}
#inventory-overlay .stk-rk-bas,
#inventory-overlay .stk-rk-satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(6, 54px) 64px;
    align-items: center;
    gap: 2px 4px;
    width: 100%;
    box-sizing: border-box;
}
#inventory-overlay .stk-rk-bas {
    padding: 0 10px 2px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
}
#inventory-overlay .stk-rk-satir {
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--stk-kutu);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-main);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
}
#inventory-overlay button.stk-rk-satir { cursor: pointer; }
#inventory-overlay button.stk-rk-satir:hover,
#inventory-overlay button.stk-rk-satir:focus-visible { border-color: var(--accent-blue); outline: none; }
#inventory-overlay .stk-rk-yetim { opacity: 0.8; }
#inventory-overlay .stk-rk-ad { min-width: 0; overflow-wrap: anywhere; }
#inventory-overlay .stk-rk-ad small { font-weight: 600; }
#inventory-overlay .stk-rk-h {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#inventory-overlay .stk-rk-satir .stk-rk-h { font-weight: 700; }
#inventory-overlay .stk-rk-bos { color: var(--text-muted); font-weight: 400 !important; }
#inventory-overlay .stk-rk-top { font-weight: 800; }
#inventory-overlay .stk-rk-bas .stk-rk-top { color: var(--text-main); }
#inventory-overlay .stk-rk-grup {
    font-weight: 800;
    font-size: 0.78rem;
    margin: 12px 0 6px;
}
#inventory-overlay .stk-rk-grup .stk-soluk { font-weight: 500; }
#inventory-overlay .stk-rapor-para td,
#inventory-overlay .stk-rapor-para th { white-space: nowrap; font-variant-numeric: tabular-nums; }
#inventory-overlay .stk-rapor-para td small { font-weight: 500; }

/* Neden tutmuyor — dört konu */
#inventory-overlay .stk-neden {
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    padding: 10px 0 4px;
}
#inventory-overlay .stk-bolum-baslik + .stk-neden { border-top: none; padding-top: 0; }
#inventory-overlay .stk-neden-bas { font-size: 0.84rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#inventory-overlay .stk-neden-bas i { color: var(--stk-sari); }
#inventory-overlay .stk-neden-sayi {
    min-width: 20px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid var(--stk-sari);
    color: var(--stk-sari);
    font-size: 0.7rem;
    font-weight: 800;
    text-align: center;
}
#inventory-overlay .stk-neden-not { font-size: 0.74rem; margin: 4px 0 8px; }
#inventory-overlay .stk-neden-liste { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
#inventory-overlay .stk-neden-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--stk-kutu);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    color: var(--text-main);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
}
#inventory-overlay button.stk-neden-satir { cursor: pointer; }
#inventory-overlay button.stk-neden-satir:hover,
#inventory-overlay button.stk-neden-satir:focus-visible { border-color: var(--accent-blue); outline: none; }
#inventory-overlay .stk-neden-dikkat { box-shadow: inset 3px 0 0 var(--stk-sari); }
#inventory-overlay .stk-neden-ad { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 2px; }
#inventory-overlay .stk-neden-ad small { font-weight: 500; }
#inventory-overlay .stk-neden-miktar { flex: 0 0 auto; font-weight: 800; white-space: nowrap; }
#inventory-overlay .stk-neden-miktar small { font-weight: 600; color: var(--text-muted); }
#inventory-overlay .btn.stk-fiyat-yaz,
.stk-kart .btn.stk-fiyat-yaz {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 10px;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid var(--stk-sari);
    color: var(--text-main);
    white-space: nowrap;
}
#inventory-overlay .btn.stk-fiyat-yaz i { color: var(--stk-sari); }

/* Kalem ekranı / kit parçası — 0 TL fiyatlı stok uyarısı */
#inventory-overlay .stk-sifir {
    border: 1px solid var(--stk-sari);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0 0 10px;
    font-size: 0.78rem;
    display: grid;
    gap: 6px;
}
#inventory-overlay .stk-sifir-bas { font-weight: 800; color: var(--stk-sari); display: flex; align-items: center; gap: 6px; }
#inventory-overlay .stk-sifir-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.stk-pencere .stk-sari { color: var(--stk-sari); }
.stk-pencere .stk-kirmizi { color: var(--stk-kirmizi); font-weight: 700; }

@media (max-width: 600px) {
    /* Ne kullandık: ad tam satır, 6 ay + toplam altında eşit sütunlar */
    #inventory-overlay .stk-rk-bas,
    #inventory-overlay .stk-rk-satir { grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.25fr); }
    #inventory-overlay .stk-rk-satir .stk-rk-ad { grid-column: 1 / -1; margin-bottom: 2px; }
    #inventory-overlay .stk-rk-bas .stk-rk-ad { display: none; }
    #inventory-overlay .stk-rk-bas { padding: 0 8px 2px; }
    #inventory-overlay .stk-rk-satir { padding: 7px 8px; }
    #inventory-overlay .stk-rk-h { font-size: 0.74rem; }
    #inventory-overlay .stk-rapor-para { font-size: 0.76rem; }
    #inventory-overlay .stk-neden-satir { flex-wrap: wrap; }
}

/* ============================================================
   AYARLAR (Aşama 1–2) — tek sayfa, iki grup (Benim / Yönetim). İsim alanı `.ayr-`.
   Masaüstü: solda kategori listesi (arama + dikkat şeridi), sağda en çok ~760 px içerik.
   Telefon (≤860 px ya da yatay dokunmatik ≤500 px yükseklik): önce liste, sonra tam ekran detay.
   ⚠️ iOS: kabuk `.glass` DEĞİL (fixed + backdrop-filter kayar), yükseklik `100svh` (100dvh DEĞİL),
   tek kaydırma kabı `#ayr-icerik`; sayfa kök zoom'undan etkilenmez (#settings-modal body'nin çocuğu).
   Renkler yalnız tema token'larından. Ana düğme `.ayr-btn-ana` = `.srv-btn-ana` kalıbı (vurgunun koyusu,
   beyaz yazı her temada okunur) — `--accent-*` zemin + beyaz yazı YASAK (§7).
   ============================================================ */
#settings-modal.ayr-modal {
    padding: 0;
    align-items: center;
    justify-content: center;
}
#settings-modal [hidden] { display: none !important; }
/* Klasik · Aydınlık yüzey/çerçeve token'larını TANIMLAMAZ (kökteki koyu tema değerleri kalır → açık zeminde
   kart çerçevesi ve seçenek kenarları görünmez). Yalnız Ayarlar içinde açık değerler verilir; diğer açık
   temalar kendi paletini tanımlıyor, onlara dokunulmaz. */
body[data-theme="klasik-light"] .ayr-kabuk {
    --border: rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.22);
    --surface-alt: rgba(0, 0, 0, 0.025);
    --surface-hover: rgba(0, 0, 0, 0.055);
    --text-faint: #6b7280;
    /* :root'ta `--surface: var(--glass-bg)` ve `--status-*: var(--accent-*)` KÖKTE hesaplanıp kalıtılır — body.light-mode
       --glass-bg/--accent-*'ı değiştirse de bu türetilmiş değerler koyu temada kalıyordu ("Kaydedildi ✓" 1,65 kontrast,
       geçmiş satırı koyu gri kutuda koyu yazı 1,89). Ayarlar içinde açıkça verilir (diğer açık temalar kendisi tanımlıyor). */
    --surface: rgba(0, 0, 0, 0.02);
    --status-success: #047857;
    --status-warn: #c2410c;
    --status-danger: #b91c1c;
}
/* Ayarlar içindeki `.glass` düğmelerde backdrop-filter yok: kabuk fixed katmanın (#settings-modal) içinde ve iOS'ta
   fixed + backdrop-filter sabit kalmaz (§7). Zemin opak kart üstünde olduğu için görünüm değişmez. */
#settings-modal .glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.ayr-kabuk {
    width: min(1180px, 96vw);
    height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #1a1a1e);
    color: var(--text-main);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-card, 16px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    outline: none;
}

.ayr-ust {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}
.ayr-baslik { margin: 0; font-size: 1.1rem; font-weight: 800; flex: 1; }
.ayr-geri {
    display: none;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--accent-blue);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 4px;
}
.ayr-kapat {
    margin-left: auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    background: var(--surface-alt, rgba(255, 255, 255, 0.05));
    color: var(--text-main);
    cursor: pointer;
    font-size: 1.05rem;
}
.ayr-kapat:hover { background: var(--surface-hover, rgba(255, 255, 255, 0.1)); }

.ayr-govde {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 290px 1fr;
}

/* ── Sol: arama + dikkat şeridi + kategori listesi ─────────────────────── */
.ayr-liste {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 12px 20px;
    border-right: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ayr-ara-kap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.ayr-ara-kap > i {
    position: absolute;
    left: 11px;
    color: var(--text-muted);
    pointer-events: none;
}
#ayr-ara {
    width: 100%;
    box-sizing: border-box;
    height: var(--ctl-h, 38px);
    padding: 0 12px 0 34px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
    background: var(--surface-alt, rgba(255, 255, 255, 0.05));
    color: var(--text-main);
    font-size: 0.88rem;
}
.ayr-ara-sonuc { display: flex; flex-direction: column; gap: 4px; }
.ayr-sonuc {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: var(--surface-alt, rgba(255, 255, 255, 0.04));
    color: var(--text-main);
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
    line-height: 1.35;
}
.ayr-sonuc:hover, .ayr-sonuc.secili, .ayr-sonuc:focus-visible {
    background: var(--surface-hover, rgba(255, 255, 255, 0.09));
    border-color: var(--accent-blue);
}
.ayr-sonuc-yol { color: var(--text-muted); font-size: 0.74rem; }
.ayr-sonuc-ad { font-weight: 700; }
.ayr-sonuc-disari { display: block; color: var(--text-muted); font-size: 0.7rem; margin-top: 2px; }
.ayr-ara-bos { font-size: 0.8rem; color: var(--text-muted); padding: 8px 4px; }
.ayr-baglanti {
    background: none;
    border: none;
    color: var(--accent-blue);
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.ayr-dikkat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    margin-bottom: 4px;
    border-radius: 10px;
    border: 1px solid var(--accent-orange);
    background: var(--surface-alt, rgba(255, 255, 255, 0.04));
}
.ayr-dikkat.ayr-arama-sirasinda { display: none; }
.ayr-dikkat-bas {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--accent-orange);
    padding: 0 4px 2px;
}
.ayr-dikkat-madde {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 7px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.ayr-dikkat-madde > span { flex: 1; }
.ayr-dikkat-madde > i:first-child { color: var(--accent-orange); }
.ayr-dikkat-madde:hover, .ayr-dikkat-madde:focus-visible { background: var(--surface-hover, rgba(255, 255, 255, 0.08)); }

.ayr-kat-listesi { display: flex; flex-direction: column; gap: 3px; }
.ayr-grup-bas {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 8px 4px;
}
.ayr-kat {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    cursor: pointer;
}
.ayr-kat > i:first-child { font-size: 1.15rem; color: var(--accent-blue); flex: 0 0 auto; }
.ayr-kat-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ayr-kat-ad { font-size: 0.86rem; font-weight: 700; }
.ayr-kat-ozet {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ayr-kat-ok { color: var(--text-muted); font-size: 0.8rem; display: none; }
.ayr-kat:hover { background: var(--surface-hover, rgba(255, 255, 255, 0.06)); }
.ayr-kat.aktif {
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
    border-color: var(--accent-blue);
}

/* ── Sağ: içerik (TEK kaydırma kabı) ──────────────────────────────────── */
.ayr-sag { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.ayr-icerik {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 22px 40px;
    outline: none;
}
.ayr-sayfa { max-width: 760px; margin: 0 auto; }
.ayr-sayfa-bas { margin: 0 0 4px; font-size: 1.2rem; font-weight: 800; outline: none; }
.ayr-sayfa-d { margin: 0 0 16px; font-size: 0.82rem; color: var(--text-muted); }

.ayr-kart {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    background: var(--surface-alt, rgba(255, 255, 255, 0.03));
    transition: box-shadow 0.3s, border-color 0.3s;
}
.ayr-kart-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ayr-kart-bas h4 { margin: 0; font-size: 0.95rem; font-weight: 800; }
.ayr-kart-d { margin: 0 0 4px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.ayr-kimi { margin: 0 0 12px; font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.ayr-ipucu { margin: 8px 0 0; font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; }
.ayr-rozet {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
    color: var(--text-muted);
}
.ayr-vurgu {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px var(--accent-blue);
}

.ayr-durum { display: block; min-height: 1em; margin-top: 8px; font-size: 0.74rem; color: var(--text-muted); }
.ayr-durum[data-durum="ok"], .ayr-durum[data-durum="yerel"] { color: var(--status-success, var(--accent-green)); }
.ayr-durum[data-durum="pending"] { color: var(--accent-orange); }
.ayr-durum[data-durum="error"], .ayr-durum[data-durum="izin-yok"] { color: var(--status-danger, var(--accent-red)); }
.ayr-uyari-metin { font-size: 0.7rem; color: var(--accent-orange); margin-top: 2px; }

/* Düğmeler */
.ayr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto;
    min-height: 36px;
    padding: 7px 14px;
    font-size: 0.8rem;
    color: var(--text-main);
}
.ayr-btn-ana {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto;
    min-height: 38px;
    padding: 8px 18px;
    font-size: 0.84rem;
    font-weight: 800;
    border-radius: 10px;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--accent-blue) !important;
    color: #fff !important;
    border: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.ayr-btn-ana:hover { background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), var(--accent-blue) !important; }
.ayr-btn-ana:disabled { opacity: 0.5; cursor: not-allowed; }
.ayr-btn-tehlike { color: var(--status-danger, var(--accent-red)) !important; border-color: var(--status-danger, var(--accent-red)) !important; }
.ayr-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Seçim (TR/EN, açılış modülü): düğme grubu */
.ayr-secim { display: flex; flex-wrap: wrap; gap: 8px; }
.ayr-secenek {
    min-height: 38px;
    padding: 7px 16px;
    border-radius: 10px;
    border: 2px solid var(--border, rgba(255, 255, 255, 0.14));
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}
.ayr-secenek:hover { background: var(--surface-hover, rgba(255, 255, 255, 0.07)); }
.ayr-secenek.secili { border-color: var(--accent-blue); background: var(--surface-hover, rgba(255, 255, 255, 0.08)); }
.ayr-secenek.secili::before { content: '✓ '; color: var(--accent-blue); }

.ayr-select {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: var(--ctl-h, 38px);
    padding: 8px 12px;
    line-height: 1.3;
    border-radius: 10px;
    font-size: 0.85rem;
}

.ayr-zoom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ayr-zoom-deger { min-width: 56px; text-align: center; font-weight: 800; font-size: 0.95rem; }
.ayr-tema-izgara { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-top: 4px; }
.ayr-ai-model { display: flex; flex-wrap: wrap; gap: 6px; }
/* AI ekranıyla ortak seçici (satır içi renkler koyu zemine göre) — Ayarlar'da token'larla, her temada okunur */
#ayr-ai-model .ai-model-btn {
    background: transparent !important;
    border: 2px solid var(--border, rgba(255, 255, 255, 0.14)) !important;
    color: var(--text-main) !important;
    font-size: 0.78rem !important;
    min-height: 44px;
}
#ayr-ai-model .ai-model-btn.secili { border-color: var(--accent-blue) !important; background: var(--surface-hover, rgba(255, 255, 255, 0.08)) !important; }
#ayr-ai-model .ai-model-btn > div { color: var(--text-muted); font-size: 0.66rem !important; }

/* Profil formu */
.ayr-profil-ust { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ayr-profil-foto { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.ayr-profil-foto img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--surface-hover, rgba(255, 255, 255, 0.08));
    border: 2px solid var(--border-strong, rgba(255, 255, 255, 0.15));
}
/* Fotoğraf yokken (src="") tarayıcının kırık resim işareti görünmesin — yalnız ÇİZİM değişir; src boş kalır
   (saveProfile önizlemeyi `src.startsWith('data:')` ile okur, dolu bir yer tutucu fotoğraf sanılırdı). */
#profile-photo-preview[src=""], #profile-photo-preview:not([src]) {
    content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
#profile-photo-fallback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    color: var(--text-muted);
    pointer-events: none;
}
#profile-photo-edit-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.72rem;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--accent-blue);
    color: #fff;
    border: 2px solid var(--bg-card, #1a1a1e);
}
.ayr-profil-ad { min-width: 0; }
#profile-user-name { font-size: 1rem; font-weight: 800; }
/* Dosya seçimi: görünmez ama çizilmiş (Safari display:none + .click() tuzağı, §7); açan <label for> */
.ayr-gizli-dosya { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.ayr-alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.ayr-alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Aynı satırda bir etiket iki satıra kırılınca (ör. "Open Top İşçilik ($/saat)") girdiler 15 px kayıyordu (§7 hizalama):
   etiket + girdi ızgara hücresinin ALTINA yaslanır — girdiler hep aynı hizada, etiket girdisinin hemen üstünde kalır. */
#settings-modal .ayr-alanlar > .ayr-alan > label:first-child { margin-top: auto; }
.ayr-alan-genis { grid-column: 1 / -1; }
#settings-modal .ayr-alan > label,
#settings-modal .ayr-alan-etiket {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
#settings-modal .ayr-alan input,
#settings-modal .ayr-alan select,
#settings-modal .ayr-alan textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.86rem;
}
#settings-modal .ayr-alan textarea { resize: vertical; min-height: 60px; }
.ayr-alan-alt-bas {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--accent-orange);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ayr-imza { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ayr-imza-kutu {
    width: 120px;
    height: 68px;
    border: 1px dashed var(--border-strong, rgba(255, 255, 255, 0.2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;   /* imza görseli beyaz zeminlidir — her temada beyaz */
    overflow: hidden;
    flex-shrink: 0;
}
.ayr-imza-kutu img { max-width: 100%; max-height: 100%; object-fit: contain; }
#profile-sign-empty { font-size: 0.64rem; color: #6b7280; text-align: center; line-height: 1.4; }
.ayr-imza-btn { display: flex; flex-direction: column; gap: 6px; }
.ayr-ehliyet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
}
.driving-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 4px;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
    background: var(--surface-alt, rgba(255, 255, 255, 0.05));
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.driving-chip .driving-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.driving-chip.secili { border: 2px solid var(--accent-blue); background: var(--surface-hover, rgba(255, 255, 255, 0.1)); color: var(--accent-blue); }
.driving-chip:focus-within { outline: 2px solid var(--accent-blue); outline-offset: 1px; }

.ayr-form-alt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
}
.ayr-form-alt .ayr-durum { margin: 0; flex: 1; min-width: 0; }

/* "Bu cihaz" kartı */
.ayr-tanim { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 0.8rem; }
.ayr-tanim dt { color: var(--text-muted); }
.ayr-tanim dd { margin: 0; overflow-wrap: anywhere; }
.ayr-surum { margin: 0; font-size: 0.85rem; }

/* Tehlikeli işlemler alanı — kategorinin en altında, kırmızı çerçeve */
.ayr-dikkat-alani {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--status-danger, var(--accent-red));
}
.ayr-dikkat-alani h4 {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--status-danger, var(--accent-red));
    display: flex;
    align-items: center;
    gap: 6px;
}
.ayr-dikkat-islem { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ayr-dikkat-islem > div { flex: 1 1 260px; min-width: 0; }
.ayr-dikkat-islem + .ayr-dikkat-islem { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1)); }
.ayr-dikkat-islem b { font-size: 0.85rem; }
.ayr-dikkat-islem p { margin: 2px 0 0; font-size: 0.74rem; color: var(--text-muted); }

/* Taşınan bölümlerde satır içi `color:white` (etiket, kişi adı, giriş kutusu) açık zeminde okunmuyordu — genel
   açık tema listesi yalnız span/div/b'yi kapsıyor; Ayarlar içinde label ve form alanları da düzeltilir. */
body.light-mode #settings-modal :is(label, span, div, b, p, input, select, textarea):is([style*="color:white"], [style*="color: white"], [style*="color:#fff;"], [style*="color: #fff;"]) {
    color: var(--text-main) !important;
}

/* ── YÖNETİM kartları (Ayarlar P2) ─────────────────────────────────── */
.ayr-alanlar-dort { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ayr-alanlar-dar { grid-template-columns: repeat(2, minmax(0, 190px)); }
.ayr-ust-bosluk { margin-top: 12px; }
#settings-modal .ayr-alan-etiket-ust { margin: 14px 0 6px; }
.ayr-ipucu-ust { margin: 0 0 10px; }
.ayr-onay-satir { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.ayr-onay-satir input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent-blue); flex-shrink: 0; }
#settings-modal .ayr-onay-satir label {
    display: inline;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    cursor: pointer;
}
/* Kişi seçim listeleri (sessiz saat muafları, alıcı listeleri) — satırlar JS'ten gelir */
.ayr-secim-listesi {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    background: var(--surface-alt, rgba(255, 255, 255, 0.03));
}
#settings-modal .ayr-secim-listesi label {
    display: flex !important;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    font-weight: 500;
}
/* Ekle/sil listeleri (takma ad, mail rehberi, firma ücreti, saha personeli) */
.ayr-liste-kutu { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ayr-liste-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 8px 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    background: var(--surface-alt, rgba(255, 255, 255, 0.03));
}
.ayr-liste-ad {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    overflow-wrap: anywhere;
}
.ayr-liste-ad > i { color: var(--accent-blue); flex-shrink: 0; }
.ayr-liste-ad-kap { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ayr-liste-alt { font-size: 0.72rem; color: var(--text-muted); overflow-wrap: anywhere; }
.ayr-liste-bos { font-size: 0.78rem; color: var(--text-muted); padding: 8px 4px; }
.ayr-takma-ad { flex-wrap: wrap; }
.ayr-takma-ad > i { color: var(--text-muted); }
.ayr-takma-eski { color: var(--text-muted); font-weight: 600; }
.ayr-rozetler { display: flex; flex-wrap: wrap; gap: 4px; }
.ayr-mini-rozet {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.2));
    color: var(--text-main);
}
.ayr-ikon-btn {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-main);
}
.ayr-sil-btn { color: var(--status-danger, var(--accent-red)) !important; }
.ayr-ekle-satir { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.ayr-ekle-satir > input, .ayr-ekle-satir > select { flex: 1 1 200px; min-width: 0; box-sizing: border-box; }
.ayr-ekle-satir > .ayr-select { width: auto; }
.ayr-geri-al {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--accent-orange);
    font-size: 0.8rem;
}
.ayr-gecerli {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ayr-durum-satir { margin: 6px 0; font-size: 0.85rem; font-weight: 700; }
.ayr-durum-satir.iyi { color: var(--status-success, var(--accent-green)); }
.ayr-durum-satir.uyari { color: var(--accent-orange); }
.ayr-madde-liste { margin: 4px 0 0; padding-left: 18px; font-size: 0.78rem; line-height: 1.55; }
.ayr-salt-not { margin: 10px 0 0; font-size: 0.72rem; color: var(--accent-orange); display: flex; align-items: center; gap: 5px; }
.ayr-kisiler-govde { display: flex; flex-direction: column; gap: 10px; }
#settings-modal .ayr-izinler .perm-grid-container { margin-top: 4px; }

/* ── Aşama 2 (Ayarlar P3): kaydet çubuğu · kirli kart · rozet · son değiştiren · geçmiş ─────────── */
/* B kartlarının kendi Kaydet düğmesi yerine alttaki çubuk (düğme DOM'da kalır: co_admin kilidi onu seçiciyle bulur) */
.ayr-b-dugme { display: none !important; }
.ayr-dugmeler:has(> .ayr-b-dugme:only-child) { display: none; }
.ayr-dugmeler-ince { margin-top: 8px; }
.ayr-kaydet-cubugu {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 22px;
    border-top: 1px solid var(--accent-orange);
    background: var(--bg-card, #1a1a1e);
    color: var(--text-main);
}
.ayr-kc-metin { flex: 1 1 180px; min-width: 0; font-size: 0.84rem; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.ayr-kc-metin > i { color: var(--accent-orange); font-size: 1.05rem; }
.ayr-kaydet-cubugu .ayr-btn-ana:disabled { opacity: 0.5; }
.ayr-kart.ayr-kirli { border-color: var(--accent-orange); box-shadow: inset 3px 0 0 var(--accent-orange); }
.ayr-son { margin: -6px 0 12px; font-size: 0.7rem; color: var(--text-muted); }
.ayr-rozet-kayit[data-kayitli="1"] { color: var(--status-success, var(--accent-green)); border-color: var(--status-success, var(--accent-green)); }
.ayr-rozet-kayit[data-kayitli="0"] { color: var(--accent-orange); border-color: var(--accent-orange); }
.ayr-rozet-kayit[data-kayitli="kismi"] { color: var(--text-main); border-color: var(--border-strong, rgba(255, 255, 255, 0.2)); }
.ayr-kod-not { margin: -4px 0 10px; }
.ayr-durum-tekrar {
    margin-left: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.ayr-sayfa-arac { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; }
.ayr-gecmis-suzgec { margin-top: 10px; }
.ayr-gecmis-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ayr-gecmis-satir {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    background: var(--surface, rgba(255, 255, 255, 0.02));
    min-width: 0;
}
.ayr-gecmis-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-muted); }
.ayr-gecmis-ust b { color: var(--text-main); font-size: 0.78rem; }
.ayr-gecmis-zaman { font-variant-numeric: tabular-nums; }
.ayr-gecmis-metin { margin-top: 3px; font-size: 0.8rem; overflow-wrap: anywhere; }

/* Dokunma hedefi: GİRDİ TÜRÜNE göre (genişliğe değil) */
@media (pointer: coarse) {
    /* Onay kutusu / radyo boyca uzatılmaz (18×44 garip bir çubuk oluyordu) — dokunma alanı satırın etiketindedir */
    .ayr-kabuk :is(button, input:not([type="checkbox"]):not([type="radio"]), select, .ayr-kat, .ayr-sonuc, .ayr-dikkat-madde) { min-height: var(--tap-target-min, 44px); }
    .ayr-kabuk .driving-chip { min-height: var(--tap-target-min, 44px); }
    /* Yalnız yükseklik yetmez: dar ikon düğmeler (✕, sil, yakınlaştırma −/+) eni de 44 px */
    .ayr-kabuk :is(.ayr-kapat, .ayr-ikon-btn, .ayr-zoom .btn, .mcu-icon) { min-width: var(--tap-target-min, 44px); }
    .ayr-kabuk label.btn { min-height: var(--tap-target-min, 44px); }
    /* …ve dokunma alanı onay kutusunun SATIRINDA: etiketli kutular (izin kartı, maliyet alıcısı, ehliyet) etiketle, alıcı
       listeleri satırın kendi tıklamasıyla, sessiz saat anahtarı yanındaki etiketle 44 px */
    .ayr-kabuk label:has(> input:is([type="checkbox"], [type="radio"])),
    .ayr-kabuk :is(.denetim-alici-satir, .portal-alici-satir, .ayr-onay-satir) { min-height: var(--tap-target-min, 44px); }
    #settings-modal .ayr-onay-satir > label { align-self: stretch; display: flex; align-items: center; flex: 1; }
    /* Profil fotoğrafı düğmesi görünüşte 24 px kalır; dokunma alanı görünmez bir halkayla 44 px */
    #profile-photo-edit-btn::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
}

/* Telefon: önce liste, sonra tam ekran detay (yatay telefon da dahil) */
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse) {
    .ayr-kabuk {
        width: 100vw;
        height: 100svh;
        max-height: 100svh;
        border-radius: 0;
        border: none;
    }
    /* Yatay iPhone'da çentik / yuvarlak köşe: sol-sağ güvenli alan (viewport-fit=cover) */
    .ayr-ust {
        padding: calc(10px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px));
    }
    .ayr-govde { grid-template-columns: 1fr; }
    .ayr-liste {
        border-right: none;
        padding: 12px max(14px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    }
    .ayr-kat { padding: 12px 10px; }
    .ayr-kat-ok { display: inline-block; }
    .ayr-kabuk[data-gorunum="liste"] .ayr-sag { display: none; }
    .ayr-kabuk[data-gorunum="detay"] .ayr-liste { display: none; }
    .ayr-kabuk[data-gorunum="detay"] .ayr-geri { display: inline-flex; }
    .ayr-kabuk[data-gorunum="detay"] .ayr-baslik { visibility: hidden; }
    .ayr-icerik { padding: 14px max(14px, env(safe-area-inset-right, 0px)) calc(30px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
    .ayr-kaydet-cubugu { padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
    .ayr-kaydet-cubugu .ayr-btn, .ayr-kaydet-cubugu .ayr-btn-ana { flex: 1 1 120px; }
    .ayr-kart { padding: 14px 12px; }
    .ayr-alanlar { grid-template-columns: 1fr; }
    .ayr-alanlar.ayr-alanlar-dort, .ayr-alanlar.ayr-alanlar-dar { grid-template-columns: 1fr 1fr; }
    .ayr-tema-izgara { grid-template-columns: 1fr; }
}

/* ============================================================
   BİLDİRİM F1+F2 — Ayarlar › Bildirimlerim + Yönetim › Bildirimler + ana ekran bandı (isim alanı `.bld-`).
   docs/bildirim/bildirim-deneyimi-plani.md §2–§4, §7. Durum renkleri temadan BAĞIMSIZ anlamsal değişkenlerdir (--bld-*);
   açık temalarda koyu tonlar. Renk tek başına anlam taşımaz (simge + kelime her yerde var). `--accent-*` zemin + beyaz yazı
   YOK (§7) — ana düğme `.ayr-btn-ana` kalıbı (vurgunun koyusu). iOS: backdrop-filter / sticky YOK; bant body'nin çocuğu.
   ============================================================ */
.ayr-kabuk, #push-health-banner {
    --bld-yesil: #34d399;
    --bld-sari: #fbbf24;
    --bld-kirmizi: #f87171;
    --bld-mavi: #60a5fa;
    --bld-gri: #9ca3af;
    --bld-turuncu: #fb923c;
}
body.light-mode .ayr-kabuk, body.light-mode #push-health-banner,
body[data-theme$="-light"] .ayr-kabuk, body[data-theme$="-light"] #push-health-banner {
    --bld-yesil: #047857;
    --bld-sari: #854d0e;      /* #a16207 aydınlık temalarda küçük kalın yazıda 4.2:1 kalıyordu (inceleme) → ≈6:1 */
    --bld-kirmizi: #b91c1c;
    --bld-mavi: #1d4ed8;
    --bld-gri: #4b5563;
    --bld-turuncu: #9a3412;   /* #c2410c klasik/endüstriyel-light'ta 4.4:1 → ≈7:1 */
}
[data-renk="yesil"] { --bld-c: var(--bld-yesil); }
[data-renk="sari"] { --bld-c: var(--bld-sari); }
[data-renk="kirmizi"] { --bld-c: var(--bld-kirmizi); }
[data-renk="mavi"] { --bld-c: var(--bld-mavi); }
[data-renk="gri"] { --bld-c: var(--bld-gri); }
[data-renk="turuncu"] { --bld-c: var(--bld-turuncu); }

/* "Bu cihaz" kartı */
.bld-durum {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-left: 4px solid var(--bld-c, var(--border));
    background: var(--surface-alt, rgba(255, 255, 255, 0.03));
}
.bld-simge {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--bld-c);
    border: 2px solid var(--bld-c);
}
.bld-durum[data-kod="hazirlik"] .bld-simge i { animation: bld-don 1.1s linear infinite; }
@keyframes bld-don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bld-durum[data-kod="hazirlik"] .bld-simge i { animation: none; } }
.bld-durum-metin { flex: 1; min-width: 0; }
.bld-baslik { font-weight: 800; font-size: 0.95rem; line-height: 1.35; overflow-wrap: anywhere; }
/* --text-muted klasik-dark'ta 4.15:1 kalıyordu — kartın alt satırı ana yazı renginden türetilir (≥4.5:1, her temada) */
.bld-alt { font-size: 0.8rem; color: var(--text-main); opacity: 0.8; margin-top: 3px; line-height: 1.45; }
.bld-alt-ek { color: var(--text-main); }
.bld-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.bld-bag {
    background: none;
    border: none;
    color: var(--bld-mavi);
    text-decoration: underline;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 6px 2px;
    min-height: 36px;
}
.bld-yonerge {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed var(--border-strong, rgba(255, 255, 255, 0.2));
    font-size: 0.8rem;
    line-height: 1.5;
}
.bld-yonerge p, .bld-test-satir p { margin: 0 0 4px; }
.bld-yonerge ol, .bld-test-satir ol { margin: 4px 0 0; padding-left: 22px; }
.bld-yonerge li, .bld-test-satir li { margin-bottom: 4px; }
.bld-test { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.bld-test:empty { display: none; }
.bld-test-satir { font-size: 0.82rem; line-height: 1.45; overflow-wrap: anywhere; }
.bld-test-satir[data-tur="gri"] { color: var(--bld-gri); }
.bld-test-satir[data-tur="yesil"] { color: var(--bld-yesil); font-weight: 700; }
.bld-test-satir[data-tur="uyari"] { color: var(--bld-turuncu); }
.bld-test-satir[data-tur="hata"] { color: var(--bld-kirmizi); }
.bld-test-satir[data-tur="soru"] { font-weight: 800; }
.bld-test-satir[data-tur="not"] { color: var(--text-muted); font-size: 0.74rem; }
.bld-test-satir .bld-dugmeler { margin-top: 6px; }
.bld-dip { margin: 10px 0 0; font-size: 0.72rem; color: var(--text-muted); line-height: 1.45; }
.bld-ayrinti, .bld-katli { margin-top: 10px; }
.bld-ayrinti > summary, .bld-katli > summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    min-height: 32px;
    line-height: 32px;
    color: var(--text-main);
}
.bld-ayrinti .ayr-tanim { margin-top: 6px; }
.bld-not { font-size: 0.74rem; color: var(--text-muted); margin: 8px 0 0; line-height: 1.45; }
/* Gece satırının ana cümlesi — kartın alt satırıyla aynı ölçek (sınıfsız <p> 16 px'e düşüyordu) */
.bld-gece-metin { font-size: 0.8rem; line-height: 1.45; margin: 0; color: var(--text-main); }
.bld-serit {
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid var(--bld-c, var(--border));
    border-left-width: 4px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-main);
}

/* Cihazlarım */
.bld-cz-liste, .bld-tur-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bld-cz {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}
.bld-cz.soluk, .bld-duz li.soluk { opacity: 0.62; }
.bld-cz-ikon { font-size: 1.25rem; color: var(--text-muted); flex-shrink: 0; }
.bld-cz-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bld-cz-ad { font-weight: 700; font-size: 0.85rem; overflow-wrap: anywhere; }
.bld-cz-metin small { color: var(--text-muted); font-size: 0.72rem; overflow-wrap: anywhere; }
.bld-nokta { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; display: inline-block; box-sizing: border-box; vertical-align: middle; }
.bld-nokta[data-nokta="aliyor"] { background: var(--bld-yesil); }
.bld-nokta[data-nokta="kayitli"] { border: 2px solid var(--bld-mavi); background: linear-gradient(90deg, var(--bld-mavi) 50%, transparent 50%); }
.bld-nokta[data-nokta="eski"] { border: 2px solid var(--bld-gri); }
.ayr-btn.bld-kucuk { min-height: 30px; padding: 4px 10px; font-size: 0.72rem; }
.bld-duz { margin: 6px 0 0; padding-left: 18px; font-size: 0.78rem; line-height: 1.45; }
.bld-duz li { margin-bottom: 4px; overflow-wrap: anywhere; }

/* Sana gelen bildirimler */
.bld-tur-liste li { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border, rgba(255, 255, 255, 0.1)); }
.bld-tur-bas { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.85rem; }
.bld-tur-liste small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 0.74rem; line-height: 1.45; }
.bld-soluk { opacity: 0.8; }
.bld-rozet {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--bld-c, var(--border, rgba(255, 255, 255, 0.14)));
    color: var(--bld-c, var(--text-muted));
    line-height: 1.4;
}

/* Yönetim › Bildirimler (F2) — telefonda kişi kartları, geniş panelde tablo (container query: bölünmüş ekranda da doğru) */
.bld-yon { container-type: inline-size; }
.bld-alt-bas { margin: 16px 0 6px; font-size: 0.85rem; font-weight: 800; }
.bld-yon-tablo { display: flex; flex-direction: column; gap: 6px; }
.bld-yon-satir {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.45;
}
.bld-yon-satir small { color: var(--text-muted); }
.bld-yon-satir .bld-duz { margin: 0; padding-left: 0; list-style: none; }
.bld-yon-bas { display: none; }
.bld-yon-neden { overflow-wrap: anywhere; }
.bld-yon-satir [data-etiket]::before { content: attr(data-etiket) ': '; color: var(--text-muted); font-size: 0.72rem; }
/* Durum rozeti ve rol adı tek satır ("Kayıtlı, denenmedi" / "Co-Admin" bölünüyordu — son rötuş) */
.bld-yon-satir .bld-rozet, .bld-yon-kisi small { white-space: nowrap; }
.bld-yon-kisi b { overflow-wrap: anywhere; }   /* uzun tek kelimelik ad Durum rozetine binmesin */
@container (min-width: 720px) {
    /* Başlık ve HER satır aynı şablonla aynı izleri alır: izler içerikten bağımsız (fr → minmax(0, …), son sütun sabit 10rem —
       "Talimatı kopyala" sığar). Eskiden son sütun `auto`, fr'ler içerik genişliğine göre büyüyordu → her satır kendi ızgarasını
       kurup sütunlar satırdan satıra kayıyordu (son rötuş). Durum sütunu en uzun rozeti (≈8,5rem) tek satırda taşır.
       Başlığın kenarlığı saydam (yok DEĞİL): satırlarla aynı iç genişlik → fr payları birebir aynı. */
    .bld-yon-satir { grid-template-columns: minmax(0, 1.1fr) minmax(9rem, 0.9fr) minmax(0, 1.8fr) minmax(0, 0.9fr) minmax(0, 1.8fr) 10rem; gap: 10px; align-items: start; }
    .bld-yon-tablo[data-admin="0"] .bld-yon-satir { grid-template-columns: minmax(0, 1.1fr) minmax(9rem, 0.9fr) minmax(0, 0.8fr) minmax(0, 2fr) 10rem; }
    .bld-yon-bas { display: grid; font-weight: 700; color: var(--text-muted); border-color: transparent; padding: 0 10px; }
    .bld-yon-satir [data-etiket]::before { content: none; }
}
.bld-matris-kap { overflow-x: auto; max-width: 100%; border: 1px solid var(--border, rgba(255, 255, 255, 0.1)); border-radius: 10px; }
.bld-matris { border-collapse: collapse; font-size: 0.76rem; min-width: 100%; }
.bld-matris th, .bld-matris td { padding: 6px 8px; border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1)); text-align: center; white-space: nowrap; text-transform: none; letter-spacing: normal; }
.bld-matris th[scope="row"] { text-align: left; white-space: normal; min-width: 190px; max-width: 280px; }
/* Telefonda yatay kaydırınca satır adı kaybolmasın: ilk sütun İÇ kaydırma kabında yapışkan (pencere kaydırması değil — §7
   iOS sticky tuzağı değil), zemin opak (kart zemini: ayar kabuğu + yarı saydam yüzey) */
.bld-matris th[scope="row"], .bld-matris thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: linear-gradient(var(--surface-alt, rgba(255, 255, 255, 0.03)), var(--surface-alt, rgba(255, 255, 255, 0.03))), var(--bg-card, #1a1a1e);
}
@media (max-width: 600px) { .bld-matris th[scope="row"] { min-width: 150px; } }
.bld-matris th[scope="row"] small { display: block; color: var(--text-muted); font-weight: 400; font-size: 0.68rem; line-height: 1.4; }
.bld-matris td[data-sembol="tam"] { color: var(--bld-yesil); font-weight: 800; }
.bld-matris td[data-sembol="yarim"] { color: var(--bld-mavi); }
.bld-matris td[data-sembol="yok"] { color: var(--bld-gri); }
.bld-uyari-metin { color: var(--bld-turuncu) !important; }
.bld-uyarilar .bld-duz li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

@media (pointer: coarse) {
    .bld-kart .bld-birincil, .bld-test .ayr-btn-ana, .bld-test .ayr-btn, .bld-kart .bld-bag { min-height: 44px; }
    .ayr-btn.bld-kucuk { min-height: 40px; }
    .bld-ayrinti > summary, .bld-katli > summary { min-height: 44px; line-height: 44px; }
}

/* Ana ekran ipucu bandı (§3.9) — #push-health-banner (z-index / modal açıkken gizleme: @WP-26 kuralı) */
#push-health-banner.bld-bant {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bg-card, #1a1a1e);
    color: var(--text-main);
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18));
    border-left: 4px solid var(--bld-turuncu);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.bld-bant-ikon { font-size: 1.3rem; color: var(--bld-turuncu); flex-shrink: 0; }
.bld-bant-metin {
    flex: 1;
    min-width: 150px;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
}
.bld-bant-dugmeler { display: flex; gap: 6px; margin-left: auto; }
.bld-bant-ana {
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    font-weight: 800;
    font-size: 0.78rem;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--accent-blue);
}
.bld-bant-sonra {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18));
    font-size: 0.72rem;
    cursor: pointer;
}
@media (pointer: coarse) { .bld-bant-ana, .bld-bant-sonra { min-height: 44px; } }
/* Telefonda "Yeni rapor" FAB'ı (sağ alt, 16 + 52 px) bandın altında kalıp dokunuş "Daha sonra"ya gidiyordu (inceleme) → bant
   FAB'ın ÜSTÜNE çıkar (FAB yalnız ≤768 px ve yazma yetkisi olanda görünür). */
@media (max-width: 768px) {
    body:not(.mc-goruntuleyen) #push-health-banner.bld-bant { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
/* 25.0.1: sabit bant sayfanın en altını (ana ekran yakınlaştırma düğmeleri) örtüyordu → bant görünürken altbilgiye bandın kapladığı kadar
   boşluk; sayfa o kadar daha kayar. `--bld-bant-pay` = bandın üstünden ekranın altına (app.js `_bldBantGoster` ölçer). */
body:has(> #push-health-banner.bld-bant) #main-app-container > footer { padding-bottom: calc(var(--bld-bant-pay, 0px) + 8px); }
/* Telefonda klasör / arama listesi (kayan kutu #folder-view, yakınlaştırılır → --mc-zoom ile bölünür): son kart bandın altında kalmasın
   (FAB dolgusu 140 px; bant daha yüksekse bant kadar). Masaüstünde liste dolgusu değişmez (s_kart_baslik 8f). */
@media (max-width: 768px) {
    body:has(> #push-health-banner.bld-bant) #main-app-container.folder-mode > #folder-view {
        padding-bottom: calc(max(env(safe-area-inset-bottom, 0px) + 140px, var(--bld-bant-pay, 0px) + 8px) / var(--mc-zoom, 1));
    }
}
.bld-onay-not { display: block; flex-basis: 100%; color: var(--bld-turuncu); font-size: 0.72rem; line-height: 1.4; }
.bld-kucuk[data-durum="ok"] { color: var(--bld-yesil); }
.bld-kucuk[data-durum="error"] { color: var(--bld-kirmizi); }

/* 24.6.0 — DRY gider firması (boş = Marintek): Marintek dışı firma yazılınca kutu turuncu, fark edilsin */
.gider-firma-kutu::placeholder { color: var(--text-muted); opacity: 0.8; }
.gider-firma-kutu.gider-firma-dolu { border-color: var(--accent-orange) !important; color: var(--accent-orange) !important; font-weight: 700; }

/* ── 24.6.5: klasör listesinde ▲ en üst / ▼ en alt (Tolga: "aşağı in in bitmiyor") ─────────────────────
   body'nin DOĞRUDAN çocuğu (zoom'lu görünümün dışında — CLAUDE.md §7 fixed + zoom tuzağı), sabit renk (tema vurgusu
   değil), backdrop-filter YOK (iOS'ta fixed + blur sabit kalmaz). Telefonda "Estimate Ekle" FAB'ının (16 + 52 px) ÜSTÜNDE. */
.mc-kaydir {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 480;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mc-kaydir[hidden],
.mc-kaydir button[hidden] {
    display: none !important;
}
.mc-kaydir button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(15, 23, 42, 0.9);
    color: #e2e8f0;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
@media (max-width: 768px) {
    .mc-kaydir {
        right: 16px;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}
@media (pointer: coarse) {
    .mc-kaydir button {
        width: 46px;
        height: 46px;
    }
}

/* 24.6.6 Faturadan Eşleştir › "Kayıt aç" penceresi + 24.7.6 Marintek mailleri penceresi + 24.7.9 çekim ekranı / Hasar-PTI işaretleri
   (body'nin çocuğu, zemini HER temada koyu). Açık temanın genel girdi kuralı
   (`body.light-mode input { color:#1a1a1a !important }`) koyu zemine koyu yazı üretiyordu → bu pencerede sabit açık yazı. */
body.light-mode :is(#bim-kayit-ac, #marintek-overlay, #cekim-view, #isaret-overlay, #hasar-overlay, #wanhai-overlay, #kontrol-overlay, #kk-overlay, #est-ljl) :is(input, select, textarea) {
    background: #111827 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}
body.light-mode :is(#bim-kayit-ac, #marintek-overlay, #cekim-view, #isaret-overlay, #hasar-overlay, #wanhai-overlay, #kontrol-overlay, #kk-overlay, #est-ljl) :is(input, textarea)::placeholder {
    color: #6b7280 !important;
}

/* 24.9.5 (arayüz incelemesi): DOKUNMATİKTE küçük hedefler — konteyner kartı simgesi (başlığın içinde, ıskalayınca İncele açılıyordu),
   Kontroller / Lojilog otomatik / Wan Hai düğmeleri en az 40 px. Genişliğe değil girdi türüne bakar (pointer: coarse). */
@media (pointer: coarse) {
    .kk-dg { display: inline-flex !important; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 8px !important; font-size: 1.05em !important; }
    #kontrol-kutu button, #hasar-kutu button, #wh-kutu button { min-height: 40px; }
    #est-kno-liste [data-est-no] { padding-top: 11px !important; padding-bottom: 11px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   24.9.6 (S5) — RAPOR KARTI ROZETLERİ TEK BİÇİM: `.mc-rozet` + ton (rz-yesil / rz-turuncu / rz-kirmizi / rz-mavi / rz-gri / rz-mor /
   rz-sari). HTML'i yalnız app._rozet() üretir. Zemin soluk + yazı renkli + ince kenar.
   Ton renkleri temadan BAĞIMSIZDIR (mono temalarda --accent-red beyaz/siyah, --accent-orange gri — anlam rengi kaybolurdu); koyu temada
   açık ton, açık temalarda (body.light-mode = tüm *-light temalar) koyu ton. Ölçüldü (WCAG): koyu 5,1–9,1 · açık 4,3–6,5 (eski rozetler
   açık temada 1,45–2,2 — "Onay Bekleyen" sarısı, "Tamir Tamamlandı" yeşili okunmuyordu). color-mix YOK (eski Safari) — rgba.
   Birim rozeti rengini satır içi değişkenle verir: --rz-y (yazı) / --rz-ya (açık tema yazısı) / --rz-z (zemin) / --rz-c (kenar).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.mc-rozet {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--rz-c, rgba(148, 163, 184, 0.40));
    background: var(--rz-z, rgba(148, 163, 184, 0.16));
    color: var(--rz-y, #cbd5e1);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    flex-shrink: 0;
}
body.light-mode .mc-rozet { color: var(--rz-ya, var(--rz-y, #475569)); }
.mc-rozet i { font-size: 0.75rem; line-height: 1; }
.mc-rozet.rz-tik { cursor: pointer; }
.rz-yesil   { --rz-y: #34d399; --rz-z: rgba(52, 211, 153, 0.15); --rz-c: rgba(52, 211, 153, 0.45); }
.rz-turuncu { --rz-y: #fb923c; --rz-z: rgba(251, 146, 60, 0.15); --rz-c: rgba(251, 146, 60, 0.45); }
.rz-kirmizi { --rz-y: #f87171; --rz-z: rgba(239, 68, 68, 0.16); --rz-c: rgba(239, 68, 68, 0.45); }
.rz-mavi    { --rz-y: #60a5fa; --rz-z: rgba(59, 130, 246, 0.16); --rz-c: rgba(59, 130, 246, 0.45); }
.rz-gri     { --rz-y: #cbd5e1; --rz-z: rgba(148, 163, 184, 0.16); --rz-c: rgba(148, 163, 184, 0.40); }
.rz-mor     { --rz-y: #c4b5fd; --rz-z: rgba(167, 139, 250, 0.16); --rz-c: rgba(167, 139, 250, 0.45); }
.rz-sari    { --rz-y: #fbbf24; --rz-z: rgba(245, 158, 11, 0.15); --rz-c: rgba(245, 158, 11, 0.45); }
body.light-mode .rz-yesil   { --rz-y: #166534; --rz-z: rgba(21, 128, 61, 0.12); --rz-c: rgba(21, 128, 61, 0.40); }
body.light-mode .rz-turuncu { --rz-y: #9a3412; --rz-z: rgba(234, 88, 12, 0.11); --rz-c: rgba(234, 88, 12, 0.40); }
body.light-mode .rz-kirmizi { --rz-y: #b91c1c; --rz-z: rgba(220, 38, 38, 0.10); --rz-c: rgba(220, 38, 38, 0.38); }
body.light-mode .rz-mavi    { --rz-y: #1d4ed8; --rz-z: rgba(37, 99, 235, 0.10); --rz-c: rgba(37, 99, 235, 0.38); }
body.light-mode .rz-gri     { --rz-y: #475569; --rz-z: rgba(71, 85, 105, 0.10); --rz-c: rgba(71, 85, 105, 0.32); }
body.light-mode .rz-mor     { --rz-y: #6d28d9; --rz-z: rgba(124, 58, 237, 0.10); --rz-c: rgba(124, 58, 237, 0.35); }
body.light-mode .rz-sari    { --rz-y: #92400e; --rz-z: rgba(202, 138, 4, 0.12); --rz-c: rgba(202, 138, 4, 0.40); }

/* Alt çizgi YALNIZ konteyner numarasında (.kart-no). h4 esnek kutu (display:flex) olduğu için text-decoration her esnek öğeye —
   rozetler ve tip dahil — yayılıyordu ("ZARAR", fatura no … altı çizili); yayılan çizgi çocukta kapatılamaz. */
.card-top-left h4 { text-decoration: none; }
.card-top-left h4 .kart-no { font-weight: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Birim + durum rozetleri acente adının yanında (masaüstünde satır akışında; ≤768 px'te satır zaten gap'li inline-flex) */
.card-customer-info .mc-rozet { margin-left: 6px; }
@media (max-width: 768px) {
    .card-customer-info > .mc-rozet { margin-left: 0; font-size: 0.62rem !important; padding: 2px 7px !important; }
}
/* Masaüstünde (>900 px) başlık SARAR — çok rozetli kartta (tamamlanmış + faturalı + arşiv + etiket …) h4 sağdaki tutar / düğme bloğunu
   kartın dışına itiyordu (h4 flex, wrap yoktu). Sol blok yalnız gerektiğinde daralır: rozet azken genişlik değişmez. */
@media (min-width: 901px) {
    .card-top-left { min-width: 0; }
    .card-top-left > .kart-baslik-sol { min-width: 0; }
    .card-top-left h4 { flex-wrap: wrap; row-gap: 4px; }
    .card-top-right { flex-shrink: 0; margin-left: 16px; }
}
/* PTI kartı: süre düzenleme kalemi (rozetle aynı ton değişkenleri) */
.kart-pti-duzenle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--rz-c);
    background: var(--rz-z);
    color: var(--rz-y);
    cursor: pointer;
}
.kart-pti-duzenle i { font-size: 0.8rem; }

/* 24.9.6 (S5) — kart çubuğunda ASIL İŞ düğmesi (`.kart-ana-is`: Onay Bekleyen'de "Onayla", Tamir Bekleyen'de "Tamamla"). Her kartta aynı yer:
   çubuğun sağ ucu; sağ kenarı üstteki İncele / ⋯ düğmeleriyle aynı hizada (çubuğun sağ boşluğu üst çubuğunkine eşitlendi). Renkler rozetle
   aynı ton değişkenlerinden (.rz-*) → açık temada koyulaşır; vurgu zemini + beyaz yazı YOK. Metin uzarsa çubuktaki yazı kısalır (…), düğme
   asla alt satıra düşmez. */
.card-body-toggle { padding: 8px 15px 8px 20px; }
.card-body-toggle .kart-cubuk-metin { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
    .card-body-toggle { padding: 6px 12px; }
}
.kart-ana-is,
.kart-yan-is {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    min-width: 10em;   /* "Onayla" ile "Tamamla" aynı genişlik — her kartta sol kenar da aynı hizada (simetri) */
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--rz-c);
    background: var(--rz-z);
    color: var(--rz-y);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}
.kart-ana-is i,
.kart-yan-is i { font-size: 0.95rem; }
.kart-ana-is:hover,
.kart-yan-is:hover { filter: brightness(1.12); }
.kart-ana-is:focus-visible,
.kart-yan-is:focus-visible { outline: 2px solid var(--rz-y); outline-offset: 2px; }
@media (pointer: coarse) {
    .kart-ana-is,
    .kart-yan-is { height: auto; min-height: 40px; min-width: 10em; padding: 0 16px; font-size: 0.78rem; }
}
/* 24.9.7 (cila P2, Tolga: "tasarımlarda simetriye özen göster") — aynı kararın düğmeleri kart çubuğunda TEK grupta: Onay Bekleyen [Reddet][Onayla],
   Tamir Bekleyen [Reddet][TAMİRDE / TAMİRDEN ÇIKAR][Tamamla]. Ana iş (.kart-ana-is, ton zemini) her zaman EN SAĞDA; yan işler (.kart-yan-is)
   İKİNCİL: zemin yok, yalnız ton kenar + yazı, aynı boy / aynı en az genişlik. "Tamirde" açıkken düğme basılı (aria-pressed, ton zemini).
   Telefonda (≤600 px) grup çubuğun ALTINDA tam genişlik iki eşit sütun; üç düğmede ana iş alt satırda tam genişlik (simetri, ≥ 40 px). */
.kart-is-grup {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.kart-is-grup > .kart-ana-is,
.kart-is-grup > .kart-yan-is { margin-left: 0; }
.kart-yan-is { background: transparent; }
.kart-yan-is[aria-pressed="true"] { background: var(--rz-z); }
.kart-ana-is > span,
.kart-yan-is > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
    .card-body-toggle { flex-wrap: wrap; row-gap: 8px; }
    .card-body-toggle > .kart-is-grup {
        flex: 1 1 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .kart-is-grup > .kart-ana-is,
    .kart-is-grup > .kart-yan-is { width: 100%; min-width: 0; height: auto; min-height: 36px; white-space: normal; line-height: 1.15; padding-top: 4px; padding-bottom: 4px; }
    .kart-is-grup > button > span { white-space: normal; text-align: center; }   /* uzun ad ("TAKE OUT OF REPAIR") kesilmez, iki satıra sarar */
    .kart-is-grup.kart-is-uc > .kart-ana-is { grid-column: 1 / -1; }
}
@media (max-width: 600px) and (pointer: coarse) {
    .kart-is-grup > .kart-ana-is,
    .kart-is-grup > .kart-yan-is { min-height: 40px; }
}

/* 24.9.6 (S5) — DOKUNMATİKTE kart içi küçük hedefler ≥ 40 × 44 (Apple HIG). Genişliğe değil GİRDİ TÜRÜNE bakar (pointer: coarse) — masaüstünde
   fare için kompakt ölçüler aynen kalır. Ölçülen eski boylar: PTI düzenle kalemi 24 × 24, stok hücresi (seçici / adet / DÜŞ / barkod) 24 px,
   DÜŞ yazısı 0.55rem, stok geri al 1px 3px dolgu, kalem çöp kutusu 32 px, iş akışı 36 px, ⋯ menü satırı ~37 px.
   Satır içi stilde yazılan font-size / padding'i ezmek için yalnız orada !important. */
@media (pointer: coarse) {
    .kart-pti-duzenle { width: auto; height: auto; min-width: 44px; min-height: 40px; }
    .pti-yika-btn { min-height: 40px; min-width: 44px; justify-content: center; padding: 0 12px !important; }
    #report-list .pti-yikandi a { display: inline-block; padding: 6px 4px; }
    .stock-cell-row { gap: 6px !important; }
    .stock-cell-row select,
    .stock-cell-row input { height: 40px; font-size: 0.8rem !important; }
    .stock-cell-row .btn,
    .stock-cell-row button { height: 40px; min-width: 44px; padding: 0 10px !important; font-size: 0.75rem !important; }
    .kart-stok-geri { min-width: 44px; min-height: 40px; padding: 0 10px !important; font-size: 0.8rem !important; }
    .kart-kalem-sil { height: 40px; min-width: 44px; }
    .workflow-btn-group .btn { height: 44px; }
    .card-overflow-menu button { min-height: 44px; }
}
/* DÜŞ yazısı sabit limon (#c8e600) — açık temada zemine karışıyordu (kontrast 1,3) */
body.light-mode .kart-stok-dus { color: #3f6212 !important; border-color: rgba(63, 98, 18, 0.45) !important; }

/* 24.9.6 (S3) — ≈ TL etiketleri (kart fiyat hücresindeki `.card-total-tl`, gider satırındaki öneri `.cost-suggest-chip`) sabit limon
   (#c8e600, %85 opaklık) — açık temada beyaz zemine karışıyordu (kontrast ≈ 1,3). Açık temada DÜŞ ile aynı koyu limon (#3f6212, ≈ 7:1);
   koyu tema aynen kalır. */
body.light-mode .card-total-tl { color: #3f6212; background: rgba(101, 163, 13, 0.10); border-color: rgba(63, 98, 18, 0.35); }
body.light-mode .cost-suggest-chip { color: #3f6212; background: rgba(101, 163, 13, 0.10); border-color: rgba(63, 98, 18, 0.45); }
body.light-mode .cost-suggest-chip:hover { background: rgba(101, 163, 13, 0.18); border-color: rgba(63, 98, 18, 0.65); box-shadow: 0 2px 8px rgba(63, 98, 18, 0.15); }
/* 24.9.6 (S3) — İncele alt çubuğu artık 4 düğme (Excel TR · Excel EN · PDF · Düzenle). Eşit paylaşımda (flex 1 1 0) 390 px'te "EXCEL …"
   kesiliyordu (yazı 58–59 px, düğme içi 58 px). En dar ekranda düğme yazısına göre paylaşılır: kısa "PDF" daralır, Excel'ler sığar. */
@media (max-width: 420px) {
    #preview-modal .modal-footer .btn { flex: 1 1 auto; letter-spacing: 0; padding-left: 5px !important; padding-right: 5px !important; }
}

/* ════════ 24.9.6 (S4) ORTAK PENCERE — `_pencere` / `_pencereBaslik` (app.js) ════════
   Kontroller ailesi (Kontroller, Mail kutusu, Wan Hai, Lojilog otomatik işler, Konteyner kartı, Hasar / PTI işaretleri) aynı kabuk:
   zemin + panel HER temada sabit koyu (renkler sabit — tema değişkeni YOK), sayfa (zemin) kaydırması + yapışkan başlık, ✕ sağ üstte,
   tek ana düğme rengi (.mc-ana-dg #2563eb). Sınıf seçicileri bilerek: ≤430 px `[style*="display:flex"][style*="gap"] { flex-wrap:wrap }`
   kuralı satır içi flex başlığı kırıp ✕'i alt satıra atabiliyordu.
   `div.mc-pencere` (0,1,1) dosya başındaki `div[id$="-overlay"]` (0,1,1) kuralından SONRA gelir → padding bu kuralın; iOS ana ekran
   uygulamasındaki çentik boşluğu (@WP-03b, !important) korunur. Telefon etiket istisnası ve açık tema girdi kuralı `.mc-pencere-panel`e bağlı
   (yalnız görünüşü geçmiş pencereler — `_pencereKaydet` ile yalnız davranışı bağlanan tema pencereleri ETKİLENMEZ). */
div.mc-pencere {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    padding-top: max(24px, env(safe-area-inset-top, 0px));
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, 0.75);
    color: #e2e8f0;
    outline: none;
}
.mc-pencere-panel {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    background: #161b22;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    text-align: left;
}
.mc-pencere-panel.mc-g-kucuk { max-width: 480px; }
.mc-pencere-panel.mc-g-orta { max-width: 760px; }
.mc-pencere-panel.mc-g-genis { max-width: 980px; }
.mc-pencere-panel.mc-g-tam { max-width: 1180px; }
/* Kısa iletişim penceresi: yer varsa dikeyde ORTADA, uzunsa üstten başlar ve zemin kayar (align-items:center taşanın üstünü keserdi) */
div.mc-pencere.mc-ortala > .mc-pencere-panel { margin: auto; }
.mc-pencere-baslik {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: #161b22;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px 18px 0 0;
}
.mc-pencere-ikon { flex: 0 0 auto; font-size: 1.4rem; line-height: 1; }
.mc-pencere-ad { flex: 1 1 auto; min-width: 0; }
.mc-pencere-ad1 { font-size: 1rem; font-weight: 800; line-height: 1.25; color: #f1f5f9; overflow-wrap: anywhere; }
.mc-pencere-ad2 { margin-top: 2px; font-size: 0.72rem; line-height: 1.4; color: #9ca3af; }
.mc-pencere-govde { padding: 14px 18px; }
.mc-pencere-dip {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    background: #161b22;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 18px 18px;
}
.mc-kapat {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #1f2937;
    color: #e5e7eb;
    border: 1px solid #475569;
    border-radius: 9px;
    font-family: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.mc-kapat:hover:not(:disabled) { background: #334155; }
.mc-kapat:disabled { opacity: 0.45; cursor: wait; }
/* Düğmeler — sabit renkler (vurgu rengi zemin + beyaz yazı YOK: temaların yarısında vurgu açık renk). Beyaz yazı kontrastı:
   ana #2563eb 5,17 · onay #15803d 5,02 · tehlike #b91c1c 6,47 (WCAG AA ≥ 4,5). */
.mc-dg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    margin: 0;
    padding: 6px 12px;
    box-sizing: border-box;
    border-radius: 9px;
    border: 1px solid #475569;
    background: #1f2937;
    color: #e5e7eb;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    cursor: pointer;
}
.mc-dg:hover:not(:disabled) { background: #273449; }
.mc-dg:disabled { opacity: 0.5; cursor: not-allowed; }
.mc-dg[aria-busy="true"] { cursor: wait; }
.mc-dg.mc-ana-dg { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.mc-dg.mc-ana-dg:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }
.mc-dg.mc-onay-dg { background: #15803d; border-color: #15803d; color: #ffffff; }
.mc-dg.mc-onay-dg:hover:not(:disabled) { background: #166534; border-color: #166534; }
.mc-dg.mc-tehlike-dg { background: #b91c1c; border-color: #b91c1c; color: #ffffff; }
.mc-dg.mc-tehlike-dg:hover:not(:disabled) { background: #991b1b; border-color: #991b1b; }
.mc-dg.mc-buyuk { min-height: 42px; padding: 10px 20px; border-radius: 11px; font-size: 0.95rem; font-weight: 800; }
/* 24.9.9 Otomatik işler: tek seçimli kip düğmeleri (Elle | Deneme | Otomatik) — `_otoSecimHtml`. Sabit renkler (pencere zemini her temada koyu);
   seçili: Elle gri · Deneme kehribar · Otomatik yeşil, beyaz yazı (kontrast ≥ 4,5). Kilitli (co_admin) seçim de görünür kalır. */
.mc-secim { display: inline-flex; flex-wrap: nowrap; border: 1px solid #475569; border-radius: 9px; overflow: hidden; background: #111827; vertical-align: middle; }
.mc-secim > button {
    margin: 0; padding: 6px 12px; min-height: 32px; box-sizing: border-box; border: 0; border-left: 1px solid #334155; border-radius: 0;
    background: transparent; color: #cbd5e1; font-family: inherit; font-size: 0.76rem; font-weight: 700; line-height: 1.2;
    text-transform: none; letter-spacing: normal; white-space: nowrap; cursor: pointer;
}
.mc-secim > button:first-child { border-left: 0; }
.mc-secim > button:hover:not(:disabled):not([aria-checked="true"]) { background: #1f2937; color: #f1f5f9; }
.mc-secim > button[aria-checked="true"] { color: #ffffff; }
.mc-secim > button.mc-secim-elle[aria-checked="true"] { background: #475569; }
.mc-secim > button.mc-secim-deneme[aria-checked="true"] { background: #b45309; }
.mc-secim > button.mc-secim-oto[aria-checked="true"] { background: #15803d; }
.mc-secim > button:disabled { cursor: not-allowed; }
.mc-secim > button:disabled:not([aria-checked="true"]) { opacity: 0.5; }
.mc-secim > button:focus-visible { outline: 2px solid #93c5fd; outline-offset: -2px; }
@media (pointer: coarse) { .mc-secim > button { min-height: 40px; padding: 8px 14px; } }
/* İnceleme U5 (simetri): masaüstünde de iki seçenekli (Marintek) ve üç seçenekli (Lojilog) seçiciler AYNI genişlikte, düğmeler eşit sütun —
   sağa yaslı satırlarda sol kenarlar hizalı. 3 × 96 px: en uzun ad ("Automatic") dokunmatikte de sığar. */
@media (min-width: 601px) {
    #oto-kutu .oto-secim-kap { flex: 0 0 288px !important; width: 288px; }
    #oto-kutu .oto-secim-kap > .mc-secim { display: flex; width: 100%; box-sizing: border-box; }
    #oto-kutu .oto-secim-kap > .mc-secim > button { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; text-align: center; }
}
/* Telefonda Otomatik işler satırlarının seçimi tam genişlik, düğmeler eşit (simetri — iki ve üç seçenekli satırlar aynı hizada) */
@media (max-width: 600px) {
    #oto-kutu .oto-secim-kap { flex: 1 1 100% !important; margin-left: 0 !important; }
    #oto-kutu .oto-secim-kap > .mc-secim { display: flex; width: 100%; }
    #oto-kutu .oto-secim-kap > .mc-secim > button { flex: 1 1 0; }
}
.mc-kapat:focus-visible, .mc-dg:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
/* 25.0.1 "ⓘ Nasıl çalışır" — `_bilgiDg` (app.js). Kendi zemini olan sabit renkli hap: koyu pencerede de, açık temalı sayfada (Ayarlar, Stok) da okunur
   (#bfdbfe / #172554 kontrast 11,8). Yazı telefonda da görünür (yalnız ⓘ değil); dokunmatikte 40 px. Başlıkta ✕'in solunda (flex öğesi, ezilmez). */
.mc-bilgi-dg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    min-height: 30px;
    margin: 0;
    padding: 4px 11px 4px 8px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid #3b82f6;
    background: #172554;
    color: #bfdbfe;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mc-bilgi-dg i { font-size: 1.05rem; line-height: 1; color: #93c5fd; }
.mc-bilgi-dg:hover { background: #1e3a8a; color: #ffffff; }
.mc-bilgi-dg:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.mc-bilgi-dg.mc-bilgi-kisa { min-height: 28px; padding: 3px 10px 3px 7px; font-size: 0.7rem; }
.mc-bilgi-dg.mc-bilgi-sag { margin-left: auto; }
/* Sekme çubuğunun alt çizgisine değmesin (Toplu Faturalama — sekmelerin alt kenarı çizgide) */
#bulk-inv-tabs > .mc-bilgi-dg { margin-bottom: 4px; }
/* Dokunmatik: 40 px — pencere içi düğmelerle (.mc-dg, #kontrol-kutu button …) aynı boy, her pencerede aynı görünüm (simetri) */
@media (pointer: coarse) {
    .mc-bilgi-dg, .mc-bilgi-dg.mc-bilgi-kisa { min-height: 40px; padding: 6px 12px 6px 9px; }
}
@media (max-width: 600px) {
    .mc-bilgi-dg { font-size: 0.7rem; }
}
/* Bilgi penceresinin metni (sabit koyu panel) */
.mc-bilgi-metin { font-size: 0.86rem; line-height: 1.6; color: #e2e8f0; }
.mc-bilgi-metin p { margin: 0 0 10px; }
.mc-bilgi-metin p:last-child, .mc-bilgi-metin ul:last-child { margin-bottom: 0; }
.mc-bilgi-metin ul { margin: 0 0 10px; padding-left: 20px; }
.mc-bilgi-metin li { margin: 3px 0; }
.mc-bilgi-metin b { color: #f8fafc; }
/* Pencere içindeki portal tarih satırı (tema renkleri açık temada koyu yazı) — eskiden yalnız Konteyner kartında satır içi <style> */
.mc-pencere-panel .portal-tarih { color: #94a3b8 !important; }
.mc-pencere-panel .portal-tarih .pt-firma { color: #e2e8f0 !important; }
@media (max-width: 600px) {
    div.mc-pencere { padding: 12px 8px 16px; padding-top: max(12px, env(safe-area-inset-top, 0px)); }
    .mc-pencere-panel { border-radius: 14px; }
    .mc-pencere-baslik { padding: 12px 14px; border-radius: 14px 14px 0 0; }
    .mc-pencere-govde { padding: 12px 14px; }
    .mc-pencere-dip { padding: 10px 14px; border-radius: 0 0 14px 14px; }
}
/* Dokunmatik (genişliğe değil girdi türüne bakar) */
@media (pointer: coarse) {
    .mc-kapat { width: 42px; height: 42px; }
    .mc-dg { min-height: 40px; }
}
/* Açık tema: koyu pencerede girdiler sabit açık yazı (genel `body.light-mode input { color:#1a1a1a !important }` koyu zemine koyu yazı veriyordu) */
body.light-mode .mc-pencere-panel :is(input, select, textarea) {
    background: #111827 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}
body.light-mode .mc-pencere-panel :is(input, textarea)::placeholder {
    color: #6b7280 !important;
}
/* ════════ 25.0.1 SABİT KOYU KABUK (.mc-koyu-kabuk, app.js pencere oluştururken ekler) ════════
   Zemini her temada koyu olan ESKİ pencereler: Akıllı Bildirimler, Alan Seçenekleri, Uygulama Kılavuzu, AI Asistan, Toplu Rapor Çek,
   Arşiv, Kit oluştur, Portaldan Çek, portal / şablon / etiket / çevrimdışı pencereleri. Açık temada yazı tema değişkeninden KOYU
   geliyordu (koyu zemine koyu yazı) ve içteki .glass kart / düğme açık zemine dönüyordu (açık zemine sabit açık renkli yazı).
   Kabuk yalnız AÇIK temada alt ağacın tema değişkenlerini koyu temanın değerlerine sabitler ve açık temaların .glass / .btn /
   girdi kurallarını geri alır — koyu temalarda hiçbir şey değişmez. Kontroller ailesi (.mc-pencere-panel) zaten sabit koyudur. */
body.light-mode .mc-koyu-kabuk {
    --primary-bg: #121214; --glass-bg: rgba(30, 30, 35, 0.5); --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #f0f0f0; --text-muted: #a1a1aa; --text-primary: #f0f0f0; --text-secondary: #cbd5e1; --text-faint: #94a3b8;
    --bg-card: #1a1a1e; --bg-secondary: #1e293b; --surface: #1f2937; --surface-alt: #273244; --surface-hover: #2b3546;
    --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.24); --on-accent: #111827;
    --accent-blue: #b3840e; --accent-purple: #c99520; --accent-green: #34d399; --accent-orange: #fb923c; --accent-red: #f87171;
    --accent-terracotta: #e2725b; --accent-yellow: #fbbf24; --accent-cyan: #22d3ee;
    color: var(--text-main);
}
body.light-mode .mc-koyu-kabuk .glass:not(.btn) {
    background: rgba(30, 30, 35, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}
body.light-mode .mc-koyu-kabuk .btn:not([style*="background"], .btn-primary, .btn-danger, .mc-vurgu-dg) {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
}
body.light-mode .mc-koyu-kabuk .btn { color: #e2e8f0; }   /* satır içi renk (ör. kırmızı Kapat) yine geçer */
body:is([data-theme="saha-light"], [data-theme="mono-light"]) .mc-koyu-kabuk .btn:not([style*="background"], .btn-primary, .btn-danger, .mc-vurgu-dg) { color: #e2e8f0 !important; }
body.light-mode .mc-koyu-kabuk :is(input, select, textarea) {
    background: #111827 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}
body.light-mode .mc-koyu-kabuk :is(input, textarea)::placeholder { color: #6b7280 !important; }
body.light-mode .mc-koyu-kabuk :is(h1, h2, h3, h4) { color: inherit; }
/* 25.0.1 — VURGU DÜĞMESİ (seçili seçenek / ana eylem): vurgu renginin %45 koyusu + beyaz yazı (`.srv-btn-ana` kalıbı), renk
   seçilebilir: `--dg-renk` (varsayılan --accent-blue). `--accent-*` zemin + beyaz yazı açık vurgulu temalarda (liman-dark sarı
   #F4D03F, açık mavi/yeşil) okunmuyordu (§7). Özgüllük, temaların `.btn.glass` !important kurallarını (saha / mono) yener. */
body :is(button, a, span, div).mc-vurgu-dg.mc-vurgu-dg.mc-vurgu-dg {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--dg-renk, var(--accent-blue)) !important;
    color: #fff !important;
    border-color: transparent !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
body :is(button, a, span, div).mc-vurgu-dg.mc-vurgu-dg.mc-vurgu-dg:hover {
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), var(--dg-renk, var(--accent-blue)) !important;
}
/* 25.0.1 — Telefonda İşaretler (Lojilog işaretleri bölümleri, [data-kaydir]) ve Numara yapıştır (#is-yap-liste) tabloları: satır BLOK
   (kart kalem tablosu kalıbı, 24.9.6). 480 px tablo 334 px kutuda yana kayıyor, "Hasarlı + Arızalı" ve depoya giriş sütunu kesiliyordu.
   1. satır: seçim kutusu + konteyner no; diğer hücreler alt alta, kutunun hizasından girintili. WhatsApp / PTI OK sekmeleri kapsam dışı. */
@media (max-width: 600px) {
    #isaret-overlay :is([data-kaydir], #is-yap-liste) :is(table, tbody) { display: block; width: 100%; min-width: 0 !important; }   /* genel telefon `table { min-width: 700px }` */
    #isaret-overlay #is-yap-liste thead { display: none; }
    #isaret-overlay #is-yap-liste > div { overflow-x: visible !important; }
    #isaret-overlay :is([data-kaydir], #is-yap-liste) tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 3px; padding: 7px 2px; }
    #isaret-overlay :is([data-kaydir], #is-yap-liste) td { display: block; box-sizing: border-box; min-width: 0; max-width: 100%; border: 0 !important; padding: 0 !important; width: auto !important; white-space: normal !important; overflow-wrap: anywhere; }
    #isaret-overlay :is([data-kaydir], #is-yap-liste) td:nth-child(2) { white-space: nowrap !important; }
    #isaret-overlay :is([data-kaydir], #is-yap-liste) td:nth-child(n+3) { flex: 1 1 100%; padding-left: 26px !important; }
    #isaret-overlay :is([data-kaydir], #is-yap-liste) td:empty { display: none; }
    #isaret-overlay #is-yap-liste td[data-et]::before { content: attr(data-et) ": "; color: #9ca3af; }
}
/* 25.0.1 — Dokunmatikte küçük hedefler (girdi türüne bakar, genişliğe değil): Mail kutusu sekme / düğmeleri 20 px, Toplu Faturalama
   süzgeçleri 24 px, Geçmiş Düzenle / Sil 19 px, Tarife ✏️ / 🗑️ 23 px → en az 34 px. Satır içi simge düğmeleri (Kopyala, Numarayı düzelt,
   PTI listesi; 13–17 px) 34 px kutu alır, dikey eksi kenar boşluğuyla satır yüksekliği değişmez (yatayda eksi pay YOK — yan yana simgeler üst üste binerdi) (konteyner kartı .kk-dg: 24.9.5 kuralı). */
@media (pointer: coarse) {
    #mt-kutu button, #kk-kutu .mc-pencere-baslik button, #bulk-inv-filters button, #pf-kutu button, #inv-history-table button,
    #tariff-tabs button, #tariff-overlay .tt-actions button, #tariff-overlay span > button, #derived-tariff-modal button,
    #ai-clear-history-btn, #stk-rapor .stk-link, .pti-yikama-serit button, #isaret-overlay button[data-wa-bek] { min-height: 34px; }
    #tariff-tabs button, #tariff-overlay .tt-actions button, #tariff-overlay span > button, #derived-tariff-modal button { min-width: 34px; }
    button[data-copy][style*="background:none"], button.ptk-dg, #mt-kutu button[style*="background:none"] {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 34px; min-height: 34px; margin: -10px 0; vertical-align: middle;
    }
}
/* 25.0.1: "Nasıl çalışır" düğmesi dokunmatikte her pencerede AYNI boy (40 px — simetri); yukarıdaki 34 px pencere kuralları (#kk-kutu başlık,
   #mt-kutu) onu ezmesin. Özgüllük (1,1,1) + sonra gelir. */
@media (pointer: coarse) {
    :is(#kk-kutu, #mt-kutu) button.mc-bilgi-dg { min-height: 40px; }
}
/* Konteyner kartındaki "MerCont kayıtları" satırı (24.9.6 S3 — satıra tıklayınca İncele) — sabit koyu panelde fare / klavye vurgusu */
#kk-kutu .kk-kayit:hover, #kk-kutu .kk-kayit:focus-visible { background: rgba(96,165,250,0.12); outline: none; }
/* 24.9.6 (S3-6): İncele başlığındaki konteyner kartı simgesi başlık boyunda (satır içi 0.9em başlığın dışında ~16 px kalıyordu); açık temada koyu mavi */
#preview-kk .kk-dg { font-size: 1.35rem !important; padding: 2px 6px !important; border-radius: 8px; }
#preview-kk .kk-dg:hover, #preview-kk .kk-dg:focus-visible { background: rgba(96,165,250,0.14) !important; outline: none; }
body.light-mode #preview-kk .kk-dg { color: #1d4ed8 !important; }
/* 24.9.6 (S3-6): kart gövdesi ve İncele'deki depo / portal satırlarının sabit renkleri koyu temaya göre — açık zeminde aynı tonun koyusu
   (onay yeşili #4ade80 beyazda ~1,9 kontrast). Konteyner kartı (.mc-pencere-panel) her temada koyu → kapsam dışı. */
body.light-mode :is(#preview-body, .report-card) :is(.portal-tarih, .depo-hareket) [style*="#4ade80"] { color: #15803d !important; }
body.light-mode :is(#preview-body, .report-card) :is(.portal-tarih, .depo-hareket) [style*="#34d399"] { color: #047857 !important; }
body.light-mode :is(#preview-body, .report-card) :is(.portal-tarih, .depo-hareket) [style*="#fbbf24"] { color: #92400e !important; }
body.light-mode :is(#preview-body, .report-card) :is(.portal-tarih, .depo-hareket) [style*="#f87171"] { color: #b91c1c !important; }
/* 24.9.6 — İncele alt düğme çubuğu (Excel TR · Excel EN · PDF · Düzenle) dokunmatikte ölçülen 32 px'ti → en az 40 px (Apple HIG yönünde).
   Genişliğe değil girdi türüne bakar; masaüstünde .btn'in 32 px'i aynen kalır. */
@media (pointer: coarse) {
    #preview-modal .modal-footer .btn { height: auto; min-height: 40px; }
}

/* 24.9.6 (inceleme A1) — Birime taşı: iki bölümün düğmesi (KALEMLERİ AYIR · RAPORU TAŞI) aynı boy ve İKİNCİL görünüm (yan yana iki büyük
   birincil düğme yoktu ama ikisi de vurgu zeminliydi — biri tek tıkla, onaysız taşıyordu). Zemin `btn glass`, yazı tema metni; simge turuncu. */
#manual-transfer-modal .mt-is-dg { width: 100%; height: 46px; margin-top: 14px; display: flex; justify-content: center; align-items: center; gap: 8px;
    font-weight: 800; font-size: 0.95rem; border-radius: 12px; color: var(--text-main); border: 1px solid var(--glass-border); }
#manual-transfer-modal .mt-is-dg i { color: var(--accent-orange); }
#manual-transfer-modal .mt-is-dg:disabled { opacity: 0.45; cursor: not-allowed; }
/* 24.9.7 (cila P3) — Birime taşı başlığı: genel `.modal-header` dolgusu (30 / 22 / 18 px) içeriğin kendi dolgusuna EKLENİP başlığın üstünde ~55 px
   boşluk bırakıyordu. Ortak pencere başlığı düzeni (`_pencereBaslik`): simge + ad solda, ✕ sağda (36 px, dokunmatikte 42), altında ince çizgi.
   Statik tema penceresi — renkler temadan (`.mc-pencere-baslik` sabit koyu zemin taşıdığı için sınıfı ödünç alınmaz). */
#manual-transfer-modal .mt-baslik { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 0 0 12px; margin: 0 0 16px; }
#manual-transfer-modal .mt-baslik h2 { margin: 0; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 800;
    line-height: 1.25; color: var(--accent-blue); }
#manual-transfer-modal .mt-baslik h2 i { font-size: 1.3rem; flex: 0 0 auto; }
#manual-transfer-modal .mt-kapat { flex: 0 0 auto; width: 36px; height: 36px; min-width: 36px; padding: 0 !important; margin: 0;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 1.05rem; }
@media (pointer: coarse) {
    #manual-transfer-modal .mt-kapat { width: 42px; height: 42px; min-width: 42px; }
}

/* 24.9.6 (inceleme D1) — TELEFONDA kart başlığının gider satırı (.cost-inline-row) taşmasın. ≤768 px'te `.card-top-right` YATAY (fiyat +
   düğmeler | gider satırı yan yana) — 390 px'te gider satırı sağdan kesiliyordu ("MARİNTEK TUTAR (" · kutular kırpık), %130 yakınlaştırmada hiç
   görünmüyordu. ≤600 px: gider satırı fiyat / düğme satırının ALTINDA tam genişlik (sarar; etiket kesilmez). Tablet ve masaüstü değişmez. */
@media (max-width: 600px) {
    .card-top-right { flex-wrap: wrap !important; }
    .card-top-right > .cost-inline-row { flex: 1 1 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
    .cost-inline-row > * { min-width: 0; max-width: 100%; }
    .cost-inline-row .gider-firma-kutu { flex: 1 1 110px !important; }
    /* kart çubuğundaki "3 Hasar kaydı · İş akışı" yakınlaştırmada "3 Hasar ka…" diye kesiliyordu — iki satıra sarar */
    .card-body-toggle .kart-cubuk-metin { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
}
/* ≤900 px genel `.glass { padding: 16px !important }` kuralı gider satırının seçicilerine de (para birimi / personel / OT işlem — class="glass")
   iniyordu: 30–40 px kutuda yazı kesiliyordu (tablette para birimi "TL" yerine "-" görünüyordu). Masaüstü değişmez. */
@media (max-width: 900px) {
    .cost-inline-row select.glass { padding: 2px 6px !important; }
}
/* Dokunmatikte gider satırının kutuları ≥ 40 px (girdi türüne bakar — masaüstünde 30 px aynen) */
@media (pointer: coarse) {
    .cost-inline-row .cost-inline-input,
    .cost-inline-row select,
    .cost-inline-row input { height: 40px !important; min-height: 40px; box-sizing: border-box; }
    .cost-inline-row .cost-suggest-chip { min-height: 40px; }
}

/* ════════ 24.9.7 HAVA — üst çubuk çipi (#hava-cip) · hava paneli (#hava-overlay, ortak kabuk) · Ayarlar eşik ızgarası ════════
   Çip header'ın içinde, `.header-right-actions` başında (app.js ekler). Çipte backdrop-filter YOK (iOS §7). Renkler SABİT — vurgu
   değişkeni kullanılmaz: koyu temalarda koyu hap, açık temalarda (body.light-mode) beyaz hap; seviye etiketi sarı / turuncu / kırmızı sabit
   tonlarda. Dar ekranda (≤ 600 px) yalnız "27°" (+ uyarı varsa seviye renginde uyarı simgesi). Panel her temada koyu (ortak kabuk). */
.hava-cip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;          /* yer yetmezse önce çip daralır (yer adı / uyarı etiketi kısalır) — kullanıcı bilgisi ve bağlantı rozeti ezilmez */
    min-width: 0;
    height: 34px;
    max-width: min(440px, 46vw);
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid #2f3a48;
    background: #161b22;
    color: #e6e9ee;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.hava-cip[hidden] { display: none !important; }
.hava-cip:hover { border-color: #475569; }
.hava-cip:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.hava-cip-ikon { flex: 0 0 auto; font-size: 1.05rem; }
.hava-cip-isaret { display: none; flex: 0 0 auto; font-size: 1rem; }
.hava-cip-derece { flex: 0 0 auto; }
.hava-cip-yer { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #8b95a5; font-weight: 600; }  /* daralırken önce yer adı gider, uyarı etiketi en son */
.hava-cip-uyari { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 4px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; }
.hava-cip.hava-bayat .hava-cip-derece { color: #8b95a5; }
/* uyarı listesi 3 saatten eski: etiket + ⚠ gri, çerçeve nötr (seviye kuralları daha az özgül — !important) */
.hava-cip.hava-uyari-bayat { border-color: #2f3a48 !important; }
.hava-cip.hava-uyari-bayat .hava-cip-uyari { background: #1f2630 !important; color: #8b95a5 !important; }
.hava-cip.hava-uyari-bayat .hava-cip-isaret { color: #8b95a5 !important; }
body.light-mode .hava-cip.hava-uyari-bayat { border-color: rgba(0, 0, 0, 0.14) !important; }
body.light-mode .hava-cip.hava-uyari-bayat .hava-cip-uyari { background: #f1f5f9 !important; color: #6b7280 !important; }
body.light-mode .hava-cip.hava-uyari-bayat .hava-cip-isaret { color: #6b7280 !important; }
.hava-cip[data-seviye="sari"] .hava-cip-uyari { background: #3a2a07; color: #fbbf24; }
.hava-cip[data-seviye="turuncu"] .hava-cip-uyari { background: #431a07; color: #fb923c; }
.hava-cip[data-seviye="kirmizi"] .hava-cip-uyari { background: #450a0a; color: #f87171; }
.hava-cip[data-seviye="sari"] { border-color: #854d0e; }
.hava-cip[data-seviye="turuncu"] { border-color: #9a3412; }
.hava-cip[data-seviye="kirmizi"] { border-color: #991b1b; }
.hava-cip[data-seviye="sari"] .hava-cip-isaret { color: #fbbf24; }
.hava-cip[data-seviye="turuncu"] .hava-cip-isaret { color: #fb923c; }
.hava-cip[data-seviye="kirmizi"] .hava-cip-isaret { color: #f87171; }
body.light-mode .hava-cip { background: #ffffff; color: #1f2937; border-color: rgba(0, 0, 0, 0.14); }
body.light-mode .hava-cip:hover { border-color: rgba(0, 0, 0, 0.3); }
body.light-mode .hava-cip-yer,
body.light-mode .hava-cip.hava-bayat .hava-cip-derece { color: #6b7280; }
body.light-mode .hava-cip[data-seviye="sari"] .hava-cip-uyari { background: #fef3c7; color: #92400e; }
body.light-mode .hava-cip[data-seviye="turuncu"] .hava-cip-uyari { background: #ffedd5; color: #9a3412; }
body.light-mode .hava-cip[data-seviye="kirmizi"] .hava-cip-uyari { background: #fee2e2; color: #b91c1c; }
body.light-mode .hava-cip[data-seviye="sari"] { border-color: #d97706; }
body.light-mode .hava-cip[data-seviye="turuncu"] { border-color: #ea580c; }
body.light-mode .hava-cip[data-seviye="kirmizi"] { border-color: #dc2626; }
body.light-mode .hava-cip[data-seviye="sari"] .hava-cip-isaret { color: #b45309; }
body.light-mode .hava-cip[data-seviye="turuncu"] .hava-cip-isaret { color: #c2410c; }
body.light-mode .hava-cip[data-seviye="kirmizi"] .hava-cip-isaret { color: #b91c1c; }
@media (max-width: 900px) { .hava-cip-yer { display: none; } }
@media (max-width: 600px) {
    .hava-cip { gap: 4px; padding: 0 9px; }
    .hava-cip-uyari, .hava-cip-ikon { display: none; }
    .hava-cip-isaret { display: inline-block; }
}
@media (pointer: coarse) { .hava-cip { height: 40px; } }

/* ════════ 24.9.7 ÜST ÇUBUK — BAĞLANTI ROZETİ + HAVA ÇİPİ. Hava çipi kullanıcı bilgisini ~5 px'e sıkıştırıyordu: bağlantı rozeti 390'da kırpık,
   360'ta hiç görünmüyordu, çipin kendisi de soldan kesiliyordu (481–1024'te rozet sarılıp üst çubuğu 89 px'e uzatıyordu). Bağlantı / senkron
   göstergesi HER genişlikte görünür ve dokunulabilir (CLAUDE.md §7 ID token dersi).
   • Her genişlik: kullanıcı bilgisi içeriği kadar yer tutar, yer yetmezse önce hava çipi daralır (yer adı / uyarı etiketi kısalır — çip
     `flex: 0 1 auto`); rozet metni `.ssb-metin` (uzun) + `.ssb-kisa` (kısa: Canlı / Senkronize ediliyor… / Bağlantı yok / Takıldı).
   • ≤ 900 px: rozette kısa metin.
   • ≤ 600 px (TELEFON): ad / kur / tarih gizlenir, yalnız durum noktası kalır (yeşil canlı · turuncu senkron · kırmızı + kısa metin);
     satır simetrik — tüm denetimler 36 px yüksek, kare düğmeler 36 × 36; ≤ 400 px'te logo çekilir (sol küme sola, sağ küme sağa yaslı).
     Kırmızıyken (header.baglanti-kirmizi, _updateSyncBadge) hava çipi + logo çekilir — bağlantı yokken hava verisi zaten tazelenmez.
     ≤ 340 px'te çip çekilir. Ölçüm testi: scripts/kontrol-test/s_hava.js 9). */
.ssb-kisa { display: none; }
#user-info-compact { flex: 0 0 auto; }
/* "Modül Değiştir" yalnız ≥ 2 modüle erişene (app.js satır içi display:none yazar) — `.btn-logout-compact { display:flex !important }` onu
   ezip HERKESE gösteriyordu */
#btn-module-switch[style*="display: none"],
#btn-module-switch[style*="display:none"] { display: none !important; }
@media (max-width: 900px) {
    #sync-status-badge .ssb-metin { display: none; }
    #sync-status-badge .ssb-kisa { display: inline; }
}
@media (max-width: 600px) {
    header { padding-left: 6px !important; padding-right: 6px !important; }
    .header-main-grid { gap: 6px !important; padding: 0 !important; }
    .header-left-actions,
    .header-right-actions { gap: 4px !important; }
    .header-left-actions > .btn,
    .header-right-actions > .btn-logout-compact {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        justify-content: center;
    }
    #lang-switch-container .unit-toggle-container { width: 56px !important; height: 36px; }
    .logo { width: 36px; height: 36px; box-sizing: border-box; justify-content: center; }
    #user-info-compact { flex: 0 0 auto !important; padding-left: 0 !important; gap: 0 !important; overflow: visible; }
    #user-info-compact .user-info-inner { flex-direction: row; align-items: center; overflow: visible; }
    #active-user-name,
    #live-currency,
    #live-date { display: none !important; }
    #sync-status-badge:not(.hidden) {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 26px;
        height: 36px;
        margin: 0 !important;
        padding: 0 4px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: 0.7rem !important;
        line-height: 1;
        white-space: nowrap;
    }
    #sync-status-badge .ssb-metin,
    #sync-status-badge .ssb-kisa { display: none; }
    #sync-status-badge .ssb-nokta { font-size: 0.95rem; line-height: 1; }
    #sync-status-badge[data-durum="kirmizi"] { gap: 4px; padding: 0 9px; border-color: rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.14); }
    #sync-status-badge[data-durum="kirmizi"] .ssb-nokta { font-size: 0.7rem; }
    #sync-status-badge[data-durum="kirmizi"] .ssb-kisa { display: inline; font-weight: 800; }
    body.light-mode #sync-status-badge[data-durum="kirmizi"] { color: #b91c1c !important; background: #fee2e2; border-color: #f87171; }
    .hava-cip { height: 36px; gap: 3px; padding: 0 8px; }
    header.baglanti-kirmizi #hava-cip,
    header.baglanti-kirmizi .logo { display: none !important; }
    header.baglanti-kirmizi .header-main-grid { grid-template-columns: auto 1fr !important; }
}
/* 24.9.8: ≤ 400 px'te logoyu, ≤ 340 px'te çipi SABİT kırılımla çekmek kaldırıldı — telefonda sığmayan öğeyi öncelik sırasıyla app.js
   `_ustSigdir` çeker (aşağıda "24.9.8 ÜST ÇUBUK"). Kırmızıyken ≤ 340 px'te "Modül Değiştir" çekilir (24.9.7, aynen). */
@media (max-width: 340px) { header.baglanti-kirmizi #btn-module-switch { display: none !important; } }

/* Panel (her temada koyu — renkler sabit) */
#hava-kutu .hv-govde { display: flex; flex-direction: column; gap: 18px; }
#hava-kutu section { min-width: 0; }
.hv-simdi { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hv-derece { display: flex; align-items: center; gap: 10px; font-size: 2.2rem; font-weight: 800; line-height: 1; color: #f1f5f9; font-variant-numeric: tabular-nums; }
.hv-derece i { font-size: 2.1rem; }
.hv-derece.hv-bayat, .hv-derece.hv-bayat i { color: #8b95a5 !important; }
.hv-simdi-bilgi { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 0.86rem; line-height: 1.35; color: #cbd5e1; }
.hv-ince { font-size: 0.76rem; color: #8b95a5; }
.hv-bayat-not { color: #fbbf24; }
.hv-bolum-bas { margin: 0 0 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.02em; text-transform: none; color: #93c5fd; }
.hv-not { border: 1px solid #6b5a1d; background: #211c0c; color: #f3d27a; border-radius: 10px; padding: 9px 12px; font-size: 0.8rem; line-height: 1.5; overflow-wrap: anywhere; }
.hv-bos { margin: 0; border: 1px solid #1f3b2c; background: #0f1f17; color: #86efac; border-radius: 10px; padding: 9px 12px; font-size: 0.82rem; }
.hv-bos-veri { margin: 0; color: #94a3b8; font-size: 0.86rem; }
.hv-uyarilar { display: flex; flex-direction: column; gap: 8px; }
.hv-uyari { display: flex; flex-direction: column; gap: 3px; border: 1px solid; border-radius: 10px; padding: 10px 12px; font-size: 0.84rem; line-height: 1.4; }
.hv-uyari[data-seviye="sari"] { border-color: #6b5a1d; background: #211c0c; color: #f3d27a; }
.hv-uyari[data-seviye="turuncu"] { border-color: #7c3a12; background: #2a1508; color: #fdba74; }
.hv-uyari[data-seviye="kirmizi"] { border-color: #7f1d1d; background: #2a0d0d; color: #fca5a5; }
.hv-uyari-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hv-uyari-bas b { font-size: 0.94rem; color: #f8fafc; }
.hv-rozet { padding: 3px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; }
.hv-uyari[data-seviye="sari"] .hv-rozet { background: #3a2a07; color: #fbbf24; }
.hv-uyari[data-seviye="turuncu"] .hv-rozet { background: #431a07; color: #fb923c; }
.hv-uyari[data-seviye="kirmizi"] .hv-rozet { background: #450a0a; color: #f87171; }
.hv-kalan { margin-left: auto; font-size: 0.78rem; font-weight: 800; }
.hv-uyari-zaman { font-weight: 700; }
.hv-uyari-alt { font-size: 0.74rem; opacity: 0.85; }
.hv-uyari-tavsiye { font-size: 0.78rem; color: #e2e8f0; }
.hv-tablo-kap { max-width: 100%; }
/* genel `table { min-width: 700px }` (≤ 768 px 480 px) ve `th { text-transform: uppercase }` bu tabloda EZİLİR — telefonda 5 sütun panele sığar */
.hv-tablo { width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: #e2e8f0; }
.hv-tablo th, .hv-tablo td { padding: 7px 4px; text-align: center; text-transform: none; letter-spacing: normal; border-bottom: 1px solid rgba(255, 255, 255, 0.06); overflow-wrap: anywhere; }
.hv-tablo thead th { font-size: 0.7rem; font-weight: 700; color: #8b95a5; vertical-align: bottom; }
.hv-tablo thead th:first-child, .hv-tablo tbody th { text-align: left; padding-left: 8px; }
.hv-tablo thead small { display: block; font-size: 0.64rem; font-weight: 600; color: #64748b; }
.hv-tablo tbody th { font-weight: 700; color: #f1f5f9; }
.hv-tablo td small { font-size: 0.68rem; color: #8b95a5; }
.hv-tablo .hv-ayrac th { padding-top: 12px; font-size: 0.72rem; font-weight: 800; color: #93c5fd; }
.hv-tablo td[data-seviye="sari"] { background: rgba(234, 179, 8, 0.16); color: #fde68a; }
.hv-tablo td[data-seviye="turuncu"] { background: rgba(249, 115, 22, 0.22); color: #fdba74; }
.hv-tablo td[data-seviye="kirmizi"] { background: rgba(239, 68, 68, 0.26); color: #fca5a5; }
.hv-tablo td[data-seviye] small { color: inherit; opacity: 0.8; }
.hv-simsek { color: #facc15; }
.hv-gun-nokta { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; vertical-align: middle; }
.hv-gun-nokta[data-seviye="sari"], .hv-nokta[data-seviye="sari"] { background: #eab308; }
.hv-gun-nokta[data-seviye="turuncu"], .hv-nokta[data-seviye="turuncu"] { background: #f97316; }
.hv-gun-nokta[data-seviye="kirmizi"], .hv-nokta[data-seviye="kirmizi"] { background: #ef4444; }
.hv-atif { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.72rem; line-height: 1.5; color: #8b95a5; }
.hv-atif-metin { flex: 1 1 240px; min-width: 0; }
@media (max-width: 600px) {
    .hv-derece { font-size: 1.9rem; }
    .hv-tablo { font-size: 0.76rem; }
    .hv-tablo th, .hv-tablo td { padding: 7px 2px; }
    .hv-tablo thead th:first-child, .hv-tablo tbody th { padding-left: 4px; }
}
@media (pointer: coarse) { .hv-tablo tbody th, .hv-tablo td { padding-top: 9px; padding-bottom: 9px; } }

/* Ayarlar › Hava ve fırtına uyarısı — eşik ızgarası (Ayarlar tema renkleriyle; seviye noktaları sabit) */
.hv-esik { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 8px 8px; align-items: center; margin-top: 4px; }
.hv-esik-bas { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.72rem; font-weight: 800; color: var(--text-muted); }
.hv-nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.hv-esik-ad { font-size: 0.76rem; font-weight: 700; color: var(--text-main); line-height: 1.3; }
.hv-esik-ad small { display: block; font-weight: 600; color: var(--text-muted); }
#settings-modal .hv-esik input { width: 100%; min-width: 0; box-sizing: border-box; text-align: center; font-size: 0.86rem; }
.hv-esik-bos { text-align: center; color: var(--text-muted); }
/* co_admin: kayıt alanları kilitli (config/hava yalnız admin) — kilit görünür olsun */
#ayr-hava-icerik [data-hava-yaz]:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── 24.9.8 (Tolga, 24.9.6 önce / sonra sayfası yorumları) ──
   1) "Onayla butonu çok büyük": telefonda karar düğmeleri tam genişlik iki sütun DEĞİL — sağa yaslı, doğal genişlikte, 34 px; dokunmatikte
      en az genişlik (10em) kalktı. Masaüstü 28 px aynı. Üç düğme sığmazsa sağa yaslı alt satıra sarar (simetri: sağ kenar hizalı).
   2) "Elektrik ve pti tutarını ayrı görmek istiyorum": PTI kartında döküm toplamın üstünde okunur boyutta (.pti-dokum). */
@media (pointer: coarse) {
    .kart-ana-is,
    .kart-yan-is { min-height: 34px; min-width: 0; padding: 0 12px; font-size: 0.72rem; }
}
@media (max-width: 600px) {
    .card-body-toggle > .kart-is-grup {
        flex: 1 1 auto;
        margin-left: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }
    .kart-is-grup > .kart-ana-is,
    .kart-is-grup > .kart-yan-is { width: auto; min-width: 0; min-height: 34px; padding: 4px 12px; white-space: nowrap; }
    .kart-is-grup.kart-is-uc > .kart-ana-is { grid-column: auto; }
    .kart-is-grup > button > span { white-space: nowrap; }
}
.pti-dokum { display: inline-flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; }
.pti-dokum b { color: var(--text-main); font-weight: 700; font-variant-numeric: tabular-nums; }
/* ≤768 px fiyat alanı SOLA yaslı satır düzenine geçer (.card-summary-price row) → döküm kendi satırında, toplamla aynı sol kenarda
   (yoksa ortada sağa yaslı iki satır kalıyor, toplam altta solda — hizasız) */
@media (max-width: 768px) {
    .card-summary-price > .pti-dokum { flex: 1 1 100%; justify-content: flex-start; row-gap: 0; }
}

/* ── 24.9.8 ÜST ÇUBUK (Tolga): A) sıra her genişlikte [hava çipi][kullanıcı bilgisi: ad · kur · tarih · Canlı][⊞ modül][çıkış] — app.js çipi
   kullanıcı bilgisinin SOLUNA ekler; 24.9.7 daralma kuralları (önce çipin yer adı gider) aynen.
   B) "telefonda kur görünmüyor … kur işimize geliyordu": ≤ 600 px'te ad / tarih gizli kalır (Profilim kenar menüde), KUR görünür — kullanıcı
   bilgisinin yerinde tek satır "$1=49.22₺" + yanında durum noktası, 36 px satır. Yer yetmezse çekilme sırası (önce giden en az önemli):
   TR/EN → logo → hava çipi → kur → durum noktası (hiç gitmez; kırmızıda "Bağlantı yok" hapı — 24.9.7 kuralı: çip + logo çekilir; dar ekranda kur da). */
@media (max-width: 600px) {
    #user-info-compact .user-info-inner { gap: 4px !important; }
    #live-currency {
        display: inline-flex !important;
        align-items: center;
        height: 36px;
        font-size: 0.74rem !important;
        line-height: 1 !important;
        overflow: visible;
        text-overflow: clip;
        font-variant-numeric: tabular-nums;
    }
    #live-currency i { display: none; }
    /* çip telefonda DARALMAZ (eskiden 18 px'e ezilip "27°" kesiliyordu) — sığmazsa bütün olarak çekilir */
    .hava-cip { flex: 0 0 auto; }
    /* app.js _ustSigdir — çekilme sırası: TR/EN → logo → hava çipi → kur */
    header.ust-gizle-dil #lang-switch-container { display: none !important; }
    header.ust-gizle-logo .logo { display: none !important; }
    header.ust-gizle-logo .header-main-grid { grid-template-columns: auto 1fr !important; }
    header.ust-gizle-cip #hava-cip { display: none !important; }
    header.ust-gizle-kur #live-currency { display: none !important; }
}

/* ── 24.9.9 PORTALDAN ÇEK › NUMARA FARKI: üç seçenek (varsayılan yok). Pencere zemini temaya bağlı (var(--bg-card)) → düğme zemini saydam,
   yazı temadan; seçili olan sabit mavi zemin + beyaz yazı (her temada okunur). Dokunmatikte ≥ 40 px. */
.tk-no-dgler { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.tk-no-karar {
    display: block; width: 100%; min-height: 32px; padding: 5px 10px; box-sizing: border-box; text-align: left;
    background: transparent; color: inherit; border: 1px solid rgba(148, 163, 184, 0.55); border-radius: 8px;
    font-size: 0.72rem; font-weight: 600; line-height: 1.3; cursor: pointer;
}
.tk-no-karar[aria-pressed="true"] { background: #2563eb; border-color: #2563eb; color: #fff; }
.tk-no-ipucu { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 0.62rem; font-weight: 700; background: rgba(34, 197, 94, 0.16); color: #16a34a; }
.tk-no-karar[aria-pressed="true"] .tk-no-ipucu { background: rgba(255, 255, 255, 0.22); color: #fff; }
@media (pointer: coarse) { .tk-no-karar { min-height: 40px; } }

/* ── 24.9.9 "KAYITLARA GİT"TEN GERİ DÖNÜŞ: arama sonuçlarının üstünde yapışkan "← Geri: <pencere>". #folder-view'in (iç kaydırma kutusu — iOS'ta
   sticky güvenilir) İLK çocuğu; body'ye fixed DEĞİL (zoom'lu görünüm). Sabit renk (her temada okunur), backdrop-filter YOK, dokunmatikte ≥ 44 px. */
.mc-geri-serit { position: sticky; top: 0; z-index: 6; display: flex; padding: 2px 0 8px; pointer-events: none; }
.mc-geri-serit[hidden] { display: none !important; }
.mc-geri-don {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 0 16px;
    background: #2563eb; color: #fff; border: 1px solid #1d4ed8; border-radius: 999px; font-size: 0.82rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.mc-geri-don span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-geri-don i { font-size: 1.05rem; flex: 0 0 auto; }
@media (pointer: coarse) { .mc-geri-don { min-height: 44px; } }

/* 24.9.9+ (Tolga: "tuş görünmüyor aşağı insem de yok") — onay penceresi: uzun metin kendi içinde kayar, düğmeler HER ZAMAN görünür.
   .modal-content zaten flex sütun + overflow:hidden; metnin küçülebilmesi için min-height:0 şart (yoksa içerik kadar uzar, düğmeler kesilir). */
#confirm-modal .modal-content { max-height: min(90vh, calc(100svh - 32px)); padding: 24px 24px 20px; }   /* masaüstünde .modal-content dolgusu 0'dı — metin ve düğmeler kenara yapışıktı */
#confirm-modal .modal-content > * { flex-shrink: 0; }
#confirm-modal #confirm-msg { flex: 1 1 auto; flex-shrink: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#confirm-modal #confirm-msg.uzun { text-align: left; line-height: 1.5; padding-right: 4px; }
#confirm-modal .modal-content.onay-uzun { max-width: 560px !important; }

/* ════════ 25.0.1 HAVA — ana ekran KARTI (#hava-kart) · üst çubuk ⚠ (#hava-isaret) · özgün simgeler (.hv-simge) · resmi duyurular (.hv-resmi) ════════
   Tolga (2026-10-09): birim seçicisi + "İş Akış Paneli" başlığının sağındaki boşluğa hava kartı; "sayfanın mevcut yapısı, ölçüleri vs bozulmayacak".
   Kart satırın MUTLAK konumlu çocuğu (konum + boy app.js `_havaKartYerlestir` ölçer) — `position: relative` satırın akışını değiştirmez.
   Renkler SABİT (her temada okunur; açık temada beyaz kart, koyu yazı — kontrast ≥ 4,5). */
#main-view .dashboard-title-row { position: relative; }
.hava-kart {
    position: absolute; z-index: 2; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 4px;
    padding: 6px 8px; border-radius: 12px; border: 1px solid #2b3340; background: #161b22; color: #e6edf3;
    cursor: pointer; overflow: hidden; line-height: 1.15; -webkit-tap-highlight-color: transparent; user-select: none;
}
.hava-kart[hidden] { display: none !important; }
.hava-kart:hover { border-color: #475569; }
.hava-kart:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.hava-kart[data-seviye="sari"] { border-color: #854d0e; }
.hava-kart[data-seviye="turuncu"] { border-color: #9a3412; }
.hava-kart[data-seviye="kirmizi"] { border-color: #991b1b; }
.hk-ust { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 0 auto; }
.hk-simge, .hk-gun-simge { flex: 0 0 auto; display: inline-flex; }
.hk-derece { flex: 0 0 auto; font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hk-bilgi { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.hk-durum, .hk-ikinci { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-durum { font-size: 0.74rem; font-weight: 700; }
.hk-ikinci { font-size: 0.66rem; font-weight: 600; color: #a7b1bf; }
.hk-ikinci i { font-size: 0.72rem; vertical-align: -1px; }
.hk-ikinci[data-seviye="sari"] { color: #fbbf24; }
.hk-ikinci[data-seviye="turuncu"] { color: #fb923c; }
.hk-ikinci[data-seviye="kirmizi"] { color: #f87171; }
.hk-ikinci[data-seviye="bayat"], .hk-ikinci[data-seviye="eski"] { color: #8b95a5; }
.hk-atif { display: block; flex: 0 0 auto; align-self: flex-end; font-size: 0.5rem; line-height: 1.1; letter-spacing: 0.02em; white-space: nowrap; color: #8b95a5; }
.hk-ust.hk-bayat .hk-derece, .hk-ust.hk-bayat .hk-durum { color: #8b95a5; }
.hk-ust.hk-bayat .hk-simge { opacity: 0.6; filter: grayscale(0.7); }
.hk-gunler { display: grid; gap: 4px; flex: 1 1 auto; min-height: 0; }
.hk-gun { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 2px 1px; border-radius: 8px; background: rgba(255, 255, 255, 0.045); }
.hk-gun.hk-bugun { background: rgba(37, 99, 235, 0.18); }
.hk-gun-bos { opacity: 0.55; }
.hk-gun-ad { font-size: 0.6rem; font-weight: 700; color: #a7b1bf; white-space: nowrap; }
.hk-gun-sic { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 0.62rem; white-space: nowrap; font-variant-numeric: tabular-nums; color: #8b95a5; }
.hk-gun-sic b { font-weight: 800; color: #f1f5f9; }
.hk-gun-yag { display: none; color: #7dd3fc; font-weight: 700; }
.hava-kart.hk-genis .hk-gun-yag { display: inline; }
.hava-kart.hk-dar .hk-gun-sic > span { display: none; }
.hk-gun-isaret { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; }
.hk-gun-isaret[data-seviye="sari"] { background: #eab308; }
.hk-gun-isaret[data-seviye="turuncu"] { background: #f97316; }
.hk-gun-isaret[data-seviye="kirmizi"] { background: #ef4444; }
.hk-gun-isaret.hk-olasi { background: transparent; border: 1.5px solid #fbbf24; }
.hk-gun-alt { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; max-width: 100%; }
/* orta (telefon, 86–109 px) + kısa (masaüstü satırı, < 86 px): sıkı; kısada gün hücresi iki satır (ad / simge + derece yan yana) */
.hava-kart[data-yog="orta"], .hava-kart[data-yog="kisa"] { padding: 5px 7px; gap: 2px; }
.hava-kart[data-yog="kisa"] { padding-top: 4px; padding-bottom: 3px; }
.hava-kart[data-yog="orta"] .hk-derece, .hava-kart[data-yog="kisa"] .hk-derece { font-size: 1.2rem; }
.hava-kart[data-yog="orta"] .hk-durum, .hava-kart[data-yog="kisa"] .hk-durum { font-size: 0.66rem; }
.hava-kart[data-yog="orta"] .hk-ikinci, .hava-kart[data-yog="kisa"] .hk-ikinci { font-size: 0.6rem; }
.hava-kart[data-yog="orta"] .hk-atif, .hava-kart[data-yog="kisa"] .hk-atif { font-size: 0.48rem; line-height: 1; }
.hava-kart[data-yog="orta"] .hk-gun, .hava-kart[data-yog="kisa"] .hk-gun { gap: 0; padding: 1px; border-radius: 6px; }
.hava-kart[data-yog="orta"] .hk-gun-ad, .hava-kart[data-yog="kisa"] .hk-gun-ad { font-size: 0.56rem; }
.hava-kart[data-yog="orta"] .hk-gun-sic, .hava-kart[data-yog="kisa"] .hk-gun-sic { font-size: 0.58rem; }
.hava-kart[data-yog="kisa"] .hk-gun-alt { flex-direction: row; gap: 3px; }
.hava-kart[data-yog="kisa"] .hk-gun-isaret { top: 2px; right: 2px; width: 6px; height: 6px; }
body.light-mode .hava-kart { background: #ffffff; color: #1f2937; border-color: rgba(0, 0, 0, 0.14); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
body.light-mode .hava-kart:hover { border-color: rgba(0, 0, 0, 0.3); }
body.light-mode .hava-kart[data-seviye="sari"] { border-color: #d97706; }
body.light-mode .hava-kart[data-seviye="turuncu"] { border-color: #ea580c; }
body.light-mode .hava-kart[data-seviye="kirmizi"] { border-color: #dc2626; }
body.light-mode .hk-ikinci { color: #4b5563; }
body.light-mode .hk-ikinci[data-seviye="sari"] { color: #92400e; }
body.light-mode .hk-ikinci[data-seviye="turuncu"] { color: #9a3412; }
body.light-mode .hk-ikinci[data-seviye="kirmizi"] { color: #b91c1c; }
body.light-mode .hk-ikinci[data-seviye="bayat"], body.light-mode .hk-ikinci[data-seviye="eski"],
body.light-mode .hk-atif, body.light-mode .hk-gun-sic, body.light-mode .hk-ust.hk-bayat .hk-derece, body.light-mode .hk-ust.hk-bayat .hk-durum { color: #5b6573; }
body.light-mode .hk-gun { background: #f1f5f9; }
body.light-mode .hk-gun.hk-bugun { background: #dbeafe; }
body.light-mode .hk-gun-ad { color: #4b5563; }
body.light-mode .hk-gun-sic b { color: #111827; }
body.light-mode .hk-gun-yag { color: #1d4ed8; }
body.light-mode .hk-gun-isaret.hk-olasi { border-color: #b45309; }

/* Üst çubuk ⚠ — yalnız bildirilen sınıf uyarı / etkin resmi duyuru varken (app.js `_havaIsaretCiz`) */
.hava-isaret {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box;
    width: 32px; height: 32px; margin: 0 4px 0 0; padding: 0; border-radius: 999px; border: 1px solid #2b3340; background: #161b22;
    color: #fbbf24; font-size: 1.05rem; cursor: pointer;
}
.hava-isaret[hidden] { display: none !important; }
.hava-isaret:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.hava-isaret[data-seviye="sari"] { background: #3a2a07; border-color: #854d0e; color: #fbbf24; }
.hava-isaret[data-seviye="turuncu"] { background: #431a07; border-color: #9a3412; color: #fb923c; }
.hava-isaret[data-seviye="kirmizi"] { background: #450a0a; border-color: #991b1b; color: #f87171; }
.hava-isaret.hava-uyari-bayat { background: #1f2630 !important; border-color: #2f3a48 !important; color: #8b95a5 !important; }
body.light-mode .hava-isaret[data-seviye="sari"] { background: #fef3c7; border-color: #d97706; color: #b45309; }
body.light-mode .hava-isaret[data-seviye="turuncu"] { background: #ffedd5; border-color: #ea580c; color: #c2410c; }
body.light-mode .hava-isaret[data-seviye="kirmizi"] { background: #fee2e2; border-color: #dc2626; color: #b91c1c; }
body.light-mode .hava-isaret.hava-uyari-bayat { background: #f1f5f9 !important; border-color: rgba(0, 0, 0, 0.14) !important; color: #6b7280 !important; }
@media (pointer: coarse) { .hava-isaret { width: 40px; height: 40px; } }
/* TELEFON (≤ 600): ⚠ satır yüksekliğinde (36 px — üst çubuk simetrisi); kullanıcı adı GERİ (24.9.7'de gizlenmişti) — kurun solunda, tek satır,
   uzun ad üç noktayla kısalır; sığmazsa `_ustSigdir` sırayla çeker: TR/EN → logo → ⚠ → kur → ad (durum noktası / kırmızı hap asla) */
@media (max-width: 600px) {
    .hava-isaret { width: 36px; height: 36px; margin-right: 0; }
    #user-info-compact #active-user-name {
        display: inline-block !important; height: 36px; line-height: 36px; max-width: 110px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem !important; font-weight: 700;
    }
    header.ust-gizle-cip #hava-isaret { display: none !important; }
    header.ust-gizle-ad #user-info-compact #active-user-name { display: none !important; }
}

/* Özgün simgeler — hafif hareket yalnız CSS, sınırlı tekrar (pil); hareket azaltma tercihinde yok */
.hv-simge { display: block; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
    .hvs-hareket .hvs-damla { animation: hvs-damla 1.6s ease-in 8; }
    .hvs-hareket .hvs-kar { animation: hvs-kar 3.2s ease-in-out 4; }
    .hvs-hareket .hvs-simsek { animation: hvs-simsek 3.4s steps(1, end) 4; }
}
@keyframes hvs-damla { 0% { transform: translateY(-3px); opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes hvs-kar { 0%, 100% { transform: translate(0, -2px); } 50% { transform: translate(1.5px, 2px); } }
@keyframes hvs-simsek { 0%, 86%, 100% { opacity: 1; } 89% { opacity: 0.25; } 93% { opacity: 1; } 96% { opacity: 0.35; } }
.hv-derece .hv-simge { flex: 0 0 auto; }

/* Panel: resmi duyurular (her temada koyu panel) + olası uyarı */
.hv-resmiler { display: flex; flex-direction: column; gap: 8px; }
.hv-resmi { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid #334155; border-radius: 10px; background: #111827; color: #e2e8f0; font-size: 0.84rem; line-height: 1.4; }
.hv-resmi.hv-resmi-etkin { border-color: #9a3412; background: #2a1508; }
.hv-resmi-rozet { padding: 3px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; background: #1e3a5f; color: #bfdbfe; }
.hv-resmi-baslik { font-weight: 700; color: #f8fafc; overflow-wrap: anywhere; }
.hv-resmi-baslik a { color: #93c5fd; text-decoration: underline; text-underline-offset: 2px; }
.hv-resmi-ozet { font-size: 0.8rem; color: #cbd5e1; overflow-wrap: anywhere; }
.hv-resmi-karsi { color: #86efac; opacity: 1; }
/* 25.0.1 inceleme: resmi duyurunun renk kodu (yalnız açıkça yazıldıysa) — uyarı kartlarıyla aynı tonlar */
.hv-resmi .hv-rozet[data-kod="sari"] { background: #3a2a07; color: #fbbf24; }
.hv-resmi .hv-rozet[data-kod="turuncu"] { background: #431a07; color: #fb923c; }
.hv-resmi .hv-rozet[data-kod="kirmizi"] { background: #450a0a; color: #f87171; }
.hv-resmi.hv-resmi-etkin[data-seviye="kirmizi"] { border-color: #7f1d1d; background: #2a0d0d; }
.hv-resmi.hv-resmi-etkin[data-seviye="sari"] { border-color: #6b5a1d; background: #211c0c; }
.hv-uyari.hv-olasi { border-style: dashed; }

/* ── 25.0.1 KONTROLLER — KARTLARDA İLERLEME ÇUBUĞU (`_kontrolCubukHtml`, app.js). Kartın alt kenarına yapışık, MUTLAK konumlu (kart
   yüksekliği ve düğme hizası değişmez; kart `overflow:hidden` → kartın yuvarlak köşesine kırpılır). Belirli: genişlik = oran, yumuşak geçiş ·
   belirsiz: kayan parça · bitti: %100, sonuç renginde kısa parlama, ~1 sn'de solar. "Hepsini kontrol et" düğmesinin altında aynı çubuk.
   Renkler sabit (pencere zemini her temada koyu); `--kc-renk` satır içi verilir. */
#kontrol-kutu .k-cubuk {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; pointer-events: none;
    background: rgba(148, 163, 184, 0.16);
}
#kontrol-kutu .k-cubuk-dolgu {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 0 2px 2px 0;
    background: var(--kc-renk, #60a5fa); transition: width 0.45s ease;
}
#kontrol-kutu .k-cubuk-belirsiz .k-cubuk-dolgu { width: 36% !important; border-radius: 2px; animation: kCubukAkis 1.4s ease-in-out infinite; }
@keyframes kCubukAkis { from { transform: translateX(-105%); } to { transform: translateX(285%); } }
#kontrol-kutu .k-cubuk-son { animation: kCubukSon 1.3s ease forwards; }
#kontrol-kutu .k-cubuk-son .k-cubuk-dolgu { transition-duration: 0.35s; animation: kCubukParla 1.3s ease forwards; }
@keyframes kCubukSon { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kCubukParla { 0% { filter: none; } 30% { filter: brightness(1.5) saturate(1.25); } 100% { filter: none; } }
/* Hepsini: düğmenin altında, düğme genişliğinde (kenarlardan eşit içeride) — satırın yüksekliğini değiştirmez */
#kontrol-kutu .k-hepsi-kap { position: relative; display: inline-flex; }
#kontrol-kutu .k-hepsi-cubuk { left: 8px; right: 8px; top: calc(100% + 3px); bottom: auto; border-radius: 2px; }
#kontrol-kutu .k-hepsi-cubuk .k-cubuk-dolgu { border-radius: 2px; }
@media (max-width: 600px) { #kontrol-kutu .k-cubuk:not(.k-hepsi-cubuk) { height: 4px; } }
@media (prefers-reduced-motion: reduce) {
    #kontrol-kutu .k-cubuk-dolgu { transition: none; }
    #kontrol-kutu .k-cubuk-belirsiz .k-cubuk-dolgu { animation: none; width: 100% !important; opacity: 0.45; }
    #kontrol-kutu .k-cubuk-son, #kontrol-kutu .k-cubuk-son .k-cubuk-dolgu { animation: none; }
}

/* 25.0.1 — bildirim balonu dokunuşu YUTMASIN: telefonda balon altındaki düğmeyi örtüyor, dokunuş balona gidiyordu
   (İşaretler › Numara yapıştır › "Lojilog'a uygula" ölçülerek bulundu). Balonda tıklanacak bir şey yok. */
#notification-toast { pointer-events: none; }

/* 25.0.1 — telefonda küçük bağlantılar (tarama: "Firmaları düzenle" 96×14, "Otomatik işler" 71×14) → parmakla rahat basılsın */
@media (pointer: coarse) {
    #oto-kutu .oto-is a, #ho-oto-ac { display: inline-flex; align-items: center; min-height: 34px; padding: 0 4px; }
}

/* 25.0.2 — eklenti güncelleme satırındaki "Nasıl güncellenir" dokunmatikte de rahat basılsın */
@media (pointer: coarse) { .kopru-guncel-not button { min-height: 34px; } }