:root {
    --ust-cubuk-yukseklik: 56px;
    --yan-menu-genislik: 260px;

    /* Kurumsal renkler Detam logosundan örneklendi: kıvrım mavisi #1058a0,
       "DETAM" yazısı #1080b8, en koyu ton #103860. Menü yazısı koyu zeminde
       7:1, aktif öğe 4.4:1 kontrast verir. */
    --marka-renk: #1058a0;
    --yan-menu-arka: #0f3a66;
    --yan-menu-arka-koyu: #0b2c4d;
    --yan-menu-yazi: #b9cde3;
    --yan-menu-aktif: #4aa8e0;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 15px;
    }
}

body {
    min-height: 100vh;
    background-color: #f4f6f9;
}

/* Üst çubuk. Logo beyaz zeminli olduğu için çubuk da beyaz, marka rengi sol menüde kullanılıyor. */
.ust-cubuk {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ust-cubuk-yukseklik);
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1rem;
    background-color: #fff;
    border-bottom: 1px solid #dde3e8;
    z-index: 1030;
}

.ust-cubuk-marka {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Detam logosu kare oranlı, okunabilir olması için çubuk yüksekliğinin çoğunu kullanır. */
.ust-cubuk-logo {
    height: 42px;
    width: auto;
}

.ust-cubuk-ayrac {
    align-self: center;
    height: 24px;
    width: 1px;
    background-color: #dde3e8;
}

.ust-cubuk-baslik {
    color: #5b6b73;
    font-size: .9rem;
    font-weight: 500;
}

/* Giriş ekranındaki logo */
.giris-logo {
    height: 128px;
    width: auto;
}

/* Panel yerleşimi */
.panel-govde {
    display: flex;
    padding-top: var(--ust-cubuk-yukseklik);
}

.yan-menu-sabit {
    position: fixed;
    top: var(--ust-cubuk-yukseklik);
    bottom: 0;
    left: 0;
    width: var(--yan-menu-genislik);
    overflow-y: auto;
    background-color: var(--yan-menu-arka);
}

.panel-icerik {
    flex: 1;
    min-width: 0;
    padding: 1.25rem;
}

@media (min-width: 992px) {
    .panel-icerik {
        margin-left: var(--yan-menu-genislik);
    }
}

/* Sol menü */
.yan-menu-offcanvas {
    background-color: var(--yan-menu-arka);
    color: var(--yan-menu-yazi);
    width: var(--yan-menu-genislik);
}

.yan-menu-offcanvas .offcanvas-header {
    background-color: var(--yan-menu-arka-koyu);
    color: #fff;
}

.yan-menu-liste,
.yan-menu-alt {
    list-style: none;
    margin: 0;
    padding: 0;
}

.yan-menu-liste {
    padding: .5rem 0 2rem;
}

.yan-menu-baglanti {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem 1rem;
    color: var(--yan-menu-yazi);
    background: none;
    border: none;
    text-align: left;
    text-decoration: none;
    font-size: .92rem;
}

.yan-menu-baglanti:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
}

.yan-menu-baglanti.aktif {
    background-color: rgba(13, 110, 253, .18);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--yan-menu-aktif);
}

.yan-menu-baglanti i.bi {
    font-size: 1rem;
    width: 1.2rem;
    flex-shrink: 0;
}

.yan-menu-baglanti span {
    flex: 1;
    min-width: 0;
}

.yan-menu-ok {
    transition: transform .15s ease-in-out;
}

.yan-menu-grup.collapsed .yan-menu-ok {
    transform: rotate(-90deg);
}

.yan-menu-alt .yan-menu-baglanti {
    padding-left: 2.4rem;
    font-size: .87rem;
}

/* Henüz geliştirilmemiş modüller */
.yan-menu-rozet {
    flex: none;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .5px;
    padding: .1rem .35rem;
    border-radius: .25rem;
    background-color: #ffc107;
    color: #332701;
}

/* Tablolar */
.table > :not(caption) > * > * {
    padding: .55rem .6rem;
}

/* QR önizleme: kaynak yokken kırık resim yerine yer tutucu metin görünür */
.qr-onizleme-cerceve img:not([src]) {
    display: none;
}

.qr-onizleme-cerceve img[src] + .qr-onizleme-bos {
    display: none;
}

.qr-onizleme-bos {
    width: 240px;
    padding: 2.5rem 1rem;
}