.admin-body {
    background: var(--color-bg);
    min-height: 100vh;
    font-family: var(--font-heading);
    color: var(--color-text);
}


/* Yan boşluk margin'de DEĞİL padding'de: margin: 0 auto ortalamayı yapıyor, o yüzden yan
   margin'ler artık kullanılamaz — 1200px'den dar ekranlarda içerik iki kenara yapışıyordu.
   Boşluğu .admin-main'e vermek de olmazdı: sayfa başlığı şeridi (.admin-heading) bilinçli olarak
   kenardan kenara uzanıyor, kapsayıcıya padding verilse o da içeri kaçardı. */
.admin-page {
    margin: 0 auto 24px auto;
    max-width: 1200px;
    padding: 0 24px;
}

/* Sidebar */
.admin-shell {
    display: flex;
    min-height: 100vh;
    max-height: 100vh;
    max-width: 2048px;
    margin: 0 auto;
}

.admin-sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-right: 1px solid #eee;
}

/* Üst çubuk + hamburger: masaüstünde hiç render edilmez (bkz. .admin-shell içindeki sabit
   genişlikli yan yana düzen); dar ekranlarda sidebar sabit konumlu bir çekmeceye dönüştüğü için
   (bkz. aşağıdaki @media kuralları) onu açacak bir tetikleyiciye ihtiyaç var. Herkese açık
   sitedeki .hamburger ile aynı üç-çizgi/çarpı animasyon dili. */
.admin-mobile-topbar {
    display: none;
}

.admin-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 15px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.admin-hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-heading-dark);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.admin-hamburger.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.admin-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.admin-hamburger.is-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

.admin-sidebar-backdrop {
    display: none;
}

/* Sidebar'ın çekmeceye dönüştüğü sınır 1024px: tabletlerin dikey genişliği (iPad 768, iPad Air
   820, iPad Pro 1024) buraya girer. Önceden 900px'ti ve 901–1024 arası ekranlarda sabit 280px'lik
   sidebar viewport'un dörtte birini yiyor, içeriğe 620–740px kalıyordu.
   İÇERİK düzeni kuralları (sütun yığma, araç çubuğu yönü) bilinçli olarak 900px'te bırakıldı:
   sidebar çekildikten sonra 901–1024 arasında içerik zaten tam genişliği kullanıyor, yan yana
   duran sütunların daralma sebebi ortadan kalkıyor. */
@media (max-width: 1024px) {
    .admin-shell {
        display: block;
        min-height: 100vh;
        max-height: none;
    }

    .admin-mobile-topbar {
        display: flex;
        align-items: center;
        gap: 14px;
        height: 65px;
        padding: 0 16px;
        background: var(--color-white);
        box-shadow: var(--shadow-header);
        position: sticky;
        top: 0;
        z-index: var(--z-header);
    }

    .admin-hamburger {
        display: flex;
    }

    .admin-mobile-topbar__brand {
        font-family: var(--font-heading);
        font-weight: 700;
        color: var(--color-heading-dark);
    }

    .admin-mobile-topbar__brand span {
        color: var(--color-primary);
    }

    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 82%;
        box-shadow: var(--shadow-nav-panel);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: var(--z-nav-panel);
        overflow-y: auto;
    }

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

    .admin-sidebar-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(17, 17, 17, 0.5);
        z-index: var(--z-nav-overlay);
    }

    .admin-main {
        overflow-y: visible;
    }

    /* Çekmece modunda kaydıran body'dir ve üstte 65px'lik sabit çubuk vardır — masaüstü için
       hesaplanmış sticky offset'ler burada anlamsız. Yardımcı sütunun yapışkanlığı bandın
       tamamında kapatılır (dar sütun uzadığında sticky, altını erişilmez kılıyordu); araç
       çubuğu ise üst çubuğun hemen altına yapışır (65 + 8), yoksa kaydırırken onun altına
       girip üstü kesiliyordu. */
    .admin-row:has(> .admin-column--8)>.admin-column--4 {
        position: static;
    }

    .admin-toolbar {
        top: 73px;
    }

    /* Sidebar artık mobilde dikey kaydırılabilir bir çekmece (overflow-y:auto) — bildirim
       dropdown'ı ona göre absolute konumlanırsa yatayda kırpılabilir. Viewport'a sabitlenip
       neredeyse tam genişlik kaplayarak bu riski tamamen ortadan kaldırıyor. */
    .admin-bildirim-dropdown {
        position: fixed;
        top: 73px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }

}

@media (max-width: 560px) {

    /* Telefonda boşluğu kapsayıcı verir; .admin-page kendi padding'ini bırakır, yoksa
       12 + 24 = 36px ile içerik gereksiz daralırdı. */
    .admin-page {
        margin: 0;
        padding: 0;
    }

    .admin-main {
        padding: 16px 12px;
    }

    /* Başlık şeridi kenardan kenara uzanmaya devam eder ama iç boşluğu gövdeyle aynı hizaya
       iner — 28px, 360px'lik bir ekranda genişliğin altıda birini yiyordu. */
    .admin-heading {
        padding: 0 16px;
    }
}

.admin-sidebar__brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-heading-dark);
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #eee;
    padding: 0 14px 0 20px;
}

.admin-sidebar__brand-metin {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-sidebar__brand-metin span {
    color: var(--color-primary);
}

/* Bildirim zili */
.admin-bildirim-zil {
    position: relative;
    flex-shrink: 0;
}

.admin-bildirim-zil__buton {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.admin-bildirim-zil__buton .icon {
    width: 19px;
    height: 19px;
}

.admin-bildirim-zil__buton:hover,
.admin-bildirim-zil.is-open .admin-bildirim-zil__buton {
    background: var(--color-bg);
    color: var(--color-text);
}

.admin-bildirim-zil__rozet {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-lg);
    background: #c0392b;
    color: var(--color-white);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}

.admin-bildirim-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: -8px;
    width: 340px;
    max-width: calc(100vw - 40px);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-hover);
    z-index: 20;
    overflow: hidden;
}

.admin-bildirim-dropdown__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border-light);
}

.admin-bildirim-dropdown__head strong {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--color-heading-dark);
}

.admin-bildirim-dropdown__head a {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.admin-bildirim-dropdown__head a:hover {
    text-decoration: underline;
}

.admin-bildirim-dropdown__liste {
    max-height: 360px;
    overflow-y: auto;
}

.admin-bildirim-dropdown__bos {
    padding: 24px 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* .oge, satırın kendisi (arkaplan/ayraç/hover burada) — içinde biri gezinen (.oge-baglanti),
   biri silen (.oge-sil) iki bağımsız kontrol barındırır; tek bir <a> olarak birleştirilmez ki
   silme butonu tıklanınca yanlışlıkla bildirime gidilmesin. */
.admin-bildirim-dropdown__oge {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border-light);
    transition: background var(--transition-base);
}

.admin-bildirim-dropdown__oge:last-child {
    border-bottom: none;
}

.admin-bildirim-dropdown__oge:hover {
    background: var(--color-bg);
}

.admin-bildirim-dropdown__oge--yeni {
    background: #eef6ff;
}

.admin-bildirim-dropdown__oge--yeni:hover {
    background: #e2f0ff;
}

.admin-bildirim-dropdown__oge-baglanti {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 6px 12px 16px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.admin-bildirim-dropdown__oge-baglanti strong {
    font-size: 0.86rem;
    color: var(--color-heading-dark);
}

.admin-bildirim-dropdown__oge-baglanti span {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.admin-bildirim-dropdown__oge-baglanti time {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--color-text-lighter);
}

.admin-bildirim-dropdown__oge-sil {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-right: 10px;
    border: none;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-text-lighter);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.admin-bildirim-dropdown__oge-sil:hover {
    background: #fdecea;
    color: #c0392b;
}

.admin-bildirim-dropdown__oge-sil svg {
    width: 13px;
    height: 13px;
}

/* Bildirimler sayfası (/admin/bildirimler) */
.admin-bildirim-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-bildirim-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.admin-bildirim-item__sil {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-text-lighter);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.admin-bildirim-item__sil:hover {
    background: #fdecea;
    color: #c0392b;
}

.admin-bildirim-item__sil svg {
    width: 15px;
    height: 15px;
}

.admin-bildirim-item:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

.admin-bildirim-item--yeni {
    box-shadow: inset 3px 0 0 var(--color-primary), var(--shadow-card);
    background: #eef6ff;
}

.admin-bildirim-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
}

.admin-bildirim-item__icon svg {
    width: 18px;
    height: 18px;
}

.admin-bildirim-item__icon--primary {
    background: #eef6ff;
    color: var(--color-primary);
}

.admin-bildirim-item__icon--ok {
    background: #e6f7ee;
    color: #1e8a4c;
}

.admin-bildirim-item__icon--accent {
    background: #f3e8ff;
    color: #7c3aed;
}

.admin-bildirim-item__icon--warn {
    background: #fdecea;
    color: #c0392b;
}

.admin-bildirim-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-bildirim-item__body strong {
    font-size: 0.92rem;
    color: var(--color-heading-dark);
}

.admin-bildirim-item__body span {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.admin-bildirim-item__tarih {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--color-text-lighter);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .admin-bildirim-item {
        flex-wrap: wrap;
    }

    .admin-bildirim-item__tarih {
        margin-left: 52px;
    }
}

/* Dashboard'daki "Son Bildirimler" kartı gibi zaten beyaz bir .admin-card içine gömüldüğünde,
   her öge kendi beyaz kutusu + gölgesiyle (bkz. yukarısı) "beyaz üstüne beyaz" görünürdü —
   bunun yerine düz bir liste, ayraç çizgileriyle (bkz. .admin-note-list ile aynı dil). */
.admin-bildirim-list--kart {
    gap: 0;
}

.admin-bildirim-list--kart .admin-bildirim-item {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 12px 4px;
    border-bottom: 1px solid var(--color-border-light);
}

.admin-bildirim-list--kart .admin-bildirim-item:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}

.admin-bildirim-list--kart .admin-bildirim-item:hover {
    transform: none;
    background: var(--color-bg);
}

.admin-bildirim-list--kart .admin-bildirim-item--yeni {
    box-shadow: inset 3px 0 0 var(--color-primary);
    background: #eef6ff;
    padding-left: 12px;
}

.admin-sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: 12px 14px 16px;
    overflow-y: auto;
}

/* Nav grupları: aralarındaki boşluk (24px) bir grup İÇİNDEKİ öğeler arasındaki boşluktan (2px)
   kasıtlı olarak çok daha büyük — sık kullanılan "sıkı grup içi / ferah gruplar arası" ritmi,
   düz bir liste yerine gezinme çubuğuna gerçek bir hiyerarşi kazandırır. */
.admin-nav-grup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 24px;
}

.admin-nav-grup--son {
    margin-bottom: 4px;
}

.admin-nav-grup__baslik {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-lighter);
    padding: 0 10px;
    margin-bottom: 6px;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 9px 10px;
    border-radius: var(--radius-lg);
    transition: background var(--transition-base), color var(--transition-base);
}

.admin-nav-link span {
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-nav-link:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.admin-nav-link.active {
    background: var(--color-primary);
    color: var(--color-white);
}

.admin-nav-link__icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
}

/* "Talepler" açılır menüsü: tüm satır (ikon + etiket + ok işareti) tek bir buton — tıklanınca
   yalnızca aç/kapatır, hiçbir yere yönlendirmez. Tüm listeye gitmek için altmenüdeki
   "Tüm talepler" linki kullanılır (bkz. .admin-nav-altmenu__tumu). .admin-nav-link'in kendisi
   <a> için tasarlandığından, burada <button>'a özgü sıfırlamalar (kenarlık/arkaplan/hizalama)
   ayrı bir modifier ile eklenir. */
.admin-nav-link--acordiyon-baslik {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.admin-nav-link__icon-alani {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* Sayı taşımayan, yalnızca "yeni talep var" diyen küçük bir işaret — ikonun sağ üst köşesine
   iliştirilir (uygulama ikonlarındaki bildirim noktası gibi). */
.admin-nav-link__nokta {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c0392b;
}

/* Menü öğesinin sağında "(1)" gibi bekleyen/okunmamış sayısını gösterir (bkz. Destek Merkezi,
   İşlerim, Rozetlerim, Kazançlarım) — .admin-nav-link'in flex satırında margin-left:auto ile
   en sağa yaslanır. */
.admin-nav-link__sayac {
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
}

.admin-nav-link.active .admin-nav-link__sayac {
    color: var(--color-white);
}

.admin-nav-link__ok-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: transform var(--transition-base);
}

.admin-nav-acordiyon.is-open .admin-nav-link__ok-icon {
    transform: rotate(180deg);
}

.admin-nav-altmenu {
    display: flex;
    flex-direction: column;
    margin: 2px 0 2px 15px;
    padding: 2px 0 2px 14px;
    border-left: 2px solid var(--color-border-light);
}

/* Yazar (author) stylesheet kuralları her zaman tarayıcının [hidden]{display:none} varsayılanını
   (user-agent stylesheet, en düşük öncelik) geçersiz kılar — yukarıdaki "display: flex" tek
   başına dururken, JS'in eklediği hidden özniteliği hiçbir görsel etki yaratmıyordu (menü
   kapanmış gibi görünmüyordu). Burada [hidden]'a özel, daha yüksek özgüllükte bir kural
   ekleyerek hidden'ın gerçekten gizlemesini garantiliyoruz. */
.admin-nav-altmenu[hidden] {
    display: none;
}

.admin-nav-altmenu__oge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.82rem;
    transition: background var(--transition-base), color var(--transition-base);
}

.admin-nav-altmenu__oge:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.admin-nav-altmenu__ad {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.admin-nav-altmenu__tarih {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--color-text-lighter);
}

.admin-nav-altmenu__tumu {
    padding: 7px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.admin-nav-altmenu__tumu:hover {
    text-decoration: underline;
}

.admin-nav-altmenu__bos {
    padding: 5px 10px 7px;
    font-size: 0.78rem;
    color: var(--color-text-lighter);
}

.admin-sidebar__user {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 16px;
}

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

.admin-sidebar__user form {
    display: flex;
}

.admin-sidebar__user .admin-btn {
    width: 100%;
}

.admin-sidebar__user-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-acil-durum-buton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #f3c6c2;
    background: #fdecea;
    color: #c0392b;
    cursor: pointer;
    transition: background var(--transition-base), transform var(--transition-base);
}

.admin-acil-durum-buton:hover {
    background: #f8d3ce;
    transform: scale(1.06);
}

.admin-acil-durum-buton svg {
    width: 16px;
    height: 16px;
}

/* Acil durum butonunun yanındaki "112'yi ara" butonu — aynı acil (kırmızı) tarzda ama üzerinde
   112 yazan bir pill; tel: linki olduğundan mobilde doğrudan aramayı başlatır. */
.admin-sidebar__acil {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.admin-acil-durum-buton--112 {
    width: auto;
    padding: 0 9px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

/* Buttons */
.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* İkon + etiket taşıyan butonlar için: panelin çoğu butonu ya salt metin ya salt ikon
       (.admin-btn--ikon) olduğundan aralık hiç gerekmemişti, ikisi bir aradayken ikon metne
       yapışıyordu. Tek çocuklu butonlarda gap'in etkisi yok. */
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.admin-btn:hover {
    text-decoration: none;
}

.admin-btn--primary {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-primary);
}

.admin-btn--primary:hover {
    background: var(--color-border-light);
    color: var(--color-primary);
}

.admin-btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.admin-btn--ghost:hover {
    background: var(--color-border-light);
    color: var(--color-text);
}

.admin-btn--danger {
    background: transparent;
    color: #c0392b;
    border-color: #f3c6c2;
}

.admin-btn--danger:hover {
    background: #fdecea;
}

/* İkon-only butonlar (ör. Talep Detay toolbar'ındaki "İş Dökümünü Belgele") — metin yerine tek bir
   ikon taşır, kare bir dokunma alanı için padding kaldırılıp genişlik sabitlenir. */
.admin-btn--icon {
    padding: 0;
    width: 38px;
    flex-shrink: 0;
}

.admin-btn--icon .icon {
    width: 18px;
    height: 18px;
}

.admin-btn__spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: admin-btn-spin 0.6s linear infinite;
}

@keyframes admin-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

.admin-btn--disabled,
.admin-btn:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Onay penceresi */
.admin-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: 20px;
    background: rgba(17, 17, 17, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.admin-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.admin-modal {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-hover);
    padding: 28px;
    max-width: 400px;
    width: 100%;
    transform: translateY(10px) scale(0.97);
    transition: transform 0.18s ease;
}

.admin-modal-overlay.is-open .admin-modal {
    transform: translateY(0) scale(1);
}

/* Bazı içerikler (ör. Çalışma Kriterlerim'deki ilçe kutucukları — İstanbul gibi bir il düzinelerce
   ilçe getirebilir) varsayılan 400px'e sığmaz; genişlik ve dikey taşma sınırı burada gevşetilir. */
.admin-modal--genis {
    max-width: 560px;
    max-height: min(80vh, 640px);
    overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {

    .admin-modal-overlay,
    .admin-modal {
        transition: none;
    }
}

.admin-modal h2 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-heading-dark);
    margin-bottom: 10px;
}

.admin-modal p {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 22px;
}

.admin-modal__onay-alani {
    margin: -8px 0 18px;
}

.admin-modal__onay-alani label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.admin-modal__onay-alani label strong {
    color: var(--color-text);
}

.admin-modal__onay-alani input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
}

.admin-modal__onay-alani input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.admin-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Eğitim Merkezi içerik formu (Yeni/Düzenle, bkz. Views/EgitimYonetimi/_EgitimAlanlari.cshtml) */
.admin-field__ipucu {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

/* Tür seçimi: dropdown yerine ikon+etiketli üç seçim kartı — hangi girdilerin görüneceğini
   belirleyen türü görsel ve tek dokunuşla seçilir kılar. */
.admin-secenek-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.admin-secenek-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 16px 10px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.admin-secenek-kart input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.admin-secenek-kart:hover {
    border-color: var(--color-primary);
}

.admin-secenek-kart:has(input:checked) {
    border-color: var(--color-primary);
    background: #eef6ff;
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.admin-secenek-kart:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-secenek-kart__ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text-lighter);
    transition: background var(--transition-base), color var(--transition-base);
}

.admin-secenek-kart:has(input:checked) .admin-secenek-kart__ikon {
    background: var(--color-primary);
    color: var(--color-white);
}

.admin-secenek-kart__ikon svg {
    width: 20px;
    height: 20px;
}

.admin-secenek-kart__etiket {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Türe özel içerik bölgesi — seçim kartlarından ince bir ayraçla ayrılır. */
.egitim-tur-icerik {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-light);
}

/* Video kaynağı seçimi: dosya / harici bağlantı arasında segment kontrolü. */
.admin-segmented {
    display: inline-flex;
    padding: 3px;
    margin-bottom: 16px;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
}

.admin-segmented label {
    position: relative;
    padding: 7px 16px;
    border-radius: calc(var(--radius-lg) - 3px);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
}

.admin-segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.admin-segmented label:has(input:checked) {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-card);
}

/* Dosya yükleme alanı: ham input yerine tıklanabilir, kesikli çerçeveli bir bölge. */
.egitim-dosya {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.egitim-dosya:hover {
    border-color: var(--color-primary);
    background: #fafcff;
}

.egitim-dosya.is-dolu {
    border-style: solid;
    border-color: var(--color-primary);
    background: #eef6ff;
}

.egitim-dosya input[type="file"] {
    display: none;
}

.egitim-dosya__ikon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-primary);
}

.egitim-dosya__ikon svg {
    width: 20px;
    height: 20px;
}

.egitim-dosya__metin {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.egitim-dosya__baslik {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    word-break: break-all;
}

.egitim-dosya__ad {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.egitim-mevcut-dosya {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.egitim-mevcut-dosya strong {
    color: var(--color-text);
}

/* Kapak görseli: tıklanabilir, önizlemeli yükleme alanı. */
.egitim-kapak {
    display: block;
    position: relative;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16 / 9;
    transition: border-color var(--transition-base);
}

.egitim-kapak:hover {
    border-color: var(--color-primary);
}

.egitim-kapak input[type="file"] {
    display: none;
}

.egitim-kapak__onizleme {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.egitim-kapak__bos {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-text-lighter);
    font-size: 0.85rem;
    font-weight: 600;
}

.egitim-kapak__bos svg {
    width: 26px;
    height: 26px;
}


/* Content area. Kaydırma kabı yalnızca MASAÜSTÜNDE main'dir (kabuk 100vh'ye kilitli, yan yana
   düzen); çekmece modunda (≤1024) kabuk serbest yükseklikte ve kaydıran body'dir. auto burada
   koşulsuz dursaydı, dosyada daha önce gelen çekmece bloğundaki "visible" düzeltmesini kaynak
   sırası yüzünden ezerdi — yaşanan hata: tablet bandında sayfanın altına inilemiyordu. */
.admin-main {
    flex: 1;
    min-width: 0;
}

@media (min-width: 1025px) {
    .admin-main {
        overflow-y: auto;
    }
}

/* Genel grid sistemi: admin-container > admin-row > admin-column. Sayfa içindeki kartları
   dikey olarak istifler (admin-container), her admin-row kendi içinde 12 sütunlu bir grid'dir. */
.admin-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-container .admin-card {
    margin-bottom: 0;
}

.admin-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: start;
}

/* Grid'in gap'i yalnızca satırın KENDİ sütunları arasında çalışır; alt alta gelen iki
   .admin-row arasında hiçbir boşluk bırakmaz. Sayfaların çoğu bunu kartlara satır içi
   margin-bottom vererek telafi ediyordu, telafi etmeyenlerde kartlar yapışık kalıyordu
   (bkz. Views/SatisDanismanlari/_DanismanAktivite.cshtml). Kural yalnızca ARDIŞIK satırlara
   uygulanır: son satırın altında boşluk bırakmaz, tek satırlı sayfaları hiç etkilemez. */
.admin-row + .admin-row {
    margin-top: 24px;
}

/* Sonradan (ayrı bir istekle) doldurulan satır grupları. Yukarıdaki kural yalnızca kardeş
   .admin-row'lar arasında çalıştığı için, bir formun/kartın ardından gelen ilk satır ona
   yapışık kalıyordu — grubun kendisi aradaki boşluğu taşır. */
.admin-satir-grubu {
    margin-top: 24px;
}

.admin-column {
    grid-column: span 12;
    min-width: 0;
}

.admin-column--3 {
    grid-column: span 3;
}

.admin-column--4 {
    grid-column: span 4;
}

.admin-column--6 {
    grid-column: span 6;
}

.admin-column--8 {
    grid-column: span 8;
}

.admin-column--9 {
    grid-column: span 9;
}

/* İki bölmeli düzenin (8 + 4) dar bölmesi kaydırırken ekranda kalır: içindeki kart genelde
   ana içeriğe eşlik eden bir yardımcı (durum, komisyon, istatistik) ve uzun formu doldururken
   yukarı dönmek zorunda kalmamak gerekir.

   Seçici :has() ile kurulu, çünkü kural "her 4 birimlik sütun" değil "8'in yanındaki yardımcı
   sütun" demek istiyor. .admin-row zaten align-items:start taşıdığı için ayrıca align-self
   gerekmiyor — grid öğesi satır boyunca esneseydi sticky hiç devreye girmezdi.

   top: yapışkan araç çubuğunun (.admin-toolbar, top:24px, ~84px) altında durur. */
.admin-row:has(> .admin-column--8)>.admin-column--4 {
    position: sticky;
    top: 132px;
}

@media (max-width: 900px) {

    .admin-column--3,
    .admin-column--4,
    .admin-column--6,
    .admin-column--8,
    .admin-column--9 {
        grid-column: span 12;
    }

    /* Yardımcı sütunun sticky iptali çekmece bloğunda (max-width:1024px) — bu bandı da kapsıyor. */
}

/* Tablet bandı: sidebar çekmeceye dönüşmüş (bkz. yukarıdaki max-width:1024px kuralları) ama
   sütunlar henüz alt alta inmemiş. Bu aralıkta 8+4 bölünmesi yardımcı sütunu fazla sıkıyor —
   ~950px'lik içerikte 4 birim, dolgu ve boşluk düşünce 280px'in altına iniyor ve içindeki
   form alanları/rozetler sarmaya başlıyor. 7+5 dengeyi düzeltiyor, ana sütun hâlâ baskın.
   Alt sınır 901px: 900 ve altında zaten tek sütuna iniliyor, iki kural çakışmıyor. */
@media (min-width: 901px) and (max-width: 1024px) {

    .admin-column--8 {
        grid-column: span 7;
    }

    .admin-column--4 {
        grid-column: span 5;
    }
}

/* Giriş kartının altındaki kayıt yolu (bkz. Views/Hizmet/Giris.cshtml) */
.admin-login__alt {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-light);
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.admin-login__alt a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.admin-login__alt a:hover {
    text-decoration: underline;
}

/* Login */
.admin-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -32px -24px;
}

.admin-login__card {
    width: 100%;
    max-width: 380px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    padding: 40px 32px;
}

.admin-login__title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-heading-dark);
    margin-bottom: 4px;
}

.admin-login__subtitle {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 28px;
}

.admin-login__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.admin-login__submit {
    width: 100%;
    margin-top: 8px;
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-label);
}

.admin-field input,
.admin-field select,
.admin-field textarea {
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-white);
}

.admin-field textarea {
    resize: vertical;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.admin-field__error {
    color: #c0392b;
    font-size: 0.8rem;
}

/* Zorunlu/hatalı alan belirginliği (sunucu doğrulaması sonrası). Uzun formlarda kullanıcı
   "X zorunludur" hatasını kaçırmasın diye: hata mesajı uyarı ikonlu bir ROZET olur, alanın
   etiketi/kontrolü kırmızıya döner; admin-form-hata.js ayrıca ilk hataya kaydırıp kısa bir flaş
   uygular. Boş (hatasız) doğrulama span'leri :not(:empty) ile es geçilir. */
.admin-field__error:not(:empty) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 5px 10px;
    background: #fdecea;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.admin-field__error:not(:empty)::before {
    content: "!";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.admin-field:has(.admin-field__error:not(:empty))>label {
    color: #c0392b;
}

.admin-field:has(.admin-field__error:not(:empty)) input,
.admin-field:has(.admin-field__error:not(:empty)) select,
.admin-field:has(.admin-field__error:not(:empty)) textarea {
    border-color: #c0392b;
    background: #fdf5f4;
}

/* İlk hatalı alana kaydırıldıktan sonra kısa bir dikkat flaşı (gölge YOK — arka plan tonu). */
.admin-field--hata-odak {
    animation: admin-hata-flas 1.5s ease;
    border-radius: var(--radius-lg);
}

@keyframes admin-hata-flas {
    0% {
        background-color: rgba(192, 57, 43, 0.13);
    }

    100% {
        background-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-field--hata-odak {
        animation: none;
    }
}

.admin-field__readonly {
    margin: 0;
    padding: 11px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.admin-field--full {
    grid-column: 1 / -1;
}

.admin-field select.admin-field--buyuk {
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 600;
}

.admin-lead {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: -8px 0 20px;
    max-width: 640px;
}

/* Formun üstünde "kiminle ilgili" bağlamını tek bakışta veren, düzenlenemeyen özet şerit —
   aşağıdaki asıl form alanlarıyla (hizmet/adres/notlar) aynı görsel ağırlıkta yarışmasın diye
   müşteri kimlik bilgileri (ad, telefon vb.) burada salt bilgi olarak gösterilir; asıl formda
   gizli input olarak taşınır. */
.admin-musteri-context {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    padding: 16px 22px;
    margin-bottom: 24px;
}

.admin-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.admin-musteri-context__info {
    flex: 1;
    min-width: 0;
}

.admin-musteri-context__ad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--color-heading-dark);
}

.admin-musteri-context__meta {
    margin-top: 3px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.admin-musteri-context__aksiyon {
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .admin-musteri-context {
        flex-wrap: wrap;
    }

    .admin-musteri-context__aksiyon {
        width: 100%;
        margin-top: 4px;
    }
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px 20px;
    margin-bottom: 24px;
}

.admin-form-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-light);
}

/* Bir kartın içinde, ana başlığa (admin-card__head) tabi ikincil bölüm — kendi ikon+h2'si
   yerine ince bir ayraç ve sönük küçük bir alt-başlık kullanır (ör. Talep Detay > Hizmet kartı
   içindeki "Çalışma Detayları"). İki tam başlığın yan yana "iki kart yapışmış" gibi durmasını önler. */
.admin-alt-bolum {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--color-border-light);
}

.admin-alt-bolum__baslik {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-lighter);
    margin: 0 0 15px;
}

.admin-form-section--son,
.admin-form-section:last-of-type {
    margin-bottom: 24px;
    padding-bottom: 0;
    border-bottom: none;
}

.admin-form-section h3 {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-lighter);
    margin-bottom: 14px;
}

.admin-form-section .admin-form-grid {
    margin-bottom: 0;
}

.admin-form-actions {
    display: flex;
    justify-content: start;
    gap: 12px;
}

/* admin-row (Hizmet/Adres/Notlar kart düzeni) kendi altında boşluk bırakmadığı için, formun
   kaydet/vazgeç butonları ondan hemen sonra geldiğinde karta yapışık görünürdü. */
.admin-row+.admin-form-actions {
    margin-top: 24px;
}

.admin-stacked-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-stacked-form .admin-field input {
    max-width: 480px;
}

.admin-stacked-form .admin-btn {
    align-self: flex-start;
}

.admin-inline-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-inline-form input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-white);
    min-width: 200px;
}

.admin-inline-form__check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-text-light);
    white-space: nowrap;
}

.admin-alert--error:not(:empty),
p.admin-alert--error {
    background: #fdecea;
    color: #c0392b;
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

p.admin-alert--success {
    background: #e6f7ee;
    color: #1e8a4c;
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

/* Sağ üstte toast bildirimi (bkz. js/toast-bildirim.js) — TempData'dan gelen p.admin-alert--*
   mesajları sayfa akışından koparıp burada, otomatik kapanan bir bildirime çevirir. */
.toast-kutu {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(360px, calc(100vw - 32px));
}

p.admin-alert--success.toast-mesaj,
p.admin-alert--error.toast-mesaj {
    position: relative;
    margin: 0;
    padding-right: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    animation: toast-gir 0.25s ease;
}

p.admin-alert--success.toast-mesaj.is-kapaniyor,
p.admin-alert--error.toast-mesaj.is-kapaniyor {
    animation: toast-cik 0.2s ease forwards;
}

.toast-mesaj__kapat {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
}

.toast-mesaj__kapat:hover {
    opacity: 1;
}

@keyframes toast-gir {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

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

@keyframes toast-cik {
    to {
        opacity: 0;
        transform: translateX(24px);
    }
}

@media (max-width: 560px) {
    .toast-kutu {
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

/* Değerlendirme puanı seçici — dropdown yerine tıklanabilir yıldızlar (bkz. js/yildiz-input.js).
   Gizli input[name=puan] gerçek değeri taşır, yıldızlar yalnızca görsel katmandır. */
.yildiz-input {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.yildiz-input__yildiz {
    background: none;
    border: none;
    padding: 2px;
    line-height: 0;
    cursor: pointer;
    color: var(--color-border);
}

.yildiz-input__yildiz svg {
    width: 22px;
    height: 22px;
}

.yildiz-input__yildiz.is-dolu {
    color: var(--color-accent);
}

.yildiz-input__etiket {
    font-size: 0.82rem;
    color: var(--color-text-light);
    margin-left: 6px;
}

.yildiz-input__temizle {
    background: none;
    border: none;
    padding: 0;
    margin-left: 8px;
    font-size: 0.78rem;
    color: var(--color-text-lighter);
    text-decoration: underline;
    cursor: pointer;
}

/* Dashboard */
.admin-empty {
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

/* Canlı filtre sonuç bölgeleri (bkz. [data-ajax-form]/[data-ajax-link], _AdminLayout.cshtml):
   arama/filtre değişince tam sayfa yenilenmeden bu bloğun içeriği sunucudan çekilen parça HTML
   ile değiştirilir; bekleme sırasında burada gösterilir. */
.admin-yukleniyor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.admin-yukleniyor__spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-right-color: var(--color-primary);
    border-radius: 50%;
    animation: admin-btn-spin 0.6s linear infinite;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    background: var(--color-border-light);
    color: var(--color-text-muted);
    border-radius: var(--radius-lg);
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.admin-badge--ok {
    background: #e6f7ee;
    color: #1e8a4c;
}

.admin-badge--warn {
    background: #fdecea;
    color: #c0392b;
}

.admin-badge--new {
    background: var(--color-bg);
}

.admin-badge--manuel {
    background: #f3e8ff;
    color: #7c3aed;
}

.admin-badge--info {
    background: #eef6ff;
    color: var(--color-primary);
}

/* Araç çubuğu bileşenleri: arama kutusu (.admin-filtre-chip) ve özel açılır menüler (.admin-dd)
   aynı 38px hap yüksekliğini paylaşır, .admin-toolbar içinde aksiyon butonlarıyla (bkz.
   .admin-toolbar .admin-btn) yan yana, kart arka planı olmadan doğrudan sayfa zemininde durur. */
.admin-filtre-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.admin-filtre-chip:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.admin-filtre-chip:has(input[value]:not([value=""])) {
    border-color: var(--color-primary);
    background: #eef6ff;
}

.admin-filtre-chip:has(input[value]:not([value=""])) .admin-filtre-chip__icon {
    color: var(--color-primary);
}

.admin-filtre-chip__icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: var(--color-text-lighter);
}

.admin-filtre-chip input[type="search"] {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text);
    outline: none;
}

.admin-filtre-chip input[type="search"]::placeholder {
    color: var(--color-text-lighter);
    font-weight: 400;
}

.admin-filtre-chip--arama {
    flex: 1 1 220px;
    max-width: 320px;
}

.admin-filtre-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.admin-filtre-submit svg {
    width: 15px;
    height: 15px;
}

.admin-filtre-submit:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.admin-filtre-temizle {
    padding: 0 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
}

.admin-filtre-temizle:hover {
    color: #c0392b;
    text-decoration: underline;
}

/* Özel açılır menü (.admin-dd): native <select>'in tamamen tarayıcıya bağlı, stillendirilemeyen
   açılan listesinin yerini alır. Tetikleyici buton .admin-filtre-chip ile aynı hap görünümünü
   taşır; açılan liste tamamen bizim CSS'imizle çizilir. Davranış [data-admin-dd] işaretli her
   öğeye otomatik bağlanan ortak bir script ile sağlanır (bkz. _AdminLayout.cshtml). */
.admin-dd {
    position: relative;
}

.admin-dd__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

.admin-dd__trigger:hover {
    border-color: var(--color-text-lighter);
}

.admin-dd__trigger:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.admin-dd.is-open .admin-dd__trigger {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.admin-dd.is-active .admin-dd__trigger {
    border-color: var(--color-primary);
    background: #eef6ff;
    color: var(--color-primary);
}

.admin-dd.is-active .admin-dd__icon,
.admin-dd.is-active .admin-dd__chevron {
    color: var(--color-primary);
}

.admin-dd__icon {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: var(--color-text-lighter);
}

.admin-dd__label {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-dd__chevron {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    color: var(--color-text-lighter);
    transition: transform var(--transition-base);
}

.admin-dd.is-open .admin-dd__chevron {
    transform: rotate(180deg);
}

.admin-dd__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: 260px;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-hover);
}

.admin-dd__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
}

.admin-dd__list li:hover {
    background: var(--color-bg);
}

.admin-dd__list li[aria-selected="true"] {
    background: #eef6ff;
    color: var(--color-primary);
    font-weight: 600;
}

.admin-dd__check {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-left: auto;
    opacity: 0;
}

.admin-dd__list li[aria-selected="true"] .admin-dd__check {
    opacity: 1;
}

@media (max-width: 560px) {
    .admin-filtre-chip--arama {
        flex-basis: 100%;
        max-width: none;
    }

    .admin-dd__list {
        left: auto;
        right: 0;
    }
}

/* Filtre listesi (bkz. _AdminDropdown.cshtml ListeGorunumu=true, _AdminLayout.cshtml
   [data-admin-fl] script'i): alışveriş sitelerindeki marka/kategori filtreleri gibi, açılıp
   kapanmayan, her zaman görünür bir bağlantı kutusu — .admin-dd'nin (tetiklenince açılan tekil
   seçim menüsü, ör. Admin/Detay.cshtml'deki durum değiştirme) yerine filtre çekmecesinde kullanılır. */
.admin-filtre-liste__kutu {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.admin-filtre-liste__oge {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-light);
}

.admin-filtre-liste__oge:last-child {
    border-bottom: none;
}

.admin-filtre-liste__oge:hover {
    background: var(--color-bg);
}

.admin-filtre-liste__oge.is-secili {
    background: #eef6ff;
    color: var(--color-primary);
    font-weight: 700;
}

.admin-filtre-liste__sayi {
    flex-shrink: 0;
    color: var(--color-text-lighter);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.admin-filtre-liste__oge.is-secili .admin-filtre-liste__sayi {
    color: var(--color-primary);
}

/* Temizleme satırı ("Tüm Kaynaklar" vb.) görünümünü __oge sınıfından alır (bkz. _AdminDropdown);
   burada yalnızca diğer seçeneklerden hafifçe ayrışması için kalınlık verilir. */
.admin-filtre-liste__tumu {
    font-weight: 600;
    color: var(--color-heading-dark);
}

/* Altta yeterli yer yoksa (bkz. _AdminLayout.cshtml, tetikleyici tıklanınca hesaplanır) liste
   tetikleyicinin üstünde açılır — özellikle filtre çekmecesinin alt sıralarındaki dropdown'lar için. */
.admin-dd--yukari-ac .admin-dd__list {
    top: auto;
    bottom: calc(100% + 6px);
}

/* Filtre çekmecesi (bkz. _AdminLayout.cshtml script): "Filtrele" butonuna basılınca alışveriş
   sitelerindeki filtre paneli gibi sağdan kayarak açılan, dropdown filtrelerin dikey tek sütun
   halinde durduğu panel. Aynı .admin-dd/.admin-filtre-chip bileşenleri burada da kullanılır,
   yalnızca tam genişliğe getirilir (bkz. .admin-filtre-alani altındaki geçersiz kılmalar). */
.admin-filtre-buton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.admin-filtre-buton:hover {
    border-color: var(--color-text-lighter);
}

.admin-filtre-buton--aktif {
    border-color: var(--color-primary);
    background: #eef6ff;
    color: var(--color-primary);
}

.admin-filtre-buton__ikon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.admin-filtre-buton__rozet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-filtre-cekmece-backdrop {
    display: none;
}

.admin-filtre-cekmece-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.5);
    z-index: var(--z-nav-overlay);
}

.admin-filtre-cekmece {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    box-shadow: var(--shadow-nav-panel);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: var(--z-nav-panel);
}

.admin-filtre-cekmece.is-open {
    transform: translateX(0);
}

.admin-filtre-cekmece__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.admin-filtre-cekmece__head h2 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--color-heading-dark);
}

.admin-filtre-cekmece__kapat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.admin-filtre-cekmece__kapat:hover {
    background: var(--color-border-light);
    color: var(--color-text);
}

.admin-filtre-cekmece__kapat svg {
    width: 18px;
    height: 18px;
}

.admin-filtre-cekmece__govde {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.admin-filtre-alani {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-filtre-alani label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-label);
}

.admin-filtre-alani .admin-dd,
.admin-filtre-alani .admin-filtre-chip {
    width: 100%;
}

.admin-filtre-alani .admin-dd__trigger {
    width: 100%;
    justify-content: flex-start;
}

.admin-filtre-alani .admin-dd__label {
    max-width: none;
    flex: 1;
    text-align: left;
}

.admin-filtre-alani .admin-dd__list {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
}

.admin-filtre-cekmece__foot {
    display: flex;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.admin-filtre-cekmece__foot .admin-btn {
    flex: 1;
    justify-content: center;
}

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

@media (max-width: 560px) {

    .admin-filtre-cekmece__head,
    .admin-filtre-cekmece__govde,
    .admin-filtre-cekmece__foot {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Araç çubuğu: arama/filtre hapleri solda, aksiyon butonları sağda — kart değil, doğrudan
   sayfa zemininde durur; içindeki .admin-btn'ler filtrelerle aynı satırda tutarlı görünsün diye
   aynı 38px hap yüksekliğine getirilir (bkz. .admin-toolbar .admin-btn). */
.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 24px;
    position: sticky;
    top: 24px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    padding: 20px 28px;
    /* Sticky konum kendi katman bağlamını oluşturur; sayfalama gibi DOM'da sonra gelen öğelerin
       yapışkan çubuğun üzerine çizilmemesi için mütevazı bir taban katmanı verilir. */
    z-index: 10;
}

/* Filtre çekmecesi ve backdrop'u bu sticky toolbar'ın İÇİNDE yaşar — toolbar'ın katman bağlamı
   yüzünden çekmecenin kendi z-index'i sayfa geneline etki edemez (yaşanmış hata: sayfalama ve
   butonlar çekmecenin üzerine çiziliyordu). Çekmece açıkken bağlamın tamamı panel katmanına
   yükseltilir; böylece içindeki backdrop/çekmece her şeyin üstünde kalır. */
.admin-toolbar:has(.admin-filtre-cekmece.is-open) {
    z-index: var(--z-nav-panel);
}

.admin-toolbar .admin-btn {
    height: 38px;
    border-radius: var(--radius-lg);
}

/* Filtreler yokken (yalnızca aksiyon butonları varsa) çubuk sağa yaslanır. */
.admin-toolbar:has(> .admin-toolbar__actions:only-child) {
    justify-content: flex-end;
}

.admin-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1;
}

/* Yükseklik, yanındaki arama çipiyle (.admin-filtre-chip, 38px) eşitlendi: aynı satırda duran
   iki kontrolün 3px'lik fark yapması gözle görülüyordu. */
.admin-toolbar__filters select,
.admin-toolbar__actions select {
    height: 38px;
    padding: 0 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-white);
    cursor: pointer;
}

.admin-toolbar__filters select:focus,
.admin-toolbar__actions select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.admin-search {
    position: relative;
    flex: 1 1 220px;
    min-width: 180px;
}

.admin-search .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-lighter);
    pointer-events: none;
    max-width: 18px;
}

.admin-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-white);
}

.admin-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.admin-toolbar__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-toolbar__info h2 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-heading-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-toolbar__info h2 .admin-badge {
    margin-left: 8px;
    vertical-align: middle;
}

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

.admin-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Sayfa başlığındaki standart eylemler (Kaydet, Vazgeç, Sil, Düzenle, Yazdır, PDF İndir)
   yalnızca ikonla gösterilir: her sayfada aynı yerde, aynı sırada tekrar ettikleri için
   metne gerek kalmıyor ve uzun toolbar'lar bir çubuğa sığıyor. Alana özel eylemler
   ("Müşteriye Dönüştür", "Paket / Hizmet Tanımla" gibi) metin olarak kalır — onların
   evrensel bir ikonu yok, ikona çevirmek tahmine zorlardı.

   Etiket title (fare) ve aria-label (ekran okuyucu) ile taşınır; renk anlamı korunur, yani
   silme butonu kırmızı kalır. */
.admin-btn--ikon {
    padding: 10px;
    flex-shrink: 0;
}

.admin-btn--ikon svg {
    width: 17px;
    height: 17px;
}

.admin-toolbar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 8px;
    border-radius: var(--radius-lg);
    background: rgba(192, 57, 43, 0.15);
    font-size: 0.75rem;
    font-weight: 700;
}

/* Toplu işlem çubuğu (ör. Talepler sayfasındaki "Potansiyele Aktar"/"Müşteriye Aktar"/"Seçilenleri
   Sil"): araç çubuğunda sabit dururken hiçbir kayıt seçili değilken boşuna yer kaplamasın diye,
   viewport altına sabitlenip normalde ekranın dışında bekler; seçim yapılınca yukarı kayarak
   belirir. İçindeki butonlar form="..." ile tabloyu saran forma dışarıdan bağlıdır, bu yüzden
   DOM'daki konumu görsel yerleşimi etkilemez. */
.admin-secim-cubugu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 24px;
    display: flex;
    justify-content: center;
    padding: 0 24px;
    pointer-events: none;
    z-index: var(--z-header);
}

.admin-secim-cubugu__panel {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    padding: 12px 16px 12px 22px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(150%);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.admin-secim-cubugu.is-open {
    pointer-events: auto;
}

.admin-secim-cubugu.is-open .admin-secim-cubugu__panel {
    transform: translateY(0);
    opacity: 1;
}

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

.admin-secim-cubugu__sayi {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.admin-secim-cubugu__sayi strong {
    color: var(--color-primary);
}

.admin-secim-cubugu__aksiyonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 560px) {
    .admin-secim-cubugu {
        padding: 0 16px;
        bottom: 16px;
    }

    .admin-secim-cubugu__panel {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        padding: 16px;
    }

    .admin-secim-cubugu__sayi {
        text-align: center;
    }

    .admin-secim-cubugu__aksiyonlar .admin-btn {
        flex: 1 1 auto;
    }
}

.admin-table__talepno {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text-muted);
}

.admin-table__alt {
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.admin-table__musteri-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.admin-table__musteri-link:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .admin-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-toolbar__actions {
        justify-content: flex-end;
    }
}

@media (max-width: 560px) {

    /* .admin-toolbar__filters BİLEREK dışarıda bırakıldı: içindeki .admin-filtre-chip/.admin-dd
       öğeleri satır yönlü (row) bir flex bekler — column'a çevrilirse flex-basis değerleri
       yatay değil dikey eksende uygulanıp haplar dev kutulara dönüşür (bkz. .admin-filtre-chip
       ve .admin-filtre-chip--arama'daki flex-basis kuralları). Sarma zaten flex-wrap ile olur. */
    .admin-toolbar__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-toolbar__actions .admin-btn {
        width: 100%;
    }

    /* Create sayfalarındaki (Yeni.cshtml) "Vazgeç + Kaydet/Oluştur" ikilisi tam genişlikte alt
       alta değil, yan yana yarım genişlikte kalır — modifier, ilgili view'larda
       .admin-toolbar__actions'a elle eklenir, diğer (tek butonlu veya 3+ butonlu) araç
       çubukları eski dikey davranışını korur. */
    .admin-toolbar__actions--ikili {
        flex-direction: row;
    }

    .admin-toolbar__actions--ikili .admin-btn {
        flex: 1;
        width: auto;
    }
}

.admin-sort-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.admin-sort-link:hover {
    color: var(--color-primary);
}

/* Sayfalama şeridi bilinçli olarak sessiz: listenin altında duran bir yardımcı, kendi başına
   bir bölüm değil. Oklar buton kutusundan çıkarılıp metin kontrollerine indirildi. */
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 11px 20px;
    background-color: var(--color-white);

    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border: 1px solid #eee;
    border-top: 0;
}

.admin-pagination__info {
    font-size: 0.78rem;
    color: var(--color-text-lighter);
    font-variant-numeric: tabular-nums;
}

/* Buraya z-index VERME: filtre çekmecesi sticky .admin-toolbar'ın katman bağlamı içinde
   yaşadığından, DOM'da sonra gelen bu öğeye z-index verilirse sayfalama çekmecenin üzerine
   çizilir (yaşanmış hata). */
.admin-pagination__nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Tek sayfa varken bu blok hiçbir şey yapmıyor: iki ok da pasif ve "Sayfa 1 / 1" bilgisi zaten
   soldaki kayıt sayısında var. İki ok da pasifse blok tamamen gizlenir — dokuz ayrı listedeki
   işaretlemeye dokunmadan, :has() ile. */
.admin-pagination__nav:has(> .admin-btn--disabled:first-child):has(> .admin-btn--disabled:last-child) {
    display: none;
}

/* Oklar kutu değil, sessiz metin kontrolü. Özgüllük .admin-btn--ghost'u (0,1,0) geçsin diye
   iki sınıflı yazıldı. */
.admin-pagination__nav .admin-btn {
    padding: 5px 9px;
    border: 0;
    border-radius: var(--radius-base);
    background: none;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.admin-pagination__nav a.admin-btn:hover,
.admin-pagination__nav a.admin-btn:focus-visible {
    background: rgba(0, 86, 179, 0.07);
    color: var(--color-primary);
}

.admin-pagination__page {
    padding: 0 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-table-wrap {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow-x: auto;
}

/* Bir admin-card içine gömüldüğünde kartın kendi gölgesiyle çakışıp "gölge içinde gölge"
   görünümü oluşturmaması için düz bir çerçeveyle yetinir. */
.admin-table-wrap--flush {
    box-shadow: none;
    border: 1px solid var(--color-border-light);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
    text-align: left;
    align-content: center;
    padding: 14px 18px;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border-light);
}

/* Uzun metinli hücreler (hizmet adı gibi): alt satıra sarmak yerine kısaltılıp "…" konur,
   tam metin title'da kalır. Satır yüksekliği sabit kalsın diye sarma tercih edilmedi.

   Genişlik sınırı HÜCREYE değil içindeki bloğa verilir: table-layout:auto'da tarayıcılar
   td üzerindeki max-width'i bir öneri sayıp içerik gerektirdiğinde aşabiliyor. Açık genişlikli
   bir blok eleman ise kesinlikle taşmaz, hücre de ona göre daralır. */
.admin-table td.admin-table__kes > span {
    display: block;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-lighter);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: var(--color-bg);
}

.admin-table__row {
    cursor: pointer;
}

/* ===== Seçim işareti — panelin tek onay kutusu =====
   Tablo satır seçimi ve etiketli açık/kapalı anahtarı (bkz. .admin-kesifli-toggle) AYNI işareti
   kullanır. Daha önce ilki tarayıcının yerleşik kutusuydu (accent-color), ikincisi ise gri→yeşil
   bir hapti; iki kontrol akraba görünmüyordu ve yeşil panelde başka hiçbir yerde geçmiyordu.
   İşaret artık panelin etkileşim rengiyle konuşuyor — mavi, tıpkı odak halkaları, birincil
   butonlar ve aktif sekme gibi. Yeşil, "durumu iyi" okumaları için ayrıldı (.admin-badge--ok).

   appearance:none ile yerleşik kutu boşaltılır; onay çentiği ::after'ta döndürülmüş bir kenarlıkla
   çizilir. Bu sayede işaretleme değişmeden 10'dan fazla listede ve 11 formda birden uygulanır. */
.admin-table__check input[type="checkbox"],
.admin-kesifli-toggle input[type="checkbox"] {
    position: relative;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    /* padding ve box-sizing bilinçli olarak sıfırlanıyor: kutu bir <input>, yani formlardaki
       genel input kuralları (dolgu, kenarlık) sızarsa kare bozulur. */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-white);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}

/* Tablo hücresinde blok kutu: <input> satır-içi bir öğe olduğu için taban çizgisine oturuyor,
   14px dolgulu bir hücrede bu dikey ortadan aşağıda kalmak demek. Blok kutu satır kutusundan
   kurtulur ve hücrenin kendi dikey ortalaması (td varsayılanı) devreye girer. */
.admin-table__check input[type="checkbox"] {
    display: block;
}

/* Görünen kutu 18px ama tıklanabilir alan 36px: yoğun bir tablo satırında 18px'lik hedefi
   ıskalamak kolay. Sözde öğe elemanın parçası olduğundan tıklama yine kutuya iner. */
.admin-table__check input[type="checkbox"]::before {
    content: "";
    position: absolute;
    inset: -9px;
}

.admin-table__check input[type="checkbox"]:hover,
.admin-kesifli-toggle:hover input[type="checkbox"] {
    border-color: var(--color-primary);
}

.admin-table__check input[type="checkbox"]:checked,
.admin-table__check input[type="checkbox"]:indeterminate,
.admin-kesifli-toggle input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Çentik: sağ ve alt kenarı olan bir kutunun 45° döndürülmüşü. */
.admin-table__check input[type="checkbox"]::after,
.admin-kesifli-toggle input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    width: 4px;
    height: 9px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0.4);
    opacity: 0;
    transition: transform 0.14s ease, opacity 0.14s ease;
}

.admin-table__check input[type="checkbox"]:checked::after,
.admin-kesifli-toggle input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

/* Kısmi seçim (bkz. "Tümünü seç" kutusu): çentik yerine yatay çizgi. */
.admin-table__check input[type="checkbox"]:indeterminate::after {
    top: 7px;
    left: 3px;
    width: 10px;
    height: 0;
    border-width: 0 0 2px 0;
    transform: none;
    opacity: 1;
}

.admin-table__check input[type="checkbox"]:focus-visible,
.admin-kesifli-toggle input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-table__check {
    width: 1%;
    padding-right: 0;
    /* Tarayıcı varsayılanına güvenmek yerine açıkça: hücre yüksekliği satırdaki en uzun
       içeriğe göre değişiyor, kutu her koşulda dikey ortada kalmalı. */
    vertical-align: middle;
}

/* Seçim satır düzeyinde okunur: 18px'lik kutuya tek tek bakmadan, tablonun karşısından hangi
   satırların seçili olduğu görülür. :has() sayesinde tek CSS kuralı — on ayrı listedeki JS'e
   dokunulmadı.
   Satırı boydan boya boyamak yerine sol kenara ince bir şerit: zemin tonlaması hem hover
   geri bildirimini yutuyor hem de her tabloda görülen hazır cevap. Şerit background-image ile
   çiziliyor, border-left içeriği 3px kaydırırdı. */
.admin-table tbody tr:has(.admin-table__check input[type="checkbox"]:checked) .admin-table__check {
    background-image: linear-gradient(to right, var(--color-primary) 0 3px, transparent 3px);
}

@media (prefers-reduced-motion: reduce) {

    .admin-table__check input[type="checkbox"],
    .admin-kesifli-toggle input[type="checkbox"],
    .admin-table__check input[type="checkbox"]::after,
    .admin-kesifli-toggle input[type="checkbox"]::after {
        transition: none;
    }
}

.admin-toplu-islem {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-toplu-islem__bilgi {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.admin-table__row--new {
    background: #eef6ff;
    box-shadow: inset 3px 0 0 var(--color-primary);
    font-weight: 600;
}

.admin-table__row--new:hover {
    background: #e2f0ff;
}

.admin-table__link {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

.admin-table__link:hover {
    text-decoration: underline;
}

/* Sayfa başlığı — sidebar'daki marka satırıyla (bkz. .admin-sidebar__brand, 65px) aynı yükseklikte
   olacak şekilde sabitlendi; ikisi yan yana durduğunda alt kenarları artık aynı çizgide bitiyor.
   Breadcrumb'lı sayfalarda (bkz. .admin-heading--with-breadcrumb, iki satır içerik) bu sabit
   yükseklik yetmediği için auto yüksekliğe dönüp yalnızca alt sınır olarak korunuyor. */
.admin-heading {
    background: var(--color-white);
    height: 65px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 28px;
    margin-bottom: 24px;
    border-bottom: 1px solid #eee;
}

.admin-heading--with-breadcrumb {
    height: auto;
    min-height: 65px;
    padding: 20px 28px;
}

.admin-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.82rem;
}

.admin-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 600;
}

.admin-breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.admin-breadcrumb__sep {
    color: var(--color-border);
}

.admin-breadcrumb__current {
    color: var(--color-text);
    font-weight: 600;
}

.admin-heading__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.admin-heading__title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-heading-dark);
}

.admin-heading__extra {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-heading__extra form {
    display: flex;
}

.admin-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px 28px;
    margin-bottom: 24px;
}

.admin-detail__full {
    grid-column: 1 / -1;
}

.admin-detail__grid dt {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-lighter);
    margin-bottom: 4px;
}

.admin-detail__grid dd {
    font-size: 0.98rem;
    color: var(--color-text);
}

.admin-detail__kvkk {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-fiyat-ozeti__liste {
    list-style: none;
    margin: 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-fiyat-ozeti__liste li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.92rem;
    color: var(--color-text);
}

.admin-fiyat-ozeti__liste li strong {
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--color-heading-dark);
}

.admin-fiyat-ozeti__toplam {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-weight: 700;
    color: var(--color-heading-dark);
}

.admin-fiyat-ozeti__toplam strong {
    font-size: 1.1rem;
    color: var(--color-primary);
}

/* Alan/gruplar JS ile hidden=true yapılarak gizlenir (bkz. admin-hesaplama.js). Ama
   .admin-field{display:flex} ve .admin-form-grid{display:grid} yazar kuralları, tarayıcının
   [hidden]{display:none} varsayılanını ezer — bu yüzden gizlenmezler (bu projede tanıdık tuzak;
   bkz. .modal-odeme-secim[hidden], .musaitlik-satir__saatler[hidden]). Forma özgü, daha yüksek
   özgüllükte bir kuralla açıkça geri alınır. */
#hizli-teklif-form .admin-field[hidden],
#hizli-teklif-form .admin-form-grid[hidden] {
    display: none;
}

/* Hızlı erişilebilir seçim: dropdown yerine tek tıkla seçilen buton grubu. Değeri gizli bir input
   tutar (form/serialize aynı kalır); butonlar onu günceller (bkz. admin-hesaplama.js). */
.admin-secim-alanlar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.admin-secim-grup__butonlar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Seçim chip'leri kenarlıksız yumuşak KARE token'lardır. Derinlik tamamen dolgu/renkle verilir
   (gölge YOK): nötr cool-gray → mavi hover → dolu mavi seçili. Tüm durumlarda kenarlık olmadığından
   seçilince zıplama olmaz. */
.admin-secim-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: #edf0f5;
    color: #414b5c;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, transform 0.08s ease;
}

/* Kategorik chip ikonu (yalnızca müşteri türü + hizmet); rengi metinle birlikte state'e göre değişir. */
.admin-secim-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.admin-secim-btn:hover {
    background: #dfe5ef;
    color: var(--color-primary);
}

.admin-secim-btn:active {
    transform: scale(0.96);
}

.admin-secim-btn.is-secili {
    background: var(--color-primary);
    color: var(--color-white);
}

.admin-secim-btn.is-secili:hover {
    background: var(--color-primary-dark);
}

.admin-secim-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Sağ "Canlı Teklif" kolonu, sol form uzasa da formla kaymayıp görünür kalır (sticky). Sticky'nin
   hareket alanı olması için kolonun satır yüksekliğine esnemesi gerekir — .admin-row{align-items:start}
   bunu kapattığından burada tek öğe için geri açılır. Kaydırma kabı .admin-main'dir (overflow-y:auto). */
.admin-hizli-kolon {
    align-self: stretch;
}

/* Toolbar da sticky (top:24px) olduğundan kart onun ALTINA yapışmalı — yoksa üst üste biner. Toolbar
   yüksekliği içeriğe/ekrana göre değiştiğinden top JS ile ölçülüp --hizli-sticky-top'a yazılır (bkz.
   admin-hesaplama.js); JS gelmeden makul bir masaüstü varsayılanı kullanılır. Kart, aracın odak öğesi
   olduğundan hafif mavi bir gölge/kenarlıkla sayfadan bir tık yukarı kaldırılır. */
.admin-hizli-sonuc {
    position: sticky;
    top: var(--hizli-sticky-top, 120px);
    border-color: rgba(0, 86, 179, 0.16);
}

.admin-hizli-sonuc__govde {
    transition: opacity 0.15s ease;
}

/* Sunucudan yeni fiyat gelene kadar mevcut özet hafifçe soluklaşır (canlı his). */
.admin-hizli-sonuc__govde--yukleniyor {
    opacity: 0.45;
}

/* Fiyat kırılımı makbuz gibi: kalemler kesikli çizgilerle ayrılır, toplam tinted "kahraman" blokta.
   Yalnızca Canlı Teklif kartına scope'lu — Detay.cshtml'deki aynı sınıflar etkilenmez. */
.admin-hizli-sonuc .admin-fiyat-ozeti__liste {
    margin: 18px 0 0;
    gap: 0;
}

.admin-hizli-sonuc .admin-fiyat-ozeti__liste li {
    padding: 11px 0;
    border-bottom: 1px dashed var(--color-border-light);
    font-size: 0.9rem;
}

.admin-hizli-sonuc .admin-fiyat-ozeti__liste li:first-child {
    padding-top: 4px;
}

.admin-hizli-sonuc .admin-fiyat-ozeti__toplam {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    margin-top: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.09), rgba(0, 191, 255, 0.08));
    border: 1px solid rgba(0, 86, 179, 0.14);
    border-radius: var(--radius-lg);
}

.admin-hizli-sonuc .admin-fiyat-ozeti__toplam span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.admin-hizli-sonuc .admin-fiyat-ozeti__toplam strong {
    align-self: flex-start;
    display: inline-block;
    font-size: 2rem;
    line-height: 1.05;
    color: var(--color-primary-dark);
    transform-origin: left center;
}

/* Boş durum: teklif henüz yokken davetkâr bir yer tutucu (bkz. _FiyatOzeti.cshtml). */
.admin-hizli-bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 8px 0 0;
    padding: 28px 12px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.admin-hizli-bos svg {
    width: 40px;
    height: 40px;
    color: var(--color-border);
}

.admin-hizli-bos p {
    margin: 0;
    max-width: 210px;
}

.admin-hizli-sonuc__btn {
    width: 100%;
    height: 46px;
    margin-top: 22px;
    gap: 8px;
    justify-content: center;
    font-size: 0.95rem;
}

/* Toplam gerçekten değiştiğinde tek, kısa bir vurgu — "anlık"lığı somutlaştıran ölçülü tek hareket. */
.admin-fiyat-ozeti__toplam--degisti strong {
    animation: admin-hizli-pulse 0.45s ease;
}

@keyframes admin-hizli-pulse {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.1);
    }

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

@media (max-width: 900px) {
    .admin-hizli-sonuc {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {

    .admin-hizli-sonuc__govde,
    .admin-secim-btn {
        transition: none;
    }

    .admin-fiyat-ozeti__toplam--degisti strong {
        animation: none;
    }
}

.admin-detail__grid dd a {
    color: var(--color-primary);
    text-decoration: none;
}

.admin-detail__grid dd a:hover {
    text-decoration: underline;
}

/* Fiyatlandırma sayfası */
.admin-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-kutucuk {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 10px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.admin-kutucuk:hover {
    border-color: var(--color-primary);
}

.admin-kutucuk input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.admin-kutucuk:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.admin-kutucuk input:focus-visible~span {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

.admin-fiyat-input {
    width: 130px;
    flex-shrink: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-align: right;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
}

.admin-fiyat-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.admin-fiyat-input:disabled {
    background: var(--color-border-light);
    color: var(--color-text-lighter);
    cursor: not-allowed;
}

.admin-field__hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-lighter);
}

/* .admin-field__hint'in aksine kendi satırında durur — etiketin içine gömülü uzun açıklama
   metinleri (ör. "bu ve üzeri aralıklara %10 zam uygulanır") etiketle iç içe geçip
   okunaksızlaşmasın diye kontrolün altına, ayrı bir satıra taşınır. */
.admin-field__not {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--color-text-lighter);
    line-height: 1.5;
}

.admin-fiyat-alani {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-fiyat-input--kart {
    width: 100%;
    font-size: 1.05rem;
    font-weight: 600;
}

.admin-paket-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1100px) {
    .admin-paket-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .admin-paket-grid {
        grid-template-columns: 1fr;
    }
}

.admin-paket-karti h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.admin-paket-karti__parametreler {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.admin-paket-karti__form .admin-fiyat-alani {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 16px;
}

.admin-paket-karti__aksiyonlar {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.admin-paket-karti__kaydet {
    flex: 1;
}

.admin-paket-karti__duzenle {
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    min-width: 40px;
    max-width: 40px;
}

.admin-paket-karti__duzenle svg {
    width: 18px;
    height: 18px;
}

.admin-danger-zone {
    border: 1px solid #f3c6c2;
}

.admin-danger-zone h2 {
    color: #c0392b;
}

/* Paket düzenle / ekle sayfaları */
.admin-form-section .admin-card__head {
    margin-bottom: 16px;
}

/* Etiketli açık/kapalı anahtarı ("Aktif — panele giriş yapabilir" gibi).
   Kutu artık gizlenmiyor, görünür işaret olarak duruyor (bkz. yukarıdaki seçim işareti): kapalı
   hâli eskiden gri bir hapti ve devre dışı bir butondan ayırt edilemiyordu — neyin tıklanabilir
   olduğunu söyleyen hiçbir şey yoktu. İşaretin kendisi bunu söylüyor. */
.admin-kesifli-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    color: var(--color-text-light);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.admin-kesifli-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Açık durum dört ayrı işaret taşır: dolu kutu, mavi kenarlık, hafif mavi zemin, mavi metin.
   Tek bir renk değişimine yaslanmıyor. */
.admin-kesifli-toggle:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(0, 86, 179, 0.06);
    color: var(--color-primary);
}

.admin-kesifli-toggle--kucuk input[type="checkbox"] {
    width: 15px;
    height: 15px;
}

.admin-kesifli-toggle--kucuk input[type="checkbox"]::after {
    top: 0;
    left: 4px;
    width: 4px;
    height: 8px;
}

.admin-varyasyon-alani {
    margin-top: 4px;
}

.admin-varyasyon-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.admin-varyasyon-satir {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
}

.admin-varyasyon-duzenle-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.admin-varyasyon-ad {
    flex: 1;
    min-width: 160px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-text);
}

.admin-varyasyon-ad:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.admin-kesifli-toggle--kucuk {
    padding: 6px 12px;
    font-size: 0.76rem;
}

.admin-varyasyon-ekle-form,
.admin-yeni-paket-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-varyasyon-ekle-form input[type="text"],
.admin-yeni-paket-form input[type="text"] {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-text);
}

.admin-varyasyon-ekle-form input[name="ad"],
.admin-yeni-paket-form input[name="ad"] {
    flex: 1;
    min-width: 200px;
}

.admin-btn--kucuk {
    padding: 7px 14px;
    font-size: 0.82rem;
}

/* SEO sayfası - araç kartları */
.admin-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.admin-tool-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    padding: 16px 18px 16px 22px;
    text-decoration: none;
    color: var(--color-text);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.admin-tool-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--tool-color);
}

.admin-tool-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.admin-tool-card__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--tool-color);
}

.admin-tool-card__icon svg {
    width: 22px;
    height: 22px;
}

.admin-tool-card__label {
    flex: 1;
    font-weight: 600;
    font-size: 0.92rem;
}

.admin-tool-card__arrow {
    color: var(--color-text-lighter);
    transition: transform var(--transition-base), color var(--transition-base);
}

.admin-tool-card:hover .admin-tool-card__arrow {
    color: var(--tool-color);
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {

    .admin-tool-card,
    .admin-tool-card__arrow {
        transition: none;
    }
}

/* SEO sayfası - kod parçacığı alanları (GTM) */
.admin-code-field {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
}

.admin-code-field__chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-heading-dark);
    color: var(--color-dark-muted);
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    padding: 7px 14px;
}

.admin-code-field__dots {
    display: inline-flex;
    flex-shrink: 0;
    gap: 4px;
}

.admin-code-field__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.admin-code-field__dots span:nth-child(1) {
    background: #ff5f56;
}

.admin-code-field__dots span:nth-child(2) {
    background: #ffbd2e;
}

.admin-code-field__dots span:nth-child(3) {
    background: #27c93f;
}

.admin-code-field .admin-textarea {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
}

/* SEO sayfası. Not: minmax()'ın alt sınırı yüzdelik olursa (ör. eski "calc(33% - 48px)")
   auto-fit dar ekranlarda tek sütuna DÜŞMEZ — yüzde, konteynerle birlikte küçüldüğü için her
   zaman aynı oranda "yeterince küçük" kalır ve kartlar 2-3 dar sütuna sıkışarak taşar. Panelin
   diğer grid'lerinde (.admin-stat-grid, .admin-tool-grid vb.) zaten kullanılan sabit piksel
   alt sınır, konteyner o değerin altına düşünce auto-fit'i güvenilir şekilde tek sütuna indirir. */
.admin-seo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
    gap: 24px;
}

.admin-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    padding: 24px 28px;
}

.admin-card:last-child {
    margin-bottom: 0;
}

.admin-card--full {
    grid-column: 1 / -1;
}

.admin-card h2 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--color-heading-dark);
    margin-bottom: 6px;
}

.admin-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-card__head h2 {
    flex: 1;
    margin-bottom: 0;
}

.admin-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-lg);
    display: none;
}

.admin-card__icon svg {
    width: 16px;
    height: 16px;
}

.admin-card__icon--info {
    background: #eef1f5;
    color: #51606e;
}

.admin-card__icon--ok {
    background: #e6f7ee;
    color: #1e8a4c;
}

.admin-card__icon--warn {
    background: #fdecea;
    color: #c0392b;
}

.admin-card__icon--primary {
    background: #eef6ff;
    color: var(--color-primary);
}

.admin-card__icon--accent {
    background: #f3e8ff;
    color: #7c3aed;
}

.admin-card__chip {
    flex-shrink: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    display: none;
}

.admin-card__chip--info {
    background: #eef1f5;
    color: #51606e;
}

.admin-card__chip--ok {
    background: #e6f7ee;
    color: #1e8a4c;
}

.admin-card__chip--warn {
    background: #fdecea;
    color: #c0392b;
}

.admin-card__chip--primary {
    background: #eef6ff;
    color: var(--color-primary);
}

.admin-card__chip--accent {
    background: #f3e8ff;
    color: #7c3aed;
}

.admin-card__hint {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

/* Çalışanın "Konuma Geldi" aşamasında sahada gördüğü bir farkı bildirdiği not (bkz. Is.SahaNotu,
   Talep Detay > Çalışma Detayları kartı) — hata değil, sahadan gelen bir gözlem olduğu için
   admin-alert--error'ın kırmızısı yerine amber bir "dikkat" vurgusu kullanır; diğer kart
   metinlerinden bilinçli olarak ayrışır çünkü genelde admin'in aksiyon almasını gerektirir.
   Bu tonun admin.css'te tek kullanım yeri burasıdır. */
.admin-saha-notu {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fff8e6;
    border: 1px solid #f5d78a;
    border-radius: var(--radius-base);
    padding: 12px 14px;
    margin-bottom: 18px;
}

/* Aynı amber "dikkat" kutusunun genel amaçlı sürümü: hata değil ama yöneticinin aksiyon
   alması gereken durumlar için (bkz. Çalışma Kriterleri sekmesindeki eksik kriter uyarısı).
   Saha notundan tek farkı üst başlık taşımaması. */
.admin-dikkat-notu {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fff8e6;
    border: 1px solid #f5d78a;
    border-radius: var(--radius-base);
    padding: 12px 14px;
    margin-bottom: 18px;
}

.admin-dikkat-notu p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--color-text);
}

.admin-saha-notu svg,
.admin-dikkat-notu svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #b8860b;
}

.admin-saha-notu__metin {
    min-width: 0;
}

.admin-saha-notu__baslik {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #92700a;
    font-weight: 700;
    margin-bottom: 3px;
}

.admin-saha-notu p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--color-text);
}

.admin-card__subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-heading-dark);
    margin: 20px 0 10px;
}

.admin-card__subtitle:first-of-type {
    margin-top: 0;
}

.admin-textarea {
    width: 100%;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--color-text);
    margin-bottom: 14px;
}

.admin-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.admin-textarea--tall {
    max-height: 420px;
}

.admin-textarea--with-meta {
    margin-bottom: 6px;
}

.admin-textarea__meta {
    margin: 0 0 14px;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--color-text-lighter);
}

.admin-secret-field {
    position: relative;
    display: flex;
    max-width: 480px;
}

.admin-secret-field input {
    flex: 1;
    padding-right: 40px;
}

.admin-secret-field__toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-lighter);
    cursor: pointer;
}

.admin-secret-field__toggle svg {
    width: 16px;
    height: 16px;
}

.admin-secret-field__toggle:hover {
    background: var(--color-border-light);
    color: var(--color-text);
}

.admin-secret-field__toggle.is-copied {
    color: var(--color-success, #2e7d32);
}

.admin-file-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.admin-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px 9px 12px;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
}

.admin-file-row__icon {
    display: flex;
    flex-shrink: 0;
    color: var(--color-text-lighter);
}

.admin-file-row__icon svg {
    width: 16px;
    height: 16px;
}

.admin-file-row__name {
    flex: 1;
    min-width: 0;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-file-row__name:hover {
    text-decoration: underline;
}

.admin-file-row__delete {
    flex-shrink: 0;
}

.admin-file-row__delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-text-lighter);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.admin-file-row__delete-btn svg {
    width: 15px;
    height: 15px;
}

.admin-file-row__delete-btn:hover {
    background: #fdecea;
    color: #c0392b;
}

.admin-note-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 20px;
}

.admin-note {
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.admin-note__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.admin-note__tarih {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-lighter);
}

.admin-note p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text);
    white-space: pre-wrap;
}

/* Dosya yükleme bırakma alanı */
.admin-dropzone-form {
    display: flex;
    flex-direction: column;
}

.admin-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base);
    margin-bottom: 14px;
}

.admin-dropzone:hover {
    border-color: var(--color-primary);
}

.admin-dropzone.is-dragover {
    border-color: var(--color-primary);
    background: #eef6ff;
}

.admin-dropzone.has-file {
    border-style: solid;
    border-color: var(--color-primary);
    background: #eef6ff;
}

.admin-dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.admin-dropzone__input:focus-visible~.admin-dropzone__icon {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-dropzone__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-primary);
    border: 1px solid #eee;
}

.admin-dropzone__icon svg {
    width: 17px;
    height: 17px;
}

.admin-dropzone__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-dropzone__text strong {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-heading-dark);
}

.admin-dropzone__text span {
    font-size: 0.74rem;
    color: var(--color-text-lighter);
}

.admin-dropzone__filename {
    margin-left: auto;
    padding-left: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

/* Takvim */
.admin-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.admin-calendar__nav h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-heading-dark);
    text-transform: capitalize;
}

.admin-calendar-wrap {
    /* width:fit-content, geniş masaüstünde takvimi ortalamak için tutuluyor; ama tek başına
       "içerik kadar geniş" demek olduğundan dar ekranlarda 1051px'lik ızgarayı (bkz. aşağısı)
       konteynerden taşırıp sayfanın tamamını yatayda kaydırılır hale getirebiliyordu — tıpkı
       .admin-table-wrap gibi, max-width:100% ile üst sınır açıkça konup taşma yalnızca bu
       kutunun içinde (overflow-x:auto) kalması garanti ediliyor. */
    max-width: 100%;
    width: fit-content;
    overflow-x: auto;
    margin: 0 auto;
}

.admin-calendar {
    display: grid;
    grid-template-columns: repeat(7, 164px);
    min-width: 1152px;
    gap: 1px;
    background: var(--color-border-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.admin-calendar__baslik {
    background: var(--color-bg);
    padding: 10px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: center;
    white-space: nowrap;
}

.admin-calendar__gun {
    background: var(--color-white);
    min-height: 110px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: background var(--transition-base);
}

.admin-calendar__gun:hover {
    background: var(--color-bg);
}

.admin-calendar__gun--disi {
    background: var(--color-bg);
}

.admin-calendar__gun--disi:hover {
    background: var(--color-border-light);
}

.admin-calendar__gun--disi .admin-calendar__gun-no {
    color: var(--color-text-lighter);
}

.admin-calendar__gun--bugun {
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.admin-calendar__gun-no {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
}

.admin-calendar__randevu {
    display: block;
    border-radius: var(--radius-lg);
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--color-border-light);
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-calendar__randevu.admin-badge--ok {
    background: #e6f7ee;
    color: #1e8a4c;
}

.admin-calendar__randevu.admin-badge--warn {
    background: #fdecea;
    color: #c0392b;
}

.admin-calendar__randevu.admin-badge--manuel {
    background: #f3e8ff;
    color: #7c3aed;
}

.admin-calendar__randevu.admin-badge--info {
    background: #eef6ff;
    color: var(--color-primary);
}

.admin-calendar__fazla {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-lighter);
    padding: 0 8px;
}

/* Dashboard */
.admin-dashboard-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border: 1px solid #eee;
}

.admin-dashboard-hero::before,
.admin-dashboard-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.admin-dashboard-hero::before {
    top: -60px;
    right: -40px;
    width: 220px;
    height: 220px;
}

.admin-dashboard-hero::after {
    bottom: -100px;
    right: 140px;
    width: 180px;
    height: 180px;
}

.admin-dashboard-hero__eyebrow {
    position: relative;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
}

.admin-dashboard-hero__title {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.admin-dashboard-hero__subtitle {
    position: relative;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    max-width: 560px;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.admin-stat-tile {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    padding: 20px;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.admin-stat-tile:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.admin-stat-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
}

.admin-stat-tile__icon svg {
    width: 22px;
    height: 22px;
}

.admin-stat-tile__icon--primary {
    background: #eef6ff;
    color: var(--color-primary);
}

.admin-stat-tile__icon--accent {
    background: #f3e8ff;
    color: #7c3aed;
}

.admin-stat-tile__icon--ok {
    background: #e6f7ee;
    color: #1e8a4c;
}

.admin-stat-tile__icon--info {
    background: #eef1f5;
    color: #51606e;
}

.admin-stat-tile__icon--warn {
    background: #fdecea;
    color: #c0392b;
}

.admin-stat-tile__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-stat-tile__value {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-heading-dark);
    line-height: 1.2;
}

.admin-stat-tile__label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.admin-stat-tile__sub {
    font-size: 0.78rem;
    color: var(--color-text-lighter);
    margin-top: 6px;
}

.admin-agenda-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-agenda-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-base);
}

.admin-agenda-item:hover {
    background: var(--color-border-light);
}

.admin-agenda-item__saat {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-primary);
    flex-shrink: 0;
    min-width: 52px;
}

/* "Bu Hafta" sekmesi gün adı + saat gösterdiği için (ör. "Çar 14:00") tek başına saatten
   (ör. "14:00") daha geniş bir alana ihtiyaç duyar. */
.admin-agenda-item__saat--gun {
    min-width: 66px;
    font-size: 0.85rem;
}

/* Dashboard'daki "Randevular" kartı — Bugün/Yarın/Bu Hafta arasında geçiş yapan segmented
   control. Filtre haplarıyla aynı "pill" dilini konuşur ama iç içe (aktif sekme beyaz, konteyner
   gri) bir varyantı — sekmeler bir seçim değil bir görünüm değiştirdiği için görsel olarak
   filtrelerden ayrışması gerekiyordu. */
/* Şerit içeriği kadar yer kaplar ama kapsayıcısını asla aşmaz: sığmadığında yatay kayar.
   Kenardan yarım görünen sekme, devamı olduğunu söyleyen işarettir — ayrı bir ok ya da
   kaydırma çubuğu eklemeye gerek yok, ikisi de şeridin sadeliğini bozardı. */
.admin-tabs {
    display: flex;
    width: max-content;
    max-width: 100%;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar {
    display: none;
}

.admin-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px;
    border: none;
    border-radius: var(--radius-lg);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-base), color var(--transition-base);
}

.admin-tabs__btn:hover {
    color: var(--color-text);
}

.admin-tabs__btn.is-active {
    background: var(--color-white);
    color: var(--color-heading-dark);
    border: 1px solid #eee;
}

.admin-tabs__sayac {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-lg);
    background: var(--color-border-light);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-tabs__btn.is-active .admin-tabs__sayac {
    background: #eef6ff;
    color: var(--color-primary);
}

@media (max-width: 640px) {
    /* Dar ekranda sekmeler eşit paya bölünmez — flex:1 verilseydi uzun etiketler
       ("Çalışma Kriterleri") yine sığmayıp taşardı. Şerit kaydırılabilir kalır,
       yalnızca yatay dolgu daralır. */
    .admin-tabs__btn {
        padding: 10px 10px;
    }
}

.admin-agenda-item__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-agenda-item__ad {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-agenda-item__meta {
    font-size: 0.78rem;
    color: var(--color-text-lighter);
}

/* Durum dağılımı — yatay bar grafik */
.admin-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-bar-chart__row {
    display: grid;
    grid-template-columns: 170px 1fr 40px;
    align-items: center;
    gap: 12px;
}

.admin-bar-chart__label {
    font-size: 0.85rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-bar-chart__track {
    display: block;
    height: 14px;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.admin-bar-chart__fill {
    display: block;
    height: 100%;
    min-width: 6px;
    /* Spec: veri ucu (sağ) yuvarlak, taban (sol) köşeli — bkz. marks-and-anatomy. */
    border-radius: 0 4px 4px 0;
}

.admin-bar-chart__fill--new {
    background: #9aa0a6;
}

.admin-bar-chart__fill--info {
    background: var(--color-primary);
}

.admin-bar-chart__fill--manuel {
    background: #7c3aed;
}

.admin-bar-chart__fill--ok {
    background: #1e8a4c;
}

.admin-bar-chart__fill--warn {
    background: #c0392b;
}

.admin-bar-chart__value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-heading-dark);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .admin-dashboard-hero {
        padding: 24px;
    }

    .admin-stat-grid {
        grid-template-columns: 1fr;
    }

    .admin-bar-chart__row {
        grid-template-columns: 110px 1fr 34px;
    }
}

/* ===== /hizmet İş Detay sayfası (bkz. Views/Hizmet/IsDetay.cshtml) =====
   Eski hali tek büyük bir karttı (_IsKarti); sayfa standart panel düzenine (toolbar + sekmeler +
   kartlar) çevrildi. is-kart__* önekli kurallar o dönemden kalan, hâlâ kullanılan parçalardır —
   adım şeridi, fotoğraf ızgarası, iletişim satırı. */

/* Adım şeridi kendi kartında: wrap'ın karttaki dış boşluğu karta ait, kendi margin'i sıfır.
   Sayfanın dikey ritmi 24px (kartlar arası boşlukla aynı) — sekmelerin genel 16px alt boşluğu
   bu sayfada üstündeki kart ve altındaki panelle uyumsuz kalıyordu, ikisi de 24'e çekildi. */
.is-detay-adimlar {
    margin-bottom: 16px;
}

.is-detay-adimlar .is-kart__adimlar-wrap {
    margin: 0;
}

.is-detay-sekmeler {
    margin-bottom: 24px;
}

/* Kazanç kartı tek satır: yalnızca net tutar. İşin müşteriye kesilen asıl fiyatı ve komisyon
   hizmet verene bilinçli olarak gösterilmiyor (bkz. IsDetay.cshtml'deki not). */
.is-detay-kazanc {
    margin: 0;
}

.is-detay-kazanc__net {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.is-detay-kazanc__net dt {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.is-detay-kazanc__net dd {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

/* Durum geçmişi: küçük bir zaman çizelgesi. */
.is-detay-gecmis {
    margin: 0;
    padding: 0;
    list-style: none;
}

.is-detay-gecmis li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}

.is-detay-gecmis li + li {
    border-top: 1px solid var(--color-border-light);
}

.is-detay-gecmis__durum {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
}

.is-detay-gecmis__tarih {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-lighter);
}

/* İşin yaşam döngüsü adım çubuğu — tamamlanan adımlar dolu, sıradaki adım vurgulu, kalanlar soluk.
   Gerçek bir sıralı akış olduğundan numaralandırma/işaret anlamlı bilgi taşır (bkz. Views/Hizmet/IsDetay.cshtml).
   İlk/son adım artık kendi flex segmentinin ortasında değil, şeridin gerçek kenarına yapışık
   duruyor ("ortada duran" görünüm şikayeti). Bu yüzden bağlantı çizgisi artık her adımın kendi
   kutusuna göre ayrı ayrı değil, tüm şeride göre TEK parça (.is-kart__adimlar-cizgi) çiziliyor —
   noktalar kutu kenarına kaydığında eski segment-bazlı ::before hesaplaması hizasını
   kaybediyordu. İlerleme oranı sunucuda hesaplanıp inline genişlik olarak basılıyor. */
.is-kart__adimlar-wrap {
    position: relative;
    margin: 0 0 20px;
}

.is-kart__adimlar-cizgi {
    position: absolute;
    top: 12px;
    left: 13px;
    right: 13px;
    height: 2px;
    background: var(--color-border);
}

.is-kart__adimlar-cizgi span {
    display: block;
    height: 100%;
    background: var(--color-primary);
}

.is-kart__adimlar {
    position: relative;
    z-index: 1;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.is-kart__adim {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
}

.is-kart__adim-nokta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    color: var(--color-text-lighter);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.is-kart__adim.is-tamam .is-kart__adim-nokta {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.is-kart__adim.is-aktif .is-kart__adim-nokta {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 4px #eef6ff;
}

.is-kart__adim-etiket {
    font-size: 0.66rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-text-lighter);
}

.is-kart__adim.is-tamam .is-kart__adim-etiket,
.is-kart__adim.is-aktif .is-kart__adim-etiket {
    color: var(--color-text);
}


/* Hızlı iletişim satırı — navigasyon/arama/whatsapp her zaman elde */
.is-kart__iletisim {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.is-kart__iletisim a {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 9px 12px;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.is-kart__iletisim a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.is-kart__iletisim svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}




.is-kart__saha-notu-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.is-kart__saha-notu-form textarea {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: var(--color-text);
    resize: vertical;
}

.is-kart__saha-notu-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.is-kart__saha-notu-form .admin-btn {
    align-self: flex-start;
}


.is-kart__ek-hizmetler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -6px 0 14px;
}

.is-kart__foto-bolum {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}


.is-kart__degerlendirme-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.is-kart__degerlendirme-form select,
.is-kart__degerlendirme-form input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: var(--color-text);
}

.is-kart__degerlendirme-form input[type="text"] {
    flex: 1;
    min-width: 160px;
}

.is-kart__degerlendirme-form select:focus,
.is-kart__degerlendirme-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.is-kart__foto-baslik {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

/* Bir sonraki aşamaya geçebilmek için bu bölümde en az 1 fotoğraf zorunlu olduğunu belirtir
   (bkz. bkz. IsDetay.cshtml'deki fotoBolumleri.Gerekli) — devre dışı bırakılan ana butonla birlikte
   kullanıcıya neden ilerleyemediğini erkenden söyler. */
.is-kart__foto-gerekli {
    font-weight: 600;
    color: #c0392b;
    text-transform: none;
    letter-spacing: normal;
}

.is-kart__foto-izgara {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.is-kart__foto {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-base);
    overflow: hidden;
}

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

.is-kart__foto-sil {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.65);
    color: var(--color-white);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.is-kart__foto-ekle-form {
    display: flex;
}

.is-kart__foto-ekle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-base);
    border: 1.5px dashed var(--color-border);
    color: var(--color-text-lighter);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.is-kart__foto-ekle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 480px) {

    .is-kart__adim-etiket {
        font-size: 0.6rem;
    }
}

/* Talep Detay'daki minimal bilgi listesi — çok kolonlu admin-detail__grid'in aksine her alan
   kendi satırında (etiket solda, değer sağında), ince ayraçlarla. --sik varyantı sağ kolondaki
   kompakt Hizmet kartı içindir. */
.admin-detail-liste {
    margin: 0;
}

.admin-detail-liste>div {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.admin-detail-liste>div:first-child {
    padding-top: 0;
}

.admin-detail-liste>div:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.admin-detail-liste dt {
    flex: 0 0 150px;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-lighter);
}

.admin-detail-liste dd {
    margin: 0;
    min-width: 0;
    font-size: 0.92rem;
    color: var(--color-text);
    overflow-wrap: break-word;
}

.admin-detail-liste dd a {
    color: var(--color-primary);
    text-decoration: none;
}

.admin-detail-liste dd a:hover {
    text-decoration: underline;
}

.admin-detail-liste--sik>div {
    padding: 7px 0;
}

.admin-detail-liste--sik dt {
    flex-basis: 105px;
    font-size: 0.7rem;
}

.admin-detail-liste--sik dd {
    font-size: 0.86rem;
}

/* Özet liste: "A, B ve N diğer X" — üstüne gelince/odaklanınca tamamını açılır kutuda gösterir
   (bkz. Views/Shared/_OzetListe.cshtml). Detay sayfalarındaki bilgi listelerinde uzun
   koleksiyonları (getirdiği çalışanlar, rozetler) tek satıra sığdırmak için. */
.admin-ozet-liste a {
    color: var(--color-primary);
    text-decoration: none;
}

.admin-ozet-liste a:hover {
    text-decoration: underline;
}

.admin-ozet-liste__bos {
    color: var(--color-text-muted);
}

.admin-ozet-liste__fazla {
    position: relative;
    color: var(--color-text-muted);
    cursor: default;
    border-bottom: 1px dashed var(--color-border);
}

.admin-ozet-liste__pop {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: var(--z-nav-panel);
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    max-width: 300px;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-card-hover);
}

.admin-ozet-liste__fazla:hover .admin-ozet-liste__pop,
.admin-ozet-liste__fazla:focus .admin-ozet-liste__pop,
.admin-ozet-liste__fazla:focus-within .admin-ozet-liste__pop {
    display: flex;
}

.admin-ozet-liste__pop-oge {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 7px;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
}

.admin-ozet-liste__pop-oge:hover {
    background: var(--color-bg);
}

.admin-ozet-liste__pop-alt {
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

/* ===== Çalışan profil fotoğrafı (bkz. Views/Shared/_CalisanAvatar.cshtml) =====
   Panelde çalışan nerede görünüyorsa aynı rozet: liste satırı, detay başlığı, alt üye listesi.
   Fotoğraf yoksa adın baş harfi — boş bir çerçeve yerine okunabilir bir işaret. */
.calisan-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0, 86, 179, 0.1);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.calisan-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.calisan-avatar--kucuk {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
}

.calisan-avatar--buyuk {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
}

/* Detay başlığında fotoğraf + künye; toolbar space-between kullandığı için tek grup olmalı. */
.admin-toolbar__kimlik {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* Kabul / red iş sayısı tek hücrede (bkz. Views/Calisanlar/_CalisanSonuclari.cshtml) */
.admin-is-sayaci {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.admin-is-sayaci__ayrac {
    color: var(--color-border);
    font-size: 0.8rem;
}

/* İş listesinde ilçenin altındaki uzaklık satırı (bkz. Views/Hizmet/_IslerSonuclari.cshtml).
   Ayrı sütun yerine ilçenin altına konuyor: ikisi aynı soruya cevap veriyor ("nerede") ve
   dar ekranda tabloya bir sütun daha eklemek satırı taşırıyordu. */
.is-mesafe {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* Genel Puan (bkz. Services/AtamaSkorServisi.cs). Rozet gibi renklenmiyor: 0–100 arası sürekli
   bir ölçü, eşik değil — renk kodlamak yöneticiye olmayan bir sınır varmış gibi okutur.
   Tabular sayı, sütunun alt alta hizalı okunması için. */
.admin-genel-puan {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text);
}

.admin-genel-puan--buyuk {
    font-size: 2rem;
    line-height: 1.1;
    margin: 0 0 14px;
}

.admin-genel-puan--buyuk span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* Fotoğraf + ad, tek bir kimlik olarak okunur.
   inline-flex DEĞİL: satır-içi kutu taban çizgisine oturur ve 32px'lik avatar satır kutusunu
   büyüttüğü için ad, komşu hücrelerin metninden aşağıda kalıyordu. Blok kutu satır kutusundan
   kurtulur, hücrenin kendi dikey ortalaması devreye girer. */
.calisan-kimlik {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.calisan-kimlik.is-pasif {
    opacity: 0.55;
}

a.calisan-kimlik:hover span {
    color: var(--color-primary);
}

.calisan-kimlik-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===== Belgeler bölümü (bkz. Views/Calisanlar/_BelgelerBolumu.cshtml) =====
   Kayıtlar dört satırlık kartlardan TEK satıra indirildi: bir belgede gerçekten okunan şey
   türü, dosyası ve tarihi. "Geçerli" rozeti her satırdan kaldırıldı — sessizlik "sorun yok"
   demek; rozet yalnızca süresi dolan/dolacak belgelerde çıkar. */

/* Uzantı künyesi. Genel bir ataç ikonu yerine uzantının kendisi yazılıyor: hangisinin
   tarayıcı çıktısı (PDF), hangisinin telefon fotoğrafı (JPG) olduğu tek bakışta ayrılsın diye. */
.dosya-uzanti,
.belge-uzanti {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    padding: 5px 0;
    border-radius: var(--radius-sm);
    background: rgba(0, 86, 179, 0.08);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.belge-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border-light, #e8edf4);
}

.belge-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--color-border-light, #e8edf4);
}

/* Onay bekleyen belgenin inceleme şeridi (bkz. Views/Calisanlar/_BelgelerBolumu.cshtml) —
   satırın altına tam genişlik iner: rozet + red nedeni + iki karar butonu tek satıra sıkışmıyor. */
.belge-onay {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 0 2px 44px;
}

.belge-onay__reddet {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    gap: 10px;
}

.belge-onay__reddet input {
    flex: 0 1 260px;
    min-width: 140px;
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    font-size: 0.84rem;
}

.belge-onay__reddet input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.belge-satir:hover {
    background: var(--color-bg);
}

.belge-satir.is-sorunlu .dosya-uzanti,
.belge-uzanti {
    background: #fbeaea;
    color: #c0392b;
}

/* Satırın tamamı belgeyi açar; ad ve dosya adı tek bir bağlantının iki satırıdır. */
.belge-satir__ad {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
}

.belge-satir__tur {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-text);
}

.belge-satir__ad:hover .belge-satir__tur {
    color: var(--color-primary);
}

.belge-satir__zorunlu {
    padding: 1px 7px;
    border-radius: 9px;
    background: rgba(0, 86, 179, 0.1);
    color: var(--color-primary);
    font-size: 0.66rem;
    font-weight: 500;
}

.belge-satir__dosya {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.belge-satir__tarih {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-lighter);
}

/* Silme satırın asıl eylemi değil, ama gizlenmiyor: hover'da beliren bir buton dokunmatikte
   keşfedilemez olurdu. Hep görünür, sessiz bir gri; dokununca kırmızıya döner. */
.belge-satir__sil-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-lighter);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.belge-satir__sil-btn svg {
    width: 15px;
    height: 15px;
}

.belge-satir__sil-btn:hover,
.belge-satir__sil-btn:focus-visible {
    background: #fbeaea;
    color: #c0392b;
}

/* ===== Dosya seçici (bkz. Views/Shared/_DosyaSecici.cshtml) =====
   Panelin her yerinde kullanılan tek dosya alanı: belge yükleme, hesap açma formları, eğitim
   içeriği. Dosya seçilene kadar kesikli bir davet; seçilince düz kenarlığa döner ve dosyanın
   künyesini gösterir.

   DİKKAT: iki durumun görünürlüğü yalnızca .is-dolu üzerinden yönetilir. hidden özniteliği
   BURADA ÇALIŞMAZ — bu span'lerde display: flex tanımlı ve yazar kuralı tarayıcının
   [hidden] { display: none } kuralını ezer, iki durum birden görünür. */
.dosya-secici {
    position: relative;
    display: block;
    cursor: pointer;
}

.dosya-secici__etiket {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-label);
}

/* Gerçek input görünmez ama etiketin içinde kaldığı için klavye ve ekran okuyucu davranışı
   tarayıcının kendi dosya seçicisiyle aynı kalır — display:none bunu bozardı. */
.dosya-secici input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dosya-secici__kutu {
    display: block;
    padding: 16px 18px;
    border: 1.5px dashed var(--color-border, #ccc);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dosya-secici:hover .dosya-secici__kutu,
.dosya-secici:focus-within .dosya-secici__kutu {
    border-color: var(--color-primary);
    background: rgba(0, 86, 179, 0.03);
}

.dosya-secici.is-uzerinde .dosya-secici__kutu {
    border-color: var(--color-primary);
    background: rgba(0, 86, 179, 0.07);
}

.dosya-secici.is-dolu .dosya-secici__kutu {
    border-style: solid;
    border-color: var(--color-border-light, #e8edf4);
    background: var(--color-white);
}

/* Klavye odağı görünür olsun: gerçek input gizli olduğu için focus halkasını kutu taşır. */
.dosya-secici input[type="file"]:focus-visible+.dosya-secici__kutu {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.dosya-secici__bos,
.dosya-secici__dolu {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dosya-secici__dolu,
.dosya-secici.is-dolu .dosya-secici__bos {
    display: none;
}

.dosya-secici.is-dolu .dosya-secici__dolu {
    display: flex;
}

.dosya-secici__ikon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

.dosya-secici__metin {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.dosya-secici__metin strong {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dosya-secici__metin small {
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.dosya-secici__degistir {
    flex-shrink: 0;
    padding: 5px 12px;
    border: 1px solid var(--color-border, #ccc);
    border-radius: var(--radius-base);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.dosya-secici:hover .dosya-secici__degistir {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Dar yerlerde (alt üye kartı, hesap açma ızgarası) künye tek satıra sığmaz. */
@media (max-width: 480px) {
    .dosya-secici__degistir {
        display: none;
    }
}

/* --- Belge yükleme formu: seçici + tür/tarih satırı --- */
.belge-yukle {
    margin-bottom: 20px;
}

/* Tür + tarih + buton tek satırda; dar kolonda (alt üye kartı) alt alta düşer. */
.belge-yukle__satir {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-top: 14px;
}

.belge-yukle__satir .admin-field {
    flex: 1 1 170px;
    margin-bottom: 0;
}

.belge-yukle__satir button {
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {

    .dosya-secici__kutu,
    .belge-satir__sil-btn {
        transition: none;
    }
}

/* Rozet özet satırının yanındaki ikincil "Yönet" bağlantısı. */
.admin-ozet-liste__yonet {
    margin-left: 8px;
    font-size: 0.78rem;
    color: var(--color-text-lighter);
    text-decoration: none;
}

.admin-ozet-liste__yonet:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Bilgi listesi satırının içine gömülü mini form (Randevu / Görevli Çalışan) — kontroller satır
   yüksekliğini bozmayacak kadar sıkıdır, liste görünümü korunur. */
.admin-liste-satir-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.admin-liste-satir-form input[type="date"],
.admin-liste-satir-form select {
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--color-text);
    background: var(--color-white);
}

.admin-liste-satir-form input[type="date"]:focus,
.admin-liste-satir-form select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Toolbar'daki müşteri adı artık müşteri kaydına gider; yanındaki mini link (Bağlantıyı Kaldır /
   Üyeye Bağla) ikincil bir aksiyondur, buton ağırlığı taşımaz. */
.admin-toolbar__musteri-link {
    color: inherit;
    text-decoration: none;
}

.admin-toolbar__musteri-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.admin-toolbar__mini-form {
    display: inline;
}

.admin-mini-link {
    border: none;
    background: none;
    padding: 0;
    margin-left: 10px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-lighter);
    text-decoration: underline;
    cursor: pointer;
    vertical-align: middle;
}

.admin-mini-link:hover {
    color: var(--color-primary);
}

/* Hizmet kartındaki Opsiyonel Hizmetler listesi — her kayıt kendi bloğu: üstte kalemler/tarih +
   tutar, altta durum rozeti + (varsa) aksiyonlar. İki satıra bölünmüş olması, tek satırda beşe
   yakın öğeyi (tutar/rozet/3 aksiyon) sıkıştırıp dar ekranda taşmaya yol açan eski `white-space:
   nowrap` tasarımının yerini alır — artık her satır kendi içinde serbestçe sarabiliyor. */
.admin-ek-hizmet-listesi {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-ek-hizmet-listesi li {
    background: var(--color-bg);
    border-radius: var(--radius-base);
    padding: 12px 14px;
}

.admin-ek-hizmet-listesi__ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-ek-hizmet-listesi__ad {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 0.88rem;
    color: var(--color-text);
    overflow-wrap: break-word;
}

.admin-ek-hizmet-listesi__tarih {
    font-size: 0.72rem;
    color: var(--color-text-lighter);
}

.admin-ek-hizmet-listesi__tutar {
    flex-shrink: 0;
    font-size: 0.98rem;
    color: var(--color-heading-dark);
}

.admin-ek-hizmet-listesi__alt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-light);
}

.admin-ek-hizmet-listesi__aksiyonlar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* `display: contents`, iptal formunun kendisini kutu modelinden çıkarır — içindeki buton doğrudan
   .aksiyonlar'ın flex/gap düzenine katılır, forma özel bir sarmalayıcı stili gerekmez. */
.admin-ek-hizmet-listesi__aksiyonlar form {
    display: contents;
}

.admin-ek-hizmet-listesi__aksiyonlar a {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.admin-ek-hizmet-listesi__aksiyonlar a:hover {
    text-decoration: underline;
}

.admin-ek-hizmet-listesi__aksiyon-btn {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    border-radius: var(--radius-base);
    padding: 4px 10px;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
}

.admin-ek-hizmet-listesi__aksiyon-btn:hover {
    background: var(--color-border-light);
    color: var(--color-text);
}

.admin-ek-hizmet-listesi__aksiyon-btn--tehlike {
    border-color: #f3c6c2;
    color: #c0392b;
}

.admin-ek-hizmet-listesi__aksiyon-btn--tehlike:hover {
    background: #fdecea;
}

/* Talep Detay'ın tepesindeki yaşam döngüsü şeridi (bkz. Views/Admin/Detay.cshtml) — çalışan
   panelindeki .is-kart__adimlar ile aynı görsel dil, ama her adımın altında gerçek verisi
   (tarih / çalışan adı / işin canlı aşaması) taşıyan bir meta satırı vardır. */
.talep-adimlar-kart {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
    padding: 20px 22px 16px;
}

.talep-adimlar-kart__sol {
    flex: 1 1 auto;
    min-width: 0;
}

/* Şeridin sağındaki elle iş-durumu düzeltme alanı — akışın yanında ama ondan ayrı dursun diye
   ince bir ayraçla ayrılır. */
.talep-adimlar-kart__sag {
    flex: 0 0 230px;
    border-left: 1px solid var(--color-border-light);
    padding-left: 20px;
    padding-bottom: 4px;
}

.talep-adimlar-kart__sag .admin-field label {
    font-size: 0.78rem;
}

@media (max-width: 900px) {
    .talep-adimlar-kart {
        flex-direction: column;
    }

    .talep-adimlar-kart__sag {
        flex-basis: auto;
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--color-border-light);
        padding-left: 0;
        padding-top: 16px;
    }
}

.talep-adimlar {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.talep-adimlar__adim {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
    text-align: center;
}

.talep-adimlar__adim:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 13px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.talep-adimlar__adim.is-tamam:not(:first-child)::before,
.talep-adimlar__adim.is-aktif:not(:first-child)::before,
.talep-adimlar__adim.is-uyari:not(:first-child)::before {
    background: var(--color-primary);
}

.talep-adimlar__nokta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    color: var(--color-text-lighter);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
}

.talep-adimlar__adim.is-tamam .talep-adimlar__nokta {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.talep-adimlar__adim.is-aktif .talep-adimlar__nokta {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 4px #eef6ff;
}

.talep-adimlar__adim.is-uyari .talep-adimlar__nokta {
    background: #fdecea;
    border-color: #c0392b;
    color: #c0392b;
}

.talep-adimlar__etiket {
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-text-lighter);
}

.talep-adimlar__adim.is-tamam .talep-adimlar__etiket,
.talep-adimlar__adim.is-aktif .talep-adimlar__etiket {
    color: var(--color-text);
}

.talep-adimlar__adim.is-uyari .talep-adimlar__etiket {
    color: #c0392b;
}

.talep-adimlar__meta {
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--color-text-muted);
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Atama adımındaki hizmet veren adı kişinin sayfasına gider. Şeritteki diğer meta metinleri
   (tarih, saat) tıklanamaz olduğu için tıklanabilir olan alt çizgiyle ayrışır — yalnızca
   renk kullanmak bu boyuttaki metinde yeterli işaret değil. */
a.talep-adimlar__meta--link {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a.talep-adimlar__meta--link:hover {
    color: var(--color-primary-dark);
}

/* Dar ekranda şerit dikey akar — noktalar solda, meta sağda. */
@media (max-width: 700px) {
    .talep-adimlar {
        flex-direction: column;
        gap: 14px;
    }

    .talep-adimlar__adim {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 10px;
    }

    .talep-adimlar__adim::before {
        display: none;
    }

    .talep-adimlar__etiket {
        margin-top: 5px;
    }

    .talep-adimlar__meta {
        margin-top: 5px;
        margin-left: auto;
        text-align: right;
    }
}

.is-zaman-cizelgesi {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow: auto;
}

.is-zaman-cizelgesi__adim {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 0 0 18px 2px;
}

.is-zaman-cizelgesi__adim:last-child {
    padding-bottom: 0;
}

.is-zaman-cizelgesi__adim:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: -2px;
    width: 2px;
    background: var(--color-border);
}

.is-zaman-cizelgesi__nokta {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--color-primary);
}

.is-zaman-cizelgesi__icerik {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.is-zaman-cizelgesi__etiket {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
}

.is-zaman-cizelgesi__tarih {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* /hizmet panelindeki her sayfa başlığının (admin-heading, bkz. AdminPageHeaderTagHelper) sağında
   görünen çalışan profil rozeti — tıklanınca çalışanın kendi bilgilerini düzenlediği Profil
   sayfasına gider. admin-heading__extra zaten admin-heading__row'un sağında oturduğu için (bkz.
   .admin-heading__row { justify-content: space-between }) ayrı bir sabit şerit gerekmiyor. */
.hizmet-profil-rozeti {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    background: var(--color-bg);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background var(--transition-base);
}

.hizmet-profil-rozeti:hover,
.hizmet-profil-rozeti.is-active {
    background: #eef6ff;
}

.hizmet-profil-rozeti__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.hizmet-profil-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    padding: 24px 28px;
    margin-bottom: 24px;
}

/* Kazançlarım sayfasının üst özeti (bkz. Views/Hizmet/Kazanc.cshtml) — Cüzdan'ın eski ayrı
   sayfasıyla birleştiği için burada hem büyük bakiye rakamı hem de Para Çek aksiyonu tek,
   sade bir panelde yan yana durur; ayrı kart/ızgara yığını yerine tek bakışta okunabilir bir
   özet hedeflenir. */
.hizmet-bakiye-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    padding: 28px 32px;
    margin-bottom: 24px;
}

.hizmet-bakiye-hero__ana {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.hizmet-bakiye-hero__etiket {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.hizmet-bakiye-hero__tutar {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-heading-dark);
    line-height: 1.1;
}

.hizmet-bakiye-hero__alt {
    font-size: 0.85rem;
    color: var(--color-text-lighter);
}

.hizmet-bakiye-hero__aksiyon {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.hizmet-bakiye-hero__aksiyon .admin-field {
    margin-bottom: 0;
}

.hizmet-bakiye-hero__aksiyon .admin-field input {
    width: 160px;
}

/* Güvence (bloke) doluluk çubuğu — çalışan panelindeki Kazançlarım ve admin panelindeki Çalışan
   Detay sayfalarında ortak kullanılır (bkz. Views/Hizmet/Kazanc.cshtml, Views/Calisanlar/Detay.cshtml). */
.bloke-bar-wrap__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.bloke-bar-wrap__head span {
    color: var(--color-text-muted);
}

.bloke-bar-wrap__head strong {
    color: var(--color-heading-dark);
    font-variant-numeric: tabular-nums;
}

.bloke-bar {
    height: 8px;
    background: var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.bloke-bar__dolu {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-lg);
    transition: width var(--transition-base);
}

.bloke-bar__dolu--tam {
    background: #1e8a4c;
}

.hizmet-profil-hero__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.hizmet-profil-hero__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 700;
    overflow: hidden;
}

.hizmet-profil-hero__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hizmet-profil-hero__foto-form {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hizmet-profil-hero__foto-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-white);
    box-shadow: var(--shadow-btn);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.hizmet-profil-hero__foto-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.hizmet-profil-hero__foto-btn svg {
    width: 16px;
    height: 16px;
}

.hizmet-profil-hero__info h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-heading-dark);
    margin-bottom: 2px;
}

.hizmet-profil-hero__info p {
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

@media (max-width: 480px) {
    .hizmet-profil-hero {
        flex-direction: column;
        text-align: center;
    }

    .hizmet-profil-hero__foto-form {
        right: calc(50% - 46px);
    }
}

.hizmet-profil-rozeti__avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.hizmet-profil-rozeti__isim {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-heading-dark);
}

/* Çalışan panelindeki Panel (Dashboard) sayfasının seviye başlığı — .admin-dashboard-hero'yu
   temel alır, üstüne çalışanın tamamladığı iş sayısını bir sonraki seviyeye olan ilerlemeyle
   birlikte gösteren bir madalyon ekler (bkz. Views/Hizmet/Dashboard.cshtml, CalisanSeviyesi). */
.hizmet-seviye-hero__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.hizmet-seviye-madalyon {
    position: relative;
    flex-shrink: 0;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: conic-gradient(var(--color-white) calc(var(--ilerleme, 0) * 1%), rgba(255, 255, 255, 0.22) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.hizmet-seviye-madalyon::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--color-primary-dark);
}

.hizmet-seviye-madalyon__sayi,
.hizmet-seviye-madalyon__etiket {
    position: relative;
    z-index: 1;
    color: var(--color-white);
    text-align: center;
    line-height: 1.15;
}

.hizmet-seviye-madalyon__sayi {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
}

.hizmet-seviye-madalyon__etiket {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.hizmet-rozet-liste {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.hizmet-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-white);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: default;
}

.hizmet-rozet svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.hizmet-rozet-bos {
    position: relative;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
}

.hizmet-rozet-link {
    position: relative;
    display: inline-block;
    margin-top: 12px;
    color: var(--color-white);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 560px) {
    .hizmet-seviye-hero__inner {
        gap: 18px;
    }

    .hizmet-seviye-madalyon {
        width: 76px;
        height: 76px;
    }

    .hizmet-seviye-madalyon__sayi {
        font-size: 1.25rem;
    }
}

/* Çalışanın /hizmet/rozetler sayfasındaki (ve admin Çalışan Detay'daki, bkz.
   Views/Calisanlar/Detay.cshtml) tüm rozet kataloğu — kazanılanlar renkli/opak, kilitli
   olanlar soluk gösterilir; .hizmet-rozet (hero'daki küçük pill) ile karıştırılmamalı, bu
   tam bir kart. */
.hizmet-rozet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.hizmet-rozet-kart {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 24px 16px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid #eee;
    opacity: 0.55;
    transition: opacity var(--transition-base), box-shadow var(--transition-base);
}

.hizmet-rozet-kart.is-kazanildi {
    opacity: 1;
    border: 1px solid #eee;
}

.hizmet-rozet-kart__ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text-lighter);
    margin-bottom: 4px;
}

.hizmet-rozet-kart.is-kazanildi .hizmet-rozet-kart__ikon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
}

.hizmet-rozet-kart__ikon svg {
    width: 24px;
    height: 24px;
}

.hizmet-rozet-kart__ad {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--color-heading-dark);
}

.hizmet-rozet-kart__aciklama {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.hizmet-rozet-kart__durum {
    margin-top: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.hizmet-rozet-kart.is-kazanildi .hizmet-rozet-kart__durum {
    background: #e6f7ee;
    color: #1e8a4c;
}

/* ===== Eğitim Merkezi (çalışan paneli) =====
   Yapı üç seviyeli: kurs → bölüm → ders (bkz. Data/Entities/EgitimKursu.cs).

   Buradaki tek "imza" öğe DERS RAYI: müfredatın solundan inen kesintisiz dikey hat. Arkanda
   kalan dersin parçası dolu, bulunduğun ders halka, önündekiler ince. Bir temizlik eğitimi
   sırayla yürünen bir işlem olduğu için sıra gerçek bilgi taşıyor — ray onu çiziyor.

   Bu yüzden kurs izleme ekranında AYRICA bir yüzde çubuğu yok: ray zaten ilerlemeyi söylüyor,
   ikisi bir arada olsaydı biri süs olurdu. Yüzde çubuğu yalnızca kurs listesinde, yani rayın
   olmadığı yerde duruyor. */

/* --- Kurs listesi --- */
.kurs-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: 18px;
}

.kurs-kart {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.16s ease;
}

.kurs-kart:hover {
    border-color: var(--color-primary);
}

.kurs-kart:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.kurs-kart__kapak {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-light);
}

/* Zorunluluk kapağın köşesinde durur (bkz. Views/Hizmet/Egitim.cshtml) — başlığın yanındaki
   rozet uzun adlarla satır kırıyordu; burada görselin üstünde her kartta aynı noktada. Koyu
   amber, engel kartının uyarı diliyle aynı aile. */
.kurs-kart__zorunlu {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    background: #b9770e;
    color: var(--color-white);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.kurs-kart__kapak img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kapak görseli olmayan kurs için baş harfler — ayrı bir varsayılan resim dosyası tutmadan
   kartları birbirinden ayırır. */
.kurs-kart__harfler {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-primary);
    opacity: 0.28;
}

.kurs-kart__govde {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.kurs-kart__baslik {
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-heading-dark);
}

.kurs-kart__aciklama {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.kurs-kart__meta {
    font-size: 0.8rem;
    color: var(--color-text-lighter);
}

.kurs-ilerleme {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kurs-ilerleme__yol {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border-light);
    overflow: hidden;
}

.kurs-ilerleme__dolu {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--color-primary);
}

.kurs-ilerleme__metin {
    flex-shrink: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* Bitmiş kurs yeşile döner — panelde yeşil "durumu iyi" demek (bkz. .admin-badge--ok), mavi ise
   etkileşim rengi. Biten kurs artık bir eylem beklemiyor, o yüzden maviden çıkıyor. */
.kurs-kart--bitti .kurs-ilerleme__dolu {
    background: #1e8a4c;
}

.kurs-kart--bitti .kurs-ilerleme__metin {
    color: #1e8a4c;
}

.kurs-kart__aksiyon {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-primary);
}

.kurs-kart__aksiyon svg {
    width: 15px;
    height: 15px;
    transition: transform 0.16s ease;
}

.kurs-kart:hover .kurs-kart__aksiyon svg {
    transform: translateX(3px);
}

/* --- Kurs izleme ekranı --- */
.kurs-izleme {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

/* Ders kartı: oynatıcı, başlık ve aksiyonlar tek bir yüzeyde. Müfredat rayı da kart olduğu için
   iki sütun aynı malzemeden geliyor — önceki halde metin doğrudan gri zemine oturuyordu ve
   sayfa iki ayrı sistemden birleştirilmiş gibi duruyordu. */
.ders-karti {
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.ders-karti__govde {
    padding: 22px 24px;
}

/* Oynatıcı kartın üst kenarına dayanır: kendi kenarlığı ve yarıçapı yok, onları kart veriyor. */
.kurs-oynatici {
    background: #111;
    border-bottom: 1px solid var(--color-border-light);
}

.kurs-oynatici video,
.kurs-oynatici iframe,
.kurs-oynatici embed {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Ekran yüksekliğine göre sınır: 16/9'luk bir video geniş ekranda 450 pikseli aşıp başlığı
       ve aksiyonları katlamanın altına itiyordu. Sınıra takılınca video kendi içinde
       kutulanıyor, zaten siyah zeminde duruyor. */
    max-height: 54vh;
    border: 0;
}

/* PDF 16/9'a sığmıyor — sayfa oranına yakın, daha uzun bir kutu okunur kılıyor. */
.kurs-oynatici--pdf embed {
    aspect-ratio: 3 / 4;
    max-height: 72vh;
}

/* Makale dersleri uzun metin — satır uzunluğu sınırlanmazsa ana sütun 90 karakteri aşıyor ve
   göz satır başını kaybediyor. Kart tam genişlikte kalır, sınır metne konur. */
.kurs-oynatici__makale {
    max-width: 68ch;
    margin-top: 18px;
    line-height: 1.75;
    color: var(--color-text);
}

.kurs-oynatici__makale h2,
.kurs-oynatici__makale h3 {
    margin: 26px 0 10px;
    font-family: var(--font-heading);
    color: var(--color-heading-dark);
}

.kurs-oynatici__makale h2:first-child,
.kurs-oynatici__makale h3:first-child {
    margin-top: 0;
}

.kurs-oynatici__makale p {
    margin: 0 0 16px;
}

.kurs-oynatici__makale ul,
.kurs-oynatici__makale ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.kurs-oynatici__makale li {
    margin-bottom: 7px;
}

.kurs-oynatici__makale li:last-child {
    margin-bottom: 0;
}

/* Alıntı bloğu, derslerde çoğunlukla "müşteriye şunu yaz" örneği taşıyor. Gövde metninden
   ayrılmazsa örnek mi talimat mı olduğu karışıyor. */
.kurs-oynatici__makale blockquote {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
    background: var(--color-bg);
    color: var(--color-text-light);
}

.kurs-oynatici__makale blockquote p:last-child {
    margin-bottom: 0;
}

.kurs-oynatici__makale img {
    max-width: 100%;
    border-radius: var(--radius-base);
}

.ders-basligi__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 0.78rem;
}

.ders-basligi__sira {
    font-weight: 700;
    color: var(--color-primary);
}

.ders-basligi__tur,
.ders-basligi__sure {
    color: var(--color-text-lighter);
}

/* Ayraç işaretlemede değil burada: parçalar koşullu çizildiği için markup'a yazılan bir "·"
   tek başına kalan bir ayraca dönüşebilirdi. */
.ders-basligi__tur::before,
.ders-basligi__sure::before {
    content: "·";
    margin-right: 10px;
    color: var(--color-border);
}

.ders-basligi__ad {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--color-heading-dark);
}

.ders-basligi__aciklama {
    margin: 0;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.ders-basligi__indir {
    margin: 16px 0 0;
}

.ders-basligi__indir a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.ders-basligi__indir a:hover {
    text-decoration: underline;
}

.ders-basligi__indir svg {
    width: 15px;
    height: 15px;
}

/* Ayraç kartın kenarlarına kadar uzanır (negatif kenar boşluğu + eşit dolgu): gövde dolgusunda
   kesilen bir çizgi, kartı bölmek yerine ortada asılı kalıyordu. */
.ders-aksiyon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 22px -24px 0;
    padding: 18px 24px 0;
    border-top: 1px solid var(--color-border-light);
}

.ders-tamamla {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ders-tamamla__isaretle svg {
    width: 15px;
    height: 15px;
}

/* İki durum aynı formda duruyor, görünürlüğü .is-bitti belirliyor. display:flex ile
   gizlemek yerine display:none — [hidden] özniteliği yazar kuralları tarafından ezilebiliyor
   (bkz. .belge-birak__secili'de yaşanan aynı sorun). */
.ders-tamamla__bitti {
    display: none;
    align-items: center;
    gap: 12px;
}

.ders-tamamla.is-bitti .ders-tamamla__isaretle {
    display: none;
}

.ders-tamamla.is-bitti .ders-tamamla__bitti {
    display: flex;
}

.ders-tamamla__rozet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: #e6f7ee;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e8a4c;
}

.ders-tamamla__rozet svg {
    width: 14px;
    height: 14px;
}

.ders-tamamla__geri {
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.82rem;
    color: var(--color-text-lighter);
    text-decoration: underline;
    cursor: pointer;
}

.ders-tamamla__geri:hover {
    color: var(--color-text);
}

.ders-gezinme {
    display: flex;
    gap: 8px;
}

.ders-gezinme svg {
    width: 15px;
    height: 15px;
}

/* --- Ders rayı --- */
.ders-rayi {
    position: sticky;
    top: 132px;
    max-height: calc(100vh - 152px);
    overflow-y: auto;
    padding: 18px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

/* Kart başlığı, panelin .admin-card__head düzenini izler: sol etiket, sağ sayaç, altında ayraç.
   Negatif kenar boşlukları başlığı kartın kenarlarına dayar. */
.ders-rayi__ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: -18px -18px 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border-light);
}

.ders-rayi__ust h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--color-heading-dark);
}

.ders-rayi__sayac {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.ders-rayi__sayac strong {
    font-size: 0.95rem;
    color: var(--color-primary);
}

.ders-rayi__sayac.is-bitti strong {
    color: #1e8a4c;
}

.ders-rayi__bolum + .ders-rayi__bolum {
    margin-top: 20px;
}

/* Bölüm başlığı bilinçli olarak büyük harfe çevrilmiyor: text-transform, Türkçe "i"yi
   İ yerine I yapabiliyor. Ayrımı harf aralığı ve renk kuruyor. */
.ders-rayi__bolum-baslik {
    margin: 0 0 6px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-lighter);
}

/* Satırlar kartın iç dolgusunun dışına taşar ki seçili ders, kenardan kenara bir liste satırı
   gibi vurgulansın — ortada yüzen bir etiket gibi değil. Bölüm başlıkları içeride kalır, bu da
   başlık/satır hiyerarşisini kurar. */
.ders-rayi__dersler {
    margin: 0 -10px;
    padding: 0;
    list-style: none;
}

.ders-rayi__ders {
    position: relative;
}

/* Omurga: her ders kendi dikey parçasını çizer, parçalar birleşince kesintisiz hat olur.
   Tek bir sürekli çizgi yerine parçalar, çünkü dolum durumu ders ders değişiyor. */
.ders-rayi__ders::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* İşaretin merkezi: satırın 10px dolgusu + 20px işaretin yarısı. */
    left: 20px;
    width: 2px;
    transform: translateX(-50%);
    background: var(--color-border-light);
    transition: background 0.32s ease;
}

/* Hat ilk ve son işaretin merkezinde başlayıp bitiyor, listenin dışına taşmıyor. */
.ders-rayi__ders:first-child::before {
    top: 17px;
}

.ders-rayi__ders:last-child::before {
    bottom: calc(100% - 17px);
}

.ders-rayi__ders:first-child:last-child::before {
    display: none;
}

.ders-rayi__ders.is-bitti::before {
    background: var(--color-primary);
}

.ders-rayi__ders a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-base);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    text-decoration: none;
}

.ders-rayi__ders a:hover {
    color: var(--color-text);
}

.ders-rayi__ders a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Bulunduğun yer satırın kendisiyle söyleniyor; işaret yalnızca "bitti mi" sorusunu yanıtlıyor.
   İkisini tek bir daireye yüklemek, bitmiş bir derse geri dönüldüğünde çakışıyordu. */
.ders-rayi__ders.is-aktif a {
    background: rgba(0, 86, 179, 0.07);
    font-weight: 600;
    color: var(--color-text);
}

.ders-rayi__isaret {
    position: relative;
    z-index: 1;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-white);
    transition: background 0.2s ease, border-color 0.2s ease, border-width 0.2s ease;
}

.ders-rayi__isaret svg {
    width: 11px;
    height: 11px;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ders-rayi__ders.is-bitti .ders-rayi__isaret {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.ders-rayi__ders.is-bitti .ders-rayi__isaret svg {
    opacity: 1;
    transform: scale(1);
}

/* Henüz bitmemiş olan bulunduğun ders: içi boş kalın halka. Dolu daireden (bitti) ve ince
   daireden (sırada) tek bakışta ayrılıyor. */
.ders-rayi__ders.is-aktif:not(.is-bitti) .ders-rayi__isaret {
    border-width: 6px;
    border-color: var(--color-primary);
}

.ders-rayi__ad {
    flex: 1;
}

.ders-rayi__sure {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-lighter);
}

@media (max-width: 900px) {

    .kurs-izleme {
        grid-template-columns: 1fr;
    }

    .ders-rayi {
        position: static;
        max-height: none;
    }
}

@media (max-width: 560px) {

    .ders-karti__govde {
        padding: 18px;
    }

    /* Negatif kenar boşluğu gövde dolgusuyla eşleşmek zorunda, yoksa ayraç kartın dışına taşar. */
    .ders-aksiyon {
        align-items: stretch;
        flex-direction: column;
        margin: 20px -18px 0;
        padding: 16px 18px 0;
    }

    .ders-gezinme {
        justify-content: space-between;
    }

    .ders-basligi__ad {
        font-size: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .kurs-kart__aksiyon svg,
    .ders-rayi__ders::before,
    .ders-rayi__isaret,
    .ders-rayi__isaret svg {
        transition: none;
    }
}

/* ===== Eğitim Merkezi — admin müfredat düzenleyici =====
   Kursun bölümleri ve dersleri (bkz. Views/EgitimYonetimi/Kurs.cshtml). Çalışan tarafındaki
   rayın aksine burada sıralama DEĞİŞTİRİLEBİLİR olduğu için satırlar hat üzerinde değil,
   kendi kutularında duruyor — taşıma okları ve silme düğmeleri hattı okunmaz hale getirirdi. */
.mufredat-bolum {
    margin-bottom: 16px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    overflow: hidden;
}

.mufredat-bolum__ust {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-light);
}

.mufredat-bolum__baslik {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    color: var(--color-heading-dark);
}

.mufredat-bolum__sayi {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color-text-lighter);
}

.mufredat-bolum__araclar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
}

.mufredat-ders {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}

.mufredat-ders + .mufredat-ders {
    border-top: 1px solid var(--color-border-light);
}

.mufredat-ders__no {
    flex-shrink: 0;
    width: 22px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-lighter);
}

.mufredat-ders__ad {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--color-text);
}

.mufredat-ders__ad a {
    color: inherit;
    text-decoration: none;
}

.mufredat-ders__ad a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.mufredat-ders__sure {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-lighter);
}

.mufredat-bos {
    padding: 16px;
    font-size: 0.86rem;
    color: var(--color-text-lighter);
}

.mufredat-bolum__alt {
    padding: 10px 16px;
    border-top: 1px solid var(--color-border-light);
}

/* Sıra taşıma okları — ilk/son öğede devre dışı kalır, kaybolmaz: kaybolan düğme satırın
   hizasını kaydırıyordu. */
.mufredat-tasi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
    background: var(--color-white);
    color: var(--color-text-muted);
    cursor: pointer;
}

.mufredat-tasi:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.mufredat-tasi:disabled {
    opacity: 0.35;
    cursor: default;
}

.mufredat-tasi svg {
    width: 14px;
    height: 14px;
}

/* ===== Özel açılır liste (bkz. wwwroot/js/guzel-select.js) =====
   Native select DOM'da ve odaklanabilir kalır (form + klavye ondan), görünen kısım bu yüzdür.
   Yüz select'in kendi kutusuna oturur (inset:0) — böylece bağlamların select'e verdiği
   genişlik/yükseklik neyse yüz de o olur, her bağlam için ayrı ölçü yazılmaz. */
.gsel {
    position: relative;
    display: inline-grid;
}

.gsel select {
    opacity: 0;
    /* Grid'in tek asıl hücresi: sarmal, select ne kadarsa o kadar yer kaplar. width:100'ün
       görevi ters yönde: .admin-field gibi esneyen kapsayıcılarda sarmal tam genişliğe
       uzadığında select (ve dolayısıyla yüz) onu doldursun. */
    grid-area: 1 / 1;
    width: 100%;
}

.gsel__yuz {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 12px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-base);
    pointer-events: none;
    overflow: hidden;
}

.gsel:hover .gsel__yuz {
    border-color: var(--color-primary);
}

.gsel:focus-within .gsel__yuz {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.gsel__yuz-metin {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    color: var(--color-text);
    text-align: left;
}

.gsel__yuz-ok {
    display: flex;
    flex-shrink: 0;
    color: var(--color-text-lighter);
    transition: transform 0.16s ease;
}

.gsel__yuz-ok svg {
    width: 15px;
    height: 15px;
}

.gsel.is-acik .gsel__yuz-ok {
    transform: rotate(180deg);
}

/* Panel gölgesiz ayrışmak zorunda (proje kuralı): belirgin kenarlık + yüzden kalın ayrım. */
.gsel__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.gsel__panel--yukari {
    top: auto;
    bottom: calc(100% + 4px);
}

.gsel__secenek {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: 0;
    border-radius: var(--radius-base);
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}

.gsel__secenek:hover:not(:disabled) {
    background: var(--color-bg);
}

.gsel__secenek:disabled {
    color: var(--color-text-lighter);
    cursor: default;
}

.gsel__secenek.is-secili {
    background: rgba(0, 86, 179, 0.08);
    font-weight: 600;
    color: var(--color-primary);
}

.gsel__secenek-metin {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsel__secenek-ok {
    display: none;
    flex-shrink: 0;
}

.gsel__secenek.is-secili .gsel__secenek-ok {
    display: flex;
}

.gsel__secenek-ok svg {
    width: 14px;
    height: 14px;
}

@media (prefers-reduced-motion: reduce) {

    .gsel__yuz-ok {
        transition: none;
    }
}

/* ===== İş almayı engelleyen durumlar (bkz. Views/Hizmet/Dashboard.cshtml) =====
   İş alamayan hizmet verende Profil Seviyeniz kartının YERİNE çizilir — övgü yerine yapılacaklar.
   Panelin tek "uyarı kimlikli" kartı: amber başlık bandı ve renkli kenarlık, nötr beyaz
   kartların arasında ilk bakışta ayrışır (gölge yok — derinlik dolgu ve kenarlıkla).
   Her satır tek bir engel: solda türünü söyleyen işaret (eksik/bekliyor/kurs), sağda o engelin
   kendi aksiyonu. "Onay bekliyor" satırının aksiyonu bilinçli olarak yok: kişiden bir şey
   gerekmiyor, sahte bir buton koşturmak yanlış yönlendirme olurdu. */
.engel-karti {
    margin-bottom: 24px;
    border-color: #f0d49a;
}

/* Bant, kartın kenarlarına dayanır (negatif margin = kart dolgusu). */
.engel-karti__bant {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: -24px -28px 6px;
    padding: 18px 28px;
    background: #fdf6e7;
    border-bottom: 1px solid #f0d49a;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.engel-karti__ikon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #b9770e;
    color: var(--color-white);
    animation: engel-dikkat 0.4s ease-out;
}

.engel-karti__ikon svg {
    width: 22px;
    height: 22px;
}

/* Tek seferlik, kısa bir "buraya bak" hareketi — sürekli yanıp sönen bir şey panelde
   çalışılamaz hale gelirdi. */
@keyframes engel-dikkat {
    from {
        transform: scale(0.6);
    }
}

.engel-karti__baslik {
    flex: 1;
    min-width: 0;
}

.engel-karti__baslik h2 {
    margin: 0 0 3px;
    font-family: var(--font-heading);
    font-size: 1.08rem;
    color: #7d5104;
}

.engel-karti__baslik p {
    margin: 0;
    font-size: 0.86rem;
    color: #9c6b10;
}

.engel-karti__sayac {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #b9770e;
}

@media (max-width: 560px) {

    .engel-karti__bant {
        gap: 12px;
        padding: 14px 20px;
    }

    .engel-karti__sayac {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .engel-karti__ikon {
        animation: none;
    }
}

.engel-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.engel-liste__satir {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

.engel-liste__satir + .engel-liste__satir {
    border-top: 1px solid var(--color-border-light);
}

.engel-liste__isaret {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.engel-liste__isaret svg {
    width: 16px;
    height: 16px;
}

.engel-liste__isaret--eksik {
    background: #fdecea;
    color: #c0392b;
}

.engel-liste__isaret--bekliyor {
    background: rgba(0, 86, 179, 0.1);
    color: var(--color-primary);
}

.engel-liste__isaret--kurs {
    background: #fef5e7;
    color: #b9770e;
}

.engel-liste__metin {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text);
}

.engel-liste__not {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--color-text-lighter);
}

@media (max-width: 560px) {

    .engel-liste__satir {
        flex-wrap: wrap;
    }

    .engel-liste__metin {
        flex-basis: calc(100% - 48px);
    }

    .engel-liste__satir .admin-btn,
    .engel-liste__not {
        margin-left: 48px;
    }
}

/* Satış danışmanı profil fotoğrafı seçici (bkz. Views/Danisman/Profilim.cshtml). Ayrı bir
   "Dosya Seç" düğmesi yok: değiştirilecek şey avatarın kendisi olduğu için hedef de o. */
.danisman-avatar-secici {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.danisman-avatar-secici input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.danisman-avatar-secici__daire {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 112px;
    height: 112px;
    border: 2px solid var(--color-border-light);
    border-radius: 50%;
    background: var(--color-bg);
    transition: border-color 0.16s ease;
}

.danisman-avatar-secici:hover .danisman-avatar-secici__daire,
.danisman-avatar-secici input[type="file"]:focus-visible + .danisman-avatar-secici__daire {
    border-color: var(--color-primary);
}

.danisman-avatar-secici__daire img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.danisman-avatar-secici__bas {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-primary);
    opacity: 0.35;
}

.danisman-avatar-secici__metin {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* Satış danışmanı panelindeki kişisel kayıt bağlantısı (bkz. Views/Danisman/Index.cshtml).
   Salt okunur alan + kopyala düğmesi; alan geniş olmalı çünkü tam adres kesilirse danışman
   doğru linki kopyaladığından emin olamıyor. */
.danisman-link {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.danisman-link input {
    flex: 1;
    min-width: 240px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: var(--color-text-muted);
}

.danisman-link input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Bölüm ekleme / yeniden adlandırma satırı — ayrı bir sayfaya gitmek tek bir başlık alanı için
   fazlaydı. Panelde genel bir input kuralı YOK (biçim .admin-field input gibi kapsayıcı bazlı
   veriliyor), o yüzden buradaki alan kendi biçimini kendi taşımak zorunda; aksi halde
   biçimlendirilmiş butonun yanında çıplak bir tarayıcı kutusu kalıyor. */
.bolum-ekle {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.bolum-ekle input[type="text"] {
    flex: 1;
    min-width: 200px;
    max-width: 380px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-text);
}

.bolum-ekle input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.bolum-ekle input[type="text"]::placeholder {
    color: var(--color-text-lighter);
}

/* Çalışma Kriterlerim — harita bölge seçiminin tek yolu (bkz. wwwroot/js/il-haritasi.js). İlçe
   kutucukları eskiden haritanın sağında sabit bir sütun olarak hep yer kaplardı; artık yalnızca
   bir ile tıklandığında açılan bir pencerede (.admin-modal, bkz. _HizmetLayout.cshtml'deki
   acil-durum penceresiyle aynı bileşen) gösteriliyor — boşta hiçbir alan ayırmıyor, harita tüm
   genişliği kullanabiliyor. */
.hizmet-harita-duzen {
    margin-bottom: 20px;
    margin-top: 60px;
}

@media (max-width: 800px) {
    .hizmet-harita-duzen {
        margin-top: 40px;
    }
}

.hizmet-il-paneli__ilceler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hizmet-bolge-ozet {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid var(--color-border-light);
}

/* İl haritası — bkz. Views/Shared/_TurkiyeHaritasi.cshtml, wwwroot/js/il-haritasi.js */
.hizmet-bolge-harita {
    max-width: 1024px;
    margin: 0 auto;
    width: 100%;
}

.hizmet-bolge-harita svg {
    width: 100%;
    height: auto;
}

.hizmet-bolge-harita path {
    fill: var(--color-border);
    cursor: pointer;
    transition: fill var(--transition-base);
}

.hizmet-bolge-harita g:hover path {
    fill: var(--color-primary-dark);
}

.hizmet-bolge-harita g.is-secili path {
    fill: var(--color-primary);
}

.hizmet-bolge-harita g.is-secili:hover path {
    fill: var(--color-primary-dark);
}

.hizmet-bolge-harita #guney-kibris,
.hizmet-bolge-harita #kuzey-kibris {
    pointer-events: none;
    opacity: 0.3;
}


.hizmet-kriter-secenekler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.hizmet-kriter-secenek {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 0.86rem;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.hizmet-kriter-secenek:hover {
    border-color: var(--color-text-lighter);
}

.hizmet-kriter-secenek input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.hizmet-kriter-secenek:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.hizmet-kriter-secenek__ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text-lighter);
    transition: background var(--transition-base), color var(--transition-base);
}

.hizmet-kriter-secenek__ikon svg {
    width: 19px;
    height: 19px;
}

.hizmet-kriter-secenek:has(input:checked) {
    border-color: var(--color-primary);
    background: #eef6ff;
}

.hizmet-kriter-secenek:has(input:checked) .hizmet-kriter-secenek__ikon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
}

.hizmet-kriter-secenek__etiket {
    line-height: 1.3;
}

/* Çalışma Saatlerim — haftanın 7 günü, her biri kendi aç/kapa + saat aralığıyla (bkz.
   Data/Entities/CalisanCalismaSaati.cs). Takvim değil, tekrar eden haftalık bir örüntü olduğu
   için admin panelindeki aylık randevu takviminden (TakvimController) kasıtlı olarak farklı,
   daha sade bir liste düzeni kullanılıyor. */
.hizmet-saat-listesi {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hizmet-saat-satir {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
}

.hizmet-saat-satir__gun {
    flex: 0 0 92px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
}

.hizmet-saat-satir__saatler {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    transition: opacity var(--transition-base);
}

.hizmet-saat-satir:not(:has(.admin-kesifli-toggle input:checked)) .hizmet-saat-satir__saatler {
    opacity: 0.4;
    pointer-events: none;
}

.hizmet-saat-satir__saatler select {
    padding: 7px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: var(--color-text);
    cursor: pointer;
}

.hizmet-saat-satir__saatler select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Tarih + garanti 24 saatlik <select> ikilisi (bkz. Views/Admin/Detay.cshtml Randevu kartı) —
   .hizmet-saat-satir__saatler ile aynı gerekçe, farklı bağlamda (tek satır form alanı). */
.admin-tarih-saat-alani {
    display: flex;
    gap: 10px;
}

.admin-tarih-saat-alani input[type="date"] {
    flex: 1;
    min-width: 0;
}

.admin-tarih-saat-alani select {
    flex-shrink: 0;
    width: 100px;
}

/* ===== Alt Üyeler (bkz. Views/Hizmet/AltUyeler.cshtml) ===== */

/* Ekleme kartı: varsayılan olarak yalnızca başlık satırı görünür, tıklanınca form açılır.
   Sayfanın asıl işi ekibi görmek; hesap açmak ara sıra yapılan bir iş olduğundan formun
   sürekli açık durması listeyi aşağı iterdi. */
.alt-uye-ekle {
    margin-bottom: 28px;
    background: var(--color-white);
    border: 1px solid var(--color-border, #d9e1ec);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.alt-uye-ekle__ac {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 22px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.alt-uye-ekle__ac:hover {
    background: rgba(0, 86, 179, 0.04);
}

.alt-uye-ekle__arti {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 86, 179, 0.1);
    color: var(--color-primary);
    transition: transform 0.15s ease;
}

.alt-uye-ekle__arti svg {
    width: 18px;
    height: 18px;
}

/* Açıkken artı işareti çarpıya döner — ayrı bir "kapat" butonu koymadan durum belli olur. */
.alt-uye-ekle.is-open .alt-uye-ekle__arti {
    transform: rotate(45deg);
}

.alt-uye-ekle__ac-metin {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alt-uye-ekle__ac-metin strong {
    font-size: 0.98rem;
    font-weight: 600;
}

.alt-uye-ekle__ac-metin small {
    font-size: 0.84rem;
    color: var(--color-text-muted);
}

.alt-uye-ekle__form {
    display: none;
    padding: 4px 22px 22px;
    border-top: 1px solid var(--color-border-light, #e8edf4);
}

.alt-uye-ekle.is-open .alt-uye-ekle__form {
    display: block;
}

.alt-uye-ekle__izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin-top: 18px;
}

.alt-uye-ekle__aksiyon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}

.alt-uye-ekle__not {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Bölüm başlığı */
.alt-uye-bolum {
    margin-bottom: 28px;
}

.alt-uye-bolum__baslik {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 1.02rem;
    font-weight: 600;
}

.alt-uye-bolum__sayac {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: rgba(0, 86, 179, 0.1);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 600;
}

.alt-uye-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alt-uye-karti {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--color-white);
    border: 1px solid var(--color-border, #d9e1ec);
    border-radius: var(--radius-lg);
}

/* Pasif hesap: solmuş yüzey + kesikli kenar. Silinmiş değil, giriş yapamıyor —
   ikisinin karışmaması için renk yerine doku farkı kullanıldı. */
.alt-uye-karti--pasif {
    background: var(--color-bg-soft, #f6f8fb);
    border-style: dashed;
}

.alt-uye-karti--pasif .alt-uye-karti__avatar {
    background: var(--color-border, #d9e1ec);
    color: var(--color-text-muted);
}

.alt-uye-karti__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 86, 179, 0.1);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.98rem;
}

.alt-uye-karti__kimlik {
    flex: 1 1 auto;
    min-width: 0;
}

.alt-uye-karti__ad {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 600;
    font-size: 0.96rem;
}

.alt-uye-karti__rozet {
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--color-border, #d9e1ec);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.alt-uye-karti__iletisim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 3px 0 0;
    font-size: 0.86rem;
    color: var(--color-text-muted);
}

.alt-uye-karti__ayrac {
    color: var(--color-border, #d9e1ec);
}

.alt-uye-karti__tarih {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--color-text-lighter);
}

.alt-uye-karti__aksiyon {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Şifre belirleme, <details> ile satır içinde açılır — ayrı bir sayfa/modal, tek bir input
   için fazla ağır kalırdı. */
.alt-uye-sifre {
    position: relative;
}

.alt-uye-sifre__ac {
    padding: 6px 12px;
    border: 1px solid var(--color-border, #d9e1ec);
    border-radius: var(--radius-base);
    font-size: 0.84rem;
    color: var(--color-text-muted);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.alt-uye-sifre__ac::-webkit-details-marker {
    display: none;
}

.alt-uye-sifre__ac:hover {
    background: rgba(0, 86, 179, 0.06);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.alt-uye-sifre[open] .alt-uye-sifre__ac {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.alt-uye-sifre__form {
    position: absolute;
    right: 0;
    z-index: 5;
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding: 12px;
    background: var(--color-white);
    border: 1px solid var(--color-border, #d9e1ec);
    border-radius: var(--radius-lg);
}

.alt-uye-sifre__form input {
    width: 180px;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #d9e1ec);
    border-radius: var(--radius-base);
    font-size: 0.9rem;
}

.alt-uye-sifre__form input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.alt-uye-ikon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--color-border, #d9e1ec);
    border-radius: var(--radius-base);
    color: var(--color-text-muted);
    cursor: pointer;
}

.alt-uye-ikon-btn svg {
    width: 16px;
    height: 16px;
}

.alt-uye-ikon-btn:hover {
    background: #fbeaea;
    color: #c0392b;
    border-color: #f0c4c0;
}

.alt-uye-bos {
    margin: 0;
    padding: 18px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    background: var(--color-bg-soft, #f6f8fb);
    border-radius: var(--radius-lg);
}

/* Alt üye detay sayfasının künye şeridi (bkz. Views/Hizmet/AltUyeDetay.cshtml) */
.alt-uye-ozet {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px 22px;
    background: var(--color-white);
    border: 1px solid var(--color-border, #d9e1ec);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
}

.alt-uye-ozet__kimlik {
    flex: 1 1 auto;
    min-width: 0;
}

.alt-uye-ozet__kimlik h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.12rem;
    font-weight: 600;
}

.alt-uye-ozet__sayilar {
    display: flex;
    gap: 28px;
    margin: 0;
    flex-shrink: 0;
}

.alt-uye-ozet__sayilar dt {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.alt-uye-ozet__sayilar dd {
    margin: 2px 0 0;
    font-size: 1.02rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Kartın altındaki gizlilik notu: tablodan ayrılsın diye üstten ince bir ayraç alır. */
.alt-uye-gizlilik {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light, #e8edf4);
    line-height: 1.55;
}

/* Belgeler sekmesindeki uyarı işareti — sayı değil, tek bir ünlem taşır. */
.admin-tabs__sayac--uyari {
    background: #c0392b;
    color: #fff;
}


/* ===== Zorunlu belge alanları (bkz. Views/Shared/_ZorunluBelgeAlanlari.cshtml) ===== */
.zorunlu-belgeler__not {
    margin-top: -8px;
    margin-bottom: 16px;
}

.zorunlu-belgeler__satir {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 18px;
    padding: 14px 0;
    border-top: 1px solid var(--color-border-light, #e8edf4);
}

.zorunlu-belgeler__satir:last-child {
    padding-bottom: 0;
}

/* Hatalı satır sol kenardan işaretlenir: alanların kendisi <input type="file"> olduğu için
   kenarlık rengiyle vurgulamak tarayıcıdan tarayıcıya tutarsız görünüyordu. */
.zorunlu-belgeler__satir.is-hatali {
    padding-left: 12px;
    border-left: 3px solid #c0392b;
}

.zorunlu-belgeler__hata {
    grid-column: 1 / -1;
}

/* İş alma engeli — süresi yaklaşan belge uyarısıyla aynı kutuda görünebildiği için sol
   kenardan ayrıştırılır (.admin-alert--error'ın kendi kenarlığı yok). */
.belge-engel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding-left: 14px;
    border-left: 4px solid #c0392b;
    line-height: 1.55;
}

/* Hizmet veren panelinde çıkan "belgeleriniz eksik" uyarı penceresi
   (bkz. Views/Hizmet/_IsEngelModal.cshtml) */
.belge-engel-modal {
    max-width: 440px;
    text-align: center;
}

.belge-engel-modal__ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    background: #fdecea;
    color: #c0392b;
}

.belge-engel-modal__ikon svg {
    width: 26px;
    height: 26px;
}

.belge-engel-modal h2 {
    margin-bottom: 10px;
    font-size: 1.15rem;
}

.belge-engel-modal p {
    margin-bottom: 22px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.belge-engel-modal p strong {
    color: var(--color-text);
}

.belge-engel-modal .admin-modal__actions {
    justify-content: center;
}

/* İş detayındaki Ekip sekmesinin aday kartı: ekiptekiyle aynı kişi kartı anatomisi, "henüz
   ekipte değil" halini kesikli kenarlık ve soluk avatar anlatır (bkz. Views/Hizmet/IsDetay.cshtml —
   önceki hali bir açılır listeydi; adaylar 1-2 kişiyken seçim kutusu onları gereksiz saklıyordu). */
.alt-uye-karti--aday {
    border-style: dashed;
}

.alt-uye-karti--aday .alt-uye-karti__avatar {
    background: var(--color-bg);
    color: var(--color-text-muted);
}

/* ===== Görevlerim — alt üyenin salt-okunur iş listesi (bkz. Views/Hizmet/Gorevlerim.cshtml) ===== */
.gorev-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gorev-karti {
    padding: 18px 20px;
    background: var(--color-white);
    border: 1px solid var(--color-border, #d9e1ec);
    border-radius: var(--radius-lg);
}

/* Bugünkü görev sol kenardan vurgulanır — alt üyenin sayfaya bakma sebebi neredeyse her zaman
   "bugün nereye gidiyorum" olduğundan, sıralamaya güvenmek yerine görsel olarak ayrılır. */
.gorev-karti--bugun {
    border-left: 4px solid var(--color-primary);
}

.gorev-karti__ust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.gorev-karti__hizmet {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
}

.gorev-karti__bugun {
    padding: 2px 10px;
    border-radius: 11px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.gorev-karti__tarih {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0;
    font-size: 0.92rem;
    font-weight: 500;
}

.gorev-karti__tarih svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.gorev-karti__adres {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--color-bg-soft, #f6f8fb);
    border-radius: var(--radius-base);
}

.gorev-karti__adres svg {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.gorev-karti__ilce {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

.gorev-karti__adres-satir {
    display: block;
    margin-top: 2px;
    font-size: 0.86rem;
    color: var(--color-text-muted);
}

.gorev-karti__detay {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px 18px;
    margin: 16px 0 0;
}

.gorev-karti__detay dt {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.gorev-karti__detay dd {
    margin: 3px 0 0;
    font-size: 0.9rem;
}

.gorev-karti__navigasyon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}

.gorev-karti__navigasyon svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 720px) {
    .alt-uye-ozet {
        flex-wrap: wrap;
    }

    .alt-uye-ozet__sayilar {
        flex-basis: 100%;
        gap: 20px;
        padding-top: 14px;
        border-top: 1px solid var(--color-border-light, #e8edf4);
    }
}

@media (max-width: 720px) {
    .alt-uye-ekle__izgara {
        grid-template-columns: minmax(0, 1fr);
    }

    .alt-uye-ekle__aksiyon {
        flex-direction: column;
        align-items: stretch;
    }

    /* Dar ekranda kart iki satıra kırılır: kimlik üstte, aksiyonlar altta tam genişlikte —
       aksi halde üç buton ad/e-postayı okunmaz hâle getirecek kadar sıkıştırırdı. */
    .alt-uye-karti {
        flex-wrap: wrap;
    }

    .alt-uye-karti__aksiyon {
        flex-basis: 100%;
        justify-content: flex-end;
        padding-top: 12px;
        border-top: 1px solid var(--color-border-light, #e8edf4);
    }
}

/* ===== "Müsaitlik Takvimim" — çalışılmayan günler takvimi (bkz. CalismaKriterlerim.cshtml) ===== */
/* Takvim tarafı sabit ve kompakt (420px): kare gün hücreleri geniş ekranda büyüyüp takvimi
   sayfanın yarısına yayıyordu; sağdaki "çalışmayacağım günler" listesi kalan alanı alır. */
.musaitlik-sol {
    flex: 0 0 auto;
    width: 420px;
    max-width: 100%;
}

/* Toplu seçim kısayolları */
.musaitlik-kisayollar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.musaitlik-kisayol {
    padding: 6px 11px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(0, 86, 179, 0.07);
    color: var(--color-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.12s ease;
}

.musaitlik-kisayol:hover {
    background: rgba(0, 86, 179, 0.14);
}

.musaitlik-kisayol--sessiz {
    background: transparent;
    color: var(--color-text-muted);
}

.musaitlik-kisayol--sessiz:hover {
    background: var(--color-bg-soft, #f6f8fb);
    color: var(--color-heading-dark);
}

/* Seçime uygulanan aksiyon çubuğu */
.musaitlik-uygula {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    min-height: 44px;
    background: var(--color-bg-soft, #f6f8fb);
    border-radius: var(--radius-lg);
}

.musaitlik-uygula__ipucu {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.musaitlik-uygula__sayi {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-heading-dark);
}

.musaitlik-uygula__butonlar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Renk göstergesi */
.musaitlik-gosterge {
    display: flex;
    gap: 16px;
    margin: 10px 0 0;
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.musaitlik-gosterge__oge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.musaitlik-nokta {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.musaitlik-nokta--kapali {
    background: #c0392b;
}

.musaitlik-nokta--secili {
    background: rgba(0, 86, 179, 0.12);
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* ===== Standart Çalışma Saatlerim (bkz. Views/Hizmet/CalismaKriterlerim.cshtml) =====
   Yedi gün yan yana bir şerit; saatler gün satırlarında değil, alttaki TEK düzenleyicide —
   tıklanan gün seçilir, düzenleyici onun saatlerini yönetir (bkz. wwwroot/js/calisma-saatleri.js).
   Kapalı gün şeritte de "devre dışı" dilini konuşur: kesikli kenarlık + soluk zemin. Seçim,
   gölgesiz ayrışır: kenarlık + zemin tonu + mavi ad. */
.gun-serit {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.gun-serit__gun {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 4px 8px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
    font-family: var(--font-body);
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease;
}

.gun-serit__gun:not(.is-acik) {
    background: var(--color-bg);
    border-style: dashed;
}

.gun-serit__gun:hover {
    border-color: var(--color-primary);
}

.gun-serit__gun:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.gun-serit__gun.is-secili {
    background: rgba(0, 86, 179, 0.07);
    border-style: solid;
    border-color: var(--color-primary);
}

.gun-serit__ad {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
}

.gun-serit__gun:not(.is-acik) .gun-serit__ad {
    color: var(--color-text-muted);
}

.gun-serit__gun.is-secili .gun-serit__ad {
    color: var(--color-primary);
}

.gun-serit__ozet {
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-lighter);
    white-space: nowrap;
}

.gun-duzenleyici {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.gun-duzenleyici__bas {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 16px;
}

.gun-duzenleyici__gun {
    min-width: 84px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-heading-dark);
}

.gun-duzenleyici__saatler {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gun-duzenleyici__saatler select {
    width: 92px;
    height: 32px;
    font-size: 0.86rem;
}

.gun-duzenleyici__ayrac {
    color: var(--color-text-muted);
}

/* Kapalı günde saat tarafı söner ama kaybolmaz: gün yeniden açıldığında aynı aralık yerinde. */
.gun-duzenleyici.is-kapali [data-saat-alani] {
    opacity: 0.35;
    pointer-events: none;
}

.calisma-saatleri__alt {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 16px;
}

@media (max-width: 560px) {

    .gun-serit {
        gap: 4px;
    }

    .gun-serit__gun {
        padding: 7px 2px 6px;
    }

    /* Dar ekranda saat özeti sığmaz; açık/kapalı bilgisini nokta anlatır. */
    .gun-serit__ozet {
        display: none;
    }

    .gun-serit__gun.is-acik::after {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--color-primary);
    }

    .gun-duzenleyici__bas {
        flex-basis: 100%;
        justify-content: space-between;
    }
}

@media (prefers-reduced-motion: reduce) {

    .gun-serit__gun {
        transition: none;
    }
}
.musaitlik-duzen {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-start;
}

.musaitlik-takvim {
    width: 100%;
}

.musaitlik-liste-sarmal {
    flex: 1;
    min-width: 240px;
}

.musaitlik-takvim__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.musaitlik-takvim__ay {
    font-weight: 700;
    color: var(--color-heading-dark);
}

.musaitlik-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    line-height: 1;
    background: var(--color-white);
    color: var(--color-primary);
    border: 1px solid var(--color-border, #d9e1ec);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.musaitlik-nav:hover:not(:disabled) {
    background: rgba(0, 86, 179, 0.08);
}

.musaitlik-nav:disabled {
    opacity: 0.4;
    cursor: default;
}

.musaitlik-takvim__hafta,
.musaitlik-takvim__izgara {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.musaitlik-takvim__hafta {
    margin-bottom: 6px;
}

.musaitlik-takvim__hafta span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.musaitlik-gun {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    background: var(--color-white);
    color: var(--color-heading-dark);
    border: 1px solid var(--color-border, #d9e1ec);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.musaitlik-gun:hover:not(:disabled):not(.musaitlik-gun--bos) {
    border-color: var(--color-primary);
    background: rgba(0, 86, 179, 0.05);
}

.musaitlik-gun--bos {
    background: transparent;
    border: none;
    cursor: default;
}

.musaitlik-gun--pasif {
    color: var(--color-text-muted);
    opacity: 0.45;
    cursor: default;
    background: var(--color-bg-soft, #f6f8fb);
}

.musaitlik-gun--bugun {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.musaitlik-gun--kapali {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
    font-weight: 600;
}

.musaitlik-gun--kapali:hover:not(:disabled) {
    background: #a5301f;
    border-color: #a5301f;
}

/* Seçili (henüz aksiyon uygulanmamış) — mavi çerçeve; kapalı kırmızının da üstünde görünür */
.musaitlik-gun--secili {
    box-shadow: inset 0 0 0 2px var(--color-primary);
}

.musaitlik-gun--secili:not(.musaitlik-gun--kapali) {
    background: rgba(0, 86, 179, 0.1);
    border-color: var(--color-primary);
}

.musaitlik-liste__baslik {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--color-heading-dark);
}

.musaitlik-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow: auto;
}

.musaitlik-liste__bos {
    margin: 0;
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    background: var(--color-bg-soft, #f6f8fb);
    border-radius: var(--radius-lg);
}

.musaitlik-satir {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-soft, #f6f8fb);
    border: 1px solid var(--color-border, #d9e1ec);
    border-radius: var(--radius-lg);
}

.musaitlik-satir__tarih {
    flex: 1;
    min-width: 150px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-heading-dark);
}

.musaitlik-satir__tumgun {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    cursor: pointer;
}

.musaitlik-satir__saatler {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* .musaitlik-satir__saatler'in display:inline-flex'i [hidden]'ı ezdiğinden ayrı kural (tanıdık tuzak). */
.musaitlik-satir__saatler[hidden] {
    display: none;
}

.musaitlik-satir__saatler select {
    padding: 5px 8px;
    border: 1px solid var(--color-border, #d9e1ec);
    border-radius: var(--radius-lg);
    font-size: 0.82rem;
    font-family: inherit;
    background: var(--color-white);
}

.musaitlik-satir__sil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 1.25rem;
    line-height: 1;
    background: transparent;
    color: var(--color-text-muted);
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.musaitlik-satir__sil:hover {
    background: #fbeaea;
    color: #c0392b;
}

@media (max-width: 620px) {
    .musaitlik-takvim {
        width: 100%;
    }
}

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


/* ============================================================================
   Dijital Sözleşme (bkz. Views/SozlesmeYonetimi/, js/sozlesme-editor.js)

   Belge, Hizmet Formu'yla (bkz. wwwroot/css/is-emri-print.css,
   Views/Admin/IsEmri.cshtml) AYNI kurumsal dili konuşur: beyaz kâğıt, logolu
   üstbilgi + 3px mavi ayraç, mavi büyük harf bölüm başlıkları, kesik çizgili
   doldurma alanları, çerçeveli imza kutuları ve iletişim altbilgisi. İki belge de
   aynı müşteriye gittiği için tek bir marka olarak okunmaları gerekir.

   Tek ayrışan öğe boşluk (.sozlesme-bosluk): matbu formlardaki doldurma çizgisinin
   satır içi karşılığı. Boşken kesik çizgili ve mavi, değeri girilince düz belge
   metni — bir sayfa dolusu maddede hangi alanın hâlâ boş olduğu tek bakışta
   görülsün diye. Kesik çizgi ve mavi, Hizmet Formu'nun kendi doldurma dilidir
   (bkz. .is-emri-duzelt__line, .is-emri-fillbox--imza::after).
   ========================================================================= */

.admin-body {
    --sozlesme-kagit: #fff;
    --sozlesme-murekkep: #1a1a1a;
    --sozlesme-cizgi: var(--color-border);
    --sozlesme-bosluk: var(--color-primary);
    --sozlesme-bosluk-zemin: #eef6ff;
}

/* ---- Sekmeler (Şablonlar / Oluşturulan Sözleşmeler) --------------------- */

.sozlesme-sekmeler {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border-light);
}

.sozlesme-sekme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.sozlesme-sekme:hover {
    color: var(--color-text);
}

.sozlesme-sekme.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.sozlesme-sekme__sayac {
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--color-border-light);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.sozlesme-sekme.is-active .sozlesme-sekme__sayac {
    background: #eef6ff;
    color: var(--color-primary);
}

/* ---- Şablon listesi ----------------------------------------------------- */

.sozlesme-sablon-listesi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.sozlesme-sablon-karti {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px;
    background: var(--color-white);
    border: 1px solid #eee;
    border-radius: var(--radius-lg);
}

.sozlesme-sablon-karti__ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sozlesme-sablon-karti__kimlik {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sozlesme-sablon-karti__ad {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-heading-dark);
    text-decoration: none;
}

.sozlesme-sablon-karti__ad:hover {
    color: var(--color-primary);
}

.sozlesme-sablon-karti__baslik {
    font-size: 0.8rem;
    color: var(--color-text-lighter);
}

.sozlesme-sablon-karti__ozet {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.sozlesme-sablon-karti__alanlar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.sozlesme-sablon-karti__alansiz,
.sozlesme-sablon-karti__fazla {
    font-size: 0.78rem;
    color: var(--color-text-lighter);
}

.sozlesme-sablon-karti__alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
}

.sozlesme-sablon-karti__tarih {
    font-size: 0.78rem;
    color: var(--color-text-lighter);
}

.sozlesme-sablon-karti__aksiyonlar {
    display: flex;
    gap: 8px;
}

/* ---- Editör kabuğu ------------------------------------------------------ */

.sozlesme-editor {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.sozlesme-arac-cubugu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 8px 10px;
    background: var(--color-white);
    border: 1px solid #eee;
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: sticky;
    top: 0;
    z-index: 5;
}

.sozlesme-arac {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-base);
    color: var(--color-text-light);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.sozlesme-arac svg {
    width: 16px;
    height: 16px;
}

.sozlesme-arac:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.sozlesme-arac.is-active {
    background: #eef6ff;
    color: var(--color-primary);
}

.sozlesme-arac:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.sozlesme-arac--genis {
    width: auto;
    padding: 0 12px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--sozlesme-bosluk);
    background: var(--sozlesme-bosluk-zemin);
}

.sozlesme-arac--genis:hover {
    background: #dce9f8;
    color: var(--sozlesme-bosluk);
}

.sozlesme-arac-ayrac {
    width: 1px;
    height: 18px;
    margin: 0 5px;
    background: var(--color-border-light);
}

/* ---- Belge yüzeyi ------------------------------------------------------- */

.sozlesme-belge {
    padding: 36px 40px 40px;
    background: var(--sozlesme-kagit);
    border: 1px solid var(--sozlesme-cizgi);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--sozlesme-murekkep);

    /* Üstbilgideki 3px mavi ayraç ve mavi bölüm başlıkları baskıda da kalsın —
       tarayıcılar varsayılan olarak arka plan/kenarlık renklerini atar. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.sozlesme-editor--onizleme .sozlesme-belge {
    border-radius: var(--radius-lg);
}

/* Üstbilgi: solda logo, sağda belge künyesi, altta 3px marka ayracı — Hizmet
   Formu'ndaki .is-emri-header ile birebir aynı kurgu. */
.sozlesme-belge__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 3px solid var(--color-primary);
}

.sozlesme-belge__marka img {
    display: block;
    height: 42px;
    width: auto;
}

.sozlesme-belge__kunye {
    text-align: right;
    min-width: 0;
}

/* .sozlesme-belge__kunye p (sınıf+eleman) künye satırlarını biçimlendirdiğinden, başlık
   da bir <p> olduğu için ondan DAHA YÜKSEK özgüllükle yazılmak zorunda. */
.sozlesme-belge__kunye .sozlesme-belge__baslik {
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-primary);
}

.sozlesme-belge__kunye p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Karşı taraf ve tarih etiketsiz basılır; hangisinin ne olduğunu ağırlık ve renk söyler. */
.sozlesme-belge__kunye .sozlesme-belge__taraf {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sozlesme-murekkep);
}

.sozlesme-belge__kunye .sozlesme-belge__tarih {
    margin-top: 1px;
    font-size: 0.8rem;
    color: var(--color-text-lighter);
    font-variant-numeric: tabular-nums;
}

/* İletişim altbilgisi — Hizmet Formu'ndaki .is-emri-footer ile aynı metin ve biçim. */
.sozlesme-belge__alt {
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-text-lighter);
}

.sozlesme-belge__govde {
    min-height: 320px;
}

.sozlesme-belge__govde:focus {
    outline: none;
}

.sozlesme-belge__govde p {
    margin: 0 0 14px;
}

.sozlesme-belge__govde p:last-child {
    margin-bottom: 0;
}

/* Bölüm başlığı = Hizmet Formu'ndaki .is-emri-section h2 (mavi, büyük harf, ince ayraç). */
.sozlesme-belge__govde h3 {
    margin: 22px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-primary);
}

.sozlesme-belge__govde h3:first-child {
    margin-top: 0;
}

/* reset.css tüm metin öğelerine "font: inherit" verdiğinden strong/em kendi
   ağırlığını/eğimini KAYBEDER — araç çubuğundaki Kalın/İtalik düğmeleri doğru
   işaretlemeyi üretse bile ekranda hiçbir şey değişmezdi. */
.sozlesme-belge__govde strong {
    font-weight: 700;
}

.sozlesme-belge__govde em {
    font-style: italic;
}

/* Numaralı liste = sözleşme maddeleri. Buradaki numaralandırma süs değil: maddeler
   gerçekten sıralı bir dizidir ve metin içinde "3. maddeye göre" diye atıf yapılır.
   PDF çıktısı da aynı biçimi kullanır (bkz. SozlesmePdfOlusturucu). */
.sozlesme-belge__govde ol {
    list-style: none;
    counter-reset: sozlesme-madde;
    margin: 0 0 14px;
    padding: 0;
}

.sozlesme-belge__govde ol>li {
    counter-increment: sozlesme-madde;
    margin-bottom: 12px;
}

.sozlesme-belge__govde ol>li::before {
    content: "MADDE " counter(sozlesme-madde) " — ";
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.sozlesme-belge__govde ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.sozlesme-belge__govde ul>li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 22px;
}

.sozlesme-belge__govde ul>li::before {
    content: "—";
    position: absolute;
    left: 0;
}

.sozlesme-belge__govde u {
    text-underline-offset: 3px;
}

/* ---- Boşluk: bu ekranın imza öğesi -------------------------------------- */

.sozlesme-bosluk {
    display: inline-block;
    min-width: 76px;
    padding: 0 7px 1px;
    border-bottom: 1px dashed var(--sozlesme-bosluk);
    border-radius: 2px 2px 0 0;
    background: var(--sozlesme-bosluk-zemin);
    font-family: 'Courier New', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
    color: var(--sozlesme-bosluk);
    vertical-align: baseline;
    user-select: none;
    cursor: default;
}

/* Değeri girilmiş boşluk: kesik çizgi düze döner, yazı belgenin kendi gövde
   metnine dönüşür — kalem değmiş bir form gibi. Mavi kesik ile düz siyah
   arasındaki fark, uzun bir metinde hangi alanın hâlâ boş olduğunu okumadan
   gösterir; bu yüzden dolu hâl için ayrı bir renk eklenmedi. */
.sozlesme-bosluk--dolu {
    min-width: 0;
    padding: 0 2px 1px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sozlesme-murekkep);
    user-select: text;
}

/* Liste kartlarındaki etiket görünümü — belge içinde değil, sadece "bu şablonda şu
   alanlar var" bilgisini verir. */
.sozlesme-bosluk--statik {
    min-width: 0;
    font-size: 0.65rem;
    cursor: default;
}

.sozlesme-bosluk.is-vurgulu {
    animation: sozlesme-vurgu 0.9s ease;
}

@keyframes sozlesme-vurgu {

    0%,
    55% {
        background: #cfe3f8;
    }

    100% {
        background: var(--sozlesme-bosluk-zemin);
    }
}

.sozlesme-bosluk--dolu.is-vurgulu {
    animation: sozlesme-vurgu-dolu 0.9s ease;
}

@keyframes sozlesme-vurgu-dolu {

    0%,
    55% {
        background: #cfe3f8;
    }

    100% {
        background: transparent;
    }
}

.sozlesme-editor__hata {
    margin-top: -14px;
    margin-bottom: 20px;
}

/* ---- Yan panel (alan listesi / doldurma) -------------------------------- */

.sozlesme-yan {
    position: sticky;
    top: 24px;
}

/* Kart içindeki bilgi listesinin altındaki açıklama notu — listeden ince bir çizgiyle ayrılır,
   yoksa son satırın devamı gibi okunuyordu. */
.sozlesme-yan__not {
    margin-top: 16px;
    margin-bottom: 0;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light);
    line-height: 1.55;
}

.sozlesme-rail {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sozlesme-rail__oge {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-base);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-base);
}

.sozlesme-rail__oge:hover {
    background: var(--sozlesme-bosluk-zemin);
}

.sozlesme-rail__oge:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.sozlesme-rail__ad {
    flex: 1;
    min-width: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--sozlesme-bosluk);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sozlesme-rail__adet {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--color-text-lighter);
    font-variant-numeric: tabular-nums;
}

.sozlesme-rail__bos {
    margin: 0;
    padding: 4px 0 0;
    font-size: 0.85rem;
    color: var(--color-text-lighter);
}

.sozlesme-rail__ekle {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-light);
}

.sozlesme-rail__ekle input {
    flex: 1;
    min-width: 0;
    padding: 8px 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sozlesme-bosluk);
}

.sozlesme-rail__ekle input::placeholder {
    color: var(--color-text-lighter);
}

.sozlesme-rail__ekle input:focus {
    outline: none;
    border-color: var(--sozlesme-bosluk);
}

/* ---- Doldurma alanları -------------------------------------------------- */

.sozlesme-doldur-alanlar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* .admin-field label (sınıf+eleman) kendi tipografisini dayattığından, eşit değil DAHA YÜKSEK
   özgüllükle yazılması şart — aksi halde bu kural hiç uygulanmaz. */
.admin-field.sozlesme-doldur-alan label {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--sozlesme-bosluk);
}

/* ---- Müşteriye gönderme paneli (bkz. Views/SozlesmeYonetimi/Kayit.cshtml) ---- */

.sozlesme-gonder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    background: var(--color-white);
    border: 1px solid #eee;
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
}

.sozlesme-gonder__alan {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 260px;
}

.sozlesme-gonder__alan label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-label);
}

.sozlesme-gonder__alan input {
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
}

.sozlesme-gonder__alan input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.sozlesme-gonder__not {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* ---- Müşteriye açık onay ekranı (bkz. Views/SozlesmeOnay/) -------------- */

.sozlesme-onay-body {
    padding: 32px 16px 64px;
}

.sozlesme-onay-sayfa {
    width: 210mm;
    max-width: 100%;
    margin: 0 auto;
}

.sozlesme-onay-sayfa--dar {
    width: 560px;
}

.sozlesme-onay-sayfa .sozlesme-belge {
    padding: 32px 36px 36px;
    border-radius: var(--radius-lg);
}

/* Belgenin en altındaki onay kutucuğu. */
.sozlesme-oku-kutu {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    margin-bottom: 4px;
    background: var(--sozlesme-bosluk-zemin);
    border: 1px solid #cfe0f5;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.sozlesme-oku-kutu input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.sozlesme-oku-kutu strong {
    display: block;
    font-size: 0.92rem;
    color: var(--color-primary);
}

.sozlesme-oku-kutu__alt {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.sozlesme-onay-kutu--uyari {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff8e6;
    border: 1px solid #f5d78a;
    border-top: 3px solid #b8860b;
}

.sozlesme-onay-kutu--uyari h2 {
    color: #92700a;
}

.sozlesme-onay-kutu--uyari p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #6b5307;
}

.sozlesme-onay-kutu--uyari .sozlesme-onay-kutu__ikon {
    color: #b8860b;
}

.sozlesme-onay-kutu__iletisim {
    margin-top: 10px !important;
}

.sozlesme-onay-kutu__iletisim a {
    color: #92700a;
    font-weight: 600;
}

.sozlesme-onay-kutu {
    margin-top: 20px;
    padding: 26px 30px 30px;
    background: var(--color-white);
    border: 1px solid #eee;
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
}

.sozlesme-onay-kutu h2 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-heading-dark);
    margin-bottom: 6px;
}

.sozlesme-onay-kutu__aciklama {
    margin: 0 0 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.sozlesme-onay-kutu__buton {
    width: 100%;
    padding: 14px 20px;
    font-size: 0.95rem;
}

.sozlesme-onay-kutu__kvkk {
    margin: 14px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-lighter);
}

.sozlesme-onay-kutu__kvkk a {
    color: var(--color-primary);
}

/* Onaylanmış durum — yeşil, çünkü panelin her yerinde "tamamlandı" bu renk. */
.sozlesme-onay-kutu--tamam {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #e6f7ee;
    border: 1px solid #b7e4cb;
    border-top: 3px solid #1e8a4c;
}

.sozlesme-onay-kutu--tamam h2 {
    color: #14683a;
}

.sozlesme-onay-kutu--tamam p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #1c6b41;
}

.sozlesme-onay-kutu__ikon {
    flex-shrink: 0;
    color: #1e8a4c;
}

.sozlesme-onay-kutu__ikon svg {
    width: 26px;
    height: 26px;
}

.sozlesme-onay-ozet {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 20px;
    margin: 24px 0 0;
    padding: 22px 26px;
    background: var(--color-white);
    border: 1px solid #eee;
    border-radius: var(--radius-lg);
    font-size: 0.9rem;
}

.sozlesme-onay-ozet dt {
    color: var(--color-text-lighter);
}

.sozlesme-onay-ozet dd {
    margin: 0;
    font-weight: 600;
    color: var(--color-heading-dark);
}

.sozlesme-onay-sayfa__geri {
    margin: 24px 0 0;
    text-align: center;
}

/* ---- Yazdırma sayfası --------------------------------------------------- */

.sozlesme-yazdir-body {
    background: var(--color-bg);
    padding: 24px 16px 48px;
}

.sozlesme-yazdir-cubugu {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

/* Ekranda da fiziksel A4 ölçüsünde — Hizmet Formu'ndaki .is-emri-page ile aynı
   yaklaşım, böylece admin baskıdan önce sayfanın gerçek dolgunluğunu görür. */
.sozlesme-yazdir-sayfa {
    width: 210mm;
    max-width: 100%;
    margin: 0 auto;
}

.sozlesme-yazdir-sayfa .sozlesme-belge {
    padding: 16mm;
    border-radius: 0;
}

@media print {
    .sozlesme-yazdir-body {
        background: #fff;
        padding: 0;
    }

    .sozlesme-yazdir-cubugu {
        display: none;
    }

    .sozlesme-yazdir-sayfa {
        width: auto;
        max-width: none;
    }

    .sozlesme-yazdir-sayfa .sozlesme-belge {
        padding: 0;
        background: #fff;
        border: none;
    }

    /* Bir maddenin ortasından sayfa bölünmesin. */
    .sozlesme-belge__govde li,
    .sozlesme-belge__govde h3 {
        break-inside: avoid;
    }

    .sozlesme-belge__govde h3 {
        break-after: avoid;
    }

    .sozlesme-bosluk {
        border-bottom-color: #000;
        background: transparent;
        color: #000;
    }

    /* Boş kalan alanlar elle doldurulabilsin diye baskıda daha geniş bir çizgi olur. */
    .sozlesme-bosluk:not(.sozlesme-bosluk--dolu) {
        min-width: 130px;
    }
}

@media (max-width: 900px) {
    .sozlesme-yan {
        position: static;
    }

    .sozlesme-arac-cubugu {
        position: static;
    }
}

@media (max-width: 620px) {
    .sozlesme-belge {
        padding: 28px 22px 32px;
    }

    /* Dar ekranda logo ve künye yan yana sıkışıyor — künye logonun altına iner. */
    .sozlesme-belge__ust {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .sozlesme-belge__kunye {
        text-align: left;
    }

    .sozlesme-sablon-listesi {
        grid-template-columns: 1fr;
    }

    .sozlesme-onay-sayfa .sozlesme-belge {
        padding: 24px 20px 28px;
    }

    .sozlesme-onay-kutu {
        padding: 20px 18px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sozlesme-bosluk.is-vurgulu,
    .sozlesme-bosluk--dolu.is-vurgulu {
        animation: none;
    }

    .sozlesme-arac,
    .sozlesme-rail__oge,
    .sozlesme-sekme {
        transition: none;
    }
}

/* ==========================================================================
   Müşteri puanı kartı — hizmet veren paneli
   (bkz. Views/Hizmet/Dashboard.cshtml, Performans sekmesi)
   ========================================================================== */

.hv-puan__ust {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) 1.2fr;
    gap: 28px;
    align-items: center;
}

.hv-puan__ozet {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-right: 28px;
    border-right: 1px solid var(--color-border-light);
}

/* Sorunun cevabı bu sayı; sayfadaki en büyük tipografi burada. */
.hv-puan__deger {
    font-size: 2.9rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-heading-dark);
}

.hv-puan__yildizlar {
    display: flex;
    gap: 2px;
    margin: 8px 0 5px;
}

.hv-puan__yildizlar svg {
    width: 15px;
    height: 15px;
    color: var(--color-border);
}

.hv-puan__yildizlar svg.is-dolu {
    color: #d99e0b;
}

.hv-puan__adet {
    font-size: 0.78rem;
    color: var(--color-text-lighter);
}

/* Dağılım ortalamayla eşit ağırlıkta: dokuz beşin arasındaki tek bir iki yıldız
   ortalamada kaybolur, çubukta kaybolmaz. */
.hv-puan__dagilim {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hv-puan__dagilim li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}

.hv-puan__dagilim-etiket {
    width: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text-lighter);
    text-align: right;
}

.hv-puan__dagilim-cubuk {
    flex: 1;
    height: 7px;
    border-radius: var(--radius-pill);
    background: var(--color-border-light);
    overflow: hidden;
}

.hv-puan__dagilim-cubuk i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #d99e0b;
}

.hv-puan__dagilim-adet {
    width: 22px;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-lighter);
}

/* Müşterinin yazdığı cümle bir tablo hücresi değil — alıntı olarak duruyor. */
.hv-puan__yorumlar {
    list-style: none;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--color-border-light);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.hv-puan__yorumlar li {
    padding-left: 14px;
    border-left: 2px solid #f0d9a6;
}

.hv-puan__yorumlar p {
    margin: 0 0 5px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-text);
}

.hv-puan__yorum-alt {
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-lighter);
}

@media (max-width: 700px) {
    .hv-puan__ust {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hv-puan__ozet {
        padding-right: 0;
        padding-bottom: 18px;
        border-right: 0;
        border-bottom: 1px solid var(--color-border-light);
    }
}

/* ==========================================================================
   Çalışma kriterleri — salt-okunur görünüm
   (bkz. Views/Calisanlar/Detay.cshtml, "Çalışma Kriterleri" sekmesi)
   ========================================================================== */

.admin-kriter-bolge {
    margin-bottom: 14px;
}

.admin-kriter-bolge:last-child {
    margin-bottom: 0;
}

.admin-kriter-bolge__il {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-lighter);
    font-weight: 700;
    margin-bottom: 6px;
}

.admin-kriter-etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Seçili değer rozeti — düzenlenebilir bir kutucuk değil, okunacak bir işaret. */
.admin-kriter-etiket {
    padding: 4px 10px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    font-size: 0.82rem;
    color: var(--color-text);
}

.admin-kriter-gunler,
.admin-kriter-izinler {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-kriter-gunler li,
.admin-kriter-izinler li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.88rem;
}

.admin-kriter-gunler li:last-child,
.admin-kriter-izinler li:last-child {
    border-bottom: 0;
}

/* Kapalı gün soluk kalır; açık gün hem koyu metin hem kalın saatle ayrışır — tarama
   sırasında "hangi günler çalışıyor" sorusu tek bakışta yanıtlansın. */
.admin-kriter-gunler__ad {
    color: var(--color-text-lighter);
}

.admin-kriter-gunler li.is-acik .admin-kriter-gunler__ad {
    color: var(--color-text);
    font-weight: 600;
}

.admin-kriter-gunler__saat {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-lighter);
}

.admin-kriter-gunler li.is-acik .admin-kriter-gunler__saat {
    color: var(--color-primary);
    font-weight: 600;
}

.admin-kriter-izinler__tarih {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.admin-kriter-izinler__sure {
    font-size: 0.82rem;
    color: var(--color-text-lighter);
}

/* ==========================================================================
   Atama Robotu (bkz. Views/AtamaRobotu/Index.cshtml)
   ========================================================================== */

/* Kart başlığının sağına düşen açıklama — .admin-card__head'de h2 flex:1 olduğundan
   ek konumlandırmaya gerek kalmaz. */
.admin-card__head-meta {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--color-text-lighter);
}

/* .admin-card global olarak alt boşluk taşımıyor — panelin çoğu yerinde bir grid'in gap'i
   içinde kullanılıyor. Bu sayfada kartlar alt alta dizildiğinden boşluk sayfa kapsamında
   veriliyor; global kuralı değiştirmek panelin tamamını etkilerdi. */
.admin-robot-sayfa > .admin-card {
    margin-bottom: 18px;
}

.admin-robot-sayfa .admin-lead {
    margin-bottom: 20px;
}

.admin-robot-sayfa .admin-card__head {
    margin-bottom: 18px;
}

.admin-card__foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
}

.admin-table__actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Robotun kendi durum göstergesi. Panelin diğer kartlarıyla aynı yüzey (beyaz zemin, aynı
   kenarlık ve köşe) — ayrışmayı renk değil, nabız işareti ve sayısal okuma dizilimi taşıyor. */
.admin-robot-durum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding: 24px 28px;
    margin-bottom: 18px;
    border: 1px solid #eee;
    border-radius: var(--radius-lg);
    background: var(--color-white);
}

.admin-robot-durum__ana {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 260px;
    min-width: 0;
}

.admin-robot-durum__metin {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-robot-durum__metin strong {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--color-heading-dark);
}

.admin-robot-durum__metin span {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* Nabız: robotun çalıştığını tek bakışta söyleyen işaret. Yalnızca renge yaslanmıyor —
   halka genişleyerek hareket bilgisini de taşıyor. Durduğunda halka kaybolur ve nokta griye
   döner; yani duran hâl hareketin YOKLUĞUYLA da anlaşılır. */
.admin-robot-nabiz {
    position: relative;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1e8a4c;
}

.admin-robot-nabiz::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid #1e8a4c;
    animation: admin-robot-nabiz 2s ease-out infinite;
}

@keyframes admin-robot-nabiz {
    0% { opacity: 0.7; transform: scale(0.7); }
    100% { opacity: 0; transform: scale(1.5); }
}

.admin-robot-durum.is-durdu .admin-robot-nabiz {
    background: var(--color-text-lighter);
}

.admin-robot-durum.is-durdu .admin-robot-nabiz::after {
    display: none;
}

/* Sayısal okumalar: değerler saniyede bir değiştiği için tabular-nums ile sabit genişlikte
   tutulur, aksi halde rakam değiştikçe satır sağa sola oynuyor. */
.admin-robot-okuma {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0;
}

.admin-robot-okuma dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-lighter);
    margin-bottom: 3px;
}

.admin-robot-okuma dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.admin-robot-okuma dd span {
    margin: 0 6px;
    font-weight: 400;
    color: var(--color-border);
}

.admin-robot-durum__aksiyon {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* --- Atama bekleyen işler tablosu --- */

.admin-robot-tablo td {
    vertical-align: top;
}

.admin-robot-is {
    display: block;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.admin-robot-alt {
    display: block;
    font-size: 0.78rem;
    color: var(--color-text-lighter);
    margin-top: 2px;
}

/* --- Alt ikili --- */

.admin-robot-alt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.admin-robot-alt-grid > .admin-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* Ayar formundaki Kaydet düğmesi. Etiketi olmayan dördüncü bir grid hücresi olduğu için
   diğer alanların input hizasına gelmesi gerekiyor — üstteki etiket yüksekliği kadar boşluk
   bırakılıp düğme aşağı itiliyor. Dar ekranda hücreler alt alta düştüğünde bu boşluk anlamsız
   kalacağı için sıfırlanıyor. */
.admin-robot-ayar-aksiyon {
    display: flex;
    align-items: flex-end;
}

.admin-robot-ayar-aksiyon .admin-btn {
    width: 100%;
}

@media (max-width: 640px) {
    .admin-robot-ayar-aksiyon {
        align-items: stretch;
    }
}

/* --- Skor ağırlıkları --- */

.admin-robot-agirlik {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-robot-agirlik__ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.admin-robot-agirlik__ad {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-label);
}

.admin-robot-agirlik__yuzde {
    font-size: 0.88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

.admin-robot-agirlik__cubuk {
    display: block;
    height: 6px;
    margin: 6px 0 4px;
    border-radius: var(--radius-pill);
    background: var(--color-border-light);
    overflow: hidden;
}

.admin-robot-agirlik__cubuk i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.admin-robot-agirlik__aciklama {
    display: block;
    font-size: 0.76rem;
    color: var(--color-text-lighter);
}

/* --- Robota dahil hizmet verenler --- */

.admin-robot-hazirlik {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.admin-robot-hazirlik li {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 4px 14px;
    padding: 12px 14px;
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-border);
    border-radius: var(--radius-base);
    background: var(--color-bg);
}

/* Hazır olanlar tek olumlu satır; geri kalanı adminin kapatması gereken eksikler. */
.admin-robot-hazirlik li.is-tamam {
    border-left-color: #1e8a4c;
    background: #f2fbf6;
}

.admin-robot-hazirlik__sayi {
    grid-row: span 2;
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--color-text);
}

.admin-robot-hazirlik li.is-tamam .admin-robot-hazirlik__sayi {
    color: #1e8a4c;
}

.admin-robot-hazirlik__ad {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-label);
}

.admin-robot-hazirlik__not {
    font-size: 0.76rem;
    color: var(--color-text-lighter);
}

@media (max-width: 700px) {
    .admin-robot-durum {
        align-items: flex-start;
        gap: 18px;
    }

    .admin-robot-durum__aksiyon {
        width: 100%;
    }

    .admin-robot-durum__aksiyon .admin-btn {
        flex: 1;
    }

    .admin-robot-okuma {
        gap: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-robot-nabiz::after {
        animation: none;
        opacity: 0.35;
    }
}

/* --- Ağırlık düzenleme penceresi ------------------------------------------ */

.admin-modal--agirlik {
    max-width: 900px;
    padding: 0;
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-agirlik__ust {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 26px 18px;
    border-bottom: 1px solid var(--color-border-light);
}

.admin-agirlik__ust h2 {
    margin-bottom: 4px;
}

.admin-agirlik__ust p {
    margin-bottom: 0;
    font-size: 0.85rem;
}

.admin-agirlik__kapat {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
    background: var(--color-white);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color var(--transition-base), color var(--transition-base);
}

.admin-agirlik__kapat svg {
    width: 16px;
    height: 16px;
}

.admin-agirlik__kapat:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

/* Sol yarı yöneticinin girdisi, sağ yarı robotun çıktısı. Ayrım renkle taşınıyor:
   sağ taraf durum bandıyla aynı koyu laciverdi giyiyor. */
.admin-agirlik__govde {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    flex: 1;
    min-height: 0;
}

.admin-agirlik__ayar {
    padding: 22px 26px;
    overflow-y: auto;
}

.admin-agirlik__kural {
    padding: 11px 14px;
    margin-bottom: 22px;
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-base);
    background: var(--color-bg);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.admin-agirlik__kural strong {
    display: block;
    font-size: 0.88rem;
    color: var(--color-text);
}

.admin-agirlik-satir {
    margin-bottom: 20px;
}

.admin-agirlik-satir:last-child {
    margin-bottom: 0;
}

.admin-agirlik-satir label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    cursor: pointer;
}

.admin-agirlik-satir__ad {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-label);
}

/* Ayar penceresinde asıl içerik SAYININ kendisi — etiketten büyük. */
.admin-agirlik-satir__deger {
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--color-primary);
}

.admin-agirlik-satir__deger i {
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 1px;
}

.admin-agirlik-satir__not {
    display: block;
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--color-text-lighter);
}

.admin-agirlik-satir input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-border-light);
    cursor: pointer;
}

.admin-agirlik-satir input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-white);
    border-radius: 50%;
    background: var(--color-primary);
    cursor: grab;
}

.admin-agirlik-satir input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 3px solid var(--color-white);
    border-radius: 50%;
    background: var(--color-primary);
    cursor: grab;
}

.admin-agirlik-satir input[type="range"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* --- Canlı önizleme (pencerenin imza öğesi) --- */

/* Pencerenin iki yarısı da beyaz; ayrımı ince bir dikey çizgi taşıyor. Sol taraf sizin
   girdiniz, sağ taraf robotun çıktısı. */
.admin-agirlik__onizleme {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    background: var(--color-white);
    border-left: 1px solid var(--color-border-light);
}

.admin-agirlik__onizleme-baslik {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-lighter);
}

.admin-agirlik__onizleme-alt {
    margin-top: 3px;
    margin-bottom: 18px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.admin-agirlik-sira {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.admin-agirlik-sira__oge {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    margin-bottom: 8px;
    border-radius: var(--radius-base);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
}

/* Teklif her zaman en üsttekine gider — o yüzden birinci sıra ayrı işaretleniyor.
   Yeşil çifti sayfadaki "atamaya hazır" satırıyla aynı (bkz. .admin-robot-hazirlik). */
.admin-agirlik-sira__oge.is-birinci {
    background: #f2fbf6;
    border-color: #b7e3c9;
}

.admin-agirlik-sira__no {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--color-text-lighter);
}

.admin-agirlik-sira__oge.is-birinci .admin-agirlik-sira__no {
    color: #1e8a4c;
}

.admin-agirlik-sira__ad {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text);
    min-width: 0;
}

.admin-agirlik-sira__ad i {
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--color-text-lighter);
}

/* Skor, sayfadaki iş numarasıyla aynı vurguyu taşır (bkz. .admin-robot-is). */
.admin-agirlik-sira__skor {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
}

.admin-agirlik__onizleme-not {
    margin: auto 0 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--color-text-lighter);
}

.admin-agirlik__alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 26px;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg);
}

.admin-agirlik__alt-aksiyon {
    display: flex;
    gap: 10px;
}

.admin-agirlik__alt .admin-btn--primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 820px) {
    .admin-agirlik__govde {
        grid-template-columns: 1fr;
    }

    /* Tek sütuna inince ayırıcı yandan üste geçer. */
    .admin-agirlik__onizleme {
        border-left: 0;
        border-top: 1px solid var(--color-border-light);
    }

    .admin-agirlik__alt {
        flex-direction: column-reverse;
        align-items: stretch;
        text-align: center;
    }

    .admin-agirlik__alt-aksiyon .admin-btn {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-agirlik-sira__oge {
        transition: none !important;
    }
}