/* Admin paneline (Oturum 8b) OZEL kurallar. Ortak tasarim sistemi (token'lar,
   kabuk, tablo, form, modal) app.css'tedir — o dosya panelin birebir
   kopyasidir ve burada ezilmez; yalnizca admin'e ait yeni bilesenler eklenir. */

/* "Yonetim" rozeti (0.1.1 duzeltmesi) — wordmark'in USTUNE binmez: marka
   metni iki satirlik bir sutundur, rozet wordmark'in ALTINDA ve saga
   hizali, kucuk ve soluk kirmizi. Daraltilmis menude wordmark gizlenir
   (panelin kurali), rozet shield'in altina kucuk bir etiket olarak iner. */
.admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--danger-bg);
    color: var(--danger);
    opacity: 0.85;
}

.sidebar__brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    line-height: 1.15;
}

.sidebar__brand {
    position: relative;
}

/* Daraltilmis halde marka metni sutunu AKIS DISINA alinir: akista kalsa
   (wordmark gizli olsa bile) mark ile toggle arasina bir bosluk daha
   ekleyip 64px'lik menuyu tasiriyor ve yatay kaydirma cubugu cikariyordu. */
.shell.is-collapsed .sidebar__brand-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    align-items: center;
    pointer-events: none;
}

.shell.is-collapsed .sidebar__brand-text .admin-badge {
    font-size: 8px;
    line-height: 12px;
    padding: 0 4px;
}

/* Daraltilmis halde rozet shield'in altina iner; mark+toggle'i yukari al. */
.shell.is-collapsed .sidebar__brand {
    padding-bottom: 12px;
}

@media (max-width: 768px) {
    .shell.is-collapsed .sidebar__brand-text {
        position: static;
        align-items: flex-end;
    }

    .shell.is-collapsed .sidebar__brand-text .admin-badge {
        font-size: 10px;
        line-height: 16px;
        padding: 0 6px;
    }

    .shell.is-collapsed .sidebar__brand {
        padding-bottom: 0;
    }
}

/* Giris: tek bolme (pazarlama bolmesi yok). */
.admin-login .admin-login__pane {
    flex: 1 1 100%;
}

.admin-login__card {
    max-width: 400px;
}

.admin-login__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.admin-login__brand .brand-mark {
    width: 28px;
    height: 28px;
    color: var(--accent-mark);
}

.login-step__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
}

.login-step__desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.login-step__link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    margin-top: 12px;
}

/* TOTP kurulumu — QR her iki temada da beyaz zemin uzerinde durur
   (authenticator uygulamalari koyu zeminli QR'i okuyamayabilir). */
.totp-qr {
    display: flex;
    justify-content: center;
    padding: 12px;
    margin: 0 auto 12px;
    width: fit-content;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.totp-qr svg {
    display: block;
    width: 200px;
    height: 200px;
}

.totp-secret {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.08em;
    word-break: break-all;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    margin-bottom: 16px;
    user-select: all;
}

.backup-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 16px;
    padding: 0;
    list-style: none;
}

.backup-codes li {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 15px;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    user-select: all;
}

.code-input {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 20px;
    letter-spacing: 0.3em;
    text-align: center;
}

/* Tenant detay: iki sutunlu kart izgarasi, dar ekranda tek sutun. */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 1000px) {
    .admin-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Panelin .dashboard-card'i ile ayni token'lar (--radius, 16px). */
.admin-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    min-width: 0;
}

.admin-card__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.admin-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Dashboard (fix/ui-batch) — kart basligindaki "Tümünü gör" baglantisi.
   `.login-step__link` (giris ekranlarindaki AYNI gorunumdeki dugme) burada
   KULLANILMAZ: onun `margin-top: 12px`'i tekil bir paragraf altinda dogru
   ama `.admin-card__title`'in flex satirinda (align-items: center) metni
   baslikla ayni hizada degil ASAGI kaydirirdi. */
.admin-card__title-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    flex: none;
}

.admin-kv {
    display: grid;
    grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
    gap: 6px 12px;
    font-size: 13px;
    margin: 0;
}

.admin-kv dt {
    color: var(--text-muted);
}

.admin-kv dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.suspended-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--radius);
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    font-size: 13px;
}

.suspended-banner .icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

.table tr.is-clickable {
    cursor: pointer;
}

/* Duzeltme (fix/ui-batch): burada `background: var(--bg)` ile duran eski
   ozel hover kurali, app.css'teki genel `.table tbody tr:hover td` kuralindan
   (--row-hover + sol vurgu) DAHA OZGULdu (.is-clickable ekstra sinif) ve onu
   SESSIZCE eziyordu — tikla-git tablolari (Musteriler, Lisanslar) diger
   tablolardan FARKLI bir hover zemini gosteriyor, vurgu cizgisini hic
   almiyordu. `.is-clickable` yalnizca imlec icin kaldi, hover gorunumu artik
   TUM tablolarda tek kaynaktan (app.css) gelir. */

.audit-diff {
    /* Dar ekranda sutun cok daralip satirlari metrelerce uzatmasin; tablo
       kendi .table-scroll kutusunda yatay kayar (0.1.1 mobil testi). */
    min-width: 240px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    color: var(--text-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
}

.health-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

.health-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.health-list li:last-child {
    border-bottom: 0;
}

.health-list__meta {
    color: var(--text-muted);
    font-size: 12px;
}

.exceeded-list {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
}

/* Duzeltme (fix/ui-batch) — reseller.css'te vardi, admin.css'te HIC
   yoktu: admin'in eski siparis formu duz bir `<p>` metni kullaniyordu
   (`.login-step__desc`), `.quote-box` gerektirmiyordu. Admin siparis
   ozeti artik bayidekiyle AYNI govdeyi (liste/iskonto/net satirlari)
   kullaniyor (bkz. orders.js refresh()); bu kural olmadan satirlar
   `display:flex` ALMADAN duz metin olarak alt alta/bitisik gorunuyordu
   (tarayici testinde yakalandi). */
.quote-box {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin: 4px 0 12px;
    font-size: 13px;
    min-height: 20px;
}

.quote-box:empty {
    display: none;
}

.quote-box__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}

.quote-box__row--total {
    font-weight: 700;
    font-size: 15px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 6px;
}

/* Form modallari (0.1.1): panelin davet formu gibi .field + .form-input
   kalibi — etiket girisin USTUNDE, girisler tam genislik. Panelin
   .modal__field'i (etiket ve kontrol YAN YANA) burada kullanilmaz. */
.modal--form {
    max-width: 560px;
}

.modal--wide {
    max-width: 640px;
}

.modal--form .field:last-of-type {
    margin-bottom: 12px;
}

/* "Siparis ver" formu — genis, 3 sutunlu duzen (fix/ui-batch). Eskiden
   `.modal--form` (560px) icinde TEK sutunda dikey siralanan ~8 alan, cift
   temel bir onay diyaloguna gore ORANSIZ uzun bir dikey kaydirma
   gerektiriyordu. Sol: kim/ne icin (musteri, bayi, paket, iskonto, fatura);
   orta: secenekler (sure, adet, para birimi, not); sag: canli fiyat ozeti +
   gonder/vazgec. Bayi formunda sol/orta daha az alan tasir (musteri/bayi
   secimi yok) ama AYNI govde/sinif adlarini kullanir — tek CSS kaynagi. */
.modal--order {
    max-width: 900px;
}

.order-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 260px);
    gap: 24px;
    align-items: start;
}

@media (max-width: 768px) {
    .order-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.order-form__col--summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-form__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.order-form__actions .btn {
    width: 100%;
}

.field-required {
    color: var(--danger);
    margin-left: 2px;
}

/* Hesap kartinda bayi satiri: ad + "Degistir". */
.inline-value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Uzun form modallari (0.1.1 — tarayici testinde yakalandi): panelin
   .modal-overlay'i ortalar ama TASMAYI kaydirmaz; 720px yukseklikte "Yeni
   bayi" formunun basligi ekranin ustunden tasiyordu. Sigiyorsa ortada,
   sigmiyorsa overlay kayar (margin:auto + flex-start deseni). app.css
   panelden kopya oldugu icin duzeltme burada; panelde de ayni kisit var. */
.modal-overlay {
    align-items: flex-start;
    overflow-y: auto;
}

.modal-overlay > .modal {
    margin: auto;
}

/* Gruplu ana menu (admin 0.2.0): grup basligi kucuk buyuk-harf etiket.
   Daraltilmis menude etiket gizlenir; gruplar ince bir cizgiyle ayrilir,
   yalnizca simgeler kalir (baglanti title'i tooltip saglar).
   fix/beta-polish — AKORDEON: basliga tiklamak grubu acar/digerlerini
   kapatir (bkz. layout.js wireSidebar); ayrinti asagida. */
.sidebar__section + .sidebar__section {
    margin-top: 12px;
}

/* Dashboard, gruplarin DISINDA tek basina bir `.sidebar__link`dir (bkz.
   layout.js TOP_ITEM) ve hemen ardindan ILK grup gelir — aralarinda hicbir
   bosluk kurali yoktu, Dashboard'un alt kenari ile ilk grup basligi
   neredeyse bitisik goruunuyordu (fix/ui-batch-2). Diger gruplar arasindaki
   12px ile AYNI deger kullanilir. */
.sidebar__link + .sidebar__section {
    margin-top: 12px;
}

.sidebar__section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    padding: 0 12px 4px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.sidebar__section-label:hover {
    color: var(--sidebar-text);
}

.sidebar__section-chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
    transform: rotate(-90deg);
}

.sidebar__section.is-open .sidebar__section-chevron {
    transform: rotate(0deg);
}

/* Kapali bir grubun oge listesi gizlenir — TEK istisna asagidaki
   ".shell.is-collapsed" kurali (ikon-yalnizca modda basliklarin kendisi
   zaten gorunmez, dolayisiyla hepsi acik gosterilir). */
.sidebar__section:not(.is-open) .sidebar__section-items {
    display: none;
}

.sidebar__link {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}

.shell.is-collapsed .sidebar__section-label {
    height: 0;
    padding: 0;
    visibility: hidden;
}

.shell.is-collapsed .sidebar__section-items {
    display: block;
}

.shell.is-collapsed .sidebar__section + .sidebar__section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
    .shell.is-collapsed .sidebar__section-label {
        height: auto;
        padding: 0 12px 4px;
        visibility: visible;
    }

    /* Mobilde "daraltilmis" masaustu tercihi gorsel olarak etkisizdir (bkz.
       app.css ".shell.is-collapsed .sidebar__link span" mobil override) —
       akordeon burada da GECERLI kalmalidir, yukaridaki ikon-yalnizca
       istisnasi mobilde GERI ALINIR. */
    .shell.is-collapsed .sidebar__section:not(.is-open) .sidebar__section-items {
        display: none;
    }
}


/* Musteriler sayfasi ustundeki ozet kartlari (bekleyen plan talepleri,
   7 gun icinde biten denemeler) — tiklaninca ilgili sayfaya gider. */
.overview-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .overview-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

.overview-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.overview-card:hover {
    border-color: var(--accent);
}

.overview-card__label {
    font-size: 13px;
    color: var(--text-muted);
}

.overview-card__value {
    font-size: 24px;
    font-weight: 700;
}

.overview-card.is-attention .overview-card__value {
    color: var(--warning);
}

/* --- Ticari ekranlar (admin 0.3.0, Oturum 8d) ----------------------------- */

/* Ozet kartlari 4'lu (musteri listesi): genis ekranda tek satir, ortada 2x2.
   auto-fit KULLANILMAZ — kart sayisini tam bolmeyen sutun sayisi son satiri
   dengesiz gerer (bkz. CLAUDE.md ".kpi-strip" dersi). */
@media (min-width: 1100px) {
    .overview-cards--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Admin Dashboard (fix/ui-batch) — 6 kart, AYNI gerekce (auto-fit degil): 6,
   3'e TAM bolunur (2 dengeli satir), 4'e bolunmez. */
@media (min-width: 1100px) {
    .overview-cards--6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Admin Dashboard (Oturum 8e) — 6'dan 8'e cikti (Web Talepleri + Bayi
   Basvurulari eklendi): 8, 4'e TAM bolunur (2 dengeli satir), 3'e bolunmez —
   6 icin kullanilan gerekcenin AYNISI, yeni sutun sayisi. */
@media (min-width: 1100px) {
    .overview-cards--8 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Lisanslar sayfasinda kartlar filtre kisayoludur (<button>). */
button.overview-card {
    font: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.catalog-product + .catalog-product {
    margin-top: 16px;
}

.catalog-product .admin-card__actions {
    margin-top: 0;
}

.price-grid th[scope="row"] {
    white-space: nowrap;
    font-weight: 500;
}

.price-grid .form-input {
    min-width: 90px;
}

.text-warn {
    color: var(--warning, #b45309);
}

/* Maskeli lisans anahtari tablo hucresinde tek satir kalir (Oturum 8d). */
.table code {
    white-space: nowrap;
}

/* --- Beta geri bildirim (Oturum 8g) — beta/public/assets/css/beta.css
   ile AYNI kurallar, admin'in kendi modal--wide detayinda kullanilir. --- */
.feedback-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 16px;
}

.feedback-message {
    max-width: 80%;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
}

.feedback-message--admin {
    align-self: flex-start;
    background: var(--surface);
}

.feedback-message--tester {
    align-self: flex-end;
    background: var(--chip-bg, var(--bg));
}

.feedback-message__meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.feedback-message__body {
    font-size: 13px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.feedback-attachments {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.feedback-attachments a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
}

/* Beta basvuru onayi sonuc kutusu (fix/beta-polish) — panel/beta invite
   e-postalarinin ikisinin de gonderilip gonderilmedigini ayri satirlarda,
   ikonla gosterir (bkz. beta-applications.js decide()). */
.decision-result {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0;
}

.decision-result__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.decision-result__row .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.decision-result__row--ok .icon {
    color: var(--success);
}

.decision-result__row--bad .icon {
    color: var(--danger);
}

/* Okunmamis geri bildirim gostergesi (fix/beta-polish) — beta.css'teki
   AYNI iki sinifin kopyasi (ayri web koku, paylasilamaz; biri degisirse
   digeri elle guncellenir). */
.unread-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
    margin-right: 6px;
    vertical-align: middle;
}

.table tr.is-unread td:first-child {
    font-weight: 600;
}

/* Dashboard grafikleri (fix/ui-batch-2) — Sistem Sagligi/Son Admin Islemleri
   kartlarinin ALTINDA. `.charts-grid`/`.dashboard-card`/`.online-trend`/
   `.status-donut*` govdeleri shared/app.css'te zaten tanimli;
   burada yalnizca admin'e OZGU "musteri dagilimi" halkasinin 4 tonu
   eklenir — online/stale/offline (ok/warn/bad) ile FARKLI bir anlam
   tasidigi icin o tonlari semantik olarak YENIDEN KULLANMAZ. */
.status-donut__arc--free {
    stroke: var(--text-muted);
}

.status-donut__arc--pro {
    stroke: var(--accent);
}

.status-donut__arc--business {
    stroke: var(--success);
}

.status-donut__arc--trial {
    stroke: var(--warning);
}

.status-donut__swatch--free {
    background: var(--text-muted);
}

.status-donut__swatch--pro {
    background: var(--accent);
}

.status-donut__swatch--business {
    background: var(--success);
}

.status-donut__swatch--trial {
    background: var(--warning);
}

/* Sistem Sagligi / Son Admin Islemleri (fix/ui-batch-2) — `.admin-grid`nin
   grid varsayilani zaten `align-items: stretch`tir (bu satir yalnizca
   NIYETI acikca yazar); asil "dengesiz" gorunumun kaynagi Son Islemler
   listesinin Saglik kartindan cok daha uzun olmasiydi (8 satir vs ~7 kv
   satiri) — dashboard.js'te 5 satira indirildi (bkz. "Tumunu gor" linki
   zaten vardi), boylece iki kart DOGAL icerik yuksekligiyle de birbirine
   yakin kalir. `margin-top` eklendi: bu grup artik `.charts-grid`in
   ALTINDA (grafikler ustte, bkz. dashboard.js) — panelin AYNI sirada
   `.dashboard-grid`i kullandigi desen (kendi ust boslugunu KENDI tasir,
   bir onceki elemanin alt boslugundan bagimsiz), `.charts-grid`in yalniz
   `margin-top` tasimasiyla (app.css) AYNI gerekce. */
.admin-grid {
    align-items: stretch;
    margin-top: 16px;
}

/* Admin Dashboard (feature/self-signup) — 8'den 9'a cikti ("Son 7 gun yeni
   kayit" eklendi): 9, 3'e TAM bolunur (3 dengeli satir), 4'e bolunmez —
   8/6 icin kullanilan gerekcenin AYNISI, yeni sutun sayisi. */
@media (min-width: 1100px) {
    .overview-cards--9 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* Sistem -> Indirmeler (feature/download-stats) — admin'e OZGU. Renkler yalnizca
   token'lardan gelir; agent = vurgu, pinger = basari tonu (iki urun her iki
   temada ayirt edilir). 4 kartlik KPI satiri: sabit 4 sutun (5/7 sutunlu
   genel .kpi-strip kuralinin ayni gerekcesi — auto-fit degil). */
.kpi-strip--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 560px) {
    .kpi-strip--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dl-bar--agent,
.dl-swatch--agent {
    fill: var(--accent);
    background: var(--accent);
}

.dl-bar--pinger,
.dl-swatch--pinger {
    fill: var(--success);
    background: var(--success);
}

.dl-legend {
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.dl-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
}

.dl-hbars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.dl-hbar {
    display: grid;
    grid-template-columns: minmax(80px, 140px) 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.dl-hbar__track {
    height: 10px;
    border-radius: 999px;
    background: var(--divider);
    overflow: hidden;
}

.dl-hbar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

/* --- Beta -> Surumler (fix/beta-channel) --------------------------------- */
.channel-sha {
    overflow-wrap: anywhere;
}

.release-text {
    margin-top: 10px;
    font-size: 13px;
}

/* admin 0.9.11: dil satiri — "TR" etiketi + Markdown govdesi yan yana */
.release-text__lang {
    display: flex;
    gap: 6px;
    align-items: baseline;
    margin-top: 2px;
}

.release-text__lang > .md-body {
    flex: 1;
    min-width: 0;
}

/* agent 0.9.5: kanal basina filo sayaclari */
.release-fleet__title {
    margin: 14px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* admin 0.9.10 (agent 0.9.7): surum gecmisi */
.release-history {
    margin-bottom: 24px;
}

.release-current {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--success);
    color: var(--success);
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

.release-issue {
    margin-top: 4px;
    display: flex;
    gap: 4px;
    align-items: flex-start;
    color: var(--warning);
    font-size: 12px;
}

.release-steps {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
}

.release-steps li + li {
    margin-top: 10px;
}

.code-block {
    margin: 4px 0 0;
    padding: 8px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
    font-size: 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}