:root {
    --navy-deep: #1F3358;
    --navy-mid: #2C4A7C;
    --navy-darker: #16233D;
    --amber: #D98E3E;
    --paper: #F0F1F3;
    --ink: #1B2430;
    --muted: #6B7280;
    --border: #E5E7EB;
    --error: #C24B4B;
    --error-bg: #FBEDEC;
    --success: #2F8F5B;
    --success-bg: #EAF6EF;
    --accent: #2F5FE0;
    --accent-bg: #EAF0FE;
    --accent-dark: #1E45B0;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, Segoe UI, sans-serif;
}

h1, h2, .muhur {
    font-family: 'Sora', sans-serif;
}

.mini-muhur-gorsel {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    padding: 3px;
    box-sizing: border-box;
}

.ekran {
    display: flex;
    min-height: 100vh;
}

.marka-panel {
    position: relative;
    flex: 0 0 46%;
    background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy-darker) 100%);
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Ortalama artık marka-icerik'in kendi flex:1 alanında yapılıyor (yukarıya
       bakın) - burada "center" kalırsa marka-alt-satir da o ortalanan gruba
       dahil olup en alta sabitlenmiyordu. */
    justify-content: flex-start;
    padding: 60px;
}

.marka-fon {
    position: absolute;
    inset: 0;
    background-image: url('/img/logo-icon.png');
    background-size: 220px;
    background-position: 115% 115%;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
}

.marka-karartma {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 15%, rgba(47, 95, 224, 0.18), transparent 55%);
    pointer-events: none;
}

.marka-icerik {
    position: relative;
    max-width: 480px;
    /* marka-panel'in tek justify-content:center'ı hem bu bloğu hem de alttaki
       marka-alt-satir'ı TEK GRUP olarak ortaladığı için "alt satır" aslında
       panelin gerçek en altına değil, içeriğin hemen altına oturuyordu.
       Bu bloğa flex:1 verip kendi alanı içinde ortalanmasını sağlayınca,
       marka-alt-satir doğal olarak panelin en altına iniyor. */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.marka-logo-satiri {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
}

.marka-logo-ikon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: #fff;
    border-radius: 12px;
    padding: 5px;
    box-sizing: border-box;
}

.marka-logo-metin {
    display: flex;
    flex-direction: column;
}

.marka-logo-ad {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.marka-logo-ad strong {
    font-weight: 800;
}

.marka-logo-alt {
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
}

.marka-icerik h1 {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
}

.slogan {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 36px 0;
}

.ozellik-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ozellik-kart {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ozellik-ikon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ozellik-ikon svg {
    width: 18px;
    height: 18px;
}

.ozellik-baslik {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
}

.ozellik-alt {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

.marka-alt-satir {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 48px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    /* Görsel özel bir görsel (kullanıcının yüklediği fotoğraf) olduğunda, fotoğrafın
       kendi içindeki desenler/yazılarla karışmasın diye metne her zaman okunaklı
       kalacak bir gölge veriyoruz - karartma katmanı tek başına yetmeyebiliyor
       (özellikle fotoğrafın parlak/beyaz bölgelerinde). */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.5);
}

.marka-etiket {
    font-weight: 800;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
    /* Arka plandaki fotoğraftan bağımsız her zaman okunsun diye hafif bir "kapsül"
       (pill) zemin - düz renkli varsayılan degrade zeminde neredeyse görünmez,
       ama kullanıcının kendi fotoğrafını yüklediği durumda kritik önemde. */
    background: rgba(15, 23, 42, 0.35);
    padding: 8px 12px;
    border-radius: 10px;
    backdrop-filter: blur(2px);
}

.form-alani {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #EEF0F4;
    padding: 24px 32px 32px;
    max-height: 100vh;
    overflow-y: auto;
}

.ust-arac-cubugu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tema-dugmesi {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.tema-dugmesi svg {
    width: 16px;
    height: 16px;
}

.dil-dugmesi {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
}

.dil-ok {
    font-size: 10px;
    color: var(--muted);
}

.form-karti-disi {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-karti {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(31, 51, 88, 0.10);
    padding: 40px 40px 0;
    overflow: hidden;
}

.form-logo-satiri {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.form-logo-ikon {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.form-logo-metin {
    display: flex;
    flex-direction: column;
}

.form-logo-ad {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
}

.form-logo-ad strong {
    font-weight: 800;
}

.form-logo-alt {
    font-size: 9.5px;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin-top: 1px;
}

.hosgeldin-baslik {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px 0;
    text-align: center;
}

.hosgeldin-alt {
    font-size: 13.5px;
    color: var(--muted);
    text-align: center;
    margin: 0 0 24px 0;
}

.ikonlu-girdi {
    position: relative;
    display: flex;
    align-items: center;
}

.ikonlu-girdi svg {
    position: absolute;
    left: 13px;
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}

.ikonlu-girdi input {
    padding-left: 38px !important;
}

.sifre-goster-buton {
    position: absolute;
    right: 12px;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
}

.sifre-goster-buton svg {
    position: static;
    width: 17px;
    height: 17px;
    pointer-events: auto;
}

.ana-buton-oklu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ana-buton-oklu svg {
    width: 17px;
    height: 17px;
}

.form-alinti {
    position: relative;
    margin: 32px -40px 0;
    padding: 26px 40px 22px;
    text-align: center;
    background: linear-gradient(180deg, var(--accent-bg) 0%, #DCE6FB 100%);
    border-radius: 0 0 20px 20px;
}

.form-dalga {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

.form-alinti p {
    font-size: 13px;
    font-style: italic;
    color: var(--muted);
    margin: 0;
}

.sekme-gecis {
    position: relative;
    display: flex;
    background: #EFECE4;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 28px;
}

.sekme {
    flex: 1;
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

.sekme.aktif {
    color: var(--navy-deep);
}

.sekme-isaretci {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sekme-isaretci.sag {
    transform: translateX(100%);
}

/* 3'lü sekme geçişleri (Yönetim Paneli) için - genişliği ve kayma oranını yeniden tanımlıyoruz. */
.sekme-gecis:has(.sekme:nth-child(3)) .sekme-isaretci {
    width: calc(33.333% - 4px);
}

.sekme-isaretci.orta {
    transform: translateX(100%);
}

.sekme-gecis:has(.sekme:nth-child(3)) .sekme-isaretci.sag {
    transform: translateX(200%);
}

/* 4'lü sekme geçişleri (Yönetim Paneli - Müşteri İçe Aktar eklenince). */
.sekme-gecis:has(.sekme:nth-child(4)) .sekme-isaretci {
    width: calc(25% - 4px);
}

.sekme-gecis:has(.sekme:nth-child(4)) .sekme-isaretci.orta {
    transform: translateX(100%);
}

.sekme-gecis:has(.sekme:nth-child(4)) .sekme-isaretci.uc {
    transform: translateX(200%);
}

.sekme-gecis:has(.sekme:nth-child(4)) .sekme-isaretci.sag {
    transform: translateX(300%);
}

/* 6'lı sekme geçişleri (Yönetim Paneli - Destek Talepleri + Sistem SMS Ayarları eklenince). */
.sekme-gecis:has(.sekme:nth-child(6)) .sekme-isaretci {
    width: calc(16.6666% - 4px);
}

.sekme-gecis:has(.sekme:nth-child(6)) .sekme-isaretci.orta {
    transform: translateX(100%);
}

.sekme-gecis:has(.sekme:nth-child(6)) .sekme-isaretci.uc {
    transform: translateX(200%);
}

.sekme-gecis:has(.sekme:nth-child(6)) .sekme-isaretci.dort {
    transform: translateX(300%);
}

.sekme-gecis:has(.sekme:nth-child(6)) .sekme-isaretci.bes {
    transform: translateX(400%);
}

.sekme-gecis:has(.sekme:nth-child(6)) .sekme-isaretci.sag {
    transform: translateX(500%);
}

/* 7'li sekme geçişleri (Yönetim Paneli - Duyurular eklenince). */
.sekme-gecis:has(.sekme:nth-child(7)) .sekme-isaretci {
    width: calc(14.2857% - 4px);
}

.sekme-gecis:has(.sekme:nth-child(7)) .sekme-isaretci.orta {
    transform: translateX(100%);
}

.sekme-gecis:has(.sekme:nth-child(7)) .sekme-isaretci.uc {
    transform: translateX(200%);
}

.sekme-gecis:has(.sekme:nth-child(7)) .sekme-isaretci.dort {
    transform: translateX(300%);
}

.sekme-gecis:has(.sekme:nth-child(7)) .sekme-isaretci.bes {
    transform: translateX(400%);
}

.sekme-gecis:has(.sekme:nth-child(7)) .sekme-isaretci.alti {
    transform: translateX(500%);
}

.sekme-gecis:has(.sekme:nth-child(7)) .sekme-isaretci.sag {
    transform: translateX(600%);
}

/* 9'lu sekme geçişleri (Yönetim Paneli - Fiyatlandırma + Hatırlatma Şablonları eklenince). */
.sekme-gecis:has(.sekme:nth-child(9)) .sekme-isaretci {
    width: calc(11.111% - 4px);
}

.sekme-gecis:has(.sekme:nth-child(9)) .sekme-isaretci.orta {
    transform: translateX(100%);
}

.sekme-gecis:has(.sekme:nth-child(9)) .sekme-isaretci.uc {
    transform: translateX(200%);
}

.sekme-gecis:has(.sekme:nth-child(9)) .sekme-isaretci.dort {
    transform: translateX(300%);
}

.sekme-gecis:has(.sekme:nth-child(9)) .sekme-isaretci.bes {
    transform: translateX(400%);
}

.sekme-gecis:has(.sekme:nth-child(9)) .sekme-isaretci.alti {
    transform: translateX(500%);
}

.sekme-gecis:has(.sekme:nth-child(9)) .sekme-isaretci.yedi {
    transform: translateX(600%);
}

.sekme-gecis:has(.sekme:nth-child(9)) .sekme-isaretci.sekiz {
    transform: translateX(700%);
}

.sekme-gecis:has(.sekme:nth-child(9)) .sekme-isaretci.sag {
    transform: translateX(800%);
}

/* Telefonda 5+ sekmeli geçişler (Yönetim Paneli'nin 9 sekmesi gibi) yan yana
   sıkışıp okunamaz oluyordu - yatay kaydırmalı, satır atlamasız bir bar'a
   dönüştürüyoruz ve kayan beyaz "isaretci"yi (konumu sadece masaüstü genişliği
   için hesaplanıyordu) yerine aktif sekmeye doğrudan arkaplan rengi veriyoruz. */
@media screen and (max-width: 768px) {
    .sekme-gecis:has(.sekme:nth-child(5)) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sekme-gecis:has(.sekme:nth-child(5))::-webkit-scrollbar {
        display: none;
    }

    .sekme-gecis:has(.sekme:nth-child(5)) .sekme {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 16px;
    }

    .sekme-gecis:has(.sekme:nth-child(5)) .sekme-isaretci {
        display: none;
    }

    .sekme-gecis:has(.sekme:nth-child(5)) .sekme.aktif {
        background: #fff;
        border-radius: 7px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }
}

.alan-grubu {
    margin-bottom: 16px;
}

.alan-grubu label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}

/* "Bu İşlem Kasaya ... Aktarılsın mı?" gibi tekli onay kutulu alanlar - normal
   alan-grubu'ndan farklı olarak yatay hizalı, kutunun kendisi label'ın içinde. */
.alan-grubu-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
}

.alan-grubu-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.alan-grubu input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14.5px;
    font-family: 'Inter', sans-serif;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.alan-grubu input:focus {
    outline: none;
    border-color: var(--navy-mid);
    box-shadow: 0 0 0 3px rgba(44, 74, 124, 0.12);
}

.iki-sutun {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.uc-sutun {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.form-karti-genis {
    max-width: 620px !important;
}

.sifre-kontrol-yatay {
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
    gap: 4px 10px;
}

.sifre-kontrol-yatay li {
    font-size: 11px;
    white-space: nowrap;
}

.veya-ayrac {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    margin: 18px 0;
}

.veya-ayrac::before,
.veya-ayrac::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
}

.veya-ayrac span {
    padding: 0 12px;
}

.ikincil-tam-buton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    border: 1.5px solid var(--border);
    background: #fff;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
}

.ikincil-tam-buton svg {
    width: 17px;
    height: 17px;
    color: var(--accent);
}

.ikincil-tam-buton:hover {
    background: var(--paper);
    border-color: var(--accent);
}

.alan-uyari {
    font-size: 12.5px;
    color: var(--error);
    margin-top: 5px;
}

.alan-ipucu {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 5px;
}

.alan-grubu select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14.5px;
    font-family: 'Inter', sans-serif;
    background: #fff;
    color: var(--ink);
}

.alan-grubu select:disabled {
    background: #F5F3EE;
    color: var(--muted);
}

.alan-grubu select:focus {
    outline: none;
    border-color: var(--navy-mid);
    box-shadow: 0 0 0 3px rgba(44, 74, 124, 0.12);
}

.sifre-kontrol {
    list-style: none;
    padding: 0;
    margin: 4px 0 18px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}

.sifre-kontrol li {
    font-size: 12.5px;
    color: var(--muted);
    transition: color 0.15s ease;
}

.sifre-kontrol li.tamam {
    color: var(--success);
    font-weight: 600;
}

.dogrulama-baslik {
    font-size: 22px;
    margin: 0 0 8px 0;
}

.dogrulama-aciklama {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 22px 0;
}

.urun-karsilama {
    background: rgba(47, 95, 224, 0.08);
    border: 1px solid rgba(47, 95, 224, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--navy-deep);
    margin-bottom: 16px;
    line-height: 1.5;
}

.fiyat-izgara {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.fiyat-kart {
    flex: 1;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    position: relative;
}

.fiyat-kart-onerilen {
    border-color: var(--navy-mid);
    box-shadow: 0 4px 18px rgba(44, 74, 124, 0.14);
}

.fiyat-rozet {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy-mid);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
}

.fiyat-etiket {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
}

.fiyat-tutar {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 6px;
}

.alt-satir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.link-buton {
    background: none;
    border: none;
    color: var(--navy-mid);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.link-buton:hover {
    text-decoration: underline;
}

.link-buton.kucuk {
    font-size: 12.5px;
    font-weight: 500;
}

.ana-buton + .link-buton {
    display: block;
    margin: 14px auto 0;
    text-align: center;
}

.checkbox-satir {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
}

.uyari {
    font-size: 13px;
    padding: 10px 13px;
    border-radius: 8px;
    margin-bottom: 18px;
}

.uyari-hata {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid #F2CFCC;
}

.uyari-basari {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid #C9E9D5;
}

/* Görev #48: Perde Hesap ve birçok "modern" sayfada (Siparisler, Personel,
   Teslimatlar, PerdeHesapAyarlari, SatinAl) tekrar tekrar aynı satır içi (inline)
   stille yazılan "✓ Kaydedildi" tarzı vurgulu başarı bandı - burada tek bir sınıfa
   çıkarıldı. Sadece PerdeHesap.razor bu sınıfa taşındı (görev kapsamı); diğer
   sayfalardaki inline stiller bu görevin kapsamı dışında bırakıldı. */
.uyari-basari-vurgu {
    background: #E1F5EE;
    color: #085041;
    border: 1px solid #2F8F5B;
}

/* Görev #48: Perde Hesap'taki "Düzenleme Modu" bilgi bandı - eskiden satır içi stildi. */
.uyari-bilgi {
    background: #EEEDFE;
    color: #3C3489;
    border: 1px solid #3C3489;
}

.sube-renk-seridi {
    height: 4px;
    width: 100%;
    transition: background-color .15s ease;
}

.destek-modu-seridi {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex: none;
    width: 100%;
    box-sizing: border-box;
    gap: 14px;
    padding: 6px 16px;
    font-size: 12.5px;
    line-height: 1.3;
    background: #FFF3D6;
    color: #7A5A00;
    border-bottom: 1px solid #F2D98C;
}

.ana-buton {
    width: 100%;
    padding: 13px 0;
    border: none;
    border-radius: 8px;
    background: var(--navy-deep);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.ana-buton:hover:not(:disabled) {
    background: var(--navy-mid);
}

.ana-buton:active:not(:disabled) {
    transform: translateY(1px);
}

.ana-buton:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Kalıcı/geri alınamaz bir eylemi onaylayan birincil buton (ör. "Hesabı Sil"
   modalındaki "Evet, Kalıcı Olarak Sil") - normal lacivert yerine kırmızı. */
.ana-buton.tehlike {
    background: var(--error);
}

.ana-buton.tehlike:hover:not(:disabled) {
    background: #A83D3D;
}

/* ================= Uygulama Gövdesi: Sol Menü + Üst Çubuk ================= */

.uygulama-govde {
    display: flex;
    min-height: 100vh;
    background: var(--paper);
}

/* ---- Sol menü ---- */

.yan-menu {
    width: 246px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.18s ease;
}

.yan-menu-daraltilmis {
    width: 72px;
}

.yan-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 65px;
    box-sizing: border-box;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.yan-menu-daraltilmis .yan-logo {
    justify-content: center;
    padding: 0;
}

.yan-daralt-buton {
    margin-left: auto;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.yan-daralt-buton svg {
    width: 13px;
    height: 13px;
}

.yan-daralt-buton:hover {
    background: var(--paper);
    color: var(--ink);
}

.yan-menu-daraltilmis .yan-daralt-buton {
    position: absolute;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.yan-logo span {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ink);
}

.yan-nav {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 2px;
    flex: 1;
}

.yan-menu-daraltilmis .yan-link,
.yan-menu-daraltilmis .yan-grup-baslik {
    justify-content: center;
    padding: 12px 0;
    border-left: none;
}

.yan-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #4B5563;
    text-decoration: none;
    cursor: pointer;
}

.yan-link:hover {
    background: var(--paper);
    color: var(--ink);
}

.yan-link.aktif {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 700;
}

.yan-link.aktif .yan-simge {
    color: var(--accent);
}

.yan-link.devre-disi {
    color: #C3C8D1;
    cursor: default;
}

.yan-link.devre-disi:hover {
    background: none;
}

.yan-simge {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.yan-simge svg {
    width: 100%;
    height: 100%;
}

.yan-yakinda {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--amber);
    background: rgba(217, 142, 61, 0.14);
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
}

/* ---- Bölüm başlıkları (İŞLEMLER / KAYITLAR / PERDE OTOMASYONU / ANALİZ / AYARLAR) ----
   Düz (akordeonsuz) bağlantı gruplarının üstünde, tıklanamayan küçük bir ayraç etiket -
   menüyü "ne yaptığınız" / "neye baktığınız" diye netçe ikiye ayırır. Daraltılmış
   menüde hiç basılmıyor (bkz. PanoLayout.razor'daki @if (!sidebarDaraltilmis)). */
.yan-bolum-baslik {
    margin: 14px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #9CA3AF;
}

/* Tıklanınca altındaki öğeleri açıp kapatan bölüm başlığı */
.yan-bolum-acilir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 24px);
    padding: 4px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.yan-bolum-acilir:hover {
    color: var(--accent);
}

.yan-nav > .yan-bolum-baslik:first-child {
    margin-top: 4px;
}

/* Ayarlar/Yönetim Paneli'nden önce, geri kalan menüden hafifçe ayırmak için ince bir
   çizgi - "Ayarlar" bölüm başlığının kendisi zaten yeterince ayırıyor, bu sadece bir
   nefes boşluğu bırakıyor. */
.yan-ayirac {
    height: 1px;
    margin: 10px 12px 2px;
    background: var(--border);
}

/* ---- Akordeon gruplari ---- */

.yan-grup {
    display: flex;
    flex-direction: column;
}

.yan-grup-baslik {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #4B5563;
    cursor: pointer;
    text-align: left;
}

.yan-grup-baslik:hover {
    background: var(--paper);
    color: var(--ink);
}

.yan-grup-baslik.yan-grup-acik {
    background: var(--accent-bg);
    color: var(--accent);
}

.yan-grup-baslik.yan-grup-acik .yan-simge {
    color: var(--accent);
}

.yan-grup-ad {
    flex: 1;
}

.yan-ok {
    font-size: 11px;
    color: #9CA3AF;
    transition: transform 0.15s ease;
}

.yan-ok.acik {
    transform: rotate(180deg);
    color: var(--accent);
}

.yan-alt-liste {
    display: flex;
    flex-direction: column;
    margin: 2px 0 4px 34px;
    padding-left: 10px;
    border-left: 1.5px solid var(--border);
}

.yan-alt-oge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    font-size: 12.5px;
    color: var(--muted);
    border-radius: 6px;
}

.yan-alt-aktif {
    color: #4B5563;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
}

.yan-alt-aktif:hover {
    background: var(--paper);
    color: var(--ink);
}

.yan-alt-aktif.yan-alt-secili {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 700;
}

.yan-imza {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    text-decoration: none;
    cursor: pointer;
}

.yan-imza:hover {
    background: var(--paper);
}

.yan-menu-daraltilmis .yan-imza {
    justify-content: center;
    padding: 14px 0;
}

.yan-imza-rozet {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    padding: 3px;
    box-sizing: border-box;
}

.yan-imza-metin {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.yan-imza-ad {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yan-imza-alt {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Sol menü renk temaları (Ayarlar > Sol Menü Rengi) ---- */

.yan-menu.yan-menu-gradyan,
.yan-menu.yan-menu-lacivert {
    border-right: none;
}

.yan-menu.yan-menu-gradyan {
    background: linear-gradient(135deg, #7DD3FC 0%, #0B63CE 100%);
}

.yan-menu.yan-menu-lacivert {
    background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-darker) 100%);
}

.yan-menu.yan-menu-gradyan .yan-logo,
.yan-menu.yan-menu-lacivert .yan-logo,
.yan-menu.yan-menu-gradyan .yan-imza,
.yan-menu.yan-menu-lacivert .yan-imza {
    border-color: rgba(255, 255, 255, 0.16);
}

.yan-menu.yan-menu-gradyan .yan-logo span,
.yan-menu.yan-menu-lacivert .yan-logo span,
.yan-menu.yan-menu-gradyan .yan-imza-ad,
.yan-menu.yan-menu-lacivert .yan-imza-ad {
    color: #fff;
}

.yan-menu.yan-menu-gradyan .yan-imza-alt,
.yan-menu.yan-menu-lacivert .yan-imza-alt,
.yan-menu.yan-menu-gradyan .yan-kullanici-rol,
.yan-menu.yan-menu-lacivert .yan-kullanici-rol {
    color: rgba(255, 255, 255, 0.55);
}

.yan-menu.yan-menu-gradyan .yan-bolum-baslik,
.yan-menu.yan-menu-lacivert .yan-bolum-baslik {
    color: rgba(255, 255, 255, 0.45);
}

.yan-menu.yan-menu-gradyan .yan-ayirac,
.yan-menu.yan-menu-lacivert .yan-ayirac {
    background: rgba(255, 255, 255, 0.18);
}

.yan-menu.yan-menu-gradyan .yan-daralt-buton,
.yan-menu.yan-menu-lacivert .yan-daralt-buton {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.yan-menu.yan-menu-gradyan .yan-link,
.yan-menu.yan-menu-lacivert .yan-link,
.yan-menu.yan-menu-gradyan .yan-grup-baslik,
.yan-menu.yan-menu-lacivert .yan-grup-baslik {
    color: rgba(255, 255, 255, 0.75);
}

.yan-menu.yan-menu-gradyan .yan-link:hover,
.yan-menu.yan-menu-lacivert .yan-link:hover,
.yan-menu.yan-menu-gradyan .yan-grup-baslik:hover,
.yan-menu.yan-menu-lacivert .yan-grup-baslik:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.yan-menu.yan-menu-gradyan .yan-link.aktif,
.yan-menu.yan-menu-lacivert .yan-link.aktif,
.yan-menu.yan-menu-gradyan .yan-grup-baslik.yan-grup-acik,
.yan-menu.yan-menu-lacivert .yan-grup-baslik.yan-grup-acik {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.yan-menu.yan-menu-gradyan .yan-link.aktif .yan-simge,
.yan-menu.yan-menu-lacivert .yan-link.aktif .yan-simge,
.yan-menu.yan-menu-gradyan .yan-grup-baslik.yan-grup-acik .yan-simge,
.yan-menu.yan-menu-lacivert .yan-grup-baslik.yan-grup-acik .yan-simge {
    color: #fff;
}

.yan-menu.yan-menu-gradyan .yan-ok,
.yan-menu.yan-menu-lacivert .yan-ok {
    color: rgba(255, 255, 255, 0.55);
}

.yan-menu.yan-menu-gradyan .yan-ok.acik,
.yan-menu.yan-menu-lacivert .yan-ok.acik {
    color: #fff;
}

.yan-menu.yan-menu-gradyan .yan-alt-liste,
.yan-menu.yan-menu-lacivert .yan-alt-liste {
    border-left-color: rgba(255, 255, 255, 0.18);
}

.yan-menu.yan-menu-gradyan .yan-alt-aktif,
.yan-menu.yan-menu-lacivert .yan-alt-aktif {
    color: rgba(255, 255, 255, 0.65);
}

.yan-menu.yan-menu-gradyan .yan-alt-aktif:hover,
.yan-menu.yan-menu-lacivert .yan-alt-aktif:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.yan-menu.yan-menu-gradyan .yan-alt-aktif.yan-alt-secili,
.yan-menu.yan-menu-lacivert .yan-alt-aktif.yan-alt-secili {
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
}

/* ---- Ayarlar sayfası: tema seçim kartları ---- */

.tema-secim-izgara {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.tema-secim-kart {
    position: relative;
    width: 160px;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.tema-secim-kart.secili {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.tema-onizleme {
    width: 100%;
    height: 90px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    box-sizing: border-box;
}

.tema-onizleme-beyaz {
    background: #fff;
    border: 1px solid var(--border);
}

.tema-onizleme-gradyan {
    background: linear-gradient(135deg, #7DD3FC 0%, #0B63CE 100%);
}

.tema-onizleme-lacivert {
    background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-darker) 100%);
}

.tema-onizleme-cizgi {
    height: 8px;
    border-radius: 4px;
    background: rgba(120, 120, 120, 0.25);
}

.tema-onizleme-beyaz .tema-onizleme-cizgi {
    background: var(--paper);
}

.tema-onizleme-gradyan .tema-onizleme-cizgi,
.tema-onizleme-lacivert .tema-onizleme-cizgi {
    background: rgba(255, 255, 255, 0.25);
}

.tema-onizleme-cizgi.tema-onizleme-aktif {
    background: var(--accent);
    width: 70%;
}

.tema-onizleme-gradyan .tema-onizleme-cizgi.tema-onizleme-aktif,
.tema-onizleme-lacivert .tema-onizleme-cizgi.tema-onizleme-aktif {
    background: #fff;
}

.tema-tik {
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--accent);
    font-weight: 800;
}

/* ---- Sağ taraf: üst çubuk + içerik ---- */

.ana-govde {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #F0F1F3;
}

.ust-cubuk-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid var(--border);
    height: 65px;
    box-sizing: border-box;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 15;
}

.magaza-adi-v2 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
}

.demo-rozeti {
    margin-left: 10px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--amber);
    background: rgba(217, 142, 61, 0.14);
    padding: 3px 9px;
    border-radius: 20px;
    text-decoration: none;
    vertical-align: middle;
}

.demo-rozeti:hover {
    background: rgba(217, 142, 61, 0.24);
}

/* Aktif Şube Seçici - header'daki şube değiştirici dropdown */
.sube-secici {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 14px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--paper);
    cursor: pointer;
    user-select: none;
}

.sube-secici-ad {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
}

.sube-acilir-menu {
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: 240px;
    max-height: 320px;
    overflow-y: auto;
}

.acilir-oge-secili {
    color: var(--accent) !important;
    font-weight: 700 !important;
    background: var(--accent-bg);
}

.acilir-oge-vurgu {
    color: var(--accent) !important;
    font-weight: 700 !important;
}

.ust-cubuk-sag {
    display: flex;
    align-items: center;
    gap: 20px;
}

.bildirim-ikon {
    position: relative;
    width: 19px;
    height: 19px;
    color: var(--muted);
    cursor: default;
}

.bildirim-ikon svg {
    width: 100%;
    height: 100%;
}

.bildirim-nokta {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--error);
    border: 1.5px solid #fff;
}

.kullanici-menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--accent);
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kullanici-bilgi {
    display: flex;
    flex-direction: column;
}

.kullanici-ad {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

.kullanici-rol {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.3;
}

.ok {
    font-size: 12px;
    color: var(--muted);
    transition: transform 0.15s ease;
}

.ok.acik {
    transform: rotate(180deg);
}

.acilir-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    color: var(--ink);
}

.acilir-baslik {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.acilir-magaza {
    font-weight: 700;
    font-size: 13.5px;
}

.acilir-pozisyon {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.acilir-oge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 11px 16px;
    border: none;
    background: none;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    cursor: pointer;
    color: var(--ink);
    text-decoration: none;
    box-sizing: border-box;
}

.acilir-oge:hover {
    background: var(--paper);
}

.acilir-oge.devre-disi {
    color: var(--muted);
    cursor: default;
}

.acilir-oge.devre-disi:hover {
    background: none;
}

.acilir-oge.cikis {
    color: var(--error);
    border-top: 1px solid var(--border);
}

.kucuk-etiket {
    font-size: 10.5px;
    background: var(--paper);
    color: var(--muted);
    padding: 2px 7px;
    border-radius: 10px;
}

.icerik-alani {
    max-width: none;
    width: 100%;
    margin: 0 auto;
    padding: 28px 28px 60px;
}

/* ---- Karşılama ---- */

.karsilama h1 {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--ink);
}

.karsilama p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
    text-transform: capitalize;
}

/* ---- Hızlı işlem banner'ı: mavi/lacivert zemin üstünde beyaz kartlar (imzamız) ---- */

.hizli-banner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 22px 0 16px;
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
}

.hizli-kart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px;
    border: none;
    border-radius: 10px;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--ink);
    cursor: not-allowed;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hizli-kart-simge {
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hizli-kart-simge svg {
    width: 100%;
    height: 100%;
}

/* Orijinal ekranınızdaki gibi her işlem türü kendi rengiyle ayrışıyor. */
.hizli-kart-navy .hizli-kart-simge { background: rgba(44, 74, 124, 0.12); color: var(--navy-mid); }
.hizli-kart-teal .hizli-kart-simge { background: rgba(42, 157, 143, 0.14); color: #2A9D8F; }
.hizli-kart-yesil .hizli-kart-simge { background: rgba(47, 143, 91, 0.14); color: var(--success); }
.hizli-kart-turuncu .hizli-kart-simge { background: rgba(217, 116, 61, 0.14); color: #D9743D; }
.hizli-kart-mor .hizli-kart-simge { background: rgba(139, 107, 184, 0.14); color: #8B6BB8; }

/* ---- Duyuru şeridi ---- */

.duyuru-serit {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 22px;
}

.duyuru-nokta {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
    flex-shrink: 0;
}

/* ---- İçerik ızgarası ---- */

.pano-izgara {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 18px;
    align-items: start;
}

.panel {
    background: #fff;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 2px 10px rgba(31, 51, 88, 0.06);
}

.panel h2 {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 14px 0;
    color: var(--ink);
}

.genis-panel {
    min-height: 220px;
}

.yan-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hesap-liste {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    margin: 0;
}

.hesap-liste dt {
    font-size: 12px;
    color: var(--muted);
}

.hesap-liste dd {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.bos-panel .bos-durum {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 980px) {
    .pano-izgara {
        grid-template-columns: 1fr;
    }

    .hizli-banner {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .hizli-banner {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 860px) {
    .ekran {
        flex-direction: column;
    }

    .iki-sutun {
        grid-template-columns: 1fr;
    }

    .marka-panel {
        flex: 0 0 auto;
        padding: 40px 0;
    }

    .marka-icerik {
        padding: 0 32px;
        max-width: none;
    }

    .ozellikler {
        display: none;
    }

    .form-alani {
        padding: 32px 20px 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sekme-isaretci {
        transition: none;
    }
}

/* ================= Müşteriler sayfası ================= */

.musteri-liste-baslik,
.musteri-form-baslik {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.musteri-liste-baslik h1,
.musteri-form-baslik h1 {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.modul-aciklama {
    font-size: 13px;
    color: var(--muted);
    margin: 4px 0 0 0;
}

.ana-buton.genis-degil {
    width: auto;
    padding: 10px 20px;
}

.arama-satiri {
    margin-bottom: 16px;
}

.arama-satiri input {
    width: 100%;
    max-width: 420px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
}

.arama-satiri input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.istatistik-izgara {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
}

.istatistik-kart {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    flex: 1;
}

.istatistik-ikon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.istatistik-ikon svg {
    width: 20px;
    height: 20px;
}

.istatistik-ikon-mor {
    background: #F1EBFB;
    color: #7C5CBF;
}

.istatistik-ikon-yesil {
    background: var(--success-bg);
    color: var(--success);
}

.istatistik-metin {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.istatistik-etiket {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--muted);
    text-transform: uppercase;
}

.istatistik-deger {
    font-size: 20px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    color: var(--ink);
}

.istatistik-deger-yesil {
    color: var(--success);
}

.istatistik-ikon-kirmizi {
    background: var(--error-bg, #FBEAEA);
    color: var(--error);
}

.istatistik-deger-kirmizi {
    color: var(--error);
}

.istatistik-ikon-mavi {
    background: var(--accent-bg);
    color: var(--accent);
}

.siralanabilir {
    cursor: pointer;
    user-select: none;
}

.siralanabilir:hover {
    color: #fff;
    opacity: 0.85;
}

.arama-satiri-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.arama-kutu-ikonlu {
    position: relative;
    flex: 1;
}

.arama-kutu-ikonlu svg {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}

.arama-kutu-ikonlu input {
    width: 100%;
    max-width: none;
    padding: 10px 14px 10px 38px;
}

.tablo-panel {
    background: #fff;
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: visible;
    box-shadow: 0 2px 10px rgba(31, 51, 88, 0.06);
    margin-bottom: 18px;
}

.veri-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.veri-tablo-oransal {
    table-layout: fixed;
}

.veri-tablo thead th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    font-weight: 700;
    padding: 12px 16px;
    background: #7C8AA5;
    border-bottom: 1px solid #7C8AA5;
}

.veri-tablo tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
}

.veri-tablo tbody tr:last-child td {
    border-bottom: none;
}

.veri-tablo tbody tr {
    cursor: pointer;
    transition: background 0.1s ease;
    background: #fff;
}

.veri-tablo tbody tr:nth-child(even) {
    background: #F4F5F7;
}

.veri-tablo tbody tr:hover {
    background: #EAEDF2;
}

.veri-tablo tbody tr.secili-satir,
.veri-tablo tbody tr.secili-satir:nth-child(even),
.veri-tablo tbody tr.secili-satir:hover {
    background: #2F6FBF;
}

.veri-tablo tbody tr.secili-satir td {
    color: #fff;
}

.veri-tablo tbody tr.secili-satir .td-kod,
.veri-tablo tbody tr.secili-satir .td-bakiye-pozitif,
.veri-tablo tbody tr.secili-satir .td-bakiye-negatif {
    color: #fff;
}

.td-kod {
    color: #2F6FBF;
    font-weight: 700;
}

.veri-tablo tbody td.td-bakiye-pozitif {
    color: var(--success) !important;
    font-weight: 700;
}

.veri-tablo tbody td.td-bakiye-negatif {
    color: var(--error) !important;
    font-weight: 700;
}

.veri-tablo tbody td.td-kod {
    color: #2F6FBF;
    font-weight: 700;
}

/* Vadesi geçmiş borç uyarısı (MusteriCari hareket satırı, VadesiGecenler ekranı) */
.cari-vade-gecmis {
    color: var(--error) !important;
    font-weight: 600;
}

/* Görev #63: liste tablolarında ünvan hücresinin altında GSM/Vergi No gibi ikincil
   bilgiyi soluk/küçük ikinci satır olarak göstermek için (Müşteriler/Firmalar). */
.tablo-alt-metin {
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 400;
}

.sag-hiza {
    text-align: right;
}

.tablo-eylemler {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    cursor: default;
}

.mini-buton {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

.mini-buton svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.mini-buton:hover {
    background: var(--paper);
}

.mini-buton.tehlike {
    color: var(--error);
}

.mini-buton.tehlike:hover {
    background: var(--error-bg);
}

/* "Hesabı Sil" eylemi diğer (zararsız) eylemlerden görsel olarak ayrılsın diye -
   yanlışlıkla tıklamayı zorlaştıran küçük bir boşluk/çizgi. */
.isletme-sil-ayrac {
    display: inline-block;
    width: 1px;
    height: 16px;
    margin: 0 6px;
    background: var(--border);
    vertical-align: middle;
}

.ikon-buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 7px;
    color: var(--accent);
    cursor: pointer;
}

.ikon-buton svg {
    width: 15px;
    height: 15px;
}

.ikon-buton:hover {
    background: var(--paper);
}

.ikon-buton-tehlike {
    color: var(--error);
}

.ikon-buton-tehlike:hover {
    background: var(--error-bg);
    border-color: rgba(194, 75, 75, 0.3);
}

.ikon-buton-vurgu {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.ikon-buton-vurgu svg {
    width: 17px;
    height: 17px;
}

.ikon-buton-vurgu:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

.cari-panel h2 {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 14px 0;
}

/* ---- Müşteri Ekle/Düzenle formu ---- */

.musteri-form-panel {
    max-width: 720px;
}

.musteri-form-panel .iki-sutun {
    margin-bottom: 4px;
}

.not-alani {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14.5px;
    font-family: 'Inter', sans-serif;
    resize: vertical;
}

.not-alani:focus {
    outline: none;
    border-color: var(--navy-mid);
    box-shadow: 0 0 0 3px rgba(44, 74, 124, 0.12);
}

.form-buton-satiri {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.ikincil-buton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
}

.ikincil-buton svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.ikincil-buton:hover {
    background: var(--paper);
}

/* ---- Cari İşlem Ekle (İşlem Yap ekranınızın web karşılığı) ---- */

.cari-panel-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cari-panel-baslik h2 {
    margin: 0;
}

.cari-panel-duz-baslik {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 16px 0;
}

.cari-aksiyon-satiri {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cari-aksiyon-satiri-4 {
    flex-wrap: wrap;
}

.cari-aksiyon-buton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    transition: transform 0.1s ease;
}

.cari-aksiyon-buton:hover {
    transform: translateY(-1px);
}

.cari-aksiyon-buton svg {
    width: 18px;
    height: 18px;
}

.cari-aksiyon-alacak {
    background: linear-gradient(135deg, #2F8F5B 0%, #1F6B42 100%);
}

.cari-aksiyon-borc {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
}

.cari-aksiyon-buton.cari-aksiyon-aktif {
    box-shadow: 0 0 0 3px rgba(31, 51, 88, 0.35), 0 3px 10px rgba(0, 0, 0, 0.12);
}

.islem-form {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 18px;
}

.islem-sekmeler {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.islem-sekme {
    padding: 7px 13px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.islem-sekme.aktif {
    background: var(--navy-deep);
    border-color: var(--navy-deep);
    color: #fff;
}

.islem-form input[type="date"],
.islem-form input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    background: #fff;
}

.islem-form input:focus {
    outline: none;
    border-color: var(--navy-mid);
    box-shadow: 0 0 0 3px rgba(44, 74, 124, 0.12);
}

.tutar-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ================= Sekme çubuğu (birden fazla modülü yan yana açık tutma) ================= */

.sekme-cubugu {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    overflow-x: auto;
    overflow-y: visible;
}

.sekme-oge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 4px;
    margin: 0 14px;
    border-radius: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    background: none;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    border-bottom: 2.5px solid transparent;
}

.sekme-oge:hover {
    color: var(--ink);
}

.sekme-oge.sekme-aktif {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 700;
}

.sekme-kapat {
    border: none;
    background: none;
    color: #C3C8D1;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    border-radius: 4px;
}

.sekme-oge.sekme-aktif .sekme-kapat {
    color: var(--muted);
}

.sekme-kapat:hover {
    background: rgba(194, 75, 75, 0.12);
    color: var(--error);
}

/* ================= Yakında (yer tutucu modül) sayfası ================= */

.yakinda-sayfa {
    max-width: 480px;
    margin: 80px auto;
    text-align: center;
    padding: 40px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(31, 51, 88, 0.06);
}

.yakinda-simge {
    font-size: 36px;
    margin-bottom: 12px;
}

.yakinda-sayfa h1 {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px 0;
}

.yakinda-sayfa p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 4px 0;
}

.yakinda-alt {
    font-size: 12.5px !important;
}

/* ================= Hesaplar sayfası: Toplam özet kartları ================= */

.toplam-kart-satiri {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.toplam-kart {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 10px rgba(31, 51, 88, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toplam-etiket {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}

.toplam-deger {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
}

.toplam-artik {
    color: var(--success);
}

.toplam-eksik {
    color: var(--error);
}

.toplam-genel {
    background: var(--navy-deep);
}

.toplam-genel .toplam-etiket {
    color: rgba(255, 255, 255, 0.7);
}

.toplam-genel .toplam-deger {
    color: #fff;
}

@media (max-width: 700px) {
    .toplam-kart-satiri {
        grid-template-columns: 1fr;
    }
}

/* ================= Stoklar sayfası: bölüm başlıkları ================= */

.bolum-baslik {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy-deep);
    margin: 22px 0 12px 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.bolum-baslik:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

datalist {
    display: none;
}

/* ================= Faturalar: arama önerileri, seçili etiket, toplam alanı ================= */

.oneri-liste {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.oneri-oge {
    padding: 9px 12px;
    font-size: 13px;
    cursor: pointer;
}

.oneri-oge:hover {
    background: var(--paper);
}

.oneri-kucuk {
    color: var(--muted);
    font-size: 11.5px;
}

.uyari-kucuk {
    color: var(--error);
    font-size: 12px;
    font-weight: 600;
}

.secili-etiket {
    margin-top: 6px;
    font-size: 13px;
    color: var(--success);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fatura-toplam-alani {
    max-width: 320px;
    margin-left: auto;
    margin-top: 16px;
}

.fatura-toplam-satir {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--muted);
}

.fatura-genel-toplam {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 12px;
}

/* ================= Hızlı Satış: dokunmatik ekran tasarımı ================= */

.hs-barkod-satiri {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.hs-barkod-alan {
    flex: 1;
}

.hs-barkod-input {
    width: 100%;
    height: 52px;
    border: 2px solid var(--navy-deep);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 17px;
    box-sizing: border-box;
}

.hs-buyuk-buton {
    height: 52px;
    min-width: 52px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.hs-buyuk-buton svg {
    width: 22px;
    height: 22px;
}

.hs-buton-navy {
    background: var(--navy-deep);
    color: #fff;
    border: none;
}

.hs-buton-cerceve {
    background: #fff;
    color: var(--navy-deep);
    border: 2px solid var(--navy-deep);
}

.hs-arama-panel {
    margin-top: 12px;
}

.hs-oneri-liste {
    max-height: 260px;
}

.hs-bolum-baslik-satiri {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* Görev #48: Hızlı Ürünler artık ORTA sütunda (dar), referans tasarımdaki gibi
   2 sütunlu kart ızgarası - eskiden geniş sol sütunda 4 sütun olarak kullanılıyordu. */
.hs-kisayol-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hs-kisayol {
    position: relative;
    width: 100%;
    min-height: 72px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.hs-kisayol-bos {
    border: 1.5px dashed var(--border);
    background: transparent;
}

.hs-kisayol-artı {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

.hs-kisayol-dolu {
    background: var(--paper);
    border: 1px solid var(--border);
}

.hs-kisayol-ad {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.hs-kisayol-fiyat {
    font-size: 11.5px;
    color: var(--muted);
}

.hs-kisayol-kaldir {
    position: absolute;
    top: 2px;
    right: 4px;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.hs-kisayol-kaldir:hover {
    background: rgba(194, 75, 75, 0.12);
    color: var(--error);
}

.hs-miktar-buton {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--paper);
    font-size: 18px;
    color: var(--navy-deep);
    cursor: pointer;
    vertical-align: middle;
    margin: 0 6px;
}

.hs-toplam-kart {
    background: var(--navy-deep);
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 14px 0;
}

.hs-toplam-kart span:first-child {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.hs-toplam-kart span:last-child {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    font-family: 'Sora', sans-serif;
}

/* Görev #48: Hızlı Satış'ın SOL sütununda toplam kartının altındaki 4'lü ödeme
   türü butonları (Nakit/Kredi Kartı/Veresiye/Parçalı Ödeme) - bu sınıf daha önce
   tanımlı ama kullanılmıyordu, referans tasarımdaki 4 büyük buton için burada
   kullanıma alındı. */
.hs-odeme-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 0;
}

.hs-kutu-altyazi {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.7;
}

.hs-odeme-kutu {
    height: 68px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.hs-odeme-kutu svg {
    width: 22px;
    height: 22px;
}

.hs-odeme-aktif-yesil {
    background: rgba(47, 143, 91, 0.12);
    border: 2px solid var(--success);
    color: var(--success);
}

.hs-odeme-aktif-navy {
    background: rgba(44, 74, 124, 0.1);
    border: 2px solid var(--navy-mid);
    color: var(--navy-deep);
}

.hs-odeme-aktif-amber {
    background: rgba(217, 142, 62, 0.14);
    border: 2px solid var(--amber);
    color: #854F0B;
}

@media (max-width: 700px) {
    .hs-kisayol-izgara {
        grid-template-columns: 1fr 1fr;
    }
    .hs-odeme-izgara {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Görev #47: Hızlı Satış - POS düzeni (üst bilgi + sekmeler + 2 sütun + alt bant) ---- */

.hs-ust-satir {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.hs-alt-baslik {
    color: var(--muted);
    font-size: 13px;
}

.hs-kasa-etiket {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-deep);
}

.hs-sekme-satiri {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.hs-sekme-buton {
    position: relative;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px 8px 0 0;
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.hs-sekme-buton.aktif {
    background: var(--navy-deep);
    color: #fff;
    border-color: var(--navy-deep);
}

.hs-sekme-nokta {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
    margin-left: 6px;
}

.hs-sekme-ekle {
    width: 36px;
    border: 1.5px dashed var(--border);
    background: transparent;
    border-radius: 8px 8px 0 0;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
}

/* Görev #48: üç net sütun - SOL (geniş: arama+sepet+ödeme), ORTA (Hızlı Ürünler +
   Satış Seçenekleri), SAĞ (Stoksuz Satış + İşlemler + Müşteri) - referans tasarıma göre. */
.hs-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px 300px;
    gap: 16px;
    align-items: start;
    margin-bottom: 24px;
}

.hs-sol-kolon, .hs-orta-kolon, .hs-sag-kolon {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hs-kategori-sekmeler {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    max-width: 320px;
}

/* Görev #48: Stoksuz Satış artık dar SAĞ sütunda - eski tek satırlık 5 sütunlu
   ızgara yerine dikey (alt alta) düzen; Miktar/Birim Fiyat için mevcut .iki-sutun
   sınıfı kullanılıyor (bkz. HizliSatis.razor). */
.hs-stoksuz-dikey .alan-grubu {
    margin-bottom: 10px;
}

.hs-stoksuz-tutar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
}

.hs-stoksuz-tutar strong {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    color: var(--ink);
}

.hs-islem-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Görev #48: sol sütunun en altında Toplam/İndirim/Tutar satırı - eskiden lacivert
   zeminli küçük bir kart olan .hs-toplam-kart, referans tasarımdaki gibi beyaz
   panel + solda indirim kutusu + sağda büyük tutar olacak şekilde yeniden çizildi. */
.hs-toplam-kart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 2px 10px rgba(31, 51, 88, 0.06);
}

.hs-toplam-sol {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hs-toplam-etiket {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}

.hs-indirim-kutu {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--muted);
}

.hs-indirim-kutu input {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}

.hs-toplam-sag {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.hs-toplam-buyuk {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--navy-deep);
}

.hs-toplam-kdv-not {
    font-size: 11.5px;
    color: var(--muted);
}

/* Görev #48: ORTA sütundaki "Satış Seçenekleri" anahtarları - henüz bu ayarlara
   karşılık gelen bir backend alanı yok, o yüzden bilinçli olarak devre dışı (disabled)
   bırakıldı; diğer "yakında eklenecek" butonlarıyla (Parçalı Ödeme, Çekmece Aç vb.)
   aynı tutarlı yaklaşım. */
.hs-secenek-satiri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--ink);
}

.hs-secenek-satiri:last-of-type {
    border-bottom: none;
}

.hs-anahtar {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.hs-anahtar input {
    opacity: 0;
    width: 0;
    height: 0;
}

.hs-anahtar-govde {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 20px;
    transition: background 0.15s ease;
}

.hs-anahtar-govde::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

.hs-anahtar input:checked + .hs-anahtar-govde {
    background: var(--success);
}

.hs-anahtar input:checked + .hs-anahtar-govde::before {
    transform: translateX(16px);
}

.hs-anahtar input:disabled + .hs-anahtar-govde {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 960px) {
    .hs-izgara {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .hs-islem-izgara {
        grid-template-columns: 1fr;
    }
    .hs-toplam-kart {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .hs-toplam-sag {
        align-items: flex-start;
    }
}

/* ---- Anasayfa: Üst karşılama satırı ---- */
.anasayfa-karsilama-satir {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.anasayfa-karsilama-baslik {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.anasayfa-karsilama-alt {
    font-size: 13.5px;
    color: var(--muted);
    margin: 6px 0 0 0;
}

.anasayfa-karsilama-butonlar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.anasayfa-karsilama-butonlar .ikincil-buton,
.anasayfa-karsilama-butonlar .ana-buton {
    width: auto;
}

/* ---- Anasayfa: KPI kartları + İş Takvimi ---- */
.kpi-izgara {
    /* Görev #48: 8 kutucuk artık 4-4 şeklinde SABİT 2 satırda - önceki
       "auto-fit, minmax(160px,1fr)" ekran genişliğine göre 5-6-7-8 farklı sütun
       sayısı üretebiliyordu (düzensiz görünüm). Dar ekranlarda (bkz. aşağıdaki
       media query'ler) 2 veya 1 sütuna düşmeye devam ediyor. */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.kpi-kart {
    background: #fff;
    border: 1.5px solid #E5E1D8;
    border-top: 4px solid var(--kpi-renk, var(--navy-deep));
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kpi-etiket {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #8A8578;
}

.kpi-deger {
    font-size: 22px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
}

.kpi-yesil { color: var(--success); }
.kpi-kirmizi { color: var(--error); }
.kpi-lacivert { color: var(--navy-deep); }


@media (max-width: 900px) {
    .marka-panel {
        display: none;
    }
    .form-alani {
        flex: 1;
        width: 100%;
    }
}

/* ---- Müşteri/Firma Cari Hareketler sayfası ---- */
.ekmek-kirintisi {
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 14px;
}

.ekmek-kirintisi a {
    color: var(--muted);
    text-decoration: none;
}

.ekmek-kirintisi a:hover {
    color: var(--accent);
}

.ekmek-kirintisi span:last-child {
    color: var(--accent);
    font-weight: 600;
}

.cari-sayfa-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.cari-sayfa-baslik-sol {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cari-sayfa-baslik-sol h1 {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

.cari-rozet {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-bg);
    padding: 5px 12px;
    border-radius: 20px;
}

/* E-Fatura gönderim durumu - Faturalar listesindeki satır başına rozet. */
.efatura-rozet {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-right: 6px;
}

.efatura-rozet-taslak {
    color: var(--muted);
    background: #F3F4F6;
}

.efatura-rozet-hata {
    color: var(--error);
    background: var(--error-bg);
    cursor: help;
}

.efatura-rozet-basarili {
    color: var(--success);
    background: var(--success-bg);
}

.kritik-rozet {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--error);
    background: var(--error-bg);
    padding: 3px 9px;
    margin-left: 8px;
    border-radius: 20px;
}

.kritik-rozet svg {
    width: 12px;
    height: 12px;
}

.cari-sayfa-baslik-sag {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ikon-geri-buton {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
}

.ikon-geri-buton svg {
    width: 16px;
    height: 16px;
}

.ikon-geri-buton:hover {
    background: var(--paper);
}

.cari-istatistik-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.cari-istatistik-kart {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
}

.cari-istatistik-kart::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--kart-renk, transparent) 0%, transparent 60%);
    opacity: 0.06;
    pointer-events: none;
}

.cari-istatistik-ikon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cari-istatistik-ikon svg {
    width: 20px;
    height: 20px;
}

.cari-istatistik-yesil { background: var(--success-bg); color: var(--success); }
.cari-istatistik-kirmizi { background: var(--error-bg); color: var(--error); }
.cari-istatistik-mavi { background: var(--accent-bg); color: var(--accent); }
.cari-istatistik-mor { background: #F1EBFB; color: #7C5CBF; }

.cari-istatistik-metin {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cari-istatistik-etiket {
    font-size: 12.5px;
    color: var(--muted);
}

.cari-istatistik-deger {
    font-size: 21px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    color: var(--ink);
}

.cari-istatistik-deger.td-bakiye-pozitif {
    color: var(--success);
}

.cari-istatistik-deger.td-bakiye-negatif {
    color: var(--error);
}

.cari-istatistik-alt {
    font-size: 11.5px;
    color: var(--muted);
}

.cari-filtre-satiri {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cari-filtre-satiri select {
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    color: var(--ink);
}

.cari-tur-rozet {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.cari-tur-fatura { background: var(--accent-bg); color: var(--accent-dark); }
.cari-tur-tahsilat { background: var(--success-bg); color: var(--success); }
.cari-tur-odeme { background: rgba(217, 142, 61, 0.14); color: var(--amber); }

.cari-sayfalama {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}

.cari-sayfalama-butonlar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cari-sayfa-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

/* ---- Anasayfa: İş Takvimi v2 (saat bazlı haftalık takvim) ---- */
.takvim-panel-v2 {
    padding: 22px;
}

.takvim-ust-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.takvim-baslik-sol {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.takvim-baslik-ikon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.takvim-baslik-ikon svg {
    width: 19px;
    height: 19px;
}

.takvim-baslik-v2 {
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.takvim-alt-v2 {
    font-size: 12.5px;
    color: var(--muted);
    margin: 2px 0 0 0;
}

.takvim-ust-sag {
    display: flex;
    align-items: center;
    gap: 10px;
}

.takvim-tarih-araligi {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    padding: 0 4px;
}

.takvim-yeni-form {
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.takvim-renk-secici {
    display: flex;
    gap: 8px;
    margin: 4px 0 14px;
}

.takvim-renk-nokta {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
}

.takvim-renk-nokta.secili {
    border-color: var(--ink);
    box-shadow: 0 0 0 2px #fff inset;
}

.takvim-izgara-v2 {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}

.takvim-saat-sutunu {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 46px;
}

.takvim-gun-baslik-bosluk {
    height: 52px;
}

.takvim-saat-etiketi {
    font-size: 10.5px;
    color: var(--muted);
    text-align: right;
    padding-right: 6px;
    box-sizing: border-box;
    border-top: 1px solid var(--border);
}

.takvim-gun-sutunu-v2 {
    flex: 1;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    padding-right: 8px;
}

.takvim-gun-sutunu-v2:last-child {
    border-right: none;
    padding-right: 0;
}

.takvim-gun-baslik-v2 {
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid var(--border);
    gap: 2px;
}

.takvim-gun-baslik-v2.takvim-bugun {
    border-bottom-color: var(--accent);
}

.takvim-gun-adi {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
}

.takvim-gun-tarih {
    font-size: 12px;
    color: var(--ink);
}

.takvim-gun-tarih-bugun {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
}

.takvim-gun-govde {
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
}

.takvim-saat-cizgisi {
    border-top: 1px solid var(--border);
    box-sizing: border-box;
}

.takvim-simdi-cizgisi {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--error);
    z-index: 2;
    pointer-events: none;
}

.takvim-simdi-cizgisi::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--error);
}

.takvim-etkinlik-v2 {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 6px;
    padding: 4px 7px;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.takvim-etkinlik-saat {
    display: block;
    font-size: 9.5px;
    opacity: 0.85;
    white-space: nowrap;
}

.takvim-etkinlik-baslik {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.takvim-alt-satir-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

/* ---- Anasayfa: Ay görünümü + görünüm seçici ---- */
.takvim-gorunum-secici {
    display: flex;
    background: var(--paper);
    border-radius: 8px;
    padding: 3px;
    margin-right: 6px;
}

.takvim-gorunum-buton {
    border: none;
    background: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

.takvim-gorunum-buton.aktif {
    background: #fff;
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.takvim-ay-izgara {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.takvim-ay-gun-basligi {
    text-align: center;
    padding: 10px 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
}

.takvim-ay-hucre {
    min-height: 92px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 6px;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.takvim-ay-hucre:nth-child(7n) {
    border-right: none;
}

.takvim-ay-hucre:hover {
    background: var(--paper);
}

.takvim-ay-disi {
    background: #FAFAFA;
    color: var(--muted);
}

.takvim-ay-disi .takvim-ay-gun-no {
    color: #C3C8D1;
}

.takvim-ay-bugun {
    background: var(--accent-bg);
}

.takvim-ay-gun-no {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
}

.takvim-ay-etkinlikler {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.takvim-ay-etkinlik {
    font-size: 10.5px;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.takvim-ay-fazla {
    font-size: 10px;
    color: var(--muted);
    padding-left: 2px;
}

/* ---- Anasayfa: Takip edilecekler paneli ---- */
.takip-panel {
    margin-top: 20px;
}

.takip-ust-satir {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.takip-tum-link {
    white-space: nowrap;
    padding-top: 2px;
}

.takip-liste {
    display: flex;
    flex-direction: column;
}

.takip-satir {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.takip-satir:last-child {
    border-bottom: none;
}

.takip-onay-kutusu {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.takip-baslik {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.takip-baslik.takip-tamamlandi {
    color: var(--muted);
    text-decoration: line-through;
}

.takip-sag {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-align: right;
}

.takip-etiket {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
}

.takip-alt-bilgi {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .takip-sag {
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }
}

.cari-devreden-satir td {
    background: var(--paper) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--border) !important;
}

.kpi-kart-ikonlu {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.kpi-ikon-daire {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--kpi-renk, var(--navy-deep)) 15%, white);
    color: var(--kpi-renk, var(--navy-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-ikon-daire svg {
    width: 20px;
    height: 20px;
}

.kpi-kart-ikonlu .kpi-etiket,
.kpi-kart-ikonlu .kpi-deger {
    display: block;
}

/* ---- Filtrele/Sıralama açılır menüleri (Müşteriler, Firmalar vb.) ---- */
.acilir-sarici {
    position: relative;
}

.acilir-secim-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 20;
    min-width: 190px;
}

/* Görev #54: Kasa ekranındaki Filtrele paneli gibi düz buton listesi değil de
   etiket+seçim kutularından (Grup/Tür/Hesap) oluşan "geniş" açılır paneller için -
   bu sınıf Kasa.razor'da kullanılıyordu ama hiç tanımlı değildi, panel .acilir-secim-oge
   için tasarlanmış dar/boşluksuz stille açılıyordu. */
.acilir-secim-menu-genis {
    min-width: 240px;
    max-width: calc(100vw - 32px);
    overflow: visible;
    padding: 14px 16px;
}

.acilir-secim-menu-genis .alan-grubu {
    margin-bottom: 10px;
}

.acilir-secim-menu-genis .alan-grubu:last-of-type {
    margin-bottom: 0;
}

.acilir-secim-menu-genis .checkbox-satir {
    margin-top: 10px;
}

.acilir-secim-oge {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    border: none;
    background: none;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}

.acilir-secim-oge:hover {
    background: var(--paper);
}

.acilir-secim-oge.secili {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 700;
}

.hesap-varsayilan-rozet {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--amber);
}

/* ---- Genel mobil uyum (telefon genişlikleri) ---- */
@media (max-width: 768px) {
    /* Telefon: yan menü soldan kayan çekmece */
    .yan-menu,
    .yan-menu.yan-menu-daraltilmis {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100dvh;
        width: min(82vw, 300px);
        z-index: 60;
        transform: translateX(-102%);
        transition: transform 0.22s ease;
        box-shadow: none;
    }

    .yan-menu.yan-menu-mobil-acik {
        transform: translateX(0);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
    }

    .yan-menu .yan-daralt-buton {
        display: none;
    }

    .yan-link,
    .yan-grup-baslik,
    .yan-alt-aktif {
        min-height: 44px;
    }

    .mobil-menu-perde {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 55;
    }

    .mobil-menu-dugme {
        display: inline-flex;
    }

    .ust-cubuk-sol {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .magaza-adi-v2 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 38vw;
    }

    .icerik-alani {
        padding: 16px 12px 40px;
    }

    .ust-cubuk-v2 {
        padding: 0 16px;
    }

    .magaza-adi-v2 {
        font-size: 14px;
    }

    .kullanici-bilgi {
        display: none;
    }

    .kpi-izgara,
    .istatistik-izgara,
    .cari-istatistik-izgara {
        grid-template-columns: 1fr 1fr;
        display: grid;
        gap: 10px;
    }

    .istatistik-izgara {
        display: flex;
        flex-direction: column;
    }

    .iki-sutun,
    .uc-sutun {
        grid-template-columns: 1fr;
    }

    .arama-satiri-flex,
    .cari-filtre-satiri {
        flex-direction: column;
        align-items: stretch;
    }

    .arama-satiri-flex .arama-kutu-ikonlu,
    .cari-filtre-satiri .arama-kutu-ikonlu {
        max-width: none;
    }

    .musteri-liste-baslik,
    .cari-sayfa-baslik {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .veri-tablo-oransal {
        min-width: 640px;
    }

    .form-karti-genis {
        max-width: 100% !important;
    }

    .marka-panel {
        display: none;
    }

    .takvim-izgara-v2 {
        overflow-x: auto;
        overflow-y: visible;
    }

    .takvim-gun-sutunu-v2 {
        min-width: 110px;
    }

    .takvim-ay-hucre {
        min-height: 64px;
    }

    .cari-sayfa-baslik-sag {
        width: 100%;
        justify-content: space-between;
    }

    /* Görev #54: Filtrele (ör. Kasa ekranı Grup/Tür/Hesap/Sadece Kasa) gibi çok alanlı
       açılır paneller mobil genişlikte, üstteki "arama-satirisi-flex" sütuna döndüğünde
       (bkz. .arama-satiri-flex flex-direction:column üstte) position:absolute olarak
       kalmaya devam ediyordu - panel normal akıştan çıktığı için altındaki bir SONRAKİ
       eleman (ör. Sıralama butonu) yer değiştirmiyor, panel onun ÜZERİNE biniyor, panelin
       kenarlarından o elemanın arka planı görünüyordu (ekran görüntüsündeki sorun). Mobilde
       paneli normal akışa (position:static) alıp tam genişlik yapıyoruz ki açıldığında
       sonraki elemanları aşağı itsin, üzerine binmesin.  */
    .acilir-secim-menu {
        position: static;
        width: 100%;
        margin-top: 6px;
        box-shadow: none;
        border: 1px solid var(--border);
    }
}

@media (max-width: 480px) {
    .cari-istatistik-izgara,
    .kpi-izgara {
        grid-template-columns: 1fr;
    }

    .takvim-ust-satir {
        flex-direction: column;
        align-items: flex-start;
    }

    .takvim-ust-sag {
        width: 100%;
        flex-wrap: wrap;
    }

    .takvim-gorunum-secici {
        order: -1;
        width: 100%;
        justify-content: center;
    }

    .form-karti {
        padding: 28px 20px 0;
    }

    .form-alinti {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .sifre-kontrol-yatay {
        grid-template-columns: repeat(2, auto);
    }
}

.yan-link-yonetim {
    color: var(--amber) !important;
    font-weight: 700;
}

.yan-link-yonetim:hover {
    background: rgba(217, 142, 61, 0.12) !important;
}

/* ---- Yazdırma (Rapor Al > Yazdır/PDF) - sadece tablo/içerik görünsün ---- */
@media print {
    .yan-menu,
    .ust-cubuk-v2,
    .sekme-cubugu,
    .tema-dugmesi,
    .dil-dugmesi,
    .ust-arac-cubugu,
    .ikon-buton,
    .ikon-geri-buton,
    .ikincil-buton,
    .ana-buton,
    .tablo-eylemler,
    .arama-satiri-flex,
    .cari-filtre-satiri,
    .cari-sayfa-baslik-sag,
    .cari-aksiyon-satiri,
    .islem-form,
    .acilir-sarici,
    .form-buton-satiri,
    .cari-sayfalama,
    .modul-aciklama,
    .yan-imza,
    .bildirim-ikon,
    .kullanici-menu {
        display: none !important;
    }

    .ana-govde {
        background: #fff !important;
    }

    .icerik-alani {
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .tablo-panel {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .veri-tablo-oransal {
        min-width: 0 !important;
    }

    .panel,
    .istatistik-izgara,
    .cari-istatistik-izgara {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.detayli-fatura-onerisi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--accent-bg);
    border: 1px dashed var(--accent);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--ink);
}

/* ---- Anasayfa: Döviz Kurları şeridi (TCMB) ---- */
.doviz-kuru-serit {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.doviz-kuru-oge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.doviz-kuru-etiket {
    font-weight: 800;
    font-size: 13px;
    color: var(--accent);
    background: var(--accent-bg);
    padding: 3px 9px;
    border-radius: 6px;
}

.doviz-kuru-deger {
    font-size: 13px;
    color: var(--ink);
    font-weight: 600;
}

.doviz-kuru-zaman {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--muted);
}

@media (max-width: 768px) {
    .doviz-kuru-serit {
        gap: 12px;
    }

    .doviz-kuru-zaman {
        margin-left: 0;
        width: 100%;
    }
}

/* ---- Fatura Grid (Excel benzeri düzenlenebilir satırlar) ---- */
.fatura-grid-sarici {
    overflow-x: auto;
    overflow-y: visible;
    margin-bottom: 10px;
}

.fatura-grid {
    min-width: 640px;
    width: 100%;
}

.fatura-grid td {
    padding: 6px 8px !important;
    position: relative;
}

.grid-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    background: var(--paper);
    border-radius: 6px;
    padding: 7px 8px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    text-align: right;
}

.fatura-grid-urun-hucre .grid-input {
    text-align: left;
}

.grid-input:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 2px var(--accent-bg);
}

.fatura-grid-urun-hucre {
    position: relative;
}

.fatura-grid-urun-hucre .oneri-liste {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 15;
    max-height: 220px;
    overflow-y: auto;
}

.fatura-grid-tutar {
    font-weight: 700;
    color: var(--ink);
}

.fatura-grid-urun-satiri {
    display: flex;
    align-items: center;
    gap: 4px;
}

.grid-secim-buton {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--accent);
}

.grid-secim-buton:hover {
    background: var(--accent-bg);
}

.grid-secim-buton svg {
    width: 15px;
    height: 15px;
}

.bakiye-yon-ibare {
    font-size: 10.5px;
    font-weight: 600;
    opacity: 0.85;
    margin-left: 2px;
    white-space: nowrap;
}

.islem-sekmeler-satiri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.islem-detayli-link {
    white-space: nowrap;
    font-weight: 600;
}

/* Fatura sayfaları (Satış/Alış) - musteri-form-panel'in 720px sınırı grid
   tabloyu sıkıştırıyordu, bu yüzden ayrı, tam genişlik bir sınıf kullanıyoruz. */
.fatura-form-panel {
    width: 100%;
}

.grid-kdv-dahil-etiket {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 5px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.12s ease;
    user-select: none;
}

.grid-kdv-dahil-etiket:has(input:checked) {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent-dark);
}

/* B.Fiyat hücresinin yanında sade bir "KDV Dahil" onay kutusu - mouse üzerine
   gelince title tooltip'i bilgi veriyor, ayrı bir chip/rozet olarak durmuyor. */
.grid-bfiyat-satiri {
    display: flex;
    align-items: center;
    gap: 5px;
}

.grid-kdv-dahil-kutu {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--accent);
    margin: 0;
}

/* ---- Stoktan Seç Modalı (masaüstündeki "Sec" penceresi gibi, tam ekran) ---- */
.stok-modal-arkaplan {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.stok-modal-kutu {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.stok-modal-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--border);
}

.stok-modal-baslik h2 {
    margin: 0;
    font-size: 17px;
}

.stok-modal-arama {
    margin: 14px 20px;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.stok-modal-arama:focus {
    outline: none;
    border-color: var(--accent);
}

.stok-modal-liste {
    overflow-y: auto;
    padding: 0 12px 12px;
    flex: 1;
}

.stok-modal-oge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.stok-modal-oge:hover {
    background: var(--paper);
}

@media (max-width: 480px) {
    .stok-modal-kutu {
        max-height: 90vh;
    }
}

/* Ekran Düzenleme Sihirbazı - Ayarlar sayfası */
.ekran-alan-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.ekran-alan-oge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
}

.ekran-alan-oge input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--accent);
}

/* KDV% kutusunun altında hızlı seçim rozetleri - Ayarlar'dan tanımlanan 3
   sektörel varsayılan orana tek tıkla geçiş. */
.grid-kdv-hizli-satiri {
    display: flex;
    gap: 3px;
    margin-top: 3px;
}

.grid-kdv-hizli-buton {
    flex: 1;
    font-size: 9.5px;
    padding: 2px 0;
    border: 1px solid var(--border);
    background: var(--paper);
    border-radius: 4px;
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
}

.grid-kdv-hizli-buton:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent-dark);
}

/* Yönetim Paneli'nden özel bir giriş görseli ayarlandığında, metnin (logo, başlık,
   özellik kartları, alt satır) her zaman okunabilir kalması için ekstra karartma. */
.marka-ozel-gorsel-karartma {
    position: absolute;
    inset: 0;
    /* Alt kısım (marka-alt-satir'ın oturduğu yer) fotoğrafın en parlak/en dolu
       (ör. bir kupa, bir obje) bölgesine denk gelebiliyor - metnin her zaman
       okunması için alttaki karartmayı biraz daha güçlendirdik. */
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.35) 40%, rgba(15, 23, 42, 0.88) 100%);
    pointer-events: none;
}

/* Ekran Düzenleme Sihirbazı - sıralanabilir, genişlik ayarlı alan listesi */
.ekran-alan-sira-liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 520px;
}

.ekran-alan-sira-satiri {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.ekran-alan-sira-oklari {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ekran-alan-sira-oklari .ikon-buton {
    width: 22px;
    height: 18px;
    font-size: 9px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ekran-alan-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

.ekran-alan-adi {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
}

.ekran-alan-yuzde {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ekran-alan-yuzde input {
    width: 55px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: right;
    font-size: 13px;
}

/* Sol Menü Düzenle - sürükle/bırak ağaç editörü */
.menu-duzenle-agac {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 560px;
}

.menu-duzenle-bolum {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.menu-duzenle-baslik-satiri,
.menu-duzenle-oge-satiri {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: grab;
    transition: border-color .12s, background .12s;
}

.menu-duzenle-baslik-satiri {
    background: var(--accent-bg);
    border-color: var(--accent);
}

.menu-duzenle-tutac {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--muted);
    cursor: grab;
}

.menu-duzenle-tutac svg {
    width: 16px;
    height: 16px;
}

.menu-duzenle-baslik-etiket {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
    flex-shrink: 0;
}

.menu-duzenle-suruklenen {
    opacity: .4;
}

.menu-duzenle-hedef {
    border-color: var(--accent) !important;
    background: var(--accent-bg) !important;
}

.menu-duzenle-gizle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}

.menu-duzenle-gizli .ekran-alan-adi,
.menu-duzenle-gizli .yan-simge {
    opacity: .4;
    text-decoration: line-through;
}

.menu-duzenle-alt-liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.menu-duzenle-girintili {
    margin-left: 24px;
    padding-left: 10px;
    border-left: 2px dashed var(--border);
}

.menu-duzenle-bos-bolge {
    padding: 10px 12px;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
}

.menu-duzenle-sona-birak {
    padding: 10px 12px;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--muted);
    text-align: center;
}

/* Aktif Şube Seçici - Ayarlar > Şubeler paneli */
.sube-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.sube-satiri, .sube-ekle-satiri {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    flex-wrap: wrap;
}

.sube-satiri-ad {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ink);
}

.sube-satiri-konum {
    font-size: 12.5px;
    color: var(--muted);
    flex: 1;
}

.sube-varsayilan-rozet {
    font-size: 11px;
    font-weight: 700;
    color: var(--success);
    background: rgba(60, 160, 100, 0.14);
    padding: 3px 9px;
    border-radius: 20px;
}

.sube-duzenle-input {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    flex: 1;
    min-width: 120px;
}

/* ---- "Yeni Cari Hareket" Modalı (MusteriCari.razor / FirmaCari.razor) ----
   Önceden sayfa içinde (inline) açılan işlem formu, artık üstte açık gri
   overlay + ortalanmış beyaz kart şeklinde bir MODAL olarak gösteriliyor.
   Form state/mantığı (@code bloğu) hiç değişmedi, sadece HTML/CSS yapısı. */
.cari-modal-arkaplan {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 210;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
}

.cari-modal-kutu {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    padding: 24px 26px 20px;
}

.cari-modal-ustbilgi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.cari-modal-ustbilgi h2 {
    margin: 0 0 4px 0;
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    color: var(--ink);
}

.cari-modal-ustbilgi p {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.cari-modal-kapat {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 6px;
    border-radius: 8px;
    line-height: 0;
    flex-shrink: 0;
}

.cari-modal-kapat:hover {
    background: var(--paper);
    color: var(--ink);
}

.cari-modal-kapat svg {
    width: 18px;
    height: 18px;
}

/* "Hesabı Sil" modalındaki kırmızı/dikkat çeken uyarı bloğu - geri alınamaz bir
   işlem olduğu modal açılır açılmaz göze çarpsın diye. */
.hesap-sil-uyari {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid rgba(194, 75, 75, 0.35);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 600;
}

.cari-modal-bolum-etiket {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* "Hareket Türü" seçilebilir kartları - iki büyük kart yan yana, seçili olan
   yeşil (alacak/tahsilat kategorisi) ya da lacivert (borç kategorisi) çerçeveli. */
.hareket-turu-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}

.hareket-turu-kart {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hareket-turu-kart-ikon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--muted);
}

.hareket-turu-kart-ikon svg {
    width: 20px;
    height: 20px;
}

.hareket-turu-kart-metin {
    flex: 1;
    min-width: 0;
}

.hareket-turu-kart-metin strong {
    display: block;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 2px;
}

.hareket-turu-kart-metin span {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.hareket-turu-kart-durum {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    margin-top: 1px;
}

.hareket-turu-kart-durum svg {
    width: 20px;
    height: 20px;
}

.hareket-turu-kart.secili-alacak {
    border-color: var(--success);
    background: var(--success-bg);
}

.hareket-turu-kart.secili-alacak .hareket-turu-kart-ikon {
    color: var(--success);
}

.hareket-turu-kart.secili-borc {
    border-color: var(--navy-mid);
    background: var(--accent-bg);
}

.hareket-turu-kart.secili-borc .hareket-turu-kart-ikon {
    color: var(--navy-mid);
}

/* "Tahsilat Yöntemi" / "Hareket türü" gibi yatay seçim butonları - sekme değil
   düz dikdörtgen buton görünümünde, seçili olan koyu lacivert dolgulu. */
.yontem-butonlari {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.yontem-buton {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.yontem-buton svg {
    width: 15px;
    height: 15px;
}

.yontem-buton.aktif {
    background: var(--navy-deep);
    border-color: var(--navy-deep);
    color: #fff;
}

.cari-modal-not-satiri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.cari-modal-not-satiri .oneri-kucuk {
    margin: 0;
}

.cari-modal-not-satiri .form-buton-satiri {
    margin: 0;
}

/* Yeşil toggle anahtar - "Kasaya gelir/gider olarak aktar" onay kutusunun
   (eski checkbox yerine) modern anahtar görünümü. */
.toggle-satir {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 18px;
}

.toggle-anahtar {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
}

.toggle-anahtar input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-anahtar-iz {
    position: absolute;
    inset: 0;
    background: #CBD2DC;
    border-radius: 22px;
    transition: background 0.15s ease;
}

.toggle-anahtar-iz::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.toggle-anahtar input:checked + .toggle-anahtar-iz {
    background: var(--success);
}

.toggle-anahtar input:checked + .toggle-anahtar-iz::before {
    transform: translateX(18px);
}

.toggle-anahtar input:focus-visible + .toggle-anahtar-iz {
    box-shadow: 0 0 0 3px rgba(47, 143, 91, 0.25);
}

.toggle-metin strong {
    display: block;
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 600;
}

.toggle-metin small {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

@media (max-width: 620px) {
    .hareket-turu-izgara {
        grid-template-columns: 1fr;
    }

    .cari-modal-kutu {
        padding: 20px 18px 16px;
    }
}

/* ================= Görev #49: Perde Hesap - "Perde Satışı" üç sütunlu düzen =================
   Hızlı Satış'taki (.hs-izgara) üç sütunlu yaklaşımla aynı mantık: SOL sütun esnek/geniş,
   ORTA ve SAĞ sütunlar sabit genişlikte. Sadece bu sayfaya özel olduğu için .ph- önekiyle. */
.ph-izgara {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px 360px;
    gap: 16px;
    align-items: start;
    margin-bottom: 24px;
}

.ph-sol-kolon, .ph-orta-kolon, .ph-sag-kolon {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ph-panel {
    max-width: none;
}

.ph-bos-tablo {
    text-align: center;
    padding: 40px 20px;
    line-height: 1.7;
}

.ph-tablo-panel {
    margin-bottom: 4px;
}

.ph-checkbox-th {
    width: 30px;
}

.ph-toplam-alani {
    max-width: none;
    margin-left: 0;
}

.ph-ikincil-buton-satir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.ph-ikincil-buton-satir .ikincil-buton {
    justify-content: center;
}

.ph-ana-buton-satir {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.ph-ana-buton-satir .ikincil-buton {
    justify-content: center;
}

.ph-kaydet-alani {
    border-top: 1px solid var(--border);
    margin-top: 18px;
    padding-top: 4px;
}

/* Ürün ve ölçüler / Ürün detayları sütunlarındaki arama kutusu + "..." butonu satırı. */
.ph-arama-buton-satiri {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.ph-arama-buton-satiri input {
    flex: 1;
}

.ph-uc-nokta {
    flex-shrink: 0;
    padding: 10px 14px;
}

.ph-olcu-tablo th, .ph-olcu-tablo td {
    padding: 8px 10px;
}

.ph-olcu-tablo input[type="number"] {
    width: 100%;
    padding: 8px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
}

/* Görsel yükleme henüz projede yok - pasif placeholder kutular (bkz. PerdeHesap.razor). */
.ph-gorsel-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ph-gorsel-kutu {
    aspect-ratio: 1.3;
    border: 1.5px dashed var(--border);
    border-radius: 10px;
    background: var(--paper);
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: not-allowed;
}

.ph-fiyat-panel {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 4px;
}

.ph-fiyat-panel .fatura-toplam-satir {
    padding: 10px 0 0 0;
}

.ph-buyuk-yesil-buton {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-radius: 8px;
    background: var(--success);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.ph-buyuk-yesil-buton:hover {
    background: #257A4C;
}

.ph-buyuk-yesil-buton:active {
    transform: translateY(1px);
}

@media (max-width: 1180px) {
    .ph-izgara {
        grid-template-columns: 1fr;
    }
}


/* ---- Anasayfa: kapatılabilir özet paneli, kutulu gruplar ---- */
.ozet-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
}

.ozet-panel-baslik {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 18px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.ozet-panel-ad {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}

.ozet-panel-ipucu {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.ozet-panel-ok {
    color: var(--muted);
    transition: transform .15s;
    transform: rotate(-90deg);
    line-height: 1;
}

.ozet-panel-ok.acik { transform: rotate(0deg); }

.ozet-panel-icerik {
    padding: 2px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.ozet-kutu {
    display: flex;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.ozet-kutu-ic {
    flex: 1;
    min-width: 0;
    padding: 10px 12px 12px;
}

.ozet-baslik {
    margin: 0 0 8px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--muted);
}

/* Sadece "dikkat" kutusunda: sol kenarda dikey uyarı etiketi */
.ozet-dikey-etiket {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    flex-shrink: 0;
    background: var(--error);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.ozet-dikey-etiket span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.ozet-dikey-etiket-sakin { background: var(--success); }

.ozet-izgara {
    display: grid;
    grid-template-columns: repeat(var(--kolon, 4), 1fr);
    gap: 10px;
}

.ozet-kart {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ozet-kart-tikla {
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
}

.ozet-kart-tikla:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 10px rgba(31, 51, 88, 0.08);
}

.ozet-etiket {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    color: var(--muted);
}

.ozet-deger {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, 'Liberation Mono', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
}

.ozet-birim {
    font-size: 14px;
    color: var(--muted);
    margin-right: 3px;
}

.ozet-tam {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.ozet-kurus {
    font-size: 15px;
    color: var(--muted);
}

.ozet-alt {
    font-size: 11.5px;
    color: var(--muted);
}

.ozet-ton-pozitif .ozet-tam { color: var(--success); }
.ozet-ton-negatif .ozet-tam,
.ozet-ton-uyari .ozet-tam { color: var(--error); }

@media (max-width: 1100px) {
    .ozet-izgara { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .ozet-izgara { grid-template-columns: 1fr; }
    .ozet-tam { font-size: 23px; }
}


/* ---- Telefon uyumu (çekmece menü, tablolar, modallar, formlar) ---- */
.mobil-menu-dugme {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--ink, #1f2937);
    cursor: pointer;
    padding: 0;
}

.mobil-menu-dugme svg {
    width: 22px;
    height: 22px;
}

@media screen and (max-width: 768px) {
    .mobil-menu-dugme {
        display: inline-flex;
    }

    .magaza-adi-v2 {
        display: block;
    }

    html, body {
        overflow-x: hidden;
    }

    /* iOS giriş alanına odaklanınca yakınlaştırmasın */
    input, select, textarea {
        font-size: 16px !important;
    }

    button, .btn, [class*="buton"] {
        min-height: 38px;
    }

    .ust-cubuk-v2 {
        padding: 0 10px;
        height: 56px;
    }

    .ust-cubuk-sag {
        gap: 6px;
    }

    .sekme-cubugu {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tablolar: yatay kaydırılabilir kap, yapışkan olmayan başlık */
    .tablo-panel,
    .tablo-kap,
    .tablo-sarmal {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .tablo-panel table {
        min-width: 560px;
    }

    /* Modallar: tam genişlik, ekrana sığan yükseklik */
    [class*="-modal-kutu"],
    [class*="-modal-icerik"],
    [class*="modal-kart"],
    .stok-modal,
    .cari-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 92dvh;
        overflow-y: auto;
        box-sizing: border-box;
    }

    /* Yan yana iki/üç kolonlu form satırları alt alta */
    .form-satir,
    .form-izgara,
    .form-iki-sutun,
    .cari-form-izgara {
        grid-template-columns: 1fr !important;
    }

    .ozet-izgara {
        grid-template-columns: 1fr 1fr !important;
    }

    .cari-modal-arkaplan,
    .stok-modal-arkaplan {
        padding: 8px;
    }
}

/* Telefon: hareket/liste tabloları kart görünümüne döner */
@media screen and (max-width: 768px) {
    table.veri-tablo:not(.mobil-kart-tablo) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .tablo-panel table.mobil-kart-tablo {
        min-width: 0;
    }

    .mobil-kart-tablo,
    .mobil-kart-tablo tbody,
    .mobil-kart-tablo tr,
    .mobil-kart-tablo td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    .mobil-kart-tablo thead {
        display: none;
    }

    .mobil-kart-tablo tbody tr {
        background: #fff !important;
        border: 1px solid var(--border);
        border-radius: 10px;
        margin: 0 0 10px;
        padding: 6px 12px;
    }

    .mobil-kart-tablo tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        border: none !important;
        padding: 5px 0 !important;
        text-align: right !important;
        white-space: normal !important;
    }

    .mobil-kart-tablo tbody td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        text-align: left;
    }

    .mobil-kart-tablo tbody td.mk-aciklama {
        flex-direction: column;
        align-items: flex-start;
        text-align: left !important;
        gap: 2px;
    }

    .mobil-kart-tablo tbody td.mk-aciklama::before {
        font-size: 11px;
    }

    /* Müşteri/Firma listesi: telefonda Kod ve Son İşlem/Yetkili sütunları
       gizlenip yerine baş harfli yuvarlak rozet + isim satırı gösterilir. */
    .mobil-kart-tablo tbody td.mk-mobil-gizle {
        display: none;
    }

    .mobil-kart-tablo tbody td.mk-isim-hucre {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left !important;
        gap: 12px;
    }

    .mobil-kart-tablo tbody td.mk-isim-hucre::before {
        content: none;
    }

    .mk-avatar {
        display: none;
    }

    .mobil-kart-tablo tbody td.mk-isim-hucre .mk-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--accent-bg);
        color: var(--accent-dark);
        font-family: 'Sora', sans-serif;
        font-weight: 700;
        font-size: 14px;
    }

    .mobil-kart-tablo tbody td.mk-isim-hucre .mk-isim-metin {
        flex: 1;
        min-width: 0;
    }

    .mobil-kart-tablo tbody td.tablo-eylemler {
        justify-content: flex-end;
        gap: 10px;
        border-top: 1px solid var(--border) !important;
        margin-top: 4px;
        padding-top: 8px !important;
    }

    .mobil-kart-tablo tbody td.tablo-eylemler .ikon-buton {
        width: 42px;
        height: 38px;
    }

    .mobil-kart-tablo tr.cari-devreden-satir td[colspan] {
        justify-content: flex-start;
    }

    .tablo-panel {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .cari-sayfalama {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
}