@import url('https://googleapis.com');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: #0b0f17;
    color: #f1f5f9;
    display: flex;
    min-height: 100vh;
}

/* 🚀 SOL SABİT MENÜ PANELİ (HİÇBİR SAYFADA BOZULMAZ) */
.sidebar {
    width: 260px;
    background: #0f1423;
    border-right: 1px solid #1e2538;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    padding: 20px 10px;
    z-index: 1000;
}

.sidebar-header {
    padding: 10px 15px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: 0.5px;
}

.menu-dikey {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.menu-link:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
}

.menu-link.aktif {
    background: #1e2538;
    color: #fff;
}

/* 💻 SAĞ TARAF: DİNAMİK İÇERİK ALANI */
.ana-icerik {
    flex: 1;
    margin-left: 260px; /* Sabit menünün sağından başlatır */
    padding: 30px;
    width: calc(100% - 260px);
}

.sayfa-ust-tabela {
    border: 1px solid #fbbf24;
    padding: 15px 20px;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.02);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sayfa-ust-tabela h2 {
    font-size: 14px;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
}

/* Genel Tasarım Elemanları */
.kart {
    background: #0f1423;
    padding: 22px;
    border-radius: 12px;
    border: 1px solid #1e2538;
    margin-bottom: 20px;
}
.kart h3 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 15px; }

.premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}
.p-kart { background: #0f1423; border: 1px solid #1e2538; padding: 18px; border-radius: 10px; }
.p-kart .baslik { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; margin-bottom: 5px; }
.p-kart .rakam { font-size: 22px; font-weight: 800; color: #fff; }

.ikili-bolum { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.input-grup { margin-bottom: 12px; width: 100%; }
.input-grup label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 4px; }
.input-alan { width: 100%; padding: 10px; border: 1px solid #1e2538; border-radius: 6px; font-size: 13px; color: #fff; background-color: #0b0f17; outline: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 20px; font-size: 13px; font-weight: 700; border-radius: 6px; border: none; cursor: pointer; text-decoration: none; }
.btn-kaydet { background: #2563eb; color: white; width: 100%; }
.btn-ara { background-color: #1e2538; color: white; }

.tablo-kapsayici { width: 100%; overflow-x: auto; background: #0f1423; border-radius: 8px; border: 1px solid #1e2538; }
.servis-tablo { width: 100%; border-collapse: collapse; text-align: left; }
.servis-tablo th { background-color: #0b0f17; color: #475569; font-size: 11px; font-weight: 700; padding: 12px; border-bottom: 2px solid #1e2538; text-transform: uppercase; }
.servis-tablo td { padding: 12px; font-size: 13px; border-bottom: 1px solid #1e2538; color: #cbd5e1; }
.id-badge { background-color: rgba(59, 130, 246, 0.1); color: #60a5fa; padding: 3px 6px; border-radius: 4px; font-weight: 700; }
.mini-badge { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; background: rgba(245,158,11,0.15); color: #fbbf24; }
.finans-blok { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; padding: 10px 0; border-bottom: 1px solid #1e2538; }
.canli-satir { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #1e2538; }

.alert { padding: 12px; border-radius: 8px; font-size: 13px; margin-bottom: 15px; font-weight: 600; }
.basari { background-color: rgba(16, 185, 129, 0.1); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); }
.hata { background-color: rgba(239, 68, 68, 0.1); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }

@media (max-width: 991px) {
    body { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; }
    .ana-icerik { margin-left: 0; width: 100%; padding: 15px; }
}
/* ======================================================== */
/* 🚀 SEYİR VE HIZ DOSTU DIKEY DROPDOWN TASARIMI            */
/* ======================================================== */

.sidebar-dropdown-kapsayici {
    position: relative;
    width: 100%;
}

/* İlk başta gizli, tıklandığında pürüzsüz açılan alt kutu */
.sidebar-alt-menu {
    display: none;
    flex-direction: column;
    background: #0b0f17; /* Ana zeminden biraz daha koyu siber siyah */
    border-radius: 8px;
    margin: 4px 5px;
    padding: 4px;
    border: 1px solid #1e2538;
}

/* JavaScript ile tıklandığında bu sınıf devreye girer */
.sidebar-alt-menu.dropdown-acik {
    display: flex !important;
}

/* Açılır Menünün İçindeki Şık Linkler */
.sidebar-alt-link {
    color: #64748b;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 15px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-alt-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.02);
}

/* Görseldeki gibi seçili olan alt seçeneğin mavi parlaması */
.sidebar-alt-link.aktif-alt-link {
    background: #1d2d44;
    color: #60a5fa !important;
    border-left: 2px solid #3b82f6;
}
/* 🚀 TÜM SAYFALARDA SOL MENÜ KİLİDİNİ AÇAN SİHİRLİ KOD */
.sidebar-alt-menu.dropdown-acik {
    display: flex !important;
}
/* 📱 SADECE CEP TELEFONUNDA NİZAMİ UYUM (RESPONSIVE) */
@media (max-width: 768px) {
    /* Sol dikey menünün telefonda ekranı sıkıştırmasını engelliyoruz */
    .sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    
    .menu-dikey {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Sağ taraftaki tüm kutucukları, sayaçları ve formları telefona tam oturtuyoruz */
    .ana-icerik {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    /* 4 adet sayaç kutusu telefonda ikili nizamda jilet gibi dizilir, ekrandan taşmaz */
    .premium-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    .premium-grid .p-kart {
        padding: 12px !important;
        min-height: 75px !important;
    }
    
    /* Formların içindeki yan yana kutuları telefonda alt alta alıp tam genişlik yapıyoruz */
    .form-satir, .bolum-grid, .ikili-bolum {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    
    .input-grup {
        width: 100% !important;
    }
    
    .input-alan {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important; /* Telefonun otomatik ekran büyütmesini engeller */
    }
    
    .btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tabloların sağa doğru ekranı patlatmasını engelleyen güvenli esnek hazne */
    .tablo-kapsayici {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border: 1px solid #1e2538 !important;
        border-radius: 8px !important;
        background: #111625 !important;
    }
    
    /* Tablo içindeki verilerin birbirine girmesini engeller, parmakla sağa kaydırıp okursun */
    .servis-tablo {
        min-width: 700px !important;
    }
}
/* 📱 TELEFONDA CİHAZ TÜRÜ YANINDAKİ DİŞLİ BUTONUNU KİBARLAŞTIRMA KODU */
@media (max-width: 768px) {
    /* Form içindeki select kutusu ile dişli butonunun yan yana nizami durmasını sağlıyoruz */
    .input-grup div[style*="display: flex"], 
    .input-grup div[style*="display: flex"] {
        display: flex !important;
        flex-direction: row !important; /* Alt alta inmesini engelliyoruz */
        gap: 8px !important;
        width: 100% !important;
    }

    /* Dişli vites butonunun telefonda ekranı kaplamasını engellip kare yapıyoruz */
    .input-grup div[style*="display: flex"] .btn-ara,
    .input-grup div[style*="display: flex"] a[title="Tür Ayarları"],
    .input-grup div[style*="display: flex"] a[title="Marka Tanımla"] {
        width: 42px !important; /* Genişliğini sabitliyoruz */
        height: 42px !important; /* Yüksekliğini select kutusuyla eşitliyoruz */
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
        flex: 0 0 42px !important; /* Telefondan basınca esnemesini engelliyoruz */
    }
}
/* 📱 KAYIT CİHAZI ID TAKİP SAYFASI MOBİL GÜÇLENDİRME SİSTEMİ */
@media (max-width: 768px) {
    /* Form satırlarındaki tüm kutuları telefonda alt alta ve tam genişlik yapıyoruz */
    form[action="kayit-cihazi-takip.php"] .form-satir {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    form[action="kayit-cihazi-takip.php"] .input-grup {
        width: 100% !important;
        margin-bottom: 0px !important;
    }

    form[action="kayit-cihazi-takip.php"] .input-alan {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    /* Marka kutusunun yanındaki ⚙️ vites dişlisi butonunu telefonda kibar kare yapıyoruz */
    form[action="kayit-cihazi-takip.php"] .input-grup div[style*="display: flex"] {
        display: flex !important;
        flex-direction: row !important; /* Yan yana kalmasını sağlıyoruz */
        gap: 8px !important;
        width: 100% !important;
    }

    form[action="kayit-cihazi-takip.php"] .input-grup div[style*="display: flex"] .input-alan {
        flex: 1 !important;
    }

    form[action="kayit-cihazi-takip.php"] .input-grup div[style*="display: flex"] .btn-ara {
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        border-radius: 5px !important;
        flex: 0 0 42px !important; /* Telefondan basınca uzamasını engelliyoruz */
        box-sizing: border-box !important;
    }

    /* Büyük Şifre Havuzu tablosunun telefonu patlatmasını engelleyen yatay kaydırma zırhı */
    .kart .tablo-kapsayici {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Kaydırma yağ gibi aksın */
        border: 1px solid #1e2538 !important;
        border-radius: 8px !important;
    }

    /* Tablonun telefonda büzüşmesini engelliyoruz, parmakla sağa kaydırıp rahatça okursun */
    .kart .tablo-kapsayici .servis-tablo {
        min-width: 850px !important; /* Cloud ID, şifre ve yazılımlar geniş geniş sığar */
    }

    .kart .tablo-kapsayici .servis-tablo th, 
    .kart .tablo-kapsayici .servis-tablo td {
        padding: 8px !important;
        font-size: 12px !important;
    }

    /* Sil ve düzenle butonlarının telefonda parmakla rahat basılması için alan açıyoruz */
    .kart .tablo-kapsayici .servis-tablo .btn-islem {
        padding: 6px 12px !important;
        font-size: 12px !important;
        display: inline-block !important;
    }
}
/* 🚀 TUANA BİLİŞİM CANLI DURUM ROZETLERİ (STATUS BADGES) MOTORU */

/* Genel rozet kalıbı (Yazıların düzgün, oval ve okunaklı durmasını sağlar) */
.mini-badge {
    display: inline-block !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    border: 1px solid transparent !important;
}

/* ⏳ SEÇENEK A: BEKLEMEDE OLANLAR (FOSFORLU SARI NEON) */
.mini-badge[style*="background"],
.mini-badge:contains("Beklemede"),
td:contains("Beklemede") .mini-badge,
option[value="Beklemede"] {
    background: rgba(241, 196, 15, 0.12) !important;
    color: #f1c40f !important;
    border: 1px solid rgba(241, 196, 15, 0.3) !important;
    text-shadow: 0 0 4px rgba(241, 196, 15, 0.2) !important;
}

/* 🔧 SEÇENEK B: MONTAJ AŞAMASINDA OLANLAR (DERİN SİBER MAVİ) */
.mini-badge:contains("Montaj"),
td:contains("Montaj") .mini-badge,
.mini-badge:contains("İşlemde") {
    background: rgba(52, 152, 219, 0.15) !important;
    color: #3498db !important;
    border: 1px solid rgba(52, 152, 219, 0.35) !important;
    text-shadow: 0 0 4px rgba(52, 152, 219, 0.2) !important;
}

/* 🧪 SEÇENEK C: TEST EDİLİYOR OLANLAR (ASİL SİBER MOR) */
.mini-badge:contains("Test"),
td:contains("Test") .mini-badge {
    background: rgba(155, 89, 182, 0.15) !important;
    color: #9b59b6 !important;
    border: 1px solid rgba(155, 89, 182, 0.35) !important;
    text-shadow: 0 0 4px rgba(155, 89, 182, 0.2) !important;
}

/* ✅ SEÇENEK D: TAMAMLANDI OLANLAR (CANLI ESNAF YEŞİLİ) */
.mini-badge:contains("Tamamlandı"),
td:contains("Tamamlandı") .mini-badge {
    background: rgba(46, 204, 113, 0.15) !important;
    color: #2ecc71 !important;
    border: 1px solid rgba(46, 204, 113, 0.35) !important;
    text-shadow: 0 0 4px rgba(46, 204, 113, 0.2) !important;
}
/* 🏁 2. SEÇENEK ENTEGRASYONU: ZEBRA SATIR DOKUSU VE SATIR PARLAMASI */

/* Tablo satırlarına bir dolu bir boş olacak şekilde kibar gece mavisi tonu veriyoruz */
.servis-tablo tbody tr:nth-child(even) {
    background-color: rgba(30, 41, 59, 0.25) !important; /* Arka planı hafif yumuşatır */
}

/* Farenin okunu satırın üzerine getirdiğinde satırı parlatıp canlandırıyoruz */
.servis-tablo tbody tr {
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.servis-tablo tbody tr:hover {
    background-color: rgba(59, 130, 246, 0.08) !important; /* Siber mavi şeffaf parlama */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; /* Hafif derinlik gölgesi */
}

/* Satırın üzerine gelindiğinde içerideki ID badge alanını da hafifçe canlandırıyoruz */
.servis-tablo tbody tr:hover .id-badge {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}
/* ⚡ 3. SEÇENEK ENTEGRASYONU: GİRİŞ KUTULARINA SİBER ODAKLANMA ÇİZGİSİ */

/* Formlardaki tüm input, select ve textarea alanlarının geçişlerini yumuşatıyoruz */
.input-alan {
    transition: all 0.25s ease-in-out !important;
}

/* Herhangi bir kutunun içine tıklandığı (odaklanıldığı) an devreye giren siber neon zırh */
.input-alan:focus {
    border-color: #3b82f6 !important; /* Çerçeveyi canlı siber mavi yapar */
    background-color: #0f172a !important; /* İç rengini hafif koyulaştırıp yazıyı öne çıkarır */
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.25), 
                inset 0 0 5px rgba(59, 130, 246, 0.1) !important; /* Dışarıya ve içeriye hafif neon parlama verir */
    outline: none !important; /* Tarayıcının kendi çirkin kalın dış çizgisini iptal eder */
}

/* Hızlı arama kutularına tıklandığında da aynı etkiyi veriyoruz */
form input[name="ara"]:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.25) !important;
}
/* 🚀 TUANA BİLİŞİM SAYAÇ KUTULARI RENKLENDİRME SİSTEMİ */

/* Ortak Kart Geliştirmesi (Yumuşak geçiş ve derinlik hissi ekler) */
.premium-grid-6 .p-kart {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.premium-grid-6 .p-kart:hover {
    transform: translateY(-4px) !important;
}

/* 1. KUTU: TEKNİK SERVİS KAZANCI (CANLI TURKUAZ) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #06b6d4"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #06b6d4"] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(17, 22, 37, 0.85)) !important;
    border: 1px solid rgba(6, 182, 212, 0.35) !important;
    border-left: 5px solid #06b6d4 !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #06b6d4"]:hover {
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.2) !important;
    border-color: rgba(6, 182, 212, 0.6) !important;
}

/* 2. KUTU: KAMERA MONTAJ KAZANCI (PARLAK ALTIN / TURUNCU) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #f59e0b"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #f59e0b"] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(17, 22, 37, 0.85)) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-left: 5px solid #f59e0b !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #f59e0b"]:hover {
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
}

/* 3. KUTU: TOPLAM KAZANÇ (BEREKETLİ KASA YEŞİLİ) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #10b981"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #10b981"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(17, 22, 37, 0.85)) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    border-left: 5px solid #10b981 !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #10b981"]:hover {
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25) !important;
    border-color: rgba(16, 185, 129, 0.7) !important;
}

/* 4. KUTU: AKTİF ARIZA / TOPLAM (CANLI MAVİ) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #3b82f6"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #3b82f6"] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(17, 22, 37, 0.85)) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    border-left: 5px solid #3b82f6 !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #3b82f6"]:hover {
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
}

/* 5. KUTU: KAMERA MONTAJ SAYISI (DEEP TEKNOLOJİ MAVİSİ) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #60a5fa"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #60a5fa"] {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(17, 22, 37, 0.85)) !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    border-left: 5px solid #60a5fa !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #60a5fa"]:hover {
    box-shadow: 0 8px 20px rgba(96, 165, 250, 0.2) !important;
    border-color: rgba(96, 165, 250, 0.6) !important;
}

/* 6. KUTU: KAYITLI MÜŞTERİLER (ASİL HOLDİNG MORU) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #8b5cf6"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #8b5cf6"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(17, 22, 37, 0.85)) !important;
    border: 1px solid rgba(139, 92, 246, 0.35) !important;
    border-left: 5px solid #8b5cf6 !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #8b5cf6"]:hover {
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2) !important;
    border-color: rgba(139, 92, 246, 0.6) !important;
}

/* Başlık Yazılarını Parlatıp Okunur Yapıyoruz */
.premium-grid-6 .p-kart .baslik {
    color: #e2e8f0 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}
/* 🚀 TUANA BİLİŞİM ALT TABLOLARI VE FİNANS ANALİZİ RENKLENDİRME MOTORU */

/* 1. SOL KUTU: TEKNİK SERVİS BEKLEYEN ARIZALAR KART GELİŞTİRMESİ */
.kart[style*="background:#111625"], 
.kart:has(h3:contains("Teknik Servis Bekleyen Arızalar")) {
    background: #111625 !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important; /* Siber mavi ince dış çerçeve */
    border-left: 4px solid #3b82f6 !important; /* Sol tarafta asil mavi şerit */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Arıza listesindeki satırların bir dolu bir boş (Zebra) nizami ayrılması */
.kart[style*="background:#111625"] .canli-satir:nth-child(even),
.kart:has(h3:contains("Teknik Servis Bekleyen Arızalar")) .canli-satir:nth-child(even) {
    background-color: rgba(30, 41, 59, 0.2) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-radius: 4px !important;
}

/* 2. SAĞ KUTU: GENEL FİNANS ANALİZİ KART GELİŞTİRMESİ */
.kart:has(h3:contains("Genel Finans Analizi")),
.kart:has(h3:contains("📊 Genel Finans Analizi")) {
    background: #111625 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important; /* Kasa yeşili ince dış çerçeve */
    border-left: 4px solid #10b981 !important; /* Sol tarafta bereketli yeşil şerit */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Finans tablosunun içindeki satırların sayaç renkleriyle parlaması */
.finans-blok:style*="💻 Teknik Servis Net",
.finans-blok:contains("💻") {
    color: #06b6d4 !important; /* Teknik servis yazısı siber turkuaz parlar */
    font-weight: 600 !important;
}
.finans-blok:style*="📹 Kamera Montaj Net",
.finans-blok:contains("📹") {
    color: #f59e0b !important; /* Kamera montaj yazısı ateş sarısı parlar */
    font-weight: 600 !important;
}

/* En alttaki Kasa Net Durum alanını tam kurumsal bir muhasebe şeridine çeviriyoruz */
.kart div[style*="color:#10b981"],
.kart div[style*="color: rgb(16, 185, 129)"] {
    background: rgba(16, 185, 129, 0.08) !important;
    padding: 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.05) !important;
}
/* ⚡ TUANA BİLİŞİM SİBER NEON IŞIK ZIRHI VE GLOW MOTORU */

/* 1. KUTU: TEKNİK SERVİS KAZANCI (NEON TURKUAZ PARLAMA) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #06b6d4"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #06b6d4"] {
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.25), inset 0 0 10px rgba(6, 182, 212, 0.05) !important;
    border: 1px solid rgba(6, 182, 212, 0.5) !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #06b6d4"]:hover {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.5), inset 0 0 15px rgba(6, 182, 212, 0.1) !important;
    border-color: rgba(6, 182, 212, 0.9) !important;
}

/* 2. KUTU: KAMERA MONTAJ KAZANCI (NEON PARLAK ALTIN / TURUNCU) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #f59e0b"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #f59e0b"] {
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25), inset 0 0 10px rgba(245, 158, 11, 0.05) !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #f59e0b"]:hover {
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5), inset 0 0 15px rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.9) !important;
}

/* 3. KUTU: TOPLAM KAZANÇ (NEON BEREKETLİ KASA YEŞİLİ) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #10b981"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #10b981"] {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3), inset 0 0 10px rgba(16, 185, 129, 0.05) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #10b981"]:hover {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.6), inset 0 0 15px rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.9) !important;
}

/* 4. KUTU: AKTİF ARIZA (NEON CANLI MAVİ) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #3b82f6"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #3b82f6"] {
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.25), inset 0 0 10px rgba(59, 130, 246, 0.05) !important;
    border: 1px solid rgba(59, 130, 246, 0.5) !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #3b82f6"]:hover {
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.5), inset 0 0 15px rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.9) !important;
}

/* 5. KUTU: KAMERA MONTAJ SAYISI (NEON TEKNOLOJİ MAVİSİ) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #60a5fa"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #60a5fa"] {
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.25), inset 0 0 10px rgba(96, 165, 250, 0.05) !important;
    border: 1px solid rgba(96, 165, 250, 0.5) !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #60a5fa"]:hover {
    box-shadow: 0 0 25px rgba(96, 165, 250, 0.5), inset 0 0 15px rgba(96, 165, 250, 0.1) !important;
    border-color: rgba(96, 165, 250, 0.9) !important;
}

/* 6. KUTU: KAYITLI MÜŞTERİLER (NEON HOLDİNG MORU) */
.premium-grid-6 .p-kart[style*="border-left:3px solid #8b5cf6"],
.premium-grid-6 .p-kart[style*="border-left: 3px solid #8b5cf6"] {
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.25), inset 0 0 10px rgba(139, 92, 246, 0.05) !important;
    border: 1px solid rgba(139, 92, 246, 0.5) !important;
}
.premium-grid-6 .p-kart[style*="border-left:3px solid #8b5cf6"]:hover {
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.5), inset 0 0 15px rgba(139, 92, 246, 0.1) !important;
    border-color: rgba(139, 92, 246, 0.9) !important;
}

/* ⬇️ ALT TABLOLAR İÇİN SİBER NEON ÇERÇEVE GÜNCELLEMESİ */
.kart[style*="background:#111625"], 
.kart:has(h3:contains("Teknik Servis Bekleyen Arızalar")) {
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.15) !important; /* Arıza tablosu etrafında mavi neon bulut */
}

.kart:has(h3:contains("Genel Finans Analizi")),
.kart:has(h3:contains("📊 Genel Finans Analizi")) {
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.15) !important; /* Finans tablosu etrafında yeşil neon bulut */
}

/* En alttaki Kasa Net Durum şeridine ekstra neon parlama efekti */
.kart div[style*="color:#10b981"],
.kart div[style*="color: rgb(16, 185, 129)"] {
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.2), inset 0 0 5px rgba(16, 185, 129, 0.1) !important;
}
/* 🔧 TEKNİK SERVİS BEKLEYEN ARIZALAR KUTUSU EKSTRA NEON ÇERÇEVE SİSTEMİ */

/* Listenin ana gövdesini kaplayan dış kutuyu siber mavi neon ışıkla zırhlıyoruz */
.kart:has(h3:contains("Teknik Servis Bekleyen Arızalar")),
.kart:has(h3:contains("⚠️ Teknik Servis Bekleyen Arızalar")) {
    background: #111625 !important;
    border: 1px solid #3b82f6 !important; /* Çerçeveyi tam net siber mavi yapıyoruz */
    border-left: 5px solid #06b6d4 !important; /* Sol taraftaki kalın şeridi turkuaz parlatıyoruz */
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.35), 
                inset 0 0 12px rgba(59, 130, 246, 0.1) !important; /* Dışarıya ve içeriye mavi neon bulut yayar */
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Fareyle (veya telefonda parmakla) arıza listesinin üzerine gelindiğinde neon patlama yapar */
.kart:has(h3:contains("Teknik Servis Bekleyen Arızalar")):hover,
.kart:has(h3:contains("⚠️ Teknik Servis Bekleyen Arızalar")):hover {
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.55), 
                inset 0 0 20px rgba(59, 130, 246, 0.15) !important;
    border-color: #60a5fa !important;
}

/* Başlık alanının altındaki o küçük uyarı simgesini ve yazısını parlatıyoruz */
.kart:has(h3:contains("Teknik Servis Bekleyen Arızalar")) h3 {
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(59, 130, 246, 0.6) !important;
}
/* 🛠️ SERVİS LİSTESİ DURUM VE İŞLEM YÖNETİMİ ALANI FERAHLETMA MOTORU */

/* Formun genel kapsayıcısını genişletip sıkışıklığı bitiriyoruz */
.servis-tablo td form {
    max-width: 320px !important;
    gap: 8px !important;
    background: #0f172a !important; /* Daha lüks ve derin gece mavisi */
    border: 1px solid #1e293b !important;
    padding: 12px !important;
    border-radius: 10px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Durum Seçim (Select) kutusunu en üstte tam genişlik yapıp ferahlatıyoruz */
.servis-tablo td form .yeni_durum,
.servis-tablo td form select[name="yeni_durum"] {
    width: 100% !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    border: 1px solid #334155 !important;
    margin-bottom: 2px !important;
}

/* Sıkış tıkış duran "Yapılan İşlemler" Textarea alanını büyütüp nefes aldırıyoruz */
.servis-tablo td form textarea[name="yapilan_islem"] {
    width: 100% !important;
    min-height: 45px !important; /* Dikeyde genişletiyoruz ki yazılar içine gömülmesin */
    resize: vertical !important;
    padding: 8px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    border: 1px solid #1e293b !important;
    background: #070a13 !important; /* Not alanı içeri doğru derin dursun */
    color: #e2e8f0 !important;
    box-sizing: border-box !important;
}

/* İşçilik ve Parça fiyat kutularını alt alta yığmak yerine yan yana nizamla diziyoruz */
.servis-tablo td form div[style*="display: flex"],
.servis-tablo td form div {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fiyat kutularının içindeki inputları eşitleyerek şıklaştırıyoruz */
.servis-tablo td form input[type="number"] {
    flex: 1 !important;
    width: 50% !important;
    padding: 6px !important;
    font-size: 11px !important;
    text-align: center !important;
    border-radius: 6px !important;
    border: 1px solid #334155 !important;
    margin-bottom: 0 !important;
}

/* 🔄 Güncelle butonunu formun en altına jilet gibi büyük parmak butonu olarak oturtuyoruz */
.servis-tablo td form .btn-kaydet,
.servis-tablo td form button[name="durum_guncelle"] {
    width: 100% !important;
    padding: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
    background: #2563eb !important; /* Net kurumsal mavi */
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    margin-top: 4px !important;
    transition: background 0.2s !important;
}

.servis-tablo td form button[name="durum_guncelle"]:hover {
    background: #1d4ed8 !important; /* Fareyle gelince parlasın */
}

/* Beyaz Tema Aktifken Bu Alanın da Rengini Tam Uyumlu Yapıyoruz */
body.beyaz-tema-aktif .servis-tablo td form {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
body.beyaz-tema-aktif .servis-tablo td form textarea[name="yapilan_islem"] {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
body.beyaz-tema-aktif .servis-tablo td form select,
body.beyaz-tema-aktif .servis-tablo td form input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
/* 🌗 SERVİS LİSTESİ FORMLARINI TEMA MOTORUNA %100 BAĞLAMA KODU */

/* Karanlık modda seçici alanların uyumlu kalması için */
.servis-tablo td form {
    transition: background 0.25s ease, border-color 0.25s ease !important;
}

/* ☀️ AYDINLIK TEMA AKTİFKEN: Satır içi yazılan #0b0f17 rengini eziyoruz ve beyaz yapıyoruz */
body.beyaz-tema-aktif .servis-tablo td form,
body.beyaz-tema-aktif form[action*="servisler.php"] {
    background: #ffffff !important; /* Arka plan jilet gibi beyaz olur */
    border: 1px solid #cbd5e1 !important; /* Çerçeve kibar gri olur */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

/* Aydınlık modda formun içindeki yazı yazma ve fiyat alanları */
body.beyaz-tema-aktif .servis-tablo td form select,
body.beyaz-tema-aktif .servis-tablo td form textarea,
body.beyaz-tema-aktif .servis-tablo td form input {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* Aydınlık modda odaklanılan form kutusu parlaması */
body.beyaz-tema-aktif .servis-tablo td form select:focus,
body.beyaz-tema-aktif .servis-tablo td form textarea:focus,
body.beyaz-tema-aktif .servis-tablo td form input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    background: #ffffff !important;
}
/* ==========================================================================
   ☀️ TÜM PROJEDE GEÇERLİ PREMİUM ÇİFT TEMA (BEYAZ MOD) ENTEGRASYON KODLARI 
   ========================================================================== */

/* Butona basıldığında veya sayfa değiştiğinde gövdeyi kurumsal açık gri-beyaz tona geçirir */
body.beyaz-tema-aktif {
    background-color: #f1f5f9 !important; 
    color: #0f172a !important;
}

/* 🏢 Sol Menü Alanının Beyaz Mod Dönüşümü */
body.beyaz-tema-aktif .sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #cbd5e1 !important;
}
body.beyaz-tema-aktif .sidebar-header {
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
body.beyaz-tema-aktif .menu-link {
    color: #334155 !important;
}
body.beyaz-tema-aktif .menu-link:hover {
    background: #f8fafc !important;
    color: #2563eb !important; /* Kurumsal esnaf mavisi */
}
body.beyaz-tema-aktif .sidebar-alt-menu {
    background: #f8fafc !important;
    border-left: 2px solid #e2e8f0 !important;
}
body.beyaz-tema-aktif .sidebar-alt-link {
    color: #475569 !important;
}
body.beyaz-tema-aktif .sidebar-alt-link:hover {
    color: #2563eb !important;
}
body.beyaz-tema-aktif .tema-kontrol-bari {
    background: rgba(0, 0, 0, 0.03) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* 💻 Tüm Sayfalardaki Kartlar, Form Kutuları ve Grid Sayaçlar */
body.beyaz-tema-aktif .kart, 
body.beyaz-tema-aktif .p-kart {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}
body.beyaz-tema-aktif .premium-grid,
body.beyaz-tema-aktif .premium-grid-5,
body.beyaz-tema-aktif .premium-grid-6,
body.beyaz-tema-aktif .bolum-grid {
    background: transparent !important;
}
body.beyaz-tema-aktif .premium-grid .p-kart,
body.beyaz-tema-aktif .premium-grid-5 .p-kart,
body.beyaz-tema-aktif .premium-grid-6 .p-kart {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}

/* 📋 BÜTÜN PROJEDEKİ TABLOLARIN (Müşteri, Servis, Kamera) Beyaz Mod Görünümü */
body.beyaz-tema-aktif .tablo-kapsayici {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}
body.beyaz-tema-aktif .servis-tablo {
    background: #ffffff !important;
}
body.beyaz-tema-aktif .servis-tablo th {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}
body.beyaz-tema-aktif .servis-tablo td {
    border-bottom: 1px solid #f1f5f9 !important;
    color: #334155 !important;
    background: #ffffff !important;
}
body.beyaz-tema-aktif .servis-tablo tbody tr:nth-child(even) td {
    background-color: #f8fafc !important; /* Temiz zebra dokusu */
}
body.beyaz-tema-aktif .servis-tablo tbody tr:hover td {
    background-color: #f1f5f9 !important; /* Satır parlaması */
}

/* 📥 Form Giriş Kutuları ve Arama Alanları */
body.beyaz-tema-aktif .input-alan,
body.beyaz-tema-aktif input[type="text"],
body.beyaz-tema-aktif input[type="number"],
body.beyaz-tema-aktif input[type="date"],
body.beyaz-tema-aktif select,
body.beyaz-tema-aktif textarea {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* 🔧 Servis Sayfasındaki O İnatçı Sıkışık Form Alanının Renk Koruması */
body.beyaz-tema-aktif .servis-tablo td form {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}
body.beyaz-tema-aktif .servis-tablo td form select,
body.beyaz-tema-aktif .servis-tablo td form textarea,
body.beyaz-tema-aktif .servis-tablo td form input {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* Metinler, Tabelalar ve Başlık Alanları */
body.beyaz-tema-aktif .premium-grid-6 .p-kart .baslik,
body.beyaz-tema-aktif .premium-grid-5 .p-kart .baslik,
body.beyaz-tema-aktif .premium-grid .p-kart .baslik {
    color: #64748b !important;
}
body.beyaz-tema-aktif h2, 
body.beyaz-tema-aktif h3, 
body.beyaz-tema-aktif h5,
body.beyaz-tema-aktif .canli-satir h5 {
    color: #0f172a !important;
}
body.beyaz-tema-aktif .sayfa-ust-tabela {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}
body.beyaz-tema-aktif .finans-blok {
    border-bottom: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}
/* 🔓 TUANA BİLİŞİM BUTON KİLİTLERİNİ AÇMA MOTORU */

/* Şifre havuzundaki Düzenle ve Sil butonlarının tıklama alanını ve önceliğini zirveye çıkarıyoruz */
.servis-tablo td div[style*="display:flex"] a,
.servis-tablo td div[style*="display: flex"] a,
.servis-tablo .btn-islem,
a[href*="kayit-cihazi-duzenle.php"],
a[href*="kayit-cihazi-takip.php?sil_id="] {
    position: relative !important;
    pointer-events: auto !important; /* Tarayıcının tıklama engelini kırar */
    cursor: pointer !important; /* Fare imlecini el işaretine çevirir */
    z-index: 99999 !important; /* Butonu tüm hayalet katmanların en üstüne fırlatır */
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Butonlara tıklandığında arka planda çalışmasını engelleyen tüm CSS filtrelerini sıfırlıyoruz */
.servis-tablo td, .servis-tablo tr {
    pointer-events: auto !important;
}
/* ==========================================================================
   📱 TUANA BİLİŞİM - EVRENSEL MOBİL GÖRÜNTÜLEME VE DETAY TOPARLAMA KALKANI (V4)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 1. Ana İçerik Alanı Telefona Jilet Gibi Sığsın */
    .ana-icerik {
        padding: 8px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Üst Tabelayı ve Butonunu Düzelt */
    .tuana-sayfa-ust-tabela, .sayfa-ust-tabela {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px !important;
    }
    .tuana-sayfa-ust-tabela a, .sayfa-ust-tabela a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* 3. Ana Tablonun Sağa Taşmasını Engelle ve Kaydırılabilir Yap */
    .tablo-kapsayici {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 15px;
        border: 1px solid #1e2538;
        border-radius: 6px;
    }
    .servis-tablo {
        width: 100% !important;
        min-width: 700px !important;
    }

    /* 4. GÖRÜNTÜLE PANELİNİN (DETAY) TELEFONDAKİ DAĞINIKLIĞINI BIÇAK GİBİ KESEN AYAR */
    #detayKapsayici, #detayKapsayici, [id*="detayKapsayici"], [id*="detayKapsayici"], .kart {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Bilgilerin yazıldığı iki sütunlu grid yapısını telefonda direkt teke düşürüp alt alta diziyoruz */
    .detay-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Detay içindeki müşteri ve finans kartlarının iç boşluklarını telefona uyarla */
    .detay-kart {
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Müşteri detay satırlarını telefonda patlamayacak şekilde esnet usta */
    .detay-satir {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        font-size: 12px !important;
    }

    /* 5. DETAY PANELİNİN İÇİNDEKİ MALZEME TABLOSUNU TELEFONDA KARTVİZİTE ÇEVİRME AYARI */
    .mini-tablo, 
    .mini-tablo thead, 
    .mini-tablo tbody, 
    .mini-tablo tr, 
    .mini-tablo th, 
    .mini-tablo td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Detay tablosunun üst başlık şeridini telefonda tamamen gizle */
    .mini-tablo thead {
        display: none !important;
    }

    /* Detay içindeki her bir malzeme satırı artık telefonda bağımsız, lüks birer kutu! */
    .mini-tablo tbody tr {
        background: #0b0f17 !important;
        border: 1px solid #1e2538 !important;
        border-radius: 8px !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    /* Hücreleri yan yana nizamla usta; (Sol tarafta başlık, Sağ tarafta sistemdeki veri) */
    .mini-tablo tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        border: none !important;
        border-bottom: 1px dashed rgba(255,255,255,0.03) !important;
        text-align: right !important;
        font-size: 13px !important;
    }
    
    /* Hücrelerin en sonundaki Düzenle ve Sil buton alanının alt çizgisini kaldır */
    .mini-tablo tbody td:last-child {
        border-bottom: none !important;
        display: block !important;
        text-align: center !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
    }

    /* JavaScript tablosundaki td'lerin önüne telefonda otomatik etiket takalım */
    .mini-tablo tbody td:nth-child(1)::before { content: "Malzeme: "; font-weight: 700; color: #64748b; font-size: 12px; float: left; }
    .mini-tablo tbody td:nth-child(2)::before { content: "Adet: "; font-weight: 700; color: #64748b; font-size: 12px; float: left; }
    .mini-tablo tbody td:nth-child(3)::before { content: "Alınma Tarihi: "; font-weight: 700; color: #64748b; font-size: 12px; float: left; }
    .mini-tablo tbody td:nth-child(4)::before { content: "Durum: "; font-weight: 700; color: #64748b; font-size: 12px; float: left; }
    .mini-tablo tbody td:nth-child(5)::before { content: "Garanti: "; font-weight: 700; color: #64748b; font-size: 12px; float: left; }
    
    /* Buton hücresinin önündeki etiketi gizle */
    .mini-tablo tbody td:last-child::before {
        display: none !important;
    }

    /* Düzenle ve Sil butonlarını telefonda yan yana sıfıra sıfır fit hizala */
    .tuana-mobil-islem-grup, .mini-tablo tbody td div {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
    .tuana-mobil-islem-grup .btn, .mini-tablo tbody td div .btn {
        flex: 1 !important;
        padding: 10px 0 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-align: center !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* Modalları Telefona Sığdır */
    .tuana-duzenle-modal, .tuana-ilave-modal {
        width: 95% !important;
        max-width: 95% !important;
        padding: 15px !important;
    }
}