/* sPortal — istemci arayuzu.
   Bootstrap 5 uzerine yalnizca gerekli eklemeler; cerceve ezilmez. */

:root {
    /* Kurumsal mavi. Bootstrap'in kendi --bs-primary'si de buraya
       baglanir; boylece rozetler, baglantilar ve vurgular tek yerden
       degisir ve ekranlar arasinda ton farki olusmaz. */
    --sp-marka: #3c81b5;
    --sp-marka-koyu: #316a95;
    --sp-marka-rgb: 60, 129, 181;

    --bs-primary: #3c81b5;
    --bs-primary-rgb: 60, 129, 181;
    --bs-link-color: #3c81b5;
    --bs-link-color-rgb: 60, 129, 181;
    --bs-link-hover-color: #316a95;
    --bs-primary-bg-subtle: #e6eff6;
    --bs-primary-border-subtle: #bcd5e7;
    --bs-primary-text-emphasis: #2a5b80;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Marka ---------- */

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: var(--sp-marka);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: -.02em;
}

.brand-mark-lg {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: .9rem;
    font-size: 1.15rem;
}

.btn-primary {
    --bs-btn-bg: var(--sp-marka);
    --bs-btn-border-color: var(--sp-marka);
    --bs-btn-hover-bg: var(--sp-marka-koyu);
    --bs-btn-hover-border-color: var(--sp-marka-koyu);
    --bs-btn-active-bg: var(--sp-marka-koyu);
    --bs-btn-active-border-color: var(--sp-marka-koyu);
}

.form-control:focus,
.form-check-input:focus {
    border-color: var(--sp-marka);
    box-shadow: 0 0 0 .2rem rgba(var(--sp-marka-rgb), .18);
}

/* ---------- Giris ekrani ---------- */

.giris-sayfasi {
    background: linear-gradient(160deg, #eef2fb 0%, #f8f9fb 55%, #eef2fb 100%);
    min-height: 100vh;
    min-height: 100dvh;
}

/* Koyu modda zemin de koyulasir; kart ile arka plan arasinda kopukluk
   olmasin. Marka rengi ipucu olarak korunur. */
[data-bs-theme="dark"] .giris-sayfasi {
    background: linear-gradient(160deg, #12161d 0%, #171b22 55%, #12161d 100%);
}

/* Giris icerigi ekrana ortalanir; yukseklik dvh ile olculur ki mobil
   adres cubugu 100vh'i tasirip kaydirma cubugu cikarmasin. */
.giris-dikey {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Dogrulama kodu alani: rakamlar genis araliklı ve tek genislikte gorunur */
.kod-alani {
    letter-spacing: .55em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 1.4rem;
    padding-left: .55em;
}

.kod-alani::placeholder {
    letter-spacing: .55em;
    opacity: .35;
}

/* ---------- Oturum cakismasi karti ---------- */

.cakisma-karti {
    border: 1px solid var(--bs-warning-border-subtle);
    background: var(--bs-warning-bg-subtle);
    border-radius: .75rem;
    padding: 1rem;
}

.cakisma-simge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--bs-warning);
    color: #fff;
    font-weight: 700;
}

/* ---------- Panel ---------- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
    font-weight: 600;
    font-size: .85rem;
}

.durum-nokta {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.bildirim-simge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: .8rem;
}

.bildirim-okunmamis {
    background: var(--bs-primary-bg-subtle);
}

.min-w-0 {
    min-width: 0;
}

/* Gonderilmekte olan formun butonu tekrar tiklanamaz */
button[disabled] {
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- Kategoriler ---------- */

.kategori-ikon {
    width: 2rem;
    height: 2rem;
    border-radius: .4rem;
    object-fit: cover;
    flex-shrink: 0;
}

.kategori-ikon-bos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-weight: 600;
    font-size: .85rem;
}

.kategori-gorsel-onizleme {
    max-height: 180px;
    object-fit: contain;
}

/* Detay sayfasinin ustundeki genis kapak. Yukseklik sinirlanir ki
   dik cekilmis bir fotograf tum sayfayi kaplamasin. */
.kategori-kapak {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

/* ---------- Haberler ---------- */

/* Icerik duz metin olarak gosterilir; satir sonlari korunur, HTML islenmez. */
.haber-icerik {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.7;
}

/* Editorden gelen icerik: HTML zaten paragraf/satir etiketi tasidigi icin
   pre-wrap kapatilir; yoksa kaynak koddaki her girinti sayfada bosluga
   donusur ve metin darmadagin gorunur. */
.haber-icerik-html { white-space: normal; }

.haber-icerik-html img {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
}

.haber-icerik-html blockquote {
    border-left: 3px solid var(--bs-border-color);
    padding-left: 1rem;
    color: var(--bs-secondary-color);
}

.haber-icerik-html table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.haber-icerik-html th,
.haber-icerik-html td {
    border: 1px solid var(--bs-border-color);
    padding: .35rem .6rem;
}

/* Okuma sayfasindaki kapak: kart genisliginde, asiri uzamamasi icin
   yukseklik sinirli. */
.haber-kapak-oku {
    max-height: 340px;
    object-fit: cover;
}

.haber-satiri {
    padding-left: 1rem;
}

/* ---------- HTML editoru onizlemesi ---------- */

.onizleme-cercevesi {
    width: 100%;
    height: 260px;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: #fff;
}

/* ---------- Sol menu duzeni ---------- */

.uygulama-duzeni {
    display: flex;
    min-height: 100vh;

    /* Mobil tarayicida 100vh adres cubugunu da sayar ve sayfa, icerik
       sigmasa bile birkac piksel kayar. dvh gercek gorunur yuksekligi
       verir; destegi olmayan tarayici ustteki 100vh'te kalir. */
    min-height: 100dvh;
}

/* Masaustunde sabit sutun; dar ekranda Bootstrap offcanvas devralir. */
@media (min-width: 992px) {
    .yan-menu {
        width: 240px;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
    }
}

.yan-menu {
    background: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
}

.yan-menu-baslik {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.yan-menu-icerik {
    padding: .75rem .75rem;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Grup basligi bir SATIRDIR, tabela degil: buyuk harf ve genis harf araligi
   bakisi kendine cekip asil menu ogelerini geri plana atiyordu. Normal
   yaziyla, ogelerle ayni hizada ve tiklanabilir bir satir olarak durur. */
.yan-grup-baslik {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    border: 0;
    background: none;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-body-color);
    padding: .45rem .65rem;
    margin-top: .35rem;
    border-radius: .4rem;
    cursor: pointer;
    text-align: left;
}

.yan-grup-baslik:hover {
    background: var(--bs-tertiary-bg);
}

/* Grup basliginin yazisi kalan alani doldurur; ok en saga yaslanir. */
.yan-grup-baslik-yazi {
    flex: 1 1 auto;
}

/* Gruba ait ogeler bir tik iceride durur: hangi baglantinin hangi baslik
   altinda oldugu tek bakista anlasilir. */
.yan-grup-icerik .yan-baglanti {
    padding-left: 1.85rem;
}

/* Ok isareti: acikken asagi, kapaliyken saga bakar. */
.yan-grup-baslik::after {
    content: "";
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    padding: 2.5px;
    transform: rotate(45deg);
    transition: transform .15s ease;
}

.yan-grup-baslik.collapsed::after {
    transform: rotate(-45deg);
}

.yan-grup-icerik {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Bootstrap collapse animasyonu sirasinda flex yerlesimi bozulmasin. */
.yan-grup-icerik.collapsing {
    display: block;
}

.yan-grup-icerik:not(.show):not(.collapsing):not(.arama-acik) {
    display: none;
}

/* Arama sirasinda eslesme iceren kapali gruplar gecici olarak gorunur. */
.yan-grup-icerik.arama-acik {
    display: flex;
}

.yan-baglanti {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .65rem;
    border-radius: .4rem;
    font-size: .875rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

.yan-baglanti:hover {
    background: var(--bs-tertiary-bg);
}

.yan-baglanti.active {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

.yan-menu-alt {
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.icerik-sutunu {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ust-cubuk {
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    padding: .5rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 52px;
}

.icerik-govde {
    padding: 1.5rem 1.25rem;
    flex-grow: 1;
}

@media (min-width: 992px) {
    .icerik-govde { padding: 1.5rem 2rem; }
}

/* Sag tik menusu imlecin oldugu yerde acilir. */
#menuSagTik {
    position: fixed;
    z-index: 2000;
}

#menuSagTik.acik {
    display: block;
}

/* ---------- Ic sekmeler ---------- */

.sekme-cubugu {
    display: flex;
    align-items: center;
    gap: .25rem;
    overflow-x: auto;
    min-width: 0;
    scrollbar-width: thin;
}

.sekme {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: .3rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    background: var(--bs-tertiary-bg);
    font-size: .82rem;
    color: var(--bs-body-color);
    cursor: pointer;
    white-space: nowrap;

    /* Tum sekmeler ayni genislikte olur; uzun adlar uc noktayla (...) kisalir. */
    width: 118px;
    flex-shrink: 0;
}

.sekme.aktif {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

.sekme .sekme-ad {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sekme .sekme-kapat {
    border: 0;
    background: none;
    padding: 0 .1rem;
    line-height: 1;
    font-size: 1rem;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}

.sekme .sekme-kapat:hover { opacity: 1; }

.sekme-paneli {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sekme-cercevesi {
    flex-grow: 1;
    width: 100%;
    border: 0;
    min-height: 0;
}

/* Cerceve icindeki sayfa: kabuk yok, yalnizca icerik dolgusu. */
.cerceve-govde { min-height: 100vh; }

/* ---------- Benim menum ve logo ekrani ---------- */

.yan-grup-etiket {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    padding: .35rem .5rem .25rem;
}

.logo-ekrani {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
}

.brand-mark-buyuk {
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .85;
}

/* Ust cubuktaki avatar fotografi */
.avatar-foto {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.profil-foto-onizleme {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

/* Denetim kaydindaki JSON ozeti tek satirda kisaltilir; tamami title ile gorunur. */
.log-veri {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Menu sekmeleri, ikonlar ve tema ---------- */

.menu-sekmeleri {
    display: flex;
    gap: .25rem;
    padding: .75rem .75rem 0;
}

.menu-sekme {
    flex: 1 1 0;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    border-radius: .4rem;
    padding: .3rem .4rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.menu-sekme.aktif {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

/* Ikonlu menu baglantisi */
.yan-baglanti {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.menu-ikon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: .75;
}

.yan-baglanti.active .menu-ikon { opacity: 1; }

.yan-baglanti-ad {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ic sekme cercevesi koyu modda beyaz parlamasin */
.sekme-cercevesi { background: var(--bs-body-bg); }

/* Onizleme cercevesi icerigi her zaman acik zeminli e-postadir */
.onizleme-cercevesi { background: #fff; }

/* ---------- Kaynak grafigi ---------- */

.kaynak-grafigi {
    width: 100%;
    height: 240px;
}

.grafik-kilavuz {
    stroke: var(--bs-border-color);
    stroke-width: 1;
}

.grafik-cizgi {
    fill: none;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.grafik-cpu-cizgi { stroke: var(--bs-primary); }
.grafik-bellek-cizgi { stroke: var(--bs-warning); }

.grafik-isaret {
    display: inline-block;
    width: 10px;
    height: 3px;
    vertical-align: middle;
    border-radius: 2px;
}

.grafik-isaret.grafik-cpu { background: var(--bs-primary); }
.grafik-isaret.grafik-bellek { background: var(--bs-warning); }

/* Ust cubuktaki eylem dugmeleri iki satira kirilmasin. */
.ust-cubuk .btn { white-space: nowrap; flex-shrink: 0; }

/* Urun ekranlari */
.urun-ozellik-tablosu tr:nth-child(odd) td { background: var(--bs-tertiary-bg); }

.urun-galeri-gorsel {
    width: 100%;
    height: 110px;
    object-fit: cover;
}

/* ---------- Seri numarasi onizlemesi ---------- */

.seri-onizleme {
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    overflow: hidden;
    text-align: center;
}

.seri-onizleme-baslik {
    background: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    padding: .35rem;
    font-size: .8rem;
    font-weight: 600;
}

.seri-onizleme-satir {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr 1.6fr;
}

.seri-hucre {
    padding: .35rem .25rem;
    border-right: 1px solid var(--bs-border-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
}

.seri-hucre:last-child { border-right: 0; }

.seri-onizleme-satir.seri-etiket .seri-hucre {
    font-size: .65rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    border-top: 1px solid var(--bs-border-color);
    font-family: inherit;
}

.seri-onizleme-alt {
    border-top: 1px solid var(--bs-border-color);
    padding: .35rem;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

/* ------------------------------------------------------------------
   Olcu yardimcilari
   Icerik guvenlik politikasi satir ici stile izin vermedigi icin
   (style-src 'self') sabit genislikler burada sinif olarak tutulur.
   Degeri calisma aninda belirlenen olculer data-* ile verilir ve
   site.js tarafindan uygulanir.
   ------------------------------------------------------------------ */
.g-40 { width: 40px; }
.g-48 { width: 48px; }
.g-60 { width: 60px; }
.g-80 { width: 80px; }
.g-90 { width: 90px; }
.g-120 { width: 120px; }
.g-160 { width: 160px; }
.g-130 { width: 130px; }
.g-220 { width: 220px; }
.g-240 { width: 240px; }
.g-40y { width: 40%; }

.en-cok-14 { max-width: 14rem; }
.en-cok-18 { max-width: 18rem; }
.en-cok-320 { max-width: 320px; }
.en-az-14 { min-width: 14rem; }

.progress-ince { height: 6px; }

/* ------------------------------------------------------------------
   Ayarlar ekrani
   ------------------------------------------------------------------ */
.ayar-menu .list-group-item {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    margin-bottom: .5rem;
    text-align: left;
    background: var(--bs-body-bg);
}

.ayar-menu .list-group-item.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.marka-onizleme {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: .5rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
}

.marka-onizleme img {
    max-height: 68px;
    max-width: 100%;
    object-fit: contain;
}

/* Sol menudeki logo; yuksekligi rozetle ayni tutulur ki basli k kaymasin. */
.marka-logo {
    max-height: 28px;
    max-width: 140px;
    object-fit: contain;
}

.giris-logo {
    max-height: 64px;
    max-width: 220px;
    object-fit: contain;
}

/* Haber kapaklari listede sabit oranli kutuda durur. */
.haber-kapak {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
}

.kapak-onizleme { max-width: 320px; }

/* Liste kartlarindaki kucuk kapak; dar ekranda tam genislige yayilir. */
.haber-kapak-liste {
    width: 160px;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .haber-kapak-liste { width: 100%; }
}

/* ------------------------------------------------------------------
   Daraltilmis sol menu
   Yalnizca simgeler kalir; yazilar, arama kutusu ve grup basliklari
   gizlenir. Fare ile uzerine gelince ad ipucu olarak gorunur (title).
   Yalnizca masaustunde gecerlidir; dar ekranda menu zaten cekmecedir.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .yan-menu.menu-dar {
        width: 64px;
    }

    .yan-menu.menu-dar .yan-baglanti-ad,
    .yan-menu.menu-dar .yan-menu-yazi,
    .yan-menu.menu-dar .yan-grup-baslik-yazi,
    .yan-menu.menu-dar .menu-arama-kutusu,
    .yan-menu.menu-dar .yan-menu-sekmeler,
    .yan-menu.menu-dar .cikis-yazi {
        display: none;
    }

    .yan-menu.menu-dar .yan-menu-baslik {
        padding: 1rem .25rem;
        justify-content: center;

        /* Tasan bir marka logosu dar rayin disina cikip genisletme dugmesini
           gorunmez kilmasin. */
        overflow: hidden;
    }

    /* Daraltma dugmesi ortada TEK BASINA kalir.
       !important bilincli: kullanici menuyu daraltip bu dugmeyi kaybederse
       menuyu bir daha acamaz. Gorunurlugu hicbir kurala birakilamaz. */
    .yan-menu.menu-dar .yan-menu-baslik > a {
        display: none !important;
    }

    .yan-menu.menu-dar #menuDaralt {
        display: inline-flex !important;
        margin: 0 auto;
        flex: 0 0 auto;
    }

    .yan-menu.menu-dar .yan-baglanti {
        justify-content: center;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .yan-menu.menu-dar .yan-grup-baslik {
        justify-content: center;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .yan-menu.menu-dar .yan-menu-icerik {
        padding-left: .35rem;
        padding-right: .35rem;
    }

    /* Daraltilmisken acilir gruplar hep acik durur; baslik gizlendigi icin
       kullanicinin grubu acacak bir tutamagi kalmazdi. */
    .yan-menu.menu-dar .yan-grup-icerik {
        display: block !important;
    }

    .yan-menu.menu-dar #menuDaralt svg {
        transform: rotate(180deg);
    }
}

/* Zorunlu alan isareti: etiketin yanina kirmizi yildiz. */
.zorunlu-isaret {
    color: var(--bs-danger);
    margin-left: .15rem;
    font-weight: 700;
}

/* ------------------------------------------------------------------
   Sol menu alt cubugu: kullanici karti + cikis/tema/hata dugmeleri
   ------------------------------------------------------------------ */
.yan-kullanici {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem;
    border-radius: .5rem;
    color: var(--bs-body-color);
    min-width: 0;
}

.yan-kullanici:hover { background: var(--bs-tertiary-bg); }

.yan-kullanici-yazi { min-width: 0; }

/* Daraltilmis menude yalnizca avatar ve simgeler kalir. */
@media (min-width: 992px) {
    .yan-menu.menu-dar .yan-kullanici-yazi { display: none; }
    .yan-menu.menu-dar .yan-kullanici { justify-content: center; }

    .yan-menu.menu-dar .yan-menu-dugmeler {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------------
   Sekme yukleniyor cubugu
   Belirsiz ilerleme: sure bilinmedigi icin sagdan sola akan bir seritle
   islemin surdugu gosterilir.
   ------------------------------------------------------------------ */
.sekme-yukleniyor {
    height: 3px;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
    position: relative;
}

.sekme-yukleniyor::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--bs-primary);
    animation: sekme-akis 1s ease-in-out infinite;
}

@keyframes sekme-akis {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .sekme-yukleniyor::after { animation: none; width: 100%; opacity: .5; }
}

/* ------------------------------------------------------------------
   Hata bildirimi: ekran goruntusu yapistirma alani
   ------------------------------------------------------------------ */
.hata-yapistir {
    border: 2px dashed var(--bs-border-color);
    border-radius: .5rem;
    padding: 1rem;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bs-tertiary-bg);
    cursor: text;
}

.hata-yapistir:focus {
    outline: none;
    border-color: var(--bs-primary);
}

.hata-yapistir img {
    max-width: 100%;
    max-height: 320px;
    border-radius: .35rem;
}

.hata-detay { white-space: pre-wrap; }

/* ------------------------------------------------------------------
   Hata bildirimi ekran goruntuleri
   Hepsi ayni olcude kare kucuk gorsel olarak dizilir; farkli oranlardaki
   goruntuler listeyi dagitmasin. Tam hali tiklaninca buyutulur.
   ------------------------------------------------------------------ */
.hata-gorsel-baglantisi {
    display: block;
    line-height: 0;
    border-radius: .5rem;
    overflow: hidden;
}

.hata-gorsel {
    width: 140px;
    height: 140px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
    transition: transform .12s ease-out, border-color .12s ease-out;
}

.hata-gorsel-baglantisi:hover .hata-gorsel,
.hata-gorsel-baglantisi:focus-visible .hata-gorsel {
    transform: scale(1.03);
    border-color: var(--bs-primary);
}

@media (prefers-reduced-motion: reduce) {
    .hata-gorsel { transition: none; }
    .hata-gorsel-baglantisi:hover .hata-gorsel { transform: none; }
}

/* Buyutulmus gorsel pencerede ekrana sigacak kadar buyur. */
.gorsel-buyut-govde {
    background: var(--bs-dark);
    text-align: center;
    padding: 0;
}

.gorsel-buyut-govde img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

/* Hata bildiriminde eklenen gorsellerin kucuk onizlemeleri */
.hata-kucuk {
    position: relative;
    width: 84px;
    height: 84px;
    border: 1px solid var(--bs-border-color);
    border-radius: .35rem;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.hata-kucuk img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hata-kucuk button {
    position: absolute;
    top: 2px;
    right: 2px;
    line-height: 1;
    padding: 0 .3rem;
}

/* ------------------------------------------------------------------
   Onay sistemi: surukle birak adim listesi ve talep ekranlari
   ------------------------------------------------------------------ */

/* draggable niteligi HTML5'in kendi ozelligidir; satir ici betik ya da
   stil gerektirmedigi icin icerik guvenlik politikasina takilmaz. */
.surukle-satir {
    cursor: default;
}

.surukle-tutamac {
    cursor: grab;
    user-select: none;
    color: var(--bs-secondary-color);
    letter-spacing: -2px;
    font-size: 1.1rem;
    line-height: 1.2;
}

.surukle-satir.surukle-tasiniyor {
    opacity: .45;
}

/* Birakma hedefi ust kenardan cizgiyle isaretlenir; kullanici satirin
   nereye dusecegini onceden gorur. */
.surukle-satir.surukle-ustunde {
    box-shadow: inset 0 3px 0 0 var(--bs-primary);
}

.adim-sira {
    min-width: 1.9rem;
    text-align: center;
}

/* Talep satiri: onayci tarafindan cikarilan kalem uzeri cizili gosterilir. */
.satir-silinmis {
    opacity: .6;
}

.satir-silinmis .satir-aciklama {
    text-decoration: line-through;
}

/* Zaman tuneli */
.zaman-tuneli {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.zaman-tuneli li {
    position: relative;
    padding-left: 1.4rem;
    padding-bottom: 1rem;
    border-left: 2px solid var(--bs-border-color);
    margin-left: .35rem;
}

.zaman-tuneli li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.zaman-tuneli li::before {
    content: "";
    position: absolute;
    left: -.42rem;
    top: .3rem;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    border: 2px solid var(--bs-border-color);
}

.zaman-tuneli li.tunel-onay::before {
    background: var(--bs-success);
    border-color: var(--bs-success);
}

.zaman-tuneli li.tunel-ret::before {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
}

.zaman-tuneli li.tunel-geri::before {
    background: var(--bs-warning);
    border-color: var(--bs-warning);
}

/* Adim kartlari */
.adim-kart-sirada {
    border-left: 4px solid var(--bs-primary) !important;
}

.adim-kart-onay {
    border-left: 4px solid var(--bs-success) !important;
}

.adim-kart-atlandi {
    border-left: 4px solid var(--bs-secondary-bg) !important;
}

.adim-kart-ret {
    border-left: 4px solid var(--bs-danger) !important;
}

/* ------------------------------------------------------------------
   Onayimda bekleyenler: rozet + titreyen zil

   Sayiyi /durum yoklamasi doldurur. Bekleyen is yoksa ikisi de gizlidir;
   sessiz bir menu, hicbir sey beklemeyen kullaniciyi rahatsiz etmemeli.
   ------------------------------------------------------------------ */
#onayBekleyenBaglanti {
    position: relative;
}

/* Rozet ve zil sagda toplanir; menu adi kalan alani doldurur. */
#onayBekleyenBaglanti .yan-baglanti-ad {
    flex: 1 1 auto;
}

.onay-rozet {
    font-size: .7rem;
    min-width: 1.35rem;
    flex: 0 0 auto;
}

.onay-zil {
    display: inline-flex;
    align-items: center;
    color: var(--bs-danger);
    flex: 0 0 auto;
}

.onay-zil .menu-ikon {
    width: 1rem;
    height: 1rem;
}

/* Zil yalnizca bekleyen is varken titrer. Sonsuz donguye birakilmaz:
   surekli hareket eden bir ogenin okunabilirligi dusurdugu ve rahatsiz
   ettigi bilinir; bu yuzden arada durur. */
.yan-baglanti.onay-var .onay-zil .menu-ikon {
    transform-origin: 50% 10%;
    animation: onay-zil-titre 2.4s ease-in-out infinite;
}

@keyframes onay-zil-titre {
    0%, 62%, 100% { transform: rotate(0deg); }
    66% { transform: rotate(12deg); }
    70% { transform: rotate(-10deg); }
    74% { transform: rotate(8deg); }
    78% { transform: rotate(-6deg); }
    82% { transform: rotate(4deg); }
    86% { transform: rotate(-2deg); }
    90% { transform: rotate(0deg); }
}

/* Hareketi azalt tercihi acikken animasyon calismaz; erisilebilirlik
   gereksinimi ve bazi kullanicilarda bas donmesi yapabilir. */
@media (prefers-reduced-motion: reduce) {
    .yan-baglanti.onay-var .onay-zil .menu-ikon {
        animation: none;
    }
}

/* Menu daraltilmisken ad gizlenir; rozet ikonun ustune kucuk bir nokta
   olarak oturur ki sayi yine gorunsun. */
@media (min-width: 992px) {
    .yan-menu.menu-dar #onayBekleyenBaglanti .onay-zil {
        display: none !important;
    }

    .yan-menu.menu-dar #onayBekleyenBaglanti .onay-rozet {
        position: absolute;
        top: .15rem;
        right: .15rem;
        font-size: .6rem;
        min-width: 1rem;
        padding: .1rem .25rem;
    }
}

/* ==================================================================
   FERAH KATMAN — ortak gorsel dil

   Bu blok en sonda durur ve ustteki kurallari BILEREK ezer. Amac tek
   tek ekranlara dokunmadan tum sistemde ayni nefes alan yerlesimi
   kurmak: daha az cizgi, daha cok bosluk, daha sakin renk.

   Renkler Bootstrap degiskenlerinden turetilir; gece modu kendiliginden
   dogru calisir, ayri bir palet tutulmaz.
   ================================================================== */

:root {
    /* Bosluk olcegi: goz kararı yerine tek bir merdiven. */
    --sp-bosluk-1: .5rem;
    --sp-bosluk-2: .875rem;
    --sp-bosluk-3: 1.25rem;
    --sp-bosluk-4: 1.75rem;

    --sp-yaricap: .625rem;

    /* Cizgi yerine golge: kutulari ayirmak icin daha sessiz bir yol. */
    --sp-golge: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --sp-golge-yumusak: 0 1px 2px rgba(16, 24, 40, .03);
}

body {
    line-height: 1.55;
}

/* ---------- Icerik alani ---------- */

.icerik-govde {
    padding: var(--sp-bosluk-4) var(--sp-bosluk-3);
    max-width: 1600px;
    width: 100%;
}

/* ---------- Kartlar ---------- */

.card {
    border-radius: var(--sp-yaricap);
}

.card.shadow-sm {
    box-shadow: var(--sp-golge) !important;
}

.card-body {
    padding: var(--sp-bosluk-3);
}

/* Kart basligi: dolgu yerine yalnizca ince bir ayirac. Renkli seritler
   sayfada gereksiz gurultu yapiyordu. */
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding: var(--sp-bosluk-2) var(--sp-bosluk-3);
}

.card-header h2,
.card-header .h6 {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--bs-border-color-translucent);
    padding: var(--sp-bosluk-2) var(--sp-bosluk-3);
}

/* ---------- Sayfa basligi ---------- */

h1.h4 {
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -.02em;
}

/* ---------- Tablolar ---------- */

/* Baslik satiri: dolu gri blok yerine yalnizca alt cizgi. Tablonun
   agirlik merkezi verinin kendisi olmali. */
.table > thead > tr > th,
.table-light > tr > th,
thead.table-light > tr > th {
    background: transparent !important;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .01em;
    border-bottom: 1px solid var(--bs-border-color) !important;
    padding-top: var(--sp-bosluk-2);
    padding-bottom: var(--sp-bosluk-2);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding-top: var(--sp-bosluk-2);
    padding-bottom: var(--sp-bosluk-2);
    border-color: var(--bs-border-color-translucent);
    vertical-align: middle;
}

/* Son satirin alt cizgisi kart kenariyla ust uste binmesin. */
.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--bs-tertiary-bg);
}

.table-sm > :not(caption) > * > * {
    padding-left: var(--sp-bosluk-2);
    padding-right: var(--sp-bosluk-2);
}

/* ---------- Filtre seridi ---------- */

/* Listelerin ustundeki filtre alani ayri bir kutu gibi durmasin;
   kartin bir parcasi olarak sessizce otursun. */
.card-body.bg-body-tertiary {
    background: transparent !important;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    padding: var(--sp-bosluk-2) var(--sp-bosluk-3);
}

/* ---------- Formlar ---------- */

.form-label {
    font-size: .8rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    margin-bottom: .3rem;
}

.form-control,
.form-select {
    border-radius: .5rem;
    padding: .5rem .75rem;
}

.form-control-sm,
.form-select-sm {
    border-radius: .45rem;
}

.form-text {
    font-size: .75rem;
}

/* ---------- Dugmeler ---------- */

.btn {
    border-radius: .5rem;
    font-weight: 500;
}

.btn-sm {
    border-radius: .45rem;
    padding: .3rem .7rem;
}

/* ---------- Rozetler ---------- */

.badge {
    font-weight: 500;
    padding: .32em .6em;
    border-radius: .4rem;
}

/* ---------- Uyari kutulari ---------- */

.alert {
    border: 0;
    border-radius: var(--sp-yaricap);
    padding: var(--sp-bosluk-2) var(--sp-bosluk-3);
}

/* ---------- Sol menu ---------- */

.yan-menu {
    border-right: 1px solid var(--bs-border-color-translucent);
}

.yan-menu-icerik {
    padding: var(--sp-bosluk-1) var(--sp-bosluk-1);
    gap: 1px;
}

.yan-menu-baslik {
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.yan-baglanti {
    color: var(--bs-secondary-color);
}

.yan-baglanti:hover {
    color: var(--bs-body-color);
}

/* Etkin oge: dolgu yerine sol kenarda ince bir seritle isaretlenir. */
.yan-baglanti.active {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
    box-shadow: inset 2px 0 0 0 var(--bs-primary);
}

.menu-ikon {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    opacity: .8;
}

.yan-baglanti.active .menu-ikon {
    opacity: 1;
}

/* ---------- Ust sekme cubugu ---------- */

.ust-cubuk {
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

/* Sekmeler kagit sekmesi gibi degil, sade birer dugme gibi durur. */
.sekme {
    border-radius: .45rem .45rem 0 0;
    font-size: .82rem;
}

/* ---------- Bos durum ---------- */

/* "Kayit bulunamadi" gibi metinler tek basina bir satir olarak asili
   kalmasin; ortalanip nefes alsin. */
.card-body > p.text-secondary.small:only-child {
    padding: var(--sp-bosluk-4) var(--sp-bosluk-3);
    text-align: center;
}

/* ---------- Onay zinciri kartlari ---------- */

.adim-kart-sirada,
.adim-kart-onay,
.adim-kart-ret,
.adim-kart-atlandi {
    border-left-width: 3px !important;
}

.zaman-tuneli li {
    padding-bottom: var(--sp-bosluk-2);
}

/* ---------- Gece modu ---------- */

/* Gece modunda golge is gormez; ayirici olarak ince cizgi kullanilir. */
[data-bs-theme="dark"] .card.shadow-sm {
    box-shadow: none !important;
    border: 1px solid var(--bs-border-color-translucent) !important;
}

/* ==================================================================
   Sol menu alt seridi — sade tek satir

   Avatar + ad solda, uc sessiz simge sagda. Cerceveli dugme yok:
   alt serit gunde bir kez kullanilan bir alandir, sayfanin en dikkat
   ceken ogesi olmamalidir.
   ================================================================== */

.yan-menu-alt {
    display: flex;
    align-items: center;
    gap: var(--sp-bosluk-1);
    padding: var(--sp-bosluk-1) var(--sp-bosluk-2);
    border-top: 1px solid var(--bs-border-color-translucent);
}

.yan-hesap {
    flex: 1 1 auto;
    min-width: 0;
}

.yan-kullanici {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem .35rem;
    border-radius: .5rem;
    color: var(--bs-body-color);
    min-width: 0;
}

.yan-kullanici:hover {
    background: var(--bs-tertiary-bg);
}

.yan-kullanici-yazi {
    min-width: 0;
    line-height: 1.25;
}

.yan-kullanici-yazi .fw-semibold {
    font-size: .82rem;
}

.yan-kullanici-yazi .small {
    font-size: .72rem;
}

.avatar-foto {
    width: 1.85rem;
    height: 1.85rem;
    flex: 0 0 auto;
    object-fit: cover;
}

/* Cikis formu yerlesimi bozmasin: dugme dogrudan seride otursun. */
.d-contents {
    display: contents;
}

.yan-menu-dugmeler {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

/* Sessiz simge dugmesi: cerceve yok, yalnizca uzerine gelince zemin. */
.yan-simge-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    background: none;
    border-radius: .45rem;
    color: var(--bs-secondary-color);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}

.yan-simge-dugme:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/* Cikis yalnizca UZERINE GELINCE kirmizilasir. Surekli kirmizi duran bir
   dugme, gozun surekli takildigi bir uyari gibi calisiyordu. */
.yan-simge-cikis:hover {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.yan-simge-dugme .menu-ikon {
    width: 1rem;
    height: 1rem;
    opacity: 1;
}

/* ---------- Menu daraltilmisken ---------- */

@media (min-width: 992px) {
    /* Alt serit tek sutuna doner: avatar ustte, simgeler altinda.
       Yan yana sigmadiklari icin eskiden ust uste biniyorlardi. */
    .yan-menu.menu-dar .yan-menu-alt {
        flex-direction: column;
        gap: 2px;
        padding: var(--sp-bosluk-1) .25rem;
    }

    .yan-menu.menu-dar .yan-hesap {
        flex: 0 0 auto;
        width: 100%;
    }

    .yan-menu.menu-dar .yan-kullanici {
        justify-content: center;
        padding: .25rem;
    }

    .yan-menu.menu-dar .yan-kullanici-yazi {
        display: none;
    }

    .yan-menu.menu-dar .yan-menu-dugmeler {
        flex-direction: column;
        width: 100%;
    }

    .yan-menu.menu-dar .yan-simge-dugme {
        width: 100%;
        height: 1.8rem;
    }
}

/* ==================================================================
   Sekme cubugu — sayi arttikca daralan sekmeler

   Onceki halinde her sekme 118px sabitti ve hic daralmiyordu; bes alti
   sekmeden sonra cubuk tasip yatay kaydirma cubugu cikiyordu. Artik
   sekmeler mevcut genisligi paylasir, bir tabana kadar daralir ve
   kaydirma cubugu gizlenir.
   ================================================================== */

.sekme-cubugu {
    gap: 3px;
    scrollbar-width: none;
}

.sekme-cubugu::-webkit-scrollbar {
    display: none;
}

.sekme {
    /* Az sekme varken rahat, cok sekme varken sikisir; 56px tabani
       en az birkac harf ile kapatma dugmesinin sigmasini garanti eder. */
    width: auto;
    flex: 1 1 auto;
    min-width: 56px;
    max-width: 168px;

    padding: .28rem .5rem;
    border-radius: .4rem .4rem 0 0;
    border-bottom-color: transparent;
    background: transparent;
    color: var(--bs-secondary-color);
}

.sekme:hover {
    background: var(--bs-tertiary-bg);
}

/* Etkin sekme: kagit sekmesi taklidi yerine altta ince bir vurgu. */
.sekme.aktif {
    background: transparent;
    border-color: transparent;
    box-shadow: inset 0 -2px 0 0 var(--bs-primary);
    color: var(--bs-body-color);
    font-weight: 600;
}

.sekme .sekme-ad {
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
}

/* Kapatma dugmesi daima gorunur kalir; sekme daralinca ilk feda edilen
   sey ad olmali, cikis yolu degil. */
.sekme .sekme-kapat {
    flex: 0 0 auto;
    opacity: .45;
}

.sekme.aktif .sekme-kapat {
    opacity: .8;
}

/* ==================================================================
   Talep ekranlari

   Karar kutusu ve satir mudahale formu icin. Amac: ekranin en onemli
   eylemi bir tane olsun, geri kalani istenince acilsin.
   ================================================================== */

.karar-kutusu {
    border: 1px solid var(--bs-primary-border-subtle);
    background: var(--bs-primary-bg-subtle);
}

.karar-kutusu .card-header {
    border-bottom-color: var(--bs-primary-border-subtle);
}

.karar-kutusu .form-control,
.karar-kutusu .form-select {
    background: var(--bs-body-bg);
}

/* Ikincil eylemler gorsel olarak geride durur; kullanici once
   "Onayla"yi gorur. */
.karar-ikincil .btn {
    font-weight: 400;
}

/* Satir mudahale formu: tablonun icinde ayri bir ada gibi durur. */
.satir-islem-satiri > td {
    background: var(--bs-tertiary-bg);
}

.satir-islem-kutusu {
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--bs-primary);
}

/* Kalem tablosunda gecmis ayrintisi varsayilan olarak kapali durur. */
.table details > summary {
    cursor: pointer;
    list-style: none;
}

.table details > summary::-webkit-details-marker {
    display: none;
}

.table details > summary::before {
    content: "▸ ";
}

.table details[open] > summary::before {
    content: "▾ ";
}

/* ==================================================================
   Liste ve tablo ekranlari

   Satir sonundaki islem dugmeleri cerceveli birer buton olarak
   duruyordu; her satirda uc kutu, tablo veriden cok dugme tarlasi gibi
   goruluyordu. Artik sessiz baglantilar gibi durur, uzerine gelince
   belirginlesir. Renk anlami (kirmizi = yikici) korunur.
   ================================================================== */

.table > tbody > tr > td:last-child .btn-sm {
    border-color: transparent;
    background: transparent;
    padding: .2rem .45rem;
    font-weight: 500;
}

.table > tbody > tr > td:last-child .btn-outline-primary {
    color: var(--bs-primary);
}

.table > tbody > tr > td:last-child .btn-outline-secondary {
    color: var(--bs-secondary-color);
}

.table > tbody > tr > td:last-child .btn-sm:hover:not(:disabled) {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

.table > tbody > tr > td:last-child .btn-outline-danger:hover:not(:disabled) {
    background: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
}

/* Kilitli dugme (orn. seri numarasi olan urun) soluk ama gorunur kalir:
   neden yapilamadigini ipucu metni anlatir. */
.table > tbody > tr > td:last-child .btn-sm:disabled {
    opacity: .35;
}

/* Islem sutunu sabit genislikte durup satirdan satira zipla­masin. */
.table > thead > tr > th:last-child,
.table > tbody > tr > td:last-child {
    white-space: nowrap;
}

/* Sayisal sutunlar hizali okunur: rakamlar ayni genislikte. */
.table .font-monospace,
.table .text-end {
    font-variant-numeric: tabular-nums;
}

/* Filtre seridi ile tablo arasinda cift cizgi olusmasin. */
.card-body.bg-body-tertiary + .card-body.p-0 .table > thead > tr > th {
    border-top: 0;
}

/* Sayfalama ayagi: iki ucta dugme, ortasi bos kalmasin diye sade. */
.card-footer .btn-outline-secondary {
    border-color: transparent;
}

.card-footer .btn-outline-secondary:hover {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

/* Belge listesinde kategori baslik satiri: ayri kart yerine tablo icinde
   hafif bir ayirac. Iki belge icin uc ayri kart gereksiz agirlikti. */
.belge-grup-satiri > td {
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
}

/* ==================================================================
   ADRES REHBERI
   ================================================================== */

/* Arama 50 sonuca kadar donebilir; kart uzayip sayfayi bozmasin diye
   liste kendi icinde kayar. */
.adres-sonuc-listesi {
    max-height: 22rem;
    overflow-y: auto;
}

.adres-secici .form-control:disabled {
    background-color: var(--bs-secondary-bg, #f3f4f6);
    cursor: not-allowed;
}

/* ------------------------------------------------------------------
   Aranabilir secim kutusu

   Acilir liste yerine kullanilir: 970 ilce ya da binlerce mahalle
   arasinda kaydirmak yerine kullanici yazarak suzer.
   ------------------------------------------------------------------ */

.ara-secim {
    position: relative;
}

.ara-secim-liste {
    position: absolute;
    z-index: 1060;              /* modal icinde de ustte kalsin */
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: .25rem;
    list-style: none;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #d9dde3);
    border-radius: var(--sp-yaricap, .625rem);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

.ara-secim-oge {
    padding: .375rem .625rem;
    border-radius: .375rem;
    cursor: pointer;
    font-size: .875rem;
    line-height: 1.4;
}

.ara-secim-oge:hover,
.ara-secim-oge.vurgulu {
    background-color: var(--bs-secondary-bg, #eef1f5);
}

.ara-secim-bos {
    padding: .5rem .625rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6b7280);
}

/* ------------------------------------------------------------------
   Servis guzergahlari
   ------------------------------------------------------------------ */

/* Hattin rengi kartin sol kenarinda ince bir serittir; renk JS ile
   uygulanir (satir ici stil CSP tarafindan engelleniyor). */
.servis-serit {
    height: 4px;
    background-color: var(--sp-marka, #1b4dd6);
    border-radius: var(--sp-yaricap, .625rem) var(--sp-yaricap, .625rem) 0 0;
}

.servis-durak-tablosu td,
.servis-durak-tablosu th {
    padding-top: .375rem;
    padding-bottom: .375rem;
}

/* Surukle-birak siralamasinda tasinan satir soluklasir. */
#durakSiralama tr.suruklenen {
    opacity: .45;
}

#durakSiralama tr[draggable="true"] {
    cursor: grab;
}

/* ------------------------------------------------------------------
   Yemek menusu
   ------------------------------------------------------------------ */

.yemek-hafta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
}

.yemek-gun.bugun {
    outline: 2px solid var(--sp-marka, #1b4dd6);
    outline-offset: 2px;
}

.yemek-tur-basligi {
    font-size: .6875rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6b7280);
}

#rehberOnizleme {
    border: 1px dashed var(--bs-border-color, #d9dde3);
}

/* ==================================================================
   HARITA

   Karolar, cizgi ve pinler ust uste uc katmandir. Konumlandirma JS'ten
   CSSOM ile yazilir (satir ici stil CSP tarafindan engelleniyor); burada
   yalnizca gorunum tanimlanir.
   ================================================================== */

.sp-harita {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 26rem;
    background-color: #e8eaed;
    border-radius: var(--sp-yaricap, .625rem);
    border: 1px solid var(--bs-border-color, #d9dde3);
    cursor: grab;
    touch-action: none;          /* kaydirma haritanin kendisine ait */
    user-select: none;
}

.sp-harita.kaydiriliyor { cursor: grabbing; }

.sp-harita:focus-visible {
    outline: 2px solid var(--sp-marka, #1b4dd6);
    outline-offset: 2px;
}

/* Karo altligi yoksa gri zemine ince bir izgara cizilir: kullanici
   "harita yuklenmedi" ile "harita altligi yok"u ayirt edebilsin. */
.sp-harita.sema-modu {
    background-color: #f4f5f7;
    background-image:
        linear-gradient(to right, rgba(16, 24, 40, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 24, 40, .06) 1px, transparent 1px);
    background-size: 48px 48px;
}

.sp-harita-karolar,
.sp-harita-cizgi,
.sp-harita-pinler {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sp-karo {
    position: absolute;
    width: 256px;
    height: 256px;
    /* Karo kenarlarindaki sac teli cizgileri engeller. */
    outline: 1px solid transparent;
}

.sp-rota {
    fill: none;
    stroke: var(--sp-marka, #1b4dd6);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Acik dis hat: rota karo uzerinde de okunur kalir. */
.sp-rota-golge {
    fill: none;
    stroke: #fff;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
}

.sp-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;

    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .375rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;

    background-color: var(--sp-marka, #1b4dd6);
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .3);
    cursor: pointer;
}

.sp-pin.suruklenebilir { cursor: grab; }
.sp-pin.suruklerken { cursor: grabbing; opacity: .8; z-index: 5; }

.sp-pin.kilitli { border-style: dashed; }

.sp-pin:hover,
.sp-pin:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
    z-index: 4;
}

.sp-pin-varis {
    background-color: #16a34a;
    font-size: 1rem;
}

.sp-harita-denetim {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    z-index: 6;
}

.sp-harita-dugme {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 1rem;
    line-height: 1;
    color: var(--bs-body-color, #1f2937);

    background-color: rgba(255, 255, 255, .95);
    border: 1px solid var(--bs-border-color, #d9dde3);
    border-radius: .375rem;
    cursor: pointer;
}

.sp-harita-dugme:hover { background-color: #fff; }

.sp-harita-atif {
    position: absolute;
    right: .25rem;
    bottom: .25rem;
    padding: .0625rem .375rem;

    font-size: .6875rem;
    color: #4b5563;

    background-color: rgba(255, 255, 255, .8);
    border-radius: .25rem;
}

.sp-harita-uyari {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    padding: .25rem .5rem;

    font-size: .75rem;
    color: #6b7280;

    background-color: rgba(255, 255, 255, .9);
    border: 1px solid var(--bs-border-color, #d9dde3);
    border-radius: .375rem;
}

/* ------------------------------------------------------------------
   Rota planlayici serit ve olcumler
   ------------------------------------------------------------------ */

.rota-olcumler {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.rota-olcum-deger {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
}

.rota-olcum-etiket {
    font-size: .75rem;
    color: var(--bs-secondary-color, #6b7280);
}

/* "Tahmini" rozeti: kullanici 47 dakikayi olcum sanmamali. */
.rota-tahmini {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Liste kartlarindaki harita daha kucuktur; kart bir ekrani doldurmamali. */
.servis-kart-harita.sp-harita { height: 14rem; }

@media (max-width: 767.98px) {
    .sp-harita { height: 18rem; }
    .servis-kart-harita.sp-harita { height: 12rem; }
}

/* Gomulu Google haritasi. Kendi sema haritamizla ayni yuksekligi
   paylasir ki gorunum degistirince kart ziplamasin. */
.sp-google-harita {
    display: block;
    width: 100%;
    height: 26rem;
    border: 0;
    border-radius: var(--sp-yaricap, .625rem);
}

.servis-kart-harita + .sp-google-harita,
.card-body > .sp-google-harita.mb-3 { height: 14rem; }

@media (max-width: 767.98px) {
    .sp-google-harita { height: 18rem; }
    .card-body > .sp-google-harita.mb-3 { height: 12rem; }
}

/* ------------------------------------------------------------------
   Kategori listesi: seri no kodu

   Seri numarasi "kategori kodu + urun eki" olarak uretilir; bu iki hane
   listede ilk bakista gorunmeli. Sabit genislik verilir ki satirlar alt
   alta hizalansin ve goz kolonu takip edebilsin.
   ------------------------------------------------------------------ */
.kategori-seri-kodu {
    flex: 0 0 auto;
    width: 3.5rem;
    text-align: center;
    padding: .125rem 0;

    font-family: var(--bs-font-monospace, monospace);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--sp-marka, #1b4dd6);

    background-color: var(--bs-secondary-bg, #eef1f5);
    border-radius: .375rem;
}

/* Kodu olmayan kategori sessizce gecmemeli: soluk ama gorunur durur. */
.kategori-seri-kodu-yok {
    color: var(--bs-secondary-color, #9aa2ae);
    font-weight: 400;
}

/* ------------------------------------------------------------------
   Kategori listesi baslik satiri

   Satirlarla ayni flex yapisini ve ayni sutun siniflarini kullanir;
   boylece hizalama tek yerden yonetilir ve satir icerigi degisince
   baslik kaymaz.
   ------------------------------------------------------------------ */
.kategori-baslik-satiri {
    display: flex;
    align-items: center;
    gap: .5rem;

    padding: .5rem 1rem;

    background-color: var(--bs-secondary-bg, #f3f5f7);
    border-bottom: 1px solid var(--bs-border-color, #d9dde3);
}

.kategori-baslik-hucre {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6b7280);
}

/* Baslik satirindaki seri no hucresi rozet gibi gorunmemeli. */
.kategori-seri-kodu.kategori-baslik-hucre {
    background-color: transparent;
    font-family: inherit;
    color: var(--bs-secondary-color, #6b7280);
}

/* Ikon sutununun yerini tutar; icerigi yoktur. */
.kategori-baslik-bos {
    background: transparent;
}

/* Belge sayisi sutunu: baslikta ve satirda ayni genislik. */
.kategori-belge-sutunu {
    flex: 0 0 auto;
    width: 3.5rem;
    text-align: center;
    font-size: .8125rem;
}

/* Islem dugmeleri sutunu: en genis olasilik (Detay + Alt + Düzenle). */
.kategori-islem-sutunu {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    width: 13.5rem;
}

@media (max-width: 575.98px) {
    /* Dar ekranda baslik satiri yer kaplamaktan baska ise yaramaz. */
    .kategori-baslik-satiri { display: none; }
    .kategori-islem-sutunu { width: auto; }
    .kategori-belge-sutunu { width: auto; }
}

/* ==================================================================
   E-ticaret
   ================================================================== */

/* Tanimsiz urun ekranindaki urun arama onerileri. Konumlandirma CSS'te
   durur; satir ici stil icerik guvenlik politikasi tarafindan engellenir. */
.eticaret-oneri {
    top: 100%;
    left: 0;
    z-index: 1050;
    max-height: 18rem;
    overflow-y: auto;
}

/* Magaza ve kargo renk noktasi; rengin kendisi JS ile CSSOM uzerinden
   yazilir (data-renk), cunku satir ici stil yasak. */
.eticaret-renk-nokta {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: var(--bs-secondary-bg);
    margin-right: .35rem;
    vertical-align: middle;
}

/* Kargo ve magaza logosu: satir yuksekligini bozmayacak kadar kucuk. */
.eticaret-logo {
    height: 1.5rem;
    max-width: 6rem;
    object-fit: contain;
    vertical-align: middle;
    margin-right: .4rem;
}

/* Surukleme tutamaci: fare imleci tasinabilirligi bastan belli etsin. */
.surukle-tutamac { cursor: grab; }
.surukle-tutamac:active { cursor: grabbing; }

/* Sekme cubugundaki ikon dugmeleri (yenile / tam ekran). Yazi yerine
   simge kullanilir: cubuk sekmelere ayrilmistir, iki kelime iki sekme
   genisligi kadar yer kapliyordu. */
.arac-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .45rem;
    line-height: 1;
}

.arac-dugme .menu-ikon { width: 1.05rem; height: 1.05rem; }

/* ---------- Monitorler ---------- */

/* Hedef ibresi. Renkler CSS'te durur; SVG icine satir ici stil yazmak
   icerik guvenlik politikasi tarafindan engellenir. */
.monitor-ibre { width: 100%; max-width: 15rem; height: auto; }

.monitor-ibre-zemin {
    fill: none;
    stroke: var(--bs-secondary-bg);
    stroke-width: 14;
    stroke-linecap: round;
}

.monitor-ibre-dolu {
    fill: none;
    stroke: var(--bs-primary);
    stroke-width: 14;
    stroke-linecap: round;
}

.monitor-ibre-yazi {
    font-size: 1.25rem;
    font-weight: 600;
    text-anchor: middle;
    fill: var(--bs-body-color);
}

.monitor-egri { width: 8rem; height: 2.5rem; }

.monitor-egri-cizgi {
    fill: none;
    stroke: var(--bs-primary);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.monitor-saat td { border: 0; padding: .1rem .25rem; }

/* ---------- Depo paketleme ---------- */

/* Okutma alani: ekran okuyucularin gorebildigi ama gozle gorunmeyen alan.
   display:none KULLANILMAZ, cunku gizlenen alan odak alamaz ve el
   terminalinin yazacagi bir hedef kalmazdi. */
.gorsel-gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Okutmanin sonucunu uzaktan da belli eden isik. */
.paketleme-isik {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--bs-secondary-bg);
    transition: background-color .15s ease-in-out;
}

.paketleme-isik.okundu { background-color: var(--bs-success); }
.paketleme-isik.hata { background-color: var(--bs-danger); }
.paketleme-isik.bekliyor { background-color: var(--bs-warning); }

/* Odak kaybedildiginde serit kirmizi olur: calisan okutmanin neden
   islemedigini aramak zorunda kalmasin. */
.paketleme-okutma.odak-yok { outline: 2px solid var(--bs-danger); }

.paketleme-gorsel {
    height: 2.5rem;
    width: 2.5rem;
    object-fit: contain;
    vertical-align: middle;
    margin-right: .5rem;
}

/* ------------------------------------------------------------------
   Kargo onay panosu
   ------------------------------------------------------------------ */

/* Acma dugmesinin sutunu: icerik genisligi kadar, satiri itmesin. */
.onay-ac-sutunu { width: 2.25rem; }

.onay-ac {
    padding: 0 .35rem;
    line-height: 1.2;
}

/* Acikken ok yukari doner; hangi satirin acik oldugu tabloya bakinca
   anlasilsin. */
.onay-ac[aria-expanded="true"] { transform: rotate(180deg); }

/* Belge listesindeki tur rozeti sutunu: icerik kadar, satiri itmesin. */
.belge-tur-sutunu { width: 4.5rem; }

/* Paylasim takvimi: tarih sutunu sabit genislikte, satirlar hizali kalir. */
.takvim-tarih-sutunu { width: 9rem; }

/* ------------------------------------------------------------------
   IT destek sohbeti
   ------------------------------------------------------------------ */

.destek-sohbet {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.destek-mesaj { max-width: 70%; }

/* Talep sahibi sagda, destek ekibi solda: kimin yazdigi konuma
   bakinca anlasilir. */
.destek-mesaj-sahip { align-self: flex-end; text-align: right; }
.destek-mesaj-destek { align-self: flex-start; }

.destek-balon {
    display: inline-block;
    padding: .5rem .75rem;
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}

.destek-mesaj-sahip .destek-balon {
    background: var(--bs-primary-bg-subtle);
}

.destek-gorsel {
    max-width: 320px;
    max-height: 320px;
    border-radius: .5rem;
    object-fit: contain;
    background: var(--bs-tertiary-bg);
}

/* Liste aciklama sutunu tasmasin. */
.destek-ozet {
    max-width: 26rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .destek-mesaj { max-width: 100%; }
    .destek-gorsel { max-width: 100%; }
}

/* Filo: defter tarih sutunu ve satir ici km alanlari. */
.filo-tarih-sutunu { width: 7.5rem; }
.filo-km-alani { width: 7rem; }

/* ------------------------------------------------------------------
   Herkese acik odeme sayfasi
   ------------------------------------------------------------------ */

.odeme-logo {
    height: 40px;
    width: auto;
}

/* Sozlesme metni sinirli yukseklikte kayar; sayfayi yutmasin. */
.odeme-sozlesme {
    max-height: 220px;
    overflow-y: auto;
    background: var(--bs-tertiary-bg);
}

/* Saglayicinin guvenli cercevesi: kart formu ve taksit tablosu rahat
   sigacak yukseklikte. */
.odeme-cerceve {
    width: 100%;
    min-height: 640px;
    border: 0;
    display: block;
}

/* Odeme detayi: kayit tarihi sutunu sabit genislikte. */
.odeme-kayit-tarih { width: 8.5rem; }

/* Odeme Al formu: adet alani dar durur. */
.odeme-adet-alani { width: 5.5rem; flex: none; }

/* Haberler basligi: arama esnek, dar ekranda blok geneli sarar. */
.haber-baslik-araclar { max-width: 100%; }

.haber-arama {
    flex: 1 1 8rem;
    min-width: 0;
    max-width: 18rem;
}

/* ------------------------------------------------------------------
   Mobil ust cubuk

   Dar ekranda sekmeler okunmaz hale geliyor, cunku sagdaki dugmeler
   genisligin yarisini yiyordu. Dugmeler kuculur; cok dar ekranda
   "Tumunu kapat" tamamen gizlenir (sekmeler tek tek kapanabilir).
   JS bu dugmeyi d-none ile actigi icin gizleme ayri bir kuralla,
   !important ile yapilir.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .ust-cubuk .btn {
        padding: .22rem .4rem;
        font-size: .72rem;
    }

    .ust-cubuk .arac-dugme .menu-ikon {
        width: .95rem;
        height: .95rem;
    }

    /* Sekme adi en az birkac harf gostersin; kalanini kaydirma tasir. */
    .sekme { min-width: 84px; }
}

@media (max-width: 575.98px) {
    #tumSekmeleriKapat { display: none !important; }
}

/* ------------------------------------------------------------------
   Giris hatasi penceresi: portal kartlariyla ayni dil. Tek vurgu,
   uyari rengindeki halka simgedir; geri kalani sade kalir.
   ------------------------------------------------------------------ */
.giris-hata-simge {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.giris-hata-simge svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* ==================================================================
   Mobil duzen
   ================================================================== */

@media (max-width: 767.98px) {
    /* Yatay kayma: tasan icerik kendi kutusunda kayar (tablolar site.js
       tarafindan sarmalanir). Govde yine de emniyete alinir. */
    body { overflow-x: hidden; }

    .sekme-cercevesi { min-height: 0; }

    /* Sayfa basliklari TEK OLCEK: ekrandan ekrana h4/h5/fs-4 karisikligi
       vardi, mobilde kimi baslik digerinin iki kati duruyordu. */
    main h1,
    .sekme-cercevesi h1,
    h1.h4 { font-size: 1.125rem; }

    main h2,
    .sekme-cercevesi h2,
    h2.h5, h2.h6 { font-size: 1rem; }

    main h3, h3.h6 { font-size: .95rem; }

    /* Baslik altindaki aciklama satirlari da ayni olcekte kalsin. */
    main .lead { font-size: .95rem; }

    /* Kart dolgusu: 1.5rem mobilde icerigi gereksiz daraltiyordu. */
    .card-body { padding: 1rem; }
    .card-body.p-4 { padding: 1rem !important; }

    /* Tablolar kendi kutusunda kayar, sayfayi tasimaz. */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}


/* ------------------------------------------------------------------
   Giris ekrani: dugme ve sifre alani

   Bootstrap'in varsayilan dugmesi bu kartta yassi ve sikisik duruyordu.
   Yukseklik, harf araligi ve yumusak bir golge ile forma denk agirlikta
   bir dugme; renk marka degiskeninden gelir.
   ------------------------------------------------------------------ */
.giris-dugmesi {
    --bs-btn-padding-y: .625rem;
    --bs-btn-font-weight: 600;

    border-radius: .55rem;
    letter-spacing: .01em;
    box-shadow: 0 .35rem .9rem rgba(var(--sp-marka-rgb), .28);
    transition: transform .12s ease, box-shadow .18s ease, background-color .15s ease;
}

.giris-dugmesi:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 .5rem 1.1rem rgba(var(--sp-marka-rgb), .34);
}

.giris-dugmesi:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 .2rem .5rem rgba(var(--sp-marka-rgb), .28);
}

/* Gonderim sirasinda: golge sonsuz zipliyormus izlenimi vermesin. */
.giris-dugmesi:disabled {
    box-shadow: none;
    opacity: .75;
}

/* Sifre alanindaki goz dugmesi: ikinci bir dugme gibi degil, alanin
   parcasi gibi durur. Kenarligi alanla ayni, zemini seffaf. */
.giris-goz {
    border: 1px solid var(--bs-border-color);
    border-left: 0;
    background: transparent;
    color: var(--bs-secondary-color);
}

.giris-goz:hover { color: var(--bs-body-color); }

.giris-goz:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(var(--sp-marka-rgb), .18);
    z-index: 3;
}

/* Alan odaklandiginda kenarlik marka rengine gecer; goz dugmesi de
   ayni cizgide kalsin, yoksa yarim cerceve gorunur. */
.input-group:focus-within .giris-goz { border-color: var(--sp-marka); }

@media (prefers-reduced-motion: reduce) {
    .giris-dugmesi { transition: none; }
    .giris-dugmesi:hover:not(:disabled) { transform: none; }
}

/* ------------------------------------------------------------------
   Sabit olcek

   iOS Safari, yazi tipi 16px'in altinda olan bir alana dokunuldugunda
   sayfayi kendiliginden yakinlastirir ve geri cikmaz. Alanlarin gorunen
   boyutu korunurken yazi tipi 16px'e sabitlenir; ekran kaymaz.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------------
   Tablolar

   Kaydirma kutusu her zaman calisir; parmakla kaydirma yumusak olsun.
   Hucreler varsayilan olarak sarmaz: dar ekranda tablo okunakli kalir,
   gerekirse yana kaydirilir. Uzun serbest metin tasiyan hucreler
   .hucre-sar ile bunun disina alinir.
   ------------------------------------------------------------------ */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > td {
        white-space: nowrap;
    }

    .table-responsive > .table > tbody > tr > td.hucre-sar,
    .table-responsive > .table > tbody > tr > td .small {
        white-space: normal;
    }

    /* Mobilde tablo yazisi bir tik kucuk: daha az yatay kaydirma. */
    .table-responsive > .table { font-size: .8125rem; }
}

/* ------------------------------------------------------------------
   Bildirim seridi (AJAX islem sonuclari)
   ------------------------------------------------------------------ */
.bildirim-kabi {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(92vw, 24rem);
}

.bildirim {
    padding: .6rem .9rem;
    border-radius: .5rem;
    font-size: .875rem;
    color: #fff;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(.5rem);
    transition: opacity .2s ease, transform .2s ease;
}

.bildirim-goster {
    opacity: 1;
    transform: translateY(0);
}

.bildirim-basarili { background: var(--bs-success); }
.bildirim-hata { background: var(--bs-danger); }

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

/* ------------------------------------------------------------------
   AJAX gezinmesi: istek suresince icerik hafifce soluklasir.
   Yerine gecen bir yukleme ekrani DEGIL; mevcut icerik okunmaya devam
   eder, yalnizca bir seyin surdugu belli olur.
   ------------------------------------------------------------------ */
main.icerik-govde {
    transition: opacity .12s ease;
}

main.icerik-govde.ajax-yukleniyor {
    opacity: .55;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    main.icerik-govde { transition: none; }
}

/* ------------------------------------------------------------------
   Talep sekmeleri

   Dar ekranda dort sekme alt alta dizilip ekranin yarisini yiyordu.
   Artik tek satirda kalir; sigmazsa parmakla yana kaydirilir.
   ------------------------------------------------------------------ */
.talep-sekmeleri {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.talep-sekmeleri::-webkit-scrollbar { display: none; }

.talep-sekmeleri .nav-item { flex: 0 0 auto; }

.talep-sekmeleri .nav-link { white-space: nowrap; }

@media (max-width: 767.98px) {
    .talep-sekmeleri .nav-link {
        padding: .4rem .6rem;
        font-size: .8125rem;
    }

    .talep-sekmeleri .badge {
        font-size: .65rem;
        padding: .2em .45em;
    }
}

/* ==================================================================
   Mobil tasma onlemleri

   Bildirilen kaymalarin ortak sebebi ayniydi: yan yana duran ogeler
   (baslik + dugmeler, etiket + deger) dar ekranda kucululmek yerine
   kendi genisliklerinde diretip kapsayiciyi tasiriyordu.
   ================================================================== */
@media (max-width: 767.98px) {
    /* Baslik seritleri: "d-flex justify-content-between" kaliplari.
       Sigmayan blok alt satira iner, kimse tasmaz. */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        min-width: 0;
    }

    /* Esnek kutularin cocuklari kucululebilsin: min-width:auto varsayilani
       metni kucultmeyi engelleyip tasmaya yol aciyor. */
    .d-flex > *,
    .row > [class^="col"],
    .row > [class*=" col"] {
        min-width: 0;
    }

    /* Kartlar kapsayicidan tasmaz. */
    .card,
    .card-body,
    .card-header {
        max-width: 100%;
        min-width: 0;
    }

    /* Uzun secenekli acilir listeler: kutu genisligini asamaz, metin
       kirpilir. Onceki halinde en uzun secenek kutuyu geniletiyordu. */
    .form-select {
        max-width: 100%;
        text-overflow: ellipsis;
    }

    /* Satir ici gruplar (input + dugme) tasmasin. */
    .input-group { flex-wrap: nowrap; }
    .input-group > .form-control,
    .input-group > .form-select { min-width: 0; }

    /* Uzun kod/referans metinleri satir kirsin. */
    .font-monospace { word-break: break-word; }
}

/* Acilir listeler her ekranda kapsayiciya sigar. */
.form-select { max-width: 100%; }

/* Filtre/arama seritlerindeki dugmeler ayni yukseklikte olsun; farkli
   boyutta dugmeler (ornegin tarih alani yaninda "Goster") hizasizdi. */
.form-satiri-hizali .btn,
.form-satiri-hizali .form-control,
.form-satiri-hizali .form-select {
    height: calc(1.5em + .75rem + 2px);
}


/* Alt grup (orn. Insan Kaynaklari > PDKS): baslik bir tik iceride, ogeleri
   iki tik iceride durur; hiyerarsi tek bakista okunur. */
.yan-grup-alt {
    padding-left: 1.85rem;
    margin-top: .15rem;
    font-size: .8rem;
}

.yan-grup-alt-icerik .yan-baglanti {
    padding-left: 3rem;
}