@charset "UTF-8";
/* ==========================================================================
   AYDUKE · style.css
   Sayfa & bölüm stilleri. Tokenlar ve ortak bileşenler theme.css içindedir.
   Yükleme sırası: bootstrap.min.css  →  theme.css  →  style.css

   İÇİNDEKİLER
   1 · Sayfa iskeleti
   2 · Header — kabuk
   3 · Header — logo
   4 · Header — navigasyon
   5 · Header — sağ blok (dil seçimi + Giriş Yap)
   6 · Header — hamburger
   7 · Mobil menü — drawer (sağdan sola)
   8 · Karartma (scrim)
   9 · Hero — yerleşim, zemin, metin kartı
  10 · Hero — radyal gönderi animasyonu (.orb)
  11 · Ortak bölüm kalıbı (.sec) + görünüme girme (.reveal)
  12 · Sistem Hakkında — #hakkinda (.abt)
  13 · Nasıl Çalışır? — #nasil (.how)
  13b · Özellikler — #ozellikler (.abt__grid--4, .plt, .gvn)
  13c · AI Asistan — #asistan (.ast, .sbm)
  13d · Sesli asistan vitrini — #asistan (.ses, .sbm--ses)
  13e · Sipariş ve Talep — #siparis (.ast__grid--ters, .sbm__sepet)
  13f · Ekip ve Yetkiler — #ekip (.tmm)
  14 · Paketlerimiz — #paketler (.pkg)
  15 · Tanıtım Filmi — #tanitim (.vid) + sinema modu (.cine)
  16 · Yardım — #yardim (.faq)
  17 · Bize Ulaşın — #iletisim (.cnt)
  18 · Footer (.ftr)
  19 · WhatsApp düğmesi — sağ altta sabit (.wa)
  20 · Yasal metinler (.doc) — gizlilik, kullanım koşulları, çerez politikası
  21 · Sayfa bulunamadı (.nf) — 404.php
  22 · Ödeme dönüş sayfaları (.odeme) — odeme-basarili, odeme-iptal
  23 · Kimlik ekranları (.auth) — panel/giris, kayit, sifremi-unuttum,
       sifre-sifirla  (+ .pw şifre göster/gizle ve güç çubuğu)
  24 · Sağdan sola yazım ([dir="rtl"]) — Arapça

   Bölüm numaraları sayfadaki sırayı takip eder; yeni bölüm araya girerse
   sonraki numaralar kaydırılır ve bu liste güncellenir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Sayfa iskeleti
   -------------------------------------------------------------------------- */
body {
    padding-top: var(--h);
    transition: padding-top var(--t-slow) var(--ease-out);
}

/* --------------------------------------------------------------------------
   1a · Header'sız sayfalar  (html.ay-nohdr)  —  panel/_panel.php

   Yukarıdaki dolgu fixed header'ın payı. Panel kabuğu header basmıyor
   ($ay_header_yok, bkz. _head.php) ama payı yine alıyordu:

     · sayfanın tepesinde 92 piksellik boş şerit,
     · .pnl min-height: 100vh olduğundan belge 100vh + 92px → içerik sığsa
       bile dikey kaydırma çubuğu,
     · kaydırınca html.hdr-compact geliyor, --h 92 → 82 düşüyor ve dolgu
       ANİMASYONLU olduğu için panelin tamamı 10 piksel kayıyordu.

   transition de kapatılıyor: değer artık değişmiyor ama --h değişimi
   geçişi yine tetiklerdi.

   scroll-padding-top sıfırlanıyor: header yoksa çıpaya inen bağlantının
   (ör. "içeriğe geç" → #main) 108 piksel fazla kaydırmasının anlamı yok.

   scrollbar-gutter: stable — panel sayfaları arasında biri kaydırma çubuğu
   gerektirip diğeri gerektirmediğinde içerik yatay olarak zıplıyordu; yer
   her zaman ayrılıyor. Yalnızca bu sınıfta: ön yüzde hero tam genişlik
   kullanıyor ve orada çubuk her zaman var.
   -------------------------------------------------------------------------- */
html.ay-nohdr {
    scroll-padding-top: 0;
    scrollbar-gutter: stable;
}

html.ay-nohdr body {
    padding-top: 0;
    transition: none;
}

/* --------------------------------------------------------------------------
   2 · Header — kabuk (full genişlik, fixed top, içerik container'da)
   -------------------------------------------------------------------------- */
.hdr {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    height: var(--h);
    transition: height var(--t-slow) var(--ease-out),
                background-color .3s var(--ease),
                box-shadow .3s var(--ease);
}

/* alt hairline — scroll'a kadar gizli */
.hdr::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: var(--hairline);
    opacity: 0;
    transition: opacity .3s var(--ease);
}

html.hdr-compact .hdr {
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--sh-2);
}

html.hdr-compact .hdr::after { opacity: 1; }

.hdr__inner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   3 · Header — logo
   -------------------------------------------------------------------------- */
.hdr__brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-sm);
}

/* hover'da logo soluklaşmasın */
.hdr__brand:hover,
.hdr__brand:focus-visible { opacity: 1; }

.hdr__brand img {
    display: block;
    width: auto;
}

/* header içindeki logo ölçüsü — scroll'da küçülür

   DOSYA: images/logo.png. Header bir süre eski ayduke-logo.png'yi kullanıyordu;
   o tuvalin yalnızca ~%37'si yazı, gerisi dosyanın içine gömülü boşluktu.
   Yükseklikler kırpılmış dosyaya göre ayarlı olduğu için (28px) yazı ekranda
   ~10px kalıyordu: header'daki logo footer'dakinin yarısından küçük
   görünüyordu. İki yer de artık aynı dosyayı kullanıyor.

   Kırpılmış dosyada yazı tuvalin ~%96'sını dolduruyor, yani buradaki yükseklik
   ekrandaki yazı yüksekliğine eşit sayılır. 92px'lik header için 32px. */
.hdr .hdr__brand img {
    height: 32px;
    transition: height var(--t-slow) var(--ease-out);
}

/* scroll'da header 92 → 82px; logo da oranla küçülür */
html.hdr-compact .hdr .hdr__brand img { height: 28px; }

/* Hamburger menülü ölçüler (xl altı).

   Sabit yükseklik VERİLEMİYOR: logo çok geniş oranlı (2444×358 ≈ 6,8:1), yani
   28px yükseklik 191px genişlik demek. 320-360px'lik telefonlarda logo + dil
   düğmesi + hamburger aynı satıra sığmıyor, sağ blok ekranın dışına taşıyordu
   (ölçtüm: 320px'te dil düğmesi ve hamburger hiç görünmüyor).

   clamp ile yükseklik ekran genişliğine bağlandı: 320px'te 24px, 400px ve
   üstünde 28px. 320px'te ölçtüm: logo 164px, sağ blok 208px'te başlıyor —
   çakışma yok. */
@media (max-width: 1199.98px) {
    .hdr .hdr__brand img,
    html.hdr-compact .hdr .hdr__brand img { height: clamp(24px, 7vw, 28px); }
}

/* --------------------------------------------------------------------------
   4 · Header — navigasyon (masaüstünde container içinde tam ortalı)

   Kırılım xl (1200px). Menü position:absolute ile ortalandığı için flex
   akışında yer ayırmaz; 992–1199 arasında büyük logo + 6 bağlantı + sağ blok
   aynı satıra sığmayıp üst üste biniyordu (menü 592px istiyor, boşluk 526px).
   Bu aralık hamburger menüye bırakıldı.
   -------------------------------------------------------------------------- */
.hdr__nav { display: none; }

@media (min-width: 1200px) {
    .hdr__nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
}

.hdr__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 36px;
    padding: 0 .8125rem;
    border-radius: 10px;
    font-size: var(--fs-base);
    font-weight: 500;
    letter-spacing: -.015em;
    color: var(--ink);
    white-space: nowrap;
    isolation: isolate;
    transition: color .2s var(--ease);
}

/* hover pill */
.hdr__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--brand-soft);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .22s var(--ease), transform .4s var(--ease-out);
}

.hdr__link:hover,
.hdr__link:focus-visible { color: var(--brand); }

.hdr__link:hover::before,
.hdr__link:focus-visible::before { opacity: 1; transform: scale(1); }

/* Aktif bölüm göstergesi: altta duran nokta kaldırıldı — menünün altına
   yapışmış tek bir benek amatör duruyordu. Yerine bağlantının kendi hover
   hapı hafifçe açık kalıyor: aynı dil, ek bir öğe yok. */
.hdr__link.is-active { color: var(--brand); font-weight: 600; }

.hdr__link.is-active::before { opacity: 1; transform: scale(1); }

/* imleç üzerine gelince aktif hap bir tık daha belirginleşiyor */
@media (hover: hover) and (pointer: fine) {
    .hdr__link.is-active:hover::before { background: var(--brand-tint); }
}

/* Drawer'da hap kullanılmıyor (satırlar tam genişlikte, hap blok gibi
   duruyor): orada aktiflik yalnızca marka rengi ve kalın yazıyla veriliyor
   — bkz. § 7 içindeki .drawer .hdr__link::before { display: none } */

/* xl–xxl arası daralt */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hdr__link { font-size: var(--fs-sm); padding: 0 .625rem; }
}

/* --------------------------------------------------------------------------
   5 · Header — sağ blok
   -------------------------------------------------------------------------- */
.hdr__actions {
    margin-inline-start: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

@media (max-width: 1199.98px) {
    .hdr__actions { gap: .375rem; }
}

/* Girişli hâlde düğmedeki kullanıcı işareti ("Hesabım").

   Etiketin tek başına değişmesi gözden kaçıyor: "Giriş Yap" ile "Hesabım"
   benzer uzunlukta ve aynı dolu lacivert düğmenin içinde. Küçük bir ikon
   durumun değiştiğini bir bakışta söylüyor.

   Boşluk .ay-btn'in kendi gap'inden (.45rem, theme.css § 3) — burada ayrıca
   margin verilmiyor. Ölçü globe ikonuyla aynı (17px): iki düğme yan yana
   duruyor ve ikonları farklı boyda olsaydı hizasızlık görünürdü. */
.hdr__hesap_ikon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
}

/* --- 5a · Dil seçimi (masaüstü dropdown) --- */
.lang { position: relative; }

.lang__btn { padding: 0 .625rem 0 .75rem; }

.lang__btn .globe {
    font-size: 16px;
    opacity: .78;
    transition: opacity var(--t-base) var(--ease);
}

.lang__btn:hover .globe,
.lang__btn[aria-expanded="true"] .globe { opacity: 1; }

.lang__btn .caret {
    font-size: 10px;
    opacity: .5;
    transition: transform .3s var(--ease-out), opacity .22s var(--ease);
}

.lang__btn[aria-expanded="true"] .caret { transform: rotate(180deg); opacity: .9; }

.lang__menu {
    top: calc(100% + 10px);
    /* Açılır menü düğmenin bittiği kenara yapışır: LTR'de sağ, RTL'de sol.
       inset-inline-end ikisini de karşılıyor. */
    inset-inline-end: 0;
    min-width: 216px;
    /* transform-origin logical değer almıyor (top inline-end geçerli değil),
       RTL karşılığı § 24'te veriliyor. */
    transform-origin: top right;
}

.lang__item .tick {
    font-size: 14px;
    margin-inline-start: auto;
    color: var(--brand);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}

.lang__item.is-active .tick { opacity: 1; }

/* --- 5b · Dil seçimi (mobil) — hamburgerin hemen solunda, kompakt --- */
@media (max-width: 1199.98px) {
    .lang__btn {
        gap: .3125rem;
        height: 34px;
        padding: 0 .5625rem;
        font-weight: 700;
    }

    .lang__btn .globe { font-size: 15px; }
    .lang__btn .caret { display: none; }

    .lang__menu {
        top: calc(100% + 8px);
        min-width: 204px;
    }
}

/* --- 5c · Dil seçim kipi — "Dilini seç" (2026-09-30 · YENİDEN TASARIM) ----
   Markup _dil_kip.php, davranış js/theme.js → AY.DilKip. Kabuk (örtü,
   açılış hareketi, kapat düğmesi, kaydırma kilidi) theme.css § 9b.

   İSKELET (masaüstü = telefon):
     .dilk__ust    başlık + X                    ┐
     .dilk__arac   arama + bölge sekmeleri       ┘ SABİT
     .dilk__gov    favoriler + dil ızgarası        KAYAN (tek kaydırıcı)

   Sekmeler kaydırıcının DIŞINDA — önceki tasarımdaki sticky şerit
   telefonda ilk satırı örtüyordu. Masaüstünde ızgara auto-fill (3-4
   sütun), telefonda 2 sütun ve kip ekranı kaplıyor. */
.dilk__kart {
    width: min(56rem, 100%);
    height: min(40rem, 88vh);
    height: min(40rem, calc(100dvh - 2rem));
    max-height: none;
}

/* Kart açılışta odağı alıyor (tabindex="-1", AY.DilKip): kendisi bir
   kontrol değil, halka çizilmesin. İçerideki öğelerin halkası duruyor. */
.dilk__kart:focus { outline: none; }

/* --- Başlık ---------------------------------------------------------------- */
.dilk__ust {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 3.5rem;
    padding: .75rem 3.5rem;
    border-bottom: 1px solid var(--hairline);
}

.dilk__h {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-lg);
    font-weight: 650;
    letter-spacing: -.01em;
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Başlığın sağındaki dil sayısı rozeti (_dil_kip.php) */
.dilk__rozet {
    min-width: 1.75rem;
    padding: .125rem .5rem;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand-accent);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dilk__kapat {
    position: absolute;
    top: 50%;
    inset-inline-end: .875rem;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    border-color: transparent;
    border-radius: var(--r-pill);
    font-size: 18px;
}

/* --- Sabit bölüm: arama + sekmeler ----------------------------------------- */
.dilk__arac {
    display: grid;
    gap: .75rem;
    flex: 0 0 auto;
    padding: .875rem 1.25rem .75rem;
    border-bottom: 1px solid var(--hairline);
}

.dilk__ara { position: relative; }

.dilk__ara_ikon {
    position: absolute;
    top: 50%;
    inset-inline-start: .875rem;
    transform: translateY(-50%);
    color: var(--ink-mute);
    font-size: 14px;
    pointer-events: none;
}

.dilk__ara_kutu {
    width: 100%;
    padding-inline-start: 2.5rem;
}

/* 16px: iOS Safari 16 pikselin altındaki alana odaklanınca sayfayı
   yakınlaştırıyor; dil kipi telefonda tam ekran açıldığı için yakınlaşma
   kipin tamamını kaydırıyordu (--fs-base = 15px). */
@media (max-width: 991.98px) {
    .dilk__ara_kutu { font-size: 1rem; }
}

/* Sekmeler: tek satır, sığmazsa yatay kayıyor (telefonda). Kenardaki
   odak halkası kırpılmasın diye iç boşluk + eşit negatif pay. */
.dilk__sekmeler {
    display: flex;
    gap: .375rem;
    margin: -.25rem;
    padding: .25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.dilk__sekmeler::-webkit-scrollbar { display: none; }

.dilk__sekme {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    flex: 0 0 auto;
    min-height: 2.25rem;
    padding: .375rem .875rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

.dilk__sekme:hover { border-color: var(--brand-line); color: var(--ink); }

.dilk__sekme[aria-pressed="true"] {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.dilk__sayi {
    min-width: 1.25rem;
    padding: .0625rem .375rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-mute);
    font-size: .6875rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dilk__sekme[aria-pressed="true"] .dilk__sayi {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* --- Kayan bölüm --------------------------------------------------------- */
.dilk__gov {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem 1.25rem;
}

.dilk__liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: .25rem .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* hidden özniteliği ızgara öğesinde de kesin çalışsın */
.dilk__liste > li[hidden],
.dilk__onerilen[hidden] { display: none; }

.dilk__hucre {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Favori şeridi: çerçeveli satırlar, altında çizgi */
.dilk__onerilen {
    gap: .5rem;
    margin-bottom: .875rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--hairline);
}

.dilk__onerilen .dilk__oge {
    border: 1px solid var(--hairline);
    background: var(--surface);
}

.dilk__onerilen .dilk__oge:hover,
.dilk__onerilen .dilk__oge:focus-visible { background: var(--surface-2); }

.dilk__onerilen .dilk__oge.is-active {
    border-color: var(--brand-line);
    background: var(--brand-tint);
}

/* --- Satır ------------------------------------------------------------------ */
.dilk__oge {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3.25rem;
    padding: .5rem .75rem;
    border-radius: var(--r-md);
    color: var(--ink);
    text-decoration: none;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.dilk__oge:hover,
.dilk__oge:focus-visible {
    background: var(--surface-2);
    color: var(--ink);
}

.dilk__oge.is-active {
    background: var(--brand-tint);
    color: var(--brand);
}

.dilk__bayrak {
    flex: 0 0 auto;
    width: 28px;
    height: 21px;
    border-radius: 4px;
    object-fit: cover;
    /* Beyaz alanlı bayraklar (JP, PL, CA) beyaz kartta kenarsız kaybolmasın */
    box-shadow: 0 0 0 1px rgba(2, 12, 33, .1);
}

.dilk__bayrak--yok {
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--ink-mute);
    font-size: 11px;
}

.dilk__metin {
    display: flex;
    flex-direction: column;
    /* Sağdan sola yazılan ad (العربية) bayrağın yanında dursun */
    align-items: flex-start;
    min-width: 0;
    line-height: 1.3;
}

/* Dilin adı kırpılmıyor, gerekirse alta kırılıyor ("Bahasa Indonesia"
   dört sütunda "Bahasa Indone…" oluyordu). */
.dilk__yerel {
    max-width: 100%;
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dilk__ad {
    max-width: 100%;
    overflow: hidden;
    color: var(--ink-mute);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dilk__oge.is-active .dilk__ad { color: inherit; opacity: .75; }

.dilk__cihaz {
    align-self: flex-start;
    margin-top: .1875rem;
    padding: .0625rem .4375rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.5;
}

.dilk__oge .tick {
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: var(--brand);
    font-size: 14px;
    opacity: 0;
}

.dilk__oge.is-active .tick { opacity: 1; }

.dilk__yok {
    margin: 0;
    padding: 2rem .75rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    text-align: center;
}

/* Header'daki düğme liste açmıyor, kip açıyor: ok yukarı dönmesin */
.lang__btn[aria-haspopup="dialog"][aria-expanded="true"] .caret { transform: none; }

/* --- Telefon: tam ekran, 2 sütun (kullanıcı: "bir satırda yanyana 2 dil,
       çok yer kaplamasın"). Uzun adlar ("Bahasa Indonesia") kırpılmasın
       diye ad alta kırılabiliyor; yer açmak için bayrak küçülüyor, onay
       işareti gizleniyor — etkin satır zemin rengiyle ve aria-current
       ile belli. ------------------------------------------------------------ */
@media (max-width: 640px) {
    .ay-modal.dilk { padding: 0; }

    .dilk__kart {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .dilk__ust {
        min-height: 3.25rem;
        padding: calc(.625rem + env(safe-area-inset-top, 0px)) 3.25rem .625rem;
    }

    .dilk__kapat {
        top: calc(50% + env(safe-area-inset-top, 0px) / 2);
        inset-inline-end: .5rem;
    }

    .dilk__arac {
        gap: .625rem;
        padding: .625rem .75rem;
    }

    .dilk__sekme {
        min-height: 2rem;
        padding: .3125rem .75rem;
    }

    .dilk__gov {
        padding: .625rem .5rem calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .dilk__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .125rem .25rem; }

    .dilk__onerilen {
        gap: .375rem;
        margin-bottom: .625rem;
        padding-bottom: .625rem;
    }

    .dilk__oge {
        gap: .5rem;
        min-height: 2.875rem;
        padding: .4375rem .5rem;
    }

    .dilk__bayrak {
        width: 22px;
        height: 16px;
        border-radius: 3px;
    }

    .dilk__yerel { font-size: .8125rem; }

    .dilk__ad { font-size: .6875rem; }

    .dilk__oge .tick { display: none; }

}

/* --------------------------------------------------------------------------
   6 · Header — hamburger
   -------------------------------------------------------------------------- */
.hdr__burger { margin-inline-end: -6px; }

.hdr__burger i {
    position: absolute;
    inset-inline-start: 11px;
    width: 18px;
    height: 1.75px;
    border-radius: 2px;
    background: var(--brand);
    transition: transform .42s var(--ease-out), opacity var(--t-fast) var(--ease);
}

.hdr__burger i:nth-child(1) { top: 14px; }
.hdr__burger i:nth-child(2) { top: 19px; }
.hdr__burger i:nth-child(3) { top: 24px; }

.hdr__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.hdr__burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 1200px) {
    .hdr__burger { display: none; }
}

/* --------------------------------------------------------------------------
   7 · Mobil menü — sağdan sola açılan drawer
   -------------------------------------------------------------------------- */
.drawer {
    position: fixed;
    top: 0;
    /* Panel satır sonu kenarından girer: LTR'de sağ, RTL'de sol. */
    inset-inline-end: 0;
    bottom: 0;
    z-index: var(--z-drawer);
    width: min(88vw, 360px);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    /* Görünen kenar panelin içe bakan tarafı — logical olduğu için RTL'de
       kendiliğinden diğer tarafa geçiyor. */
    border-inline-start: 1px solid var(--hairline);
    /* Gölge ve transform logical DEĞİL: RTL karşılıkları § 24'te. */
    box-shadow: -24px 0 60px -24px rgba(16, 24, 40, .35);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .5s var(--ease-out), visibility .5s var(--ease);
    will-change: transform;
}

body.nav-open .drawer {
    transform: translateX(0);
    visibility: visible;
}

@media (min-width: 1200px) {
    .drawer, .scrim { display: none; }
}

/* üst şerit: logo + kapat */
.drawer__top {
    flex: 0 0 auto;
    height: var(--h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--hairline);
}

/* Üst şerit header ile aynı yükseklikte (--h), logo da header'daki mobil
   ölçüyle AYNI clamp'i kullanıyor: menü açılıp kapanırken logo büyüyüp
   küçülmüyor. Panel genişliği min(88vw, 360px) olduğu için dar telefonda
   logo + kapat düğmesi ancak bu ölçüyle sığıyor. */
.drawer__top .hdr__brand img { height: clamp(24px, 7vw, 28px); }
.drawer__close { width: 38px; height: 38px; margin-inline-end: -8px; }

/* gövde */
.drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: .5rem 1.25rem 1.25rem;
}

.drawer__body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.drawer .hdr__link {
    height: auto;
    width: 100%;
    justify-content: space-between;
    padding: .9375rem .125rem;
    border-radius: 0;
    font-size: var(--fs-lg);
    color: var(--ink);
}

.drawer .hdr__link::before { display: none; }
.drawer li + li .hdr__link { border-top: 1px solid var(--hairline); }
.drawer .hdr__link:active { color: var(--brand); }
.drawer .hdr__link:active .ay-chev { transform: rotate(-45deg) translate(2px, 2px); }

/* alt blok: Giriş Yap (dil seçimi header'a taşındı) */

/* ⚠ ARALIK 'gap' İLE, KOMŞU MARGIN'İ İLE DEĞİL  —  2026-09-25 (hata düzeltme)

   Burada '.drawer__foot > * + * { margin-top: .75rem }' vardı ve panelde
   ÖLÇÜLEREK ÇÖKTÜ: alt bloğa ikinci bir öğe ("Profilim") eklendiğinde iki
   düğme BİRBİRİNE YAPIŞIK basıldı (kullanıcı ekran görüntüsüyle bildirdi).

   Sebep özgüllük eşitliği: kuralın seçicisi tek sınıf + iki evrensel öğe,
   yani (0,1,0). Panelin çıkış formu da '.pnl__drw_cikis { margin: 0 }' ile
   (0,1,0) ve § 24c dosyada DAHA SONRA geliyor — eşitlikte sonraki kazanıyor,
   margin-top sıfırlanıyor. Kural tek çocuk varken hiç görünmeyen bir
   tuzaktı: sıfırlama zararsız duruyordu çünkü sıfırlanacak bir aralık yoktu.

   'gap' aynı işi kardeşlerin margin'ine hiç dokunmadan yapıyor; çocuğun
   'margin: 0' yazması artık aralığı etkilemiyor. Alt blok tek kolon, yani
   flex sütunu görsel olarak da eşdeğer: tek çocuklu sitenin drawer'ında
   (Giriş Yap) hiçbir şey değişmiyor, .ay-btn--block çocuk stretch ile zaten
   tam genişlikte kalıyor. */
.drawer__foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hairline);
    background: rgba(255, 255, 255, .6);
}

/* kademeli giriş — sağdan */
body.nav-open .drawer__body li,
body.nav-open .drawer__foot > * {
    animation: drawerIn .55s var(--ease-out) both;
}

.drawer__body li:nth-child(1) { animation-delay: .100s; }
.drawer__body li:nth-child(2) { animation-delay: .145s; }
.drawer__body li:nth-child(3) { animation-delay: .190s; }
.drawer__body li:nth-child(4) { animation-delay: .235s; }
.drawer__body li:nth-child(5) { animation-delay: .280s; }
.drawer__body li:nth-child(6) { animation-delay: .325s; }
.drawer__foot > *:nth-child(1) { animation-delay: .370s; }
.drawer__foot > *:nth-child(2) { animation-delay: .410s; }

@keyframes drawerIn {
    from { opacity: 0; transform: translateX(22px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   8 · Karartma
   -------------------------------------------------------------------------- */
.scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: rgba(16, 24, 40, .28);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
}

body.nav-open .scrim { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   9 · Hero — yerleşim, zemin, metin bloğu

   Mobil: tek kolon, metin üstte, görsel altta, ortalı.
   lg+   : iki kolon — metin SOLDA, görsel SAĞDA. Görsel sıra DOM sırasıyla
           aynı olduğu için ayrıca yerleştirme kuralı gerekmiyor.
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.5rem, 3.4vw, 2.5rem) 0 clamp(2.5rem, 4.5vw, 3.5rem);
    text-align: center;
}

.hero__grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
}

.hero__visual {
    display: grid;
    place-items: center;
    min-width: 0;
}

@media (min-width: 992px) {
    /* kalan ekranı doldur, içeriği dikeyde ortala
       alt boşluk: bölümün dibine sabitlenen kaydırma ipucuna yer ayırıyor */
    .hero {
        display: grid;
        align-content: center;
        min-height: min(760px, calc(100vh - var(--h)));
        padding: clamp(2.25rem, 4vw, 3.75rem) 0 clamp(5.5rem, 7vw, 7.5rem);
    }

    /* Metin kolonu belirgin şekilde geniş: başlık iki satıra sığıyor, açıklama
       daha az kırılıyor. Sağ kolon sabit ölçülü .orb'u barındırdığı için
       fazlalık alan metne verilebiliyor. */
    .hero__grid {
        grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
        align-items: center;
    }
}

/* --- 9a · Dekoratif zemin --- */
/* Zemin .hero tarafından overflow:hidden ile kırpılıyor; maske olmadan
   parlama ve doku kenarlarda keskin kesilip gri bir blok gibi görünüyor.
   Radyal maske her dört kenara varmadan sıfıra indiriyor. */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(118% 94% at 50% 34%, #000 28%, transparent 94%);
            mask-image: radial-gradient(118% 94% at 50% 34%, #000 28%, transparent 94%);
}

.hero__glow {
    position: absolute;
    left: 50%;
    border-radius: 50%;
    transform: translateX(-50%);
}

.hero__glow--1 {
    top: -22%;
    width: min(880px, 130vw);
    height: min(620px, 92vw);
    background: radial-gradient(closest-side, rgba(1, 30, 90, .13), rgba(1, 30, 90, 0) 100%);
}

.hero__glow--2 {
    bottom: -34%;
    width: min(680px, 108vw);
    height: min(460px, 76vw);
    background: radial-gradient(closest-side, rgba(1, 30, 90, .07), rgba(1, 30, 90, 0) 100%);
}

/* nokta dokusu — kenarlara doğru eriyor */
.hero__mesh {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(1, 30, 90, .11) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 62% 54% at 50% 40%, #000, transparent 82%);
            mask-image: radial-gradient(ellipse 62% 54% at 50% 40%, #000, transparent 82%);
}

.hero__defs { position: absolute; width: 0; height: 0; overflow: hidden; }



/* --- 9b · Metin bloğu
   Kasıtlı olarak kabuksuz: beyaz zemin üzerinde kenarlıklı/gölgeli beyaz bir
   kart, üzerine yapıştırılmış ayrı bir katman gibi duruyordu. Blok artık
   doğrudan hero zeminine oturuyor, hiyerarşiyi tipografi taşıyor. --- */
.hero__card {
    position: relative;
    min-width: 0;
}

@media (min-width: 992px) {
    .hero__card { text-align: left; }
}

/* --- 9b · Üst etiket --- */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 30px;
    margin: 0 0 1.125rem;
    padding: 0 .8125rem;
    border-radius: var(--r-pill);
    /* zemine gömülü tint — beyaz kart + gölge sticker gibi duruyordu */
    background: var(--brand-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand);
}

.hero__pulse {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16A34A;
    animation: heroPulse 2.2s var(--ease-out) infinite;
}

@keyframes heroPulse {
    0%        { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
}

/* --- 9c · Başlık & açıklama --- */
.hero__title {
    max-width: 26ch;
    margin: 0 auto 1rem;
    font-size: clamp(1.75rem, 3.6vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    text-wrap: balance;
}

/* kartın içinde genişliği kart belirler, ortalama kalkar */
@media (min-width: 992px) {
    .hero__title { max-width: none; margin-inline-start: 0; margin-inline-end: 0; }
}

/* Vurgu düz renkle veriliyor. Önceki fosforlu bant satır kırılmasında ikiye
   bölünüp metnin arkasında ayrı bir katman gibi duruyordu. */
.hero__em { color: var(--brand-accent); }

.hero__lead {
    max-width: 54ch;
    margin: 0 auto;
    font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
    line-height: 1.6;
    color: var(--ink-soft);
    text-wrap: pretty;
}

@media (min-width: 992px) {
    /* genişleyen kolonu açıklama da kullansın — 54ch'de satır sonları
       kartın ortasında kalıp sağda boşluk bırakıyordu */
    .hero__lead {
        max-width: 62ch;
        margin-inline-start: 0;
        margin-inline-end: 0;
    }
}

/* --- 9d · Çağrı
   Birincil eylemin yanında ikincil bir çıkış yolu var: ziyaretçi kayıt olmaya
   hazır değilse tanıtım filmine geçiyor. İki buton yan yana; dar ekranda
   alt alta düşüp tam genişliğe yayılıyor. --- */
.hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .625rem .75rem;
    margin-top: clamp(1.25rem, 2.6vw, 1.75rem);
}

@media (min-width: 992px) {
    .hero__cta { justify-content: flex-start; }
}

.hero__btn { padding: 0 1.75rem; font-size: 1rem; }

/* Telefonlarda iki buton yan yana sığmıyor; sarılınca farklı genişliklerde
   iki blok kalıyordu. Alt alta, eşit genişlikte ve ortalı daha derli toplu. */
@media (max-width: 575.98px) {
    .hero__cta {
        flex-direction: column;
        align-items: stretch;
        max-width: 320px;
        margin-inline: auto;
    }

    .hero__btn { width: 100%; }
}

.hero__btn--alt {
    gap: .5rem;
    padding-inline-start: 1.25rem;
    background: var(--surface);
    color: var(--brand);
}

.hero__btn--alt:hover,
.hero__btn--alt:focus-visible { transform: translateY(-1px); }

/* oynat işareti — ikincil butonun içinde küçük daire */
.hero__play {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-soft);
    transition: background-color var(--t-base) var(--ease);
}

/* Üçgenin optik merkezi geometrik merkezinin SAĞINDA kalır: FA'nın 1.25em'lik
   kutusu glifi tam ortaladığı için düğme hafifçe sola kaçık görünüyordu. */
.hero__play .ay-ico {
    font-size: 10px;
    margin-inline-start: .06em;
}

.hero__btn--alt:hover .hero__play,
.hero__btn--alt:focus-visible .hero__play { background: var(--brand-tint); }

.hero__btn-arrow {
    font-size: 15px;
    transition: transform .3s var(--ease-out);
}

.hero__btn:hover .hero__btn-arrow,
.hero__btn:focus-visible .hero__btn-arrow { transform: translateX(3px); }

/* Bilinçli olarak --ink-soft: bu satır çağrının hemen altında duruyor, ikincil
   tonun (--ink-mute) bir tık daha koyusu okunurluğu artırıyor. */
.hero__note {
    margin: .75rem 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

/* --- 9d-2 · Somut maddeler
   Başlık ve açıklamadaki vaadi ölçülebilir üç maddeye indiriyor. Rozet ya da
   kutu yok: hero'nun kabuksuz diline uyması için yalnızca onay işareti. --- */
.hero__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.25rem;
    margin: clamp(1.125rem, 2.4vw, 1.625rem) 0 0;
    padding: 0;
    list-style: none;
}

.hero__facts li {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ink-soft);
}

.hero__facts .ay-ico {
    font-size: 14px;
    color: #16A34A;
}

/* Telefonda gizli: tek satıra sığmayıp alt alta düşüyor, hero'yu uzatıyor ve
   başlık–buton–görsel akışının arasına giriyordu. md+ bir ya da iki satıra
   sığıyor (flex-wrap taşanı alta indiriyor). */
@media (max-width: 767.98px) {
    .hero__facts { display: none; }
}

@media (min-width: 992px) {
    .hero__facts { justify-content: flex-start; }
}

/* --- 9d-3 · Aşağı kaydırma ipucu (fare) --- */
.hero__scroll {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .4375rem;
    /* hero__inner içinde ortalı, akışta: mobilde orb'un üstüne binmiyor */
    margin: clamp(1.75rem, 3.6vw, 3rem) auto 0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    transition: color var(--t-base) var(--ease), opacity var(--t-base) var(--ease),
                visibility var(--t-base) var(--ease);
}

/* .hero text-align:center; blok öğe olduğu için ayrıca hizalama gerekiyor */
.hero__inner { display: flex; flex-direction: column; }

.hero__scroll:hover,
.hero__scroll:focus-visible { color: var(--brand); }

/* Sayfa kaydırılınca ipucu görevini tamamlar (js/theme.js → ScrollCue).
   animation:none şart — açılış animasyonu fill:both ile opacity'yi sabitliyor
   ve sınıfın opacity:0 değerini ezerdi. */
.hero__scroll.is-done {
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hero__mouse {
    position: relative;
    width: 26px;
    height: 40px;
    border: 2px solid currentColor;
    border-radius: var(--r-pill);
    opacity: .85;
    transition: transform .3s var(--ease-out);
}

.hero__scroll:hover .hero__mouse,
.hero__scroll:focus-visible .hero__mouse { transform: translateY(2px); }

.hero__wheel {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 3px;
    height: 7px;
    margin-inline-start: -1.5px;
    border-radius: 2px;
    background: currentColor;
    animation: heroWheel 1.9s var(--ease) infinite;
}

@keyframes heroWheel {
    0%        { opacity: 0; transform: translateY(-3px); }
    35%       { opacity: 1; transform: translateY(0); }
    75%, 100% { opacity: 0; transform: translateY(13px); }
}

/* lg+ : hero ekranı dolduruyor, ipucu bölümün dibine sabitleniyor.
   translate ile ortalamak yerine left/right + otomatik yan boşluk: açılış
   animasyonu (heroUp) transform'u sabitlediği için transform kullanılamıyor. */
@media (min-width: 992px) {
    .hero__scroll {
        position: absolute;
        left: 0;
        right: 0;
        bottom: clamp(1rem, 2vw, 1.75rem);
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
    }
}

/* --- 9e · Açılış hareketi (kademeli) --- */
.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__cta,
.hero__note,
.hero__facts,
.hero__scroll,
.hero__visual { animation: heroUp .8s var(--ease-out) both; }

.hero__visual  { animation-delay: .10s; }
.hero__eyebrow { animation-delay: .06s; }
.hero__title   { animation-delay: .14s; }
.hero__lead    { animation-delay: .22s; }
.hero__cta     { animation-delay: .30s; }
.hero__note    { animation-delay: .36s; }
.hero__facts   { animation-delay: .42s; }
.hero__scroll  { animation-delay: .54s; }

@keyframes heroUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   10 · Hero — radyal gönderi animasyonu (.orb)

   Merkezdeki AYDUKE kartından çevredeki platform düğümlerine sırayla
   "gönderi paketi" yollanır. Tüm ölçüler --size üzerinden türetilir, bu
   yüzden tek değişkenle büyütülüp küçültülebilir.
   -------------------------------------------------------------------------- */
.orb {
    /* Mobil: kartın tamamını kullan. 34vw'lik eski değer küçük ekranlarda
       clamp'in 252px tabanına düşüp ortada minik bir madalyon gibi kalıyordu.
       Ölçüler translateX gibi yerlerde de kullanıldığı için yüzde DEĞİL,
       vw tabanlı bir uzunluk veriliyor (yüzde, elemanın kendi kutusuna göre
       çözülüp paket animasyonunu bozuyor). 2rem pay container boşluğu için. */
    --size:  min(100vw - 2rem, 470px);    /* toplam çap */
    --r:     calc(var(--size) * .39);     /* merkez → düğüm merkezi */
    /* 9 düğüm 40° aralıkla dizilir: komşu merkezler arası kiriş
       2·r·sin20° ≈ .267·size. Düğüm kutusu .165 seçildi, böylece iki
       komşunun köşeleri (yarım köşegen ≈ .117·size) değmiyor. */
    --node:  calc(var(--size) * .165);    /* düğüm kutusu */
    --core:  calc(var(--size) * .34);     /* merkez kart */
    --cycle: 3.6s;                        /* 9 düğüm × 0.4s = tam tur */

    position: relative;
    width: var(--size);
    height: var(--size);
    margin: 0 auto;   /* dikey boşluğu .hero__grid gap'i verir */
}

/* lg+ : iki kolona geçiliyor, ölçü sağ kolonun payına göre sınırlanıyor */
@media (min-width: 992px) {
    .orb { --size: clamp(300px, 30vw, 400px); }
}

/* --- 10a · Yörünge çemberleri --- */
.orb__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}

.orb__ring--out {
    width: calc(var(--r) * 2);
    height: calc(var(--r) * 2);
    margin: calc(var(--r) * -1);
    border: 1px dashed var(--brand-line);
    opacity: .55;
    animation: orbSpin 46s linear infinite;
}

/* merkezin arkasındaki yumuşak derinlik halkası */
.orb__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--r) * 1.95);
    height: calc(var(--r) * 1.95);
    margin: calc(var(--r) * -.975);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(1, 30, 90, .08), rgba(1, 30, 90, 0));
}

@keyframes orbSpin { to { transform: rotate(360deg); } }

/* --- 10b · Merkezden yayılan dalgalar --- */
.orb__wave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--core);
    height: var(--core);
    margin: calc(var(--core) / -2);
    border: 1.5px solid var(--brand);
    border-radius: 50%;
    opacity: 0;
    animation: orbWave var(--cycle) var(--ease-out) var(--d) infinite;
}

/* Üç dalga eşit aralıkla başlar. Gecikme önce style="--d:1.2s" ile veriliyordu;
   CSP style özniteliğini engellediği için üçü aynı anda çıkıyordu. Değerler
   platform sayısına bağlı olmadığı için burada sabit duruyor. */
.orb__wave--1 { --d: 0s; }
.orb__wave--2 { --d: 1.2s; }
.orb__wave--3 { --d: 2.4s; }

@keyframes orbWave {
    0%   { opacity: .26; transform: scale(.92); }
    100% { opacity: 0;   transform: scale(2.35); }
}

/* --- 10c · Işın hattı --- */
.orb__beam {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: var(--r);
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    transform-origin: 0 50%;
    transform: rotate(var(--a));
    background: linear-gradient(90deg,
                rgba(1, 30, 90, 0)   22%,
                rgba(1, 30, 90, .20) 58%,
                rgba(1, 30, 90, 0)   97%);
}

/* --- 10d · Gönderi paketi (kuyruklu ışık) --- */
.orb__pkt {
    --from: calc(var(--core) / 2 + 6px);
    --to:   calc(var(--r) - var(--node) / 2 - 4px);

    position: absolute;
    top: 50%;
    left: 0;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(1, 30, 90, .10), 0 0 12px rgba(1, 30, 90, .45);
    opacity: 0;
    animation: orbPkt var(--cycle) cubic-bezier(.4, 0, .5, 1) var(--d) infinite;
}

.orb__pkt::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 58%;
    width: calc(var(--size) * .095);
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: linear-gradient(270deg, rgba(1, 30, 90, .55), rgba(1, 30, 90, 0));
}

@keyframes orbPkt {
    0%        { opacity: 0; transform: translateX(var(--from)) scale(.4); }
    7%        { opacity: 1; transform: translateX(var(--from)) scale(1); }
    25%       { opacity: 1; transform: translateX(var(--to))   scale(1); }
    32%, 100% { opacity: 0; transform: translateX(var(--to))   scale(.4); }
}

/* --- 10e · Platform düğümü --- */
.orb__node {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: var(--node);
    height: var(--node);
    margin: calc(var(--node) / -2);
    /* çembere yerleş, sonra ikonu geri döndürerek dik tut */
    transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1));
}

.orb__chip {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 30%;
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: 0 12px 26px -14px rgba(16, 24, 40, .34),
                0 0 0 1px rgba(16, 24, 40, .06);
    animation: orbChip var(--cycle) var(--ease-out) var(--d) infinite;
}

.orb__chip svg {
    width: 52%;
    height: 52%;
    color: var(--c);
    fill: currentColor;
}

/* paket ulaştığı anda kısa bir karşılama */
@keyframes orbChip {
    0%, 18%   { transform: scale(1); }
    27%       { transform: scale(1.13); }
    46%, 100% { transform: scale(1); }
}

/* markanın renginde genişleyen halka */
.orb__chip::before {
    content: "";
    position: absolute;
    inset: -7%;
    border: 1.5px solid var(--c);
    border-radius: inherit;
    opacity: 0;
    animation: orbFlash var(--cycle) var(--ease-out) var(--d) infinite;
}

@keyframes orbFlash {
    0%, 20%   { opacity: 0;   transform: scale(.9); }
    28%       { opacity: .55; transform: scale(1); }
    52%, 100% { opacity: 0;   transform: scale(1.3); }
}

/* --- 10f · Merkez: AYDUKE kartı --- */
.orb__core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: var(--core);
    height: var(--core);
    margin: calc(var(--core) / -2);
    /* not: yüzdeli padding absolute elemanda ataya göre çözülür — uzunluk kullan */
    padding: calc(var(--core) * .13);
    border-radius: 28%;
    background: #fff;
    box-shadow: 0 22px 44px -18px rgba(1, 30, 90, .40),
                0 0 0 1px rgba(1, 30, 90, .07),
                inset 0 1px 0 rgba(255, 255, 255, .9);
    animation: orbFloat 6s var(--ease) infinite;
}

.orb__core img {
    display: block;
    /* kırpılmış logoda yazı tuvalin tamamını dolduruyor — kart içinde eski
       optik boyutu korumak için %100 değil %88 */
    width: 88%;
    height: auto;
}

@keyframes orbFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* --------------------------------------------------------------------------
   11 · Ortak bölüm kalıbı  (.sec)  +  görünüme girme  (.reveal)

   Hero dışındaki tüm bölümler aynı iskeleti kullanır:

     section.sec[.sec--tint] > .container > header.sec__head + içerik

   Böylece bölüm başlıkları, dikey boşluklar ve zemin ritmi tek yerden
   yönetiliyor; yeni bölüm eklemek için ayrı başlık stili yazmak gerekmiyor.

   Zemin ritmi: beyaz → tint → beyaz → tint → beyaz. Tint bölümler
   --surface-2 zeminli ve iki kenarında hairline var; beyazdan ayrımı çok
   ince olduğu için çizgi olmadan sınır belli olmuyor.
   -------------------------------------------------------------------------- */
.sec {
    position: relative;
    padding: clamp(3.25rem, 6.5vw, 6rem) 0;
}

.sec--tint {
    background: var(--surface-2);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

/* --- 11a · Bölüm başlığı --- */
.sec__head {
    max-width: 44rem;
    margin: 0 auto clamp(2.25rem, 4.5vw, 3.25rem);
    text-align: center;
}

/* hero__eyebrow ile aynı kalıp, canlılık noktası yok: hero'daki yeşil nokta
   "sistem çalışıyor" mesajıydı, bölüm etiketlerinde karşılığı olmaz */
.sec__eyebrow {
    display: inline-flex;
    align-items: center;
    height: 28px;
    margin: 0 0 1rem;
    padding: 0 .75rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand);
}

/* tint zeminde brand-soft ile surface-2 neredeyse aynı: etiket beyaza döner */
.sec--tint .sec__eyebrow {
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--hairline);
}

.sec__title {
    margin: 0 0 .75rem;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.03em;
    text-wrap: balance;
}

/* hero__em ile aynı vurgu tonu — marka laciverdi metinde okunmuyor */
.sec__em { color: var(--brand-accent); }

.sec__lead {
    max-width: 58ch;
    margin: 0 auto;
    font-size: clamp(.9375rem, 1.4vw, 1.0625rem);
    line-height: 1.65;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* --- 11b · Görünüme girme
   Saklama kuralı .is-armed sınıfına bağlı; sınıfı JavaScript yalnızca ilk
   ekranın ALTINDA kalan öğelere ekliyor (js/theme.js → AY.Reveal). Yani:
     · JS çalışmazsa hiçbir şey saklanmaz,
     · açılışta görünen içerik hiç saklanmaz,
     · gözlemci haber vermezse 4 sn'lik emniyet kemeri devreye girer.
   Animasyon hiçbir durumda içeriğin görünmesinin önüne geçmiyor.

   .is-armed/.is-in geçici, .ay-seen kalıcı: öğe bir kez göründükten sonra
   geçici sınıflar kaldırılıyor (yoksa buradaki .7s'lik geçiş kartların kendi
   hover geçişini ezip hover'ı ağırlaştırıyordu), .ay-seen ise kalıp "bu öğe
   göründü" bilgisini taşıyor — kapasite çubuğu gibi bir kerelik
   animasyonların tetiği o. --- */
.reveal.is-armed {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.reveal.is-armed.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal.is-armed { opacity: 1; transform: none; }
}

/* ızgara çocukları sırayla girsin — kartlar aynı anda değil, kısa aralıkla */
.abt__card.is-armed:nth-child(2),
.how__step.is-armed:nth-child(2),
.pkg__card.is-armed:nth-child(2) { transition-delay: .08s; }

.abt__card.is-armed:nth-child(3),
.how__step.is-armed:nth-child(3),
.pkg__card.is-armed:nth-child(3) { transition-delay: .16s; }

.abt__card.is-armed:nth-child(4),
.how__step.is-armed:nth-child(4) { transition-delay: .24s; }

.abt__card.is-armed:nth-child(5) { transition-delay: .32s; }
.abt__card.is-armed:nth-child(6) { transition-delay: .40s; }

/* --------------------------------------------------------------------------
   12 · Sistem Hakkında  (.abt)  —  #hakkinda

   Altı yetenek kartı. Kartlar beyaz zeminde yalnızca hairline ile çevrili;
   gölge hover'da geliyor, durağan hâlde sayfa sakin kalıyor.
   Izgara: mobil 1, sm 2, lg 3 kolon.
   -------------------------------------------------------------------------- */
.abt__grid {
    display: grid;
    gap: clamp(.875rem, 1.8vw, 1.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .abt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .abt__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* kart yüzeyi ortak .ay-card'dan geliyor (theme.css § 8); burada yalnızca
   bölüme özel olan ikon karesi ve tipografi var */
.abt__ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 1.125rem;
    border-radius: 13px;
    background: linear-gradient(160deg, var(--brand-soft), #E7EDF9);
    box-shadow: inset 0 0 0 1px rgba(1, 30, 90, .07);
    color: var(--brand);
    transition: background-color var(--t-base) var(--ease),
                background-image var(--t-base) var(--ease),
                color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                transform .4s var(--ease-out);
}

/* hover'da kare markanın rengine dönüyor: kart canlanırken tek odak noktası.
   Kartın kendisiyle aynı kural altında — dokunmatikte açılmıyor. */
@media (hover: hover) and (pointer: fine) {
    .abt__card:hover .abt__ico {
        background-image: linear-gradient(160deg, var(--brand-hover), var(--brand));
        box-shadow: 0 10px 20px -10px rgba(1, 30, 90, .55);
        color: var(--on-brand);
        transform: translateY(-1px);
    }
}

.abt__ico .ay-ico { font-size: 22px; }

.abt__title {
    margin: 0 0 .375rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.abt__text {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink-soft);
}

/* Kapanış paneli — kartlarla aynı köşe yarıçapı, farklı yüzey: lacivert
   tint. Kartlar "sistem ne yapar"ı anlatıyor, bu panel sözü veriyor; yüzey
   farkı ikisini karıştırmıyor. Hover davranışı yok, tıklanır bir şey değil. */
.abt__note {
    display: flex;
    align-items: center;
    gap: clamp(.875rem, 1.8vw, 1.25rem);
    max-width: 52rem;
    margin: clamp(2rem, 4vw, 2.75rem) auto 0;
    padding: clamp(1.125rem, 2vw, 1.5rem) clamp(1.25rem, 2.2vw, 1.75rem);
    border-radius: var(--r-lg);
    background: linear-gradient(140deg, var(--brand-soft), #EEF3FB);
    box-shadow: inset 0 0 0 1px rgba(1, 30, 90, .07);
}

.abt__note-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 6px 16px -8px rgba(1, 30, 90, .45);
    color: var(--brand);
}

.abt__note-ico .ay-ico { font-size: 22px; }

.abt__note-txt {
    margin: 0;
    font-size: clamp(.9375rem, 1.3vw, 1.0625rem);
    line-height: 1.6;
    color: var(--ink-soft);
}

.abt__note-txt strong { color: var(--ink); font-weight: 600; }

/* telefonda ikon üstte, metin altında ve ortalı */
@media (max-width: 575.98px) {
    .abt__note { flex-direction: column; text-align: center; }
}

/* --------------------------------------------------------------------------
   13 · Nasıl Çalışır?  (.how)  —  #nasil

   Dört adım. Numaralar beyaz madalyon, aralarındaki kesikli hat akışı
   gösteriyor: mobilde dikey (adımın altından sonrakine), lg+ yatay.
   768–991 arası iki kolon olduğu için hat çizilmiyor — iki kolonda hat
   satır sonunda boşluğa gider, akışı anlatmak yerine karıştırır.
   -------------------------------------------------------------------------- */
.how__list {
    --how-gap: clamp(1.25rem, 2.4vw, 1.75rem);

    display: grid;
    gap: var(--how-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* adım kartı: yüzey .ay-card'dan, numara madalyonu buradan */
.how__num {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 10px 20px -10px rgba(1, 30, 90, .55);
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--on-brand);
    transition: transform .4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .how__step:hover .how__num { transform: translateY(-1px) scale(1.04); }

    /* Kart hover'da 2px kalkıyor; bağlantı hattı kartın ::after'ı olduğu için
       onunla birlikte kalkıp komşusuyla hizasını kaybediyordu. Hat kendi
       yerinde kalsın diye ters yönde 2px kaydırılıyor. */
    .how__step:hover::after { transform: translateY(2px); }
}

.how__title {
    margin: 0 0 .375rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.how__text {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink-soft);
}

/* Bağlantı hattı kartların İÇİNDEN değil ARASINDAN geçiyor: kartlar birer
   yüzey olduğu için hat, kolon/satır boşluğuna çiziliyor ve madalyonun
   merkeziyle hizalanıyor (soldan --card-pad + yarıçap kadar içeride). */
@media (max-width: 767.98px) {
    .how__step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 100%;
        inset-inline-start: calc(var(--card-pad) + 21px);
        height: var(--how-gap);
        border-left: 1px dashed var(--brand-line);
    }
}

@media (min-width: 768px) {
    .how__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .how__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* dört kolonda hat yatay: kartın sağ kenarından sonraki kartın soluna */
    .how__step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: calc(var(--card-pad) + 22px);
        inset-inline-start: 100%;
        width: var(--how-gap);
        border-top: 1px dashed var(--brand-line);
    }
}

/* --------------------------------------------------------------------------
   13b · Özellikler  (.abt__grid--4 · .plt · .gvn)  —  #ozellikler
   (2026-09-28) Üç katman: on iki modül kartı (#hakkinda kart kalıbı, dört
   kolon), platform yetenek tablosu ve güven şeridi. Yeni renk yok; hepsi
   theme.css tokenlarından. Yön bağımlı her ölçü logical property ile
   yazıldı, Arapça sayfada kendiliğinden aynalanıyor.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .abt__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Dört kolonda kart dolgusu ve metin bir tık sıkı: on iki kart üç satıra
   sığsın, satır başına düşen metin 4-5 satırı geçmesin. */
.abt__grid--4 .ftc__card { --card-pad: clamp(1.125rem, 1.8vw, 1.5rem); }
.abt__grid--4 .abt__ico  { width: 42px; height: 42px; margin-bottom: .875rem; border-radius: 12px; }
.abt__grid--4 .abt__ico .ay-ico { font-size: 19px; }
.abt__grid--4 .abt__title { font-size: 1rem; }
.abt__grid--4 .abt__text  { font-size: var(--fs-sm); line-height: 1.6; }

/* Kart sırası kademeli girsin (ilk altısı § 11b'de) */
.ftc__card.is-armed:nth-child(4n+2) { transition-delay: .06s; }
.ftc__card.is-armed:nth-child(4n+3) { transition-delay: .12s; }
.ftc__card.is-armed:nth-child(4n+4) { transition-delay: .18s; }

/* --- 13b-1 · Platform yetenek tablosu --- */
.plt {
    margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0;
    padding: clamp(1.25rem, 2.4vw, 2rem);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
}

.plt__head {
    max-width: 46rem;
    margin: 0 auto 1.5rem;
    text-align: center;
}

.plt__title {
    margin: 0 0 .5rem;
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.plt__lead {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--ink-soft);
}

/* Dar ekranda tablo kırılmıyor, kap yatay kayıyor. tabindex="0" + role
   region: klavye kullanıcısı da kaydırabilsin (WCAG 2.1.1).

   ⚠ position: relative ZORUNLU (2026-09-28, mobilde "ekran sağa kaymış").
   Hücrelerdeki ✓/✗ işaretlerinin ekran okuyucu metni .ay-sr-only (theme.css
   § 10) — yani position: absolute. Mutlak konumlu bir öğeyi overflow ancak
   o öğenin KAPSAYICI BLOĞU kendisi ya da içindeyse kırpar. Kap 'static'
   kaldığında kapsayıcı blok sayfanın kökü oluyordu: 720px'lik tablonun sağ
   sütunlarındaki 1px'lik etiketler (x≈570) kaydırma kabından KAÇIP belgenin
   genişliğine sayılıyordu. Telefonda 390px ekran 571px'lik sayfaya dönüyor,
   tarayıcı da yerleşim görünümünü genişletip her şeyi sağa kaydırıyordu
   (headless ölçüm: innerWidth 571, scrollWidth 571 → düzeltmeden sonra 390).
   Kabı konumlandırmak etiketlerin kapsayıcı bloğunu buraya çekiyor; tablo
   eskisi gibi yalnız bu kabın içinde kayıyor. */
.plt__scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--r-md);
    box-shadow: inset 0 0 0 1px var(--hairline);
}

.plt__scroll:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

.plt__table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.plt__table th,
.plt__table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--hairline);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.plt__table thead th {
    background: var(--surface-2);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ink-soft);
}

.plt__table tbody tr:last-child th,
.plt__table tbody tr:last-child td { border-bottom: 0; }

/* Platform sütunu başa hizalı (RTL'de sağa) */
.plt__table th:first-child {
    text-align: start;
    font-weight: 600;
    color: var(--ink);
}

.plt__table tbody tr:nth-child(even) { background: rgba(248, 250, 252, .6); }

@media (hover: hover) and (pointer: fine) {
    .plt__table tbody tr:hover { background: var(--brand-soft); }
}

.plt__pf {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-inline-end: .625rem;
    border-radius: 8px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline);
    color: var(--c);
    vertical-align: middle;
}

.plt__pf svg { width: 15px; height: 15px; fill: currentColor; }

/* Var: marka zeminli küçük onay; yok: soluk tire (anlam sr-only metinde) */
.plt__ok {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
}

.plt__ok .ay-ico { font-size: 12px; }
.plt__no { color: var(--ink-mute); }

.plt__not {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    font-size: .75rem;
    color: var(--ink-soft);
}

.plt__num { font-variant-numeric: tabular-nums; color: var(--ink); }

.plt__foot {
    margin: 1rem 0 0;
    font-size: .8125rem;
    line-height: 1.6;
    text-align: center;
    color: var(--ink-mute);
}

/* --- 13b-2 · Güven şeridi --- */
.gvn__grid {
    display: grid;
    gap: clamp(.875rem, 1.8vw, 1.25rem);
    margin: clamp(2rem, 4vw, 2.75rem) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) { .gvn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .gvn__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gvn__item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1.125rem 1.25rem;
    border-radius: var(--r-lg);
    background: linear-gradient(140deg, var(--brand-soft), #EEF3FB);
    box-shadow: inset 0 0 0 1px rgba(1, 30, 90, .07);
}

.gvn__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 6px 16px -8px rgba(1, 30, 90, .45);
    color: var(--brand);
}

.gvn__ico .ay-ico { font-size: 18px; }

.gvn__title {
    margin: 0 0 .25rem;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

.gvn__text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   13c · AI Asistan ve Sohbet Robotu  (.ast · .sbm)  —  #asistan
   (2026-09-28) Solda altı yetenek, sağda örnek sohbet penceresi (.sbm —
   yalnızca çizim, betik yok). Altında kanal çipleri ve #nasil'daki adım
   bileşeni (.how__list) aynen kullanılıyor.

   Kontrastlar: balon metinleri --ink / --on-brand, zeminleri --surface-2 /
   --brand; ikisi de AA'nın çok üstünde (≈ 16:1 ve ≈ 14:1).
   -------------------------------------------------------------------------- */
.ast__grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

@media (min-width: 992px) {
    .ast__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

.ast__list {
    display: grid;
    gap: 1.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .ast__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ast__item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
}

.ast__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(160deg, var(--brand-hover), var(--brand));
    box-shadow: 0 10px 20px -12px rgba(1, 30, 90, .6);
    color: var(--on-brand);
}

.ast__ico .ay-ico { font-size: 17px; }

.ast__title {
    margin: 0 0 .25rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.015em;
}

.ast__text {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--ink-soft);
}

/* --- 13c-1 · Örnek sohbet penceresi --- */
.ast__visual {
    position: relative;
    display: flex;
    justify-content: center;
}

/* arkadaki yumuşak marka parıltısı — dekoratif */
.ast__visual::before {
    content: "";
    position: absolute;
    inset: 8% 4%;
    z-index: 0;
    border-radius: 40px;
    background: radial-gradient(60% 60% at 50% 40%, rgba(28, 74, 168, .18), transparent 70%);
    filter: blur(20px);
}

.sbm {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
}

.sbm__win {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 30px 60px -28px rgba(1, 30, 90, .45),
                0 0 0 1px rgba(16, 24, 40, .06);
}

.sbm__top {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.125rem;
    background: linear-gradient(135deg, var(--brand-hover), var(--brand));
    color: var(--on-brand);
}

.sbm__logo {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.sbm__logo .ay-ico { font-size: 17px; }

.sbm__who { display: grid; line-height: 1.25; }
.sbm__who b { font-size: .9375rem; font-weight: 600; }

.sbm__who small {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    opacity: .88;
}

.sbm__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3DDC84;
    box-shadow: 0 0 0 3px rgba(61, 220, 132, .25);
}

.sbm__body {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 1.125rem;
    background: var(--surface-2);
}

.sbm__msg {
    max-width: 84%;
    margin: 0;
    padding: .625rem .875rem;
    font-size: .8125rem;
    line-height: 1.5;
}

/* Balon köşeleri logical: konuşanın tarafındaki alt köşe sivri */
.sbm__msg--bot {
    align-self: flex-start;
    border-radius: 14px 14px 14px 4px;
    border-end-start-radius: 4px;
    border-end-end-radius: 14px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--hairline);
    color: var(--ink);
}

.sbm__msg--me {
    align-self: flex-end;
    border-radius: 14px 14px 4px 14px;
    border-end-end-radius: 4px;
    border-end-start-radius: 14px;
    background: var(--brand);
    color: var(--on-brand);
}

.sbm__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.sbm__chips span {
    padding: .25rem .625rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--brand-line);
    font-size: .75rem;
    font-weight: 500;
    color: var(--brand);
}

.sbm__handoff {
    align-self: flex-start;
    max-width: 90%;
    padding: .75rem .875rem;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--brand-line);
}

.sbm__handoff p {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--ink);
}

.sbm__btns { display: flex; gap: .375rem; }

.sbm__btn {
    padding: .3125rem .875rem;
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px var(--hairline);
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.sbm__btn--yes {
    background: var(--brand);
    box-shadow: none;
    color: var(--on-brand);
}

.sbm__input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--hairline);
    font-size: .8125rem;
    color: var(--ink-mute);
}

.sbm__send {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-style: normal;
}

.sbm__send .ay-ico { font-size: 13px; }

/* Kâğıt uçak ikonu yön taşıyor: Arapçada gönderim yönü sola */
[dir="rtl"] .sbm__send .ay-ico { transform: scaleX(-1); }

/* --- 13c-2 · Kanal çipleri --- */
.ast__kanal {
    margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0;
    text-align: center;
}

.ast__kanal-head {
    margin: 0 0 .875rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
}

.ast__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ast__chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 38px;
    padding: 0 1rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
}

.ast__chip svg { width: 16px; height: 16px; fill: var(--c, currentColor); }
.ast__chip .ay-ico { font-size: 15px; color: var(--brand); }

/* --- 13c-3 · Adımlar başlığı + kapanış notu --- */
.ast__steps-title {
    margin: clamp(2.75rem, 5vw, 3.75rem) 0 clamp(1.25rem, 2.4vw, 1.75rem);
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -.02em;
    text-align: center;
}

.ast__not .abt__note-txt a {
    color: var(--brand-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- 13c-4 · On iki maddelik liste (2026-10-01) ---
   #asistan'ın yetenekleri on ikiye çıktı; tek sütunda örnek pencerenin iki
   katı uzuyordu. xl'de iki sütun, 576–991 arası zaten iki sütun. */
@media (min-width: 1200px) {
    .ast__list--cok {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1.5rem;
    }

    .ast__list--cok .ast__text { font-size: var(--fs-sm); }
}

/* Örnek penceredeki mikrofon — gönder düğmesinin yanında (js/sohbet.js) */
.sbm__acts {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.sbm__mic {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand-line);
    color: var(--brand);
    font-style: normal;
}

.sbm__mic .ay-ico { font-size: 13px; }

/* Balon içi küçük ikon (sesle sorulan soru, sepet başlığı) */
.sbm__msg-ico {
    display: inline-grid;
    place-items: center;
    font-style: normal;
}

.sbm__msg-ico .ay-ico { font-size: 11px; }

/* --------------------------------------------------------------------------
   13d · Sesli asistan vitrini  (.ses · .sbm--ses)  —  #asistan
   (2026-10-01) Lacivert bir yüzey: bölümün geri kalanı beyaz kartlardan
   oluşuyor, sesli asistan yeni ve ayırt edici olduğu için ayrı bir sahne.
   Metin --on-brand (#FFF) zeminde ≈ 16:1; soluk metinler .78 opaklıkta
   (≈ 10:1). Dalga ve nabız animasyonu yalnızca süs: reduced-motion'da duruyor.
   -------------------------------------------------------------------------- */
.ses {
    position: relative;
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: center;
    margin: clamp(3rem, 6vw, 4.5rem) 0 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(150deg, var(--brand) 0%, var(--brand-hover) 58%, var(--brand-accent) 100%);
    box-shadow: 0 40px 80px -44px rgba(1, 30, 90, .6);
    color: var(--on-brand);
    isolation: isolate;
}

/* yumuşak ışık lekeleri — dekoratif */
.ses::before,
.ses::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.ses::before {
    inset-block-start: -30%;
    inset-inline-end: -10%;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(120, 160, 255, .35), transparent);
}

.ses::after {
    inset-block-end: -35%;
    inset-inline-start: -15%;
    width: 50%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(61, 220, 132, .14), transparent);
}

@media (min-width: 992px) {
    .ses { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.ses__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .875rem;
    padding: .25rem .875rem .25rem .25rem;
    padding-inline: .25rem .875rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.ses__eyebrow-ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--brand);
}

.ses__eyebrow-ico .ay-ico { font-size: 12px; }

.ses__title {
    margin: 0 0 .75rem;
    font-size: clamp(1.5rem, 2.6vw, 2.125rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
    color: var(--on-brand);
    text-wrap: balance;
}

/* .sec__em lacivert zeminde görünmezdi: açık mavi */
.ses__title .sec__em { color: #A9C4FF; }

.ses__lead {
    max-width: 56ch;
    margin: 0 0 1.5rem;
    font-size: clamp(.9375rem, 1.3vw, 1.0625rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
}

.ses__list {
    display: grid;
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .ses__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ses__item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.ses__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
    color: var(--on-brand);
}

.ses__ico .ay-ico { font-size: 15px; }

.ses__item-title {
    margin: 0 0 .1875rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--on-brand);
}

.ses__item-text {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
}

.ses__not {
    margin: 1.375rem 0 0;
    padding-block-start: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
}

.ses__visual {
    display: flex;
    justify-content: center;
}

/* Sesli pencere: lacivert zeminde beyaz çerçeve daha belirgin */
.sbm--ses .sbm__win {
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55),
                0 0 0 1px rgba(255, 255, 255, .14);
}

/* Kip seçici — pencerenin karşılama balonundaki üç hap */
.sbm__kip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
    align-self: center;
    padding: .25rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--hairline);
}

.sbm__kip span {
    padding: .25rem .625rem;
    border-radius: var(--r-pill);
    font-size: .6875rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.sbm__kip .sbm__kip--on {
    background: var(--brand);
    color: var(--on-brand);
}

.sbm__msg--ses {
    display: flex;
    align-items: flex-start;
    gap: .4375rem;
}

.sbm__msg--ses .sbm__msg-ico { margin-block-start: .1875rem; opacity: .85; }

/* "Sesli okunuyor" şeridi — bot balonunun altında */
.sbm__tts {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-block-start: .5rem;
    padding-block-start: .4375rem;
    border-top: 1px dashed var(--hairline);
    font-size: .6875rem;
    font-weight: 600;
    color: var(--brand-accent);
}

/* Dinleme çubuğu — giriş alanının yerinde */
.sbm__dinle {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--hairline);
    background: var(--surface);
}

.sbm__mic-buyuk {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #D92D20;
    color: #FFF;
}

.sbm__mic-buyuk .ay-ico { font-size: 15px; }

/* nabız halkası */
.sbm__mic-buyuk::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(217, 45, 32, .45);
    animation: ses-nabiz 1.8s var(--ease-out) infinite;
}

.sbm__dinle-txt {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
}

/* Ses dalgası: çubuklar sırayla yükselip alçalıyor */
.sbm__dalga {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 22px;
    margin-inline-start: auto;
}

.sbm__dalga i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--brand-accent);
    transform-origin: center;
    animation: ses-dalga 1.1s ease-in-out infinite;
}

.sbm__dalga i:nth-child(2) { animation-delay: -.9s; }
.sbm__dalga i:nth-child(3) { animation-delay: -.7s; }
.sbm__dalga i:nth-child(4) { animation-delay: -.5s; }
.sbm__dalga i:nth-child(5) { animation-delay: -.3s; }
.sbm__dalga i:nth-child(6) { animation-delay: -.6s; }
.sbm__dalga i:nth-child(7) { animation-delay: -.2s; }

.sbm__dalga--kucuk {
    height: 12px;
    margin-inline-start: .125rem;
    gap: 2px;
}

.sbm__dalga--kucuk i { width: 2px; }

@keyframes ses-dalga {
    0%, 100% { transform: scaleY(.3); }
    50%      { transform: scaleY(1); }
}

@keyframes ses-nabiz {
    0%   { box-shadow: 0 0 0 0 rgba(217, 45, 32, .45); }
    100% { box-shadow: 0 0 0 12px rgba(217, 45, 32, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .sbm__dalga i,
    .sbm__mic-buyuk::after { animation: none; }

    .sbm__dalga i { transform: scaleY(.6); }
}

/* --------------------------------------------------------------------------
   13e · Sipariş ve Talep  (.ast__grid--ters · .sbm__sepet)  —  #siparis
   (2026-10-01) #asistan ve #randevu ile aynı bileşenler. Masaüstünde
   çizim solda: art arda üç "liste solda" bölüm tekdüze duruyordu.
   Dar ekranda sıra kaynak sırası (önce liste), okuma sırası bozulmuyor.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .ast__grid--ters { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .ast__grid--ters > .ast__visual { order: -1; }
}

.sbm__sepet {
    align-self: stretch;
    padding: .75rem .875rem;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--brand-line);
}

.sbm__sepet-bas {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--brand);
}

.sbm__sepet-satir {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin: 0;
    padding: .3125rem 0;
    border-bottom: 1px solid var(--hairline);
    font-size: .8125rem;
    color: var(--ink);
}

.sbm__sepet-satir b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sbm__sepet-toplam {
    border-bottom: 0;
    font-weight: 700;
}

.sbm__sepet-toplam b { font-weight: 700; color: var(--brand); }

.sbm__sepet-not {
    margin: .25rem 0 .625rem;
    font-size: .6875rem;
    color: var(--ink-mute);
}

.sbm__sepet-btn {
    display: block;
    padding-block: .4375rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   13f · Ekip ve Yetkiler  (.tmm)  —  #ekip
   (2026-10-01) Panelin "Ekip & Yetkiler" ekranının çizimi: üye listesi ve
   seçili üyenin yetki matrisi (Yok · Görüntüle · Yönet). Betik yok.
   Seviye renkleri anlam taşımıyor yalnızca: etiket metni her hapta yazılı.
   -------------------------------------------------------------------------- */
.tmm {
    position: relative;
    z-index: 1;
    width: min(100%, 400px);
}

.tmm__win {
    overflow: hidden;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 30px 60px -28px rgba(1, 30, 90, .45),
                0 0 0 1px rgba(16, 24, 40, .06);
}

.tmm__top {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--hairline);
}

.tmm__top-ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(160deg, var(--brand-hover), var(--brand));
    color: var(--on-brand);
}

.tmm__top-ico .ay-ico { font-size: 14px; }

.tmm__top-ad {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink);
}

.tmm__davet {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .3125rem .625rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: var(--on-brand);
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.tmm__davet .ay-ico { font-size: 10px; }

.tmm__uyeler {
    margin: 0;
    padding: .375rem;
    list-style: none;
}

.tmm__uye {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border-radius: 12px;
}

.tmm__uye--secili {
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand-line);
}

.tmm__av {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #E4EAF6;
    color: var(--brand);
    font-size: .6875rem;
    font-weight: 700;
}

.tmm__uye--secili .tmm__av {
    background: var(--brand);
    color: var(--on-brand);
}

.tmm__ad {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tmm__rol {
    padding: .1875rem .5rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
    font-size: .6875rem;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}

.tmm__durum {
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.tmm__durum--aktif   { color: #067647; }
.tmm__durum--davetli { color: #B54708; }

.tmm__matris {
    padding: .75rem 1rem 1rem;
    border-top: 1px solid var(--hairline);
    background: var(--surface-2);
}

.tmm__matris-bas {
    margin: 0 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--ink);
}

.tmm__satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .3125rem 0;
}

.tmm__modul {
    min-width: 0;
    overflow: hidden;
    font-size: .75rem;
    color: var(--ink-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tmm__seg {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 2px;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline);
}

.tmm__seg-oge {
    padding: .1875rem .5rem;
    border-radius: var(--r-pill);
    font-size: .625rem;
    font-weight: 600;
    color: var(--ink-mute);
    white-space: nowrap;
}

.tmm__seg-oge--on.tmm__seg-oge--yok   { background: #EAECF0; color: var(--ink); }
.tmm__seg-oge--on.tmm__seg-oge--gor   { background: #DCE7FB; color: var(--brand); }
.tmm__seg-oge--on.tmm__seg-oge--yonet { background: var(--brand); color: var(--on-brand); }

/* Güven şeridi #ekip'te adımlar başlığının altında; üst boşluğu başlık veriyor */
.ekp__guven { margin-top: 0; }

/* --------------------------------------------------------------------------
   14 · Paketlerimiz  (.pkg)  —  #paketler

   Üç kart. Paketler yalnızca medya alanıyla farklılaştığı için kartlar
   birbirinin kopyası: fiyat ve ilk liste satırı dışında her şey aynı.
   Öne çıkan kart lacivert çerçeve + rozet alıyor; ölçek büyütme yok, çünkü
   büyüyen kart komşularının hizasını bozuyor.

   Kırılım: 992px'e kadar tek kolon (dar ekranda üç kolon okunmuyor),
   lg+ üç kolon yan yana karşılaştırma.
   -------------------------------------------------------------------------- */
.pkg__grid {
    display: grid;
    gap: clamp(1.5rem, 2.4vw, 1.75rem);
    align-items: stretch;
}

@media (min-width: 992px) {
    .pkg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* yüzey .ay-card'dan; paket kartı biraz daha cömert dolgulu */
.pkg__card { --card-pad: clamp(1.5rem, 2.4vw, 2rem); }

/* tek kolonda kart sayfanın tamamına yayılmasın */
@media (max-width: 991.98px) {
    .pkg__card {
        width: 100%;
        max-width: 30rem;
        margin-inline: auto;
    }
}

/* öne çıkan kartın üst çizgisi .ay-card--brand ile zaten açık; rozet o
   çizginin üstüne binmesin diye kartın üst kenarına oturuyor */
.pkg__flag {
    position: absolute;
    top: -.8125rem;
    inset-inline-start: var(--card-pad);
    z-index: 1;
    margin: 0;
    padding: .25rem .6875rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--on-brand);
    box-shadow: 0 6px 14px -8px rgba(1, 30, 90, .7);
}

.pkg__head { margin-bottom: clamp(1.125rem, 2vw, 1.375rem); }

.pkg__name {
    margin: 0 0 .3125rem;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.pkg__for {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-soft);
}

/* lg+ : üç kolonda alt bloklar aynı hizada başlasın */
@media (min-width: 992px) {
    .pkg__for { min-height: 3.2em; }
}

/* --- 14a · Medya alanı bloğu
   Paketler yalnızca burada farklılaşıyor, bu yüzden değer kartın içinde
   kendi yüzeyine alındı: büyük GB değeri + kapasitenin en büyük pakete
   göre oranını gösteren çubuk (--w, PHP'den geliyor). --- */
.pkg__stat {
    padding: .875rem 1rem 1rem;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px rgba(1, 30, 90, .06);
}

.pkg__card--featured .pkg__stat {
    background: linear-gradient(150deg, #E9EFFA, var(--brand-soft));
}

.pkg__stat-row {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    margin: 0 0 .625rem;
}

.pkg__stat-val {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--brand);
}

.pkg__stat-lbl {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-soft);
}

.pkg__meter {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: rgba(1, 30, 90, .10);
}

.pkg__meter i {
    position: relative;
    display: block;
    width: var(--w, 50%);
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--brand-accent));
}

/* Çubuğun GENİŞLİĞİ hiçbir zaman animasyona bağlı değil: bu bir veri, her
   koşulda doğru görünmesi gerekiyor. Denenen "soldan dolma" (scaleX ya da
   width animasyonu) animasyon donduğunda çubuğu boş bırakıyordu — ölçtüm,
   iframe içinde tam olarak bu oldu. Bu yüzden hareket yalnızca bir kerelik
   ışık geçişiyle veriliyor: geçiş dursa da kaybolsa da çubuk dolu kalır.

   Tetik .ay-seen (js/theme.js → AY.Reveal): kart ilk kez göründüğünde
   ekleniyor, yani ekranın altındaki kartlarda siz oraya gelince oynuyor. */
.pkg__meter i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
                rgba(255, 255, 255, 0),
                rgba(255, 255, 255, .85),
                rgba(255, 255, 255, 0));
    opacity: 0;
}

.pkg__card.ay-seen .pkg__meter i::after {
    animation: pkgSweep 1.1s var(--ease-out);
}

@keyframes pkgSweep {
    0%   { opacity: 0;   transform: translateX(-100%); }
    35%  { opacity: .9; }
    100% { opacity: 0;   transform: translateX(100%); }
}

/* --- 14b · Fiyat bloğu
   Üstte eski fiyat (üzeri çizili) + indirim oranı, altında güncel fiyat.
   Eski fiyat küçük ve soluk: dikkat güncel fiyatta kalsın. --- */
.pkg__price-box { margin: clamp(1.125rem, 2vw, 1.5rem) 0; }

.pkg__was {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .25rem;
}

.pkg__old {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-mute);
    /* tarayıcının ince çizgisi soluk metinde kayboluyordu */
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(152, 162, 179, .9);
}

.pkg__save {
    padding: .125rem .5rem;
    border-radius: var(--r-pill);
    background: #ECFDF3;
    box-shadow: inset 0 0 0 1px rgba(5, 96, 58, .14);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #05603A;
}

.pkg__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3125rem;
    margin: 0;
}

.pkg__amount {
    font-size: clamp(1.875rem, 3.2vw, 2.375rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
    color: var(--ink);
}

.pkg__cur {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
}

.pkg__per {
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

/* --- 14b-2 · Ödeme dönemi anahtarı  (.donem / .pkg__v) -------------------
   Aylık ↔ yıllık seçimi. İki tutar da HTML'de basılıyor, görünürlüğü
   aşağıdaki iki kural seçiyor; JS yalnızca kapsayıcıdaki sınıfı değiştiriyor
   (aynı kalıp § 23h şifre göster/gizlede de var — "JS bir sınıf değiştirir,
   DOM kurmaz").

   NEDEN display:none VE hidden ÖZNİTELİĞİ DEĞİL
   Gizli fiyat DOM'da kalmak zorunda: JS anahtarı çevirdiğinde sunucuya
   gitmeden görünmesi gerekiyor. display:none ekran okuyucudan da kaldırıyor,
   yani görünmeyen tutar sesli okunmuyor — iki fiyatın üst üste okunması
   ("35.000 ₺ / yıl 10.000 ₺ / ay") anlaşılmaz olurdu.

   Seçiciler kapsayıcıya bağlı, karta değil: ön yüzde <section id="paketler">,
   panelde kart listesi (.pkg-donem) sınıfı taşıyor. İkisi de aynı iki kuralı
   kullanıyor. --- */
.pkg-donem--yillik .pkg__v--aylik,
.pkg-donem--aylik  .pkg__v--yillik { display: none; }

/* Anahtarın kendisi: ortalanmış, kartların üstünde. */
.donem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}

/* Segment kutusu. Yüzey kartlarla aynı dili kullanıyor (hairline + soft),
   içindeki iki düğme tek bir denetim gibi okunsun. */
.donem__sw {
    display: inline-flex;
    padding: .25rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface-2, #F4F5F7);
}

/* 2026-09-29 · #paketler tint zemine geçti: kutu zeminle aynı renge
   düşmesin, beyaza dönüyor. */
.sec--tint .donem__sw { background: var(--surface); }

.donem__opt {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: .5rem 1.125rem;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-mute);
    background: transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

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

/* Odak halkası GÖRÜNÜR kalmalı: klavyeyle gezen kullanıcı hangi seçenekte
   olduğunu bilmeli. outline-offset negatif, halka segment kutusunun içinde
   kalsın ve kenara taşmasın. */
.donem__opt:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* Etkin seçenek. aria-pressed de bunu söylüyor; renk tek başına bilgi
   taşımıyor (renk körlüğü). */
.donem__opt.is-on {
    color: var(--brand-ink, #fff);
    background: var(--brand);
}

/* ⚠ .donem__save SİLİNDİ (gizlenmedi) — kullanıcı kararı 2026-09-25:
   "%73 tasarruf yazısını sil." Yeşil tasarruf etiketi anahtarın altındaydı;
   panel/paket-sec.php'den 2026-09-24'te, _paketler.php'den 2026-09-25'te
   kaldırıldı. Artık hiçbir şablon bu sınıfı basmıyor, kural ölüydü.
   display:none ile gizlenmedi: gizli kural bir sonraki turda "neden var"
   sorusunu doğurur ve etiketi geri getirmek bir satır uzaklıkta kalır. */

/* ⚠ İKİ KURAL DAHA SİLİNDİ (gizlenmedi) — kullanıcı kararı 2026-09-25:
   "Aylık ödemede abonelik her dönem sonunda elle yenilenir. yazısını da sil."

   Biri uyarı paragrafının biçimiydi, diğeri onu yıllık görünümde gizleyen
   dal (.donem--yillik ile başlayan seçici). Uyarıyı basan markup
   _paketler.php'den kalktı, panel/paket-sec.php'de zaten yoktu — ikisi de
   ölü kaldı.

   ⚠ FORM ARTIK TEK ÇOCUKLU: tasarruf etiketi ve bu uyarı gidince .donem
   sarmalayıcısında yalnızca .donem__sw kaldı. Kolon yerleşimi ve gap
   BIRAKILDI: ikisi de anahtarı ortalamaya devam ediyor (align-items:center)
   ve ileride ikinci bir satır eklenirse boşluk hazır. Tek çocukla gap
   hiçbir şey üretmiyor, yani ölü değil ETKİSİZ.

   ⚠ JS'TEKİ donem--<donem> SINIF ÇEVİRMESİ DE BIRAKILDI (theme.js →
   DonemSwitch). Bu kural silindikten sonra o sınıfın CSS'te okuyanı kalmadı,
   ama sınıf bir DURUM işareti — aria-pressed'in görsel eşi ve aynı satırda
   çevriliyor. Silinse ileride dönem'e bağlı tek bir kural yazmak JS'e
   dokunmayı gerektirirdi. */

/* Panelde anahtar kart yüzeyinin içinde duruyor: üstteki şeritlerden sonra
   biraz nefes payı gerekiyor, ön yüzdeki kadar geniş boşluk fazla kalıyor. */
.donem--panel { margin: 1.25rem 0 .5rem; }

.pkg__btn { margin-bottom: clamp(1.125rem, 2vw, 1.375rem); }

/* liste başlığı — özellikler butonun hemen altından başlar */
.pkg__list-head {
    margin: 0 0 .75rem;
    padding-top: clamp(1rem, 1.8vw, 1.25rem);
    border-top: 1px solid var(--hairline);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.pkg__list {
    margin: 0 0 clamp(1rem, 1.8vw, 1.25rem);
    padding: 0;
    list-style: none;
}

.pkg__list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--ink-soft);
}

.pkg__list li + li { margin-top: .5625rem; }

/* Paketi ayıran ekstra madde (Kurumsal'da özel gün görsel tasarımları) kalın
   ve tam koyulukta yazılır: çekirdek özellikler üç kartta aynı olduğu için
   farkı yapan satır bir bakışta ayırt edilsin. */
.pkg__list-extra {
    font-weight: 700;
    color: var(--ink);
}

.pkg__list .ay-ico {
    font-size: 14px;
    margin-top: .25rem;
    color: #16A34A;
}

/* --- 14c · Platform kapsamı
   Kartın dibinde ikon şeridi: hangi platformların dahil olduğu listeyi
   okumadan anlaşılıyor. Başlangıç paketinde üç ikon, diğerlerinde dokuz. --- */
/* İkon şeridi kartın dibine sabitlenir (margin-top: auto). Böylece kartlar
   arasındaki yükseklik farkından doğan boşluk listenin ALTINDA toplanıyor ve
   üç kartın ikon satırları aynı hizada duruyor — boşluk daha önce butonun
   altında açılıyor ve kart ortadan kopuk görünüyordu. */
.pkg__platforms {
    margin-top: auto;
    padding-top: clamp(1rem, 1.8vw, 1.25rem);
    border-top: 1px solid var(--hairline);
}

.pkg__platforms-lbl {
    margin: 0 0 .625rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.pkg__icons {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pkg__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline);
    color: var(--c);
}

.pkg__icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* --- 14d · Tak-çalıştır paylaşım cihazı  (.dev)
   Paketlerin parçası değil, isteğe bağlı donanım. Sayfadaki TEK koyu yüzey:
   üç beyaz kartın altında lacivert bir panel, "bu bir cihaz" mesajını
   okumadan veriyor ve paket kartlarıyla karışmıyor.

   Yerleşim: lg+ iki kolon (solda anlatı + faydalar, sağda cihaz/fiyat/çağrı),
   altında tek kolon. Sağ kolon koyu zeminin üstünde biraz daha açık bir
   yüzeyde durur, böylece fiyat ve düğme kendi kutusunda toplanır.

   Kontrast: beyaz metin lacivert üzerinde ~14:1; ikincil metin
   rgba(255,255,255,.74) ile ~10:1 — ikisi de WCAG AA üstü. --- */
.dev {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: clamp(var(--r-lg), 2vw, 22px);
    background: linear-gradient(145deg, #04153C, var(--brand) 55%, #0A2A6E);
    box-shadow: 0 30px 60px -32px rgba(1, 30, 90, .65);
    color: #FFFFFF;
}

@media (min-width: 992px) {
    .dev {
        grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
        align-items: center;
    }
}

/* köşeden gelen yumuşak ışık — panelin düz lacivert kalmaması için */
.dev__glow {
    position: absolute;
    top: -40%;
    inset-inline-end: -10%;
    z-index: -1;
    width: min(560px, 80%);
    height: 160%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* --- 14d-1 · Sol kolon: anlatı --- */
.dev__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 28px;
    margin: 0 0 .875rem;
    padding: 0 .75rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
}

.dev__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ADE80;
}

.dev__title {
    margin: 0 0 .625rem;
    font-size: clamp(1.375rem, 2.4vw, 1.875rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.dev__lead {
    max-width: 54ch;
    margin: 0;
    font-size: clamp(.9375rem, 1.3vw, 1.0625rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

/* --- 14d-2 · Faydalar: iki kolon, ikonlu --- */
.dev__perks {
    display: grid;
    gap: .875rem 1.5rem;
    margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .dev__perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dev__perk {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    min-width: 0;
}

.dev__perk-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.dev__perk-ico .ay-ico { font-size: 17px; }

.dev__perk-txt {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, .74);
}

.dev__perk-txt b {
    display: block;
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: -.01em;
    color: #FFFFFF;
}

/* --- 14d-3 · Sağ kolon: cihaz, fiyat, çağrı --- */
.dev__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(1.25rem, 2.4vw, 1.625rem);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    text-align: center;
}

/* cihazın kendisi — beyaz zeminde çizgisel kart-bilgisayar */
.dev__board {
    display: grid;
    place-items: center;
    width: clamp(78px, 11vw, 96px);
    height: clamp(78px, 11vw, 96px);
    margin-bottom: 1rem;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .55);
    color: var(--brand);
}

/* ⚠ '66%' KULLANILAMADI. Yüzde bir font-size değerinde EBEVEYNİN
   font-size'ına göre çözülür, kabın genişliğine göre değil — yani kutu
   clamp(78px, 11vw, 96px) iken 66% bambaşka bir sayı verirdi. Kabın
   clamp'inin %66'sı elle yazıldı; kutu ölçüsü değişirse bu da değişmeli. */
.dev__board .ay-ico { font-size: clamp(51px, 7.25vw, 63px); }

.dev__price {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    margin: 0;
}

.dev__amount {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
}

.dev__cur {
    font-size: 1.0625rem;
    font-weight: 600;
}

.dev__note {
    margin: .4375rem 0 clamp(1rem, 2vw, 1.25rem);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .7);
}

/* koyu zeminde çağrı beyaz: panelin içindeki en parlak öğe */
.dev__btn {
    background: #FFFFFF;
    color: var(--brand);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}

.dev__btn .ay-ico {
    font-size: 15px;
    transition: transform .3s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .dev__btn:hover,
    .dev__btn:focus-visible {
        background: #F1F4FA;
        color: var(--brand-hover);
    }

    .dev__btn:hover .ay-ico { transform: translateX(3px); }
}

/* koyu zeminde marka renkli odak halkası görünmez: beyaza çevriliyor */
.dev :focus-visible { outline-color: #FFFFFF; }

.dev__hint {
    margin: .75rem 0 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, .62);
}

/* Not: metin içi marka bağlantıları .faq__link ve .pkg__link kaldırıldı —
   SSS'nin altındaki "Bize ulaşın" satırı ve paketlerdeki fiyat notu şeridi
   artık yok. Aynı görünüm gerekirse formdaki .cnt__link (§ 17a) kullanılır. */

/* --------------------------------------------------------------------------
   15 · Tanıtım Filmi  (.vid)  —  #tanitim

   Tek kutu, iki durum: oynatıcı kapağı (.vid__facade) ya da film hazır
   değilken gösterilen sahne (.vid__soon). İkisi de .vid__stage ölçüsünü
   kullanıyor (16:9), böylece film geldiğinde bölümün yüksekliği değişmiyor
   ve sayfa zıplamıyor.

   Kapağa basılınca video bölümün içinde açılmıyor: sinema modu katmanına
   geçiliyor (§ 15d · .cine). Bölümdeki kutu her zaman kapak olarak kalıyor.
   -------------------------------------------------------------------------- */
.vid {
    max-width: 62rem;
    margin: 0 auto;
}

.vid__stage {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: clamp(var(--r-lg), 2.2vw, 22px);
    background: var(--surface);
    box-shadow: 0 30px 60px -34px rgba(1, 30, 90, .45);
}

/* --- 15a · Oynatıcı kapağı --- */
/* Kapağın zemini koyu lacivert: kapak görseli YouTube'dan geldiği için
   yavaş inebilir ya da hiç inmeyebilir. Beyaz kutu + beyaz başlık yerine
   görsel yüklenene kadar da okunabilir, kasıtlı görünen bir yüzey kalıyor. */
.vid__facade {
    padding: 0;
    cursor: pointer;
    text-align: left;
    background: linear-gradient(140deg, #041640, #0A2A6E);
}

.vid__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* alt kenarda karartma — başlık kapak görselinin üzerinde okunsun */
.vid__facade::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(6, 12, 26, .72), rgba(6, 12, 26, 0));
}

.vid__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: clamp(58px, 7vw, 76px);
    height: clamp(58px, 7vw, 76px);
    margin: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    /* beyaz halka: düğme hem açık hem koyu kapak görselinde (ve görsel hiç
       gelmediğinde lacivert zeminde) seçilebilir kalıyor */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .92),
                0 18px 36px -12px rgba(1, 30, 90, .6);
    transform: translate(-50%, -50%);
    transition: transform .35s var(--ease-out), background-color var(--t-base) var(--ease);
}

/* Yüzde ölçü font-size'da kabın genişliğini göstermiyor (bkz. .dev__board);
   kabın clamp(58px, 7vw, 76px)'inin %42'si elle yazıldı.
   margin: üçgenin optik merkezi geometrik merkezinin sağında kalır. */
.vid__play .ay-ico {
    font-size: clamp(24px, 2.95vw, 32px);
    margin-inline-start: .08em;
}

.vid__facade:hover .vid__play,
.vid__facade:focus-visible .vid__play {
    background: var(--brand-hover);
    transform: translate(-50%, -50%) scale(1.07);
}

/* kapak etiketi: üstte filmin adı, altında ne olacağını söyleyen satır
   ("sinema modunda açılır") — tıklamanın sonucu tıklamadan önce belli */
.vid__label {
    position: absolute;
    left: clamp(1rem, 2.4vw, 1.75rem);
    right: clamp(1rem, 2.4vw, 1.75rem);
    bottom: clamp(.875rem, 2vw, 1.375rem);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    letter-spacing: -.01em;
    color: #FFFFFF;
}

.vid__label b {
    font-size: var(--fs-base);
    font-weight: 600;
}

.vid__label i {
    font-size: var(--fs-sm);
    font-style: normal;
    color: rgba(255, 255, 255, .78);
}

/* telefonda ikinci satır kalabalık yapıyor: 16:9 kutu kısa, oynat düğmesi
   ve başlık zaten niyeti anlatıyor */
@media (max-width: 575.98px) {
    .vid__label i { display: none; }
}

/* --- 15b · Film hazır değilken: logo sahnesi
   Boş bir kutu ya da "yakında" yazısı yerine kurgu masasını ima eden bir
   sahne: soldan sağa geçen ışık şeritleri, logonun arkasında genişleyen
   halkalar ve belirsiz ilerleyen bir çubuk. Tümü dekoratif (aria-hidden),
   anlamı .vid__soon-txt taşıyor. --- */
.vid__soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(.875rem, 2vw, 1.5rem);
    /* iki radyal + dikey geçiş: kutunun alt yarısı bembeyaz kalıp sahneyi
       boşa düşürmesin, ışık yukarıdan gelsin */
    background:
        radial-gradient(120% 96% at 50% 0%, rgba(1, 30, 90, .14), rgba(1, 30, 90, 0) 72%),
        radial-gradient(90% 70% at 50% 108%, rgba(1, 30, 90, .08), rgba(1, 30, 90, 0) 70%),
        linear-gradient(180deg, #E9EFFA, #F5F8FD 64%, var(--surface));
}

/* nokta dokusu — hero ile aynı dil */
.vid__soon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(1, 30, 90, .10) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, #000, transparent 84%);
            mask-image: radial-gradient(ellipse 70% 62% at 50% 46%, #000, transparent 84%);
}

.vid__scan {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -30%;
    width: 22%;
    background: linear-gradient(90deg,
                rgba(255, 255, 255, 0),
                rgba(255, 255, 255, .85),
                rgba(255, 255, 255, 0));
    transform: rotate(14deg);
    animation: vidScan 5.4s var(--ease) infinite;
}

/* ikinci ve üçüncü şerit gecikmeli girer — kardeş zinciriyle seçiliyor,
   nth-child yerine: kutuya başka bir öğe eklenince sıra kaymasın */
.vid__scan + .vid__scan { animation-delay: 1.8s; opacity: .7; }
.vid__scan + .vid__scan + .vid__scan { animation-delay: 3.6s; opacity: .5; }

@keyframes vidScan {
    0%        { transform: translateX(0) rotate(14deg); }
    55%, 100% { transform: translateX(560%) rotate(14deg); }
}

.vid__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(160px, 24vw, 260px);
    height: clamp(160px, 24vw, 260px);
    margin: clamp(-130px, -12vw, -80px) 0 0 clamp(-130px, -12vw, -80px);
    border: 1.5px solid var(--brand);
    border-radius: 50%;
    opacity: 0;
    animation: vidRing 3.8s var(--ease-out) infinite;
}

.vid__ring + .vid__ring { animation-delay: 1.9s; }

@keyframes vidRing {
    0%   { opacity: .3; transform: scale(.7); }
    100% { opacity: 0;  transform: scale(1.5); }
}

/* logo kartı — hero'daki merkez kartla aynı dil */
.vid__card {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(.875rem, 1.8vw, 1.375rem) clamp(1.25rem, 2.6vw, 2rem);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 22px 44px -20px rgba(1, 30, 90, .40),
                0 0 0 1px rgba(1, 30, 90, .07);
    animation: vidFloat 6s var(--ease) infinite;
}

.vid__card img {
    display: block;
    width: clamp(99px, 16.8vw, 194px);   /* kırpılmış logo — bkz. .orb__core img */
    height: auto;
}

@keyframes vidFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.vid__soon-txt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .1875rem;
    padding: 0 1rem;
    text-align: center;
}

.vid__soon-txt b {
    font-size: clamp(.9375rem, 1.6vw, 1.125rem);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
}

.vid__soon-txt i {
    font-size: var(--fs-sm);
    font-style: normal;
    color: var(--ink-soft);
}

/* belirsiz ilerleme çubuğu — "çalışıyor" hissi, yüzde iddiası yok */
.vid__bar {
    position: relative;
    width: clamp(120px, 20vw, 190px);
    height: 4px;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--brand-tint);
}

.vid__bar i {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42%;
    border-radius: inherit;
    background: var(--brand);
    animation: vidBar 2.4s var(--ease) infinite;
}

@keyframes vidBar {
    0%   { left: -45%; }
    100% { left: 105%; }
}

/* telefonda 16:9 kutu kısalıyor (360px ekranda ~200px): sahnenin üç katı
   sığsın diye boşluklar ve çubuk küçülüyor, hiçbir bilgi gizlenmiyor */
@media (max-width: 575.98px) {
    .vid__soon { gap: .625rem; }
    .vid__bar { height: 3px; }
}

/* Not: bölümün altındaki "Hesap Oluştur" / "Nasıl çalıştığını okuyun" düğmeleri
   (.vid__cta) kaldırıldı — bölüm yalnızca filmle kalıyor. Kayıt çağrısı hero'da
   ve paket kartlarında, "nasıl çalışır" ise menüde zaten var. */

/* --------------------------------------------------------------------------
   15d · Sinema modu  (.cine)  —  js/theme.js → AY.Cinema

   Kapağa basılınca gövdeye eklenen tam ekran katman: sayfa karartılır, video
   ekranın ortasında 16:9 olarak büyür. Katman sayfada tek; oynatıcı (iframe)
   açılışta ekleniyor, kapanışta siliniyor.

   Kutu ölçüsü hem genişliğe hem yüksekliğe uyuyor: max-width'teki min()
   içindeki ikinci değer kullanılabilir yükseklikten 16:9 genişliği
   hesaplıyor — kısa pencerede ve yatay telefonda video taşmıyor, kırpılmıyor.

   Yerleşim akışta: kapat düğmesi videonun üstünde, başlık altında. Düğme
   videonun üzerine binmiyor — YouTube'un kendi tam ekran/ayar düğmeleri de
   sağ üstte duruyor, üst üste gelmesinler.
   -------------------------------------------------------------------------- */
/* Görünürlük kalıbı: yalnızca opacity yumuşak geçiyor, visibility anahtar gibi
   çalışıyor — açılışta gecikmesiz (0s 0s), kapanışta solma bitince (0s .25s).
   Sebep tek bir cümle: visibility'yi geçişe sokarsak katman sınıf eklendiği
   anda hâlâ "hidden" sayılıyor ve gizli öğenin içindeki kapat düğmesi odak
   alamıyor. pointer-events de sınıfa bağlı: kapanma solması sürerken görünmez
   katman tıklamaları yutmuyor. */
.cine {
    position: fixed;
    inset: 0;
    z-index: var(--z-cine);
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease),
                visibility 0s var(--t-base);
}

.cine.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--t-base) var(--ease),
                visibility 0s 0s;
}

.cine__scrim {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 23, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.cine__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    max-width: min(72rem, calc((100vh - 10rem) * 16 / 9));
    transform: scale(.965);
    opacity: 0;
    transition: transform var(--t-slow) var(--ease-out),
                opacity var(--t-base) var(--ease);
}

/* dvh varsa onu kullan: mobil tarayıcıda adres çubuğu payı doğru hesaplanır */
@supports (height: 100dvh) {
    .cine__inner { max-width: min(72rem, calc((100dvh - 10rem) * 16 / 9)); }
}

.cine.is-open .cine__inner {
    transform: none;
    opacity: 1;
}

.cine__close {
    align-self: flex-end;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
}

.cine__close:hover,
.cine__close:focus-visible {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .55);
}

.cine__close .ay-ico {
    font-size: 18px;
}

.cine__box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: clamp(var(--r-md), 1.4vw, 16px);
    /* oynatıcı inerken kutu siyah: beyaz bir kare parlamıyor */
    background: #000000;
    box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .85);
}

.cine__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Sitedeki MP4 (2026-09-30): dikey ya da 4:3 bir intro kutuya sığsın,
   kesilmesin — kenarlar siyah kalır. */
.cine__frame--mp4 {
    object-fit: contain;
    background: #000000;
}

/* MP4 kapağındaki sessiz video yalnızca görüntü: tıklama düğmeye gitsin. */
video.vid__thumb {
    pointer-events: none;
}

.cine__cap {
    margin: 0;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .72);
    text-align: center;
}

/* sinema modunda sabit WhatsApp düğmesi (§ 19) yoldan çekilir */
body.cine-open .wa {
    opacity: 0;
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   16 · Yardım  (.faq)  —  #yardim

   <details>/<summary> üzerine kurulu akordiyon: aç/kapa, klavye ve ekran
   okuyucu davranışı tarayıcıdan geliyor, JavaScript yok. Satırları yalnızca
   hairline ayırıyor; kutu ya da gölge kullanılmıyor.
   -------------------------------------------------------------------------- */
.faq {
    display: grid;
    gap: .625rem;
    max-width: 52rem;
    margin: 0 auto;
}

/* madde bir .ay-card: dolgusuz varyant, dolguyu summary ve cevap veriyor */
.faq__item { --card-pad: clamp(1.125rem, 2vw, 1.5rem); }

/* SSS satırları hover'da KALKMIYOR: sekiz madde alt alta olduğu için imleç
   listede gezerken satırlar tek tek zıplıyordu. Geri bildirim yalnızca
   çerçeve rengi ve soru metninin markaya dönmesi. */
@media (hover: hover) and (pointer: fine) {
    .faq__item:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--brand-line);
    }
}

/* açık madde belirgin kalsın: hangi soruyu okuduğunuz belli olur */
.faq__item[open] {
    border-color: var(--brand-line);
    box-shadow: var(--sh-2);
}

.faq__q {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(.875rem, 1.6vw, 1.125rem) var(--card-pad);
    cursor: pointer;
    font-size: clamp(.9375rem, 1.4vw, 1.0625rem);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
    list-style: none;   /* Firefox: üçgen işaretçiyi kaldırır */
    transition: color var(--t-base) var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--brand); }

/* Odak halkası satırın tamamını değil kartın içini çiziyor: kart köşesiyle
   aynı yarıçap, içe doğru offset — dışa taşan dikdörtgen halka kart
   kenarıyla çakışıyordu. */
.faq__q:focus-visible {
    outline-offset: -3px;
    border-radius: var(--r-lg);
}

/* artı / eksi işareti — açıkken dikey çizgi kayboluyor */
.faq__sign {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-inline-start: auto;
    border-radius: 50%;
    background: var(--brand-soft);
    transition: background-color var(--t-base) var(--ease);
}

.faq__sign::before,
.faq__sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.75px;
    margin: -.875px 0 0 -5px;
    border-radius: 2px;
    background: var(--brand);
    transition: transform .32s var(--ease-out), opacity var(--t-base) var(--ease);
}

.faq__sign::after { transform: rotate(90deg); }

/* işaret imleç satırdayken yalnızca hafif koyulaşıyor — büyüme/zıplama yok */
@media (hover: hover) and (pointer: fine) {
    .faq__q:hover .faq__sign { background: var(--brand-tint); }
}

.faq__item[open] .faq__sign { background: var(--brand-tint); }
.faq__item[open] .faq__sign::after { opacity: 0; transform: rotate(0); }

.faq__a {
    padding: 0 clamp(2.5rem, 5vw, 3.5rem) 0 var(--card-pad);
    animation: faqIn .34s var(--ease-out) both;
}

/* Cevabın yüksekliği de yumuşak açılsın — destekleyen tarayıcılarda
   (::details-content + interpolate-size). Desteklemeyenlerde davranış aynı
   kalıyor: cevap anında açılıp faqIn ile beliriyor. */
@supports selector(::details-content) and (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }

    .faq__item::details-content {
        height: 0;
        overflow: hidden;
        transition: height .34s var(--ease-out), content-visibility .34s allow-discrete;
    }

    .faq__item[open]::details-content { height: auto; }

    /* yükseklik geçişi varken ikinci bir belirme animasyonu gereksiz */
    .faq__a { animation: none; }
}

.faq__a p {
    margin: 0 0 clamp(.875rem, 1.6vw, 1.125rem);
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--ink-soft);
}

@keyframes faqIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Not: SSS'nin altındaki "Başka bir sorunuz mu var? Bize ulaşın" satırı
   (.faq__foot) ve metin içi .faq__link kaldırıldı — bölüm soruların
   sonunda bitiyor, iletişim çağrısı hemen altındaki #iletisim bölümünde. */

/* --------------------------------------------------------------------------
   17 · Bize Ulaşın  (.cnt)  —  #iletisim

   Tek kart, sayfada ortalı: form. Yanındaki kurumsal bilgi kartı kaldırıldı
   (şirket · adres · vergi no artık footer'ın iletişim kolonunda), bu yüzden
   iki kolonlu ızgara yerine ortalanmış tek kolon var. Genişlik sınırı, form
   satırları geniş ekranda aşırı uzamasın diye duruyor.

   Alanların kendisi ortak bileşen (theme.css § 9); burada yalnızca kartın
   yerleşimi ve satır düzeni var.
   -------------------------------------------------------------------------- */
.cnt__grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: start;
    justify-items: center;
    max-width: 46rem;      /* ~736px: iki alanlı satırlar rahat, metin uzamıyor */
    margin-inline: auto;
}

.cnt__card {
    --card-pad: clamp(1.25rem, 2.4vw, 2rem);
    width: 100%;
}

/* --- 17a · Form --- */
.cnt__alert { margin-bottom: clamp(1rem, 2vw, 1.25rem); }

.cnt__form {
    display: grid;
    gap: clamp(.875rem, 1.6vw, 1.125rem);
}

/* iki alanı yan yana koyan satır; dar ekranda alt alta */
.cnt__row {
    display: grid;
    gap: inherit;
}

@media (min-width: 576px) {
    .cnt__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* bal küpü: ekran okuyucudan da, ekrandan da uzak; display:none KULLANILMAZ,
   bazı botlar gizli alanı atlıyor — akış dışına alınıp görünmez yapılıyor.

   ÖNCEDEN left: -9999px ile ekranın soluna atılıyordu. LTR'de sorun yok:
   tarayıcı sola doğru taşmayı kaydırılabilir alan saymıyor. Ama <html dir="rtl">
   (Arapça) olduğunda taşma yönü tersine dönüyor ve o -9999px sayfaya 9999
   piksellik yatay kaydırma açıyordu — Arapça formda içerik yana kayıyor,
   ekranın yarısı boş görünüyordu. Kırpma (clip-path) yön bağımsız: hangi
   yazma yönünde olursa olsun alan 1px kalıyor, taşma üretmiyor. */
.cnt__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);          /* eski tarayıcılar */
    clip-path: inset(50%);
    white-space: nowrap;
}

.cnt__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem 1rem;
    margin-top: .25rem;
}

.cnt__submit { padding: 0 1.75rem; }

.cnt__submit .ay-ico {
    font-size: 15px;
    transition: transform .3s var(--ease-out);
}

.cnt__submit:hover svg,
.cnt__submit:focus-visible .ay-ico { transform: translateX(3px); }

.cnt__hint {
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

@media (max-width: 575.98px) {
    .cnt__actions { flex-direction: column; align-items: stretch; }
    .cnt__submit { width: 100%; }
    .cnt__hint { text-align: center; }
}

.cnt__link {
    font-weight: 600;
    color: var(--brand);
    border-bottom: 1px solid var(--brand-line);
    transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.cnt__link:hover,
.cnt__link:focus-visible { color: var(--brand-hover); border-color: var(--brand); }

/* Not: 17b (kurumsal kart) bölümü kaldırıldı. .cnt__info, .cnt__info-title,
   .cnt__list, .cnt__item, .cnt__ico, .cnt__pair, .cnt__label, .cnt__value,
   .cnt__value-link ve .cnt__legal kuralları karttan artan ölü kod olduğu için
   silindi; aynı bilgilerin footer'daki karşılıkları .ftr__* kurallarında
   (§ 18 · 11d). Karttaki WhatsApp düğmesi de daha önce kaldırılmıştı — sağ alt
   köşedeki sabit düğme (§ 19) aynı eylemi sayfa boyunca sunuyor. */

/* --------------------------------------------------------------------------
   18 · Footer  (.ftr)

   Header ve hero ile aynı dil: beyaz zemin, tek hairline, lacivert marka.
   Kart, kutu, gölge ve dekoratif katman yok; ayrımı boşluk ve tipografi
   yapıyor. Üç kolon (marka · menü · iletişim) + tek satır alt şerit.

   Yerleşim: mobilde marka tam satır + Keşfet/İletişim yan yana iki kolon,
   md'den itibaren marka geniş + iki kolon yan yana (üçü tek satırda).
   -------------------------------------------------------------------------- */
.ftr {
    border-top: 1px solid var(--hairline);
    padding: clamp(2.5rem, 5vw, 4rem) 0 0;
    font-size: var(--fs-base);
    color: var(--ink-soft);
}

/* --- 11a · Kolonlar --- */
/* İki kolon en küçük ekrandan itibaren geçerli: Keşfet ve İletişim mobilde de
   yan yana duruyor, alt alta dizilip footer'ı uzatmıyorlar. Marka kolonu tam
   satır. Kolon arası boşluk mobilde daha dar — 320px'te bile her kolona makul
   genişlik kalsın. */
.ftr__grid {
    display: grid;
    /* eşit değil: Keşfet'in en uzun etiketi tek satıra sığıyor, artan genişlik
       çok satırlı adresin bulunduğu İletişim kolonuna gidiyor */
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 4rem);
}

.ftr__brand-col { grid-column: 1 / -1; }

@media (min-width: 576px) {
    .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    /* marka kolonu bir miktar geniş; auto yerine fr, çünkü auto kolonları
       sağ kenara yığıp ortada boşluk bırakıyor */
    .ftr__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
    .ftr__brand-col { grid-column: auto; }
}

/* 2026-09-30 · Dört eşit kolon (col-md-3 karşılığı): marka + iletişim
   bilgileri · Kurumsal · Hizmet Bölgelerimiz · Kullanım Alanlarımız
   (_footer.php → .ftr__grid--genis). Ayrı İletişim kolonu kalktı; bilgiler
   logonun altında, başlıksız.
   768–991: ikişer (2×2) — 720px'lik kapta dört kolon e-postayı ve adresi
   kırıyordu. 992+: tek satırda dört eşit kolon. */
@media (min-width: 768px) {
    .ftr__grid--genis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ftr__grid--genis .ftr__brand-col { grid-column: auto; }
}
@media (min-width: 992px) {
    .ftr__grid--genis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* logo ile altındaki iletişim listesi arası */
.ftr__brand-col .ftr__list--contact { margin-top: 1.25rem; }
.ftr__link.ftr__link--tumu { font-weight: 600; color: var(--brand); }
.ftr__link--tumu .ay-ico { margin-inline-start: .25rem; font-size: 11px; }
[dir="rtl"] .ftr__link--tumu .ay-ico { transform: scaleX(-1); }

.ftr__col,
.ftr__brand-col { min-width: 0; }

/* --- 11b · Marka kolonu --- */
.ftr__brand {
    display: inline-block;
    transition: opacity var(--t-base) var(--ease);
}

.ftr__brand:hover,
.ftr__brand:focus-visible { opacity: .7; }

/* Ölçü yükseklikle veriliyor (header ve mobil menüyle aynı dil): üç yerdeki
   logo aynı dosyadan geliyor, aynı birimle ayarlanınca birbirini tutuyor.
   Footer'da alan bol olduğu için header'dakinden bir tık büyük. */
.ftr__brand img {
    display: block;
    width: auto;
    height: 34px;
}

/* --- 11c · Kolon başlığı --- */
.ftr__head {
    margin: 0 0 .875rem;
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
}

/* --- 11d · Listeler --- */
.ftr__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ftr__list li + li { margin-top: .5rem; }
.ftr__list--contact li + li { margin-top: .375rem; }

.ftr__link {
    color: var(--ink-soft);
    transition: color var(--t-base) var(--ease);
}

.ftr__link:hover,
.ftr__link:focus-visible { color: var(--brand); }

/* iletişim: solda ikon, sağında doğrudan bilginin kendisi. Hiçbir satırda
   etiket yazısı yok (şirket ve adres dahil) — bilgiyi ikon adlandırıyor,
   etiket ekran okuyucuya aria-label ya da .ay-sr-only ile gidiyor.

   2026-09-30 · SADELEŞTİ (kullanıcı: "logonun altında çok kalın, amatör
   duruyor"). Önce her satır 600 ağırlık + --ink + 17px lacivert ikondu;
   yanındaki menü bağlantıları 400 + --ink-soft olduğu için blok footer'ın
   en ağır yeri oluyordu. Şimdi metin menüyle aynı tonda (400, --ink-soft,
   aynı satır aralığı); ikon küçük ve --ink-mute — yalnızca işaret. Tek vurgu
   şirket adında (500, --ink): bloğun başlığı gibi okunuyor. Bağlantılı
   satırda (telefon, e-posta) üzerine gelince ikon da marka rengine geçiyor. */
.ftr__list--contact { font-size: var(--fs-sm); }

.ftr__contact {
    display: flex;
    align-items: baseline;
    gap: .625rem;
}

.ftr__ico {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 14px;
    color: var(--ink-mute);
    transition: color var(--t-base) var(--ease);
}

.ftr__ico .ay-ico { font-size: 13px; }

.ftr__contact:has(a:hover) .ftr__ico,
.ftr__contact:has(a:focus-visible) .ftr__ico { color: var(--brand); }

.ftr__value {
    min-width: 0;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink-soft);
    /* uzun e-posta dar kolonda taşmasın */
    overflow-wrap: anywhere;
}

/* şirket adı: bloğun tek vurgusu */
.ftr__contact--ad .ftr__value {
    font-weight: 500;
    color: var(--ink);
}

/* iki öbek: tüzel kimlik (şirket · adres · vergi) ve ulaşım (telefon ·
   e-posta). Aradaki boşluk çizgi/kutu olmadan gruplamayı gösteriyor. */
.ftr__list--contact li.ftr__contact--grup { margin-top: 1rem; }

/* --- 11e · Alt şerit --- */
.ftr__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .625rem 1.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    /* alt boşluk cömert: sağ altta sabit duran WhatsApp düğmesi (§ 19) sayfanın
       sonunda yasal bağlantıların üstüne binmesin */
    padding: clamp(1rem, 2vw, 1.25rem) 0 calc(5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-sm);
}

.ftr__copy {
    margin: 0;
    color: var(--ink-mute);
}

.ftr__legal {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* telefonda ortalanmış tek blok */
@media (max-width: 767.98px) {
    .ftr__bar { justify-content: center; text-align: center; }
    .ftr__legal { justify-content: center; }
}

/* --- 11f · Mobil footer: tek kolon, tam genişlik --- */
/* 2026-10-01 (kullanıcı: "mobilde ortalı duruyor, kenarlar boş — tam genişlik
   olsun; altında yalnızca Kurumsal menüsü olsun").
   Önce marka kolonu ortalanıyor, iletişim listesi inline-block ile ortada
   dar bir blok olarak duruyordu. Artık md altında:
     · tek kolon: marka + iletişim tam satır, başa hizalı; altında Kurumsal
     · Hizmet Bölgelerimiz / Kullanım Alanlarımız kolonları gizli — iki
       dizine Kurumsal menüsü zaten gidiyor (footer.k.bolgeler / k.kullanim)
   md'den itibaren dört kolonlu düzen (yukarıda) olduğu gibi. */
@media (max-width: 767.98px) {
    .ftr__grid--genis { grid-template-columns: minmax(0, 1fr); }
    .ftr__grid--genis .ftr__col--rehber { display: none; }
}

/* --- 11g · Mini footer  (.ftr--mini)  —  kimlik ekranları ----------------
   _footer_mini.php: tek satır telif, başka hiçbir şey yok. Giriş / kayıt /
   şifre ekranlarının altında üç kolonluk footer ekranın yarısını kaplıyor ve
   tek işi formu doldurmak olan ziyaretçinin önüne yirmiden fazla bağlantı
   koyuyordu.

   Yükseklik TOKEN'dan geliyor (--ftr-mini-h, theme.css § Ölçü): aynı değeri
   kartı dikey ortalayan .auth--orta hesabı da kullanıyor (§ 23c). Elle iki
   yere yazılsa biri değişince şeridin payı yanlış hesaplanır ve sayfa
   gereksiz kayardı. Bu yüzden .ftr'nin akıcı dolgusu (clamp) burada
   sıfırlanıyor — yükseklik içeriğe değil token'a bağlı kalmalı.

   Telif satırı ortalı: .ftr__bar'ın iki uca yayan flex düzenine ve WhatsApp
   düğmesi için ayrılan cömert alt boşluğuna gerek yok, o düğme mini şeritli
   ekranlarda hiç basılmıyor. */
.ftr--mini {
    display: grid;
    place-items: center;
    min-height: var(--ftr-mini-h);
    padding: 0;
    font-size: var(--fs-sm);
}

.ftr--mini .ftr__copy { text-align: center; }

/* --------------------------------------------------------------------------
   19 · WhatsApp düğmesi  (.wa)

   Sayfa boyunca sağ altta duran tek eylem. Footer'daki "WhatsApp" satırının
   yerini aldı: iletişim kolonu sadeleşti, kanal her an bir tık uzakta.

   Marka yeşili bilinçli: kurumsal palet lacivert ama bu düğme WhatsApp'ı
   temsil ediyor, tanınırlığı renginden geliyor. Ölçü ve gölge ölçülü tutuldu.
   Katman: --z-float, header'ın (1040) ve drawer'ın (1050) altında; mobil menü
   açıkken tamamen çekiliyor.
   -------------------------------------------------------------------------- */
.wa {
    position: fixed;
    inset-inline-end: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: var(--z-float);
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25D366;
    color: #FFFFFF;
    box-shadow: 0 10px 24px -8px rgba(18, 140, 70, .45), var(--sh-1);
    transition: background-color var(--t-base) var(--ease),
                box-shadow .3s var(--ease),
                opacity var(--t-base) var(--ease),
                transform .3s var(--ease-out),
                visibility var(--t-base) var(--ease);
}

.wa:hover,
.wa:focus-visible {
    background: #1EBE57;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px rgba(18, 140, 70, .55), var(--sh-1);
}

.wa:active { transform: translateY(0) scale(.96); }

.wa .ay-ico { font-size: 26px; }

/* mobil menü açıkken yoldan çekilsin */
body.nav-open .wa {
    opacity: 0;
    visibility: hidden;
    transform: scale(.9);
}
/* SOHBET PENCERESİ (ön yüz, _footer.php — AYDUKE'nin kendi "Sitene Ekle"
   penceresi) WhatsApp düğmesiyle AYNI anlarda çekiliyor: mobil menü ve
   sinema modu. Pencere Shadow DOM'da ve iç stile buradan erişilemiyor, ama
   KABUK (div[data-sbt]) sayfanın DOM'unda — onu gizlemek yetiyor. z-index'i
   sinema katmanından (1060) yüksek; gizlenmese filmin üstünde dururdu. */
body.nav-open [data-sbt],
body.cine-open [data-sbt] {
    display: none;
}

@media (max-width: 575.98px) {
    .wa { width: 50px; height: 50px; }
    .wa .ay-ico { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   20 · Yasal metinler  (.doc)  —  gizlilik.php · kullanim-kosullari.php
                                   cerez-politikasi.php

   Uzun okuma sayfası. Ana sayfanın dilini korur (beyaz zemin, tek hairline,
   kutu ve gölge yok) ama ritmi farklıdır: burada iş okumak, o yüzden satır
   uzunluğu 68ch'e sınırlanıyor ve satır yüksekliği açılıyor.

   Yerleşim lg+ iki kolon: solda yapışkan içindekiler, sağda metin. Altında
   tek kolona düşer ve içindekiler metnin üstünde durur — sırası doğal,
   ekstra bir düzenleme gerekmiyor.

   Yerleşim _belge.php tarafından basılır; üç sayfa da aynı kalıbı kullanır.
   -------------------------------------------------------------------------- */
.doc {
    /* header sabit: bölüm başına ek boşluk, başlık header'ın altında kalmasın */
    padding-top: clamp(1.5rem, 3.4vw, 2.75rem);
}

/* --- 20a · Belge başlığı --- */
.doc__head {
    max-width: 44rem;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.doc__eyebrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .875rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink-mute);
}

.doc__crumb {
    color: var(--brand-accent);
    font-weight: 600;
    text-decoration: none;
}

.doc__crumb:hover,
.doc__crumb:focus-visible { text-decoration: underline; }

.doc__title {
    margin: 0;
    font-size: clamp(1.75rem, 4.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.025em;
    color: var(--ink);
}

.doc__meta {
    margin: .75rem 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

.doc__lead {
    margin: clamp(1rem, 2vw, 1.25rem) 0 0;
    font-size: var(--fs-lg);
    line-height: 1.65;
    color: var(--ink-soft);
}

/* --- 20b · İki kolon --- */
.doc__cols {
    display: grid;
    gap: clamp(1.75rem, 3.5vw, 3.5rem);
}

@media (min-width: 992px) {
    .doc__cols {
        grid-template-columns: 15.5rem minmax(0, 1fr);
        align-items: start;
    }
}

/* --- 20c · İçindekiler --- */
.doc__toc {
    /* mobilde metnin üstünde duran, hairline ile çerçevelenmiş bir blok */
    padding: clamp(1rem, 2vw, 1.25rem) 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

@media (min-width: 992px) {
    .doc__toc {
        /* masaüstünde sola yapışır: uzun metinde konum kaybolmuyor.
           top = header yüksekliği + pay */
        position: sticky;
        top: calc(var(--h) + 1.25rem);
        padding: 0 1.25rem 0 0;
        border: 0;
        border-right: 1px solid var(--hairline);
    }
}

.doc__toc-head {
    margin: 0 0 .75rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.doc__toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .125rem;
}

.doc__toc-list a {
    display: flex;
    gap: .5rem;
    padding: .375rem .5rem;
    margin-inline-start: -.5rem;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease);
}

.doc__toc-list a:hover,
.doc__toc-list a:focus-visible {
    background: var(--brand-soft);
    color: var(--brand);
}

.doc__toc-no {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink-mute);
}

/* --- 20d · Metin gövdesi
   Tipografi burada kuruluyor: sayfanın başka hiçbir yerinde uzun akış metni
   yok, bu yüzden kurallar .doc__body altına kapatıldı ve genel p/ul/ol
   stillerine dokunulmadı. --- */
.doc__body {
    max-width: 68ch;
}

.doc__sec + .doc__sec {
    margin-top: clamp(2rem, 3.6vw, 2.75rem);
    padding-top: clamp(2rem, 3.6vw, 2.75rem);
    border-top: 1px solid var(--hairline);
}

.doc__h2 {
    display: flex;
    align-items: baseline;
    gap: .625rem;
    margin: 0 0 .875rem;
    /* sabit header'ın altına kaymasın: içindekilerden gelen atlamalarda
       başlık header'ın arkasında kalıyordu */
    scroll-margin-top: calc(var(--h) + 1.25rem);
    font-size: clamp(1.125rem, 2.2vw, 1.375rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--ink);
}

.doc__no {
    flex: 0 0 auto;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--brand-accent);
}

.doc__sec { scroll-margin-top: calc(var(--h) + 1.25rem); }

.doc__body h3 {
    margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 .5rem;
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
}

.doc__body p {
    margin: 0 0 .875rem;
    font-size: var(--fs-base);
    line-height: 1.72;
    color: var(--ink-soft);
}

.doc__body p:last-child { margin-bottom: 0; }

.doc__body strong {
    font-weight: 600;
    color: var(--ink);
}

.doc__body a {
    color: var(--brand-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.doc__body a:hover,
.doc__body a:focus-visible { color: var(--brand); }

.doc__body ul,
.doc__body ol {
    margin: 0 0 .875rem;
    padding-inline-start: 1.125rem;
    font-size: var(--fs-base);
    line-height: 1.72;
    color: var(--ink-soft);
}

.doc__body li + li { margin-top: .375rem; }

.doc__body li::marker { color: var(--ink-mute); }

/* tanım listesi: "terim → açıklama" satırları (çerez tablosu gibi) */
.doc__dl {
    display: grid;
    gap: .875rem;
    margin: 0 0 .875rem;
}

.doc__dl > div {
    display: grid;
    gap: .25rem;
    padding: .875rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.doc__dl dt {
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

.doc__dl dd {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-soft);
}

/* satır içi kod/teknik ad (çerez adı gibi) */
.doc__code {
    padding: .125rem .375rem;
    border-radius: var(--r-sm);
    background: var(--brand-tint);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875em;
    color: var(--brand);
}

/* --- 20e · Kapanış blokları --- */
.doc__ask {
    margin-top: clamp(2rem, 3.6vw, 2.75rem);
    padding: clamp(1.125rem, 2.2vw, 1.5rem);
    border: 1px solid var(--brand-line);
    border-radius: var(--r-lg);
    background: var(--brand-soft);
}

.doc__ask-head {
    margin: 0 0 .375rem;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink);
}

.doc__ask-txt {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink-soft);
}

.doc__ask-txt a { color: var(--brand-accent); }

.doc__more { margin-top: clamp(2rem, 3.6vw, 2.75rem); }

.doc__more-head {
    margin: 0 0 .75rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.doc__more-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc__more-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem 1rem;
    padding: .875rem 1.125rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    text-decoration: none;
    transition: border-color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease);
}

.doc__more-link b {
    grid-column: 1;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink);
}

.doc__more-link i {
    grid-column: 1;
    font-size: var(--fs-sm);
    font-style: normal;
    line-height: 1.55;
    color: var(--ink-soft);
}

.doc__more-link .ay-ico {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 15px;
    color: var(--brand-accent);
    transition: transform var(--t-base) var(--ease-out);
}

.doc__more-link:hover,
.doc__more-link:focus-visible {
    border-color: var(--brand-line);
    background: var(--surface-2);
}

.doc__more-link:hover svg,
.doc__more-link:focus-visible .ay-ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   21 · Sayfa bulunamadı  (.nf)  —  404.php

   2026-09-30 · YENİDEN TASARLANDI. İki sütun (≥992px):
     sol  → çizim (4 · halka · 4, çevresinde dönen nokta), aranan adres
            kutucuğu, başlık, açıklama, "Ana sayfa" ana düğmesi
     sağ  → dört bölüme kısa yol (ikon rozetli kartlar) + yardım satırı
   Dar ekranda alt alta ve ortalı. Çizim dekoratif (aria-hidden): bilgiyi
   başlık taşıyor. Arkadaki nokta ızgarası ortadan kenarlara sönüyor.
   Renkler yalnızca theme.css değişkenlerinden; SVG'deki degrade de
   --brand → --brand-accent ile aynı iki ton.
   -------------------------------------------------------------------------- */
.nf {
    display: grid;
    place-items: center;
    /* header yüksekliği düşülünce blok ekranın ortasına oturuyor */
    min-height: calc(100vh - var(--h) - 12rem);
    overflow: hidden;
    isolation: isolate;
}

.nf::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(var(--brand-line) 1px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 45%, #000 15%, transparent 72%);
            mask-image: radial-gradient(ellipse 65% 60% at 50% 45%, #000 15%, transparent 72%);
    opacity: .6;
    pointer-events: none;
}

.nf__kart {
    display: grid;
    /* minmax(0, …) ŞART: aranan adres kutucuğu tek satır (nowrap) ve
       sütun 'auto' kalırsa uzun bir adres sütunu ekrandan taşırıyordu. */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    max-width: 68rem;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .nf__kart { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* --- Sol sütun ------------------------------------------------------------ */
.nf__sol {
    text-align: center;
}

@media (min-width: 992px) {
    .nf__sol { text-align: start; }
}

.nf__cizim {
    display: block;
    width: min(100%, 21rem);
    height: auto;
    margin: 0 auto clamp(1.25rem, 2.6vw, 1.75rem);
    overflow: visible;
}

@media (min-width: 992px) {
    .nf__cizim { margin-inline: 0; }
}

.nf__rakam {
    font-family: var(--font-sans);
    font-size: 148px;
    font-weight: 800;
    letter-spacing: -.04em;
    fill: url(#nfDegrade);
}

.nf__halka {
    fill: none;
    stroke: url(#nfDegrade);
    stroke-width: 22;
}

.nf__halka-ic {
    fill: var(--brand-accent);
    opacity: .14;
}

.nf__yorunge {
    fill: none;
    stroke: var(--brand-line);
    stroke-width: 1.5;
    stroke-dasharray: 3 7;
    stroke-linecap: round;
}

.nf__uydu {
    fill: var(--brand-accent);
    transform-box: view-box;
    transform-origin: 180px 87px;
    animation: nf-yorunge 14s linear infinite;
}

.nf__uydu circle {
    stroke: var(--surface);
    stroke-width: 3;
}

@keyframes nf-yorunge {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .nf__uydu { animation: none; }
}

/* Aranan adres: ziyaretçi neyin bulunamadığını görsün. Uzun adres tek
   satırda kalıyor, taşan kısım üç noktayla kesiliyor. */
.nf__yol {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    margin: 0 0 1rem;
    padding: .375rem .875rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--sh-1);
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

.nf__yol .ay-ico {
    flex: none;
    font-size: 12px;
    color: var(--brand-accent);
}

.nf__yol code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    color: var(--ink);
    background: none;
    padding: 0;
}

.nf__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.8vw, 2.625rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.028em;
    color: var(--ink);
    text-wrap: balance;
}

.nf__lead {
    max-width: 32rem;
    margin: clamp(.75rem, 1.6vw, 1rem) auto 0;
    font-size: var(--fs-lg);
    line-height: 1.65;
    color: var(--ink-soft);
    text-wrap: pretty;
}

@media (min-width: 992px) {
    .nf__lead { margin-inline: 0; }
}

.nf__eylem {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 992px) {
    .nf__eylem { justify-content: flex-start; }
}

.nf__eylem .ay-btn { gap: .625rem; }

.nf__ok {
    font-size: 15px;
    transition: transform var(--t-base) var(--ease-out);
}

.nf__eylem .ay-btn:hover .nf__ok,
.nf__eylem .ay-btn:focus-visible .nf__ok { transform: translateX(3px); }

/* --- Sağ sütun: kısa yollar ---------------------------------------------- */
.nf__sag {
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    /* "transparent 12%" açık yazılıyor (aynı renk): yazımın panel şeridinin
       kaldırılmış zeminiyle aynı olması sürüm denetimini yanıltıyordu. */
    background: color-mix(in srgb, var(--surface) 88%, transparent 12%);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    box-shadow: var(--sh-2);
}

.nf__links {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: start;
}

.nf__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .125rem 1rem;
    padding: .875rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    text-decoration: none;
    transition: border-color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
}

.nf__rozet {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand);
    transition: background-color var(--t-base) var(--ease),
                color var(--t-base) var(--ease);
}

.nf__rozet .ay-ico { font-size: 17px; }

.nf__link b {
    grid-column: 2;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink);
}

.nf__link i {
    grid-column: 2;
    font-size: var(--fs-sm);
    font-style: normal;
    color: var(--ink-soft);
}

.nf__link .nf__ok {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--brand-accent);
}

.nf__link:hover,
.nf__link:focus-visible {
    border-color: var(--brand-line);
    background: var(--surface-2);
    box-shadow: var(--sh-1);
}

.nf__link:hover .nf__rozet,
.nf__link:focus-visible .nf__rozet {
    background: var(--brand);
    color: var(--on-brand);
}

.nf__link:hover .nf__ok,
.nf__link:focus-visible .nf__ok { transform: translateX(3px); }

.nf__help {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-soft);
    text-align: center;
}

.nf__help a { color: var(--brand-accent); }


/* ==========================================================================
   22 · Ödeme dönüş sayfaları  (.odeme)  —  odeme-basarili.php · odeme-iptal.php

   Stripe Checkout'tan dönen ziyaretçinin gördüğü tek ekran. Kurgu 404
   sayfasıyla (§ 21) aynı mantıkta: sayfada tek blok, ortalı, dekoratif katman
   yok — ziyaretçi burada bilgi almaya geliyor, gezinmeye değil.

   Yüzey ortak .ay-card (theme.css § 8). Kart genişliği metne göre sınırlı:
   tek paragraf ekranın tamamına yayılınca okunmuyor.

   İki ikon durumu var ve RENKLE ayrılıyor, yalnızca şekille değil:
     .odeme__ico--ok     yeşil  · ödeme alındı
     .odeme__ico--bilgi  lacivert · işlem yarıda kaldı
   Renk tek ayırt edici işaret DEĞİL — başlık metni durumu ayrıca söylüyor
   (WCAG 1.4.1: bilgi yalnızca renkle iletilmez).
   ========================================================================== */

/* TOKEN NOTU: bu bölüm başta --sp-3 / --sp-4 / --r-full / --line adlı dört
   token'a bakıyordu; hiçbiri theme.css § 1'de TANIMLI DEĞİL. Tanımsız bir
   custom property'nin geçtiği bildirim "computed-value time"da geçersiz
   sayılıyor, yani kural hiç uygulanmıyordu:
     gap: var(--sp-4)                → boşluk yok, öğeler birbirine yapışık
     border-radius: var(--r-full)    → durum ikonu daire değil KARE
     border-block-start: … var(--line) → ayırıcı çizgi hiç çizilmiyor
   Ödeme dönüş sayfaları bu yüzden bozuk görünüyordu. Değerler projenin
   gerçek token'larına bağlandı (--r-pill, --hairline) ve boşluklar doğrudan
   yazıldı; yeni token ihdas etmek yerine var olanı kullanmak tercih edildi. */
/* ⚠ ÖLÇÜLER SIKILAŞTIRILDI — KULLANICI KARARI (2026-09-24):
   "odeme-iptal.php sayfasını da biraz daha sadeleştir, web'de de mobilde de
   çok yer kaplamasın ama anlaşılsın."

   Kart altı blok taşıyor (ikon · başlık · metin · güven · eylem · yardım) ve
   aralarındaki boşluk 1.5rem'di: yalnızca beş aralık 120 piksel tutuyordu.
   Ölçüm (390px telefon): kart 552 piksel, yani logoyla birlikte kısa
   telefonlarda kaydırma. Aşağıdaki dört küçültme bilgi KAYBETMEDEN kartı
   ~420 piksele indiriyor — hiçbir cümle, hiçbir yol kaldırılmadı, yalnızca
   ölçüler durumun ağırlığına göre yeniden verildi. */
.odeme__kart {
    max-width: 44rem;
    margin-inline: auto;        /* RTL'de de ortalı kalsın */
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 1rem;
}

/* ⚠ BAŞLIK ÖLÇÜSÜ ARTIK BURADA DEĞİL — § 23m-2'DE, PAKET SEÇİMİYLE ORTAK.

   Bu kural bir dönem kendi clamp'ini taşıyordu: clamp(1.3rem, 2.4vw, 1.6rem).
   Gerekçesi doğruydu (.sec__title'ın clamp(1.5rem, 3vw, 2.5rem)'i bir TANITIM
   BÖLÜMÜ ölçüsü; burada başlık bir durum bildirimi, pazarlama vurgusu değil)
   ama ölçü paket seçimindekiyle EŞLEŞMİYORDU — aynı ödeme akışının iki
   adımında en büyük öğe hem farklı boyda hem farklı ağırlıktaydı (700 ↔ 650).
   Ortak kural § 23m-2'de; buraya geri yazılırsa (dosyada sonra geldiği için)
   onu ezer ve iki ekran yeniden ayrışır.

   .sec__lead'in ölçüsü burada kalıyor: o kartın metin genişliği, başlık
   ölçüsü gibi ekranlar arası bir anlaşma değil. */
.odeme__kart .sec__lead {
    margin: 0;
    max-width: 38rem;
}

/* --- Durum ikonu ---------------------------------------------------------- */

/* 4.5rem (72px) idi. Başlık metni durumu ZATEN söylüyor ("Ödeme
   tamamlanmadı"); ikon onu tekrar ediyor, yani ekranın en büyük öğesi
   olmasının gerekçesi yok. 3.25rem hâlâ bir bakışta okunuyor. */
.odeme__ico {
    inline-size: 3.25rem;
    block-size: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    /* Halka: dolgu yerine ince çerçeve — sayfanın geri kalanı da öyle. */
    border: 1px solid currentColor;
}

.odeme__ico .ay-ico {
    font-size: 1.6rem;
}

/* Yeşil marka rengi değil ama gerekli: "ödeme alındı" evrensel olarak yeşil
   okunuyor, lacivert bu mesajı vermiyor.

   ⚠ TON TOKEN'DAN (2026-09-24, tasarım bütünlüğü kararı). #15803D yazılıydı
   ve aynı ekranda kullanılan güven hapının yeşiliyle (#1C6B3C) akraba ama
   AYNI DEĞİL: tek üründe iki "başarı yeşili" vardı. İkisi de artık panelin
   --st-ok-ink'inden geliyor, yani panodaki tamamlanmış adım işaretiyle
   (.pnl__adim--ok) da aynı ton. */
.odeme__ico--ok    { color: var(--st-ok-ink); }
.odeme__ico--bilgi { color: var(--brand); }

/* --- Güven şeridi (.odeme__guven) — "kartınızdan tutar çekilmedi" --------

   Cümle lead metninin içinde de var ama orada bir paragrafın ortasında
   kayboluyordu. Ödeme yarıda kalan müşterinin ilk ve tek endişesi para;
   onu paragrafı okumaya bırakmak yerine kendi satırında söylüyor.

   Yeşil zemin: § 22'deki .odeme__ico--ok ile aynı dil ("iyi haber").
   Renk TEK taşıyıcı değil — metin de aynı şeyi yazıyor (WCAG 1.4.1).

   Kart bir grid (justify-items: center) ve şerit içeriği kadar genişliyor;
   inline-flex + tek satır bu yüzden yeterli, ayrıca genişlik verilmiyor.

   ⚠ TONLAR ARTIK TOKEN'DAN (2026-09-24, tasarım bütünlüğü kararı). Üç değer
   sabit yazılıydı (#A9DDBB / #E7F6EC / #1C6B3C) ve panelin --st-ok-* üçlüsüyle
   BİREBİR aynıydı, yani aynı ton iki yerde tanımlıydı. Token'ların kapsamı
   .auth'a açıldı (§ 24f); bu ekran o kapsamın içinde. Aynı hap panelde
   .ayr__onay--ok ve .pnl__adim--ok'ta da kullanılıyor — biri değişince üçü
   birlikte değişiyor. */
.odeme__guven {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .35rem .75rem;
    border: 1px solid var(--st-ok-line);
    border-radius: var(--r-pill);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    /* Dar telefonda cümle iki satıra düşebiliyor; hap o zaman da düzgün
       görünsün. */
    text-align: start;
}
.odeme__guven .ay-ico {
    font-size: 15px;
}

/* --- Çağrı ---------------------------------------------------------------- */

/* ⚠ PAKET KARTIYLA AYNI KALIP: TAM GENİŞLİK DÜĞME + ALTINDA SESSİZ BAĞLANTI.
   KULLANICI KARARI (2026-09-24): "iki sayfa birbiriyle uyumlu olsun · tasarım
   bütünlüğü olsun."

   Önce YATAY bir satırdı (düğme ile bağlantı yan yana, 480 pikselin altında
   dikeye dönüyordu) ve paket kartındaki eylem bloğuyla eşleşmiyordu: orada
   düğme kartın tam genişliğinde (.pks__form → .ay-btn--block), bağlantı
   altında ortalı (.pks__havale). Aynı akışın iki adımında iki ayrı
   hiyerarşi vardı.

   Artık her genişlikte dikey. İki kazanç:
     · Ekranların eylem bloğu birebir aynı okunuyor.
     · 480px kırılımı GEREKSİZLEŞTİ ve silindi — düzen zaten dikey, düğme
       zaten tam genişlik. Bir kırılım az, bakımı bir yer az.

   ⚠ GENİŞLİK SINIRI ŞART. Kart 44rem'e kadar açılıyor; tam genişlik bir
   düğme masaüstünde 700 piksele uzayıp "form gönder" gibi görünürdü.
   18rem (288px) paket kartındaki düğmenin ≥1200'deki genişliğiyle (kart
   290px) aynı hizada — yani iki ekranın birincil düğmesi aynı ölçüde.
   Blok, kartın grid'i (justify-items: center) sayesinde ortalı kalıyor. */
.odeme__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* .pks__havale'nin kart içindeki üst boşluğuyla aynı: iki ekranda
       düğme–bağlantı arası eşit. */
    gap: .6rem;
    width: min(18rem, 100%);
}
.odeme__cta .ay-btn {
    width: 100%;
}

/* İKİNCİL YOL (havale) — DÜĞME DEĞİL BAĞLANTI.

   İki dolu/çerçeveli büyük düğme yan yana durunca hangisinin asıl yol olduğu
   okunmuyordu; telefonda ikisi de tam genişlik alıp alt alta iniyor ve tek
   başına 112 piksel tutuyordu. Kart ödemesi yarıda kalan müşterinin asıl
   yolu tekrar denemek, havale ikincil.

   ⚠ BİÇİMİ BURADA DEĞİL — § 23m-2'DE, .pks__havale İLE ORTAK KURALDA.
   İki sınıf aynı on bildirimi ayrı ayrı yazıyordu; ikisinin notunda da
   "ölçüler diğerinden alındı" yazılıydı, yani kopya elle sürdürülüyordu.
   Buraya yeniden yazılmamalı: dosyada § 23m'den ÖNCE geldiği için ortak
   kuralı ezmez ama iki kaynak yine ayrışmaya başlar. */

/* --- Yardım satırı ------------------------------------------------------- */
.odeme__yardim {
    margin: 0;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--hairline);
    inline-size: 100%;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

.odeme__yardim a { color: var(--brand-accent); }

/* ==========================================================================
   Para birimi simgesi sayıdan ÖNCE geldiğinde  (.pkg__cur--pre / .dev__cur--pre)

   £549 ve $549 biçiminde yazılan birimlerde simge sayının soluna geçiyor
   (bkz. _paketler.php → $ay_pkg_simge_onde). Simgenin kendisi sayıdan küçük
   ve hafif yukarı hizalı duruyordu; önde dururken aradaki boşluk fazla
   görünüyor, o yüzden ayrı kural.
   ========================================================================== */
.pkg__cur--pre,
.dev__cur--pre {
    margin-inline-end: .1em;
    margin-inline-start: 0;
}


/* ==========================================================================
   23 · Kimlik ekranları  (.auth)  —  panel/giris.php · kayit.php
                                      sifremi-unuttum.php · sifre-sifirla.php

   ÖNCEKİ DURUM VE NEDEN DEĞİŞTİ

   Ekranlar tek bir .ay-card'dan oluşuyordu: geniş ekranda 1280px'lik boş
   beyazın ortasında dar bir kutu, kutunun içinde etiket + input listesi.
   Sorun görsel değil yapısaldı:

     · Sayfanın hiçbir yerinde "neden hesap açıyorum" bilgisi yoktu. Ana
       sayfadaki bütün anlatı kayboluyor, ziyaretçi boş bir forma bakıyordu.
     · Kart zeminle aynı renkti (beyaz üstüne beyaz), yalnızca 1px çerçeveyle
       ayrılıyordu — ekranda ağırlığı yoktu.
     · Şifre alanı yazılanı gösteremiyordu; en sık terk sebebi bu.
     · Şifre kuralı ("8 karakter, harf + rakam") yalnızca yazıydı, kullanıcı
       kuralı sağlayıp sağlamadığını gönderene kadar öğrenemiyordu.
     · "Beni hatırla" tek başına bir satır kaplıyor, yanındaki doğal yer
       (şifremi unuttum) boş duruyordu.
     · İkincil çağrı ("Hesabınız var mı? Giriş Yap") gövde metniyle aynı
       ağırlıkta düz bir bağlantıydı, tıklanacak bir şeye benzemiyordu.

   YENİ YAPI

     section.sec.auth[.auth--orta]
       .auth__grid
         .auth__main > .ay-card.auth__card

   MARKA PANELİ KALDIRILDI (ikinci tur)

   Bir süre kartın solunda aside.auth__aside duruyordu: "Tek panel · N
   platform" etiketi, başlık, alt metin, üç değer maddesi ve sekiz platform
   ikonu. Kaldırıldı — kimlik ekranına gelen ziyaretçi ikna edilecek biri
   değil, işini bitirmeye gelmiş biri; aynı anlatı ana sayfada (hero,
   #hakkinda, #nasil) zaten var ve orada daha iyi anlatılıyor. Panelle
   birlikte giden kurallar: .auth__aside ve alt öğeleri (.auth__eyebrow,
   .auth__dot, .auth__headline, .auth__sub, .auth__points, .auth__tick,
   .auth__platforms, .auth__plat, .auth__platnote), lg'deki iki kolonlu
   ızgara ve onu tek kolona indiren .auth__grid--tek değiştiricisi.

   Izgara tek kolon kaldı; kartı ortalayan şey .auth__main'in max-width +
   margin-inline:auto ikilisi. Tek çocuk var, .auth__grid artık bir kalıntı
   gibi görünüyor ama duruyor: kartın kapsayıcısı ile bölümün .container'ı
   arasındaki katman, ileride kartın üstüne/altına bir blok eklenirse dikey
   ritmi (gap) verecek yer o.

   .auth--orta: kartı pencerede DİKEY olarak da ortalıyor. Yalnızca mini
   footer kullanan kimlik ekranlarında (giriş, kayıt, şifre) var — hesap
   (min-height) tam footer'ın yüksekliğini bilmiyor, o yüzden panel içi
   sayfalar bu sınıfı almıyor.
   ========================================================================== */

/* --- 23a · Bölüm zemini ---------------------------------------------------
   Kartın ekranda ağırlığı olsun diye zemin beyaz bırakılmıyor: üstten aşağı
   inen çok hafif bir marka tintı + iki radyal ışık. Değerler düşük (.06 /
   .05): amaç "renkli sayfa" değil, kartın kenarının kendiliğinden
   okunması. .sec zaten dikey boşluğu veriyor, burada yalnızca zemin var. */
.auth {
    background:
        radial-gradient(60rem 30rem at 15% -10%, rgba(28, 74, 168, .06), transparent 60%),
        radial-gradient(48rem 26rem at 100% 0%, rgba(1, 30, 90, .05), transparent 55%),
        var(--surface-2);
    border-bottom: 1px solid var(--hairline);
}

/* --- 23b · Izgara --------------------------------------------------------
   Tek kolon, tam genişlik. Kolon tanımının açıkça yazılması şart.

   Önce burada `justify-content: center` vardı ve kolon tanımı yoktu. Tek
   örtük kolon o durumda İÇERİĞE göre boyutlanıyor (max-content): kartın
   genişliği içindeki metnin uzunluğuna bağlı kalıyordu. Ölçtük — 390px
   ekranda Türkçe kart 366px, Arapça kart 276px çıkıyordu; aynı ekranda aynı
   form, iki farklı genişlik. Metin kısaldıkça kart daralıyordu.

   minmax(0, 1fr) kolonu kapsayıcıya yayıyor; kartı ortalayan şey
   .auth__main'in max-width + margin-inline:auto ikilisi, yani genişlik
   metinden bağımsız. */
.auth__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.auth__main {
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;        /* her ekranda ortalı, RTL'de de */
}

/* --- 23b-2 · Geniş kip  (.auth--genis)  —  panel/paket-sec.php ----------

   32rem tek kolonlu KİMLİK FORMU için doğru ölçü. Paket seçimi aynı kabuğu
   kullanıyor ama üç paketi YAN YANA diziyor (Bootstrap .row > .col-lg-4) ve
   o sınır orada kartı okunamaz hâle getiriyordu.

   ÖLÇÜM: 512px kart − kendi dolgusu (p-md-5, 2×3rem = 96px) = 416px iç
   genişlik. Üçe bölününce paket kartı başına 123 piksel. 1280 piksellik
   masaüstü ekranında "1 GB · medya alanı" üç satıra iniyor, "35.000" ile
   "₺ / yıl" ayrı satırlara düşüyor, "Profesyonel" kart kenarına dayanıyordu.

   56rem (896px) seçildi: iç genişlik 800 piksele çıkıyor, paket kartı
   başına ~256 piksel düşüyor — ön yüzdeki #paketler bölümündeki kart
   genişliğine (§ 13 .pkg__grid) yakın, yani iki ekranda aynı his.

   max-width KALDIRILMIYOR, BÜYÜTÜLÜYOR: sınırsız bırakılsa 1920 piksellik
   ekranda kart 1800 piksele yayılıp üç paket arasında okunması zor
   boşluklar oluşuyordu. */
.auth--genis .auth__main {
    max-width: 56rem;
}

/* --- 23c · Kartı pencerede dikey ortalama  (.auth--orta) -----------------

   Kimlik ekranları tek kart taşıyor; bölümün kendi dikey dolgusu (.sec)
   kartı sayfanın üst yarısına bırakıyor ve altta boş bir şerit kalıyordu.
   Bölüme kalan görünür yüksekliğin tamamı veriliyor, kart o alanın ortasına
   yerleşiyor.

   Hesap üç parçadan çıkıyor ve hepsi biliniyor:
     100svh          görünür pencere — svh (small viewport height), mobilde
                     adres çubuğu açıkken de doğru; 100vh orada taşıyor
     var(--h)        fixed header — body padding-top olarak zaten ayrılmış
     var(--ftr-mini-h)  mini footer (§ 18 → .ftr--mini) — token'la sabit

   Kutulama border-box olduğu için .sec'in dolgusu bu yüksekliğin İÇİNDE
   kalıyor; min-height olduğu için de uzun form (kayıt) taşmak yerine
   büyümeye devam ediyor.

   Sınıf yalnızca mini footer kullanan ekranlarda: tam footer'ın yüksekliği
   içeriğe bağlı, hesaba giremiyor. */
.auth--orta {
    display: grid;
    align-items: center;
    min-height: calc(100svh - var(--h) - var(--ftr-mini-h));
    /* Mini footer kendi üst hairline'ını taşıyor; bölümün alt çizgisi
       onun üstüne binince çift çizgi oluyordu. */
    border-bottom: 0;
}

/* --- 23d · Kart ---------------------------------------------------------- */
.auth__card {
    /* .ay-card'ın üstüne: kimlik ekranında kart ana nesne, o yüzden gölge
       daha belirgin ve köşe daha yumuşak. hover'da yükselme YOK — kart
       tıklanabilir bir şey değil, form taşıyor. */
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
}

.auth__card:hover {
    transform: none;
    box-shadow: var(--sh-2);
}

.auth__head {
    margin-bottom: 1.75rem;
}

.auth__title {
    margin: 0 0 .5rem;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.025em;
}

.auth__lead {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* Seçilen paket rozeti: ziyaretçi paket kartından geldiyse seçimi
   görüyor. Sessizce taşınan bir gizli alan yerine görünür geri bildirim —
   "yanlış pakete mi bastım" sorusu doğmasın. */
.auth__pick {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    /* Logical: ikon başta durduğu için başlangıç boşluğu daha dar. Fiziksel
       yazılsaydı Arapçada ikon sağa geçer, dar boşluk solda kalırdı. */
    padding-block: .375rem;
    padding-inline: .5rem .75rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand);
}

.auth__pick .ay-ico { font-size: 13px; }

/* --- 23e · "Beni hatırla" + "Şifremi unuttum" aynı satırda -------------- */
.auth__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

/* Satırın içindeki onay kutusu kendi alt boşluğunu taşımıyor */
.auth__row .ay-check { margin: 0; }

.auth__link {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand-accent);
    white-space: nowrap;
}

.auth__link:hover,
.auth__link:focus-visible {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- 23f · İkincil çağrı (kart dibi) ------------------------------------
   Ayırıcı çizgi + ortalı metin. Önce gövde metniyle aynı ağırlıkta düz bir
   bağlantıydı; artık bağlantı marka renginde ve kalın, çizgi de onu formdan
   ayırıyor. */
.auth__alt {
    margin: 1.75rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
    text-align: center;
    font-size: var(--fs-base);
    color: var(--ink-soft);
}

.auth__alt a {
    font-weight: 600;
    color: var(--brand-accent);
}

.auth__alt a:hover,
.auth__alt a:focus-visible {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- 23g · Güven satırı -------------------------------------------------
   Kartın ALTINDA, kartın içinde değil: form alanı kalabalıklaşmasın.
   Kilit ikonu + tek cümle; "verileriniz ne olacak" sorusunun kısa yanıtı. */
/* ⚠ 2026-09-30 (kullanıcı ekran görüntüsü: kilit solda tek başına, metin
   ortada iki satır). Metin çıplak bir düğümdü ve text-align: center ile
   ortalanıyordu; sarıldığında ikon satırın başında kalıyor, metin ise
   ortaya kayıyordu. Artık metin kendi <span>'ında ve BAŞA hizalı; ikon ilk
   satırla aynı hizada (align-items: flex-start + ikonun üst payı). Kısa
   metinde blok yine ortada duruyor (justify-content: center, span içerik
   kadar genişliyor). */
.auth__trust {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    margin: 1.25rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ink-mute);
    text-align: start;
}

.auth__trust .ay-ico {
    flex: 0 0 auto;
    margin-top: .1875em;
    font-size: 12px;
    color: #12805C;
}

.auth__trust > span { min-width: 0; }

/* --- 23h · Şifre alanı: göster/gizle  (.pw / .pw__box) ------------------

   KONUMLANDIRMANIN REFERANSI .pw DEĞİL .pw__box

   İlk denemede düğme .pw'ye (yani .ay-field'e) göre konumlanıyordu ve
   ekranda INPUT'UN ÜSTÜNDE, etiketin sağında duruyordu. Sebep: .ay-field bir
   flex kolonu ve içinde etiket + input (+ gerekiyorsa hata metni) var;
   mutlak konumlu bir çocuğun "top" değeri o kutunun EN ÜSTÜNDEN, yani
   etiketin hizasından başlıyor. Etiket yüksekliğini sabit sayıp çıkarmak da
   çözüm değil — etiket iki satıra sarabiliyor (uzun çeviriler) ve alanın
   altına hata metni eklenebiliyor.

   Çözüm: input'u KENDİ sarmalayıcısına aldık (.pw__box) ve konumlandırmanın
   referansı o oldu. Artık düğme her zaman input'un dikey ortasında; etiket
   kaç satır olursa olsun, altta hata metni olsun olmasın fark etmiyor.

   padding-inline-end logical: RTL'de düğme sola geçiyor ve metnin bırakması
   gereken boşluk da onunla birlikte taraf değiştiriyor. */
.pw__box {
    position: relative;
    display: block;
}

.pw__box .ay-input { padding-inline-end: 3rem; }

.pw__toggle {
    position: absolute;
    inset-inline-end: .3125rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    color: var(--ink-mute);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.pw__toggle:hover,
.pw__toggle:focus-visible {
    color: var(--brand);
    background: var(--brand-soft);
}

.pw__toggle .ay-ico { font-size: 16px; }

/* İki ikon aynı düğmede duruyor, biri gizli: JS yalnızca bir sınıf
   değiştiriyor, DOM kurmuyor. */
/* ⚠ 'inline-block', 'block' DEĞİL. Font Awesome ikonu satır içi bir öğe
   (display: var(--fa-display, inline-block)); 'block' verildiğinde düğmenin
   flex hizası bozulmuyor ama öğe kendi satırını istiyor ve dar düğmelerde
   ikon aşağı kayıyordu. */
.pw__toggle .pw__off { display: none; }
.pw__toggle.is-on .pw__on  { display: none; }
.pw__toggle.is-on .pw__off { display: inline-block; }

/* --- 23i · Şifre gücü çubuğu  (.pw__meter) ------------------------------
   Dört parça: kural sayısı kadar (uzunluk, harf, rakam, 12+ karakter).
   Renk TEK ayırt edici işaret değil — yanındaki metin gücü ayrıca yazıyor
   (WCAG 1.4.1). JS yoksa blok hidden kalıyor ve form yine çalışıyor. */
.pw__meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: .5rem;
}

.pw__seg {
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--brand-tint);
    transition: background-color var(--t-base) var(--ease);
}

.pw__seg.is-on { background: var(--lvl, var(--brand)); }

.pw__note {
    margin: .375rem 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

/* Güç düzeyi tek yerden: hem çubuk rengi hem metin rengi buradan okuyor. */
.pw__wrap[data-guc="1"] { --lvl: #DC2626; }
.pw__wrap[data-guc="2"] { --lvl: #D97706; }
.pw__wrap[data-guc="3"] { --lvl: #2563EB; }
.pw__wrap[data-guc="4"] { --lvl: #15803D; }

.pw__wrap[data-guc] .pw__note strong { color: var(--lvl); }

/* Yasal metinlerde "bağlayıcı sürüm Türkçe" şeridi (_belge.php).
   .ay-alert zaten var; burada yalnızca başlıkla metin arasındaki boşluk. */
.doc__ceviri { margin: 1.25rem 0 0; }

/* --- 23l · Girişli kimlik kabuğunun üst şeridi  (.auth__ust)
       panel/_kabuk.php  ·  panel/paket-sec.php · panel/havale.php ---------

   Abonelik ekranlarında ($ay_kabuk['girisli']) sitenin tanıtım header'ı
   basılmıyor; yerine bu şerit geliyor: solda logo, sağda oturumu kapat.

   NEDEN YAPIŞIK DEĞİL: iki ekran da tek kart ve kısa. Yapışık bir şerit
   kazandığı yerden çok yer yiyor. Panelin asıl şeridi (.pnl__ust) yapışık
   çünkü orada uzun listeler var.

   Zemin OPAK: .pnl__ust'taki ölçümün aynısı geçerli, cam yüzeyin arkasından
   kart kenarının okunması bilgi değil gürültü.

   Yükseklik SABİT DEĞİL: şerit akışta duruyor ve içeriği (logo 28px, düğme
   32px) yüksekliği kendi belirliyor. --h kullanılsaydı 92 piksellik bir
   şeritte 32 piksellik bir düğme asılı kalırdı. */
.auth__ust {
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
}

.auth__ust_ic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-block: .75rem;
}

/* Logo ölçüsü sitenin mobil header'ıyla AYNI clamp (§ 3): iki şerit
   arasında geçiş yapan kullanıcıda logo büyüyüp küçülmüyor. Dosya da aynı
   (images/logo.png) — yan menüdeki ayduke.png farklı oranda ve o kolonun
   genişliğine göre ölçülü. */
.auth__ust .hdr__brand img {
    height: clamp(24px, 7vw, 28px);
}

/* Sağ blok: dil seçici + oturumu kapat. İkisi tek kutuda çünkü şerit
   space-between ile çalışıyor — üç kardeş olsaydı dil seçici ortada
   asılı kalırdı (aynı gerekçe .pnl__ust_sag için de yazılı). */
.auth__ust_sag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* Dil seçici (§ 23k) sayfa akışı için yazıldı: altındaki bloktan 1.5rem
   ile ayrılıyor ve 11rem'lik bir alt sınırı var. Şeritte ikisi de yanlış —
   boşluk şeridi büyütüyor, alt sınır dar telefonda çıkış düğmesini alt
   satıra itiyordu. */
.auth__ust_sag .dilsec {
    margin-bottom: 0;
}
.auth__ust_sag .dilsec__sel {
    min-width: 7rem;
}

/* Form varsayılan blok boşluğunu taşımasın. */
.auth__cikis {
    margin: 0;
}
.auth__cikis button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.auth__cikis .ay-ico {
    font-size: 15px;
}

/* Şerit geldiğinde kartın üst boşluğu küçülüyor: .auth zaten .sec'in dikey
   dolgusunu taşıyor ve şeridin altında üst üste binen iki boşluk oluyordu
   (ölçülen fazlalık 48px'e kadar çıkıyor). */
.auth__ust + main > .auth {
    padding-top: clamp(1.25rem, 3vw, 2rem);
}

/* --- 23m · ODAK KİPİ  (.auth--odak)  —  panel/paket-sec.php ·
       panel/havale.php · odeme-basarili.php · odeme-iptal.php -------------

   KULLANICI KARARI (2026-09-23): "ödeme iptal sayfasındaki header ve footer'ı
   kaldır · paket seçimindeki header'ı da kaldır · ikisi de header ve footer
   olmadan çok güzel olacak şekilde, %100 mobil uyumlu, kurumsal ve güçlü."

   Dört ekran da ÖDEME AKIŞININ İÇİNDE. Orada gezinme kazanç değil kayıp:
   müşteri tek bir kararın ortasında ve her ek bağlantı akıştan çıkma daveti.
   Checkout ekranlarının hepsi bu yüzden çıplak.

   YERLEŞİM — ÜÇ KATMAN, TAM PENCERE

       section.sec.auth.auth--odak      dikey flex, en az bir pencere
         .container
           .auth__grid > .auth__main
             .auth__mark                marka satırı — çubuk DEĞİL
               a.auth__logo               ortada
               .auth__geri                satırın BAŞINDA, en çok bir eylem
             <kartın kendisi>
             .auth__alt                 dil · çıkış · telif

   DİKEY ORTALAMA .auth--orta'DAN AYRI. O sınıf fixed header (--h) ve mini
   footer (--ftr-mini-h) paylarını düşerek hesap yapıyor; bu kipte İKİSİ DE
   YOK (html.ay-nohdr body'nin dolgusunu sıfırlıyor, § 1a). Aynı hesabı
   kullansak pencereden --h + --ftr-mini-h kadar (yaklaşık 164 piksel) eksik
   yükseklik çıkar ve kart yukarı kayardı. Burada tam pencere kullanılıyor.

   justify-content: center DEĞİL. İçerik pencereden uzun olduğunda (paket
   seçimi mobilde: üç kart alt alta) 'center' taşmayı İKİ YÖNE dağıtıyor ve
   üst taraf kaydırma ile ERİŞİLEMEZ hâle geliyor — sayfanın tepesi kesiliyor.
   safe center yerine 'space-between' + auto margin kalıbı kullanılıyor:
   marka üstte, yardımcı satır dipte, kart aradaki alanı kaplıyor. Kısa
   sayfada kart ortalanmış görünüyor, uzun sayfada hiçbir şey kesilmiyor.

   ZEMİN § 23a'dan geliyor (.auth): marka tintli iki radyal ışık. Beyaz
   üstüne beyaz kart bırakmıyor, "kurumsal ve güçlü" isteğinin taşıyıcısı o.
   border-bottom KALDIRILIYOR: altında footer yok, çizgi havada kalıyordu.
   ---------------------------------------------------------------------- */
.auth--odak {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    border-bottom: 0;
    /* Dolgu .sec'ten geliyor ama odak kipinde tepe ve dip eşit olmalı:
       .sec'in üst dolgusu header payını varsayıyor. */
    padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* dvh varsa o: mobil tarayıcıda adres çubuğu payı 100vh'ye girmiyor ve
   ekran pencereden uzun kalıp gereksiz kaydırma üretiyordu (aynı gerekçe
   § 24a'daki panel kabuğunda da yazılı). */
@supports (height: 100dvh) {
    .auth--odak { min-height: 100dvh; }
}

.auth--odak > .container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Izgara tam yüksekliği alıyor; içindeki üç katman dikeyde dağılıyor.
   align-items: center (§ 23b) burada geçersiz — kolon gerilmeli. */
.auth--odak .auth__grid {
    flex: 1 1 auto;
    align-items: stretch;
    gap: 0;
}

.auth--odak .auth__main {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3vw, 2rem);
}

/* MARKA SATIRI (.auth__mark) — logo ORTADA, satırın BAŞINDA en çok BİR eylem.

   Logo bir dönem .auth__main'in doğrudan çocuğuydu ve dikey ortalama payını
   (margin-block-start: auto) kendisi taşıyordu. Sarmalayıcı, KULLANICI
   KARARIYLA (2026-09-24) geldi: "panele dön butonu, yukarıdaki logo satırında
   sağ üst köşede olsun." Düğme paket seçiminin dibindeydi (.pks__dip,
   kaldırıldı) ve müşteri onu görmek için üç kartı geçip kaydırmak zorundaydı.

   ⚠⚠ DİKEY ORTALAMA PAYI (margin-block-start: auto) KALDIRILDI — KULLANICI
   KARARI (2026-09-24): "sayfayı sorunsuz ve YUKARIDAN HİZALANMIŞ bir şekilde
   oluştur."

   Uzun bir geçmişi var ve hepsi aynı soruya verilmiş farklı cevaplardı:
     · logo auto payı taşıyordu → içerik dibe yapışıyordu (tek auto bütün
       boşluğu tek yöne süpürür)
     · son çocuğa eş auto verildi → blok (logo + içerik) birlikte ortalandı
     · marka satırı tepeye sabitlendi, içerik altında ortalandı → aralarında
       kocaman bir boşluk kaldı (ekran görüntüsüyle bildirildi)
   ŞİMDİ HİÇBİR YERDE auto BOŞLUK YOK: kolon yukarıdan aşağı akıyor, marka
   satırı en üstte, içerik hemen altında. Dikey boşluğu yalnızca bölümün
   dolgusu ve kolonun gap'i veriyor.

   ⚠ auto BOŞLUK GERİ EKLENMEMELİ. Eklenirse eşi de eklenmek zorunda (biri
   tek kalırsa içerik dibe yapışıyor, ölçüldü: 620 × 913 pencerede tepede 490
   piksel boşluk, dipte 25) ve ikisi birlikte de yukarıdan hizalamayı bozar. */
.auth__mark {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

/* ⚠⚠ MARKA SATIRI ARTIK "KART" DEĞİL — KULLANICI KARARI (2026-09-24):
   "tasarımdaki sorunu gider · logo ve geri ikon dışındaki farklı renkteki
   kartı sil."

   Bir tur boyunca satır YAPIŞIK bir şeritti: position: sticky + opak beyaz
   zemin + yumuşak gölge + yuvarlak alt köşeler. Amaç uzun ekranda geri
   düğmesini erişilebilir tutmaktı; sonuç ekranda İKİNCİ BİR KART oldu.
   Kullanıcı ekran görüntüsüyle bildirdi ve kartın silinmesini istedi.

   ⚠ ZEMİN VE sticky BİRLİKTE GİTMEK ZORUNDA, biri kalamaz:
   yapışık bir satırın zemini yoksa içerik logonun ARKASINDAN geçiyor ve satır
   okunmaz bir lekeye dönüyor (panelin üst şeridinde ölçülmüş kusur, § 24b).
   "Zemini sil ama yapışık kalsın" bu yüzden bir seçenek değildi: kullanıcının
   asıl isteği "sorunsuz" bir ekran ve o hâl sorunun kendisi olurdu.

   Geri düğmesi artık sayfanın tepesinde ve sayfayla birlikte kayıyor. Kayıp
   küçük: kolon yukarıdan hizalı olduğu için düğme ilk ekranda her zaman
   görünüyor, ayrıca tarayıcının kendi geri hareketi de aynı işi yapıyor.
   YENİDEN YAPIŞIK YAPILACAKSA opak zemin de geri gelmek zorunda — o zaman
   kart görünümü de geri gelir. İkisi bir paket. */
.auth--odak .auth__mark {
    /* Satırın yaptığı tek iş hizalama; görsel bir yüzeyi yok. Dikey boşluk
       kolonun gap'inden geliyor (§ 23m'in .auth__main kuralı). */
    flex: 0 0 auto;
}

/* ⚠⚠ İÇERİK YUKARIDAN HİZALI — auto BOŞLUK YOK, VE OLMAMALI.

   KULLANICI KARARI (2026-09-24): "sayfayı sorunsuz ve yukarıdan hizalanmış
   bir şekilde oluştur."

   GEÇMİŞ — aynı kuralın üç hâli, üçü de ölçülmüş bir kusurun cevabıydı:

     1) auto YOK, yalnızca marka satırında vardı → tek auto boşluk kalan
        alanın TAMAMINI tek yöne süpürüyor ve içeriği DİBE yapıştırıyordu.
        Ölçüldü (620 × 913 pencere, odeme-iptal): marka satırı y=490'da
        başlıyor, kart y=888'de bitiyor — tepede 490 piksel boşluk, dipte 25.
        Kullanıcı bunu "kayma" olarak bildirdi.
     2) SON ÇOCUĞA EŞ auto → blok (marka + içerik) birlikte ortalandı. Kusur
        gitti ama marka satırı ekranın ortasına gelmiş oldu.
     3) MARKA SATIRI TEPEYE SABİTLENDİ, içerik altında ortalandı (margin-block:
        auto) → ikisinin arasında kocaman bir boşluk açıldı; ekran
        görüntüsünde havale kartı pencerenin ortasında asılı duruyordu.

   ŞİMDİ: hiç auto boşluk yok. Kolon yukarıdan aşağı akıyor — marka satırı,
   sonra içerik. (1)'deki kusur geri gelmiyor çünkü o kusurun sebebi TEK
   BAŞINA KALMIŞ bir auto boşluktu; artık hiç yok.

   ⚠ BURAYA auto EKLEMEK YUKARIDAN HİZALAMAYI BOZAR. Bir ekranda kartı dikeyde
   ortalamak gerekirse bunu auto boşlukla değil, o ekranın kendi kuralında
   yapmak gerekiyor — yoksa dört odak ekranı birden kayar. */



/* --- Satırın ucunda eylem varken: ÜÇ KOLONLU IZGARA --------------------

   ⚠ flex + 'margin-inline-start: auto' DENENDİ VE YANLIŞ: auto boşluk bütün
   payı yediği için logo düğme genişliği kadar SOLA kayıyor, yani marka
   eylemin varlığına göre yer değiştiriyordu. Üç kolonda (1fr · logo · 1fr)
   orta kolon her hâlde satırın ortasında duruyor — logonun yeri düğme olsa
   da olmasa da AYNI.

   ⚠⚠ SAĞ KOLON minmax(min-content, 1fr) — ÖLÇÜLMÜŞ ÇAKIŞMA (2026-09-24).

   Üç kolon da minmax(0, 1fr) yazılmıştı ve 390 piksellik telefonda DÜĞME
   LOGONUN ÜSTÜNE BİNİYORDU (ekran görüntüsüyle görüldü). Sebep aritmetik:
   simetrik ortalama, logonun iki yanında DÜĞME KADAR yer ister —
   218 + 2 × (105 + 8) = 444 piksel; 390'lık ekranda kapsayıcı 366. Sağ
   kolonun alt sınırı 0 olduğu için kolon düğmeden dar kalıyor, düğme de
   justify-self: end ile SOLA taşıyordu, yani markanın üstüne.

   min-content alt sınırı bunu kendiliğinden çözüyor, kırılım noktası
   gerekmeden: yer varsa iki yan kolon eşit kalıyor ve logo TAM ORTADA
   duruyor; yer yoksa sağ kolon düğmenin genişliğine kilitlenip sol kolon
   küçülüyor — logo sola kayıyor ama ÜSTÜNE BİNİLMİYOR. Kırılıma bağlamak
   yanlış olurdu: düğme metni yedi dilde farklı uzunlukta ("Zurück zum
   Panel" ~139px), yani çakışma eşiği DİLE göre değişiyor.

   Düğmenin min-content'i metnin tamamı, çünkü .ay-btn 'white-space: nowrap'
   taşıyor (theme.css § 3). Kural oradan kalkarsa burası da yeniden
   düşünülmeli: sarabilen bir etiketin min-content'i en uzun KELİME olur ve
   32 piksellik düğmede metin iki satıra çıkıp taşar.

   Logoda minmax(0, auto) + img max-width/object-fit son güvenlik ağı: ikisi
   birlikte hiç yer kalmadığında marka oranını bozmadan daralıyor ve sayfa
   YATAY KAYDIRMA üretmiyor (§ 23n'deki .pks__fiyat notu aynı kusurun başka
   bir örneği). */
.auth__mark--geri {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(min-content, 1fr);
    align-items: center;
    gap: .5rem;
}
/* ⚠ grid-row: 1 İKİ ÖĞEDE DE AÇIKÇA YAZILI — ÖLÇÜLMÜŞ HATA (2026-09-24).

   Yalnızca kolon verilmişti ve masaüstünde çalışıyordu: DOM sırası logo →
   düğme, kolon sırası 2 → 3, yani yerleştirme imleci ilerledikçe ikisi aynı
   satırda kalıyordu. Telefonda düğme 1. kolona geçince (aşağıdaki 560px
   bloğu) imleç GERİ gitmesi gerekti ve seyrek (sparse) yerleştirme algoritması
   bunu yapmıyor: düğmeyi İKİNCİ SATIRA attı — logo ortada bir satır, '<'
   düğmesi altında ayrı bir satır (ekran görüntüsüyle görüldü).

   Satırı açıkça yazmak yerleşimi DOM sırasından bağımsız kılıyor; kolonlar
   kırılımda yer değiştirdiğinde kural yeniden düşünülmek zorunda kalmıyor. */
.auth__mark--geri .auth__logo {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
}
.auth__mark--geri .auth__logo img {
    max-width: 100%;
    /* Kutu daralırsa görsel oranını koruyup içine sığıyor; 'fill' (varsayılan)
       logoyu yatayda sıkıştırırdı. */
    object-fit: contain;
}

/* Eylem SATIRIN BAŞINDA ve İKİNCİL: çerçeveli + küçük boy düğme (kabuk
   --ghost --sm basıyor). Tam boy bir düğme marka satırının yüksekliğini iki
   katına çıkarıyordu — logo 26–32 piksel.

   ⚠ SAĞ UÇTAN SOL ÜST KÖŞEYE TAŞINDI — KULLANICI KARARI (2026-09-24):
   "panele dön butonunu sağ üst köşe yerine sol üst köşeye çek." Önce telefonda
   (ilk tur), sonra HER BOYUTTA. Geri denetiminin yerleşik yeri satırın başı:
   her uygulama başlığında, her tarayıcıda, her telefonda orada.

   SOL/SAĞ DEĞİL BAŞ/SON: grid-column: 1 + justify-self: start Arapçada
   kendiliğinden sağ üst köşeye geçiyor (okun yönü de aşağıda aynalanıyor).

   <a> ya da <form> olabiliyor (çıkış POST + CSRF gerektiriyor, bkz.
   panel/_kabuk.php § MARKA SATIRININ UCUNDAKİ EYLEM): margin sıfırlanıyor ki
   formun kendi alt boşluğu satırı büyütmesin. */
.auth__geri {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    margin: 0;
}

/* İkonlar ölçüsüz gelirse 300×150 çiziliyor (viewBox'lı <svg>'nin varsayılan
   kutusu): şeritteki çıkış düğmesinde de aynı kural var (§ 23l). */
.auth__geri .ay-ico {
    font-size: 15px;
}

/* GERİ DÜĞMESİ HER BOYUTTA YALNIZCA '<' İKONU — KULLANICI KARARI
   (2026-09-24): "panele dön yerine < olsun sadece."

   İlk turda ikon yalnızca telefonda gösteriliyordu (≤560px), masaüstünde
   "Panele dön" yazısı duruyordu. Kullanıcı ikisini de tek gösterime indirdi:
   ekran artık her genişlikte aynı, kırılıma bağlı bir sapma yok.

   ⚠ ETİKET DOM'DA KALIYOR, 'display: none' YOK. Görsel gizleme kullanılıyor
   (aşağıdaki .auth__geri_ad): düğmenin erişilebilir adı hâlâ "Panele dön".
   display:none olsaydı ekran okuyucu adsız bir bağlantı duyururdu. aria-label
   eklenmedi — ad İÇERİKTEN gelince iki yerde iki metin tutma riski de yok.

   ⚠ İKON YALNIZCA 'link' TÜRÜNDE (.auth__geri--ikon). Oturumu kapatan
   düğmenin yazısı DURUYOR: '<' "geri git" diyor, o düğme ise oturumu
   kapatıyor — ikonla anlatılırsa müşteri geri döndüğünü sanıp oturumundan
   çıkar. Gezinme ikonla anlatılabilir, oturumu bitiren eylem kelime ister.
   (Gerekçe panel/_kabuk.php § SATIRIN UCUNDAKİ TEK EYLEM.)

   RTL: "geri" Arapçada SAĞA bakar. transform logical değil, bu yüzden kural
   burada — aynı kalıp § 23n'deki .pks__gercek tikinde de var. */
[dir="rtl"] .auth__geri_ok {
    transform: scaleX(-1);
}

.auth__geri--ikon {
    /* Yazı gizlendi, geriye kare bir düğme kalıyor: 16 piksellik ok + iki
       yanda .55rem dolgu = 36 × 32 piksel. WCAG 2.5.8'in 24 × 24 alt
       sınırının üstünde. */
    padding-inline: .55rem;
    /* Gizlenen etiket absolute: kapsayıcı blok DÜĞMENİN KENDİSİ olmalı,
       yoksa 1 piksellik kutu en yakın konumlanmış ataya göre yerleşir ve
       sayfanın bir köşesinde kaydırma alanı üretebilir. */
    position: relative;
}

/* Etiketi GÖRSEL olarak gizle — theme.css § 10'daki .ay-sr-only ile aynı
   kalıp. Sınıfın kendisi kullanılmadı çünkü gizleme türe bağlı: çıkış
   düğmesinin etiketi görünür kalıyor. */
.auth__geri--ikon .auth__geri_ad {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* MARKA — ortalı tek öğe, header çubuğu değil.

   Logo ölçüsü sitenin mobil header'ıyla AYNI clamp (§ 3 ve § 23l): ekranlar
   arasında geçiş yapan kullanıcıda logo büyüyüp küçülmüyor. */
.auth__logo {
    align-self: center;
    display: inline-flex;
    flex: 0 0 auto;
}
.auth__logo img {
    display: block;
    width: auto;
    height: clamp(26px, 7vw, 32px);
    /* Oran dosyanın kendi ölçüsü (2444×358): görsel inmeden de aynı yeri
       ayırıyor, kart yüklenirken zıplamıyor. */
    aspect-ratio: 2444 / 358;
}

/* ⚠ DİPTEKİ YARDIMCI ŞERİT KALDIRILDI — KULLANICI KARARI (2026-09-23,
   ekran görüntüsüyle): "footer'daki bu kartı kaldır."

   Kartın altında kenarlıklı bir satır duruyordu: dil seçici + oturumu kapat +
   telif. Amaç doğruydu (kaldırılan üst şeridin iki işlevini yaşatmak) ama
   sonuç yanlıştı — üstten aldığımız footer'ı alta koymuş oldu ve ekranda
   ikinci bir kart gibi görünüyordu.

   İki işlev SAYFANIN kendi başlık satırına taşındı: .odk__ust / .odk__araclar
   (§ 23n), parça panel/_odak_araclar.php. Telif tamamen kalktı; kartı
   "footer" gösteren asıl öğe oydu.

   ⚠⚠ O ŞERİT '.auth__alt' ADINI KULLANIYORDU VE BU BİR ÇAKIŞMAYDI.
   .auth__alt § 23f'de ZATEN VAR: kimlik ekranlarındaki ikincil çağrı satırı
   ("Hesabınız var mı? Giriş Yap"). Şerit kuralları dosyada DAHA SONRA
   geldiği için o satırı eziyordu: giris.php, kayit.php, sifremi-unuttum.php,
   sifre-sifirla.php ve telefon-dogrula.php'de o cümle flex kutuya dönüşüp
   space-between ile iki yana dağılıyordu. Şerit kalkınca § 23f kuralı
   olduğu gibi geri geldi.
   DERS: bu bölümde yeni sınıf adı seçerken § 23'ün tamamı taranmalı —
   .auth__* önadı kalabalık ve çakışma sessiz, yalnızca başka bir ekranda
   görünüyor. Yeni satır bu yüzden .odk__* önadını aldı.

   ⚠ Marka satırındaki 'margin-block-start: auto' KALDI (şerit kalkarken
   logoda, 2026-09-24'te .auth__mark'a geçti). Tek başına DEĞİL çalışıyor:
   eşi .pks'nin margin-block-end: auto'su — gerekçe § 23n'de, tek auto bütün
   bloğu dibe yapıştırıyordu. */

/* ==========================================================================
   § 23m-2 · ODAK EKRANLARININ ORTAK DİLİ — TEK KAYNAK

   KULLANICI KARARI (2026-09-24): "odeme-iptal.php ve panel/paket-sec.php
   sayfalarını birbiri ile uyumlu şekilde profesyonel, mobil uyumlu ve
   kurumsal bir şekilde geliştir · tasarım bütünlüğü olsun · tüm tasarımla
   da uyumlu olsun /panel yapısındaki."

   Dört ekran aynı kabuğu paylaşıyor (paket seçimi · havale · ödeme başarılı ·
   ödeme iptal) ama görsel dilleri AYRIŞMIŞTI. Ölçülen üç fark:

     BAŞLIK   paket seçimi ve havale .pks__h1/.odk__h1 kullanıyordu
              (clamp(1.3rem, 3.2vw, 1.7rem) · 650 · -.02em), ödeme dönüş
              sayfaları ise .sec__title'ı (700 · -.03em) kendi clamp'iyle
              (2.4vw · 1.6rem) eziyordu. Aynı akışın iki adımında en büyük
              öğe hem farklı boyda hem farklı ağırlıktaydı.
     DÜĞME    paket kartındaki birincil düğme 38 piksel (--control-h), ödeme
              dönüşündeki .ay-btn--lg ile 50 piksel. Panelin dili 38; --lg
              sitenin hero'su ve drawer dibi için (theme.css § 3'teki not).
     EYLEM    paket kartında "tam genişlik düğme + altında sessiz bağlantı",
              ödeme dönüşünde "yan yana düğme + bağlantı, 480px altında
              dikey". İki ekranda iki ayrı hiyerarşi.

   ÜÇÜ DE BURADA BİRLEŞTİRİLDİ. Değerler kopyalanmıyor, TEK kural listesi
   paylaşılıyor: ölçü değişirse dört ekran birlikte değişiyor. Değerlerin
   kendisi paket seçiminden alındı çünkü panel diliyle uyumlu olan o —
   650 ağırlık panelin başlık standardı (.pnl__baslik ve .hsp__h2 de 650),
   700/-.03em ise TANITIM sayfasının bölüm başlığı ölçüsü.
   ========================================================================== */

/* SAYFA BAŞLIĞI — dört ekranda aynı.

   .odeme__kart .sec__title seçicisi (0,2,0) ile listede: .sec__title'ın
   kendi ağırlığını (700) ve harf aralığını (-.03em) ezmesi gerekiyor.
   'text-wrap: balance' § 11a'dan gelmeye devam ediyor — başlık iki satıra
   düştüğünde satırları dengeliyor ve bu üç ekranda da doğru. */
/* ⚠ .pks__h1 LİSTEDEN ÇIKTI (2026-09-24, kullanıcı kararı): paket seçiminin
   başlığı ekranda GÖRÜNMÜYOR artık, .ay-sr-only ile yalnızca belgede duruyor
   (gerekçe panel/paket-sec.php § BAŞLIK SATIRI). Görünür ölçü vermek ölü kural
   olurdu. Listeye geri eklenmesi gerekirse başlık da yeniden görünür
   yapılmalı; ikisi birlikte.

   ⚠ .odk__h1 DE AYNI DURUMDA: havale ekranı da başlığını .ay-sr-only ile
   basıyor (aynı gün, aynı karar). Listede duruyor çünkü .odk__* ailesi
   dormant — parça geri gelirse başlık ölçüsü ödeme kartıyla ortak kalsın
   (gerekçe § 23n'deki .odk__* notunda). */
.odk__h1,
.odeme__kart .sec__title {
    min-width: 0;
    margin: 0;
    font-size: clamp(1.3rem, 3.2vw, 1.7rem);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.02em;
}

/* İKİNCİL YOL — dört ekranda aynı: DÜĞME DEĞİL SESSİZ BAĞLANTI.

   İki sınıf aynı on bildirimi ayrı ayrı yazıyordu ve iki dosyada da
   "ölçüler diğerinden alındı" diye not düşülmüştü — yani kural zaten tek
   olmak istiyordu, kopya elle sürdürülüyordu. Artık tek liste.

   min-height 24px: bağlantı satırda TEK BAŞINA duruyor, WCAG 2.5.8'in
   'inline' istisnası geçmiyor (aynı kalıp § 24e'deki .hsp__kaldir ve
   § 24d'deki a.pnl__adim_ad'da da var). */
.pks__havale,
.odeme__ikincil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-underline-offset: .2em;
}
.pks__havale:hover,
.pks__havale:focus-visible,
.odeme__ikincil:hover,
.odeme__ikincil:focus-visible {
    color: var(--brand);
}

/* Kart odak kipinde zemine göre BELİRGİN: ekranda tek karar var ve gözün
   ilk gittiği yer o olmalı. .ay-card'ın durağan hâli çerçevesiz sayılacak
   kadar sakin (theme.css § 8), burada gölge ekleniyor — hover'da DEĞİL,
   her zaman. */
.auth--odak .auth__main > .ay-card {
    box-shadow: 0 24px 48px -32px rgba(16, 24, 40, .28),
                0 2px 8px -4px rgba(16, 24, 40, .06);
}

/* ⚠ HOVER KALKMASI İPTAL — ÖLÇÜLMÜŞ TUTARSIZLIK (2026-09-24).

   Yukarıdaki not "kalkma yok: kart tıklanabilir bir şey değil" diyordu ama
   KALKMA VARDI. theme.css § 8'deki '.ay-card:hover' üç şey yapıyor:
   border-color · box-shadow · transform. İlk ikisi özgüllük yüzünden
   (0,2,0 < 0,3,0) yukarıdaki kurala yeniliyor, transform ise HİÇBİR YERDE
   ezilmiyordu: ödeme dönüş kartı imleç değdiğinde 2 piksel yükseliyor, ama
   çerçevesi ve gölgesi değişmediği için geri bildirim vermeden sadece
   ZIPLIYORDU.

   Paket kartları (.pks__kart) bilinçle .ay-card DEĞİL, tam bu yüzden — kart
   tıklanmıyor, içindeki düğme tıklanıyor. İki ekranın kartı artık aynı
   davranıyor: ikisi de duruyor.

   @media sorgusu theme.css'teki kuralın eşi: kural yalnızca orada
   tanımlanıyor, iptali de aynı koşulda olmalı. */
@media (hover: hover) and (pointer: fine) {
    .auth--odak .auth__main > .ay-card:hover {
        transform: none;
    }
}

/* ⚠ 560px — ODAK KİPİNİN TEK KIRILIMI.

   Panelin liste satırı eşiği 640 (§ 24e), kabuk eşiği 900 (§ 24c); bu ikisi
   satır/kolon kırma kararları. Burada kırılan şey YERLEŞİM DEĞİL ÖLÇÜ:
   telefonda kartın yan dolgusu ve yardımcı satırın hizası. 560 seçildi çünkü
   .auth__main 32rem (512px) ve o genişliğin altında kart pencerenin kenarına
   dayanmaya başlıyor. */
@media (max-width: 560px) {
    /* Odak kipinde kartın yan dolgusu küçülüyor: .auth__main 32rem (512px) ve
       o genişliğin altında kart pencerenin kenarına dayanmaya başlıyor. */
    .auth--odak .ay-card {
        --card-pad: 1.15rem;
    }

    /* ⚠ GERİ DÜĞMESİNİN TELEFONA ÖZEL KURALLARI BURADAN KALKTI (2026-09-24).

       Bir tur boyunca düğme yalnızca ≤560px'te satırın başına geçiyor ve
       yalnızca orada '<' ikonuna dönüşüyordu; masaüstünde sağ uçta "Panele
       dön" yazısı duruyordu. Kullanıcı ikisini de tek gösterime indirdi
       ("sağ üst köşe yerine sol üst köşeye çek · panele dön yerine < olsun
       sadece"), yani kural artık KIRILIMA BAĞLI DEĞİL: hepsi § 23m'deki
       temel kurallarda.

       Kırılıma özel kopya bırakmak iki gösterim demekti ve ikisini elle
       eşlemek gerekiyordu. Bu blokta yalnızca gerçekten ölçüye bağlı olan
       şey kalıyor: kartın yan dolgusu. */
}

/* --- 23n · Odak ekranının başlık satırı ve paket ızgarası
       (.odk__*, .pks__*)  —  panel/paket-sec.php · panel/havale.php --------

   KULLANICI KARARI (2026-09-23): "paket-sec.php sayfasını da minimal ve
   kullanışlı bir şekilde, mobil uyumlu olarak geliştir. profesyonel ve
   kurumsal olsun."

   ÜÇ KUSUR GİDERİLDİ (ekran görüntüsünden ölçüldü):

     1) KART İÇİNDE KART. Sayfa tek büyük .ay-card'ın içindeydi ve onun
        içinde üç paket kartı daha vardı. Dış kartın kenarlığıyla iç
        kartların kenarlığı arasında 3rem'lik bir dolgu şeridi kalıyor,
        ekranda paketler değil çerçeveler görünüyordu. Mobilde dolgular da
        çiftleniyordu (dış p-4 + iç p-3 = kart başına 5rem).
        Artık kart olan tek şey PAKETİN KENDİSİ; başlık, dönem anahtarı ve
        notlar doğrudan odak zemininin üstünde.

     2) ALTI DÜĞME. Kart başına iki dolu/çerçeveli düğme vardı ve hangisinin
        asıl yol olduğu okunmuyordu. Kartla ödeme birincil (hesap hemen
        açılıyor), havale ikincil (onay bekliyor) — görsel ağırlıkları da öyle
        oldu: bir dolu düğme + bir metin bağlantısı.

     3) PAKETLER AYIRT EDİLEMİYORDU. Kartlar yalnızca ad + medya alanı +
        fiyat gösteriyordu; "Profesyonel ile Kurumsal farkı ne" sorusu bu
        ekrandan cevaplanamıyor, tanıtım sayfasına (yani ödeme akışının
        dışına) çıkmak gerekiyordu. Artık kart başına ÜÇ GERÇEK var:
        medya alanı · platform kapsamı · hesap sayısı. Ortak altı özellik
        ızgaranın altında TEK satırda — üç kartta on sekiz madde "minimal"
        isteğinin tersi olurdu.
   ---------------------------------------------------------------------- */

/* --- Başlık satırı: ORTALANMIŞ ARAÇLAR (dil · çıkış) -------------------

   KULLANICI KARARI (2026-09-24): "havale.php sayfasını da aynı şekilde
   oluştur" — yani paket seçimiyle aynı tepe düzeni.

   GEÇMİŞ: satır h1 ile araçları 'space-between' ile iki yana dağıtıyordu
   (baseline hizası, çünkü düğme 32px ve h1 daha büyüktü). Sonra başlık
   .ay-sr-only'ye geçti — akış dışı, yani satırda hizalanacak İKİNCİ bir öğe
   kalmadı ve araçlar tek başına sola yapışıyordu.

   Şimdi ORTALANMIŞ KOLON: iki ekranın tepesi birebir aynı okunuyor (marka
   satırı → ortalanmış tek denetim satırı → kart). Kolonun (satır değil)
   sebebi: dar telefonda dil seçici ile çıkış düğmesi alt alta geçtiğinde
   ikisi de ortalı kalıyor. Telefona özel eski kurallar (≤560px) bu yüzden
   gereksizleşti ve silindi.

   ⚠ BU KURAL ŞU AN KULLANILMIYOR (dormant). havale.php 2026-09-24'te dil
   seçici + çıkış parçasını bıraktı, yani .odk__ust hiçbir ekranda basılmıyor.
   Paket seçiminin eşi (.pks__ust) de aynı gün tamamen silindi — ORADAKİ
   gerekçe farklı: o sarmalayıcının içindeki iki öğe sayfanın iki ayrı
   bölgesine ait oldu (§ 23n). Bu kural silinmedi çünkü parça
   (panel/_odak_araclar.php) dosyada duruyor ve tek satırlık bir include ile
   geri gelebiliyor. */
.odk__ust {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

/* ⚠ .odk__h1 ÖLÇÜSÜ BURADA DEĞİL, § 23m-2'DE: odak ekranlarının sayfa
   başlığı tek kural listesinden geliyor. Buraya yeniden yazılırsa (bu bölüm
   dosyada § 23m'den SONRA) ortak kural sessizce ezilir.

   ⚠ havale.php O SINIFI ARTIK KULLANMIYOR: başlığı .ay-sr-only ile basıyor
   (paket seçimiyle aynı karar). Kural listede duruyor çünkü ölçü ödeme dönüş
   kartının başlığıyla ortak. */

.odk__araclar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .6rem;
    min-width: 0;
}

/* Dil seçici (§ 23k) sayfa akışı için yazıldı: 1.5rem alt boşluk ve 11rem
   alt genişlik sınırı var. İkisi de bu satırda yanlış — boşluk satırı
   büyütüyor, alt sınır dar telefonda çıkış düğmesini alt satıra itiyordu.
   Etiket de gizleniyor: başlık satırında "Dil seçimi" yazısı gürültü,
   kutunun kendi aria-label'ı ekran okuyucuya adı veriyor
   (_dil_secici.php'deki nota bakın). */
.odk__araclar .dilsec {
    margin-bottom: 0;
}
.odk__araclar .dilsec__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.odk__araclar .dilsec__sel {
    min-width: 0;
    width: auto;
    height: 32px;
    padding-block: 0;
    font-size: var(--fs-sm);
}

.odk__cikis {
    margin: 0;
}
.odk__cikis button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.odk__cikis .ay-ico {
    font-size: 15px;
}

/* ⚠⚠ .odk__* SINIFLARI ŞU AN HİÇBİR EKRANDA KULLANILMIYOR — DORMANT.

   İki ekran da bıraktı, ikisi de kullanıcı kararıyla:
     · panel/paket-sec.php (2026-09-24): "dil ve oturum kapata burada gerek
       yok". O ekranın başlık satırının kendisi de sonradan kalktı: geriye
       ORTALANMIŞ DÖNEM ANAHTARI kaldı ve o artık ızgaranın hemen üstünde
       duruyor (aşağıda, § SAYFANIN İKİ BÖLGESİ).
     · panel/havale.php (2026-09-24): "dil değiştirme ve oturumu kapatmayı
       kaldır". O ekran başlığını .ay-sr-only ile basıyor, sarmalayıcı da
       kalktı.

   KURALLAR SİLİNMEDİ, çünkü parçanın kendisi de silinmedi:
   panel/_odak_araclar.php dosyada duruyor ve tek satır include ile geri
   gelebiliyor (dil seçici + çıkış). Biçimi burada hazır bekliyor. Yarısını
   silmek — parça dururken kuralları atmak — geri dönüşte sessizce biçimsiz
   bir şerit üretirdi.

   ⚠ PARÇA GERİ GELİRSE HATIRLANACAK ŞEY: havale birimi 2026-09-24'te
   müşteriye sorulmaktan çıkıp DİLDEN türetilmeye başladı (_sirket.php →
   ay_havale_birimi). O <select> geri geldiğinde aynı zamanda PARA BİRİMİ
   seçicisi oluyor — Türkçe TL, Almanca EUR, diğer diller USD. Şu an ekranda
   olmadığı için müşteri hangi dille geldiyse o birimde ödüyor. */

/* --- Havale ekranı  (.hvl__*)  —  panel/havale.php ---------------------

   KULLANICI KARARI (2026-09-24): "havale.php sayfasını da aynı şekilde
   oluştur" (paket seçimi ve ödeme dönüş kartıyla aynı dil).

   Ekran Bootstrap kalıplarıyla yazılmıştı ve üç yerde ayrışıyordu:
     · kart 'p-4 p-md-5' taşıyordu — .ay-card'ın kendi --card-pad'iyle
       toplanıp kart başına 5rem'e çıkıyordu (aynı kusur paket seçiminde de
       vardı, § 23n kusur 1)
     · etiket/değer listeleri 'dl.row > .col-5/.col-7' ile kuruluydu:
       panelde .row/.col boşlukları çiftliyor (§ 24o) ve 320 pikselde etiket
       iki satıra bölünüyordu
     · bölüm başlığı Bootstrap'ın '.h5'iydi, yani ekranda ikinci bir
       tipografi ölçeği
   Üçü de panelin/ödeme kartının mevcut kalıplarına bağlandı; bu blok yalnızca
   o kalıpların bu ekrandaki boşluklarını veriyor — yeni bir görsel dil
   açmıyor. */

/* Kart ölçüsü ödeme dönüş kartıyla AYNI (.odeme__kart, § 22): 44rem ve
   ortalı. Metin ortalanmıyor — içerik bir etiket/değer listesi, okunması
   sola yaslı doğru. */
.hvl__kart {
    max-width: 44rem;
    margin-inline: auto;
}

/* Açıklama satırı panelin yardımcı paragrafıyla aynı ton (.hsp__bos):
   ayrı bir sınıf, çünkü buradaki boşluk ritmi kartın içi. */
.hvl__lead {
    max-width: 62ch;
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--fs-base);
    line-height: 1.55;
}
.hvl__lead + .hvl__liste {
    margin-top: 1rem;
}

/* .ayr__liste (§ 24o) kendi dikey boşluğunu ayarlar ekranı için taşıyor
   (.75rem 0 .9rem); kartın içinde ritmi buradan veriyoruz. */
.hvl__liste {
    margin: 0;
}
.hvl__liste + .ay-alert,
.hvl__liste + .hvl__form,
.ay-alert + .hvl__liste {
    margin-top: 1rem;
}

/* Tutar, IBAN, referans ve alıcı adı: sabit genişlikli sayı ve vurgulu.
   tabular-nums ŞART — IBAN'ı ekrandan okuyup bankasına yazan müşteri için
   rakamların aynı genişlikte olması hata payını düşürüyor. */
.hvl__tutar {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    /* Uzun IBAN dar telefonda kutuyu taşırmasın. */
    overflow-wrap: anywhere;
}

/* Hesap bilgileri başlığı: üstündeki uyarı şeridinden ayrılsın.

   ⚠ SEÇİCİ İKİ SINIFLI OLMAK ZORUNDA — ÖLÇÜLMÜŞ HATA (2026-09-24). Kural
   çıplak '.hvl__h2' yazılıydı ve boşluk HİÇ UYGULANMIYORDU: başlık aynı
   zamanda .hsp__h2 taşıyor, o sınıf 'margin: 0' veriyor ve § 24e bu bölümden
   SONRA geliyor — aynı özgüllükte (0,1,0) sonraki kazanıyor. Ekranda kırmızı
   uyarı şeridi ile "USD hesap bilgileri" başlığı birbirine yapışıyordu.
   .hvl__kart ile birlikte (0,2,0) oluyor ve panelin h2 ölçüsünü ezmeden
   yalnızca boşluğu veriyor. */
.hvl__kart .hvl__h2 {
    margin: 1.25rem 0 .75rem;
}

.hvl__form {
    margin: 1rem 0 0;
}

/* --- KOPYALANABİLİR ALANLAR  (.hvl__alanlar · .hvl__alan) --------------

   IBAN / SWIFT / alıcı kutuları (panel/havale.php → ay_hvl_kopya). Kutunun
   kendisi ve kopyala düğmesi panel/baglantilar.php'nin sınıflarını kullanıyor
   (.bgl__adres* + .bgl__kopyala, § 24i) — yeni bir bileşen yazılmadı, burada
   yalnızca bu kartın içindeki boşluk ritmi var.

   ⚠ ETİKET/DEĞER LİSTESİNDEN SONRA NEFES PAYI ŞART: üstündeki .ayr__liste
   ("Banka", "Banka adresi") satır aralığı sıkı ve ilk alan etiketi ("IBAN")
   ona yapışıyordu — iki ayrı okuma birimi tek blok gibi görünüyordu. */
.hvl__liste + .hvl__alanlar {
    margin-top: .85rem;
}

/* Dipteki "sonraki adım" cümlesi kartın son satırı: üstünde ince çizgi,
   ödeme dönüş kartındaki yardım satırıyla aynı kalıp (.odeme__yardim).

   ⚠ .hvl__alanlar DA LİSTEDE OLMAK ZORUNDA — ÖLÇÜLMÜŞ KUSUR (2026-09-24):
   seçici yalnızca .hvl__liste ve .ay-alert kardeşlerini sayıyordu, oysa
   kopyalanabilir alanlar eklendikten sonra cümlenin BİR ÜSTÜNDEKİ kardeş
   .hvl__alanlar oldu. Kural hiç uygulanmıyordu: "Havaleyi yaptıktan sonra…"
   cümlesi son kopyala düğmesine yapışık, çizgisiz ve normal boyda duruyordu
   (ekran görüntüsünde görüldü). */
.hvl__liste + .hvl__lead,
.hvl__alanlar + .hvl__lead,
.ay-alert + .hvl__lead {
    margin-top: 1.25rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--hairline);
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

/* --- Paket seçimi · sayfa sarmalayıcısı  (.pks) ------------------------
   KULLANICI KARARI (2026-09-24): "çok taşmadan, kaymadan, alt sayfaya
   taşmasına gerek kalmadan kullanışlı bir şekilde paketlerimizi göster."

   ⚠ SAYFANIN TAŞMA SEBEBİ BU DOSYADAYDI, İÇERİKTE DEĞİL.

   Odak kabuğunun kolonu (.auth--odak .auth__main, § 23m) bir flex column ve
   gap'i clamp(1.25rem, 3vw, 2rem). paket-sec.php o kolona DOĞRUDAN sekiz
   kardeş basıyordu: logo, başlık satırı, doğrulama şeridi, durum şeridi,
   dönem formu, ızgara, ortak özellikler, not. Yedi aralık × 32px = 224
   piksel; yalnızca boşluklar bir telefon ekranının üçte birini yiyordu ve
   ekran her hâlde pencereden uzun kalıyordu.

   Sarmalayıcı kolonun gördüğü çocuk sayısını İKİYE indiriyor (logo + .pks);
   içerideki ritim burada, daha küçük ölçülerle veriliyor.

   ⚠ DİKEY ORTALAMANIN alt auto BOŞLUĞU BURADA DEĞİL. Bir dönem bu kural
   'margin-block-end: auto' taşıyordu — marka satırındaki üst auto'nun eşi.
   Doğru teşhis, yanlış yer: eş yalnızca BU sayfada kuruluyordu ve diğer üç
   odak ekranı (havale · ödeme başarılı · ödeme iptal) eşsiz kalıp içeriği
   dibe yapıştırıyordu (kullanıcı bildirimi 2026-09-24). Kural § 23m'e,
   kolonun SON ÇOCUĞUNA taşındı; .pks de son çocuk olduğu için aynı boşluğu
   oradan alıyor. Buraya geri yazılırsa iki kaynak olur. */
.pks {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Şeritler (.ay-alert) theme.css'te margin: 0 taşıyor; aradaki boşluğu
   kolonun gap'i veriyor. Burada ek kural gerekmiyor — not, aynı boşluğu
   margin ile kurmaya kalkışmamak için. */

/* --- SAYFANIN İKİ BÖLGESİ  —  2026-09-24 · KULLANICI İSTEĞİ --------------

   "success kartını tasarım genişliğinde yap · tasarımını iyileştir."

   Ekran artık iki bölge hâlinde okunuyor ve ikisi de .pks kolonunun doğrudan
   çocuğu (yani hepsi AYNI genişlikte, boşluklarını tek gap veriyor):

     1) DURUM — gizli <h1> · erişim şeridi · doğrulama şeridi · havale onayı
        şeridi · akış mesajları. Hepsi tam genişlikte .ay-alert kutusu.
     2) SEÇİM — dönem anahtarı (.donem--pks) + paket ızgarası (.pks__izgara).

   ⚠ .pks__ust SARMALAYICISI TAMAMEN KALDIRILDI.

   Ortalanmış bir kolondu ve iki şey tutuyordu: gizli başlık + dönem anahtarı
   (bir dönem de durum cümlesi). Durum cümlesi şeride dönüştükten sonra
   ölçülen sonuç şuydu: ekran "kırmızı kutu → anahtar → beyaz kutu → ızgara"
   diye diziliyor, yani TEK denetim iki bildirim kartının arasına sıkışıyordu
   (kullanıcı ekran görüntüsüyle bildirdi).

   Sarmalayıcının iki içeriği iki ayrı bölgeye ait olduğu için kutu da
   gereksizleşti: başlık (1)'in başında, anahtar (2)'nin başında.
   Ortalama kaybolmadı — anahtarın kendi kuralında (.donem--pks, aşağıda).

   ⚠ .pks__basl ve .pks__h1 de daha önce aynı sebeple kalkmıştı: başlık
   .ay-sr-only ile akış dışına çıkınca sarmalayıcıların işi kalmadı.

   --------------------------------------------------------------------------
   DURUM CÜMLESİNİN KENDİ SINIFI DA KALKTI  (.pks__serit)

   Önce çıplak kırmızı bir satırdı (.pks__durum--uyari), sonra kullanıcı
   kararıyla şeride döndü ama kutuya 62ch sınırı + ortalama veriliyordu
   (.pks__serit). ÖLÇÜM: 1280 piksellik ekranda kutu 586 piksel ve x=347'de,
   kardeşleri (havale kartı · ızgara) 896 piksel ve x=192'de — sayfanın en
   önemli bildirimi hizasız, ortada asılı bir "toast" gibi görünüyordu.
   Kullanıcının isteği tam bu: "tasarım genişliğinde yap."

   Artık ŞERİDİN HİÇ EK SINIFI YOK: çıplak .ay-alert .ay-alert--err kolonun
   tamamını kaplıyor, metin sola hizalı ve altındaki havale kartıyla birebir
   aynı kutu geometrisinde. 62ch'lik okuma ölçüsü BİLİNÇLİ terk edildi —
   havale kartının gövde metni de tüm kolonu kullanıyor, tek kutuyu dar
   tutmak o tutarlılığı bozardı.

   ⚠ Bu yüzden ekranda artık kırmızı şeridi işaretleyen bir sınıf yok; sürüm
   imzası da 'ister' yerine 'istemez' tarafından ('pks__durum' geri gelirse
   yakalanıyor). Gerekçe araclar/surum-imzalari.php'de. */

/* DÖNEM ANAHTARI — SEÇİM BÖLGESİNİN BAŞI, ORTALI.

   Bileşenin kendisi (§ 14b-2) zaten ortalı bir KOLON; burada satır kipine
   alınıyor ve ORTALAMAYI KENDİSİ YAPIYOR. Eskiden ortalamayı sarmalayıcı
   (.pks__ust) veriyordu; o kutu kalktığı için (yukarıdaki blok) kural buraya
   taşındı — margin-inline: auto ile, çünkü .pks bir flex KOLONU ve orada
   justify-content dikey eksene bakar.

   justify-content: center BİLİNÇLİ ve ayrı bir iş yapıyor: öğenin İÇİNDEKİ
   anahtarı ortalıyor. Bir dönem 'flex-start' yazıyordu (anahtar başlığın
   altında sola yaslıydı) ve başlık kalkınca satırda tek başına kalan anahtar
   ekranın solunda asılı duruyordu.

   margin-block-start: .5rem — SEÇİM bölgesini DURUM bölgesinden ayırıyor.
   .pks'in gap'i 1rem, yani anahtar bildirimlerden 1.5rem sonra başlıyor.

   --------------------------------------------------------------------------
   margin-block-end: .875rem  —  ÖNERİLEN ROZETİNİN TAŞMASINI KARŞILIYOR

   KULLANICI BİLDİRİMİ (2026-09-24, ekran görüntüsüyle): "aylık yıllık
   butonlarının alt kısmına biraz boşluk ver. yapışık gibi duruyor."

   Bir dönem alt boşluk YOKTU (yalnızca .pks'in 1rem gap'i) ve gerekçesi
   "denetim, etkilediği şeyin yanına ait" idi. Doğru fikir, EKSİK HESAP:
   ölçüm, gözün gördüğü boşluğun 16 piksel DEĞİL 6 piksel olduğunu gösterdi.

   Sebep .pks__flag: "ÖNERİLEN" rozeti position: absolute + translateY(-50%)
   ile kartın üst kenarından 10 PİKSEL YUKARI TAŞIYOR (ölçüldü). Izgaranın
   kutusu anahtardan 16 piksel aşağıda ama rozet o boşluğun içine giriyor —
   yani ekranda kalan 6 piksel. Kullanıcının "yapışık" dediği şey tam bu.

   DEĞER TAŞMAYA GÖRE SEÇİLDİ, gözle değil:
     16 (gap) + 14 (bu margin) − 10 (rozet taşması) = 20 piksel görünen boşluk
   Rozetsiz iki kartta ise 30 piksel. Asimetri kabul edilebilir: rozet zaten
   kartın dışına çıkan bir vurgu ve göz onu ızgaranın başlangıcı sayıyor.

   ⚠ ROZETİN OFSETİ DEĞİŞİRSE BU DEĞER DE DEĞİŞMELİ (translateY(-50%) ·
   .pks__flag, § 23n). İkisi tek bir ölçünün iki yarısı.

   ⚠ ÜST BOŞLUK ALTTAN KÜÇÜK (24 < 30) AMA GÖRÜNEN HÂLİ TERSİ (24 > 20): yani
   anahtar hâlâ ızgaraya daha yakın okunuyor ve "denetim etkilediği şeyin
   yanında" kuralı korunuyor. Ham sayılara bakıp bu satırı "düzeltmeye"
   çalışmak kusurun kendisini geri getirir.

   .donem--panel değiştiricisi kullanılmadı; o hâlâ kartın içinde duran dikey
   yerleşim için geçerli. */
.donem--pks {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: .5rem auto .875rem;
}

/* --- Paket ızgarası ---------------------------------------------------- */

/* Bootstrap .row/.col'dan çıkıldı (kolonlar lg altında tek kolona düşüyor,
   panelde boşlukları çiftliyor — aynı not § 24o'da).

   ⚠ auto-fit TEK BAŞINA KULLANILAMIYOR — KULLANICI BİLDİRİMİ (2026-09-24,
   ekran görüntüsüyle): "mobilde bir satırda 1 adet, alt alta gelecek şekilde."

   Sebep ölçülebilir: auto-fit kolon sayısını yere göre kendisi seçiyor ve
   arada kaçınılmaz bir İKİ KOLON aralığı var. Izgara genişliği Bootstrap
   .container'ı yüzünden basamaklı ilerliyor (vp 576–767 → 516px, vp 768–991
   → 696px, vp ≥1200 → 896px). 516 pikselde minmax(220px) tam iki kolon
   veriyor ve ÜÇ paketle ikinci satırda ÖKSÜZ BİR KART kalıyordu: iki kart
   yan yana, üçüncüsü tek başına altta, yanı boş. Kullanıcının bildirdiği
   görüntü tam buydu.

   Çözüm açık kırılım: 768'e kadar TEK kolon, sonrasında auto-fit.
     · 768–991 → ızgara 696px, minmax(200px) üç kolon (kart ≈ 223px)
     · ≥1200   → ızgara 896px, üç kolon (kart ≈ 290px)
   Dört paket tanımlanırsa ≥1200'de dördü yan yana sığıyor; auto-fit'in
   kalması bu yüzden — kolon sayısı paket sayısına elle yazılmıyor.

   align-items: stretch (varsayılan) BİLİNÇLİ: kartlar aynı yükseklikte
   kalıyor ve "Kartla öde" düğmeleri aynı çizgide duruyor. Yükseklik farkı
   üç seçenek arasında görsel bir hiyerarşi ima ederdi ve o hiyerarşiyi
   yalnızca "önerilen" kart taşımalı. */
.pks__izgara {
    display: grid;
    /* MOBİL VARSAYILAN: tek kolon, kartlar alt alta. minmax(0, 1fr) — düz
       '1fr' minimum olarak min-content alıyor ve uzun bir paket adı kolonu
       ızgaradan geniş yapabiliyordu. */
    grid-template-columns: minmax(0, 1fr);
    /* ⚠ .85rem DEĞİL 1rem (2026-09-24): .pks kolonunun gap'i ile AYNI değer.
       Ölçüldüğünde kartlar arası yatay boşluk 14 piksel, bloklar arası dikey
       boşluk 16 pikseldi — aynı ızgarada iki farklı ritim. Fark küçük ama
       kartların çevresindeki boşluk asimetrik görünüyordu (yanları içinde
       bulunduğu kolonun boşluğundan dar). Tek sayıya indirildi. */
    gap: 1rem;
    /* Dikey boşluk SARMALAYICININ gap'inden (.pks) geliyor; burada margin
       bırakmak onu çiftliyordu. */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 768: Bootstrap .container'ın 720 piksele çıktığı eşik (ızgara 696px).
   Üç kart orada 223 piksele düşüyor ve okunuyor — bir basamak aşağıda
   (516px) üçe bölmek 165 piksel demek, kart adı kırılıyordu. */
@media (min-width: 768px) {
    .pks__izgara {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}



.pks__kart {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.2rem 1.1rem 1.1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
}

/* ÖNERİLEN KART: marka çerçevesi + marka gölgesi. .ay-card--brand SINIFI
   kullanılmadı çünkü bu kart .ay-card DEĞİL (hover kalkması istenmiyor —
   kartın kendisi tıklanabilir değil, içindeki düğme tıklanıyor).

   ⚠ GÖLGE DEĞERİ .ay-card--brand İLE AYNI OLDU (2026-09-24, tasarım
   bütünlüğü kararı). Burada '0 20px 44px -28px rgba(1,30,90,.38)' yazılıydı,
   theme.css § 8'de ise '0 26px 52px -30px rgba(1,30,90,.40)': aynı fikrin
   ("öne çıkan kart") iki ayrı reçetesi. Fark gözle ayırt edilemeyecek kadar
   küçüktü, yani iki değeri sürdürmenin bir karşılığı yoktu. Artık ön yüzdeki
   paket kartı ile buradaki önerilen kart aynı vurguyu taşıyor.

   ⚠ IZGARA KARTLARI GÖLGESİZ KALIYOR ve bu bilinçli: ödeme dönüş kartı
   durağan gölge alıyor (§ 23m) ama orada ekranda TEK nesne var, gölge ona
   varlık kazandırıyor. Burada üç kart yan yana ve yükseklik farkı bir
   HİYERARŞİ ima ediyor — o işi yalnızca bu kart yapmalı. Üçü de gölgelenirse
   "önerilen" vurgusu görevini kaybediyor. */
.pks__kart--one {
    border-color: var(--brand);
    box-shadow: 0 26px 52px -30px rgba(1, 30, 90, .40);
}

/* Rozet kartın üst kenarına oturuyor. position: absolute + translate:
   akışta kalsaydı başlığı aşağı itip diğer kartlarla hizayı bozuyordu. */
.pks__flag {
    position: absolute;
    top: 0;
    /* Ofset kartın yan dolgusuyla AYNI (.pks__kart): dolgu değişirse bu da
       değişmeli, yoksa rozet kartın içine kayıyor. */
    inset-inline-start: 1.1rem;
    transform: translateY(-50%);
    margin: 0;
    padding: .15rem .6rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: var(--on-brand);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pks__ad {
    margin: 0 0 .25rem;
    font-size: var(--fs-lg);
    font-weight: 650;
}

/* ⚠ PARAGRAFTAN white-space: nowrap KALDIRILDI — SAYFANIN YANA KAYMA SEBEBİ.

   Tutar ve birim ("35.000 ₺" + "/ yıl") tek bir nowrap paragrafındaydı, yani
   tarayıcı o satırı HİÇBİR yerden kıramıyordu. Izgara kolonu 220–260 piksel;
   1.55rem'lik yazıyla satırın gerektirdiği genişlik kolondan büyük olduğunda
   kart taşıyor, ızgara kapsayıcıdan geniş çıkıyor ve SAYFA YATAY KAYDIRMA
   ÜRETİYORDU (Arapça ve Almanca'da daha erken: birim metinleri daha uzun).

   nowrap artık yalnızca TUTARIN kendisinde (.pks__tutar) — "35.000" ile "₺"
   ayrılmamalı, ama "/ yıl" gerekirse alt satıra geçebilir. */
.pks__fiyat {
    margin: 0 0 .75rem;
    color: var(--ink);
    font-size: 1.5rem;
    font-weight: 680;
    line-height: 1.15;
    /* Sayılar sabit genişlikte: dönem değişince fiyat satırı zıplamasın. */
    font-variant-numeric: tabular-nums;
}
.pks__tutar { white-space: nowrap; }
.pks__birim {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
}

/* ÜÇ GERÇEK — paketler arasındaki farkın tamamı.

   Onay işareti ::before ile: üç madde × üç kart = dokuz satır içi SVG
   olurdu. Karakter değil maskesiz bir işaret: '✓' bazı Android
   yazıtiplerinde emoji olarak çizilip renkleniyor, o yüzden borderla
   çizilen küçük bir tik kullanılıyor. */
.pks__gercek {
    display: grid;
    gap: .35rem;
    /* Alt boşluk .95 → .75rem: altında artık ortak özellik listesinin ince
       çizgisi var (.pks__ozellik) ve çizginin iki yanı eşit boşluk almalı —
       o blok da .75rem üst dolgu taşıyor. */
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}
.pks__gercek li {
    position: relative;
    padding-inline-start: 1.35rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.45;
}
.pks__gercek li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .42em;
    width: .5rem;
    height: .28rem;
    border-inline-start: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
}
/* RTL: tik yatayda aynalanıyor. transform logical değil, bu yüzden § 24'teki
   listeye değil buraya yazılıyor — kural yalnızca bu işareti ilgilendiriyor
   ve orada tek başına anlamsız kalırdı. */
[dir="rtl"] .pks__gercek li::before {
    transform: rotate(45deg) scaleX(-1);
}

/* Düğme kartın DİBİNE sabit: üç kartta aynı çizgide duruyor. margin-top:auto
   flex kolonundaki kalan boşluğu süpürüyor. */
.pks__form {
    margin: auto 0 0;
}

/* HAVALE: düğme değil BAĞLANTI (gerekçe bölüm başında, kusur 2).

   ⚠ BİÇİMİ § 23m-2'DE, ödeme dönüşündeki .odeme__ikincil ile ORTAK. Burada
   yalnızca bu ekrana özgü olan kalıyor: düğmeyle arasındaki boşluk. Ödeme
   ekranında o boşluğu .odeme__cta'nın gap'i veriyor ve aynı değerde
   (.6rem) — iki ekranda düğme–bağlantı aralığı eşit. */
.pks__havale {
    margin-top: .6rem;
}

/* --- Her pakette olan özellikler  (.pks__ozellik) ----------------------
   KULLANICI KARARI (2026-09-24): "[ızgaranın altındaki iki paragrafı] sil ·
   index.php'deki paketler kartındaki tüm özellikleri de ekle."

   Altı çekirdek özellik ızgaranın ALTINDA tek satırda duruyordu
   (.pks__ortak, kaldırıldı); artık her kartın içinde, ön yüzdeki kartla
   (.pkg__list) aynı şekilde.

   ⚠ NİYE .pks__gercek'in DEVAMI DEĞİL, AYRI BİR LİSTE

   Üstteki üç satır PAKETE GÖRE DEĞİŞİYOR (medya alanı · platform kapsamı ·
   hesap sayısı), bu blok üç pakette AYNI. Tek listede toplandıklarında
   dokuz satır eşit ağırlıkta görünüyor ve karşılaştıran göz farkı
   bulamıyordu. Buradaki üç şey o ayrımı görsel hâle getiriyor:
     · üstünde ince çizgi (aynı kalıp ön yüzde .pkg__list-head'de de var)
     · daha soluk ton (--ink-mute)
     · daha küçük tik (ortak maddeler "dahil olanlar", vurgu değil)

   Tik işareti ::before ile, SVG ile değil: altı madde × üç kart = on sekiz
   satır içi SVG olurdu. Karakter de değil ('✓' bazı Android
   yazıtiplerinde emoji olarak çizilip renkleniyor), borderla çizilen küçük
   bir tik (aynı gerekçe .pks__gercek'te de yazılı). */
.pks__ozellik {
    display: grid;
    gap: .3rem;
    margin: 0 0 1rem;
    padding-block-start: .75rem;
    padding-inline: 0;
    border-block-start: 1px solid var(--hairline);
    list-style: none;
}
.pks__ozellik li {
    position: relative;
    padding-inline-start: 1.15rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.pks__ozellik li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .4em;
    width: .42rem;
    height: .24rem;
    /* Tik metinle AYNI tonda (--ink-mute), marka mavisi değil: bu satırlar
       "dahil olanlar", vurgu değil. --brand-line denendi ve çok soluktu
       (alpha .18) — tik kırık gibi görünüyordu. */
    border-inline-start: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: .75;
}
/* RTL: tik yatayda aynalanıyor (aynı kural .pks__gercek için de var). */
[dir="rtl"] .pks__ozellik li::before {
    transform: rotate(45deg) scaleX(-1);
}

/* PAKETE ÖZEL EKSTRA — ortak maddelerin arasında kaybolmasın: bu madde
   paketi AYIRAN şey. Ön yüzdeki .pkg__list-extra ile aynı karar. */
.pks__ozellik--ek {
    color: var(--ink);
    font-weight: 600;
}
.pks__ozellik--ek::before {
    border-color: var(--brand);
    opacity: 1;
}

/* --- IZGARANIN ALTINDAKİ DİP SATIRI SİLİNDİ  (.pks__dip · .pks__vazgec) --

   Satır bir dönem üç küçük metin taşıyordu (ortak özellikler · "kartla hemen
   açılır" notu · aylık uyarısı); üçü de 2026-09-24'te kullanıcı kararıyla
   kaldırıldı ve geriye tek başına VAZGEÇ düğmesi kalmıştı.

   O düğme de aynı gün, yine kullanıcı kararıyla MARKA SATIRININ SAĞ UCUNA
   taşındı: "panele dön butonu, yukarıdaki logo satırında sağ üst köşede
   olsun." Yeni yerinin kuralları § 23m'de (.auth__mark--geri · .auth__geri).

   İki kural bu yüzden SİLİNDİ, gizlenmedi: dipte artık hiç öğe yok, boş bir
   flex kutusu ekranın altına sarmalayıcının gap'i kadar sebepsiz boşluk
   bırakırdı. Aynı kararın telefondaki eşi (.pks__dip ortalama kuralı) da
   aşağıdaki 560px bloğundan kalktı. */

/* --- Tek kolonda kartın başı: AD SOLDA, FİYAT SAĞDA -------------------
   Kartlar alt alta inince genişlik 336–516 piksele çıkıyor ve ad ile fiyatı
   ALT ALTA yazmak o genişlikte bir satırı boş yere harcıyordu: kart başına
   ~30 piksel, üç kartta ~90. Telefonda kaydırılacak her piksel önemli.

   Kart bu aralıkta flex KOLON değil IZGARA: iki öğeyi yan yana koymanın
   sarmalayıcı eklemeden tek yolu bu. Yerleşim ELLE veriliyor, auto-flow'a
   bırakılmıyor — fiyat satırlarından biri display:none (görünmeyen dönem);
   otomatik yerleşim gizli öğeyi saymadığı için sıra kazara doğru çıkıyor,
   açıkça yazmak onu kazaya bağlı bırakmıyor.

   align-items: baseline — ad ile fiyat AYNI TABAN ÇİZGİSİNDE. 'center'
   olsaydı 1.125rem'lik ad, 1.5rem'lik fiyatın ortasına hizalanıp iki ayrı
   satır gibi okunurdu. Tek öğeli satırlarda (liste, düğme, bağlantı)
   baseline hizası 'start' gibi davranıyor, yan etkisi yok.

   ⚠⚠ BU BLOK .pks__kart TANIMINDAN SONRA GELMEK ZORUNDA — ÖLÇÜLMÜŞ HATA.
   İlk yazımda blok ızgara kurallarının yanına, yani .pks__kart'ın ÜSTÜNE
   konmuştu. Medya sorgusu özgüllük eklemiyor: sonradan gelen
   '.pks__kart { display: flex }' onu eziyor ve kart ızgaraya HİÇ dönmüyordu
   (headless ölçüm: mq=true, grid-template-columns uygulanmış ama
   display=flex — grid-template'in sessizce yok sayıldığı, teşhisi zor bir
   ara hâl).

   ⚠ 767px BİLİNÇLİ: ızgaranın üç kolona çıktığı eşiğin (min-width: 768)
   tam altı. İkisi birlikte değişmeli; biri kayarsa üç dar kolonda ad ve
   fiyat yan yana sıkışır. */
@media (max-width: 767px) {
    .pks__kart {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        column-gap: .75rem;
    }
    .pks__ad {
        grid-column: 1;
        margin: 0;
    }
    .pks__fiyat {
        grid-column: 2;
        margin: 0;
        text-align: end;
    }
    /* Kalan öğeler satırın tamamını kaplıyor.

       ⚠ .pks__ozellik DE BURADA OLMAK ZORUNDA. Kart bu aralıkta ızgara ve
       yerleşim elle veriliyor; liste span almazsa ad/fiyat satırının
       kolonlarından birine düşüyor ve maddeler kartın yarı genişliğinde
       kırılıyor. Yeni bir blok eklenirse bu listeye de eklenmeli. */
    .pks__gercek {
        grid-column: 1 / -1;
        margin: .85rem 0 .75rem;
    }
    .pks__ozellik,
    .pks__form,
    .pks__havale {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    /* ⚠ HAVALE BAŞLIK SATIRININ TELEFON KURALLARI DA KALKTI (2026-09-24).

       Bir tur boyunca .odk__ust yalnızca telefonda kolona dönüyor ve araçlar
       sağa yaslanıyordu. Başlık .ay-sr-only'ye geçince satırda tek öğe
       (araçlar) kaldı ve HER GENİŞLİKTE ortalandı — kural § 23n'deki temel
       tanımda, kırılıma bağlı sapma yok. Paket seçiminin başlık satırıyla
       aynı karar ve aynı gerekçe. */

    /* ⚠ PAKET SEÇİMİNİN BAŞLIK SATIRINA AİT TELEFON KURALLARI BURADAN KALKTI
       (2026-09-24).

       Bir tur boyunca satır yalnızca telefonda kolona dönüyor ve yalnızca
       orada ortalanıyordu (başlık satırı · başlık kutusu · durum cümlesi ·
       .donem--pks). Sonra başlık ve nötr durum cümlesi kullanıcı kararıyla
       ekrandan kalktı; satırda tek öğe (dönem anahtarı) kaldı ve HER
       GENİŞLİKTE ortalandı. Kurallar § 23n'deki temel tanıma taşındı, yani
       masaüstü ile telefon arasında sapma yok. Sarmalayıcıların üçü de
       (§ 23n) artık tamamen silindi.

       Kalkanlardan biri ÖLÇÜLMÜŞ BİR DÜZELTMEYDİ ve kaybolmadı, GEREKSİZLEŞTİ:
       .pks__basl'ın 'flex: 1 1 16rem' tabanı kolon kipinde 256 piksellik bir
       YÜKSEKLİĞE dönüşüyordu (headless ölçüm: h=256). O sarmalayıcı artık hiç
       yok — başlık akış dışı (.ay-sr-only), durum cümlesi de doğrudan satırın
       çocuğu.
       DERS DURUYOR: flex kuruluşunu breakpoint'te çeviren her yerde flex-basis
       yeniden düşünülmeli; 'flex' kısayolu iki eksende iki anlam taşıyor. */

    /* Paket kartının dolgusu daralıyor; rozetin sol ofseti de onunla
       birlikte (aksi hâlde rozet kartın içine kayıyordu). */
    .pks__kart {
        padding: 1.15rem 1rem 1.05rem;
    }
    .pks__flag {
        inset-inline-start: 1rem;
    }
}

/* --- 23k · Sade dil seçici  (.dilsec)  —  _dil_secici.php --------------
   Yönetici panelinde (adk-panel/) header yok, dolayısıyla ön yüzün açılır
   dil menüsü de yok. Orada dil hiç değiştirilemiyordu. Bu blok o sayfalara
   konan <form>+<select> ikilisini biçimlendiriyor.

   Etiket ekranda GİZLİ değil ama küçük: yönetici panelinde bağlam yeterince
   açık, yine de ekran okuyucu için <label> gerçek bir etikete bağlı.

   gap ve flex-wrap: dar ekranda seçici ve düğme alt alta geçiyor. */
.dilsec {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.5rem;
}

.dilsec__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
}

/* Genişlik içeriğe göre: yedi dil adının en uzunu sığsın, ama alan
   ekranın tamamını kaplamasın. */
.dilsec__sel {
    width: auto;
    min-width: 11rem;
    height: var(--control-h);
    font-size: var(--fs-sm);
}

/* JS seçim değişince formu gönderiyor; o durumda düğme gereksiz ve
   gizleniyor (bkz. js/theme.js → AY.LangSelect). JS yoksa görünür kalıyor,
   yani seçici JavaScript'siz de çalışıyor. */
.dilsec.is-auto .dilsec__btn { display: none; }

/* --- 23j · Kart içindeki bilgi şeridi ----------------------------------
   .ay-alert zaten var (theme.css § 9); burada yalnızca formla arasındaki
   boşluk veriliyor, yeni bir şerit tasarımı kurulmuyor. */
.auth__card .ay-alert { margin-bottom: 1.25rem; }

/* Girişte SMS kodu (panel/giris-dogrula.php): haneler aralıklı ve ortalı. */
.auth__otp {
    text-align: center;
    letter-spacing: .5em;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   24 · Sağdan sola yazım  ([dir="rtl"])  —  Arapça

   Yerleşimin BÜYÜK KISMI burada değil: margin/padding ve konumlandırma logical
   property'lerle yazıldığı için (margin-inline-start, inset-inline-end …)
   tarayıcı aynalamayı kendisi yapıyor. Bu bölüm yalnızca logical karşılığı
   OLMAYAN üç özelliği düzeltiyor:

     transform          translateX yönü mutlak, dir'e bakmıyor
     transform-origin   "top right" gibi anahtar kelimeler logical değil
     box-shadow         ofset işareti mutlak

   Buraya yeni kural eklenirken önce şu sorulur: bu gerçekten logical
   karşılığı olmayan bir özellik mi? Cevap hayırsa kural buraya değil, ilgili
   bölüme logical property olarak yazılır — iki yerde bakım istemez.

   ⚠ HENÜZ DOKUNULMAYANLAR (bilinçli): hero'daki radyal animasyon (.orb__*),
   tanıtım kutusundaki ışık şeritleri (.vid__scan) ve fare ipucu (.hero__wheel)
   "left: 50%" + translateX(-50%) kalıbıyla ORTALANIYOR. Bu kalıp yön
   bağımsızdır; inset-inline-start'a çevirmek RTL'de öğeyi ters yöne iter.
   Çember animasyonunun aynalanmasına da gerek yok, dairesel.
   ========================================================================== */

/* --- Mobil menü: RTL'de soldan girer ------------------------------------- */
[dir="rtl"] .drawer {
    transform: translateX(-100%);
    box-shadow: 24px 0 60px -24px rgba(16, 24, 40, .35);
}

[dir="rtl"] body.nav-open .drawer,
body.nav-open [dir="rtl"] .drawer {
    transform: translateX(0);
}

/* --- Dil menüsü: açılış noktası sol üste geçer --------------------------- */
[dir="rtl"] .lang__menu { transform-origin: top left; }

/* --- Ok ikonları: yönü tersine çevrilir ---------------------------------- */
/* Sağa bakan oklar (buton içi ilerleme oku, .ay-chev, belge bağlantıları)
   RTL'de sola bakmalı: ok "ileri" demek, "sağ" demek değil. Tek tek yeni
   path çizmek yerine yatayda aynalanıyor. */
[dir="rtl"] .hero__btn-arrow,
[dir="rtl"] .dev__btn .ay-ico,
[dir="rtl"] .cnt__submit .ay-ico,
[dir="rtl"] .doc__more-link .ay-ico,
[dir="rtl"] .nf__ok {
    transform: scaleX(-1);
}

/* 404'ün okları üzerine gelince ileri kayıyor (§ 21); RTL'de "ileri" sola.
   Ayna korunarak kaydırılıyor, yoksa hover aynayı ezip oku sağa çevirirdi.
   Yalnızca .nf__ok: kartlardaki rozet ikonları (zarf, soru) aynalanmaz. */
[dir="rtl"] .nf__link:hover .nf__ok,
[dir="rtl"] .nf__link:focus-visible .nf__ok,
[dir="rtl"] .nf__eylem .ay-btn:hover .nf__ok,
[dir="rtl"] .nf__eylem .ay-btn:focus-visible .nf__ok {
    transform: scaleX(-1) translateX(3px);
}

/* ⚠ .ay-chev BU LİSTEDEN ÇIKTI — HATA DÜZELTME (2026-09-25, Arapça panelin
   ekran görüntüsüyle bulundu).

   Chevron bir SVG DEĞİL: 8×8 piksellik bir kare, yalnızca sağ ve alt
   kenarlığı var ve OK ŞEKLİNİ 'transform: rotate(-45deg)' veriyor
   (theme.css § 7). 'transform' tek bir özellik olduğu için scaleX(-1) o
   dönüşü SİLİYORDU: RTL'de işaret ok olmaktan çıkıp köşeli bir ayraca
   dönüyordu ("L"). Arapça panelde mobil menünün DOKUZ satırının tamamında,
   sitenin drawer'ında da ALTI satırda görünüyordu.

   Aynalama dönüşün kendi içinde yazılıyor: köşenin ucu döndürülmemiş hâlde
   SAĞ ALTA bakıyor (iki kenarlık orada buluşuyor). -45° onu sağa çeviriyor
   (LTR); sola çevirmek için aynı uç 135° dönüyor. 225° denendi ve ölçüldü —
   ok YUKARI bakıyordu (ekran görüntüsü), çünkü 45° + 225° = 270°.

   :active durumu AYRICA gerekiyor — o kuralın özgüllüğü (§ 7,
   .drawer .hdr__link:active .ay-chev) buradan yüksek ve dokunma anında
   chevron'u yeniden sağa çeviriyordu. translate aynı kalıyor: dönmüş
   koordinat sisteminde (2px, 2px) her zaman "okun baktığı yön" demek,
   yani RTL'de kendiliğinden sola kayıyor. */
[dir="rtl"] .ay-chev {
    transform: rotate(135deg);
}
[dir="rtl"] .drawer .hdr__link:active .ay-chev {
    transform: rotate(135deg) translate(2px, 2px);
}

/* --- Nasıl Çalışır: adımları bağlayan kesikli hat ------------------------ */
/* Hat CSS gradient ile çiziliyor ve soldan sağa akıyor; RTL'de akış yönü
   ters. Dekoratif olduğu için yalnızca aynalanıyor. */
[dir="rtl"] .how__step:not(:last-child)::after { transform: scaleX(-1); }

/* ========================================================================
   24 · PANEL UYGULAMA KABUĞU  (.pnl)  —  panel/_panel.php

   Kimlik ekranlarının kabuğu (§ 23 .auth*) tek kart içindi; burası ARAÇ
   arayüzü: kalıcı gezinme + geniş çalışma alanı.

   YERLEŞİM KARARI (2026-09-23 · KULLANICI KARARI ile yeniden kuruldu):
   DİKEY FLEX, iki katman.

       .pnl__ust     tam genişlikte yapışık şerit  (logo · başlık · çıkış)
       .pnl__govde   yatay flex: yan menü + ana alan

   Önce grid'di (248px + 1fr) ve şerit ana alanın İÇİNDEYDİ: logo yan
   menünün üst dolgusunun altında kalıyor, şeridin alt kenarlığı yan
   menüde karşılıksız kalıyor ve menünün ilk satırı o çizgiden 32 piksel
   aşağıda başlıyordu. Şimdi şerit iki kolonun üstünde: logo sayfanın sol
   üst KÖŞESİNDE, oturumu kapat içerik kartlarıyla aynı sağ hizada ve menü
   şeridin alt kenarlığının hemen altından (§ 24a'daki .75rem'lik nefes
   payıyla) başlıyor.

   ŞERİT NEDEN .pnl'İN ÖĞESİ, GÖVDENİN DEĞİL: position: sticky'nin yapışma
   payı KAPSAYICININ kutusu kadar. Şerit gövdeyle aynı kutuda olsaydı ya da
   (eski hâlinde) tek satırlık bir grid alanında durursa yapışacak yer
   bulamaz. .pnl en az bir pencere yüksekliğinde ve belge kadar uzuyor.

   YAN MENÜ İLE ANA ALAN DOM'DA KARDEŞ: menü ana alanın içinde olsaydı
   "içeriğe geç" bağlantısı (#main) menüyü atlayamazdı.

   İKİ ÖLÇÜ DEĞİŞKENDE, çünkü ikisi de birden fazla kuralda geçiyor ve elle
   eşlenmeleri gereken bağlar:

     --pnl-ust-h   şeridin yüksekliği. Yan menünün yapışma ofseti ve
                   yüksekliği bundan türetiliyor; şerit içeriğe göre
                   büyüseydi menü kaydırma sırasında şeridin arkasına
                   girerdi. Bu yüzden ŞERİT SABİT YÜKSEKLİKTE ve sayfa
                   başlığı tek satır (§ 24b).
     --pnl-yan-w   yan menünün genişliği. Şeritteki logo bloğu da bu
                   genişlikte ve aynı kenarlığı taşıyor; iki kolon tek
                   çizgide bölünüyor.

   Renk/ölçü değerleri theme.css tokenlarından; yeni token eklenmedi.
   ------------------------------------------------------------------------ */
.pnl {
    --pnl-ust-h: 4rem;
    --pnl-yan-w: 248px;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--surface-2);
}

/* Gövde: yan menü + ana alan.

   align-items: flex-start ŞART. Varsayılan 'stretch' yan menüyü gövdenin
   TAMAMI kadar uzatıyor ve position: sticky o durumda hiçbir şey yapmıyor
   (öğe kapsayıcısı kadar uzunsa kayacak payı yok). Ana alan yüksekliği
   ayrıca kendi kuralında geri alıyor. */
.pnl__govde {
    /* flex-shrink: 0 — kabuğun min-height'ı 100vh ve içerik daha uzun
       olabiliyor. Büzülme izni verilirse uzun sayfalarda gövde pencereye
       sıkıştırılıp içerik kabuğun dışına taşar. */
    flex: 1 0 auto;
    display: flex;
    align-items: flex-start;
}

/* --- 24a · Yapışık yan menü --------------------------------------------
   position: sticky + ŞERİDİN ALTINDAN başlayan ofset: menü sayfa
   kaydırılırken yerinde kalıyor. 'fixed' kullanılmadı çünkü fixed öğe
   akıştan çıkar ve ana alana elle sol boşluk vermek gerekirdi — iki değeri
   elle eşlemek, biri değişince bozulan bir bağ demek.

   YÜKSEKLİK PENCERE EKSİ ŞERİT: kolon şeridin altındaki alanı tam
   dolduruyor. 100vh verilseydi dibindeki dil seçici her zaman şeridin
   yüksekliği kadar ekranın altında kalırdı.

   ÜST DOLGU .75rem — KULLANICI KARARI (2026-09-23, ekran görüntüsüyle
   bildirildi): "menüdeki Pano linki yukarıya yapışık olmasın".

   Önce 0'dı ve gerekçesi "menü şeridin alt kenarlığından başlasın"dı. O
   gerekçe menü satırlarının ÇERÇEVESİZ olduğu varsayımına dayanıyordu:
   satırın kendi .6rem'lik dikey dolgusu metne nefes payı veriyor, dolayısıyla
   kolona ayrıca dolgu gerekmez. Varsayım AKTİF SATIRDA çökmüş: .pnl__oge--aktif
   dolu zeminli bir hap (--brand + --r-md köşe) ve /panel/ açıldığında ilk
   satır AKTİF olan satır. Hapın üst kenarı şeridin kenarlığına 0 piksel
   mesafede duruyor, yani yuvarlatılmış köşe düz çizgiye biniyor ve satır
   menünün öğesi gibi değil şeridin uzantısı gibi görünüyor.

   .75rem (12px) ÖLÇÜLEREK seçildi, "biraz boşluk" diye değil: hapın köşe
   yarıçapı --r-md, yani 11 piksel (theme.css § Köşe). Üst boşluk yarıçaptan
   KÜÇÜK olduğu sürece eğri, kenarlığın düz çizgisiyle aynı 11 pikselin içinde
   kalıyor ve göz ikisini tek parça okuyor — 8 piksel denendiğinde hap hâlâ
   çizgiye asılı görünüyordu. 12 piksel yarıçapı geçen en küçük değer: köşe
   tamamen çizginin dışında bitiyor, hap kendi başına duran bir kutu oluyor.
   Eski denemenin 40 pikseli (1.25rem dolgu + 1.25rem gap) ise ilk satırı
   menüden koparıp şeridin altında yüzen bir öğeye çeviriyordu.

   ALT DOLGU DA 1.25rem → .75rem: kolonun dört kenarı artık simetrik
   (yan 1rem, üst/alt .75rem). 1.25rem'in ayrı bir gerekçesi yoktu ve dil
   seçicisinin altında üsttekinden 8 piksel fazla boşluk bırakıyordu.

   overflow: hidden ŞART. Kutu şeridin altındaki alan kadar; içindekiler
   (dokuz menü öğesi + dil seçici) kısa pencerede bundan uzun oluyor ve
   dibe yapışan dil seçici ekranın altında kalıyordu. Taşma artık nav'ın
   kendi kaydırmasına havale ediliyor (aşağıda min-height: 0).

   ⚠ Dolgu EKLEMEK kutuyu büyütmüyor: theme.css § 2 genel bir
   box-sizing: border-box koyuyor, yani yukarıdaki height hesabı dolguyu
   İÇERİYOR. Kazanılan 12+12 piksel nav'ın kaydırma payından düşüyor, kolon
   pencereden uzamıyor.
   ---------------------------------------------------------------------- */
.pnl__yan {
    position: sticky;
    top: var(--pnl-ust-h);
    flex: 0 0 var(--pnl-yan-w);
    width: var(--pnl-yan-w);
    height: calc(100vh - var(--pnl-ust-h));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Nav ile dil seçici arasındaki açıklık, 1rem → .75rem. Kolonun bütün
       dikey boşlukları tek değerde: üst dolgu, alt dolgu, ayırıcı çizginin
       iki yanı (.pnl__yan_alt'ın padding-top'u da .75rem). Çizgi nav'dan
       .75rem sonra geliyor, seçici çizgiden .75rem sonra başlıyor. */
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border-inline-end: 1px solid var(--hairline);
}

/* Ana alan gövdenin tamamını kaplıyor: gövdedeki align-items: flex-start
   onu da içeriği kadar kısaltıyordu ve kısa sayfalarda içerik zemininin
   (--surface-2) altında beyaz bir şerit kalıyordu. */
.pnl__ana {
    align-self: stretch;
}

/* dvh varsa o kullanılıyor: mobil tarayıcıda adres çubuğu payı 100vh'ye
   girmiyor, kabuk pencereden uzun kalıp gereksiz kaydırma üretiyordu
   (aynı gerekçe § 15'teki .cine__inner hesabında da yazılı). */
@supports (height: 100dvh) {
    .pnl      { min-height: 100dvh; }
    .pnl__yan { height: calc(100dvh - var(--pnl-ust-h)); }
}

/* LOGO — SOL ÜST KÖŞE, YAN MENÜ GENİŞLİĞİNDE BİR BLOK.

   Blok şeridin sol ucunda ve tam yükseklikte; sağ kenarlığı yan menünün
   kenarlığının şerit içindeki devamı, yani iki kolon tepeden dibe tek
   çizgide bölünüyor.

   padding-inline-start yan menünün dolgusuyla AYNI (1rem): logo menü
   satırlarıyla aynı çizgide başlıyor. Sıfır verilmedi — logo ekranın
   fiziksel kenarına yapışınca köşe sıkışık görünüyor ve menüyle hizası
   bozuluyor.

   ÖLÇÜ YÜKSEKLİKTEN: şerit sabit 4rem ve logo 30 piksel. Genişlik orandan
   geliyor (2444×358 ≈ 6.83:1 → ≈205px) ve yan menünün iç genişliğine
   (248 − 2×1rem = 216px) sığıyor. Eski dosya images/ayduke.png 3:1'di ve
   30 piksel yükseklikte 90 piksele iniyordu — kolonun solunda küçük bir
   işaret. max-width sığmayan bir dosya konulursa taşmayı engelliyor.

   aspect-ratio HTML'deki width/height ile aynı: görsel henüz inmemişken de
   aynı yeri ayırıyor, yüklenince şerit zıplamıyor. */
.pnl__marka {
    flex: 0 0 var(--pnl-yan-w);
    width: var(--pnl-yan-w);
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-inline: 1rem;
    border-inline-end: 1px solid var(--hairline);
}
.pnl__marka img {
    display: block;
    width: auto;
    height: 30px;
    max-width: 100%;
    aspect-ratio: 2444 / 358;
}

/* --- 24a-2 · KATLANIR YAN MENÜ  —  2026-09-28 · KULLANICI KARARI --------
   "sohbetler.php?k=15 sayfasındayken, webde yani, yan menüdeki menü
   gizlensin. göster/gizle iconu ile … aç kapa yapabilsin."

   Yalnızca 'yan_katlanir' isteyen sayfada (panel/_panel.php § KATLANIR YAN
   MENÜ). Kapalıyken .pnl'e .pnl--yan-kapali konuyor: kolon display: none
   (erişilebilirlik ağacından da çıkıyor, gizli menüye sekmeyle girilmiyor) ve
   ana alan tam genişliğe açılıyor.

   LOGO BLOĞU YERİNDE KALIYOR: logonun sağ kenarlığı yan menünün kenarlığının
   şerit içindeki devamıydı; menü yokken çizgi boşlukta biten bir parça gibi
   duruyor, o yüzden yalnızca kenarlık saydamlaşıyor. Blok genişliği
   değişmiyor, yani düğme ve başlık açıp kapamada yerinden oynamıyor.

   DÜĞME logonun sağında, içerik kartlarıyla aynı sol hizada (1.5rem); başlık
   onun hemen sağında. Ölçüsü şeridin öteki ikon düğmeleriyle aynı
   (.pnl__ust_dgm). */
/* 2026-09-28 (ikinci tur) · KULLANICI: "menü iconu web de çok kaba ve
   amatörce durmuş". Hamburger yerine kenar çubuğu simgesi (SVG,
   panel/_panel.php); düğme şeridin araç düğmesi gibi: 36px, ince çerçeve,
   hover'da yüzey tonu. Durum simgede: açıkken sol kolon dolu + ok sola,
   kapalıyken kolon boş + ok sağa. */
.pnl__yan_dgm {
    flex: 0 0 auto;
    margin-inline-start: 1.25rem;
}
/* Görsel kurallar .pnl__ust ile: .ay-btn.ay-btn--ghost (iki sınıf) zemini
   ve çerçeveyi eziyordu. display BURADA YOK — § 24c mobilde düğmeyi tek
   sınıfla gizliyor, yüksek özgüllüklü bir display onu ezerdi. */
.pnl__ust .pnl__yan_dgm {
    width: 38px;
    height: 38px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    box-shadow: none;
    transition: background-color var(--t-fast, .15s) var(--ease, ease), color var(--t-fast, .15s) var(--ease, ease),
        border-color var(--t-fast, .15s) var(--ease, ease);
}
.pnl__ust .pnl__yan_dgm:hover {
    color: var(--ink);
    background: var(--surface-2);
    border-color: rgba(16, 24, 40, .16);
}
.pnl__ust .pnl__yan_dgm:focus-visible {
    outline: 2px solid var(--brand-accent, #1C4AA8);
    outline-offset: 2px;
}
.pnl__yan_dgm + .pnl__baslik {
    margin-inline-start: .75rem;
}
.pnl__ust .pnl__yan_dgm[aria-expanded="true"] {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--brand-line, rgba(1, 30, 90, .14));
}
.pnl__yan_svg { display: block; }
.pnl__yan_svg_kolon {
    fill: currentColor;
    opacity: 0;
    transition: opacity var(--t-fast, .15s) var(--ease, ease);
}
.pnl__ust .pnl__yan_dgm[aria-expanded="true"] .pnl__yan_svg_kolon { opacity: .22; }
.pnl__yan_svg_ok {
    transform-origin: 15.5px 12px;
    transition: transform var(--t-base, .2s) var(--ease, ease);
}
.pnl__ust .pnl__yan_dgm[aria-expanded="true"] .pnl__yan_svg_ok { transform: scaleX(-1); }
[dir="rtl"] .pnl__yan_svg { transform: scaleX(-1); }
.pnl--yan-kapali .pnl__yan {
    display: none;
}
.pnl--yan-kapali .pnl__marka {
    border-inline-end-color: transparent;
}

/* MOBİLE AİT PARÇALAR MASAÜSTÜNDE HİÇ GÖRÜNMÜYOR (§ 24c açıyor):

     .pnl__hdr     mobil başlık — masaüstünde üst şerit + yan menü var
     .pnl .drawer  mobil menü — masaüstünde yan menü kalıcı kolon
     .pnl .scrim   karartılacak bir şey yok

   .drawer ve .scrim SİTENİN sınıfları ve kendi kuralları onları yalnızca
   1200px üstünde gizliyor (§ 7-8). Panelin kırılımı 900, bu yüzden .pnl
   içinde ayrıca gizleniyorlar; seçici .pnl ile sınırlı, sitenin kendi
   menüsüne dokunmuyor.

   ⚠ BU BLOK § 24c'DEN ÖNCE OLMAK ZORUNDA: aynı seçici, aynı özgüllük —
   sonra gelen kazanır. display: none aşağıda dursa medya sorgusundaki
   display: block/flex ezilirdi ve mobilde başlık hiç çıkmazdı. */
.pnl__hdr,
.pnl .drawer,
.pnl .scrim {
    display: none;
}

/* --- ⚠ KONUM İZİ (.pnl__iz*) TAMAMEN KALDIRILDI  —  2026-09-24 -----------

   KULLANICI KARARI: "breadcumb kartını da sil. kaldır."

   Buradaki kural yığını mobilde şeridin altına beyaz zeminli, alt kenarlıklı,
   tam genişlikte bir şerit basıyordu ("Pano / Gönderiler / Yeni gönderi").
   Kart gibi görünmesinin sebebi o zemin + kenarlık ikilisiydi.

   BİRLİKTE GİDEN KURALLAR (hepsi silindi): .pnl__iz · .pnl__iz_liste ·
   .pnl__iz_oge · .pnl__iz_oge + .pnl__iz_oge::before (eğik çizgi ayracı) ·
   .pnl__iz_oge a (+ hover/focus) · [aria-current] sarma kuralı · § 24c'deki
   '.pnl__iz { display: block }'.

   İÇLERİNDE ÖLÇÜLMÜŞ İKİ DÜZELTME VARDI ve kaybolmaları sorun değil çünkü
   bileşenin kendisi yok:
     · dokunma payı bağlantıda değil ÖĞEDE (yoksa satırlar 4 piksel kayıyordu)
     · bağlantılı öğede de sarma (Almanca "Veröffentlichungen" 320 piksellik
       ekranda izi taşırıp yatay kaydırma üretiyordu)
   Ders duruyor: iz geri gelirse bu iki şey yeniden gerekecek.

   ⚠ BEDELİ: iz, TELEFONDA SAYFA ADININ GÖRÜNDÜĞÜ TEK YERDİ (üst şerit mobilde
   display: contents alıyor, h1 de görsel olarak gizli — § 24c). Gerekçenin
   tamamı ve neden mobil başlığa taşınmadığı panel/_panel.php'de, izin
   basıldığı yerdeki blokta. */

.pnl__nav {
    display: flex;
    flex-direction: column;
    /* .15rem → .25rem. İki buçuk piksel, dokuz satırlık bir listede hapların
       arasında görsel açıklık bırakmıyor: aktif hap ile komşusu neredeyse
       değiyor ve hover zemini belirdiğinde iki satır tek blok gibi duruyor.
       4 piksel ayırmaya yetiyor ve dokuz satır + dil seçici 768 piksel
       yüksekliğinde pencereye hâlâ sığıyor (nav'ın kaydırması devreye
       girmiyor). */
    gap: .25rem;
    /* Menü uzarsa kendi içinde kayıyor, yan menünün dibi (masaüstünde dil
       seçici — mobilde o blok üst şeride taşındı, § 24c) görünür kalıyor. */
    overflow-y: auto;
    /* min-height OLMADAN overflow-y hiçbir işe yaramıyordu: flex öğesinin
       varsayılan min-height'ı 'auto', yani içeriğinden kısalmayı reddediyor.
       Nav sıkışmıyor, kabuğu aşıyor ve altındaki dil seçicisini ekran
       dışına itiyordu. Sıfırlanınca sıkışıp kendi içinde kayıyor. */
    min-height: 0;
    /* Menünün sonuna gelindiğinde kaydırma sayfaya devredilmesin. */
    overscroll-behavior: contain;
}

.pnl__oge {
    display: flex;
    align-items: center;
    gap: .65rem;
    /* min-width: 0 + sarma: kolonun içi 216 piksel ve menü etiketi dile
       göre uzuyor ("Bağlantılar" 11, Almanca "Verbindungen" 12, Arapça
       karşılıkları daha da uzun). Sarma izni olmadan öğe kolonu aşıyor ve
       .pnl__yan'ın overflow: hidden'ı onu KIRPIYORDU — taşma görünmüyor
       ama etiketin sonu okunmuyordu. Şimdi ikinci satıra geçiyor. */
    min-width: 0;
    /* SATIR YÜKSEKLİĞİ DOLGUYLA DEĞİL min-height İLE VERİLİYOR (2026-09-25).

       Önce yükseklik tamamen türetilmişti: .6rem dolgu + yazının satır
       yüksekliği (≈41.6px). Türetilmiş yükseklik, satırın İÇİNDEKİ en yüksek
       öğe değiştiğinde de değişiyor — rozet (1.35rem), iki satıra geçen uzun
       çeviri, farklı yazıtipi metriği olan diller. Dokuz satırın ritmi o
       değişkenlere bağlı kalıyordu.

       Şimdi taban 38 piksel ve dolgu (.5rem) bu tabanın ALTINDA kalıyor, yani
       normal satırların hepsi tam 38. Kolon ölçülü bir ızgaraya oturuyor:
       9 × 38 + 8 × 4 (nav gap) = 374 piksel.

       ⚠ SABİT height DEĞİL: etiket iki satıra geçebiliyor (aşağıdaki
       .pnl__oge > span notu) ve height verilseydi ikinci satır kırpılırdı. */
    min-height: 38px;
    padding: .5rem .7rem;
    border-radius: var(--r-md);
    color: var(--ink-soft);
    font-size: var(--fs-base);
    font-weight: 500;
    letter-spacing: -.01em;
    text-decoration: none;

    /* ⚠ GEÇİŞ SÜRESİ YAZILMIYORDU — HATA DÜZELTME (2026-09-25).

       Kural 'transition: background var(--ease-out, .18s), …' idi ve HİÇ
       ÇALIŞMIYORDU: --ease-out bir SÜRE değil, cubic-bezier(.16, 1, .3, 1)
       (theme.css § Hareket). var() içindeki '.18s' yalnızca token TANIMSIZSA
       devreye giren yedek — token tanımlı olduğu için hiç okunmuyordu.
       Kısayolda geçiş fonksiyonu geçerli bir yerde duruyor, dolayısıyla CSS
       kuralı ATMIYOR; süre 0s kalıyor ve zemin hover'da anında sıçrıyordu.

       Doğru kalıp dosyanın her yerinde aynı: <özellik> <süre> <fonksiyon>.
       --t-fast (.18s) seçildi, --t-base (.25s) değil: gezinme geri bildirimi
       imlecin hareketine yetişmeli, dokuz satırın üstünden geçerken .25s
       zemin izi bırakıyor.

       background-color, background DEĞİL: kısayol 'background-image'ı da
       kapsıyor ve geçişe girmesi gereken tek şey renk. */
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}

/* Sarma YALNIZCA ETİKETTE.

   ⚠ :not(.pnl__rozet) ŞART. Seçici çıplak '.pnl__oge > span' olduğunda
   rozeti de yakalıyor ve özgüllüğü (0,1,1) .pnl__rozet'ten (0,1,0) yüksek
   olduğu için onun 'min-width: 1.35rem'ini sıfıra düşürüyor: tek haneli
   rozet daire olmaktan çıkıp dar bir dikdörtgene dönüyordu. */
.pnl__oge > span:not(.pnl__rozet) {
    min-width: 0;
    overflow-wrap: anywhere;
}
.pnl__oge:hover {
    background: var(--brand-soft);
    color: var(--brand);
}

/* AKTİF SATIR — dolu marka hapı.

   font-weight 500 → 600: rengin yanında ikinci bir işaret. Renk tek başına
   taşıyıcı olmamalı (renk körlüğü) ve beyaz-üstü-lacivert zaten en yüksek
   karşıtlık, kalınlık onu bozmuyor.

   ⚠ GÖLGE ÇOK KISIK VE BİLİNÇLİ ÖYLE: hap kolonun zemininden (--surface)
   1 piksel ayrılıyor, "havada durmuyor". theme.css'in --sh-1'i nötr gri
   (rgba(16,24,40,.12)) ve lacivert hapın altında kirli bir kenar bırakıyordu;
   buradaki değer markanın kendi hue'sundan, yani gölge hapın koyu tonunun
   devamı gibi okunuyor. --primary düğmesinin --sh-brand'i ise bu ölçekte
   (38 piksellik bir satır) fazla: 16 piksel yayılan bir gölge menüyü
   kabartma butonlar dizisine çeviriyor. */
.pnl__oge--aktif {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(1, 30, 90, .28);
}
.pnl__oge--aktif:hover {
    background: var(--brand-hover);
    color: #fff;
}

/* ⚠ ÖLÇÜ ARTIK font-size İLE. İkon bir dönem satır içi <svg>'ydi ve
   width/height ile 18 piksele kuruluyordu; Font Awesome ikonu ::before
   içeriği olarak basılan bir YAZI KARAKTERİ, yani boyutunu font-size
   belirliyor (taban sözleşme: theme.css § 7b).

   width/height YAZILMIYOR: FA kutunun genişliğini --fa-width ile kendisi
   veriyor (varsayılan 1.25em) ve bu bilinçli bırakıldı — dokuz menü satırının
   etiketleri ancak ikon kutuları eşit genişlikteyse aynı sol kenardan
   başlıyor. Glifler farklı genişlikte (fa-users geniş, fa-link dar), kutuyu
   glifin kendisine daraltmak menüyü tırtıklı bir kenara diziyordu.

   flex: 0 0 auto theme.css § 7b'de .ay-ico'ya zaten verildi, tekrarlanmıyor. */
.pnl__ikon {
    font-size: 18px;
}

/* İKON YAZIDAN BİR TON AÇIK — SIRALAMA İÇİN.

   Satırın rengi --ink-soft (7.69:1) ve ikon currentColor ile aynı koyuluktaydı:
   dokuz satır, dokuz eşit ağırlıkta ikon ve dokuz eşit ağırlıkta etiket tek
   bir gri dokuya dönüşüyordu. İkon --ink-mute'a çekilince göz önce ETİKETİ
   okuyor, ikon işaret olarak arkada kalıyor.

   ⚠ ERİŞİLEBİLİRLİK BEDELİ YOK: ikonların hepsi aria-hidden (ay_pnl_ikon)
   ve anlamı yazıda. Kontrast eşiği metne uygulanır, dekoratif çizime değil.

   ⚠ AKTİF SATIRDA 'inherit' ŞART: hap lacivert ve metin beyaz; --ink-mute
   orada zeminle 1.4:1 kalıp ikonu kayboluyordu. Seçici (0,2,0) ile yukarıdaki
   kuralla eşit ve DAHA SONRA geldiği için kazanıyor. */
.pnl__oge .pnl__ikon {
    color: var(--ink-mute);
    transition: color var(--t-fast) var(--ease);
}
.pnl__oge:hover .pnl__ikon {
    color: var(--brand);
}
.pnl__oge--aktif .pnl__ikon {
    color: inherit;
}

/* ⚠ AKTİF SATIRIN İKONU HOVER'DA DA BEYAZ KALIYOR — HATA DÜZELTME
   (2026-09-25 · kullanıcı ekran görüntüsüyle bildirdi: "seçili menü içindeki
   icon hover olduğunda icon beyaz olsun").

   ÖZGÜLLÜK SIRALAMASI YANLIŞTI ve yukarıdaki notun kendisi eksik okumaya
   dayanıyordu. Üç kural şöyle:

       .pnl__oge .pnl__ikon           (0,2,0)   --ink-mute
       .pnl__oge:hover .pnl__ikon     (0,3,0)   var(--brand)   ← pseudo sayılıyor
       .pnl__oge--aktif .pnl__ikon    (0,2,0)   inherit

   Aktif satır zaten DOLU LACİVERT bir hap (.pnl__oge--aktif: background
   var(--brand), color #fff). İmleç o satıra değdiğinde (0,3,0)'lık hover
   kuralı (0,2,0)'lık aktif kuralını geçiyor ve ikon var(--brand)'a
   dönüyordu: LACİVERT ZEMİN ÜZERİNDE LACİVERT ÇİZİM, yani ikon tamamen
   kayboluyordu. Yazı kaybolmuyordu çünkü satırın kendi hover kuralı
   (.pnl__oge--aktif:hover, 0,2,0) '.pnl__oge:hover' ile EŞİT ve daha sonra
   geliyor — yani metin beyaz kalıyor, yalnızca ikon gidiyordu. Kusurun
   "bazen görünüyor bazen görünmüyor" gibi durmasının sebebi de bu: aynı
   satırda iki farklı kural iki farklı sonuç veriyordu.

   ÇÖZÜM 'inherit' — beyaz ELLE YAZILMIYOR. Satırın rengi tek kaynak
   (.pnl__oge--aktif { color: #fff }); ikon ona bağlanıyor, yani hap rengi
   bir gün değişirse ikon kendiliğinden takip ediyor. #fff yazılsaydı iki
   yerde tutulan bir değer olurdu.

   ⚠ SEÇİCİ BİLEREK (0,4,0): sınıf İKİ KEZ yazılıyor ('.pnl__oge' +
   '.pnl__oge--aktif'). '.pnl__oge--aktif:hover .pnl__ikon' da işi görürdü
   ama o (0,3,0) ile hover kuralına EŞİT olur, yani doğruluğu SIRAYA bağlı
   kalırdı — kurallar arasına bir gün yeni bir hover kuralı girse sessizce
   bozulurdu. Fazladan sınıf, kuralı sıradan bağımsız kılıyor. Aynı kalıbın
   gerekçesi § 24c'deki '.pnl__drw .hdr__link.is-active' kuralında da yazılı.

   ⚠ MOBİL DRAWER'DA BU KUSUR YOK ve düzeltme oraya UYGULANMAMALI: orada
   aktif satırın zemini YOK, aktiflik marka rengiyle anlatılıyor (§ 24c),
   yani ikonun brand olması doğru. */
.pnl__oge.pnl__oge--aktif:hover .pnl__ikon {
    color: inherit;
}

/* Hazır olmayan menü öğesi: <span>, tıklanamaz.
   cursor: default — kullanıcı elini götürdüğünde tıklanabilir sanmasın. */
.pnl__oge--yakinda {
    color: var(--ink-mute);
    cursor: default;
    opacity: .62;
}
.pnl__oge--yakinda:hover {
    background: none;
    color: var(--ink-mute);
}
.pnl__yakinda {
    margin-inline-start: auto;
    padding: .1rem .4rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    font-size: .68rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Yan menünün dibi: KULLANIM KILAVUZU  —  2026-09-25 -----------------

   KULLANICI KARARI (2026-09-25): "yan menüdeki oturumu kapat butonu yerine de
   Kullanım Klavuzu olarak değiştir ve .../panel/kurulum.php linki olsun."

   ⚠ BU KUTUDA ARTIK ÇIKIŞ FORMU DEĞİL KILAVUZ BAĞLANTISI VAR. Kutu sırayla
   dil seçicisini (2026-09-23), çıkış formunu (2026-09-24) ve şimdi kılavuz
   bağlantısını tuttu; KENDİ GEOMETRİSİ HİÇ DEĞİŞMEDİ (auto ile dibe itilme,
   ayırıcı çizgi, .75rem dolgu) çünkü rolü hep aynı: "kolonun dibindeki tek
   yardımcı".

   Çıkış üst şeridin sağ ucuna döndü ve orada yazısız bir ikon düğmesi
   (§ 24c → .pnl__ust_dgm / .pnl__ust_cikis).

   margin-top: auto ile aşağıya itiliyor.

   flex: 0 0 auto — nav ile birlikte sıkışmasın: alttaki düğme her zaman tam
   boy görünüyor, kısalan taraf nav oluyor. (Menü uzayıp kolon dolduğunda
   kullanıcının en çok ihtiyaç duyacağı şey kaydırma, dipteki düğmenin
   kaybolması değil.)

   padding-top .75rem: ayırıcı çizginin ÜSTÜNDEKİ boşluk kolonun gap'inden
   (.75rem), ALTINDAKİ bu dolgudan geliyor. İkisi farklı olunca çizgi nav'a
   12, düğmeye 16 piksel mesafede duruyor ve ortalanmamış görünüyordu. */
.pnl__yan_alt {
    margin-top: auto;
    flex: 0 0 auto;
    padding-top: .75rem;
    border-top: 1px solid var(--hairline);
}

/* MEDYA KOTASI KARTI — KILAVUZ DÜĞMESİNİN ÜSTÜNDE  ·  2026-09-25
   (kullanıcı: "yan menüde ki kullanım klavuzu butonu üstünde kalan mb
   gösteren tema ile uyumlu bir kart ekle! medya.php ye de link versin")

   YENİ BİR KABUK DİLİ İCAT EDİLMEDİ: zemin + çerçeve + yarıçap üçlüsü
   panonun özet kartıyla (.pnl__kart) aynı ailede, yalnızca dolgusu daha
   küçük — kolon 248 piksel ve içinde üç satır var. Ölçer .pnl__olcum'dan
   geliyor (panoda ve medya ekranında kullanılan aynı bileşen); ikinci bir
   çubuk tanımlanmadı.

   ZEMİN --surface-2, KOLONUN KENDİSİ BEYAZ: kart beyaz üstüne beyaz
   kalırsa yalnızca 1 piksellik çerçeveyle ayrılıyordu ve kılavuz
   düğmesinin üstünde asılı bir dikdörtgen gibi duruyordu. Aynı karar
   medya ekranındaki kota kutusunda da alınmış (.mdk__kota).

   ⚠ ALT BOŞLUK KILAVUZ DÜĞMESİNE MESAFE: .pnl__yan_alt bir flex kolon
     DEĞİL (blok), yani gap işlemiyor — boşluk kartın kendi margin'inden
     geliyor. */
.pnl__kota {
    display: block;
    margin-bottom: .6rem;
    padding: .55rem .7rem .65rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}
.pnl__kota:hover,
.pnl__kota:focus-visible {
    border-color: var(--brand-line);
    background: var(--brand-soft);
}
.pnl__kota:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Üst satır: ikon + kalan alan. İkon SOLDA değil sağda değil — değerin
   hemen yanında, çünkü kolon dar ve sağa itilen bir ikon 248 pikselde
   değerden kopuyordu (panodaki kartta ikon sağ üstte, orada kart 230+
   piksel ve boşluk taşıyor). */
.pnl__kota_ust {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}
.pnl__kota_sim {
    flex: 0 0 auto;
    color: var(--brand);
}
.pnl__kota_sim .pnl__ikon {
    font-size: 14px;
}
.pnl__kota_deger {
    min-width: 0;
    color: var(--brand);
    font-size: 1.0625rem;
    font-weight: 680;
    line-height: 1.2;
    /* Sayı sabit genişlikte: kota yükleme sonrası yeniden basılıyor
       ("38 KB" → "1,2 MB") ve oranlı rakamlarda satır kayıyor. Aynı kalıp
       .mdk__kota_yazi ve .hsp__sayac'ta da var. */
    font-variant-numeric: tabular-nums;
}

.pnl__kota_ad {
    display: block;
    margin-top: .1rem;
    color: var(--ink-soft);
    font-size: .75rem;   /* --fs-xs YOK: token seti üç ölçü tutuyor (sm/base/lg); uygulamada bu punto zaten .75rem olarak yazılı. */
    font-weight: 600;
}

/* "0 MB / 25 MB kullanıldı" — ölçerin sayısal karşılığı. Ölçer aria-hidden
   olduğu için bilgi TEK TAŞIYICI DEĞİL: çubuk kaybolsa da bu satır kalıyor
   (WCAG 1.4.1). */
.pnl__kota_alt {
    display: block;
    margin-top: .3rem;
    color: var(--ink-mute);
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
}

/* EŞİĞİ GEÇİNCE KABUK DA UYARIYOR. Çerçeve tek başına değişse 11 piksellik
   bir satırdaki renk değişimi gözden kaçıyor — aynı gerekçe .mdk__kota--uyari
   ve .pnl__kart--uyari'da da yazılı. Tonlar § 24f'deki --st-bek-* setinden:
   dolmak üzere olan kota bir HATA değil, dikkat edilecek bir durum. */
.pnl__kota--uyari {
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
}
.pnl__kota--uyari:hover,
.pnl__kota--uyari:focus-visible {
    border-color: var(--st-bek-ink);
    background: var(--st-bek-bg);
}
.pnl__kota--uyari .pnl__kota_deger,
.pnl__kota--uyari .pnl__kota_sim {
    color: var(--st-bek-ink);
}
.pnl__kota--uyari .pnl__olcum {
    background: var(--surface);
}
.pnl__kota--uyari .pnl__olcum_dolu {
    background: var(--st-bek-ink);
}

/* KILAVUZ DÜĞMESİ — kolonun dibinde TAM GENİŞLİK.

   Kolonun tamamını kaplıyor (.ay-btn--block, markup'ta). Sebep hizalama:
   üstündeki menü satırları (.pnl__oge) da kolonu dolduruyor, içerik kadar
   geniş bir düğme o dizinin dışına düşmüş gibi duruyordu.

   ⚠ SEÇİCİ ARTIK ELEMENT'İN KENDİSİ. Burada '.pnl__cikis button' yazılıydı
   çünkü kutuda bir <form> vardı ve biçimlenecek şey onun içindeki
   <button>'du. Kılavuz bir <a>, yani sarmalayıcı yok: kurallar doğrudan
   düğmeye biniyor. '.pnl__cikis' adı bu dosyada BİLEREK bırakılmadı — aynı
   sınıf bir de drawer'ın dibindeki çıkış formunda (.pnl__drw_cikis, § 7) ve
   üst şerittekinde (.pnl__ust_cikis, § 24c) yaşıyor; okuyucusu kalmamış bir
   üçüncü ad şeritteki gerçek çıkış kurallarıyla karışırdı. */
.pnl__kilavuz {
    /* justify-content: center — --block düğme tam genişlikte ve ikon+metin
       ikilisi ortada durmalı; flex-start'ta çift sola yapışıp sağda geniş bir
       boşluk bırakıyordu. */
    justify-content: center;
    gap: .45rem;

    /* --- RENK: MAVİ DEĞİL, INSTAGRAM GEÇİŞİ  —  2026-09-25 --------------

       KULLANICI KARARI: "header ve yan menüdeki Kullanım Kılavuzu butonunun
       rengi mavi değil. instagram renk tonu gibi geçişli bir instagram renk
       tonundan olsun."

       ⚠ AŞAĞIDAKİ "MAVİ TON" NOTU TARİHÇE OLARAK DURUYOR, ARTIK GEÇERSİZ.
       Silinmedi çünkü box-shadow ve border-radius kararlarının gerekçesi o
       blokta yazılı ve ikisi DEĞİŞMEDİ: düğme hâlâ gölgesiz ve hâlâ menü
       satırıyla aynı köşede. Değişen tek şey zemin.

       ⚠ SINIF İKİ DÜĞMEDE, TEK TANIM: masaüstünde yan menünün dibi
       (panel/_panel.php) ve telefonda drawer'ın dibi (panel/_panel_hdr.php).
       Kullanıcı "header ve yan menüde" dediği için ikisi birden değişmek
       zorunda; ayrı tanım yazılsaydı biri sonradan geride kalırdı.

       --- NİYE 'background-image', 'background' DEĞİL

       Markup'ta .ay-btn--primary duruyor ve theme.css § 3 onun ZEMİNİNİ
       shorthand ile veriyor ('background: var(--brand)'). Shorthand
       background-image'ı 'none'a çekiyor, yani buradaki degradenin ayakta
       kalması için her durumda YENİDEN yazılması gerekiyor. İki ayrı
       özellik kullanmak o zinciri kırıyor:

           background-color  →  degrade inmezse okunur düz zemin
           background-image  →  degradenin kendisi, rengin üstüne biniyor

       ⚠ HOVER SEÇİCİSİ ŞART: '.ay-btn--primary:hover' (0,2,0) buradaki
       (0,1,0) kuralı geçiyor ve zemini lacivere döndürürdü. Aynı tuzağın
       dokunmatik hâli de var: theme.css'te
       '.ay-btn--primary:hover:not(:active)' (0,3,0) — imleçsiz aygıtlarda
       hover'ı geri alıyor. Üçü de aşağıda eşit ya da daha yüksek
       özgüllükle karşılanıyor; style.css theme.css'ten SONRA yüklendiği
       için eşitlikte bu dosya kazanıyor.

       --- NİYE .ay-btn--primary MARKUP'TA KALDI

       Zemin artık ondan gelmiyor ama METİN RENGİ (--on-brand), gölge tabanı
       ve kenarlıksızlık ondan geliyor. --ghost'a çevrilseydi yazı --ink
       (koyu lacivert) olur ve degradenin üstünde okunmazdı; o zaman rengi
       de ayrıca yazmak gerekirdi. Tek satırlık kazanç için bileşen
       değiştirmenin anlamı yok.

       --- MAVİ TON: AKTİF MENÜ SATIRIYLA AYNI  —  2026-09-25 (TARİHÇE)

       KULLANICI KARARI: "yan menüdeki oturumu kapat butonu rengi de mavi ton
       olsun. menü seçilmiş halinde ki (aktif menüde ki mavi tondan yani)".

       ⚠ KARAR DÜĞMENİN İŞLEVİNE DEĞİL YERİNE VERİLDİ: istenen şey "kolonun
       dibindeki düğme aktif menü satırıyla aynı mavi olsun"du. O yüzden
       düğmenin içeriği çıkıştan kılavuza dönerken renk kararı aynen taşındı.

       Düğme .ay-btn--ghost iken beyazdı; markup'ta .ay-btn--primary
       kullanılıyor (panel/_panel.php) ve zemini var(--brand) — yani
       .pnl__oge--aktif ile BİREBİR aynı token, hover'da ikisi de
       var(--brand-hover). Yeni bir mavi tanımlanmadı; tanımlansaydı aktif
       satırla arasında sonradan sapabilecek ikinci bir değer olurdu.

       ⚠ GÖLGE VE KALKMA KAPATILIYOR. --primary bileşeninin kendi davranışı
       bu (theme.css § 3): durağan hâlde var(--sh-1), imleç değdiğinde
       translateY(-1px) + var(--sh-brand). Tanıtım sayfasında doğru — orada
       düğme bir teklif. Burada düğme MENÜNÜN DEVAMI: üstündeki aktif satır
       düz dolgu bir hap, gölgesiz ve yerinden oynamıyor. Gölgeli, imleçle
       zıplayan bir düğme aynı kolonda başka bir bileşen gibi duruyordu.

       :focus-visible de kapsanıyor: theme.css'te hover ile aynı bloktalar,
       yalnızca hover'ı sıfırlamak klavye odağında düğmeyi zıplatırdı. Odağın
       görünürlüğü ayrı bir yerden geliyor (genel :focus-visible halkası),
       yani hareketi kapatmak erişilebilirlikten bir şey eksiltmiyor. */
    box-shadow: none;

    /* --- KÖŞE: HAP DEĞİL, MENÜ SATIRIYLA AYNI  —  2026-09-25 ------------

       .ay-btn tabanı --r-pill (999px) veriyor ve düğme kolonun dibinde TAM
       GENİŞLİKTE duruyor: iki ucu yarım daire, 216 piksel eninde bir kapsül.
       Üstündeki dokuz menü satırı ise --r-md (11px). Aynı laciverdin iki
       farklı şekilde çıkması — aktif satır köşeli hap, çıkış düğmesi kapsül —
       tesadüf gibi duruyordu; kullanıcı panelin "amatör" göründüğünü
       söylediğinde işaret ettiği türden bir tutarsızlık.

       --r-md ile düğme kolonun dilinin parçası oluyor: aynı renk, aynı köşe,
       aynı genişlik. İçeriği yine ORTADA (menü satırları sola yaslı) —
       düğme bir gezinme satırı değil, bir eylem; tek fark olarak o kalıyor.

       ⚠ MOBİLDEKİ KARŞILIĞI DA --r-md, ÇÜNKÜ AYNI SINIFI TAŞIYOR: kılavuz
       düğmesi 2026-09-25'te drawer'ın dibine de kondu (§ 24c → alt blok) ve
       aynı günün ikinci turunda orada TEK öğe kaldı. Komşusu artık
       üstündeki on bir menü satırı — masaüstündeki gerekçenin aynısı
       geçerli: köşeli hap ile kapsül aynı kolonda yan yana tesadüf gibi
       duruyor. Fark olarak yalnızca içeriğin ortada olması kalıyor; düğme
       bir gezinme satırı değil, bir eylem. */
    border-radius: var(--r-md);

    /* Degrade token'ı theme.css § 1'de; orada niye resmî rampanın iki açık
       durağının düşürüldüğü ve ölçülen kontrastlar yazılı. */
    background-color: var(--ig-solid);
    background-image: var(--ig-grad);
    border-color: transparent;
}

/* ⚠ HOVER ÜÇ SEÇİCİYLE KARŞILANIYOR (gerekçe yukarıda § NİYE
   'background-image'): theme.css'teki '.ay-btn--primary:hover' (0,2,0) ve
   dokunmatik aygıtlar için yazılmış '.ay-btn--primary:hover:not(:active)'
   (0,3,0) ikisi de buradaki tek sınıflı kuralı geçiyor ve zemini lacivere
   döndürüyordu. Üçüncüsü :focus-visible — klavyeyle gelen kullanıcı düğmeyi
   başka renkte görmesin.

   ⚠ DEGRADE HOVER'DA KOYULAŞIYOR, AÇILMIYOR: beyaz metnin kontrastı
   ancak koyulaşınca artıyor (ölçümler theme.css § 1'de, --ig-grad-hover
   durakları). Açılan bir hover yazıyı okunmaz yapardı — tam olarak resmî
   rampanın düşürülme sebebi. */
.pnl__kilavuz:hover,
.pnl__kilavuz:focus-visible,
.pnl__kilavuz:hover:not(:active) {
    transform: none;
    box-shadow: none;
    background-color: var(--ig-solid-hover);
    background-image: var(--ig-grad-hover);
    color: var(--on-brand);
}

/* FORCED-COLORS (Windows yüksek kontrast): degrade hiç basılmıyor ve sistem
   kendi zemin/metin çiftini dayatıyor. Degradeyi burada açıkça kaldırmak
   şart değil ama border'ı geri vermek şart — kenarlığı 'transparent'
   bıraktığımız için düğmenin sınırı o kipte kayboluyor ve tam genişlikli
   bir metin bloğu gibi duruyor. */
@media (forced-colors: active) {
    .pnl__kilavuz {
        background-image: none;
        border-color: ButtonBorder;
    }
}

/* İkon metinle birlikte küçülmesin diye eskiden burada flex: 0 0 auto vardı;
   artık .ay-ico'nun kendisinde (theme.css § 7b), yani her ikon için geçerli. */
.pnl__kilavuz .ay-ico {
    font-size: 15px;
}

/* ==========================================================================
   § 24 · KARAR — PANELDE KARTLAR SAYFA GENİŞLİĞİNİ DOLDURUR

   KULLANICI KARARI (2026-09-23): "ekranda ki kartların genişliğini, sayfa
   genişliği kadar yap".

   Panelin bölüm kartları ve form blokları okunabilir satır uzunluğu adına
   daraltılmıştı: .gdr__form 46rem, .bgl__bolum 58rem, .bgl__aciklama 46rem,
   .ajn__saklama 46rem, .dm__cevap 46rem. Ölçüldü — 1280 piksellik ekranda
   panelin içerik alanı 984 piksel ve .gdr__form onun YALNIZCA %75'ini
   dolduruyordu (736px). Gönderi, agent, agent bilgisi ve ayarlar
   ekranlarının sağında dörtte bir genişlikte boş bir şerit kalıyordu.

   Sınırlar kalktı. Kart artık kapsayıcısı kadar geniş.

   DARALTILMIŞ KALAN ÖLÇÜLER — bunlar KART DEĞİL, tek tek alanlar; hepsinin
   gerekçesi kendi kuralında yazılı:
     .ajn__saat_ikili  22rem        iki saat alanı ("09:00" 490px olmamalı)
     .bgl__alan_kutu   30rem        App ID / App Secret
     .ajn__sayi         8rem        günlük üst sınır sayısı
     .dm__balon      min(46rem,88%) sohbet balonu — tam genişlikte balon
                                    olmaktan çıkar, kim kime yazdı silinir
     .yrm__tani_form .ay-input 22rem  gönderi kimliği arama alanı

   ⚠ TAKAS BİLİNÇLİ: çok geniş ekranda (1920px+) uzun açıklama paragrafları
   tek satırda 1600 piksele kadar uzayabiliyor ve göz satır başını
   bulmakta zorlanır. Karar kullanıcının; buraya yazılıyor ki ileride
   "paragraflar niye bu kadar geniş" sorusu sorulduğunda cevabı belli olsun.
   ========================================================================== */

/* --- 24b · Ana alan + üst şerit ---------------------------------------- */
.pnl__ana {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;   /* flex çocuğunun taşmasını engelliyor: uzun tablo/metin
                       kolonu genişletmek yerine kendi içinde kaysın */
}

/* ÜST ŞERİT — TAM GENİŞLİK, SABİT YÜKSEKLİK, YAPIŞIK.

   Kaydırırken pencerenin tepesinde kalıyor: uzun listelerde sayfa başlığı
   ve çıkış düğmesi görünür kalsın.

   YÜKSEKLİK SABİT (height, min-height DEĞİL) ve olmak ZORUNDA: yan menü
   yapışık ve ofseti --pnl-ust-h'den geliyor (§ 24a). Şerit içeriğe göre
   büyürse iki değer ayrışır, menünün tepesi kaydırma sırasında şeridin
   arkasına girer. Bu yüzden şerit sarmıyor (eski hâlinde flex-wrap vardı)
   ve başlık tek satırda kırpılıyor.

   z-index: yan menü de yapışık; şerit onun üstünde kalmalı. Menünün ilk
   satırı şeridin kenarlığına .75rem mesafede (§ 24a) ama kolonun ZEMİNİ
   çizgiye kadar geliyor ve kaydırma sırasında nav'ın içeriği o boşluğun
   içinden geçiyor; z-index olmasa satırlar şeridin üstüne binerdi.

   SAĞ DOLGU .pnl__icerik'İN DOLGUSUYLA EŞİT (1.5rem) — KULLANICI KARARI:
   oturumu kapat düğmesinin sağ kenarı içerik kartlarının sağ kenarıyla aynı
   çizgide. Sol dolgu YOK: oradaki yeri logo bloğu dolduruyor ve kendi
   dolgusunu taşıyor.

   ZEMİN OPAK — CAM DEĞİL.

   Önce zemin color-mix ile %88 opaklığa ayarlıydı (yani %12 GEÇİRGEN) ve
   üstüne 8 piksellik bir bulanıklık biniyordu. Ölçüldü: sayfa
   kaydırıldığında şeridin ARKASINDAN içerik okunuyordu — ayarlar
   ekranında form etiketleri "Ayarlar" başlığının üstünden geçip bulanık
   gri bir leke bırakıyordu. Bulanıklık okunurluğu azaltıyor ama SİLMİYOR.

   ⚠ Bu paragrafta eski kuralın TAM METNİ yazılmıyor, bilinçli:
   araclar/surum-imzalari.php o metni "olmaması gereken" imza olarak
   arıyor ve CSS dosyalarında yorum AYIKLANMIYOR (php_strip_whitespace
   yalnızca PHP kodunu budar). Gerekçeyi tam dizeyle yazsam teşhis aracı
   güncel dosyayı "eski sürüm" ilan ederdi.

   Panel bir ARAÇ arayüzü: yapışık başlığın işi sayfanın neresinde
   olduğunu söylemek. Arkasından metin sızması bilgi değil gürültü.
   Tanıtım sayfasındaki cam header'ın arkasında hero görseli var, orada
   efekt anlamlı; burada arkada liste metni var.

   backdrop-filter DA KALDIRILDI: opak zeminde hiçbir şey yapmıyor, yalnızca
   her kaydırma karesinde GPU'da bir katman daha demek. Ayrıca kuralın
   -webkit- öneki eksikti, yani Safari'de zaten çalışmıyordu — eski
   Safari'de şerit hem şeffaf hem bulanıksızdı, en kötü hâl. */
.pnl__ust {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: var(--pnl-ust-h);
    padding-inline: 0 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    transition: box-shadow var(--t-base) var(--ease);
}

/* KAYDIRILDIĞINDA ŞERİT İÇERİKTEN AYRILIYOR  —  2026-09-25.

   Yapışık şeridin altındaki tek ayrım 1 piksellik saç çizgisiydi ve kartlar
   da aynı çizgiyle çerçeveli: sayfa kaydırıldığında kartlar şeridin
   ALTINDAN geçerken çizgi bir sınır değil, kartların arasındaki başka bir
   çizgi gibi görünüyordu. Şerit "yapışık" olduğunu ancak içerik onun
   arkasına girerken belli eder; belli etmeyince arayüz yerinde durmuyor
   gibi hissediliyor.

   SINIF BEDAVA GELİYOR: js/theme.js scrollY > eşik olduğunda html'e
   'hdr-compact' ekliyor ve bunu HER SAYFADA yapıyor (sitenin header'ı için
   yazıldı, panelde de var). Panele ayrıca JS eklenmiyor.

   ⚠ YÜKSEKLİK DEĞİŞMİYOR: 'hdr-compact' sitenin header'ında --h'yi 92 →
   82 düşürüyor, ama panelin şeridi --pnl-ust-h (sabit 4rem) kullanıyor.
   Yan menünün yapışma ofseti o değerden geldiği için yükseklik oynasaydı
   kaydırma sırasında menünün tepesi şeridin arkasına girerdi (§ 24).

   GÖLGE İKİ KATMANLI: 1 piksellik yakın katman çizgiyi güçlendiriyor, geniş
   ve çok açık ikinci katman derinliği veriyor. --sh-2 kullanılmadı: onun
   yayılımı 24 piksel ve tam genişlikte bir şeritte ekranın üst şeridini
   gri bir banda çeviriyor. */
html.hdr-compact .pnl__ust {
    box-shadow: 0 1px 0 rgba(16, 24, 40, .04),
                0 8px 20px -16px rgba(16, 24, 40, .30);
}

/* SAYFA BAŞLIĞI — logonun sağında, İÇERİK KARTLARIYLA AYNI SOL HİZADA.

   margin-inline-start .pnl__icerik'in dolgusuyla eşit (1.5rem): başlık
   kartların sol kenarından başlıyor. margin-inline-end: auto kalanı
   süpürüp çıkış düğmesini sağ uca itiyor — space-between kullanılmadı,
   çünkü şeritte üç kardeş var ve o durumda başlık ortada asılı kalırdı.

   TEK SATIR, KIRPMALI. Eski kural sarmaya izin veriyordu (overflow-wrap:
   anywhere) ama şerit artık SABİT yükseklikte olmak zorunda: yan menünün
   yapışma ofseti ondan türetiliyor (§ 24a). Sarma izni verilirse dar
   masaüstünde uzun bir başlık şeridi büyütüp menüyü şeridin arkasına
   sokuyor. Tam metin <title>'da ve mobilde konum izinde duruyor. */
/* ÖLÇÜ 1.15rem → 1.25rem, KALINLIK 650 → 700  —  2026-09-25.

   Şerit 64 piksel yüksekliğinde ve içinde 30 piksellik bir logo, 38 piksellik
   iki kontrol var; 18.4 piksellik bir başlık o kalabalığın içinde sayfanın
   ADI gibi değil bir alt etiket gibi duruyordu. 20 piksel + 700, logonun
   ağırlığına yakın ama onu geçmeyen tek değer.

   letter-spacing: kısa ve kalın başlıklarda harf aralığı hafifçe kısılır
   (aynı kalıp .ay-label ve .hsp__h2'de de var); açık bırakıldığında "Pano"
   gibi dört harflik bir kelime dağınık okunuyor. */
.pnl__baslik {
    min-width: 0;
    margin: 0;
    margin-inline: 1.5rem auto;
    overflow: hidden;
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Üst şeridin sağ bloğu: DİL + PROFİL + ÇIKIŞ  —  2026-09-25 ---------

   Kutu ayrı bir blok, çünkü şeridin sağ ucundaki öğeler birlikte hareket
   etmeli; başlığın margin-inline-end: auto'su bu kutuyu sağa itiyor. Yorum
   bir dönem "ileride ikinci bir öğe eklenirse" diyordu — eklendi, sonra
   üçüncüsü de (2026-09-25).

   ŞU AN DÖRT ÖĞE, SOLDAN SAĞA: dil menüsü (yazılı) · tanıtım turu (ikon) ·
   profil (ikon) · çıkış (ikon). Çıkışın en sağda olması kullanıcı
   isteğinden geliyor ("profilim butonunun sağına oturumu kapat butonu yap")
   ve okunuşu da tutarlı: dil → yardım → hesap → çık.

   ⚠ ÇIKIŞ BURAYA GERİ DÖNDÜ (2026-09-25). 2026-09-24'te tam tersi yapılmış,
   düğme buradan yan menünün dibine taşınmıştı; gerekçe "şeridin sağ ucu
   ekranın en görünür köşesi ve yanlış tıklandığında oturumu bitiren bir eylem
   için fazla riskli"ydi. O gerekçe SİLİNMEDİ, KARŞILIĞI VERİLDİ: düğme artık
   YAZISIZ, çerçeveli ve 38 piksellik kare bir ikon — şeridin birincil eylemi
   gibi değil, dil menüsüyle aynı ağırlıkta bir yardımcı gibi duruyor.

   ⚠ .pnl__cikis KURALLARI GERİ GETİRİLMEDİ. Şeritteki çıkış kendi adını
   taşıyor (.pnl__ust_cikis) ve kolonun dibindeki kural takımı artık kılavuz
   düğmesinde (.pnl__kilavuz, § 24a). Tek ad iki yerde tanımlı kalsaydı sonra
   gelen kazanır, tam genişlik/ortalama kuralları sessizce şeride sızardı —
   ilk turda tam bu yüzden ayrıştırılmıştı. */
.pnl__ust_sag {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* .35rem → .5rem: iki kontrol de çerçeveli ve açık zeminli; 5-6 piksel
       aralıkta kenarlıkları neredeyse birleşip tek bir bölünmüş kutu gibi
       görünüyordu. .5rem, drawer'ın alt bloğundaki aralıkla da (§ 7 gap)
       aynı ailede. */
    gap: .5rem;
}

/* --- DİL SEÇİMİ ŞERİTTE: ÜRÜNÜN AÇILIR MENÜSÜ  —  2026-09-25 ------------

   KULLANICI KARARI: "menü, header, yan menü vs. tasarım ve style sorunlarını
   da gider… amatör duruyor".

   ⚠ BURADA ARTIK .dilsec YOK. Şeritte bir <form>+<select>+"Uygula" üçlüsü
   duruyordu (_dil_secici.php) ve üç ölçülmüş kusuru vardı:

     ÖLÜ BOŞLUK   <select> genişliğini EN UZUN seçenek belirliyor
                  ("Azərbaycan"/"Nederlands"); Türkçe seçiliyken kutunun
                  içinde yazı ile ok arasında ~70 piksel boş kalıyordu
                  (1440×900'de ölçüldü).
     İKİ DİL      Kutu işletim sisteminin listesini açıyor, yanındaki
                  "Profilim" ise ürünün düğmesi. Aynı köşede iki tasarım.
     FAZLA DÜĞME  "Uygula" JS'siz çalışma için şarttı ve JS yüklenene kadar
                  görünüyordu.

   ASIL TUTARSIZLIK: aynı panelin MOBİL başlığında zaten .lang açılır menüsü
   vardı. Yani dil telefonda ürünün bileşeniyle, masaüstünde OS kutusuyla
   değişiyordu. İkisi artık tek parça (_dil_menu.php) ve tek kural takımı
   (§ 5a).

   .dilsec KURALLARI (§ 23k) DURUYOR: adk-panel'in üç ekranı ve
   panel/_kabuk.php'nin girişli kipi hâlâ o bileşeni kullanıyor. Yalnızca
   '.pnl__ust_sag .dilsec*' üçlüsü silindi — okuyucusu kalmadı.

   AŞAĞIDAKİ İKİ KURAL YALNIZCA ARA GENİŞLİK İÇİN VAR (901–1199 px).

   Panelin kırılımı 900, sitenin header'ının kırılımı 1200. Arada kalan
   aralıkta panel MASAÜSTÜ kipinde (şerit + yan menü görünür) ama .lang
   sitenin § 5b kuralını alıyor: yükseklik 34, dolgu daralıyor ve caret
   'display: none' oluyor. Sonuç, şeridin sağ ucunda 34 piksellik bir dil
   düğmesi ile 38 piksellik "Profilim" — önceki turda tam bu 4-6 piksellik
   fark için "amatör duruyor" denmişti — ve açılır olduğunu gösteren okun
   kaybolması.

   § 5b'nin gerekçesi TELEFON: orada logo + dil + hamburger 320 piksellik bir
   satıra sığmak zorunda. Şeritte o kısıt yok; satırda logo bloğu, tek satır
   başlık ve iki kontrol var. Bu yüzden değerler burada tabana döndürülüyor,
   § 5b değiştirilmiyor — o kural panelin mobil başlığında da geçerli ve orada
   DOĞRU. */
.pnl__ust_sag .lang__btn {
    height: var(--control-h);
    gap: .45rem;
    padding: 0 .75rem 0 .875rem;
    font-weight: 600;
}
.pnl__ust_sag .lang__btn .globe { font-size: 16px; }
.pnl__ust_sag .lang__btn .caret { display: inline-block; }

/* --- ŞERİDİN İKON DÜĞMELERİ: TUR + PROFİL + ÇIKIŞ  —  2026-09-25 --------

   KULLANICI KARARI (2026-09-25): "profilim butonunda ki profilim yazısını
   sil. user icon olsun sadece." ve "oturumu kapat butonundaki yazıyı sil.
   o da oturumu kapat iconu olarak olsun sadece."

   ⚠ SINIF ÜÇ DÜĞMEDE: tanıtım turu, profil ve çıkış (panel/_panel.php).
   Tur düğmesi sınıfı önceden taşıyordu ama BURADA TANIMI YOKTU — yani
   ikon-only olması amaçlandığı hâlde .ay-btn'in yatay dolgusuyla kapsül
   kalıyordu. Bu blok o boşluğu da kapatıyor.

   Üçü de hazır bileşen (.ay-btn--ghost); burada yalnızca ŞERİDE ÖZGÜ
   ayarlar var. Kutunun gap'i (.5rem) ve dikey hizası yukarıdaki
   .pnl__ust_sag kuralından geliyor.

   --- NİYE KARE

   .ay-btn tabanı 'padding: 0 1.25rem' veriyor ve yazı silinince o dolgu
   olduğu yerde kalıyor: 18 piksellik bir ikonun iki yanında 20+20 piksel
   boşluk, yani 58×38 piksellik yatık bir kapsül. Üç tanesi yan yana
   dururken şeridin sağ ucu ~200 piksel yer tutuyor ve düğmeler "yazısı
   yüklenmemiş" gibi görünüyordu.

   width = height = var(--control-h): dolgu sıfırlanıyor, düğme tam kare
   oluyor ve --r-pill ile daireye dönüşüyor. Dil menüsü (38px yüksekliğinde,
   yazılı ve kapsül) yanında iki daire — ölçü aynı, biçim kasıtlı olarak
   farklı: biri açılır liste, ikisi tek tıklık eylem.

   ⚠ 38 PİKSEL DOKUNULABİLİR SINIRIN (44px) ALTINDA ve bilerek: bu kutu
   MOBİLDE HİÇ BASILMIYOR (.pnl__ust_sag → display: none, aşağıda § 24c).

   TELEFONDAKİ KARŞILIKLARI ARTIK DAİRE DEĞİL, MENÜ SATIRI (2026-09-25,
   ikinci tur · kullanıcı kararı: "ayarların altında Profilim / Oturumu
   Kapat şeklinde menüye dahil olsun"): profil ve çıkış mobil menü
   listesinin son iki satırı ve yüksekliği --fs-lg + 2×.9375rem ≈ 48
   piksel, yani 44'ün ÜSTÜNDE. Aradaki tur boyunca ikisi drawer'ın dibinde
   44 piksellik dairelerdi; o satır da kaldırıldı (§ 24c). Dokunma hedefi
   her düzende karşılandı, ödün yalnızca masaüstünde verildi.

   ⚠ ERİŞİLEBİLİR AD MARKUP'TA: her iki düğmenin içinde .ay-sr-only bir
   <span> var ("Profilim" / "Oturumu kapat") ve ayrıca title ile imleç ipucu
   veriliyor (panel/_panel.php). Çıplak bir <i> ekran okuyucuya hiçbir şey
   söylemez; CSS burada o metni GİZLEMİYOR, .ay-sr-only zaten görsel olarak
   gizli bir kalıp (theme.css).

   İKON 18 PİKSELDE — yan menü satırlarındaki .pnl__ikon ile aynı değer ve
   panelin tek ölçüsü: her menü/gezinme ikonu 18 piksel. Bir tur 16 pikseldi
   çünkü düğme .ay-btn--sm (32px) idi; düğme ürünün standart yüksekliğine
   (38px) çıkınca 16 piksellik çizim cılız kaldı.

   ⚠ İKİ DÜĞMENİN İKONU DA ay_pnl_ikon() İLE BASILIYOR (panel/_panel.php),
   yani ikisi de .pnl__ikon taşıyor ve tek kural ikisini birden ölçüyor.
   Çıkış eskiden ay_ikon('cikis') ile basılıyor ve 15 pikselde duruyordu
   (§ 24a'daki eski .pnl__cikis kuralı); şeritte profilin yanında 3 piksel
   küçük kalması, ilk turda "amatör duruyor" denen türden bir farktı.

   flex: 0 0 auto ARTIK BURADA YAZILMIYOR: o koruma tek yere, .ay-ico'nun
   kendisine taşındı (theme.css § 7b) — yani projedeki her ikon için geçerli.

   RENK: satır ikonlarının aksine BASTIRILMIYOR (§ 24a'da .pnl__oge .pnl__ikon
   --ink-mute'a çekiliyor). Burası dokuz öğelik bir liste değil; sıralanacak
   bir şey yok ve bastırılmış ikon düğmeyi pasif gösteriyordu. currentColor
   ile hover'da marka rengine geçiyor (.ay-btn--ghost:hover). */
.pnl__ust_dgm {
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    flex: 0 0 auto;
}
.pnl__profil .pnl__ikon,
.pnl__ust_dgm .pnl__ikon {
    font-size: 18px;
}

/* ÇIKIŞ FORMU — ŞERİTTE SARMALAYICI, GÖRÜNMEZ OLMALI.

   Çıkış bir EYLEM ve POST + CSRF ile korunuyor (gerekçe panel/cikis.php),
   yani düğmenin bir <form> içinde olması zorunlu. Form burada şeridin flex
   kutusunda bir ÖĞE: varsayılan blok boşluğunu taşısa iki düğme arasındaki
   .5rem aralık bozulur, yüksekliği kendisi belirlese düğme kutunun içinde
   dikey ortalanmaz.

   display: flex + margin 0: form düğmenin ölçüsüne kadar küçülüyor, yani
   ekranda yalnızca daire görünüyor. */
.pnl__ust_cikis {
    display: flex;
    margin: 0;
    flex: 0 0 auto;
}

/* TELEFONDAKİ SAYFA ADI — MASAÜSTÜNDE HİÇ BASILMIYOR.

   İçerik kolonunun ilk satırı olarak duruyor (panel/_panel.php) ve yalnızca
   § 24c'de açılıyor. Masaüstünde şeridin .pnl__baslik'i aynı metni taşıyor;
   ikisi birden görünse sayfa adı üst üste iki kez yazardı.

   ⚠ BU BLOK § 24c'DEN ÖNCE OLMAK ZORUNDA: aynı seçici, aynı özgüllük —
   eşitlikte sonra gelen kazanır. display: none aşağıda dursa medya
   sorgusundaki display: block ezilir ve başlık telefonda da çıkmazdı.
   (Aynı tuzak .pnl__hdr / .pnl .drawer üçlüsünde de var, § 24a sonu.) */
.pnl__mbaslik {
    display: none;
}

.pnl__icerik {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem;
    /* 2026-10-01 · YATAY TAŞMA EMNİYETİ. Kapalı açılır menüler (.ay-pop,
       visibility:hidden ama yerinde) ve geniş tablolar telefonda belgeyi
       yatay kaydırıyordu (ölçüldü: panel/agent 375px'te 417px). clip,
       hidden'ın aksine kaydırma kabı KURMUYOR: sticky öğeler ve dikey
       taşma (açılır menüler aşağı doğru) etkilenmiyor. Tablolar kendi
       kaydırma kaplarında (…_tablo_kap) kaydırılmaya devam ediyor. */
    overflow-x: clip;
}

/* PANO İÇERİĞİNE AZAMİ GENİŞLİK — 2026-09-27 · pano iyileştirmesi.

   1600 pikselin üstünde panonun kartları ve bloğu 1300 pikseli aşıyordu:
   kurulum adımlarının bir satırı ekranın bir ucundan öbürüne uzanıyor,
   dört özet kartı 300'er piksele şişip içleri boş kalıyordu. Pano bir
   ÖZET ekranı; göz onu tek bakışta taramalı.

   YALNIZCA PANO: seçici panoya özgü karşılama satırına (.pnl__hos) bakıyor.
   Takvim ve liste ekranları geniş alandan yararlanıyor, onlara dokunulmadı.

   ⚠ SARMALAYICI DEĞİL, ÇOCUK BAŞINA SINIR. İçerik ayrı bir <div>'e
   alınsaydı .pnl__icerik > .ay-alert (şerit boşluğu, § 24b) gibi doğrudan
   çocuk kuralları sessizce kırılırdı. margin-inline: auto yalnızca yatay
   eksene dokunuyor; blokların dikey boşlukları (margin-block) aynen kalıyor.

   :has() desteklemeyen eski tarayıcıda kural hiç uygulanmıyor ve pano
   bugünkü gibi tam genişlikte açılıyor — bozulma yok.

   Telif satırı içeriğin dışında (main'in kardeşi, _panel_alt.php); aynı
   sınırla hizalanıyor, yoksa geniş ekranda içerik ortada, telif solda
   kalırdı. 78rem + iki yanın 1.5rem dolgusu.

   ⚠ 2026-09-30 · KALDIRILDI — kullanıcı kararı: "panel/ sayfasındaki
   sayfa genişliğini diğer sayfalar gibi geniş yap." Sınır panoyu ortada
   dar bir sütuna sıkıştırıyordu; Hesaplar, Gönderiler vb. ekranlar kabuğun
   tam genişliğini kullanırken pano ~1250 pikselde kalıyor ve iki yanında
   boşluk bırakıyordu. Pano artık öteki ekranlarla aynı genişlikte; telif
   satırı da varsayılan hizasında (.pnl__telif). Kurallar geri
   getirilmemeli — genişlik tutarlılığı panonun "tek bakışta taranma"
   kaygısından önce geliyor. */

.pnl__telif {
    margin: 0;
    padding: 1rem 1.5rem 1.5rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* --- 24b-2 · SATIR EYLEMİ: İKON DÜĞMESİ  (.pnl__eylem)  —  BÜTÜN PANEL ---

   KULLANICI KARARI (2026-09-25): "düzenle ve sil butonları yerine ikonlar
   ile yap. tasarıma uygun ve şık bir şekilde olsun."

   İşaretlemeyi panel/_panel.php → ay_pnl_eylem() basıyor; erişilebilirlik
   kalıbının (.ay-sr-only etiket + title) gerekçesi orada yazılı.

   --------------------------------------------------------------------------
   NİYE ORTAK BİLEŞEN — ÜÇ EKRAN, ÜÇ FARKLI DÜĞME

   Aynı ikili (düzenle + sil) panelde dokuz ekranda tekrar ediyordu ve her
   ekran kendi görünümünü yazmıştı:

     .hsp__kaldir     altı çizili, --ink-mute, 24px  (gönderiler · hesaplar ·
                                                      medya · gönderi · agent-bilgi)
     .yrm__sil_link   .ay-btn--ghost + ikon, 32px    (yorumlar)
     .ajn__sil_link   .ay-btn--ghost + ikon, 32px    (agent)
     .mdy__detay_ac   altı çizili, .75rem, brand     (medya "Güncelle")
     .tkv__kayit_eylem hap çerçeve, 32px             (takvim)

   Beş görünüm, beş dokunma hedefi, tek iş. Tek sınıfa indi.

   --------------------------------------------------------------------------
   ÖLÇÜ 32×32 — .ay-btn--sm İLE AYNI YÜKSEKLİK

   Eylem çubuklarında yanında METİNLİ düğmeler kalmaya devam ediyor
   ("Planı kaldır", "Pasife al", "İndir", "Yeni sekmede aç") ve onların
   yüksekliği .ay-btn--sm ile 32 piksel (theme.css § 3). İkon düğmesi 28
   piksel yapılsaydı aynı satırda iki farklı yükseklik olurdu; çubuk
   align-items: center olduğu için fark hizada değil KÜTLEDE görünüyordu.

   WCAG 2.5.8 (AA) en az 24×24 istiyor — 32 onun üstünde. Bu ölçünün
   gerekçesi eskiden § 24e'deki .hsp__kaldir'ın başında yazılıydı ve ORADA
   ÖLÇÜLMÜŞTÜ: bağlantı 22 piksel yüksekliğinde, Türkçe "Sil" etiketiyle
   15 PİKSEL GENİŞLİĞİNDE kalıyordu. İkon düğmesi kareye geçtiği için o
   kusur kendiliğinden kapanıyor: hedef artık dile göre değişmiyor.

   --------------------------------------------------------------------------
   DURAĞAN HÂLİ NÖTR, YIKICI TON YALNIZCA HOVER/ODAKTA

   .pnl__eylem--tehlike durağan hâlde de kırmızı OLABİLİRDİ ve olmadı: bir
   listede 20 satır × 1 kırmızı ikon, ekranı "her satırda bir hata var" gibi
   gösteriyor. Projenin kararı (yıkıcı eylemi öne çıkarmamak) § 24e'de ve
   panel/gonderi.php'de zaten yazılıydı, o karar korunuyor — silme niyeti
   imleç değdiğinde renkle doğrulanıyor.

   ⚠ RENK TEK TAŞIYICI DEĞİL (WCAG 1.4.1): hangi düğmenin ne yaptığı ÇİZİMLE
   ayrışıyor (kalem ↔ çöp kutusu) ve adı .ay-sr-only metinde + title'da
   yazılı. Ton yalnızca vurgu.

   :hover @media (hover: hover) İÇİNDE DEĞİL — bilinçli: burada hover'da
   AÇILAN bir şey yok (takvimdeki .tkv__ekle gibi), yalnızca zemin rengi
   değişiyor. Dokunmatikte rengin bir süre üzerinde kalması yanlış bilgi
   vermiyor; buna karşılık kuralı medya sorgusuna almak :focus-visible'ı da
   ayrı yazmayı gerektirirdi. */
.pnl__eylem {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-soft);
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease),
                color var(--t-base) var(--ease);
}

/* İkon 14px: 32 piksellik karede 18px (menü ölçüsü) kutuyu dolduruyor ve
   düğme bir ikon karosuna dönüşüyordu; 14 çevresinde nefes bırakıyor. */
.pnl__eylem .ay-ico {
    font-size: 14px;
}

.pnl__eylem:hover,
.pnl__eylem:focus-visible {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}

.pnl__eylem--tehlike:hover,
.pnl__eylem--tehlike:focus-visible {
    border-color: var(--st-hata-line);
    background: var(--st-hata-bg);
    color: var(--st-hata-ink);
}

/* İKON YÜKLENEMEDİĞİNDEKİ YEDEK (ay_pnl_eylem → 'pnl__eylem--yazi').
   Kare genişlik metni kırpardı; düğme etiketli hâline dönüyor. Bu kural
   ekranda normalde HİÇ görünmüyor — ikon seti gelmezse diye var. */
.pnl__eylem--yazi {
    width: auto;
    padding: 0 .7rem;
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* --- 24c · Mobil (≤900px): SİTENİN HEADER'I + DRAWER --------------------

   NE DEĞİŞTİ, NEDEN

   Panel mobilde kendi başlığını çiziyordu: üst şeride sıkıştırılmış logo
   (.pnl__ust_marka), ikona inen çıkış düğmesi, iki harfli bir <select>
   (.pnl__ust_dil), kendi hamburgeri (.pnl__burger), kendi karartması
   (.pnl__scrim) ve drawer'a dönüşen yan kolon (.pnl__yan + .pnl__kapat).
   Sitenin header'ıyla "aynı görünmesi" ELLE sürdürülüyordu ve tutmuyordu:
   logo başka dosya (ayduke.png ↔ logo.png), ölçüsü başka clamp, hamburger
   geometrisi kopya, dil seçimi bambaşka bir bileşen. Her ölçü değişikliği
   iki yerde ayrı ayrı yapılıyordu.

   Artık mobilde SİTENİN header bileşeni basılıyor (panel/_panel_hdr.php):
   .hdr + .hdr__brand + .lang + .hdr__burger + .drawer + .scrim. Yükseklik,
   logo ölçüsü, cam zemin, kaydırmada kompaktlaşma, drawer genişliği,
   kademeli giriş animasyonu ve RTL aynalaması § 2-8'den GELİYOR. Bu blokta
   yalnızca kırılım kararları ve panele özgü dört sapma var.

   MOBİLDE MASAÜSTÜ KABUĞUNUN ÜÇ PARÇASI KALKIYOR: şeridin kutusu
   (display: contents), şeritteki logo ve şeritteki çıkış düğmesi. Üçünün
   karşılığı da mobil başlıkta/drawer'da var; gizlenmezlerse telefonda iki
   logo ve iki çıkış düğmesi üst üste çıkar.

   ESKİ DRAWER'IN KURALLARI SİLİNDİ: yan kolonu fixed'e çeviren blok,
   align-self: stretch düzeltmesi, RTL gölge karşılığı, panele özel açık-durum
   gövde sınıfı, panele özel karartma, kopyalanmış hamburger geometrisi,
   şerit logosunun clamp'i ve iki harfli dil kutusu. Hepsinin işini artık
   sitenin bileşeni yapıyor.

   ⚠ O SINIF ADLARI BURAYA GERİ YAZILMAMALI: araclar/surum-imzalari.php
   css/style.css içinde onları "olmaması gerekenler" listesinde arıyor ve
   YORUMDA geçen bir ad da bulunuyor sayılır (CSS'te yorum ayıklanmıyor).
   Teşhis aracı güncel dosyayı "eski sürüm" ilan eder.
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* GÖVDE TEK KOLON: yan menü mobilde hiç görünmüyor, yatay flex'in
       yapacağı bir iş kalmıyor.

       display: block (flex DEĞİL): mobil başlık .pnl__ana'nın içinde ve
       yapışık; kapsayıcısının normal akışta, belge boyu uzayan bir blok
       olması en az sürprizli hâl. */
    .pnl__govde {
        display: block;
    }

    /* YAN MENÜ GÖRÜNMÜYOR.

       Eskiden bu kolonun KENDİSİ drawer'a dönüşüyordu. Artık mobil menü
       ayrı bir öğe (.pnl__drw) ve sitenin drawer'ının aynısı.

       display: none, visibility: hidden DEĞİL: aynı dokuz bağlantı
       drawer'da bir kez daha var; kolon erişilebilirlik ağacında kalsa
       ekran okuyucu menüyü iki kez okurdu. */
    .pnl__yan {
        display: none;
    }

    /* MOBİL BAŞLIK — fixed DEĞİL, STICKY.

       Sitede .hdr position: fixed ve payı body'ye üst dolgu olarak
       veriliyor (§ 1). Panelde o dolgu kapalı (html.ay-nohdr, § 1a) ve geri
       açmak § 1a'da yazılı üç sorunu geri getiriyor: .pnl min-height: 100vh
       olduğu için belge 100vh + 80px'e çıkıp içerik sığsa bile kaydırma
       çubuğu üretiyor, dolgu --h değiştiğinde animasyonlanıyor ve panelin
       tamamı kayıyor.

       sticky ikisini de doğuruyor: başlık akışta yer tuttuğu için dolgu
       gerekmiyor, kaydırırken pencerenin tepesinde kalıyor. Kullanıcı
       açısından fixed'den ayırt edilemiyor.

       inset sıfırlanıyor: temel kuralda 'inset: 0 0 auto 0' var, sticky için
       sol/sağ ofsetin anlamı yok. */
    .pnl__hdr {
        display: block;
        position: sticky;
        inset: 0 auto auto;
    }

    /* ZEMİN OPAK — .ay-glass EZİLİYOR.

       HTML'de sınıf duruyor (başlık sitenin bileşeni, § 24c başındaki
       karar) ama --glass %72 opak, yani %28 GEÇİRGEN. Masaüstü şeridinde
       aynı sorun %12 ile ölçüldü (bkz. .pnl__ust); mobilde iki buçuk katı:
       yapışık başlığın arkasından liste satırları ve form etiketleri
       okunuyor, logo metnin üstüne biniyordu.

       Sitede sorun çıkmıyor çünkü orada başlığın arkasında hero görseli
       var ve kaydırınca js/theme.js html'e .hdr-compact ekleyip zemini
       %88'e çıkarıyor. Panelde arkada her zaman metin var.

       Sınıfı HTML'den silmek yerine burada eziliyor: .ay-glass yüzeyin
       tanımı (theme.css § 5) ve başka yerlerde doğru çalışıyor; panelin
       sapması panelin kuralında durmalı.

       İKİ SEÇİCİ ŞART. Sınıfı sınıfla niteleyen biçim (0,2,0) tek başına
       yetmiyor: html.hdr-compact .hdr (0,2,1) kuralı § 2'de zemini %88'e
       çekiyor ve ÖZGÜLLÜĞÜ DAHA YÜKSEK. Kaydırmaya başlayınca şerit yarı
       saydama geri dönüyordu. İkinci seçici aynı özgüllükte (0,2,1) ve
       style.css theme.css'ten sonra yüklendiği için kazanıyor.

       ⚠ Bu paragrafta seçicilerin TAM METNİ yazılmıyor: teşhis aracı onları
       imza olarak arıyor ve CSS'te yorum ayıklanmıyor (bkz. § 24b'deki aynı
       not). Yorumda geçen bir imza kuralın kendisi silinse bile "bulundu"
       sayılır ve denetim sessiz kalır.

       .hdr-compact'ın getirdiği GÖLGE korunuyor: yapışık şeridin altındaki
       içerikten ayrıldığını gösteriyor, istenen şey. */
    .pnl__hdr.ay-glass,
    html.hdr-compact .pnl__hdr {
        background: var(--surface);
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
    }

    /* Çıpaya inen bağlantılar başlığın ALTINDA duracak.

       § 1a bu değeri sıfırlıyor ("header yoksa payın anlamı yok") ve mobilde
       artık bir başlık var: "içeriğe geç" bağlantısı (#main, theme.css § 10)
       içeriği tam pencerenin tepesine getiriyor, yapışık başlık da ilk 80
       pikselin üstüne biniyordu. Klavye kullanıcısı bağlantıya bastığında
       içeriğin başını göremiyordu.

       html.ay-nohdr'i yalnızca panel kullanıyor (bkz. § 1a), bu yüzden
       seçici .pnl ile sınırlanamasa da etkisi panele özel. */
    html.ay-nohdr {
        scroll-padding-top: var(--h);
    }

    /* Başlığın iç genişliği PANELE göre hizalanıyor.

       .hdr__inner bir Bootstrap .container: 576px altında 12 piksel yan
       dolgu, 576-900 arasında ise SABİT genişlik (540/720px) ve ortalama.
       Panelin içeriği container kullanmıyor, 1rem dolguyla akıyor; ikisi bir
       arada tablet boyunda logoyu içeriğin 30-90 piksel içine kaçırıyordu.

       max-width kalkıyor, dolgu 1rem oluyor. Telefonda sitenin header'ından
       tek sapma bu 4 piksel; karşılığında logo, konum izi ve kartlar aynı
       çizgide başlıyor. */
    .pnl__hdr .hdr__inner {
        max-width: none;
        padding-inline: 1rem;
    }

    /* DRAWER VE KARARTMA GÖRÜNÜYOR. Bütün değerler sitenin § 7-8'inden;
       burada yalnızca display geri veriliyor (masaüstünde none). */
    .pnl .drawer {
        display: flex;
    }
    .pnl .scrim {
        display: block;
    }

    /* Panelin menüsü dokuz satır, sitenin altı. Kademeli giriş gecikmeleri
       § 7'de altıncıya kadar yazılı; kalan üçü ve alt bloktaki düğme burada,
       aynı 45 ms aralıkla. Gecikme verilmezse o satırlar animasyona sıfır
       saniyede giriyor, liste sondan başlamış gibi görünüyor. */
    .pnl__drw .drawer__body li:nth-child(7)  { animation-delay: .370s; }
    .pnl__drw .drawer__body li:nth-child(8)  { animation-delay: .415s; }
    .pnl__drw .drawer__body li:nth-child(9)  { animation-delay: .460s; }

    /* ⚠ LİSTE ON İKİ SATIR — SAYILDI, TAHMİN EDİLMEDİ. $ay_menu on öğe
       taşıyor (pano · hesaplar · bağlantılar · gönderiler · medya · takvim ·
       agent · mesajlar · yorumlar · ayarlar, panel/_panel.php) ve
       2026-09-25'te altına iki hesap satırı girdi: Profilim + Oturumu Kapat
       (kullanıcı kararı — panel/_panel_hdr.php).

       ⚠ ONUNCU SATIR BİR SÜRE GECİKMESİZ KALMIŞTI. Bu blok "dokuz satır"
       varsayımıyla yazılmıştı ve 'bağlantılar' menüye sonradan eklendiğinde
       kimse buraya dönmedi: basılan HTML sayıldığında liste on satırdı.
       Gecikme verilmeyen satır animasyona SIFIR saniyede giriyor, yani
       drawer açılırken listenin dibi tepesinden ÖNCE yerleşiyor. Değer
       artık basılan satır sayısına göre yazılı; menüye yeni bir ekran
       eklenirse burası da uzamak zorunda. */
    .pnl__drw .drawer__body li:nth-child(10) { animation-delay: .505s; }
    .pnl__drw .drawer__body li:nth-child(11) { animation-delay: .550s; }
    .pnl__drw .drawer__body li:nth-child(12) { animation-delay: .595s; }

    /* ALT BLOK YİNE TEK ÖĞE: yalnızca "Kullanım Kılavuzu" düğmesi. Bir tur
       boyunca iki öğeydi (araç satırı + kılavuz) ve ikincisi için .550s
       yazılıydı; araç satırı kaldırıldığında o kural okuyucusuz kaldı ve
       silindi. Sitenin § 7'deki değeri (.370s) panelin on iki satırlı
       listesine göre ERKEN — düğme menünün son satırlarıyla aynı anda
       girip sırayı bozuyordu. */
    .pnl__drw .drawer__foot > *:nth-child(1) { animation-delay: .640s; }

    /* --- MENÜ SATIRI: İKON + ETİKET + ROZET  —  2026-09-25 -------------

       Sitenin drawer satırı iki uçlu (space-between): solda etiket, sağda
       chevron. Panelin satırı ÜÇ PARÇALI olduğu için o hiza yanlış — ikon,
       etiket ve chevron eşit aralıklara dağılıp ikon ile yazı arasında 200
       piksel boşluk kalıyordu. Hiza flex-start'a dönüyor, sağ uca itme işini
       etiketin 'margin-inline-end: auto'su yapıyor (aşağıda).

       ARALIK .85rem: yan menüdeki .65rem'den geniş, çünkü burada satır
       yüksekliği de (--fs-lg + .9375rem dolgu) büyük; .65rem bu ölçekte ikonu
       yazıya yapıştırıyordu. */
    .pnl__drw .hdr__link {
        justify-content: flex-start;
        gap: .85rem;
    }

    /* Etiket kalan alanı süpürüyor: rozet ve chevron sağ uca yapışıyor.
       RTL'de logical özellik kendiliğinden diğer tarafa geçiyor. */
    .pnl__drw_ad {
        min-width: 0;
        margin-inline-end: auto;
        overflow-wrap: anywhere;
    }

    /* İKON 20 PİKSEL, YAZIDAN BİR TON AÇIK.

       .pnl__ikon yan menü için 18 piksel (§ 24a); burada satır --fs-lg
       (17px) ve dolgusu iki kat, 18 piksellik çizim yazının altında
       eziliyordu.

       Renk --ink-mute: etiket okunacak şey, ikon yalnızca işaret. Eşit
       koyulukta olduklarında dokuz satır tek bir gri blok gibi duruyor.
       Aktif satırda ikon da marka rengine geçiyor — aktiflik drawer'da
       zeminle değil renkle anlatılıyor.

       ⚠ SEÇİCİ .hdr__link İLE SINIRLANDI (2026-09-25) ve SINIR HÂLÂ
       GEREKLİ. Kural '.pnl__drw .pnl__ikon' iken drawer'ın İÇİNDEKİ HER
       .pnl__ikon'u yakalıyordu ve o dönem alt blokta ikonlu düğmeler vardı:
       çerçeveli bir düğmenin içinde yazıdan büyük ve yazıdan soluk bir
       çizim, yani düğme devre dışı gibi görünüyordu. O düğmeler kalktı ama
       sınır kalıyor — alt blokta hâlâ ikonlu bir düğme var (Kullanım
       Kılavuzu) ve onun ikonu .pnl__ikon taşımasa da bir gün taşıyabilir.

       ⚠ KURAL ARTIK ON BİR SATIRI ÖLÇÜYOR, DOKUZU DEĞİL: "Profilim" ve
       "Oturumu Kapat" da .hdr__link olarak basılıyor (kullanıcı kararı:
       "menü ile uyumlu şekilde"), yani ikonları komşularıyla aynı 20
       pikselde ve aynı --ink-mute tonunda. İstenen tam bu — o iki satır
       listenin içinde ayrıksı görünmüyor. */
    .pnl__drw .hdr__link .pnl__ikon {
        font-size: 20px;
        color: var(--ink-mute);
    }
    .pnl__drw .hdr__link.is-active .pnl__ikon,
    .pnl__drw .hdr__link:active .pnl__ikon {
        color: var(--brand);
    }

    /* ⚠ AKTİF SATIR GERÇEKTEN İŞARETLENİYOR — HATA DÜZELTME (2026-09-25).

       '.hdr__link.is-active { color: var(--brand) }' § 4'te tanımlı (0,2,0)
       ama '.drawer .hdr__link { color: var(--ink) }' § 7'de, yani DOSYADA
       DAHA SONRA ve aynı özgüllükte: eşitlikte sonraki kazanıyor. Sonuç,
       drawer'da aktif satırın rengi hiç uygulanmıyordu; ayakta kalan tek
       fark font-weight: 600 idi ve dokuz satırlık listede 500 ile 600
       arasındaki farkı kimse göremiyor. Telefonda "hangi ekrandayım"
       sorusunun cevabı ekranda YOKTU.

       Panele özel seçici (0,3,0) ikisini de geçiyor, yani sıraya bağımlı
       değil. 700'e çıkarılması da bilinçli: renk tek başına yeterli değil,
       renk körlüğünde kalınlık ikinci işaret. */
    .pnl__drw .hdr__link.is-active {
        color: var(--brand);
        font-weight: 700;
    }

    /* HAZIR OLMAYAN MENÜ SATIRI ("yakında").

       Sitenin drawer'ında karşılığı yok — orada her satır bağlantı. Panelde
       üç ekran henüz yazılmadı ve satır <span> olarak basılıyor
       (panel/_panel_hdr.php): .hdr__link'in geometrisini kullanıyor,
       rengini kullanmıyor.

       cursor: default — kullanıcı imleci götürdüğünde tıklanabilir sanmasın.
       :active vurgusu da kapatılıyor: dokunmatikte tek geri bildirim o ve
       tıklanamayan satırda yanlış bilgi veriyor. */
    .pnl__drw_pas {
        color: var(--ink-mute);
        opacity: .62;
        cursor: default;
    }
    .pnl__drw_pas:active {
        color: var(--ink-mute);
    }

    /* --- MENÜNÜN SON İKİ SATIRI: PROFİLİM + OTURUMU KAPAT  —  2026-09-25

       KULLANICI KARARI: "ayarların altında: Profilim / Oturumu Kapat
       şeklinde menüye dahil olsun mobilde… menü içinde menü için de alt alta
       gelsin. menü ile uyumlu şekilde."

       ⚠ NE VARDI VE NİYE GİTTİ: burada alt bloğun tek satırlık araç şeridi
       tanımlıydı (.pnl__drw_araclar) — yazılı bir dil kapsülü + üç 44
       piksellik daire ikon düğmesi (.pnl__drw_dgm: tur · profil · çıkış),
       dil listesinin yukarı açılması ve 330 pikselin altında satırı tek
       satır tutan ayrı bir medya bloğu (§ 24c-2). Aynı günün ikinci
       turunda kullanıcı o düzenden vazgeçti:

         · dil seçimi BAŞLIĞA döndü, hamburgerin soluna. Orada ayrı kural
           gerekmiyor — § 5b (max-width: 1199.98px) dil düğmesini tam bu
           yerleşim için kompaktlaştırıyor ve panelin başlığı sitenin
           başlığıyla aynı kabuk. Drawer için yazılmış 44 piksellik
           .lang__btn kuralları ve yukarı açılan .lang__menu yönü bu yüzden
           kaldırıldı: düğme artık ekranın dibinde değil tepesinde, liste
           § 5a'nın değeriyle AŞAĞI açılıyor ve doğru olan o.
         · tur düğmesi tamamen kalktı (telefonda tur başlatılamıyor artık,
           gerekçe panel/_panel_hdr.php § ARAÇ SATIRI KALDIRILDI).
         · profil ve çıkış MENÜ LİSTESİNE, "Ayarlar"ın altına indi.

       ⚠ ÖLÇÜ TARTIŞMASI BİTTİ: § 24c-2'nin tamamı (330 px altı için aralık
       kısma, dolgu daraltma, caret gizleme) ölçülmüş ve gerekçeli bir
       bloktu ama okuyucusu kalmadı — koruduğu düzen artık yok. Yeni
       düzende dar ekran sorunu da yok: satırlar tam genişlikte ve alt alta,
       sarması gereken bir flex satırı kalmadı.

       --- BU İKİ SATIRIN BİÇİMİ KOMŞULARININ BİÇİMİ

       Kullanıcının şartı "menü ile uyumlu şekilde" ve karşılığı markup'ta
       zaten sağlandı: ikisi de .hdr__link + .pnl__ikon + .pnl__drw_ad +
       .ay-chev basıyor, yani üstteki dokuz satırla AYNI bileşen. Ayırıcı
       çizgi de kendiliğinden geliyor — § 7'deki
       '.drawer li + li .hdr__link' inen bir seçici ve formun içindeki
       düğmeyi de yakalıyor.

       Burada yalnızca <button>'un kendi görünümü sıfırlanıyor: .hdr__link
       bir <a> için yazıldı ve tarayıcı düğmeye zemin, kenarlık, kendi yazı
       tipi ve ortalı hiza veriyor. */

    /* ÇIKIŞ FORMU LİSTE SATIRININ KABUĞU.

       ⚠ ROLÜ DEĞİŞTİ, ADI KORUNDU. Aynı sınıf bir tur boyunca araç
       satırının içinde bir FLEX ÖĞESİYDİ ('display: flex; flex: 0 0 auto')
       ve işi daireyi dikey ortalamaktı. Şimdi <ul>'ün içinde bir <li>'nin
       tek çocuğu: tek işi kendi blok boşluğunu taşımamak ve genişliği
       düğmeye bırakmak. Ad bilinçli korundu — sürüm imzaları (araclar/
       surum-imzalari.php) ve _panel.php'deki çapraz göndermeler bu adı
       okuyor.

       'margin: 0' ŞART: tarayıcı <form>'a varsayılan alt boşluk vermiyor
       ama normalize etmeyen ortamlar veriyor ve o boşluk iki satırın
       arasındaki hairline ile çıkışın kendisi arasında görünür bir boşluk
       açardı. */
    .pnl__drw_cikis {
        margin: 0;
        width: 100%;
    }

    /* <button>'U MENÜ SATIRINA ÇEVİREN SIFIRLAMA.

       .hdr__link (§ 4) bir bağlantı için yazıldı: zemin, kenarlık ve yazı
       tipi devralınıyor varsayılıyor. <button>'da üçü de tarayıcıdan
       geliyor — sıfırlanmazsa çıkış satırı gri zeminli, çerçeveli ve
       sistem yazı tipiyle basılıp dokuz komşusunun yanında yabancı durur.

       'text-align: start' ve genişlik: düğmenin varsayılan hizası ortalı ve
       .hdr__link'in 'width: 100%' değeri § 7'de zaten var; hiza
       sıfırlanmazsa .ay-chev'in sağ uca gitmesini sağlayan
       'margin-inline-end: auto' (.pnl__drw_ad) yine çalışır ama satırın
       kendisi kutuya sığmayınca metin ortalanır. RTL'de 'start'
       kendiliğinden diğer tarafa geçiyor, 'left' yazılmadı.

       'cursor: pointer': <a> için tarayıcı veriyor, <button> için
       vermiyor. İki komşu satır arasında imleç değişmesi kusur olurdu.

       ⚠ SEÇİCİ .pnl__drw_hesap İLE SINIRLI, '.pnl__drw button' DEĞİL:
       drawer'ın içinde başka <button>'lar var (kapat düğmesi
       #pnlDrawerKapat, .ay-iconbtn) ve gevşek bir seçici onların da
       zeminini silerdi. */
    .pnl__drw_hesap {
        width: 100%;
        background: none;
        border: 0;
        font-family: inherit;
        text-align: start;
        cursor: pointer;
    }

    /* ÜST ŞERİDİN KUTUSU KALKIYOR: display: contents.

       display: none OLAMAZ — şeridin içinde sayfanın TEK h1'i var
       (.pnl__baslik). Gizlenirse belge başlıksız kalır; ekran okuyucu
       kullanıcıları sayfalarda başlık listesiyle geziniyor.

       contents ile şeridin kendi kutusu (cam zemin, kenarlık, dolgu, sticky)
       hiç üretilmiyor ama çocukları belgede kalıyor: h1 ekran okuyucuda,
       çıkış düğmesi aşağıda ayrıca kapatılıyor.

       İKİ STICKY ÇAKIŞMASINI DA BU ÇÖZÜYOR: şerit de mobil başlık da
       top: 0 yapışıktı, ikisi aynı yeri paylaşamazdı. Kutusu olmayan şerit
       yarışa girmiyor. */
    .pnl__ust {
        display: contents;
    }

    /* ŞERİDİN LOGOSU KALKIYOR: mobil karşılığı başlıktaki .hdr__brand
       (_panel_hdr.php), aynı dosya ve aynı bileşen. Şeridin kutusu yok
       olduğu için burada gizlenmeseydi logo içeriğin üstünde, mobil
       başlığın logosunun hemen altında ikinci kez görünürdü. */
    .pnl__marka {
        display: none;
    }

    /* SAYFA BAŞLIĞI GÖRSEL OLARAK GİZLENİYOR, KALDIRILMIYOR.

       .ay-sr-only kalıbı (theme.css § 10). Metni mobilde aşağıdaki konum
       izinde görünüyor; ekranın tepesinde yerini marka aldı. */
    .pnl__baslik {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        /* clip DEPRECATED ama bırakılıyor: clip-path'i desteklemeyen eski
           tarayıcıda tek kırpma yolu o. İkisi birlikte .ay-sr-only'nin
           (theme.css § 10) kalıbı — orada da aynı çift duruyor.

           clip-path eklenmesinin sebebi sadece modernlik değil: .pnl__ust
           display: contents olduğu için bu absolute öğenin containing
           block'u belge köküne kayıyor ve clip'in bazı motorlarda o
           durumda gevşediği görülüyor. clip-path kırpmayı öğenin kendi
           kutusuna bağlıyor. */
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* ÇIKIŞ DÜĞMESİ ŞERİTTEN KALKIYOR: mobil karşılığı drawer'ın dibindeki
       tam genişlikli düğme. Şeridin kutusu yok olduğu için burada
       gizlenmeseydi düğme içeriğin üstünde tek başına asılı kalırdı.

       Eskiden bu düğme mobilde etiketi gizlenip 40×40 ikona iniyordu; o
       kural da kalktı, artık düğme yalnızca masaüstünde görünüyor ve orada
       yazısı zaten yanında.

       ⚠ KUTUNUN İÇERİĞİ ÜÇ KEZ DEĞİŞTİ, KURAL AYNI KALDI. Bugün kutuda
       dört öğe var: dil menüsü · tanıtım turu · profil · çıkış. Gizleme
       gerekçesi her seferinde aynı: şeridin kutusu olmadığı için burada
       gizlenmeseydi dördü içeriğin üstünde tek başına asılı kalırdı.

       TELEFONDAKİ KARŞILIKLARI (2026-09-25, ikinci tur · _panel_hdr.php):

         dil     → mobil başlıkta, hamburgerin solunda (§ DİL SEÇİMİ)
         profil  → mobil menü listesinin sondan ikinci satırı
         çıkış   → mobil menü listesinin son satırı
         tur     → KARŞILIĞI YOK. Kullanıcı kararıyla kaldırıldı ("tur -
                   user - çıkış ikonları da olmasın mobilde") ve yerine
                   başka bir başlatıcı konmadı, yani turu açmanın tek yolu
                   masaüstü. Bir onboarding yardımcısı olduğu için hiçbir
                   ekranı erişilemez bırakmıyor.

       ARADAKİ TUR: dördü bir süre mobil menünün dibindeki tek satırlık
       araç şeridinde duruyordu (.pnl__drw_araclar); o blok aynı gün
       kaldırıldı, gerekçesi § 24c'nin menü satırları bölümünde yazılı. */
    .pnl__ust_sag {
        display: none;
    }

    /* Yan menünün göster/gizle düğmesi (§ 24a-2): telefonda yan menü hiç
       yok, gezinme drawer'da; şeridin kutusu da yok, düğme içeriğin üstünde
       tek başına asılı kalırdı. */
    .pnl__yan_dgm {
        display: none;
    }

    /* SAYFA ADI — İÇERİĞİN İLK SATIRI  —  2026-09-25.

       Gerekçenin tamamı panel/_panel.php'de (§ TELEFONDA SAYFA ADI): şerit
       mobilde kutusuz, h1 görsel olarak gizli ve konum izi kaldırılmış —
       telefonda sayfa adı ekranda hiç yoktu.

       ÖLÇÜ ŞERİTTEKİ BAŞLIKLA AYNI DİLDE ama bir ton küçük: .pnl__baslik
       masaüstünde 1.25rem/700 ve 64 piksellik bir şeridin içinde logoyla
       yarışıyor. Burada komşusu içerik kartları; 1.15rem yeterince baskın
       ve altındaki .hsp__h2 bölüm başlıklarının (1rem civarı) üstünde
       kalıyor, yani başlık sırası gözle de okunuyor.

       ⚠ KIRPMA YOK, SARMA VAR. Şerittekinin nowrap + ellipsis olması
       ZORUNLUYDU (şerit sabit yükseklikte, yan menünün yapışma ofseti ondan
       türetiliyor — § 24b). Burada öyle bir bağ yok: 320 piksellik ekranda
       Almanca "Veröffentlichungen" ikinci satıra geçiyor, kırpılmıyor.

       ALT BOŞLUK 1rem: altındaki ilk blok kart ya da paragraf oluyor ve
       ikisinin de kendi üst boşluğu yok (.pnl__icerik'in dolgusuna
       dayanıyorlar). ÜST BOŞLUK YOK — kolonun 1rem'lik dolgusu zaten
       başlığı yapışık başlıktan ayırıyor. */
    .pnl__mbaslik {
        display: block;
        margin: 0 0 1rem;
        color: var(--ink);
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: -.02em;
        overflow-wrap: anywhere;
    }

    .pnl__icerik,
    .pnl__telif {
        padding-inline: 1rem;
    }
}

/* --------------------------------------------------------------------------
   24c-2 · KALDIRILDI  —  2026-09-25 (ikinci tur, kullanıcı kararı)

   Burada 330 pikselin ALTINDA mobil menünün araç satırını tek satır tutan
   bir blok vardı: aralık .5 → .375rem, dil düğmesinin dolgusu daraltılıyor,
   caret gizleniyor. İçerik 249,1 → 216,2 piksele iniyor ve satır 300
   piksele kadar bölünmeden duruyordu (headless tarayıcıda ölçülmüştü,
   kazanç 325-300 aralığıydı: iPhone SE 1. nesil ve eski Android).

   ⚠ BLOK KUSURLU DEĞİLDİ, KORUDUĞU DÜZEN KALKTI. Araç satırının kendisi
   (.pnl__drw_araclar: dil kapsülü + tur/profil/çıkış daireleri) aynı gün
   kullanıcı kararıyla kaldırıldı — dil başlığa döndü, profil ve çıkış menü
   listesinin son iki satırı oldu, tur mobilde hiç basılmıyor (gerekçe
   panel/_panel_hdr.php § ARAÇ SATIRI KALDIRILDI). Geride sarması gereken
   bir flex satırı yok.

   DAR EKRAN SORUNU DA YOK: yeni satırlar tam genişlikte ve alt alta, yani
   280 piksellik bir ekranda da bölünecek bir şey yok. Başlıktaki dil
   düğmesi ise § 5b'nin kompakt kuralına düşüyor (caret orada BÜTÜN telefon
   genişliklerinde zaten gizli, aynı yer kısıtı gerekçesiyle) — yani bu
   bloğun asıl kazancı olan 16 piksel oradan geliyor.

   Blok boş bir @media olarak bırakılmadı: kuralsız bir medya sorgusu
   okuyucuya "burada bir şey vardı" demiyor, bu not diyor.
   -------------------------------------------------------------------------- */

/* --- 24d · Pano  (.pnl__hos, .pnl__ozet, .pnl__blok, .pnl__kota)
       panel/index.php · panel/_panel.php ---------------------------------

   ⚠ 2026-09-25'TE ÜÇ BİLEŞEN SİLİNDİ (kullanıcı isteği, her biri ayrı ayrı):
     .pnl__sira*   "Sıradaki gönderiler" listesi
     .pnl__hizli   "Hızlı işlemler" düğme satırı
     .pnl__tumu    o iki bölümün "tümünü gör" bağlantısı

     Üçünün de markup'ı panel/index.php'den kalktı ve sınıflar depoda 0 kez
     geçiyor (denetlendi: class="…" özniteliklerinin içinde arandı, yorum
     metinleri sayılmadı — bu dosyada yorumlar sınıf adlarını bolca anıyor ve
     kaba bir arama her ölü sınıfı "kullanımda" gösteriyor).

   ⚠ .pnl__kota BURAYA EKLENDİ ve okuyucusu panel/index.php DEĞİL
     panel/_panel.php: yan menünün dibindeki medya kotası kartı. Aynı turda
     panodaki "Kalan medya alanı" özet kartı silindiği için kota bilgisi
     kabuğa taşındı ve artık her panel ekranında görünüyor.

   ⚠ ÖNCEDEN ÖLÜ OLAN SINIFLAR BU TURDA SİLİNMEDİ: .pnl__cikis, .pnl__kapat,
     .pnl__paket, .pnl__iz_liste, .pnl__iz_oge de aynı taramada 0 kullanım
     verdi ama bu turun kapsamı dışında — onları silmek ilgisiz ekranları
     etkileyebilir ve ayrı bir doğrulama turu gerektirir.

   Pano sıfırdan yeniden kuruldu ve bu bölüm onunla birlikte büyüdü. Eski
   hâli 66 satırdı ve yalnızca bir karşılama paragrafı + dört kutu
   biçimlendiriyordu; panonun geri kalanı yoktu.

   ⚠ .ay-card KULLANILMIYOR — ne kartlarda ne bloklarda. Bileşen (theme.css
   § 8) imleç değdiğinde 2 piksel KALKIYOR ve uzun bir gölge açıyor. Tanıtım
   sayfasında doğru: orada kart bir teklif. Panoda kart bir SAYI; yedi
   kutunun imleç gezdikçe tek tek zıpladığı bir ekran, okunan bir ekran
   değil. Kartlar bağlantı olduğu için geri bildirim gerekiyor ama
   dozu düşük: çerçeve rengi + zemin (aşağıda).

   ÖLÇÜ/RENK DEĞERLERİ theme.css tokenlarından; yeni token açılmadı.
   ---------------------------------------------------------------------- */

/* --- Karşılama satırı + paket hapı -------------------------------------- */

/* Solda karşılama, sağda paket hapı. space-between ile: aradaki mesafe
   pencere genişliğine bırakılıyor, sabit bir boşluk verilmiyor.

   align-items: baseline — hap 24 piksel yüksekliğinde, paragraf ise
   --fs-lg. 'center' verildiğinde hap paragrafın ortasına hizalanıp
   metnin taban çizgisinin altına düşüyordu.

   Dar ekranda sarıyor (flex-wrap) ve hap alt satıra geçiyor; nowrap ile
   paragraf 320 piksellik ekranda kelime kelime kırılıyordu. */
.pnl__hos {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

/* ⚠ .pnl__giris PANONUN DEĞİL, BÜTÜN PANELİN giriş paragrafı: hesaplar,
   bağlantılar, gönderiler, agent ve ayarlar ekranları da bu sınıfı
   kullanıyor (her biri kendi lead metniyle). Gelen kutusu (dm.php),
   yorumlar ve abonelik ekranlarının giriş cümlesi .ay-alert--uyari
   şeridine geçti (kullanıcı kararı, 2026-09-26).
   Alt boşluğu O YÜZDEN DURUYOR — kaldırılsaydı yedi ekranda başlık ile
   içerik birbirine girerdi.

   Panoda boşluğu sarmalayıcı veriyor (.pnl__hos'un margin-bottom'u), bu
   yüzden yalnızca o kapsamda sıfırlanıyor. */
.pnl__giris {
    margin: 0 0 1.25rem;
    color: var(--ink-soft);
    font-size: var(--fs-lg);
}
.pnl__hos .pnl__giris {
    margin-bottom: 0;
}

/* --- SAYFA DÜZEYİNDEKİ ŞERİDİN BOŞLUĞU  —  ÖLÇÜLMÜŞ KUSUR (2026-09-25)

   Ekranda görüldü (panel/medya.php "2 dosya yüklendi.", panel/gonderiler.php
   "Taslak kaydedildi.", panel/ayarlar.php "Bilgileriniz kaydedildi."): şeridin
   ALT kenarı ile hemen altındaki cümle BİRBİRİNE YAPIŞIK duruyordu. Aynı kusur
   üst kenarda da vardı (panel/baglantilar.php künye kartı → "kapsam dışı"
   şeridi) ve panoda ÜST ÜSTE BASILAN ŞERİTLER arasında da (doğrulama +
   havale + deneme şeridi tek blok gibi görünüyordu).

   SEBEP TEK: .ay-alert margin: 0 taşıyor (theme.css § 9 — "boşluğu kolonun
   gap'i ya da komşusu verir") ve .pnl__icerik bir flex kolonu DEĞİL, düz blok
   akışı — gap yok. Komşular ise boşluğu şeridin vereceğini varsayıyor:
   .gdr__ust, .tkv__ust, .gdr__lead, .pnl__giris, .gdr__geri, .gdr__kilit,
   .bgl__yerlesim, .bgl__neden, .dm__akis, .dm__cevap hepsi margin-top: 0.
   İki taraf da beklediği için toplam 0 kalıyordu.

   ⚠ KURAL 30 DOSYAYA 204 KEZ BASILAN BİLEŞENE DEĞİL, YALNIZCA SAYFA DÜZEYİNE
   BAKIYOR: seçici '.pnl__icerik >' ile doğrudan çocuk. Kart, satır, form ya
   da açılır panel İÇİNDEKİ şeritler (örn. .yrm__tani, .bgl__akis adımları)
   boşluğunu kendi kapsayıcısından alıyor ve o kapsayıcılar çoğu zaman flex
   kolonu — onlara dokunulsa iki kat boşluk olurdu.

   ⚠ ESKİ KURAL (.ay-alert + .pnl__giris) BURADAN KALKTI. Tek bir komşuyu adıyla
   düzeltiyordu; aynı kusur ölçüldüğünde on bir komşuda daha çıktı. Komşu komşu
   yazmak her yeni ekranda sessizce kaçırılacak bir liste demekti.

   ⚠ KOMŞUSUNUN KENDİ ÜST BOŞLUĞU OLAN EKRANLARDA İKİ KAT BOŞLUK OLMUYOR:
   şerit de komşusu da normal akışta blok düzeyinde, yani aradaki iki margin
   ÇÖKÜYOR (CSS 2.1 § 8.3.1) ve büyüğü kazanıyor. display: flex şeridin KENDİ
   çocuklarıyla çökmeyi engelliyor, KARDEŞİYLE çökmeyi değil. Pratik sonuç:
   .hsp__bolum (2rem), .pnl__blok (1.5rem) ve .gdr__bolum (1.75rem) olduğu gibi
   kalıyor; yalnızca gerçekten 0 olan yerler 1.25rem'e çıkıyor.

   1.25rem: .pnl__giris'in alt boşluğuyla aynı — şerit metin akışında simetrik
   duruyor. Kalıp .ay-alert + .hvl__lead'de de aynı (§ 23h). */
.pnl__icerik > .ay-alert {
    margin-block: 1.25rem;
}

/* --- Pano · deneme şeridi (.pnl__deneme) — KULLANICI KARARI (2026-09-27):
   "x yerine alert içinde sağ kısmında paketi seç butonu gelsin."
   Metin solda esniyor, düğme sağda; çarpı yok (panel/index.php →
   data-ay-kapat="yok"). align-items: center — tek satırda metin ile 32px
   düğme aynı eksende. Metin sığmazsa düğme ALTA iniyor (flex-wrap), metin
   kelime kelime kırılmıyor: min-width metne nefes payı bırakıyor. */
.pnl__deneme {
    align-items: center;
    flex-wrap: wrap;
    gap: .625rem 1rem;
}
.pnl__deneme > p {
    flex: 1 1 16rem;
    min-width: 0;
    margin: 0;
}
.pnl__deneme_btn {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* ⚠ İÇERİK KOLONUNUN İLK ÖĞESİ OLAN ŞERİT ÜST BOŞLUK ALMIYOR — ve bu ':first-child'
   İLE YAZILAMIYOR: .pnl__icerik'in ilk çocuğu HER ZAMAN .pnl__mbaslik (telefondaki
   sayfa adı, masaüstünde display: none ama belgede duruyor — panel/_panel.php).
   Ardından çoğu sayfada ay_stil()'in <style> bloğu geliyor (CSP satır içi style
   yasakladığı için, gerekçe _head.php). Yani şerit hiçbir zaman ':first-child'
   değil; ':not(:first-child)' ile yazılsa kural her şeride uygulanır ve sayfanın
   tepesinde .pnl__icerik'in 1.5rem dolgusunun ÜSTÜNE 1.25rem daha binerdi.
   Onun yerine iki gerçek ilk konum adıyla sıfırlanıyor.
   Telefonda boşluk kaybolmuyor: .pnl__mbaslik orada görünür ve kendi 1rem alt
   boşluğunu taşıyor (§ 24c). */
.pnl__icerik > .pnl__mbaslik + .ay-alert,
.pnl__icerik > .pnl__mbaslik + style + .ay-alert {
    margin-block-start: 0;
}

/* Sayfanın son öğesi şeritse alt boşluk gerekmiyor — kolonun dolgusu ve
   telif satırının kendi üst dolgusu zaten var. */
.pnl__icerik > .ay-alert:last-child {
    margin-block-end: 0;
}

.pnl__kod {
    display: inline-block;
    margin-inline-start: .5rem;
    padding: .1rem .45rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* PAKET HAPI — paket seçim ekranına bağlı.

   Paket bilgisi eskiden sayfanın DİBİNDE tek satırlık bir paragraftı
   (.pnl__paket) ve hiçbir yere bağlı değildi. Yukarı, karşılama satırının
   sağ ucuna taşındı; eski kural silindi çünkü tek kullanıcısı o satırdı.

   min-height 24px: hap tek başına duran bir bağlantı, cümle içinde değil —
   WCAG 2.5.8'in 'inline' istisnası geçmiyor (aynı gerekçe § 24e'deki
   .hsp__kaldir ve § 24n'deki .pnl__bekleyen_oge için de yazılı).

   Hover'da dolu marka zemini: hapın durağan hâli zaten renkli
   (--brand-soft) olduğundan yalnızca çerçeve rengini değiştirmek fark
   edilmiyordu. */
.pnl__plan {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .2rem .7rem;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--t-base) var(--ease),
                color var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease);
}
.pnl__plan:hover,
.pnl__plan:focus-visible {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
}

/* --- Özet kartları ------------------------------------------------------ */

/* SABİT DÖRT KOLON  —  2026-09-25 · KULLANICI KARARI
   "kartları da col-md-3 şeklinde olsun. bir satırda 4 kart olsun"

   ÖNCEKİ HÂL auto-fit + minmax(200px, 1fr) idi ve yorumu "sabit kolon sayısı
   verilmedi, bu karar kendini ödedi — kart sayısı dörtten yediye çıktı"
   diyordu. O gerekçe ARTIK YOK: yedi karttan ikisi (medya alanı ve abonelik)
   aynı turda silindi, geriye dört sabit kart kaldı (agent kartı koşullu
   beşinci). Kart sayısı sabitlendiği an auto-fit'in getirisi de bitiyor;
   getirdiği belirsizlik ise duruyordu — içerik 830 pikselin altına
   indiğinde satır sessizce üçe düşüyordu.

   col-md-3 İSTEĞİ IZGARA KOLONU OLARAK KARŞILANDI, Bootstrap sınıfı
   EKLENMEDİ: .pnl__ozet bir CSS grid ve markup'a row/col sarmalayıcıları
   sokmak aynı ekranda iki ızgara dili demekti. "Bir satırda dört kart"
   sonucu birebir aynı.

   ⚠ TELEFONDA İKİYE DÜŞÜYOR (aşağıdaki 640px bloğu) ve eşik ÖLÇÜMDEN geldi.
     Dört kolon bütün genişliklerde tek satırda duruyor, metin taşması
     yalnızca çok dar ekranda başlıyor (ölçüldü, içerik genişliği → kart
     genişliği → taşan etiket sayısı):

         1440 → 268px  ·  1280 → 228px  ·  1024 → 164px   taşma yok
          899 → 194px  ·   768 → 162px  ·   640 → 130px   taşma yok
          560 → 110px                                     taşma yok
          420 →  75px                                     4 etiket TAŞIYOR

     En dar dört-kolon hâli 901 pikselde (133px): yan menü 248px hâlâ
     duruyor ve içeriğe 605 piksel kalıyor. 899'da menü gizlendiği için kart
     yeniden 194 piksele çıkıyor — yani kırılım pencere genişliğiyle DOĞRUSAL
     DEĞİL, bunu varsaymak yanlış olurdu.

   Alt boşluk yok: kartlardan sonra gelen her blok kendi üst boşluğunu
   taşıyor (.hsp__bolum). İkisi birlikte iki kat boşluk demekti. */
.pnl__ozet {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.pnl__kart {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    /* min-width: 0 — .ay-card'da var (theme.css § 8), burada yoktu.
       auto-fit ızgarasında kart 200 pikselde duruyor ama içindeki
       1.6rem'lik sayı ya da uzun bir alt satır kartı şişirip satırı
       taşırıyordu: grid öğesinin varsayılan min-width'i 'auto', yani
       içeriğinden küçülmeyi reddediyor. */
    min-width: 0;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease);
}

/* Bağlantı olan kartlarda geri bildirim. Seçici a.pnl__kart — kota kartı
   <div> ve tıklanamıyor (medya kütüphanesi ekranı henüz yok); çıplak
   .pnl__kart:hover yazılsaydı o kart da tıklanabilir görünürdü.

   Kalkma YOK, yalnızca zemin ve çerçeve: gerekçe bölüm başında.
   @media (hover: hover) — dokunmatikte :hover parmak kalktıktan sonra
   kartın üzerinde kalıyor ve kart seçili gibi donuyor (aynı koruma
   theme.css § 3 ve § 8'de de var). */
@media (hover: hover) and (pointer: fine) {
    a.pnl__kart:hover {
        border-color: var(--brand-line);
        background: var(--brand-soft);
    }
}
a.pnl__kart:focus-visible {
    border-color: var(--brand);
}

/* Sayı solda, ikon sağ üstte. Kartların sayıları farklı uzunlukta
   ("3", "1,2 GB", "45 gün") ve ikon sağda sabit bir çapa veriyor: yedi
   kart yan yana dizildiğinde göz sağ kenarı tarayarak satırı okuyabiliyor.

   align-items: center — ikon 2rem, sayı 1.6rem'lik satır yüksekliğinde;
   'baseline' verildiğinde ikon kutusu sayının taban çizgisine oturup
   yukarı taşıyordu. */
.pnl__kart_bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-width: 0;
}

/* İkon kabı. Menü ikonlarının aynısı (.pnl__ikon, § 24a → ay_pnl_ikon)
   yumuşak marka zeminli bir karenin içinde; ayrı bir ikon seti ya da
   ayrı bir SVG boyutu açılmadı.

   aria-hidden PHP tarafında: ikonun anlamı kartın etiketinde yazıyor. */
.pnl__kart_sim {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand);
}

.pnl__kart_deger {
    min-width: 0;
    color: var(--brand);
    font-size: 1.6rem;
    font-weight: 680;
    line-height: 1.15;
    /* Sayılar sabit genişlikte: 9 → 10 geçişinde kart içeriği zıplamasın. */
    font-variant-numeric: tabular-nums;
    /* "1,2 GB" ve "45 gün" gibi değerler iki kelime: kartın dar hâlinde
       ikinci kelime alt satıra düşerse kart yükselip satırdaki diğer
       kartlarla hizası bozuluyor. */
    white-space: nowrap;
}
.pnl__kart_ad {
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}
.pnl__kart_alt {
    margin-top: .15rem;
    color: var(--ink-mute);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

/* KOTA UYARISI. Eşik ayarlar tablosundan geliyor (kota_uyari_yuzde), sınıf
   PHP'de takılıyor. Renk TEK taşıyıcI değil: yüzde alt satırda ayrıca
   yazıyor (WCAG 1.4.1). Tonlar § 24f'deki --st-bek-* tokenlarından —
   "dikkat" ile "hata" ayrı şeyler ve kota dolmak üzere olmak bir hata
   değil. */
.pnl__kart--uyari {
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
}
.pnl__kart--uyari .pnl__kart_sim {
    background: var(--surface);
    color: var(--st-bek-ink);
}
.pnl__kart--uyari .pnl__kart_alt {
    color: var(--st-bek-ink);
}

/* KOTA ÖLÇERİ.

   § 23i'deki şifre gücü çubuğuyla aynı dil (raylı ince çubuk, --brand-tint
   ray) ama tek parça: orada dört kural sayılıyor, burada tek bir oran var.
   Ayrı bir bileşen yazılmadı, iki kural.

   GENİŞLİK BURADA DEĞİL: oran PHP'de hesaplanıyor ve nonce'lu stil
   bloğunda sınıf kuralı olarak basılıyor (ay_stil → .pnl__olcum_dolu--<n>).
   style="" özniteliği CSP'de yasak — öznitelikler nonce/hash ile
   izinlenemiyor (bkz. rol.md ve _head.php § ay_stil). Kural hiç gelmezse
   çubuk boş kalıyor, taşmıyor.

   overflow: hidden — dolu parçanın kendi köşe yarıçapı yok, rayın
   yarıçapını miras alıyor; %3 gibi küçük bir oranda border-radius: inherit
   dolu parçayı bir noktaya çeviriyordu. */
.pnl__olcum {
    display: block;
    height: 5px;
    margin-top: .45rem;
    border-radius: var(--r-pill);
    background: var(--brand-tint);
    overflow: hidden;
}
.pnl__olcum_dolu {
    display: block;
    width: 0;
    height: 100%;
    background: var(--brand);
}
.pnl__kart--uyari .pnl__olcum {
    background: var(--surface);
}
.pnl__kart--uyari .pnl__olcum_dolu {
    background: var(--st-bek-ink);
}

/* --- Pano bloğu (kurulum adımları) ------------------------------------- */

/* Beyaz kart kabuğu. § 24o'daki .ayr__bolum'e çok benziyor ama ondan
   AYRI: köşe yarıçapı --r-lg (özet kartlarıyla aynı çizgide durması için),
   ayarlar bloğu ise --r-md. Aynı sınıfı paylaşsalardı biri değiştiğinde
   diğeri sessizce kayardı.

   Bölüm başlığı, sayacı ve boş durum paragrafı YENİDEN TANIMLANMIYOR:
   § 24e'deki .hsp__baslik_satir / .hsp__h2 / .hsp__sayac / .hsp__bos
   kullanılıyor (aynı yaklaşım § 24h ve § 24o'da da var). */
.pnl__blok {
    margin: 1.5rem 0 0;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
}

.pnl__adimlar {
    display: grid;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

.pnl__adim {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

/* Numara ya da onay işareti. İkisi aynı kutuda: tamamlanan adımda numara
   yerini işarete bırakıyor, kutunun ölçüsü değişmiyor ve satırlar
   hizada kalıyor. */
.pnl__adim_no {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pnl__adim_no .ay-ico {
    font-size: 12px;
}

/* Tamamlanan adım: yeşil işaret + soluk metin. Renk tek taşıyıcı değil,
   satırın sonunda "tamamlandı" da yazıyor (WCAG 1.4.1). */
.pnl__adim--ok .pnl__adim_no {
    border-color: var(--st-ok-line);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
}
.pnl__adim--ok .pnl__adim_ad {
    color: var(--ink-mute);
}

.pnl__adim_ad {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Bitmeyen adım bir bağlantı ve satırda tek başına duruyor: 24 piksellik
   dokunma hedefi (WCAG 2.5.8), § 24e'deki .hsp__kaldir ile aynı kalıp. */
a.pnl__adim_ad {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* "tamamlandı" ADIN YANINDA KÜÇÜK BİR HAP — 2026-09-27 · pano iyileştirmesi.
   Eskiden margin-inline-start: auto ile satırın SAĞ UCUNA itiliyordu: 1600
   piksellik ekranda adım adıyla arasında ~1000 piksel boşluk kalıyor, göz
   hangi etiketin hangi adıma ait olduğunu satırı tarayarak buluyordu;
   telefonda da ayrı bir satıra düşüp listeyi uzatıyordu. Hap adın hemen
   yanında, onay işaretiyle aynı yeşil tonda. Metin duruyor (WCAG 1.4.1). */
.pnl__adim_durum {
    flex: 0 0 auto;
    padding: .05rem .5rem;
    border: 1px solid var(--st-ok-line);
    border-radius: var(--r-pill);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* KURULUM İLERLEME ÇUBUĞU (panel/index.php → <progress class="pnl__ilerleme">).
   Yerel öğe: oran value/max'te, genişlik için satır içi stil gerekmiyor.
   Ray --brand-tint, dolu kısım kota ölçeriyle (§ .pnl__olcum) aynı marka
   rengi. WebKit ve Gecko sözde öğeleri ayrı yazılmak ZORUNDA — tek kurala
   virgülle birleştirilirse tanımadığı seçici yüzünden tarayıcı bütün kuralı
   düşürür. */
.pnl__ilerleme {
    display: block;
    width: 100%;
    height: 6px;
    margin: .75rem 0 .85rem;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--brand-tint);
    color: var(--brand);
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
}
.pnl__ilerleme::-webkit-progress-bar {
    border-radius: var(--r-pill);
    background: var(--brand-tint);
}
.pnl__ilerleme::-webkit-progress-value {
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--brand), var(--brand-accent));
}
.pnl__ilerleme::-moz-progress-bar {
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--brand), var(--brand-accent));
}

/* SATIRDA TEK KALAN KART TÜM SATIRI KAPLIYOR — 2026-09-27 · pano iyileştirmesi.
   Dört kolon kuralı (kullanıcı kararı, yukarıda) duruyor; ama koşullu beşinci
   kart (Agent) ikinci satırda TEK BAŞINA, çeyrek genişlikte kalıyor ve sağında
   üç kartlık boş alan bırakıyordu. 4n+1 ve son çocuk olan kart satırı
   kaplıyor ve yatay diziliyor: ikon + sayı solda, etiket yanında, alt satır
   sağ uçta. Kart sayısı değişirse kural kendiliğinden uyuyor (9. kart vb.). */
.pnl__ozet > .pnl__kart:nth-child(4n+1):last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
}
.pnl__ozet > .pnl__kart:nth-child(4n+1):last-child .pnl__kart_bas {
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.pnl__ozet > .pnl__kart:nth-child(4n+1):last-child .pnl__kart_alt {
    margin: 0;
    margin-inline-start: auto;
}

/* ⚠ 640px — PANELDE SATIR KIRILIMININ TEK EŞİĞİ (gerekçe § 24e'nin sonunda).
   Özet kartları dörtten ikiye düşüyor.

   ⚠ .pnl__sira_oge / .pnl__sira_zaman KURALLARI 2026-09-25'te ÇIKARILDI:
     "Sıradaki gönderiler" bölümü kullanıcı isteğiyle silindi, o iki sınıfın
     markup'ta okuyucusu kalmadı. */
@media (max-width: 640px) {
    /* DÖRT KOLON TELEFONDA İKİYE. Eşiğin gerekçesi ölçümde: 420 piksellik
       ekranda dört kolon kartı 75 piksele indiriyor ve dört etiketin hepsi
       taşıyor ("Planlanmış gönderi" sığmıyor). İki kolonda aynı ekranda kart
       178 piksele çıkıyor. Ölçümün tamamı .pnl__ozet kuralının yanında. */
    .pnl__ozet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pnl__blok {
        padding: .9rem 1rem;
    }
    /* Adım satırı telefonda SARMIYOR (eskiden flex-wrap vardı ve "tamamlandı"
       kendi satırına düşüyordu). Hap adın yanında kalıyor; sığmazsa adın
       KENDİSİ kelime kelime ikinci satıra geçiyor (min-width: 0 +
       overflow-wrap, .pnl__adim_ad). Numara kutusu ilk satıra hizalı. */
    .pnl__adim {
        align-items: flex-start;
    }
    .pnl__adim_durum {
        margin-top: .1rem;
    }

    /* İki kolonda da tek kalan kart (tek sayılı son çocuk) satırı kaplıyor —
       masaüstündeki 4n+1 kuralının telefon karşılığı. Yatay dizilim
       masaüstündeki kuraldan geliyor; burada yalnızca kolon. */
    .pnl__ozet > .pnl__kart:nth-child(odd):last-child {
        grid-column: 1 / -1;
    }

    /* Telefonda kartlar daha sıkı: iki kolonda 178 piksellik kartın içinde
       masaüstü dolgusu (1.1rem · 1.25rem) ve 16px'lik aralık, dört kart için
       ekranın yarısını harcıyordu. Sayı da bir kademe küçük. */
    .pnl__ozet {
        gap: .75rem;
    }
    .pnl__kart {
        padding: .9rem 1rem;
    }
    .pnl__kart_deger {
        font-size: 1.4rem;
    }

    /* Deneme şeridinin düğmesi metnin altına indiğinde SOLA hizalı: sağa
       itilmiş tek düğme, okuma yönünden kopuk görünüyordu. */
    .pnl__deneme_btn {
        margin-inline-start: 0;
    }
}

/* --- 24d2 · Pano raporları: grafik · sistem durumu · dağılım
       panel/index.php ------------------------------------------------------

   ⚠ İKİ BÖLÜM 2026-09-25'te KULLANICI İSTEĞİYLE KALDIRILDI:

     ENTEGRASYON DURUMU  .pnl__ent* kuralları (liste, satır, durum şeridi,
                         hap, eylem düğmesi ve 640px kırılımı)
     SİSTEM DURUMU       .pnl__durum* kuralları (ızgara, hücre, ışık, değer
                         ve dört ton değiştiricisi)

   İkisinin de markup'ı, veri katmanı ve dil anahtarları (pnl.ent.* ·
   pnl.sistem.*, yedi dilde) aynı turlarda silindi.

   ⚠ İLK TURDA SİSTEM DURUMU KALMIŞTI ve burada "hücre kuralları silinmemeli"
     diye yazılıydı: entegrasyon kartı gidince veri katmanı sistem durumunun
     "Entegrasyonlar" hücresi için bırakılmıştı. İkinci turda o kart da
     silindiği için veri katmanı ($entegre sorgusu, ton döngüsü,
     $entHazir/$entToplam/$entSorun) okuyucusuz kaldı ve o da kalktı. Yani
     zincirin tamamı: kart → hücre → sorgu.

   ⚠ SİLİNEN SINIFLARIN TAM ADLARI BU YORUMDA BİLEREK YAZILMIYOR (yukarıda
     yıldızlı ön ek kullanıldı). Sebep teşhis aracı: araclar/surum-imzalari.php
     bu dosyada "olmaması gerekenler" listesinde o adları arıyor ve CSS
     yorumları ayıklanmadığı için yorumda geçen bir ad da BULUNMUŞ sayılıyor —
     yani güncel dosya "eski sürüm" ilan edilirdi. Bu tam olarak oldu:
     ilk yazımda hücre sınıfının tam adı burada geçiyordu ve imza boşa
     geçiyordu. Aynı uyarı § 24c'de de yazılı.

   BÖLÜMDE KALANLAR: gönderim grafiği (.pnl__cizim, .pnl__cbk_*),
   ölçüt ızgarası (.pnl__olcut*), platform dağılımı (.pnl__dgl*) ve etkileşim
   raporu. Bölüm adı da buna göre kısaldı.

   ⚠ BU NOT YORUMUN İÇİNDE, KENDİ BLOĞUNDA DEĞİL — ve sebebi pahalıya geldi.
   İlk yazımda not kendi kapanış işaretiyle bitiriliyordu; oysa değiştirilen
   satırlar ALTINDA 45 satır daha süren UZUN BİR YORUMUN AÇILIŞIYDI. Erken
   kapanış o gövdeyi canlı CSS'e çevirdi ve tarayıcı bu noktadan sonrasını
   ayrıştırmayı BIRAKTI: 1663 üst düzey kuralın yalnızca 669'u yükleniyordu,
   yani §24d2'den aşağısının tamamı (rapor kutuları, hesaplar, gönderi
   listesi, takvim, agent, medya) biçimsiz kalıyordu.

   ⚠ İŞARET SAYMAK BU KUSURU GÖREMEZ: erken kapanış açılış ve kapanış
   işaretlerinin SAYISINI değiştirmiyor (birer tane ikisinden de eklenir),
   yani sayaç "dengeli" der. Kapanmamış yorum arayan durum bilgili tarayıcı da
   göremez — buradaki sorun tersi, FAZLA kapanış. Üstelik düzeltmenin ilk
   denemesinde aynı tuzağa BİR KEZ DAHA düşüldü: notun içinde örnek olarak
   yazılan kapanış işareti yorumu yine orada bitirdi. Bu yüzden bu bloğun
   metninde yorum işaretleri hiç geçmiyor, adlarıyla anılıyor.

   TEK GÜVENİLİR DENETİM: tarayıcının ayrıştırdığı kural sayısını okumak
   (document.styleSheets[n].cssRules.length) ve dosyadaki en üst düzey açılış
   sayısıyla karşılaştırmak. İkisi eşit değilse CSS bir yerde kesilmiştir.
   araclar/ altındaki bir betikle değil, gerçek tarayıcıyla ölçülmeli.

   KULLANICI KARARI (2026-09-25): "grafik ve raporlar da olabilir… gönderim
   grafiği, sistem durumu (status), entegre durumu ve kontrolü. raporlama,
   grafik ve proje hakkındaki gelişmiş genel bakış ekranı gibi olacak".

   AYRI ALT BÖLÜM, § 24d'NİN İÇİNE KARIŞTIRILMADI: yukarısı panonun
   "şimdi ne yapacağım" katmanı (kartlar, adımlar, kuyruk), burası
   "sistem çalışıyor mu" katmanı. İkisi aynı ekranda ama farklı sorular
   cevaplıyor ve bakımları da ayrı yürüyor.

   --------------------------------------------------------------------------
   ⚠ BU BÖLÜMDE HİÇBİR ÖLÇÜ DİNAMİK DEĞİL — VE OLMAMASI ŞART

   Çubuk yükseklikleri (.pnl__cbk_p--y<n>) ve dağılım genişlikleri
   (.pnl__dgl_dolu--g<n>) BURADA TANIMLI DEĞİL: PHP'de hesaplanıp nonce'lu
   bir <style> bloğuna sınıf kuralı olarak basılıyorlar (panel/index.php →
   ay_stil). Sebep CSP: style-src'de 'unsafe-inline' yok ve öznitelikler
   nonce/hash ile izinlenemiyor, yani style="height:40%" çalışmıyor
   (gerekçenin tamamı _head.php § ay_stil ve config/ayarlar.php'de).

   Kural hiç gelmezse çubuk 0 yükseklikte / 0 genişlikte kalıyor, TAŞMIYOR:
   aynı güvenli bozulma kota ölçerinde de var (.pnl__olcum_dolu). Sayılar
   zaten metin olarak da yazıyor, yani çizim kaybolsa da bölüm bilgi
   vermeye devam ediyor (WCAG 1.4.1 — renk ve uzunluk tek taşıyıcı değil).

   --------------------------------------------------------------------------
   NEDEN JS'SİZ, SVG'SİZ

   Grafikler flex/grid kutu ve yüzde yükseklikten ibaret. Denenmeyen iki yol
   ve reddedilme sebepleri:

     KÜTÜPHANE (Chart.js vb.)  script-src'de nonce YOK, yani satır içi
                               başlatma kodu hiçbir koşulda çalışmıyor;
                               js/theme.js'e bileşen + üçüncü bir CDN'i
                               politikaya açmak gerekirdi. Karşılığı yok,
                               buradaki çizimler etkileşimsiz.
     SATIR İÇİ <svg>           viewBox'lı bir çizim ölçeklenirken metin
                               ölçüsünü de ölçekliyor; 30 çubuklu bir seride
                               etiketler telefonda 5 piksele iniyordu.
                               Kutu modeli mobilde kendiliğinden doğru
                               davranıyor ve etiket normal metin kalıyor.

   ÖLÇÜ/RENK DEĞERLERİ theme.css tokenlarından ve § 24f'nin --st-*
   tokenlarından; yeni token açılmadı.
   ---------------------------------------------------------------------- */

/* Bölüm başlığının HEMEN altındaki beyaz blok.

   .pnl__blok kendi üst boşluğunu taşıyor (1.5rem) çünkü kurulum adımları
   bloğu başlıksız ve doğrudan şeritlerin ardına geliyor. Rapor bölümlerinde
   ise blok bir .hsp__baslik_satir'ın altında duruyor ve o satırın kendi alt
   boşluğu (.75rem) zaten var: ikisi üst üste binince başlık ile kutu
   arasında 36 piksel açılıyordu. */
.pnl__blok--ilk {
    margin-top: 0;
}

/* --- Aralık sekmeleri (7 / 30 / 90 gün) --------------------------------- */

/* Sekmelerin kendisi .gdr__sekme (§ 24f, gönderi süzgeci): aynı iş, aynı
   görünüm, tek kaynak. Burada yalnızca SARMALAYICI var — gönderi
   süzgecinin .gdr__suzgec kutusu 1rem alt boşluk taşıyor ve o boşluk
   bölüm başlığının içinde fazla.

   overflow-x: dar ekranda üç hap + başlık aynı satıra sığmazsa sekmeler
   kendi içinde kayıyor; .hsp__baslik_satir sarmaladığı için genelde alt
   satıra düşüyorlar, bu yalnızca emniyet.

   flex: 0 0 auto — .hsp__baslik_satir bir flex satırı ve sarmalayıcı
   büzülürse üç hap birbirine giriyordu. */
.pnl__aralik {
    flex: 0 0 auto;
    display: flex;
    gap: .4rem;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* --- Ölçüt ızgarası (grafik özeti + etkileşim raporu) ------------------- */

/* İKİ YERDE KULLANILIYOR ve bu bilinçli: grafiğin üstündeki dört sayı
   (toplam · oran · ortalama · zirve) ile etkileşim raporunun yedi kutusu
   AYNI ŞEY — etiketli bir sayı. İki ayrı sınıf ailesi açmak, birinin
   dolgusu değiştiğinde diğerinin geride kalması demekti.

   auto-fit + minmax: dört kutu masaüstünde tek satır, telefonda ikiye
   düşüyor. Sabit kolon sayısı yazılsaydı yedi kutulu rapor için ikinci bir
   ızgara gerekirdi. Aynı desen .tkv__ozet (§ 24g) ve .ajn__ozet (§ 24h)'de
   de var.

   9rem: "Günlük ortalama" etiketi Almancada "Tagesdurchschnitt" ve 8rem'de
   iki satıra bölünüyordu. */
.pnl__olcut {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .6rem;
    margin: .75rem 0 0;
}

/* ALT BOŞLUK — YALNIZCA ARDINDAN BİR ŞEY GELİYORSA  ·  2026-09-25
   (kullanıcı: "kartlarının alt kısmı yapışık olmuş. o kısımda ki sorunu
   gider")

   ÖLÇÜLEN KUSUR: ızgaranın alt boşluğu YOKTU ve ardından gelen boş durum
   kutusunun (.hsp__bos_kutu) üst boşluğu da yok — ikisi arasındaki mesafe
   TAM 0 PİKSEL, kutular birbirine yapışık doğuyordu.

   NİYE BUGÜNE KADAR GÖRÜLMEDİ: kusur yalnızca BOŞ SERİDE çıkıyor. Teslim
   kaydı varsa ızgaranın ardından çizim geliyor ve .pnl__cizim kendi üst
   boşluğunu (1rem) taşıdığı için mesafe doğru görünüyor. Yani hatayı
   görebilmek için hiç gönderi yayınlamamış bir hesapla bakmak gerekiyordu —
   tam olarak yeni müşterinin gördüğü ekran.

   ⚠ ':not(:last-child)' ŞART, DÜZ 'margin-bottom' YANLIŞ OLURDU. Aynı ızgara
     ETKİLEŞİM RAPORUNDA da kullanılıyor (.pnl__olcut--genis) ve orada bloğun
     SON çocuğu. Koşulsuz bir alt boşluk o bölümde kutuların altına 16 piksel
     ölü alan eklerdi — bloğun kendi dolgusunun üstüne. Ölçüldü: koşullu kural
     ile rapor bloğunda fazla boşluk 0.

   ÇİZİMLİ HÂL BOZULMUYOR: 1rem alt boşluk ile .pnl__cizim'in 1rem üst boşluğu
   ÇAKIŞIYOR (margin collapsing; .pnl__blok normal bir blok kapsayıcı, BFC
   açmıyor) ve mesafe 16 pikselde kalıyor. Ölçüldü — düzeltme öncesi ve
   sonrası aynı. */
.pnl__olcut:not(:last-child) {
    margin-bottom: 1rem;
}

/* Etkileşim raporu YEDİ kutu: 9rem'de masaüstünde iki satıra bölünüyor ve
   ikinci satırda üç kutu kalıyordu. 7.5rem ile yedisi 1280 piksellik
   panelde tek satıra sığıyor; sayılar kısa (ölçüm değerleri) ve etiketler
   tek kelime. */
.pnl__olcut--genis {
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

/* Hücre GRİ zeminli, beyaz değil: kutular BEYAZ bir bloğun (.pnl__blok)
   içinde duruyor ve beyaz üstüne beyaz yalnızca kenarlıkla ayrılıyordu —
   ekran görüntüsünde kenarlık 1 piksel ve hücreler bloğun içinde
   kayboluyordu. Aynı çözüm .pnl__sira_oge'de de var (§ 24d). */
.pnl__olcut_hucre {
    display: grid;
    gap: .15rem;
    /* min-width: 0 — grid öğesinin varsayılanı 'auto', yani içeriğinden
       küçülmeyi reddediyor; uzun bir sayı hücreyi şişirip satırı
       taşırıyordu (aynı not .pnl__kart'ta da yazılı). */
    min-width: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

/* DİKKAT HÜCRESİ — yalnızca başarı oranı %80 altına düştüğünde.

   Tonlar --st-hata-* (§ 24f): teslim oranının düşmesi "dikkat edilecek bir
   durum" değil, yayının GERÇEKTEN çalışmadığı anlamına geliyor. Renk tek
   taşıyıcı değil — yüzdenin kendisi de yazıyor. */
.pnl__olcut_hucre--dikkat {
    border-color: var(--st-hata-line);
    background: var(--st-hata-bg);
}
.pnl__olcut_hucre--dikkat .pnl__olcut_deger {
    color: var(--st-hata-ink);
}

.pnl__olcut_ad {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
/* İkon etiketten küçük ve aynı soluklukta: burada ikon süs değil, yedi
   kutuyu birbirinden hızlı ayırt etme aracı. Aynı ölçü .ajn__ozet_ad'da da
   kullanılıyor (§ 24h). */
.pnl__olcut_ad .pnl__ikon {
    font-size: 13px;
    color: var(--ink-mute);
}
/* ⚠ ETİKET SARIYOR, KIRPILMIYOR. Kırpma denendi ve § 24h'deki aynı kusuru
   doğurdu: "Günlük ortalama" → "Günlük ort…" olduğunda kutunun işi olan
   "bu sayı neyin sayısı" bilgisi kayboluyor. Sarma hücreyi bir satır
   uzatıyor, ızgara hepsini eşitliyor. */
.pnl__olcut_ad > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 1.25rem — özet kartının 1.6rem'inden KÜÇÜK ve olması gerekiyor: kartlar
   panonun birincil sayıları, bunlar bir raporun içindeki ikincil ölçütler.
   Aynı boyda olsalardı sayfada on bir eşit ağırlıkta sayı olurdu. */
.pnl__olcut_deger {
    min-width: 0;
    color: var(--brand);
    font-size: 1.25rem;
    font-weight: 680;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Zirve hücresindeki tarih ("42 · 18 Eylül"). Kendi satırında ve soluk:
   sayının yanında aynı ağırlıkta dursa iki değer gibi okunuyordu. */
.pnl__olcut_not {
    display: block;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* --- Gönderim grafiği --------------------------------------------------- */

/* ÇİZİM IZGARA, FLEX DEĞİL — ve bu bir düzeltme.

   Flex satırıyla denendi: 'align-items: flex-end' çubukları dibe yaslıyor
   ama öğelerin yüksekliği İÇERİKLERİNDEN geliyor, yani yığının
   'height: 100%' değeri çözülemiyor (yüzde, belirsiz bir yüksekliğe göre
   hesaplanamaz) ve bütün çubuklar 0 pikselde kalıyordu.

   Izgarada satır yüksekliği kapsayıcının sabit yüksekliğinden çözülüyor:
   'grid-auto-flow: column' + 'align-items: stretch' ile her kolon tam
   yükseklikte, içindeki yüzdeler de hesaplanabilir hâle geliyor.

   grid-auto-columns: minmax(7px, 1fr) — kolon sayısı 7, 13 ya da 30
   olabiliyor (aralık ve kova kararına göre, bkz. panel/index.php). 1fr
   hepsini eşitliyor, 7px ise 30 kovalı seride çubuğun görünür kalmasının
   alt sınırı: 30 × 7 + 29 × 2 = 268 piksel ve 360 piksellik telefonda
   içerik alanı ~268-296 piksel. Sığmazsa kapsayıcı yatay kayıyor.

   YÜKSEKLİK SABİT (10rem): çubuklar yüzdeyle ölçülüyor ve kapsayıcının
   yüksekliği içeriğe bağlı olsaydı yüzdelerin dayanağı kalmazdı. */
.pnl__cizim {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(7px, 1fr);
    align-items: stretch;
    gap: 2px;
    height: 10rem;
    margin: 1rem 0 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Kolon: üstte yığın (kalan yer), altta etiket (içeriği kadar).
   minmax(0, 1fr) — çıplak '1fr' minimum olarak 'auto' alıyor ve yığın
   kolonu içeriğinden büyütebiliyordu. */
.pnl__cbk {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .3rem;
    min-width: 0;
}

/* YIĞIN. justify-content: flex-end ile parçalar dibe yaslı; dikey kolonda
   ilk çocuk YUKARIDA kalıyor, bu yüzden PHP hata parçasını başarılıdan
   ÖNCE basıyor (panel/index.php) — kırmızı çubuğun tepesi göze çarpsın.

   RAY (--brand-tint zemin) HER KOLONDA VAR ve gerekiyor: teslim olmayan
   günde yığın tamamen boş kalıyor ve ray olmadan o kolon çizimde hiç yok
   gibi görünüyordu. Ray "o gün vardı, bir şey olmadı" demenin tek yolu.

   max-width: 3rem — 7 günlük seride kolon masaüstünde ~135 piksel
   genişliğinde çıkıyor ve çubuk bir grafik öğesi değil renkli bir blok
   gibi duruyordu. Çubuk 48 pikselde duruyor, kolon boşluğu paylaşmaya
   devam ediyor; ortalama margin ile.

   overflow: hidden — parçaların kendi köşe yarıçapı yok, rayın yarıçapını
   kırpmayla alıyorlar. Aynı çözüm .pnl__olcum'da da var: %3 gibi küçük bir
   parçada border-radius: inherit parçayı bir noktaya çeviriyordu. */
.pnl__cbk_yigin {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-width: 3rem;
    height: 100%;
    min-height: 0;
    margin-inline: auto;
    border-radius: var(--r-sm);
    background: var(--brand-tint);
    overflow: hidden;
}

/* Yükseklik YOK: nonce'lu bloktan geliyor (.pnl__cbk_p--y<n>). Kural hiç
   gelmezse parça 0'da kalıyor ve ray boş görünüyor — taşma olmuyor. */
.pnl__cbk_p {
    display: block;
    width: 100%;
    height: 0;
}

/* BAŞARILI = MARKA, başarısız = hata mürekkebi.

   Yeşil KULLANILMADI: grafiğin tamamı "iyi haber" olduğunda ekran yeşile
   boyanıyor ve panelin lacivert diliyle çakışıyordu (aynı gerekçe
   .tkv__kutu'da da yazılı: "dört renkli kutu yan yana pano değil trafik
   ışığı gibi görünüyordu"). Marka rengi ayrıca doğru olanı söylüyor —
   başarılı teslim ürünün ASIL ölçümü.

   Renk tek taşıyıcı değil: gösterge (legend) ve .ay-sr-only liste ikisini
   de yazıyla ayırıyor. */
.pnl__cbk_p--ok {
    background: var(--brand);
}
.pnl__cbk_p--hata {
    background: var(--st-hata-ink);
}

/* Etiket (ayın günü). min-height: 1em ŞART — etiketler SEYREK basılıyor
   (her n'de bir, bkz. panel/index.php) ve boş <span>'ler yüksekliksiz
   kalırsa o kolonların yığını 1 satır daha uzuyor, çizimin dibi çubuk
   çubuk zıplıyordu. */
.pnl__cbk_et {
    min-height: 1em;
    color: var(--ink-mute);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-align: center;
}

/* --- Gösterge (legend) -------------------------------------------------- */

/* Sayılar burada da yazıyor: "kırmızı ne demek" sorusu çizime bakmadan
   cevaplanıyor ve renk körlüğünde bilgi kaybolmuyor. */
.pnl__gosterge {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: .85rem 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}
.pnl__gosterge_oge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.pnl__gosterge_oge strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
/* Kare (daire değil): çubukları temsil ediyor ve çubuklar da köşeli.
   3px yarıçap --r-sm'in (8px) 10 pikselde görünen karşılığı. */
.pnl__gosterge_nokta {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.pnl__gosterge_nokta--ok {
    background: var(--brand);
}
.pnl__gosterge_nokta--hata {
    background: var(--st-hata-ink);
}

/* --- Platform dağılımı ------------------------------------------------- */

/* YATAY ÇUBUKLAR, dikey değil: platform adları uzun ("Google My Business")
   ve dikey çubukların altında döndürülmeden sığmıyor. Yatayda ad solda,
   sayı sağda, hiçbir şey dönmüyor — telefonda da aynı yerleşim çalışıyor. */
.pnl__dgl {
    display: grid;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

/* Kolonlar: ad (sabit aralık) · ray (esner) · sayı.
   Ad kolonu minmax(7rem, 11rem): sabit verilseydi kısa adlarda ("X")
   boşluk, uzun adlarda kırpma olurdu; tamamen esnek bırakılsaydı raylar
   satır satır farklı yerden başlar ve karşılaştırma bozulurdu. */
.pnl__dgl_satir {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: .35rem .85rem;
    min-width: 0;
}
.pnl__dgl_ad {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
}
/* Ad KIRPILIYOR (sarmıyor): sarma satırı iki kata çıkarıp rayın dikey
   ortasını kaydırıyordu ve dokuz satırlık listede hizalar tutmuyordu.
   Bilgi kaybı yok — tam ad karonun içindeki .ay-sr-only metninde duruyor
   (ay_platform_isaret) ve ayrıca sağdaki sayı satırı kimliklendiriyor. */
.pnl__dgl_ad > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* RAY — kota ölçerinin (.pnl__olcum) kalınca hâli. Ayrı bir bileşen
   yazılmadı ama ölçü ayrı: 5 piksel dokuz satırlık bir listede çizgi gibi
   görünüyor, 10 piksel çubuk gibi. */
.pnl__dgl_ray {
    display: block;
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--brand-tint);
    overflow: hidden;
}

/* DOLU PARÇA — RENK PLATFORMUN KENDİ RENGİ.

   --hsp-renk, ay_platform_renk_css()'in bastığı .hsp__isaret--<kod>
   kuralından geliyor (platformlar.renk → nonce'lu blok). Çubuk
   .hsp__isaret karosunun KENDİSİNİ almıyor, yalnızca renk değişkenini
   taşıyan kod sınıfını: karo 2.25rem'lik bir kare ve burada gereken tek
   şey renk. Kazanç: dokuz platformun rengi tek kaynakta kalıyor, dağılım
   için ikinci bir renk kuralı ailesi açılmıyor.

   Yedek var(--brand): renk kuralı hiç gelmezse (nonce'lu blok basılmadıysa)
   çubuk renksiz kalmıyor.

   Genişlik BURADA DEĞİL: nonce'lu bloktan (.pnl__dgl_dolu--g<n>). */
.pnl__dgl_dolu {
    display: block;
    width: 0;
    height: 100%;
    background: var(--hsp-renk, var(--brand));
}

.pnl__dgl_sayi {
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Boş durum satırı -------------------------------------------------- */

/* .hsp__bos_kutu'nun küçük kardeşi: o bir ÇAĞRI (simge + başlık + düğme),
   bu yalnızca durumu söylüyor. Kesikli çerçeve "burada bir şey olabilirdi"
   demenin yerleşmiş yolu (aynı kalıp .tkv__bos'ta da var) ve renk
   taşımıyor, yani renk körlüğünde de okunuyor.

   .ay-alert--blok DEĞİL: şerit bir eylem öneriyor ve kapatma düğmesi
   alıyor (js/theme.js → AlertKapat bütün .ay-alert'lere bağlanıyor);
   kapatılabilir bir "veri yok" bildirimi anlamsız olurdu. */
.pnl__bos_satir {
    margin: .75rem 0 0;
    padding: .75rem .9rem;
    border: 1px dashed var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}

/* ⚠ 640px — PANELDE SATIR KIRILIMININ TEK EŞİĞİ (gerekçe § 24e'nin
   sonunda). Rapor bölümlerinin üç ve dört kolonlu satırları burada
   ikiye/üçe düşüyor. */
@media (max-width: 640px) {
    /* Çizim 160 → 128 piksel: telefonda ekranın üçte biri bir grafiğe
       gitmesin. Çubuklar yüzdeyle ölçüldüğü için oranlar korunuyor. */
    .pnl__cizim {
        height: 8rem;
    }

    /* Dağılım satırı: ad ve sayı üstte yan yana, ray tam satırda altta.
       Üç kolonda ad kolonu 7rem'e dayanıp raya 60 piksel kalıyordu —
       çubukların hiçbiri ayırt edilemiyordu. */
    .pnl__dgl_satir {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .pnl__dgl_ray {
        grid-column: 1 / -1;
    }
}

/* --- 24e · Sosyal hesaplar  (.hsp*)  —  panel/hesaplar.php --------------
   Liste <table> DEĞİL <ul>.

   Tabloyla denendi: hesap adı + platform + durum + iki eylem, dört kolonda
   duruyor ama 420 px genişlikte kolonlar okunmaz hâle geliyor ve eylem
   düğmeleri alt alta kayıyor. Tablo ayrıca "satırları karşılaştırma" işi
   için doğru; burada yapılan iş her satırda ayrı bir karar. Grid satırı
   mobilde iki sıraya kendiliğinden geçiyor.
   ------------------------------------------------------------------------ */

.hsp__bolum {
    margin: 2rem 0 0;
}
.hsp__bolum:first-of-type {
    margin-top: 1.5rem;
}

.hsp__baslik_satir {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}
.hsp__h2 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 650;
}
.hsp__sayac {
    margin: 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

/* Bölüm içindeki alt başlık ("Şimdi bağlanabilir" / "Bağlama hazırlanıyor").
   h2'den küçük ve harf aralığı geniş: aynı boyda olsaydı bölüm başlığıyla
   karışıp iki eşit başlık gibi okunuyordu. */
.hsp__h3 {
    margin: 1.25rem 0 .6rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.hsp__h3:first-of-type {
    margin-top: 0;
}

/* ⚠ SINIF ADI "BOŞ DURUM" AMA İŞİ ONDAN GENİŞ: panelde kısa yardımcı
   paragrafın ortak kutusu oldu (agent bilgi listesi, gönderi süzgeci,
   mesajlar, yorumlar, panonun kurulum bloğu ve platform listesi de
   kullanıyor). Aynı ölçülerde ikinci bir sınıf açmak iki yerde bakım
   demekti; ad geçmişten kalıyor, kapsam yorumda yazılı. */
.hsp__bos {
    margin: 0 0 .75rem;
    color: var(--ink-soft);
    font-size: var(--fs-base);
}

/* --- Hesap limiti hapı -------------------------------------------------- */

/* DÜZ GRİ METİNDEN HAPA GEÇTİ. "0 / 1 hesap aktif" bölüm başlığının sağ
   ucunda --ink-mute ile yazıyordu ve sayfadaki diğer yardımcı metinlerden
   ayırt edilmiyordu; sınıra dayanan müşteri onu okumadan "Aktif et"e basıp
   hata alıyordu. Hap bir KOTA olduğunu söylüyor.

   Sınır dolduğunda uyarı tonu + "sınır doldu" metni: renk tek taşıyıcı
   değil (WCAG 1.4.1). Tonlar § 24f'deki --st-bek-* tokenlarından — dolmuş
   bir kota hata değil, dikkat edilecek bir durum. */
.hsp__kota {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    margin: 0;
    padding: .2rem .65rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hsp__kota--dolu {
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
}
.hsp__kota_not {
    font-weight: 500;
}

/* --- Boş durum kutusu --------------------------------------------------- */

/* Önce tek gri cümleydi: "Henüz bağlı hesap yok. Aşağıdaki platformlardan
   biri bağlandığında burada listelenir." Sayfanın en önemli bölümü boşken
   ekranda hiçbir görsel çapa yoktu; bölümün boş mu olduğu yoksa
   yüklenmediği mi belli olmuyordu ve bir sonraki adıma gitmenin yolu da
   verilmiyordu.

   KESİKLİ ÇERÇEVE bilinçli: "burada bir şey OLACAK" diyen, dolu bir kutudan
   ayrılan bir işaret — ve renk taşımıyor, yani renk körlüğünde de okunuyor.
   Dolu bir kart yapılsaydı boş bölüm dolu bölümle aynı ağırlıkta görünürdü.

   Ortalanmış tek kolon: içindeki dört öğe (simge, başlık, metin, düğme) tek
   bir çağrı; sola yaslı dizildiklerinde kutu "kart" gibi okunuyordu. */
.hsp__bos_kutu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem 1.25rem;
    border: 1px dashed var(--brand-line);
    border-radius: var(--r-lg);
    background: var(--surface);
    text-align: center;
}

/* ⚠ KUTUNUN KENDİ BOŞLUĞU YOK ve bu DOĞRU: beş ekranda bir bölümün içinde,
   kendi başlık satırının (.hsp__baslik_satir, .75rem alt boşluk) hemen altında
   basılıyor — orada boşluğu kapsayıcı veriyor.
   SAYFA DÜZEYİNDE BASILDIĞINDA KAPSAYICI YOK. Ölçüldü (panel/medya.php, hiç
   dosya yüklenmemiş hesap): "Dosya yükle" bölümünün (.gdr__bolum, yalnızca ÜST
   boşluk taşıyor) alt kenarına kesikli kutu YAPIŞIK duruyordu. Aynı konum
   panel/gonderiler.php'de de var.
   1.75rem: .gdr__bolum'ün bölümler arası boşluğuyla aynı — kutu bir bölümün
   yerini tutuyor, o yüzden bölüm ritmine uyuyor. Komşusunun kendi boşluğu
   varsa marginler çöküyor ve büyüğü kazanıyor, yani ekleme yapmıyor. */
.pnl__icerik > .hsp__bos_kutu {
    margin-block-start: 1.75rem;
}

.hsp__bos_sim {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
}
/* Simge menü ikonlarının aynısı (ay_pnl_ikon → .pnl__ikon, § 24a) ama
   burada 18 piksel küçük kalıyordu: kutu 44 piksellik bir dairede ve
   içindeki 18 piksellik çizim kaybolmuş görünüyordu. */
.hsp__bos_sim .pnl__ikon {
    font-size: 22px;
}
.hsp__bos_h {
    color: var(--ink);
    font-size: var(--fs-lg);
    font-weight: 650;
}
.hsp__bos_metin {
    /* Okunabilir satır uzunluğu. § 24 KARAR'daki "kartlar sayfa genişliğini
       doldurur" kuralı KART için: bu bir paragraf ve 984 piksellik içerik
       alanında ortalanmış tek satıra yayılınca göz satır başını
       bulamıyordu. Aynı istisna .dm__balon ve .ajn__saat_ikili için de
       yazılı. */
    max-width: 42ch;
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--fs-base);
}

/* --- Bağlı hesap satırı ------------------------------------------------- */

.hsp__liste {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
}

/* Sütunlar: işaret · kimlik (esner) · etiket · eylem.
   Ayırıcı border-top ve :first-child'de kapatılıyor — her satıra border
   verip son satırdan kaldırmak yerine, çünkü listenin kendi kenarlığı var
   ve çift çizgi oluşuyordu. */
.hsp__satir {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .35rem .85rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--hairline);
}
.hsp__satir:first-child {
    border-top: 0;
}

/* Pasif satır SOLUK ama okunur: opacity ile karartmak metni kontrast
   sınırının altına düşürüyordu. Yalnızca zemin değişiyor. */
.hsp__satir--pasif {
    background: var(--surface-2);
}

.hsp__isaret {
    /* Renk sınıftan geliyor (.hsp__isaret--<kod>), kural nonce'lu stil
       bloğunda basılıyor. Sınıf yoksa marka rengine düşüyor. */
    --hsp-renk: var(--brand);
    display: grid;
    place-items: center;
    /* flex kapsayıcıların içinde (hesap satırı, konuşma başlığı, çip)
       karo ezilmesin: içeriği küçük olduğu için varsayılan shrink onu
       daraltıp dikdörtgene çeviriyordu. */
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-md);
    background: var(--hsp-renk);
    color: #fff;
    /* Yedek harfin ölçüleri — logosu olmayan platform için (aşağıdaki
       .hsp__logo notuna bakın). */
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1;
}

/* PLATFORM LOGOSU — karonun içindeki gerçek marka işareti.

   ⚠ ÖNCE PLATFORM ADININ İLK HARFİ BASILIYORDU. Ölçülebilir kusurdu:
   Telegram ile TikTok İKİSİ DE "T" olarak çıkıyor ve aynı ekranda yan yana
   durduklarında ayırt edilemiyorlardı (gönderi listesinde bir gönderi ikisine
   de gidiyorsa iki özdeş kutu görünüyordu). "X" ve "G" gibi harfler de ürünü
   olduğundan amatör gösteriyordu.

   Logolar (Simple Icons, CC0) _platformlar.php'de ZATEN duruyordu — yalnızca
   ön yüz kullanıyordu. Artık panel de aynı kaynaktan basıyor
   (ay_platform_isaret / ay_platform_rozet).

   ÖLÇÜ YÜZDE, PİKSEL DEĞİL. Karo üç boyda kullanılıyor: 2.25rem (liste),
   1.5rem (.gdr__rozet § 24f), 1.1rem (.tkv__rozet § 24g). Sabit piksel
   verilseydi her boy için ayrı kural gerekirdi ve dördüncü bir boy
   eklendiğinde logo ya taşar ya kaybolurdu. %52 üçünde de karonun içinde
   nefes payı bırakıyor.

   fill="currentColor" (PHP tarafında): renk karonun color'ından geliyor,
   yani logo her zaman beyaz. Ön yüzdeki Instagram degradesi panelde
   KULLANILMIYOR — degradenin <defs> tanımı yalnızca hero'da var ve burada
   referans kırılır (gerekçe _platformlar.php'de). */
.hsp__logo {
    width: 52%;
    height: 52%;
}

.hsp__kimlik {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    /* min-width: 0 olmadan uzun hesap adı grid kolonunu şişirip eylem
       düğmelerini ekran dışına itiyor. */
    min-width: 0;
}
.hsp__ad {
    color: var(--ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.hsp__alt {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

/* Durum etiketi: renk TEK BAŞINA taşıyıcı değil, metin de yazıyor. */
.hsp__etiket {
    padding: .18rem .55rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.hsp__etiket--aktif {
    border-color: var(--brand-soft);
    background: var(--brand-soft);
    color: var(--brand-hover);
}
/* "2 hesap bağlı" — bağlı hesabı OLAN platform kartı. --aktif'ten ayrı
   olmak zorunda: o marka renginde ve platform kartında "şimdi
   bağlanabilir" anlamına geliyor. İkisi aynı olsaydı "bağlanabilir" ile
   "bağlanmış" tek renkte görünürdü. Tonlar § 24f'deki --st-ok-*. */
.hsp__etiket--ok {
    border-color: var(--st-ok-line);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
}
/* Renkler § 24f'deki --st-* tokenlarından: aynı üç ton gönderi durum
   rozetlerinde de kullanılıyor, iki yerde değer tutmak bir tonu
   değiştirirken diğerini unutmak demekti. */
.hsp__etiket--uyari {
    border-color: var(--st-hata-line);
    background: var(--st-hata-bg);
    color: var(--st-hata-ink);
}

.hsp__eylem {
    display: flex;
    align-items: center;
    gap: .5rem .75rem;
    flex-wrap: wrap;
}
/* ⚠ .hsp__kaldir KALDIRILDI (2026-09-25) — YERİNE .pnl__eylem (§ 24b-2).

   Kullanıcı kararı: "düzenle ve sil butonları yerine ikonlar ile yap."
   Sınıf beş ekranda kullanılıyordu (gönderiler · hesaplar · medya · gönderi ·
   agent-bilgi) ve hepsi ortak ikon düğmesine geçti; kural burada ölü kalırdı.

   BURADA ÖLÇÜLEN KUSUR KAYBOLMADI, ÇÖZÜMÜ DEĞİŞTİ. Kaydı duruyor çünkü aynı
   tuzağa bir daha düşülmesin: bağlantı gerçek tarayıcıda 22 piksel
   yüksekliğinde ve dilin kısa karşılığında (Türkçe "Sil") 15 PİKSEL
   GENİŞLİĞİNDE kalıyordu. WCAG 2.5.8'in AA sınırı 24×24 ve bu eylemler GERİ
   ALINAMAZ (hesabı kaldırmak, planlanmış gönderiyi silmek). Eski çözüm
   min-width/min-height ile hedefi büyütmekti; yeni çözüm 32×32 bir kare, yani
   hedef artık ETİKETİN UZUNLUĞUNDAN BAĞIMSIZ — Almanca "Löschen" ile Türkçe
   "Sil" aynı hedefi veriyor.

   Metin bağlantıları için WCAG'in 'inline' istisnası var ama o, cümle
   İÇİNDEKİ bağlantılar için; bu düğmeler kendi eylem kolonunda tek başına
   duruyor, istisna geçmiyordu. */

/* Platform hatası tam satır: kolon 1'den sona. Kırpılan hata mesajı işe
   yaramıyor, o yüzden alta iniyor. */
.hsp__hata {
    grid-column: 1 / -1;
    color: var(--st-hata-ink);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

/* Kaldırma onayı: düğme ile vazgeç yan yana, mobilde alt alta. */
.hsp__onay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

/* Bölüm çıpası (#hsp-platformlar): boş durum kutusundaki düğmenin hedefi.

   Panelin üst şeridi yapışık ve 4rem yüksekliğinde (--pnl-ust-h, § 24);
   çıpaya inen tarayıcı başlığı tam olarak şeridin arkasına sokuyordu.
   Genel scroll-padding-top panelde sıfırlanmış (§ 1a, html.ay-nohdr) çünkü
   orada sitenin fixed header'ı yok — ama panelin KENDİ şeridi var. */
.hsp__bolum[id] {
    scroll-margin-top: calc(var(--pnl-ust-h) + 1rem);
}

/* --- Platform kartları --------------------------------------------------

   ⚠ TEK IZGARA GÖRSEL OLARAK ÇÖKÜYORDU — EKRAN GÖRÜNTÜSÜYLE BİLDİRİLDİ.

   Dokuz platform tek auto-fit ızgarasındaydı ve bağlama formu olan platform
   (Telegram) kartı diğerlerinin ÜÇ KATI yüksekliğinde. Izgara satırındaki
   bütün öğeler en uzun olana göre gerildiği için o satırdaki üç kart da üç
   kat yükseliyor, içerikleri aşağıdaki align-items: center yüzünden kartın
   ORTASINDA asılı kalıyordu. "Google My Business" adı iki satıra düştüğünde
   de karo o iki satıra göre ortalanıp komşu kartlardaki karolarla hizasını
   kaybediyordu.

   İki düzeltme birlikte:

     1) HİZA — align-items: center → start ve satırların kendi hizası tek
        tek veriliyor. Kart gerilse bile içerik tepede kalıyor, karo adın
        İLK SATIRIYLA hizalı.
     2) LİSTE İKİYE BÖLÜNDÜ — bağlanabilirler burada (geniş kart, form
        taşıyabilir), uygulama onayı bekleyenler .hsp__bekleyenler'de
        (küçük şerit). Formlu kart artık küçük kartlarla aynı satırı hiç
        paylaşmıyor. Gerekçenin tamamı panel/hesaplar.php'de.

   minmax 190 → 240px: kartın içinde artık form var (etiket + alan + düğme +
   ipucu) ve 190 pikselde kanal adı alanı okunamayacak kadar daralıyordu.
   1280 piksellik panelde satıra hâlâ üç kart sığıyor.

   align-content: start — satırda tek kart kaldığında (ör. yalnızca Telegram
   bağlanabilir) kart ızgara satırının tamamına gerilmesin.
   ---------------------------------------------------------------------- */

/* ⚠ SATIRDA 3 KART — col-md-4 DAVRANIŞI (2026-09-27 · kullanıcı kararı:
   "kartlar col-md-4 şeklinde olsun. bir satırda 3 kart olacak şekilde
   olsun"). Önceki karar (2026-09-26) satırda 4 karttı ve dar ekranda
   4 → 3 → 2 → 1 diye kademeli iniyordu.

   Bootstrap'ın .row/.col-md-4 sınıfları KULLANILMADI, aynı kırılım CSS
   ızgarasıyla veriliyor: ≥768px (Bootstrap md) 3 kolon, altında tek kolon.
   Sebep: .col-* kendi yatay dolgusunu (gutter) getiriyor ve kartın
   kenarlığı/zemini <li>'nin üstünde olduğu için ya kart iç içe bir
   sarmalayıcıya taşınacaktı ya da gutter kartın İÇİNE düşecekti. Izgara
   aynı sonucu tek kuralla veriyor.

   İki liste AYNI kuralı kullanıyor ki iki bölümün kolonları alt alta hizalı
   dursun. minmax(0, 1fr): uzun platform adı ya da formdaki alan kolonu
   genişletip hizayı bozmasın. */
.hsp__platformlar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hsp__plat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: .15rem .75rem;
    padding: .85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
}

/* Bağlanabilir kart marka çizgisiyle işaretli: dokuz özdeş kart arasında
   hangisinin çalıştığı ancak alt satırlar tek tek okunarak anlaşılıyordu.
   Çizgi tek başına bilgi taşımıyor — kartın içinde "Kanal adıyla
   bağlanabilir" etiketi de var (WCAG 1.4.1). */
.hsp__plat--hazir {
    border-color: var(--brand-line);
}

/* İşaret iki satırı da kaplıyor: ad üstte, alt bilgi/etiket altta hizalı
   kalsın. align-self: start — kart formla birlikte uzadığında karo
   ortalanıp adın yanından kaymasın. */
.hsp__plat .hsp__isaret {
    grid-row: 1 / 3;
    align-self: start;
}
.hsp__plat_ad {
    align-self: center;
    min-width: 0;
    color: var(--ink);
    font-weight: 600;
    /* "Google My Business" iki satıra düşebiliyor; kelime ortasından
       kırılmasın. */
    overflow-wrap: break-word;
}
.hsp__plat_alt {
    align-self: start;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
/* Durum etiketi kartta: düz gri metin yerine hap. justify-self olmadan
   etiket ikinci kolonun tamamına yayılıyor ve hapın sağ kenarı kartın
   kenarına dayanıyordu. */
.hsp__plat_etiket {
    align-self: start;
    justify-self: start;
}

/* --- Uygulama onayı bekleyen platformlar -------------------------------- */

/* KART DEĞİL ŞERİT, ve bu bilinçli bir ağırlık kararı.

   Bu satırlarda TIKLANACAK HİÇBİR ŞEY YOK: platformun OAuth akışı ve
   uygulama incelemesi henüz bitmedi. Bağlanabilir platformla aynı ölçüde bir
   kart, aynı ağırlıkta bir eylem sözü veriyor ve tutmuyor — ekran
   görüntüsünde tam olarak bu görülüyordu: dokuz özdeş kart, yalnızca biri
   çalışıyor ve o da ortada kaybolmuş.

   Satırlar SİLİNMEDİ: kullanıcı ürünün kapsamının tamamını görmeye devam
   ediyor (dürüst durum, bkz. panel/hesaplar.php dosya başı). Yalnızca
   ekranın ağırlığını taşımıyorlar.

   Zemin --surface-2: beyaz kartların arasında "ikinci düzey" olduğu
   zeminden anlaşılıyor, opacity ile karartılmıyor — o, metni kontrast
   sınırının altına düşürüyordu (aynı karar .hsp__satir--pasif'te de var). */
.hsp__bekleyenler {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Boşluk üstteki listeyle aynı: iki bölümün kolonları alt alta hizalı. */
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hsp__bekleyen_plat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0 .6rem;
    padding: .5rem .7rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
/* İşaret iki satırı kaplıyor (ad + not), § 24e'deki kart deseninin aynısı. */
.hsp__bekleyen_plat .hsp__isaret {
    grid-row: 1 / 3;
}

/* OAuth SONRASI HESAP SEÇİMİ (panel/hesaplar.php → #hsp-sec) — 2026-09-26.
   Birden fazla sayfa/konum döndüğünde müşteri hangisini bağlayacağını
   seçiyor. Seçili satır iki taşıyıcılı: çerçeve + zemin (WCAG 1.4.1). */
.hsp__sec {
    margin-block: 0 1.5rem;
}
.hsp__sec_liste {
    display: grid;
    gap: .5rem;
    margin: .75rem 0 1rem;
    padding: 0;
    list-style: none;
}
.hsp__sec_oge {
    align-items: center;
    padding: .6rem .8rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}
.hsp__sec_oge:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
}
.hsp__sec_oge label strong {
    color: var(--ink);
}

/* col-md-4 KIRILIMI — iki liste birlikte.
     ≥768px  3 kolon (Bootstrap md sınırı, .col-md-4 ile aynı)
     <768px  tek kolon (.col-md-4'ün md altındaki tam genişlik hâli)
   767.98: Bootstrap'ın kendi max-width değeri — 768'de iki kural çakışmasın. */
@media (max-width: 767.98px) {
    .hsp__platformlar,
    .hsp__bekleyenler {
        grid-template-columns: minmax(0, 1fr);
    }
    .hsp__bekleyenler {
        gap: .5rem;
    }
}
.hsp__bekleyen_ad {
    align-self: end;
    min-width: 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow-wrap: break-word;
}
.hsp__bekleyen_not {
    align-self: start;
    color: var(--ink-mute);
    font-size: .8rem;
}

/* --- PLATFORM KARTININ BAĞLANTI SATIRI  —  2026-09-25 ------------------

   KULLANICI KARARI: "kartlarında linkler de olsun. entegre etmek için [ve]
   kullanmak için".

   İKİ SARMALAYICI, TEK BAĞLANTI GÖRÜNÜMÜ: .hsp__plat_eylem geniş kartta,
   .hsp__bekleyen_eylem küçük şeritte; ikisinin de içindeki bağlantılar
   .hsp__plat_link. Görünüm tek kuralda çünkü aynı iki bağlantı — ayrı
   yazılsaydı aynı ekranda iki farklı bağlantı dili olurdu.

   ⚠ grid-column: 1 / -1 ŞART. Hem .hsp__plat hem .hsp__bekleyen_plat iki
   kolonlu ızgara (karo + içerik) ve satır verilmezse bağlantılar ikinci
   kolona, adın altına sıkışıyor: 190 piksellik şeritte "API kimliği gir"
   kelime kelime kırılıyordu. Tam satır, karonun altından başlıyor.

   DÜĞME DEĞİL BAĞLANTI (.ay-btn kullanılmadı): ikisi de gezinme, veri
   değiştiren bir eylem değil. Kartta zaten bir birincil düğme var
   (bağlama formunun "Bağla"sı) ve yanına iki dolu düğme daha koymak
   hangisinin asıl iş olduğunu belirsizleştiriyordu.

   flex-wrap: iki bağlantı 190 piksellik şeritte yan yana sığmıyor ve alt
   alta geçiyorlar; gap satır arasını da veriyor. */
.hsp__plat_eylem,
.hsp__bekleyen_eylem {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .85rem;
    border-top: 1px solid var(--hairline);
}

/* Geniş kart: form/açıklama satırıyla aynı ölçüler (.hsp__bagla ile eşit),
   böylece kartın içindeki yatay çizgiler aynı ritimde. */
.hsp__plat_eylem {
    margin-top: .6rem;
    padding-top: .6rem;
}

/* Şerit daha sıkı: satır zaten iki katlı (ad + not) ve kartın dolgusu
   .5rem. Aynı .6rem verilse şerit kartlarla aynı yüksekliğe çıkıp
   "ikinci düzey" ayrımını kaybediyordu. */
.hsp__bekleyen_eylem {
    margin-top: .45rem;
    padding-top: .45rem;
}

/* min-height 24px — WCAG 2.5.8 (AA): bağlantılar satırda TEK BAŞINA
   duruyor, cümle içinde değil, yani 'inline' istisnası geçmiyor. Ölçüldü:
   dolgusuz hâlde 17 piksel. Aynı kalıp .pnl__bekleyen_oge ve
   .hsp__kaldir'da da var.

   font-size --fs-sm: kartın kendi metni de o boyda; bağlantılar başlıktan
   küçük kalmalı, yoksa göz önce onlara gidiyor ve platform adı ikinci
   plana düşüyor. */
.hsp__plat_link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hsp__plat_link:hover,
.hsp__plat_link:focus-visible {
    color: var(--brand-hover);
}

/* Şeritteki bağlantılar bir tık soluk: o platformda hesap bağlanamıyor ve
   şeridin tamamı "ikinci düzey". Marka rengi KORUNUYOR (bağlantı olduğu
   okunsun), yalnızca ağırlık düşüyor. --ink-mute'a çevrilmedi: o, tıklanır
   olduğunu gizliyordu — kullanıcının sekiz kartta tıklanacak bir şey
   olduğunu görmemesi bu turda düzeltilen kusurun ta kendisi. */
.hsp__bekleyen_eylem .hsp__plat_link {
    font-weight: 500;
}

/* Küçük karo — bekleyen şeridinde. .gdr__rozet (1.5rem) fazla küçük, liste
   boyu (2.25rem) fazla büyük: şerit iki satırlık ve 28 piksel ikisiyle de
   hizalı. Logo ölçüsü yüzdeyle geldiği için (bkz. .hsp__logo) ayrı bir
   kural gerekmiyor. */
.hsp__isaret--kucuk {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--r-sm);
    font-size: .8rem;
}

/* Dar ekran: etiket ve eylemler kimlik satırının altına geçiyor.
   Satırı üç kolonda sıkıştırmak yerine iki sıraya bölmek, düğmelerin
   dokunulabilir kalmasını sağlıyor (44 px hedef).

   ⚠ 640px — PANELDE LİSTE SATIRI KIRILIMININ TEK EŞİĞİ.

   Bu eşik altı bölümde ayrı ayrı yazılıyor (§24e hesaplar, §24f gönderiler,
   §24h agent, §24i bağlantılar, §24l gelen kutusu, §24m yorumlar) ve bir
   süre İKİYE BÖLÜNMÜŞTÜ: dördü 560, ikisi 640. Aynı hareketin (satırı iki
   sıraya bölmek) iki ayrı noktada olması, 560-640 arası genişlikte panelin
   yarısını iki sıralı yarısını üç kolonlu bırakıyordu — komşu menü
   öğeleri (Hesaplar ↔ Bağlantılar, Mesajlar ↔ Yorumlar) arasında geçerken
   yerleşim değişiyordu.

   640 seçildi, 560 değil: en sıkışan satırlar DÖRT kolonlu olanlar
   (.hsp__satir, .bgl__satir → işaret · kimlik · etiket · eylem). Onlar
   560'ta zaten dardı; 640 hepsi için güvenli üst sınır.

   BU LİSTEYE DAHİL OLMAYANLAR — bilinçli:
     720 / 460  takvim ızgarası (§24g) — satır kırma değil, yedi kolonlu
                ızgaranın kolon başına düşen genişliği
     380        .hsp__bagla_satir (§24j) — alan + düğme alt alta, ayrı iş
     900        panelin kabuk kırılımı (§24c) — yan menü ↔ drawer */
@media (max-width: 640px) {
    .hsp__satir {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .hsp__etiket {
        grid-column: 2;
        justify-self: start;
    }
    .hsp__eylem {
        grid-column: 2;
        margin-top: .25rem;
    }
}

/* --- 24f · Gönderiler  (.gdr*)  —  panel/gonderiler.php · panel/gonderi.php
   ------------------------------------------------------------------------ */

/* DURUM RENKLERİ — panel kapsamında token.

   theme.css'te yalnızca hata kırmızısı (#D92D20) vardı; "başarılı yeşili" ve
   "bekliyor sarısı" yoktu. § 24e bunları değer olarak gömüyordu ve § 24f de
   aynı değerleri ikinci kez yazacaktı — bir tonu değiştirmek iki yerde
   arama demekti.

   :root'a değil .pnl'e konuyorlar: ön yüzde (tanıtım sayfası) durum rozeti
   yok, genel tokenları büyütmenin karşılığı yok. Değerler AA kontrastını
   sağlayacak şekilde seçildi — rozetlerde metin tek bilgi taşıyıcı değil ama
   okunabilir olmak zorunda.

   ⚠ KAPSAM .auth'A DA AÇILDI (2026-09-24, tasarım bütünlüğü kararı).

   Ödeme dönüş sayfalarındaki güven hapı (.odeme__guven, § 22) tam bu üçlüyü
   — #E7F6EC / #A9DDBB / #1C6B3C — SABİT DEĞER olarak yazıyordu. Yani panelin
   "iyi haber" tonu iki yerde tanımlıydı ve birini değiştirmek diğerini
   sessizce ayrıştırırdı; ölçüldü, değerler birebir aynıydı.

   Token'lar artık .auth kapsamında da geçerli, yani kabuk ne olursa olsun
   dört odak ekranı (paket seçimi · havale · ödeme başarılı · ödeme iptal) ve
   beş kimlik ekranı panelle AYNI durum tonlarını kullanabiliyor. :root'a
   taşınmadı: yukarıdaki gerekçe hâlâ geçerli, tanıtım sayfasının durum
   rozeti yok. */
.pnl,
.auth {
    --st-ok-bg:      #E7F6EC;
    --st-ok-line:    #A9DDBB;
    --st-ok-ink:     #1C6B3C;

    --st-bek-bg:     #FEF6E7;
    --st-bek-line:   #F3D9A4;
    --st-bek-ink:    #8A5A06;

    --st-hata-bg:    #FDEEEB;
    --st-hata-line:  #F2C9C2;
    --st-hata-ink:   #9C3521;
}

/* --- DURUM ŞERİDİ — GEOMETRİ TEK YERDE ---------------------------------

   Dört liste (gönderi, yorum, gelen kutusu, takvim satırı) satırın SATIR
   BAŞI kenarında 3 piksellik bir durum şeridi gösteriyor. Şeridin rengi
   duruma göre değişiyor, geometrisi değişmiyor — o yüzden renk sınıfta,
   geometri burada.

   NEDEN border DEĞİL inset box-shadow

   Önce 'border-inline-start: 3px' yazılıydı. Satırların KENDİ kenarlığı
   1px olduğu için durum sınıfı olan satırda o kenar üçe çıkıyor, iç
   genişlik 2 piksel daralıyor ve İÇERİK 2 PİKSEL KAYIYORDU. Gönderi
   listesinde 'taslak' ve 'iptal' (şeridi olmayan iki durum) diğer beş
   satırdan 2 piksel solda başlıyordu. box-shadow kutu modeline girmiyor:
   dolgu ve iç genişlik bütün satırlarda aynı kalıyor.

   NEDEN TEK BLOK

   Dört bölüm (§24f, §24g, §24l, §24m) aynı 'inset 3px 0 0 0' üçlüsünü
   ayrı ayrı yazıyordu ve HİÇBİRİNİN RTL KARŞILIĞI YOKTU: box-shadow
   ofseti logical değil, Arapça sayfada dört listenin şeridi de yanlış
   kenarda (metnin bittiği tarafta) duruyordu. Geometri tek yerde olunca
   aynalama da tek kural.

   Değişkenin varsayılanı transparent: durum sınıfı olmayan satır gölgeyi
   alıyor ama görünmüyor. 'box-shadow: none' ile sınıf bazlı açmak yerine
   böyle yapıldı, çünkü rengi ezmek bir sonraki bölümde tek satır.

   ⚠ Değişken adı bu paragrafta YAZILMIYOR: teşhis aracı onu imza olarak
   arıyor ve CSS'te yorum ayıklanmıyor (bkz. § 24b'deki aynı not). */
/* ⚠ GÖNDERİ SATIRI BU LİSTEDEN ÇIKTI (2026-09-25, ızgaraya geçiş): gönderi
   ekranı artık satır değil KART basıyor (.gdr__kart) ve kartın üst yarısı
   tam genişlikte bir kapak görseli. inset box-shadow zeminin üstüne, ama
   İÇERİĞİN ALTINA çiziliyor — yani şerit kapağın arkasında kalıp yalnızca
   kartın alt yarısında görünüyordu, bir kusur gibi. Kart durumu kendi
   kenarlığının rengiyle söylüyor (§ 24f-4). Diğer üç liste satır olarak
   kaldığı için bu blok aynen duruyor. */
.yrm__satir,
.dm__satir,
.tkv__satir {
    --st-serit: transparent;

    box-shadow: inset 3px 0 0 0 var(--st-serit);
}

[dir="rtl"] .yrm__satir,
[dir="rtl"] .dm__satir,
[dir="rtl"] .tkv__satir {
    box-shadow: inset -3px 0 0 0 var(--st-serit);
}

/* --- Üst şerit: açıklama + birincil eylem ------------------------------- */
.gdr__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}
.gdr__lead {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--fs-lg);
    /* Uzun cümle düğmeyi alta itmeden önce daralsın. */
    flex: 1 1 18rem;
}

.gdr__geri {
    margin: 0 0 1rem;
    font-size: var(--fs-sm);
}

/* Geri bağlantısı ("← Agent", "← Gönderiler") tek başına bir satırda duruyor,
   cümle içinde değil — WCAG'in inline istisnası geçmiyor ve ölçüldüğünde
   54×17 piksel çıkıyordu. Alt seviye ekranlardan (agent-bilgi, gonderi)
   dönmenin en kısa yolu bu bağlantı. */
.gdr__geri a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* --- Geri satırında SAĞA YATMIŞ bir eylem  (.gdr__geri--eylemli) --------

   KULLANICI KARARI (2026-09-25): "Hesaplar butonunu da '<' butonu satırında
   ekranın sağ köşesinde olsun." Düğme önce "aktif hesap yok" şeridinin
   içindeydi (panel/gonderi.php'de gerekçesi yazılı).

   DEĞİŞTİRİCİ, TABAN KURALI DEĞİL: .gdr__geri'yi koşulsuz flex yapmak
   panel/agent-bilgi.php'yi de etkiliyordu — o ekranda satırın tek çocuğu
   var ve space-between ona bir şey kazandırmıyor, yalnızca satır kutusunun
   yüksekliğini değiştiriyordu.

   space-between + margin-inline-start:auto YERİNE space-between TEK BAŞINA:
   satırda tam iki çocuk var, ikinci bir kurala gerek yok. RTL'de kendiliğinden
   aynalanıyor (mantıksal eksen). */
.gdr__geri--eylemli {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
}

/* --- Durum süzgeci ------------------------------------------------------ */

/* Yatay kaydırılabilir: yedi sekme + sayılar dar ekranda sığmıyor ve
   sarmalamak listeyi iki satıra çıkarıp içeriği aşağı itiyordu. */
.gdr__suzgec {
    display: flex;
    gap: .4rem;
    margin-bottom: 1rem;
    padding-bottom: .25rem;
    overflow-x: auto;
    /* Kaydırma çubuğu gizlenmiyor: gizli kaydırma, kaydırılabildiğini
       kimseye söylemiyor. */
    scrollbar-width: thin;
}

/* --- ARAMA ŞERİDİNDEN SONRA GELEN SEKMELER  —  ÖLÇÜLMÜŞ KUSUR (2026-09-25)

   Ekranda görüldü (panel/gonderiler.php): arama alanı + "Ara" düğmesi satırının
   ALT KENARINA "Hepsi 1 / Taslak 1" sekmeleri YAPIŞIK duruyordu; iki ayrı
   kontrol tek bir blok gibi okunuyor ve düğmelerin alanın parçası olduğu
   izlenimini veriyordu. Aynı ikili panel/dm.php gelen kutusunda da var.

   SEBEP: .gdr__arac yalnızca ÜST boşluk taşıyor (margin: 1rem 0 0, § 24l-2) ve
   .gdr__suzgec yalnızca ALT boşluk (margin-bottom: 1rem) — ikisi yan yana
   geldiğinde aradaki toplam 0.

   KURAL KOMŞULUĞA BAĞLI, .gdr__suzgec'E DOĞRUDAN VERİLMEDİ: aynı sekme şeridi
   panel/yorumlar.php'de .hsp__baslik_satir'ın (kendi .75rem alt boşluğu var)
   ardından basılıyor ve orada bir şey eksik değil. Koşulsuz üst boşluk o ekranda
   da çökerek aynı değere inerdi ama sekmeler bir bölümün ilk öğesi olduğunda
   sebepsiz boşluk eklerdi.

   .75rem, 1rem DEĞİL: sekmeler aramanın SONUCUNU süzüyor, ondan bağımsız bir
   bölüm değil — biraz daha yakın durması ikisini bir grup olarak okutuyor. */
.gdr__arac + .gdr__suzgec {
    margin-block-start: .75rem;
}

.gdr__sekme {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    padding: .35rem .75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.gdr__sekme em {
    font-style: normal;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}
a.gdr__sekme:hover,
a.gdr__sekme:focus-visible {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}
.gdr__sekme--aktif {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
}
.gdr__sekme--aktif em { color: rgba(255, 255, 255, .75); }

/* --- Gönderi PAYLAŞIMLI parçaları ---------------------------------------

   Gönderi listesi (panel/gonderiler.php) artık yalnızca Instagram profili
   ızgarası (§ 24f-5). Burada kalanlar BAŞKA EKRANLARLA PAYLAŞIMLI:
   .gdr__durum panel/takvim.php ve panel/gonderi.php'de (ve karonun durum
   hapında), .gdr__zaman panel/gonderi.php'de, .gdr__rozet ise
   ay_platform_rozet()'in varsayılan ek sınıfı olduğu için sekiz ekranda.

   ⚠ YALNIZCA LİSTENİN KULLANDIĞI ÜSTVERİ SINIFLARI KALDIRILDI (2026-09-27):
   .gdr__meta, .gdr__rozetler, .gdr__eksik, .gdr__baslik, .gdr__ozet,
   .gdr__sonuc, .gdr__hata_sayi. Kart ızgarasının gövdesiydiler; ızgarada
   gövde yok ve başka tüketicileri yoktu (panel/, adk-panel/, js/ tarandı).
   Daha önce .gdr__liste / .gdr__satir de aynı gerekçeyle kalkmıştı. */

/* ⚠ ZEMİN AÇIKÇA VERİLİYOR  —  ÖLÇÜLMÜŞ KUSUR (2026-09-25)

   Hap ZEMİNSİZDİ ve dört durumun ikisinde (taslak · iptal) değiştirici
   sınıfı da yok, yani o ikisi ŞEFFAF bir kutu olarak basılıyordu. Satır
   listesinde sorun değildi: arkası kartın beyazı. Gönderi ekranı ızgaraya
   geçince hap KAPAK GÖRSELİNİN üstüne çıktı (§ 24f-4) ve koyu bir fotoğrafta
   --ink-mute gri metin kayboluyordu — durum, ekranın ikinci en önemli bilgisi
   ve okunmadığı hâl kabul edilemez.

   Değiştiricilerin kendi zeminleri BU KURALDAN SONRA geldiği için eziliyor:
   planlandı/gönderiliyor/kısmi/tamamlandı/hata yine kendi tonunda. Burası
   yalnızca VARSAYILAN, yani "rengi olmayan durum" hâli.

   panel/takvim.php ve panel/gonderi.php de bu sınıfı kullanıyor ve orada
   değişiklik görünmüyor: hap beyaz kartın ya da --surface-2 satırın üstünde
   duruyordu, şimdi kendi beyazını taşıyor. */
.gdr__durum {
    padding: .15rem .55rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.gdr__durum--planlandi {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}
.gdr__durum--gonderiliyor,
.gdr__durum--kismi {
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
}
.gdr__durum--tamamlandi {
    border-color: var(--st-ok-line);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
}
.gdr__durum--hata {
    border-color: var(--st-hata-line);
    background: var(--st-hata-bg);
    color: var(--st-hata-ink);
}

/* Platform rozetleri — § 24e'deki .hsp__isaret'in küçüğü. Ayrı bileşen
   yapılmadı: aynı şeyin küçük hâli, ayrı sınıf iki yerde renk yönetmek
   olurdu. */
.gdr__rozet {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--r-sm);
    font-size: .8rem;
}

.gdr__zaman {
    margin-inline-start: auto;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

/* --- Sayfalama --------------------------------------------------------- */
.gdr__sayfalama {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}
.gdr__sayfa_no {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

/* --- Düzenleyici ------------------------------------------------------- */

.gdr__bolum { margin: 1.75rem 0 0; }

.gdr__form {
    display: grid;
    gap: 1.1rem;
    /* Genişlik sınırı KALKTI — bkz. § 24 KARAR (kartlar sayfa genişliğinde). */
}

.gdr__ipucu {
    margin: .35rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

/* fieldset'in tarayıcı varsayılan çerçevesi ve iç boşluğu sıfırlanıyor;
   legend .ay-label ile aynı görünsün diye float kullanmadan bırakıldı. */
.gdr__hedefler {
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    gap: .5rem;
}
.gdr__hedefler > legend {
    padding: 0;
    margin-bottom: .25rem;
}

.gdr__hedef label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .5rem;
}
.gdr__hedef_ad {
    color: var(--ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.gdr__hedef_alt {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* --- "Tüm platformlarla uyumlu" kutusu  (.gdr__uyum) --------------------

   KULLANICI KARARI (2026-09-25): "tek bir yerden gönderiyi girerken aynı
   zamanda tüm sosyal medya platformları ile de uyumlu bir formatta gönderi
   kaydı oluşturma da olsun." Kutu İÇERİK grubunda duruyor, hedeflerin
   yanında değil — gerekçesi panel/gonderi.php'de.

   HEDEF KUTULARIYLA AYNI YERLEŞİM ama ad/açıklama ALT ALTA: hedef satırında
   ikinci satır kısa bir üstveri ("Telegram · en fazla 4.096 karakter"),
   burada ise kipin NE YAPTIĞINI anlatan bir cümle. Yan yana konulduğunda
   cümle onay kutusunun sağında daralıp kelime kelime kırılıyordu.
   flex-basis: %100 ile kendi satırına iniyor. */
.gdr__uyum label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem .5rem;
}
.gdr__uyum_ad {
    color: var(--ink);
    font-weight: 600;
}
.gdr__uyum_alt {
    flex: 1 1 100%;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    /* Ölçü: açıklama cümlesi form genişliğinde tek satıra yayılmasın. */
    max-width: 58ch;
}

.gdr__dugmeler {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: .25rem;
}
/* Silme düğmesi kaydetme düğmelerinden AYRI tarafta: yanlış düğmeye basmak
   burada geri alınamaz bir iş.

   ⚠ SEÇİCİ .hsp__kaldir'DAN .gdr__sil'E GEÇTİ (2026-09-25): o sınıf silindi
   (§ 24e'deki nota bakın) ve silme düğmesi ortak ikon bileşenine (.pnl__eylem)
   geçti. Kural İKİNCİ KEZ § 24f-3'te de yazılı; ikisi aynı değeri veriyor ve
   biri gitse diğeri işi sürdürür — o yüzden burada kalması zararsız, ama
   değer değişirse İKİSİ BİRLİKTE değişmeli. */
.gdr__dugmeler .gdr__sil { margin-inline-start: auto; }

/* --- Salt okunur görünüm ----------------------------------------------- */
.gdr__oku_baslik {
    margin: 0 0 .35rem;
    color: var(--ink);
    font-weight: 650;
    font-size: var(--fs-lg);
}

/* pre-wrap: satır sonları korunuyor ama satır uzunluğu kutuya uyuyor.
   nl2br() kullanılmadı — biçim stille verilince HTML üretmek gerekmiyor,
   kaçış hatası olasılığı da sıfır. */
.gdr__oku_metin {
    margin: 0;
    /* Genişlik sınırı KALKTI — bkz. § 24 KARAR (kartlar sayfa genişliğinde). */
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    /* Zaman ve eylemler "auto" kenar boşluğuyla sağa yapışıyordu; dar
       ekranda bu onları tek başına bir satıra atıyor ve araya boşluk
       bırakıyordu. */
    .gdr__zaman { margin-inline-start: 0; }

    .gdr__alt_satir { justify-content: flex-start; }
}

/* --- 24g · Takvim  (.tkv*)  —  panel/takvim.php ------------------------- */

/* Dört kip, tek bölüm. Sıra ekrandaki sıra:

     araç şeridi   →  süzgeç  →  özet  →  ortak çip  →  ortak kayıt
     →  ay ızgarası  →  hafta  →  gün  →  ajanda  →  dar ekran

   --------------------------------------------------------------------------
   ÜÇ ÖLÇÜ, ÜÇ TAKVİM DEĞİL

   Aynı veri üç ayrı yoğunlukta gösteriliyor ve ÜÇ AYRI BİLEŞEN gerekiyordu.
   Tek bir "gönderi kutusu" yazıp ölçüsünü kapsayıcıya bırakmak denendi ve
   olmadı: 45 piksellik ay hücresinde okunabilir olan şey (bir nokta) sayfa
   genişliğindeki ajanda satırında gülünç, ajandada okunabilir olan şey
   (iki satır metin + durum rozeti + eylem düğmesi) ay hücresinde imkânsız.

     .tkv__cip     ay hücresi ve hafta kolonu.  Tek satır, kırpılan ad,
                   1.1rem rozetler.  Kapsayıcı 45–160 piksel.
     .tkv__kayit   gün ve ajanda.  İki satır, durum rozeti, eylem düğmesi,
                   satır içi düzenleyici.  Kapsayıcı sayfa genişliği.
     .tkv__nokta   yalnızca telefondaki ay hücresi.  Bir sayı.

   --------------------------------------------------------------------------
   DURUM RENGİ: ÇİPTE VE KAYITTA border-inline-start, satırda box-shadow

   § 24f'nin durum şeridi (--st-serit) İNSET GÖLGE kullanıyor ve gerekçesi
   orada yazılı: satırın kendi kenarlığı 1px olduğu için 3px'lik bir
   border-inline-start iç genişliği 2 piksel daraltıyor, şeridi OLMAYAN
   durumlarda içerik 2 piksel kayıyordu.

   Çip ve kayıtta o sorun YOK ve kenarlık kullanılıyor, çünkü BÜTÜN çiplerin
   ve BÜTÜN kayıtların şeridi var — yalnızca rengi değişiyor, genişliği
   değişmiyor. Kazancı: border-inline-start logical bir özellik, yani RTL
   aynalaması bedava. box-shadow ofseti logical değil ve § 24f'de ayrı bir
   [dir="rtl"] kuralı gerektiriyor.

   Saat satırı (.tkv__satir) gölgeyi kullanmaya devam ediyor: orada şerit
   duruma değil "şimdi"ye bağlı, yani 24 satırın 23'ünde yok. Kayıt § 24f'nin
   listesine EKLENMEDİ.
   ------------------------------------------------------------------------ */

/* --- Sayfa şeridi: açıklama + birincil eylem ---------------------------- */

/* Kalıp § 24f'deki .gdr__ust ile aynı; ayrı sınıf çünkü alt boşluk yarısı
   kadar — hemen altında araç şeridi var ve ikisi tek blok gibi okunmalı. */
.tkv__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: .85rem;
}
.tkv__lead {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--fs-lg);
    /* Uzun cümle düğmeyi alta itmeden önce daralsın. */
    flex: 1 1 18rem;
}

/* --- ARAÇ ŞERİDİ -------------------------------------------------------- */

/* Üç denetim grubu tek kartta: kip seçici · aralık gezinmesi · tarihe atlama,
   altında saat dilimi.

   NİYE KART: çıplak akışta üç grup sayfanın üstünde birbirine karışıyordu ve
   hangisinin neyi değiştirdiği okunmuyordu. Çerçeve onları "denetim alanı"
   olarak ayırıyor; altındaki ızgara içerik.

   flex + wrap, grid DEĞİL: gruplar üç farklı genişlikte ve kırılma noktası
   içeriğe göre değişiyor (yedi dilde kip adları farklı uzunlukta). Sabit
   kolonlu bir grid ya Almancada taşardı ya Türkçede boşluk bırakırdı. */
.tkv__arac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: .75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-1);
}

/* --- Kip seçici (segment denetimi) -------------------------------------- */

/* Yarıklı hap: sönük bir kanal (--surface-2) ve içinde YÜKSELEN aktif öğe
   (beyaz + gölge). Dört öğenin hangisinin seçili olduğu tek bakışta
   okunuyor; renk tek başına iş yapmıyor, yükseklik de yapıyor.

   ⚠ YATAY KAYDIRILABİLİR ve olmak zorunda: dört kip × (ikon + metin) 360
   piksellik ekranda sığmıyor. Sarmalamak şeridi iki satıra çıkarıp altındaki
   gezinmeyi aşağı itiyordu; kaydırma hem yerinde kalıyor hem dokunmatikte
   doğal. Çubuk gizli — hapın içinde 6 piksellik bir çubuk kanalı kirletiyor
   ve kaydırma zaten dokunmayla yapılıyor. */
.tkv__kipler {
    flex: 0 1 auto;
    display: flex;
    gap: .2rem;
    padding: .25rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
}
.tkv__kipler::-webkit-scrollbar { display: none; }

.tkv__kip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    /* 30 + 2×.25rem dolgu = 38px, yani --control-h: şeridin bütün
       denetimleri (oklar, tarih alanı, düğmeler) aynı boyda. */
    min-height: 30px;
    padding: 0 .75rem;
    border-radius: var(--r-pill);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}
a.tkv__kip:hover,
a.tkv__kip:focus-visible {
    background: var(--brand-tint);
    color: var(--brand);
}
.tkv__kip--aktif {
    background: var(--surface);
    color: var(--brand);
    box-shadow: var(--sh-1);
}
.tkv__kip .ay-ico { font-size: 14px; }

/* --- Aralık gezinmesi --------------------------------------------------- */
.tkv__gezinme {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 0;
}

/* .ay-iconbtn 40×40 ve çerçevesiz. Takvimde oklar yanlarındaki tarih alanı
   ve "Bugün" düğmesiyle AYNI boyda olmak zorunda (ölçüldü: 40'a 38, iki
   piksellik fark üstte ve altta birer piksel olarak görünüyor ve şeridi
   eğri gösteriyordu). Çerçeve de ekleniyor: çerçevesiz bir kare, çerçeveli
   kontrollerin arasında "tıklanabilir" görünmüyordu. */
.tkv__ok {
    width: var(--control-h);
    height: var(--control-h);
    border: 1px solid var(--hairline);
    background: var(--surface);
}
.tkv__ok:hover,
.tkv__ok:focus-visible {
    border-color: var(--brand-line);
    background: var(--brand-soft);
}

/* RTL: chevron yatayda aynalanıyor — Arapçada "önceki" sağa bakar.
   ⚠ scaleX BURADA GÜVENLİ: 'geri'/'sonraki' ikonları birer YAZI KARAKTERİ
   (fa-chevron-*), CSS ile döndürülmüş kutu değil — silinecek bir rotate()
   yok (bkz. § 24'teki .ay-chev notu, aynı kalıp .dm__geri'de de var). */
[dir="rtl"] .tkv__ok .ay-ico { transform: scaleX(-1); }

/* Başlık ortada ve SABİT GENİŞLİKTE: "Eylül" ile "Ağustos" arasında ok
   düğmeleri kayıyordu, aynı yere iki kez basmak imkânsızdı. Ajanda kipinin
   başlığı en uzunu ("29 Eylül – 28 Ekim 2026"), o yüzden 12rem. */
.tkv__baslik {
    margin: 0;
    min-width: 12rem;
    text-align: center;
    font-size: var(--fs-lg);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.tkv__bugun { flex: 0 0 auto; }

/* --- Tarihe atla -------------------------------------------------------- */
.tkv__git {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .4rem;
}
/* Tarih alanı form alanlarının tam boyunu (50px) almasın: şeritteki bütün
   denetimler --control-h. Genişlik de auto — width: 100% bir kolonu
   dolduruyordu ve şeridin sağ ucunu esnetiyordu. */
.tkv__git_girdi {
    width: auto;
    min-width: 8.5rem;
    height: var(--control-h);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

/* --- Saat dilimi -------------------------------------------------------- */

/* Şeridin İÇİNDE, altında serbest bir paragraf olarak değil: bilgi
   denetimlere ait. flex: 1 1 100% ile kendi satırına iniyor ve üstündeki
   gruplardan ince bir çizgiyle ayrılıyor. */
.tkv__dilim {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding-top: .65rem;
    border-top: 1px solid var(--hairline);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.tkv__dilim .ay-ico { font-size: 13px; }

/* --- PLATFORM SÜZGECİ --------------------------------------------------- */

/* Yatay kaydırılabilir: dokuz platform + "Tümü" dar ekranda sığmıyor ve
   sarmalamak şeridi üç satıra çıkarıyordu (aynı karar § 24f'deki
   .gdr__suzgec'te de verildi). */
.tkv__suzgec {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    /* Kaydırma çubuğu fişlerin altına değmesin. */
    padding-bottom: .25rem;
}
.tkv__suzgec_ad {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding-inline-end: .15rem;
    color: var(--ink-mute);
}
.tkv__suzgec_ad .ay-ico { font-size: 13px; }

.tkv__fisi {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    /* 32px: WCAG 2.5.8'in 24 piksel sınırının üstünde ve fişler tek satırda
       kalıyor (38 olsaydı şerit ay ızgarasının nefes payını yiyordu). */
    min-height: 32px;
    padding: 0 .75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    text-decoration: none;
    white-space: nowrap;
}
a.tkv__fisi:hover,
a.tkv__fisi:focus-visible {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}
.tkv__fisi--aktif {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 600;
}

/* § 24e'deki .hsp__isaret'in en küçüğü. Ayrı bileşen yapılmadı: aynı şeyin
   küçük hâli, ikinci bir sınıf iki yerde renk yönetmek olurdu. */
.tkv__fisaret {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 5px;
    font-size: .7rem;
}
/* AKTİF FİŞTE KARO MARKA ZEMİNİNDE. Instagram'ın pembesi koyu lacivert bir
   hapın içinde okunmuyor, TikTok'un siyahı ise hiç görünmüyordu (ölçüldü:
   #111 üstünde #011E5A). Karo yarı saydam beyaza düşüyor, logo zaten beyaz —
   yani işaret siluet olarak kalıyor ve hangi platform olduğu yanındaki addan
   okunuyor. */
.tkv__fisi--aktif .tkv__fisaret { --hsp-renk: rgba(255, 255, 255, .22); }

/* --- ÖZET KUTULARI ------------------------------------------------------ */

/* auto-fit + minmax: dört kutu masaüstünde tek satır, tablette iki, telefonda
   iki (8.5rem × 2 + boşluk ≈ 300px, 360'a sığıyor). Sabit kolon sayısı
   yazılsaydı her kırılım için ayrı kural gerekirdi. */
.tkv__ozet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}
.tkv__kutu {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .7rem .85rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}
.tkv__kutu_sayi {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.tkv__kutu_ad {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* Renkler § 24f'nin --st-* tokenlarından (tek kaynak). Kenarlık + sayı
   renkli, zemin DEĞİL: dört renkli kutu yan yana pano değil trafik ışığı
   gibi görünüyordu. */
.tkv__kutu--planli { border-color: var(--brand-line); }
.tkv__kutu--planli .tkv__kutu_sayi { color: var(--brand); }
.tkv__kutu--yayin  { border-color: var(--st-ok-line); }
.tkv__kutu--yayin .tkv__kutu_sayi { color: var(--st-ok-ink); }
.tkv__kutu--hata   { border-color: var(--st-hata-line); }
.tkv__kutu--hata .tkv__kutu_sayi { color: var(--st-hata-ink); }

/* SIFIR NÖTR. "0 hata" kırmızı kenarlıkla basıldığında iyi haber kötü haber
   gibi görünüyordu — hatanın olmaması uyarı değil. */
.tkv__kutu--sifir { border-color: var(--hairline); }
.tkv__kutu--sifir .tkv__kutu_sayi { color: var(--ink-mute); }

a.tkv__kutu:hover,
a.tkv__kutu:focus-visible { background: var(--surface-2); }

/* --- Boş aralık notu ---------------------------------------------------- */

/* Kesikli çerçeve: "burada bir şey olabilirdi" demenin yerleşmiş yolu (aynı
   kalıp .tkv__bosgun ve .tkv__ekle'de de var). Blok uyarı (.ay-alert--blok)
   DEĞİL: o bir eylem öneriyor, bu yalnızca durumu söylüyor. */
.tkv__bos {
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    border: 1px dashed var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}

/* --- ORTAK: ÇİP  (ay hücresi + hafta kolonu) ---------------------------- */

/* Çip <a> ve blok: hücrenin tamamını kaplasın, dokunma hedefi büyük olsun. */
.tkv__cip {
    display: flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    padding: .2rem .35rem;
    border-radius: var(--r-sm);
    border-inline-start: 3px solid var(--hairline);
    background: var(--surface-2);
    color: var(--ink);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.tkv__cip:hover,
.tkv__cip:focus-visible {
    background: var(--brand-soft);
    color: var(--brand);
}
.tkv__cip_saat {
    flex: 0 0 auto;
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}
/* Tek satır: hücre yüksekliği içerikle büyüyünce ızgara satırları
   birbirinden farklı yükseklikte oluyor ve ay görünümü okunmuyor. */
.tkv__cip_ad {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tkv__cip_rozet {
    flex: 0 0 auto;
    display: flex;
    gap: .15rem;
}
/* § 24f'deki .gdr__rozet'in daha küçüğü — takvim hücresi daha dar. */
.tkv__rozet {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 4px;
    font-size: .65rem;
}

/* --- ORTAK: DURUM RENGİ  (çip + kayıt) ---------------------------------- */

/* Tek liste, iki bileşen: aynı durumun rengi iki yerde ayrı yazılsaydı biri
   değiştiğinde diğeri geride kalırdı. Değerler § 24f'nin --st-* tokenları.

   'gonderiliyor' ve 'kismi' AYNI tonu (bekleyen) paylaşıyor: ikisi de "iş
   yolda" diyor. 'iptal' renk almıyor, soluyor — rengi olmayan tek durum,
   çünkü bildirecek bir şey yok. */
.tkv__cip--planlandi,
.tkv__kayit--planlandi    { border-inline-start-color: var(--brand); }
.tkv__cip--gonderiliyor,
.tkv__kayit--gonderiliyor,
.tkv__cip--kismi,
.tkv__kayit--kismi        { border-inline-start-color: var(--st-bek-ink); }
.tkv__cip--tamamlandi,
.tkv__kayit--tamamlandi   { border-inline-start-color: var(--st-ok-ink); }
.tkv__cip--hata,
.tkv__kayit--hata         { border-inline-start-color: var(--st-hata-ink); }
.tkv__cip--iptal,
.tkv__kayit--iptal        { opacity: .6; }

/* --- ORTAK: KAYIT  (gün + ajanda) -------------------------------------- */

/* flex + wrap, grid-template-areas DEĞİL. Alan adlı bir grid denendi:
   "duzen" satırı düzenleyici KAPALIYKEN de bir izle (satır boşluğu) yer
   kaplıyordu, çünkü grid'de açıkça tanımlanan satır öğesi olmasa da var.
   flex'te alta geçen öğe yoksa satır da yok. */
.tkv__kayit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    padding: .5rem .65rem;
    border: 1px solid var(--hairline);
    /* Durum şeridi — genişlik BÜTÜN kayıtlarda aynı, yalnızca renk değişiyor
       (gerekçe bölüm başında). */
    border-inline-start: 3px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}
.tkv__kayit:hover { border-color: var(--brand-line); }

.tkv__kayit_saat {
    flex: 0 0 auto;
    width: 3.1rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.tkv__kayit_govde {
    flex: 1 1 12rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* İKİ SATIRDA KIRPILIYOR. Başlığı olmayan gönderide ad metnin ilk
   satırından türüyor (panel/takvim.php → ay_tkv_ad) ve 160 karaktere kadar
   gelebiliyor; kırpılmasa tek kayıt dört satır kaplıyor ve listede ritim
   kalmıyordu. Tek satıra indirmek de denendi: cümlenin yarısı kayboluyor,
   iki gönderi birbirinden ayırt edilemiyordu. */
.tkv__kayit_ad {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.tkv__kayit_ad:hover,
.tkv__kayit_ad:focus-visible {
    color: var(--brand);
    text-decoration: underline;
}

.tkv__kayit_alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}
.tkv__kayit_rozet {
    display: flex;
    gap: .25rem;
}

/* --- Kayıt eylemi: "Zamanı değiştir" ----------------------------------- */

/* ⚠ KURALLAR KALDIRILDI (2026-09-25) — DÜĞME ORTAK BİLEŞENE GEÇTİ.

   Kullanıcı kararı: "düzenle ve sil butonları yerine ikonlar ile yap."
   Görünümün tamamı artık § 24b-2'deki .pnl__eylem'den geliyor (32×32 kare,
   nötr çerçeve, hover'da marka tonu). Buradaki hap biçimli çerçeve, 12
   piksellik ikon ve metin boşluğu (gap) o hâlde gereksiz kaldı.

   KORUNAN İKİ KARAR:
     · Düğme HOVER'A BAĞLANMADI ve bağlanmamalı — dokunmatik aygıtta hover
       yok, düğme hiç görünmezdi (aynı gerekçe .tkv__ekle'de de yazılı).
       Bileşen de her zaman görünür, yalnızca sönük.
     · flex: 0 0 auto — kayıt satırı bir flex ve düğme büzülmemeli.
       Bileşende zaten var, burada tekrarlanmıyor.

   .tkv__kayit_eylem SINIFI MARKUP'TA KALDI: kural taşımıyor ama ekranın
   kendi düğmesini işaretliyor; takvime özel bir yerleşim düzeltmesi
   gerektiğinde tutunacak yer o. */

/* --- Satır içi zaman düzenleyici --------------------------------------- */

/* Marka zemini: form kaydın İÇİNDE açılıyor ve "bu satır şu an düzenleniyor"
   bilgisini taşıması gerekiyor. Çerçeve tek başına yetmiyordu — kayıtların
   kendi çerçevesi de var ve ikisi iç içe iki kutu gibi okunuyordu. */
.tkv__duzen {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem .75rem;
    margin-top: .2rem;
    padding: .7rem;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-md);
    background: var(--brand-soft);
}
/* .ay-field'ın kendi alt boşluğu var (form akışı için); burada alan bir
   şeridin parçası, boşluğu flex gap veriyor. */
.tkv__duzen_alan {
    flex: 1 1 13rem;
    margin: 0;
    min-width: 0;
}
.tkv__duzen_girdi {
    width: 100%;
    font-variant-numeric: tabular-nums;
}
.tkv__duzen_dugmeler {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
/* "Vazgeç" düğme DEĞİL bağlantı: hiçbir şey değiştirmiyor, yalnızca
   düzenleyiciyi kapatıyor. Üç düğme yan yana konsaydı hangisinin kaydettiği
   okunmuyordu. min-height WCAG 2.5.8 için (ölçüldü: 17 piksel çıkıyordu). */
.tkv__duzen_vazgec {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}

/* --- AY IZGARASI ------------------------------------------------------- */

.tkv__ay {
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
}

.tkv__gunadlari,
.tkv__hucreler {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.tkv__gunadlari {
    background: var(--surface-2);
    border-bottom: 1px solid var(--hairline);
}
.tkv__gunadi {
    padding: .45rem .5rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
}

/* Hücre ayırıcıları border ile: grid gap kullanılsaydı boşluklar zemin
   rengini gösterip ızgarayı parçalı gösteriyordu.

   position: relative — telefonda hücrenin tamamı dokunma hedefi oluyor
   (aşağıdaki .tkv__gunno::after). Kırılımda değil BURADA tanımlı: konum
   bağlamını medya sorgusunun içine koymak, kuralın nereden geldiğini
   aramayı gerektiriyordu. */
.tkv__hucre {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: 6.5rem;
    padding: .35rem;
    border-inline-start: 1px solid var(--hairline);
    border-top: 1px solid var(--hairline);
}
/* İlk satır ve ilk kolon kendi kenarlığını almıyor: kapsayıcının
   kenarlığıyla çift çizgi oluyordu. */
.tkv__hucreler > .tkv__hucre:nth-child(7n + 1) { border-inline-start: 0; }
.tkv__hucreler > .tkv__hucre:nth-child(-n + 7) { border-top: 0; }

.tkv__hucre--disay  { background: var(--surface-2); }
.tkv__hucre--gecmis .tkv__gunno { color: var(--ink-mute); }
/* inset gölge: kenarlık kullanılsaydı hücre 1 piksel kayıp ızgarayı
   bozuyordu. */
.tkv__hucre--bugun { box-shadow: inset 0 0 0 2px var(--brand); }

.tkv__gunno {
    align-self: flex-start;
    min-width: 1.6rem;
    padding: .1rem .3rem;
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 650;
    text-align: center;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.tkv__gunno:hover,
.tkv__gunno:focus-visible {
    background: var(--brand-soft);
    color: var(--brand);
}
.tkv__hucre--bugun .tkv__gunno {
    background: var(--brand);
    color: var(--on-brand);
}

.tkv__daha {
    padding-inline-start: .35rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.tkv__daha:hover,
.tkv__daha:focus-visible { color: var(--brand); }

/* Telefon noktası masaüstünde gizli (bkz. panel/takvim.php gerekçesi). */
.tkv__nokta { display: none; }

/* --- HAFTA ------------------------------------------------------------- */

.tkv__hafta {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .5rem;
}
.tkv__hgun {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 8rem;
    min-width: 0;
    padding: .5rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
}
.tkv__hgun--bugun  { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.tkv__hgun--gecmis { background: var(--surface-2); }

.tkv__hbaslik {
    margin: 0 0 .15rem;
    font-size: var(--fs-sm);
    font-weight: 600;
}
/* min-height: hafta kipinde gün başlığı O GÜNÜN detayına giden bağlantı,
   yani haftalık görünümün ana gezinme öğesi. Ölçüldü: 20 piksel yüksekliğinde
   çıkıyordu (WCAG 2.5.8 AA sınırı 24). Genişlik zaten kolonun tamamı, eksik
   olan tek boyut yükseklikti.

   flex-wrap + min-width: 0 ŞART. Bağlantı üç parça taşıyor (gün adı + gün
   numarası + sayı rozeti) ve flex çocukları varsayılan olarak
   min-content'ten küçülmeyi reddediyor: yedi kolonlu ızgarada kolon
   daralınca "Cumartesi" ile "27" yan yana sığmıyor ve numara kutunun dışına
   taşıyordu (ölçüldü: 5–11 piksel). Sarma izniyle alt satıra geçiyor. */
.tkv__hbaslik a {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    min-width: 0;
    min-height: 24px;
    gap: .35rem;
    color: var(--ink);
    text-decoration: none;
}
.tkv__hbaslik a > span { min-width: 0; overflow-wrap: anywhere; }
.tkv__hbaslik a:hover,
.tkv__hbaslik a:focus-visible { color: var(--brand); }
.tkv__hgunadi { color: var(--ink-mute); font-weight: 500; }
.tkv__hgunno  { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Gün sayısı rozeti (hafta başlığı + ajanda başlığı) ---------------- */

/* Tek kural iki yerde: ikisi de "bu günde kaç gönderi var" diyor ve ayrı
   yazılsaydı biri büyütüldüğünde diğeri geride kalırdı. */
.tkv__hsayi,
.tkv__asayi {
    margin-inline-start: auto;
    min-width: 1.35rem;
    padding: 0 .3rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Boş gün bağlantısı: kesikli çerçeve "buraya bir şey konabilir" demenin
   yerleşmiş yolu. */
.tkv__bosgun {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 32px;
    padding: .4rem;
    border: 1px dashed var(--hairline);
    border-radius: var(--r-sm);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    text-align: center;
    text-decoration: none;
}
.tkv__bosgun:hover,
.tkv__bosgun:focus-visible {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}
.tkv__bosgun .ay-ico { font-size: 11px; }

/* --- GÜN · saat saat --------------------------------------------------- */

.tkv__gun {
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
}

.tkv__satir {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: .5rem;
    padding: .35rem .5rem;
    border-top: 1px solid var(--hairline);
    min-height: 2.6rem;
    align-items: start;
}
.tkv__satir:first-child { border-top: 0; }

/* Geçmiş saat soluk zemin — opacity DEĞİL: opacity metni kontrast sınırının
   altına düşürüyordu (aynı karar § 24e'deki pasif hesap satırında da
   verildi). */
.tkv__satir--gecmis { background: var(--surface-2); }
/* Şerit geometrisi § 24f'deki tek blokta (RTL aynalaması dahil); burada
   yalnızca rengi veriliyor. Zemin de işaretleniyor: 24 satırlık bir listede
   3 piksellik bir şerit tek başına gözden kaçıyordu. */
.tkv__satir--simdi {
    --st-serit: var(--brand);

    background: var(--brand-tint);
}

.tkv__saat {
    padding-top: .35rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.tkv__satir--simdi .tkv__saat { color: var(--brand); font-weight: 700; }

.tkv__saatici {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

/* "Buraya planla" yalnızca satırın üzerine gelindiğinde belirmiyor —
   hover'a bağlı eylem dokunmatik aygıtta hiç görünmüyor. Her zaman duruyor
   ama soluk; odaklanınca ve üzerine gelince belirginleşiyor. */
.tkv__ekle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    align-self: flex-start;
    min-height: 26px;
    padding: .2rem .5rem;
    border: 1px dashed var(--hairline);
    border-radius: var(--r-sm);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.tkv__ekle:hover,
.tkv__ekle:focus-visible {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}
.tkv__ekle .ay-ico { font-size: 11px; }

/* --- AJANDA ------------------------------------------------------------ */

/* Izgara yok, kart yok: gün başlığı + altında kayıtlar. Kartlara almak
   denendi ve otuz günlük listede otuz çerçeve iç içe kutular üretiyordu
   (kayıtların kendi çerçevesi var). Başlığın alt çizgisi ayırıcı olarak
   yetiyor. */
.tkv__ajanda {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.tkv__agun {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.tkv__abaslik {
    margin: 0;
    font-size: var(--fs-base);
}
.tkv__abaslik a {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
    min-width: 0;
    min-height: 24px;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
    text-decoration: none;
}
.tkv__abaslik a:hover,
.tkv__abaslik a:focus-visible { color: var(--brand); }
.tkv__agunno {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tkv__agunay  { font-weight: 650; }
.tkv__agunadi { color: var(--ink-mute); font-size: var(--fs-sm); }

.tkv__agun--bugun .tkv__abaslik a { border-bottom-color: var(--brand); }
.tkv__agun--bugun .tkv__agunno    { color: var(--brand); }
.tkv__agun--gecmis .tkv__agunno,
.tkv__agun--gecmis .tkv__agunay   { color: var(--ink-soft); }

.tkv__akayitlar {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

/* --- Planlanmamış taslaklar ------------------------------------------- */
.tkv__taslaklar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    margin: 1.25rem 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}
.tkv__taslaklar .ay-ico { color: var(--ink-mute); font-size: 13px; }

/* --- DAR EKRAN -------------------------------------------------------- */

/* 900 px: kabuğun yan menüsünün kalktığı kırılım (§ 24c). İçerik alanı
   birden genişliyor ama ekran hâlâ dar — araç şeridinin grupları burada
   satırlara ayrılıyor. */
@media (max-width: 900px) {
    /* Gezinme kendi satırını alıyor ve başlık genişliyor: kip seçici ile
       yan yana kaldığında başlık 12rem'i koruyup taşıyordu. */
    .tkv__gezinme { flex: 1 1 100%; justify-content: flex-start; }
    .tkv__baslik  { min-width: 0; flex: 1 1 8rem; text-align: start; }

    .tkv__git { flex: 1 1 100%; }
    .tkv__git_girdi { flex: 1 1 auto; min-width: 0; }
}

/* 720 px: yedi kolonlu ay ızgarasında kolon başına ~45 piksel kalıyor.
   Çipler gizleniyor, yerine sayı noktası çıkıyor; hücreye dokunmak gün
   kipini açıyor. Ay görünümünün işi ("hangi gün dolu") korunuyor —
   içeriği okumak isteyen kullanıcının kipi ajanda. */
@media (max-width: 720px) {
    .tkv__hucre {
        min-height: 3.6rem;
        align-items: center;
        justify-content: center;
    }
    .tkv__hucre .tkv__cip,
    .tkv__hucre .tkv__daha { display: none; }

    .tkv__gunno { align-self: center; }

    /* HÜCRENİN TAMAMI DOKUNMA HEDEFİ. Numaranın kendisi ~24×24 piksellik bir
       hedef bırakıyordu ve 45 piksellik bir kolonda ıskalanıyordu. Çipler
       burada gizli olduğu için hücrede çakışacak başka bağlantı yok; nokta
       da bağlantı değil, üstünü kaplamak bir şey kaybettirmiyor. */
    .tkv__gunno::after {
        content: '';
        position: absolute;
        inset: 0;
    }

    .tkv__nokta {
        display: inline-block;
        min-width: 1.15rem;
        padding: 0 .25rem;
        border-radius: var(--r-pill);
        background: var(--brand);
        color: var(--on-brand);
        font-size: .7rem;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    .tkv__hucre--gecmis .tkv__nokta { background: var(--ink-mute); }

    /* Hafta: yedi kolon yerine yedi blok. Kolonlar 45 pikselde metin
       özetini de okunmaz yapıyordu. */
    .tkv__hafta { grid-template-columns: minmax(0, 1fr); }
    .tkv__hgun  { min-height: 0; }
}

@media (max-width: 460px) {
    /* Saat kolonu daralıyor. */
    .tkv__satir { grid-template-columns: 3.2rem minmax(0, 1fr); }

    /* Kayıtta saat ve gövde tek satırda kalsın, eylem alta geçsin: üçü yan
       yana 360 pikselde gövdeye 6 rem bırakıyordu. */
    .tkv__kayit_govde { flex: 1 1 100%; }

    /* ⚠ EYLEM DÜĞMESİNİN DAR EKRAN KURALLARI KALDIRILDI (2026-09-25).

       Burada iki kural vardı: metni .ay-sr-only kalıbıyla kırpmak ve dolguyu
       daraltmak. İkisi de ARTIK GEREKSİZ çünkü düğme HER GENİŞLİKTE ikon
       (§ 24b-2) ve etiketi ay_pnl_eylem zaten .ay-sr-only bir <span> olarak
       basıyor — yani kırpma işaretlemeden geliyor, medya sorgusundan değil.

       O zaman yazılan gerekçe hâlâ geçerli ve bileşende de yazılı: metin
       display: none ile GİZLENMEZ, kırpılır. Gizlenirse düğmenin erişilebilir
       adı hiç olmaz (içinde yalnızca aria-hidden bir ikon var) ve ekran
       okuyucu "bağlantı" diye okuyup geçer. */

    /* Düzenleyicinin düğmeleri de tam satır: "Taşı / Planı kaldır / Vazgeç"
       üçlüsü 360 pikselde alanın yanına sığmıyordu. */
    .tkv__duzen_alan,
    .tkv__duzen_dugmeler { flex: 1 1 100%; }

    .tkv__ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tkv__kutu_sayi { font-size: 1.3rem; }
}

/* --- 24h · Agent  (.ajn*)  —  panel/agent.php · panel/agent-bilgi.php ----

   ⚠ BÖLÜM 2026-09-25'te BÜYÜK ÖLÇÜDE YENİDEN YAZILDI (kullanıcı kararı:
   "agent.php sayfasını sıfırdan oluştur. amatör duruyor."). Ne amatör
   duruyordu ve her kural hangi ölçüme karşılık geliyor — panel/agent.php'nin
   başında madde madde yazılı; burada yalnızca CSS'e ait gerekçeler var.

   YENİDEN TANIMLANMAYANLAR:
     .hsp__bolum .hsp__baslik_satir .hsp__h2 .hsp__sayac      (§ 24e)
     .hsp__liste .hsp__satir .hsp__kimlik .hsp__etiket        (§ 24e)
     .hsp__bos_kutu .hsp__bos_sim .hsp__bos_h .hsp__bos_metin (§ 24e)
     .gdr__lead .gdr__form .gdr__dugmeler                     (§ 24f)
     --st-*  durum tonları                                    (§ 24f)
   ---------------------------------------------------------------------- */

/* --- PANEL BÖLÜM KARTI — ORTAK DİL ------------------------------------

   Panelde bölümler İKİ FARKLI görünüyordu: ayarlar ve bağlantı ayarları
   ekranlarında beyaz kart (çerçeve + zemin + yarıçap), agent ve gönderi
   ekranlarında ise çıplak akış — alanlar ve etiketler doğrudan sayfanın
   gri zemininde duruyordu. Aynı işi yapan iki ekran (ikisi de "bölümlere
   ayrılmış uzun form") farklı görünüyor, kullanıcı her sayfada yeniden
   yer buluyordu.

   Ölçüler §24o'daki .ayr__bolum'dan alındı; o sayfa bu dili ilk kuran
   ekran ve değer kopyalamak yerine aynı üçlü tekrar ediliyor.

   ⚠ İÇ İÇE KART YOK. Bu bölümlerin İÇİNDE .gdr__form da var (agent.php,
   ayarlar.php) ve ona ayrıca kart verilse çerçeve içinde çerçeve çıkardı.
   Kart yalnızca EN ÜST bölüm seviyesinde; aşağıdaki kural forma verilen
   kartı o iki bağlamda geri alıyor. */
.ajn__bolum,
.gdr__bolum,
.gdr__form {
    margin: 1rem 0 0;
    padding: 1.15rem 1.35rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
}

/* Bölümün İÇİNDEKİ form kart DEĞİL: kabuk zaten kart. Özgüllük 0,2,0
   olduğu için yukarıdaki 0,1,0 kuralını eziyor. */
.ajn__bolum .gdr__form,
.ayr__bolum .gdr__form,
.bgl__bolum .gdr__form {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

/* DÜZ FORM (.gdr__form--duz) — KENDİ KARTLARINI TAŞIYAN FORMLAR İÇİN.

   KULLANICI KARARI (2026-09-26, /panel/gonderi.php): "formun dışındaki
   beyaz kartı sil, form olan kart direkt olsun (beyaz kartta olunca
   dışında çok kaba olmuş)."

   Gönderi düzenleyicisi yukarıdaki kart kuralının TEK istisnası: formun
   içeriği düz alanlar değil, kendi çerçevesi ve zemini olan üç
   <fieldset> (.gdr__grup — içerik · hedefler · zaman, §24t-2). Forma da
   kart verildiğinde ekranda çerçeve içinde çerçeve çıkıyordu: dıştaki
   beyaz kutu hiçbir şey gruplamıyor, yalnızca 1.35rem dolgu ekleyip
   gerçek kartları içeri kaydırıyordu.

   ⚠ .ajn__bolum .gdr__form RESET'İ BURAYA YETMİYOR: o kural formun bir
   .ajn__/.ayr__/.bgl__bolum İÇİNDE olmasına bakıyor (kabuk zaten kart).
   Gönderi formunun üstünde bölüm kabuğu yok, kartı olmaması gerekçesi
   ise farklı: kart AŞAĞIDA, grupların kendisinde. O yüzden bağlamla
   değil açık bir değiştiriciyle yazılıyor — aynı gerekçe .ajn__bolum--duz
   için de geçerli ve ad bilinçli olarak onunla aynı sonu taşıyor.

   margin KALIYOR: formun üstündeki şeritten/geri satırından ayıran boşluk
   karta değil akışa ait. Grupları alt alta ayıran boşluk da yerinde —
   onu .gdr__form'un grid gap'i (1.1rem) veriyor, dolgu değil. */
.gdr__form--duz {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

/* Gruplar artık EN ÜST seviyedeki kutular: kart dilini onlar taşıyor.

   Zemin --surface-2'den --surface'a çıkıyor çünkü panel kabuğunun zemini
   de --surface-2 (§24a): beyaz kartın içinde "bir düzey geri çekilmiş"
   demek olan ton, sayfanın üstünde durduğunda sayfayla aynı renk oluyor
   ve grup yalnızca saç teli çizgiyle görünür kalıyordu.

   Dolgu da bölüm kartlarının ölçüsüne (§24f üstü) çıkıyor: grup artık
   ekranın kartı ve alanları diğer panel kartlarıyla aynı sol çizgiden
   başlıyor. Mobil karşılığı 640px bloğunda. */
.gdr__form--duz > .gdr__grup {
    padding: 1.15rem 1.35rem 1.35rem;
    background: var(--surface);
}

/* Agent ekranının ilk bölümü sayfa girişinin hemen altında: iki blok
   arasındaki boşluk diğer kartlarla aynı kalıyor. */
.ajn__bolum:first-of-type {
    margin-top: 1rem;
}

/* DOLGUSUZ BÖLÜM: içeriği kendi kutusunu taşıyan bölümler için (istem
   önizlemesi bir <details> ve kendi çerçevesi var). Kart dolgusu verilse
   çerçeve içinde çerçeve olurdu — yukarıdaki "iç içe kart yok" kuralının
   aynısı, yalnızca form yerine akordiyon için. */
.ajn__bolum--duz {
    padding: 0;
    background: none;
    border: 0;
}

/* ==========================================================================
   DURUM KARTI  (.ajn__durum)  —  2026-09-25

   ⚠ NEDEN .ay-alert DEĞİL. Durum bir ŞERİTTİ ve js/main.js her .ay-alert'e
   kapatma düğmesi ekliyor (AY.AlertKapat, 204 şerit için yazılmış tek satır).
   Gerçek tarayıcıda ölçüldü: sayfada iki ✕ vardı ve biri "Agent şu anda
   çalışmıyor" kutusunun üstündeydi — kullanıcı ona bastığında ekranın başlık
   cevabı siliniyordu ve yeniden yüklemeden geri gelmiyordu.

   Kart bir şerit bileşeni olmadığı için o düğme hiç eklenmiyor. Şeridin
   kalması gereken yerlerde (yorum kipi uyarısı) bileşen korunuyor ve
   markup'ta data-ay-kapat="yok" ile muaf tutuluyor.

   RENK SEBEBE GÖRE, KIRMIZI HİÇ YOK: agent'ın çalışmaması bir DURUM, arıza
   değil. Gerekçenin tamamı panel/agent.php'de.
   ========================================================================== */
.ajn__durum {
    margin: 1rem 0 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    /* Sol kenar şeridi, kenarlıkla DEĞİL inset gölgeyle: 'border-inline-start:
       3px' kutunun kendi 1px kenarlığıyla toplanıp iç genişliği 2 piksel
       daraltıyor, yani üç ton birbirinden kaymış başlıyordu. Aynı gerekçe
       § 24f'deki DURUM ŞERİDİ bloğunda da yazılı. */
    box-shadow: inset 3px 0 0 0 var(--st-serit, var(--ink-mute));
}
[dir="rtl"] .ajn__durum {
    box-shadow: inset -3px 0 0 0 var(--st-serit, var(--ink-mute));
}

.ajn__durum--ok    { --st-serit: var(--st-ok-ink);   border-color: var(--st-ok-line);   background: var(--st-ok-bg); }
.ajn__durum--uyari { --st-serit: var(--st-bek-ink);  border-color: var(--st-bek-line);  background: var(--st-bek-bg); }
/* Nötr ton: kullanıcının kendi tercihi (agent kapalı) ya da bizde bekleyen
   iş (model yok). Beyaz zemin + nötr şerit — "bir şey yanlış" demiyor. */
.ajn__durum--notr  { --st-serit: var(--ink-mute); }

/* Başlık satırı: simge · metin · eylem. */
.ajn__durum_bas {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .25rem .9rem;
}
.ajn__durum_sim {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-mute);
}
.ajn__durum_sim .pnl__ikon { font-size: 20px; }
.ajn__durum--ok    .ajn__durum_sim { color: var(--st-ok-ink); }
.ajn__durum--uyari .ajn__durum_sim { color: var(--st-bek-ink); }
.ajn__durum--notr  .ajn__durum_sim { background: var(--surface-2); }

.ajn__durum_metin {
    display: grid;
    gap: .15rem;
    min-width: 0;
}
/* Sayfanın başlık cevabı. .hsp__h2 ile aynı ölçü ailesinde ama bu bir
   <h2> ve kartın içinde: bölüm başlıklarıyla aynı puntoda olması doğru,
   ikisi de aynı seviyede. */
.ajn__durum_h {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-lg);
    font-weight: 650;
}
.ajn__durum_alt {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.ajn__durum_eylem { flex: 0 0 auto; }

/* Çıpa hedefi yapışık şeridin arkasına girmesin: durum kartındaki
   "Agent'ı aç" düğmesi #ajn-anahtar'a iniyor. Aynı kalıp .ayr__bolum[id]
   ve .hsp__bolum[id]'de de var (§ 24o). */
.ajn__anahtar[id] {
    scroll-margin-top: calc(var(--pnl-ust-h) + 1rem);
}

/* --- Durum özeti ızgarası ---------------------------------------------

   Beş hücre: kip · yorumlarda · çalışma saati · günlük sınır · eğitim
   kaydı. Hepsi formun içinde ayrı ayrı duruyordu ve "agent şu an ne
   yapıyor" sorusunu cevaplamak için 2039 piksellik formu okumak
   gerekiyordu.

   auto-fit + minmax: masaüstünde beş hücre tek satıra, tablette üçe,
   telefonda ikiye düşüyor. Sabit kolon sayısı verilmedi — hücre metinleri
   dile göre uzuyor ("Doğrudan gönder (otonom)" / "Otonom — onayımı
   beklemeden yayınlasın") ve sabit ızgarada taşıyordu. */
.ajn__ozet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: .6rem;
    margin: 1rem 0 0;
    padding: .9rem 0 0;
    border-top: 1px solid var(--hairline);
}
.ajn__ozet_hucre {
    display: grid;
    gap: .2rem;
    min-width: 0;
    padding: .55rem .7rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    background: var(--surface);
}
/* Dikkat çeken hücreler: sınırsız günlük sınır (fatura riski) ve sıfır
   aktif eğitim kaydı (agent hiçbir şey bilmiyor). Renk TEK TAŞIYICI DEĞİL —
   değerin kendisi de durumu yazıyor ("Sınırsız", "0 aktif kayıt"). */
.ajn__ozet_hucre--dikkat {
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
}
.ajn__ozet_ad {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.ajn__ozet_ad .pnl__ikon {
    font-size: 13px;
    color: var(--ink-mute);
}
/* ⚠ ETİKET SARIYOR, KIRPILMIYOR. Önce 'nowrap + text-overflow: ellipsis'
   vardı ve ekran görüntüsünde ölçüldü: beş hücreli ızgarada hücre ~190
   piksel ve "Günlük otomatik cevap sınırı" etiketi "Günlük otomatik …"
   olarak kesiliyordu — yani özetin işi olan "bu sayı neyin sayısı"
   bilgisi kayboluyordu. Kısaltılmış ikinci bir çeviri anahtarı açmak da
   seçenekti; seçilmedi, aynı şeyin iki adı olması birini değiştirdiğinde
   diğerinin geride kalması demek (bkz. panel/agent.php § ÖZET IZGARASI).
   Sarma hücreyi bir satır uzatıyor, ızgara hepsini eşitliyor. */
.ajn__ozet_ad > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.ajn__ozet_deger {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 650;
    overflow-wrap: anywhere;
}
.ajn__ozet_hucre--dikkat .ajn__ozet_deger { color: var(--st-bek-ink); }

/* ==========================================================================
   AYARLAR FORMU
   ========================================================================== */

/* Alan altı açıklaması. .ay-error'un sakin kardeşi: hata değil, kararı
   etkileyen bilgi ("her cevap ücretlidir", "uzun metin maliyeti artırır").
   Bu satırlar olmadan kullanıcı ayarı rastgele seçiyordu. */
.ajn__ipucu {
    display: block;
    margin: .3rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 400;
}

/* .ay-label içinde <span> zaten soluk; onay kutusu etiketinde ipucu
   normal ağırlıkta kalsın diye ayrıca sıfırlanıyor. */
.ay-check label .ajn__ipucu { font-weight: 400; }

/* KONTROL GENİŞLİKLERİ — ölçülmüş kusur.

   1280×900'de içerik kolonu 1032 piksel ve üç seçenekli "Üslup" açılır
   kutusu 921 PİKSEL genişliğindeydi. Bir <select>'in doğru genişliği
   içeriğine göre belirlenir; tam genişlik "buraya uzun bir şey yazılacak"
   diyor ve yanlış beklenti kuruyor.

   Üç ölçü var ve üçü de max-width, width DEĞİL: dar ekranda kutu
   kolonu dolduruyor, telefon için ayrıca kural gerekmiyor.
     --sayi   8rem    sayısal alan ("50")
     --orta  22rem    tek satırlık seçim/metin (imza, saat dışı davranışı)
     grup içi 34rem   uzun metin alanları ve kalan kontroller */
.ajn__sayi {
    max-width: 8rem;
    font-variant-numeric: tabular-nums;
}
.ajn__orta { max-width: 22rem; }
.ajn__kisa { min-height: 0; }

.ajn__grup .ay-input,
.ajn__grup .ay-select,
.ajn__grup .ay-textarea {
    max-width: 34rem;
}
/* İki kolonlu ızgaranın içindeki kontrol hücreyi doldurmalı: 34rem sınırı
   orada hücrenin kendi genişliğinden büyük olabiliyor ve iki kolon eşit
   görünmüyordu. */
.ajn__ikili .ay-input,
.ajn__ikili .ay-select,
.ajn__ikili .ay-textarea {
    max-width: none;
}

/* Bölüm başlığı ile formun arası. .hsp__h2'nin kendi alt boşluğu yok
   (liste ekranlarında başlık satırı o boşluğu taşıyor) ve agent ekranında
   başlık forma yapışıyordu.

   ⚠ .gdr__bolum 2026-09-25'te EKLENDİ — AYNI KUSUR ORADA DA VARDI VE
   ÖLÇÜLDÜ. İki sınıf yukarıdaki kart kuralını paylaşıyor (.ajn__bolum,
   .gdr__bolum, .gdr__form) ama alt boşluk yalnızca agent'a yazılmıştı;
   .gdr__bolum kullanan dört bölümde başlık ile içerik arasında SIFIR
   piksel vardı:

       panel/medya.php   "Dosya yükle"    h2 y=176..196 · form y=196
                         "Dosyalarınız"   h2 y=382..402 · ızgara y=403
       panel/gonderi.php "Sonuçlar" ve "İçerik" bölümleri (aynı kalıp)

   Ekranda görünen: başlık formun etiketine yapışık, yani iki satır tek
   blok gibi okunuyor ("Dosya yükle / Görsel ya da video seçin" üst üste
   iki başlık gibi). Kullanıcı medya ekranı için "tasarım & style
   sorunlarını gider" dediğinde ekran görüntüsünde bu yapışıklık da
   duruyordu.

   DÜZELTME İKİ EKRANI BİRDEN KAPSIYOR ve bu bilinçli: gonderi.php'nin
   aynı kusuru medya ekranı düzeltilirken bırakılırsa aynı bileşen iki
   sayfada farklı boşlukla durur. */
.ajn__bolum > .hsp__h2,
.gdr__bolum > .hsp__h2 {
    margin-bottom: 1rem;
}

/* AÇMA ANAHTARI — formun birincil kararı.

   13 alanlık bir formun başındaki "Agent açık" kutusu, diğer iki onay
   kutusuyla (emin değilse devret, gizlilik onayı) aynı görünümdeydi ve
   sıradan bir seçenek gibi okunuyordu. Hafif marka zemini onu ayırıyor;
   düğme gibi görünmüyor çünkü hâlâ bir onay kutusu. */
.ajn__anahtar {
    padding: .85rem 1rem;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--r-md);
}

/* --- FORM GRUBU  (.ajn__grup) -----------------------------------------

   Agent ayarları 12 alan + 3 onay kutusu taşıyor ve hepsi TEK DÜZ AKIŞTA
   iniyordu: 2039 piksellik bir form, alanlar arasında yalnızca eşit boşluk.
   Hangi ayarın hangi kararın parçası olduğu görünmüyordu ("İmza" üslupla
   mı ilgili, saatlerle mi?).

   Alanlar beş mantıksal gruba ayrıldı: ne yapsın · nasıl konuşsun · ne
   zaman · sınırlar · veri kullanımı. Her grup bir <fieldset> + <legend>,
   yani gruplama yalnızca görsel değil semantik: ekran okuyucu alan
   okurken grubun adını da söylüyor.

   KART İÇİNDE KART DEĞİL, SOL ÇİZGİ. Bölümün kendisi zaten kart
   (.ajn__bolum); grupları da çerçeveye alsak çerçeve içinde çerçeve
   olurdu. Sol çizgi grubu ayırmaya yetiyor ve hafif kalıyor.

   ⚠ GRUP ARALARI ARTIK DAHA GENİŞ (1.5rem): gruplar arasındaki boşluk
   grup İÇİNDEKİ alan boşluğuyla (.85rem) aynıydı ve beş grup tek uzun
   liste gibi okunuyordu. Grup ayrımı boşlukla da anlatılıyor.

   ⚠ DÜRÜST ÖLÇÜM — İKİ KOLON FORMU KISALTMADI. Beklenti kısalmaydı;
   gerçek ölçüm (1280×900) form yüksekliğini 2039 → 2003 piksele indirdi,
   yani kazanç yok sayılır. Sebebi kayıtlı: iki kolona alınan yalnızca dört
   kontrol (iki kip, ton + dil) ve aynı turda grup araları .85 → 1.5rem'e
   açıldı, yani kazanılan yükseklik boşluğa gitti. Belge ise 2943 → 2986'ya
   ÇIKTI çünkü durum kartı eklendi.

   İki kolonun gerçek kazancı yükseklik DEĞİL: 921 piksellik bir <select>
   ortadan kalktı ve ilişkili iki karar (özel mesaj kipi / yorum kipi, ton /
   dil) yan yana görünüyor. Uzun formda kaydırma sorunu ise ayrı bir şeyle
   çözüldü — yapışık kaydet satırı (.ajn__kaydet). */
.ajn__grup {
    display: grid;
    gap: .85rem;
    margin: 1.5rem 0 0;
    padding: 0 0 0 1rem;
    border: 0;
    border-inline-start: 2px solid var(--hairline);
    /* min-width: 0 — fieldset varsayılan olarak min-content genişliğinde
       kalıyor ve içindeki uzun bir <textarea> onu taşırıyor. */
    min-width: 0;
}

/* Grup başlığı. <legend> tarayıcı varsayılanında çerçeveye gömülü
   duruyor; çerçeve kalktığı için normal bir başlık gibi davranması
   gerekiyor. float ile akışa alınıyor — legend'a display:block vermek
   bazı motorlarda genişliği bozuyor. */
.ajn__grup > legend {
    float: inline-start;
    width: 100%;
    padding: 0;
    margin: 0 0 .5rem;
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 680;
}
/* Saat kümesinin başlığındaki ikincil açıklama (saat dilimi). */
.ajn__grup > legend > span {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 400;
}
/* float sonrası ilk alan başlığın altına iniyor. */
.ajn__grup > legend + * {
    clear: both;
}

/* İKİ KOLONLU ALAN IZGARASI — 900px ve üstünde.

   Kısa kontroller (iki <select>, iki saat) yan yana. Telefonda tek kolon:
   orada yan yana iki açılır kutu okunamaz ve etiketleri kırpılır.

   align-items: start — hücrelerden birinin altında ipucu ya da uyarı
   şeridi varsa (yorum kipi) diğeri onun boyuna uzamasın. */
.ajn__ikili {
    display: grid;
    gap: .85rem;
    min-width: 0;
}
@media (min-width: 900px) {
    .ajn__ikili {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        align-items: start;
    }
}

.ajn__saatler {
    display: grid;
    gap: .85rem;
}
.ajn__saatler > legend {
    margin-bottom: .5rem;
}

/* İki saat alanı yan yana; dar ekranda alt alta. auto-fit kullanılmadı —
   ikisi her zaman EŞİT genişlikte kalmalı, yoksa "başlangıç" ile "bitiş"
   farklı boyda görünüp ilişkileri kopuyor. */
.ajn__saat_ikili {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    max-width: 22rem;
}

/* Gizlilik onayı hatalıysa kutu kendi başına görünmüyordu (onay kutusu
   aria-invalid'i görsel olarak taşımıyor). Zemin + kenarlık ile
   işaretleniyor. */
.ajn__onay--hata {
    padding: .6rem .75rem;
    border: 1px solid var(--st-hata-line);
    border-radius: var(--r-md);
    background: var(--st-hata-bg);
}

/* Onay kutusu etiketinin içindeki satırlar blok: markup'ta <br> ile
   ayrılıyorlardı ve <br> bir metin ayracı, yapı değil. .ajn__ipucu zaten
   display:block; <strong> de burada blok oluyor ki ipucu altına insin. */
.ay-check label > strong {
    display: block;
}

/* --- Otonom hazırlık listesi ------------------------------------------- */

/* Kutu bir ALAN gibi görünüyordu: grubun içinde, aynı genişlikte, çerçevesiz.
   Oysa içeriği bir ön koşul listesi — yapılacak işler. Kehribar zemin +
   ikonlu başlık onu bir kontrol listesine çeviriyor. */
.ajn__otonom {
    display: grid;
    gap: .5rem;
    justify-items: start;
    padding: .75rem .9rem;
    border: 1px solid var(--st-bek-line);
    border-radius: var(--r-md);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
    font-size: var(--fs-sm);
}
.ajn__otonom_baslik {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-weight: 650;
}
.ajn__otonom_baslik .pnl__ikon { font-size: 14px; }
.ajn__otonom_liste {
    margin: 0;
    padding-inline-start: 1.15rem;
    line-height: 1.5;
}
.ajn__otonom_liste li { margin-bottom: .25rem; }

/* --- Kaydet satırı: AKIŞTA (yapışık DEĞİL) -----------------------------

   KULLANICI KARARI (2026-09-27): "kaydet ve vazgeç kartları ekran kayarken
   sabit durmasın. formun altında, olması gerektiği yerde olsun." Bir dönem
   position: sticky + bottom: 0 ile ekranın dibine yapışıyordu (uzun formda
   kaydet düğmesine erişim için); kaldırıldı. Satır artık formun sonunda,
   sayfayla birlikte kayıyor.

   Negatif yan margin ile kart dolgusunun kenarına kadar uzanıyor: kartın
   dibinde çizgiyle ayrılmış bir eylem bandı. */
.ajn__kaydet {
    margin-inline: -1.35rem;
    margin-bottom: -1.35rem;
    padding: .9rem 1.35rem;
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    border-end-start-radius: var(--r-md);
    border-end-end-radius: var(--r-md);
}

/* ==========================================================================
   EĞİTİM BİLGİLERİ LİSTESİ
   ========================================================================== */

/* Başlık satırının sağ ucu: sayaç + ekleme düğmesi birlikte. */
.ajn__bilgi_sag {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.ajn__bilgi_sag .pnl__ikon { font-size: 13px; }

/* --- Bilgi türü rozeti -------------------------------------------------- */

/* Harf yerine kısa etiket: dört tür var ve baş harfleri ayırt edilmiyordu
   ("bilgi" ile "SSS" ikisi de okunmuyor). Sabit genişlik, liste hizalı
   kalsın. */
.ajn__tur {
    flex: 0 0 auto;
    min-width: 5.5rem;
    padding: .18rem .5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* KURAL öne çıkıyor: diğer bilgileri sınırlayan tür o ve istemde en üste
   alınıyor (config/ajan.php). Görsel ayrım, listede hangi kaydın
   davranışı değiştirdiğini gösteriyor. */
.ajn__tur--kural {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}

/* DURUM İLE DİL AYRI ROZETTE.

   Eskiden tek rozette birleşiktiler ("Aktif · tr") ve bu iki AYRI olgu:
   biri agent'ın kaydı kullanıp kullanmadığı, diğeri kaydın hangi dilde
   gelen mesajlarda geçerli olduğu. Tek rozette birleşince dil, durumun bir
   parçası gibi okunuyordu. */
.ajn__bilgi_etiket {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
/* Dil kodu tek aralıklı ve büyük harf: iki karakterlik bir kod, cümle
   içinde değil bir etiket. */
.ajn__dil {
    padding: .1rem .4rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink-mute);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* SİLME ARTIK DÜĞME VE SON SIRADA.

   Eskiden .hsp__kaldir ile çıplak bir bağlantı olarak iki düğmenin
   ARASINDA duruyordu: yıkıcı eylem, "Düzenle" ile "Pasife al" arasında ve
   onlardan farklı bir biçimde.

   ⚠ .ajn__sil_link KURALLARI KALDIRILDI (2026-09-25): sınıfın yaptığı iş
   (hata tonu + 13 piksellik ikon) ortak ikon düğmesinin 'tehlike' tonuna
   geçti (§ 24b-2 .pnl__eylem--tehlike) ve sınıf markup'tan da kalktı.
   Düğmenin çubuktaki YERİ değişmedi — sıra işaretlemeden geliyor. */

/* Tür açıklamaları: seçim listesinin altında dört satır (agent-bilgi.php).
   Seçime göre değişen tek açıklama JavaScript gerektiriyordu; dördünü
   birlikte göstermek karşılaştırmayı da mümkün kılıyor. */
.ajn__tur_yardim {
    margin: .5rem 0 0;
    padding-inline-start: 1.1rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.ajn__tur_yardim li { margin-bottom: .2rem; }
.ajn__tur_yardim strong { color: var(--ink-soft); }

/* ==========================================================================
   İSTEM ÖNİZLEMESİ  (akordiyon)
   ========================================================================== */

/* ⚠ GÖRÜNÜM § 24m'deki .yrm__tani İLE AYNI DİLE GETİRİLDİ (2026-09-25):
   tarayıcının varsayılan üçgeni yerine kendi chevron'u, 44 piksel dokunma
   payı, kutunun içine çekilmiş odak halkası. Panelde iki akordiyon var ve
   ikisi farklı görünüyordu.

   İkisi artık İKİZ ve bu bir tekrar: ortak bir .ay-akordiyon bileşeni
   theme.css'e açılabilir. Açılmadı çünkü o karar bütün ekranları etkiliyor
   ve tek başına sınanması gerekir; not olarak bırakıldı. */
.ajn__onizleme {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}
.ajn__onizleme_h {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .6rem .9rem;
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 650;
    cursor: pointer;
    /* Tarayıcının varsayılan işareti ::marker (Firefox) ya da
       ::-webkit-details-marker (Safari) ile geliyor ve ikisi farklı yerde
       duruyor; kendi oku ::after ile çiziliyor. */
    list-style: none;
}
.ajn__onizleme_h::-webkit-details-marker { display: none; }
.ajn__onizleme_h::marker { content: ""; }
.ajn__onizleme_h:hover { color: var(--brand); }
.ajn__onizleme_h:focus-visible { outline-offset: -3px; }

/* Ok: kapalıyken aşağı, açıkken yukarı. Karakter değil kenarlıktan çizim —
   yazıtipine bağlı değil ve RTL'de aynalanması gerekmiyor (dikey döner). */
.ajn__onizleme_h::after {
    content: "";
    flex: 0 0 auto;
    margin-inline-start: auto;
    width: .5rem;
    height: .5rem;
    border-inline-end: 2px solid var(--ink-mute);
    border-block-end: 2px solid var(--ink-mute);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--t-fast) var(--ease);
}
.ajn__onizleme[open] > .ajn__onizleme_h::after {
    transform: rotate(-135deg) translateY(-2px);
}
.ajn__onizleme[open] > .ajn__onizleme_h {
    border-bottom: 1px solid var(--hairline);
}
.ajn__onizleme_ic {
    padding: .85rem .9rem 1rem;
}
.ajn__onizleme_ic > .ajn__ipucu { margin: 0 0 .75rem; }

/* Modele giden metin OLDUĞU GİBİ görünüyor: <pre> + pre-wrap, satır
   sonları korunuyor ama yatay kaydırma gerekmiyor. Tek aralıklı yazı
   tipi bilinçli — bu bir arayüz metni değil, makineye giden veri. */
.ajn__istem {
    margin: 0;
    padding: .85rem 1rem;
    max-height: 26rem;
    overflow: auto;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    /* RTL dillerde de metin soldan sağa: istem içeriği İngilizce/Türkçe
       yönerge ve karışık yönde okunamıyor. */
    direction: ltr;
    text-align: start;
}

/* --- Telefon (≤640px) -------------------------------------------------- */
@media (max-width: 640px) {
    .ajn__durum {
        padding: .9rem 1rem;
    }
    /* Eylem düğmesi metnin ALTINA ve tam genişlik: üç kolon 360 piksele
       sığmıyor, düğme metni 4-5 karaktere kadar daraltıyordu. */
    .ajn__durum_bas {
        grid-template-columns: auto minmax(0, 1fr);
        gap: .5rem .7rem;
    }
    .ajn__durum_eylem {
        grid-column: 2;
        justify-self: stretch;
        margin-top: .35rem;
    }

    /* Özet hücreleri ikili: 10.5rem'lik minimum 360 piksellik ekranda tek
       kolona düşüyordu ve beş hücre beş satır oluyordu. */
    .ajn__ozet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem;
    }
    /* Kip değerleri uzun cümleler ("Otonom — onayımı beklemeden
       yayınlasın"); ikili ızgarada kırpılmak yerine sarıyor, o yüzden
       nowrap yalnızca ETİKETTE. */
    .ajn__ozet_deger { font-size: var(--fs-sm); }

    .ajn__saat_ikili { grid-template-columns: minmax(0, 1fr); }
    .ajn__sayi,
    .ajn__orta { max-width: 100%; }

    /* Tür rozeti tam satıra: 5.5rem sabit genişlik dar ekranda kimliği
       sıkıştırıyordu. */
    .ajn__tur {
        min-width: 0;
        justify-self: start;
    }
    .ajn__bilgi_etiket { justify-content: flex-start; }

    /* Yapışık kaydet satırı telefonda da yapışık kalıyor ama dolgusu
       kartın telefon dolgusuna göre daralıyor (§ 24h kart dolgusu
       mobilde 1.15rem/1.35rem kalıyor, negatif margin ona eşit). */
    .ajn__kaydet .ay-btn { width: 100%; }
}

/* --- 24i · API bağlantıları  (.bgl*)  —  panel/baglantilar.php ----------- */

/* Platform işareti YENİDEN TANIMLANMIYOR: §24e'deki .hsp__isaret aynen
   kullanılıyor. İki ekranda aynı platform aynı kareyle görünmeli; ayrı bir
   .bgl__isaret yazmak, birinin boyutu değiştiğinde diğerinin geride
   kalması demekti. Durum renkleri de §24f'deki --st-* tokenlarından. */

/* --- Niye kendi uygulamam (açılır açıklama) ----------------------------- */

/* <details> varsayılan görünümü çıplak duruyor. Kutuya alınıyor ama
   ZEMİN VERİLMİYOR: uyarı ya da hata gibi görünmemeli, sadece isteğe bağlı
   bir açıklama.

   ⚠ ÜST BOŞLUK 2026-09-25'te EKLENDİ — KUTU BİR ÜSTÜNDEKİNE YAPIŞIKTI.

   Kullanıcı bildirdi: kılavuz şeridi ile bu kutu arasında hiç boşluk yok,
   iki çerçeve tek bir kutu gibi görünüyor. Sebep iki sıfırın üst üste
   gelmesi:
     .ay-alert          margin: 0            (theme.css § 9 — şerit kendi
                                              boşluğunu taşımıyor, her ekran
                                              kendi ritmini kuruyor)
     .bgl__kilavuz_serit margin: 1rem 0 0    (alt boşluk YOK)
     .bgl__neden         margin: 0 0 1.5rem  (üst boşluk YOK)
   İkisi kardeş blok, yani boşlukları çökse bile sonuç sıfır.

   ÜST BOŞLUK BU KUTUYA VERİLDİ, şeridin altına değil: şerit ortak bileşenin
   (.ay-alert) üstüne binen bir değiştirici ve alt boşluk eklenirse listenin
   başındaki bilgi/hata şeritleri de (aynı sınıf) etkilenir. Kutu ise tek bu
   ekranda var.

   DEĞER 1rem: şeridin ve özet şeridinin üst boşluğuyla aynı, yani liste
   kipinin dikey ritmi tek değerde kalıyor (giriş → özet → şerit → kutu).
   Alt boşluk 1.5rem'de BIRAKILDI: altında kart ızgarası var (kendi üst
   boşluğu 1.25rem) ve kartlar bir bölüm başlangıcı, açıklama kutusundan
   biraz daha uzak durması doğru. */
.bgl__neden {
    margin: 1rem 0 1.5rem;
    padding: .7rem .9rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
}
.bgl__neden > summary {
    cursor: pointer;
    font-weight: 600;
}
.bgl__neden > p {
    margin: .6rem 0 0;
    color: var(--ink-mute);
    line-height: 1.55;
}

/* --- Platform listesi — KALDIRILDI  (2026-09-25) ------------------------

   .bgl__liste · .bgl__satir · .bgl__kimlik · .bgl__ad · .bgl__alt buradaydı:
   dört kolonlu bir satır ızgarası (işaret · kimlik · durum · eylem) ve
   §24e'deki .hsp__satir ile bilinçli olarak aynı ölçülerdeydi.

   Liste kipi § 24q'da KART IZGARASINA döndü (kullanıcı kararı: "amatör
   duruyor"), yani bu sınıfların HİÇBİRİ artık basılmıyor. Silinme sebebi
   yalnızca ölü ağırlık değil — aşağıdaki dar ekran bloğu .bgl__etiket'e
   `grid-column: 2` veriyordu ve o rozet YENİ ekranda da kullanılıyor.
   Kural kalsaydı telefonda kartın içindeki durum hapı, artık var olmayan
   bir ızgaranın ikinci kolonuna konumlanmaya çalışırdı.

   Kaldırılanın gerekçesi (iki listenin aynı ızgarayı paylaşması) ve niye
   bırakıldığı panel/baglantilar.php başındaki ".hsp__satir IZGARA
   ORTAKLIĞI" bloğunda ölçümle yazılı. */

/* --- Durum rozeti ------------------------------------------------------- */

/* Varsayılan (girilmedi) NÖTR: hiç dokunulmamış platform yanlış yapılmış
   gibi görünmemeli. Renk tek başına taşıyıcı değil, metin de yazıyor. */
.bgl__etiket {
    padding: .18rem .55rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.bgl__etiket--ok {
    border-color: var(--st-ok-line);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
}
.bgl__etiket--uyari {
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
}
.bgl__etiket--hata {
    border-color: var(--st-hata-line);
    background: var(--st-hata-bg);
    color: var(--st-hata-ink);
}

/* Sınama hatası TAM SATIR genişliğinde alta iniyor (§24e'deki .hsp__hata
   ile aynı gerekçe): platform mesajları uzun, satır içinde kırpılırsa işe
   yaramıyor. */
.bgl__hata {
    grid-column: 1 / -1;
    color: var(--st-hata-ink);
    font-size: var(--fs-sm);
}

/* --- Tek platform başlık kartı + adım kartları — KALDIRILDI  (2026-09-25)

   .bgl__ust · [dir=rtl] .bgl__ust · .bgl__h2 · .bgl__ust .hsp__isaret ·
   .bgl__ust .bgl__etiket · .bgl__bolum · .bgl__h3 · .bgl__adim buradaydı.

   Karşılıkları § 24q'da: başlık kartı .bgl__kunye (artık doluluk ölçeri de
   taşıyor), adım kartları .bgl__adim_kart (artık tamam/sırada/bekliyor
   durumu taşıyor). Eski sınıflar hiçbir ekranda basılmıyor.

   ⚠ .bgl__adim İLE .bgl__adim_no KARIŞTIRILMAMALI: birincisi kaldırılan
   numara dairesiydi, ikincisi § 24q'daki yenisi. Sınıf adları farklı
   olduğu için eski kural yenisini etkilemiyordu; yine de silindi çünkü
   okuyan kişi iki numara dairesi olduğunu sanıyordu. */

.bgl__aciklama {
    margin: 0 0 .75rem;
    /* Genişlik sınırı KALKTI — bkz. § 24 KARAR (kartlar sayfa genişliğinde). */
    color: var(--ink-mute);
    line-height: 1.55;
}

/* Alan altı / satır altı açıklaması — §24h'deki .ajn__ipucu ile aynı rol.
   Ayrı sınıf, çünkü burada <span> olarak satır içinde de kullanılıyor
   (adres yenileme düğmesinin yanında). */
.bgl__ipucu {
    display: block;
    margin: .3rem 0 0;
    /* Genişlik sınırı KALKTI — bkz. § 24 KARAR (kartlar sayfa genişliğinde). */
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

/* --- Kopyalanacak adresler --------------------------------------------- */

.bgl__adres {
    margin: 0 0 1.1rem;
    /* max-width KALKTI: kutu artık kartın içinde ve kartın genişliği
       sınırı belirliyor. Eskiden adres kutusu 46rem, kimlik alanı 34rem
       ile sınırlıydı; ikisi yan yana görünmediği hâlde ölçüldüğünde 736px
       ve 544px çıkıyor, aynı forma ait iki kutu farklı genişlikte
       duruyordu. */
}
.bgl__adres:last-child {
    margin-bottom: 0;
}
.bgl__adres_etiket {
    display: block;
    margin: 0 0 .3rem;
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* Kutu + kopyala düğmesi tek satır. Kutu esniyor, düğme kendi genişliğinde
   kalıyor; dar ekranda düğme alta geçiyor (aşağıdaki medya sorgusu). */
.bgl__adres_satir {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}
.bgl__adres_satir .bgl__adres_kutu {
    flex: 1 1 auto;
    min-width: 0;
}

/* KOPYALA DÜĞMESİ.

   Webhook adresi 70+ karakter ve müşteri onu platformun konsoluna
   yazacak. Elle seçmek masaüstünde zahmetli, telefonda neredeyse
   yapılamaz; yarım kopyalanan bir adres ise sessizce çalışmayan bir
   kurulum demek. Kutu odakta tümünü seçiyor (onfocus) ama bu yalnızca
   klavye/fare kullanıcısına yardım ediyordu.

   .ay-btn--sm DEĞİL: yükseklik adres kutusuyla hizalanmak zorunda
   (align-items: stretch) ve sabit 32px orada kısa kalıyor. */
.bgl__kopyala {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .8rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--t-base) var(--ease),
                border-color var(--t-base) var(--ease),
                color var(--t-base) var(--ease);
}
.bgl__kopyala:hover,
.bgl__kopyala:focus-visible {
    background: var(--brand-soft);
    border-color: var(--brand-line);
    color: var(--brand);
}
.bgl__kopyala .ay-ico {
    font-size: 13px;
}

/* Kopyalandı hâli: yeşil. Renk TEK BAŞINA taşıyıcı değil — düğmenin metni
   de değişiyor ve durum aria-live bölgesine yazılıyor (js/theme.js →
   Kopyala), yani ekran okuyucu da duyuyor. */
.bgl__kopyala.is-tamam {
    background: var(--st-ok-bg);
    border-color: var(--st-ok-line);
    color: var(--st-ok-ink);
}

/* Onay ikonu yalnızca kopyalandı hâlinde, kopyala ikonu yalnızca normal
   hâlde: iki ikon da DOM'da duruyor, JS sınıf değiştiriyor. */
/* 'inline-block': FA ikonu satır içi öğe (aynı gerekçe .pw__toggle'da). */
.bgl__kopyala .bgl__kopyala_ok { display: none; }
.bgl__kopyala.is-tamam .bgl__kopyala_ok { display: inline-block; }
.bgl__kopyala.is-tamam .bgl__kopyala_ikon { display: none; }

/* readonly input — <code> DEĞİL (gerekçe panel/baglantilar.php'de).
   Tek parmak dokunuşuyla tümü seçilebilsin diye tam genişlik.

   font-family monospace: adresteki l/1/I ve O/0 ayırt edilebilsin.
   Müşteri bunu elle yazmayacak ama doğru kopyaladığını gözle denetliyor. */
.bgl__adres_kutu {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    /* readonly alan hafifçe geri çekiliyor: düzenlenebilir kimlik
       alanlarından (--surface) ayırt edilsin. */
    background: var(--surface-2);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
    /* Uzun adres kutunun içinde kaydırılabilir kalıyor; kırpılıp "…" ile
       bitse müşteri eksik kopyaladığını fark etmezdi. */
    text-overflow: clip;
}
.bgl__adres_kutu:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.bgl__yenile {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    margin: .5rem 0 0;
}
.bgl__yenile .bgl__ipucu { margin: 0; }

/* --- Kimlik alanları --------------------------------------------------- */

.bgl__alan {
    margin: 0 0 1.1rem;
    /* Genişlik sınırı kartta (bkz. .bgl__adres notu): aynı formdaki iki
       kutunun farklı genişlikte olması için sebep yok. */
}
.bgl__alan_etiket {
    display: block;
    margin: 0 0 .3rem;
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* Zorunlu yıldızı (.bgl__zorunlu) KALDIRILDI (2026-09-25): yıldızın yerini
   metinli hap aldı (§ 24q → .bgl__zorunlu_hap / .bgl__istege_bagli).
   Gerekçe panel/baglantilar.php'de: yıldız bir sözleşmeydi ve o sözleşme
   hiçbir yerde yazılı değildi, üstelik aria-hidden olduğu için ekran
   okuyucuya zorunluluk bilgisi hiç ulaşmıyordu. */

/* Kimlik değerleri de tek karakter hassasiyetinde (App ID rakam dizisi),
   o yüzden adres kutusuyla aynı yazı tipi. */
.bgl__alan_kutu {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
}
.bgl__alan_kutu:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* Kimlik alanı adres kutusundan KISA: App ID 16 hane, App Secret 32.
   Kartın tamamına yayılsa alanın ne beklediği anlaşılmıyordu (aynı karar
   §24h'deki .ajn__sayi'de de verildi). Adres kutuları tam genişlikte
   kalıyor çünkü onlar KOPYALANACAK, okunacak değil. */
.bgl__alan_kutu {
    max-width: 30rem;
}

/* Kaydet satırı: kartın dibinde, ayırıcı çizginin altında. Çizgi olmadan
   düğme son alanın hemen altında duruyor ve "bu alanın düğmesi" gibi
   okunuyordu; asıl işi FORMUN tamamını kaydetmek. */
.bgl__dugmeler {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hairline);
}

/* Silme bağlantısı kaydetme düğmesinden UZAKTA ve düğme DEĞİL: yanlışlıkla
   basılması geri alınamaz bir iş (§24e'deki .hsp__kaldir ile aynı karar).

   ADIM KARTLARININ DIŞINDA: bir kurulum adımı değil, akışı geri alan bir iş.
   Kart içinde durduğu sürece numaralı adımların parçası gibi okunuyordu.
   Ayırıcı çizgi kartların kenarıyla hizalı kalıyor çünkü ikisi de aynı
   kapsayıcıyı dolduruyor (bkz. § 24 KARAR). */
.bgl__sil_satir {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}

/* Dokunma hedefi en az 24px (§24e'deki .hsp__kaldir ile aynı gerekçe:
   geri alınamaz eylem, en küçük hedefte durmamalı). */
.bgl__sil {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--st-hata-ink);
    font-size: var(--fs-sm);
}

/* --- Dar ekran --------------------------------------------------------- */

/* ⚠ BU BLOK 2026-09-25'te BUDANDI. İçinde liste ızgarasının dar ekran
   davranışı da vardı (.bgl__satir iki sıraya bölünüyor, rozet ve eylem
   ikinci kolona geçiyor); liste kart ızgarasına döndüğü için o kurallar
   kaldırıldı — gerekçesi yukarıdaki "Platform listesi — KALDIRILDI"
   notunda, telefondaki yeni davranış § 24q'nun dar ekran bloğunda.

   Geriye adres kutusunun davranışı kaldı ve o DEĞİŞMEDİ: kutu ile kopyala
   düğmesi telefonda alt alta geçiyor. Eşik 640 ve §24e ile aynı; eşiğin
   neden 640 olduğu §24e'deki blokta yazılı, oradan ayrılmamalı. */
@media (max-width: 640px) {
    /* Kopyala düğmesi adres kutusunun ALTINA: yan yana dururken kutuya
       kalan genişlik 150 piksele iniyor ve webhook adresinin görünen
       kısmı "http://ayduke.com/we…" kadar kalıyordu. */
    .bgl__adres_satir {
        flex-direction: column;
        align-items: stretch;
    }
    .bgl__kopyala {
        justify-content: center;
        min-height: 40px;
    }

}

/* --- Nötr şerit (.ay-alert--notr) --------------------------------------

   theme.css'te .ay-alert'in ÜÇ varyantı var: --ok (yeşil), --err (kırmızı)
   ve panelde --uyari (sarı). Dördüncü bir duruma ihtiyaç çıktı: ne iyi, ne
   kötü, ne de uyarı — sadece BİLGİ. Agent'ın kapalı olması böyle bir durum;
   kullanıcı onu kendisi kapatmış.

   Varyant olmadan şerit çıplak .ay-alert ile basılıyordu ve o sınıf ZEMİN
   VERMİYOR: panelin gri zemininde (--surface-2) beyaz olmayan, çerçevesiz
   bir metin bloğu kalıyordu — şerit olduğu anlaşılmıyordu.

   Beyaz zemin + hairline: sayfa zemininden ayrılıyor, kart diliyle uyumlu,
   hiçbir duygu yüklemiyor. box-shadow ile çerçeve (border değil): kutu
   genişliğini değiştirmiyor, diğer şeritlerle aynı hizada duruyor.

   ⚠ KAPSAM .auth'A DA AÇILDI (2026-09-24): havale ekranının "havaleniz
   bekleniyor" şeridi tam bu duruma örnek ve o ekran .pnl DIŞINDA (odak
   kabuğu). Çıplak .ay-alert ile basılıyordu, yani kartın beyazında
   çerçevesiz bir paragraf kalıyor ve şerit olduğu anlaşılmıyordu (ekranda
   görüldü). Kullandığı iki değer (--surface, --hairline) genel token, yani
   kapsam açmak başka bir bağımlılık getirmiyor — --uyari'nin aksine
   (o --st-bek-* kullanıyor ve tokenları § 24f'de .pnl, .auth kapsamında). */
.pnl .ay-alert--notr,
.auth .ay-alert--notr {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline);
}

/* --- Havale onayı bekliyor şeridinin eylemleri (panel/_havale_serit.php) --

   KULLANICI KARARI (2026-09-24): şeride "Ödeme bildirimi" düğmesi eklendi,
   yanında eski "Havale bilgilerini gör" bağlantısı duruyor.

   ŞERİT İÇİNDE YATAY BİR SATIR — VE SARMALAYICI ŞART. .ay-alert--blok
   (theme.css § 9) içeriği DİKEY diziyor: iki eylem sarmalayıcısız
   konulduğunda alt alta iki tam satır oluyor ve şerit gereksiz uzuyordu.
   Bu kutu ikisini yan yana tutuyor.

   flex-wrap: wrap — telefonda (ve Almanca/Hollandaca gibi uzun etiketli
   dillerde) iki düğme yan yana sığmıyor; sıkışıp metinleri kelime kelime
   kırmak yerine alt alta geçiyorlar. Kırılım eklenmedi: eşiği içeriğin
   kendisi belirliyor, ekran genişliği değil.

   ⚠ align-items: center DEĞİL flex-start. İkisinden biri (<a>) tek satır,
   diğeri bir <form> içinde; ortalamak iki öğe farklı yükseklikte olduğunda
   düğmelerin taban çizgisini kaydırıyordu.

   ⚠ .ay-alert--blok .ay-btn { align-self: flex-start } BU KUTUYA DOKUNMUYOR:
   o kural DÜĞMEYE bakıyor, kutu düğme değil. Kutu stretch alıyor ve
   genişliği kaplıyor; içindeki düğmeler yine kendi içeriği kadar. */
.hvs__eylem {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem;
}

/* Şeridin başlığı ("Havale onayı bekliyor.") — 2026-09-24 · "tasarımını
   iyileştir."

   Önce <strong> + <br> ile basılıyordu ve başlık gövdeye YAPIŞIYORDU:
   aralarında yalnızca satır yüksekliği vardı, oysa altındaki ikincil satır
   (.hvs__bildirildi) ile düğme satırı arasında gerçek boşluklar var. Kartın
   en önemli satırı, en az havası olan satırdı.

   display: block — <br> yerine geçiyor (o yüzden markup'tan kaldırıldı,
   ikisi birlikte boş bir satır daha açıyordu). Paragraf hâlâ tek paragraf:
   başlık ile gövde aynı cümlenin iki parçası.

   .15rem BİLİNÇLİ OLARAK KÜÇÜK: bu bir kart başlığı değil, cümlenin ilk
   satırı. .5rem denendi ve başlık kendi başına bir blok gibi kopuyordu —
   şeridin tamamı tek bir bildirim olarak okunmalı. */
.hvs__baslik {
    display: block;
    margin-block-end: .15rem;
}

/* --- Şeridin ÖZET SATIRI  (.hvs__ozet)  —  KULLANICI KARARI (2026-09-24)
       "kartını da sadeleştir. çok kalabalık duruyor… sıfırdan oluştur." ----

   ⚠ .hvs__bildirildi SİLİNDİ. O, kartın ÜÇÜNCÜ paragrafıydı ("Ödeme
   bildiriminiz … tarihinde bize ulaştı. Havaleyi hesabımızda gördüğümüzde
   aboneliğiniz açılır.") ve ikinci cümlesi birinci paragrafın son cümlesiyle
   BİREBİR aynı şeyi söylüyordu. Kalabalığın kaynağı uzunluk değil tekrardı.

   Yerine gelen şey bir CÜMLE DEĞİL, VERİ SATIRI:
       Profesyonel · Yıllık · 1.149 EUR · AY-000023 [· Bildirildi: …]
   Müşterinin bu karta bakma sebebi "ne kadar, hangi referans" sorusu; cümleye
   gömülü sayılar okunmayı zorunlu kılıyor, hizalı bir satır TARANIYOR.

   flex-wrap: wrap — dar ekranda ve uzun paket adlarında satır kendi kırılıyor;
   kırılım eklenmedi, eşiği içerik belirliyor.

   align-items: baseline — tutar vurgulu (600) ve ötekiler normal ağırlıkta;
   center hizası farklı ağırlıkların taban çizgisini kaydırıyordu.

   gap satır/kolon AYRI: kırıldığında alt alta gelen iki satır .15rem ile
   sıkı kalıyor (tek mantıksal satır oldukları okunuyor), yan yana öğeler ise
   .5rem + ayracın dolgusu kadar açık.

   RENK VERİLMEDİ (inherit): şerit --uyari tonunda ve kutunun mürekkebi
   --st-bek-ink. Bir dönem burada var(--ink-soft) yazıyordu ve sarı zeminin
   ortasında gri bir satır YABANCI duruyordu. Soldurma da yok: opacity .8
   denendiğinde --fs-sm boyutunda kontrast 4.5:1 sınırına iniyordu
   (WCAG 1.4.3). Hiyerarşiyi ÖLÇÜ taşıyor (küçük punto), renk değil.

   ⚠ .ay-alert--blok > p { margin: 0 } bu öğeyi de yakalıyor (doğrudan çocuk),
   yani boşluk kutunun gap'inden geliyor — burada margin verilmiyor. */
.hvs__ozet {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

/* AYRAÇ CSS'TEN, PHP'DEN DEĞİL. Hangi öğenin son olduğu bildirim durumuna
   göre değişiyor (tarih öğesi koşullu) ve :last-child bunu kendiliğinden
   çözüyor; PHP'de yapmak "kaçıncı öğedeyim" sayacı gerektirirdi.

   ⚠ AYRAÇ ÖĞENİN İÇİNDE (::after), aralarında DEĞİL: satır kırıldığında '·'
   önceki öğenin sonunda kalıyor, yeni satırın başına düşmüyor. Aynı kalıp
   kırıntı menülerinde de kullanılır.

   padding-inline-start ile ayracın SOLUNDA boşluk açılıyor, sağındaki ise
   flex gap'ten geliyor — ikisi eşit (.5rem), yani ayraç ortalı görünüyor.
   Mantıksal özellik: Arapçada kendiliğinden aynalanıyor.

   opacity: .55 — ayraç bir bilgi değil, ayırıcı. Tam tonda basıldığında
   satırda beş nokta birden göze çarpıyordu. */
.hvs__ozet > span:not(:last-child)::after {
    content: "·";
    padding-inline-start: .5rem;
    opacity: .55;
}

/* Tutar ve referans: müşterinin ARADIĞI iki şey. Vurguyu paket ve döneme de
   vermek hiçbirini vurgulamamakla aynı sonucu verirdi.

   white-space: nowrap — "1.149 EUR" ikiye bölünmemeli. Aynı karar paket
   kartının fiyatında da var (.pks__tutar, § 23n) ve orada ÖLÇÜLMÜŞ bir kusurun
   karşılığıydı: tutar ile birim ayrıldığında sayı tek başına satır sonunda
   kalıyor ve okunmuyor. Burada kutunun tamamına değil yalnızca bu öğeye
   veriliyor — paket adı gerekirse kırılabilir, satır zaten wrap ediyor.
   Referansta zararsız: içinde boşluk yok. */
.hvs__vurgu {
    font-weight: 600;
    white-space: nowrap;
}

/* --- Uyarı şeridi (.ay-alert--uyari) ------------------------------------ */

/* theme.css'te yalnızca --ok (yeşil) ve --err (kırmızı) var. Bu şerit ikisi
   de DEĞİL: "uç nokta henüz canlı değil" bir hata değil, kullanıcının
   bilmesi gereken bir durum. Kırmızı basılsaydı müşteri yanlış bir şey
   yaptığını sanıp kimlikleri silmeye başlardı.

   theme.css'e EKLENMEDİ, panel kapsamında duruyor: kullandığı --st-bek-*
   tokenları §24f'de .pnl, .auth altında tanımlı, theme.css onları göremez.

   ⚠ KAPSAM .auth'A DA AÇILDI (2026-09-24) — KULLANICI KARARI: "[havale onayı
   bekliyor] kartını warning allert içinde yap."

   O şerit (panel/_havale_serit.php) İKİ ekranda basılıyor: pano .pnl
   kabuğunda, PAKET SEÇİMİ .auth kabuğunda. Kapsam yalnızca .pnl kalsaydı
   şerit paket seçiminde ZEMİNSİZ çıplak bir .ay-alert olurdu — ve asıl
   ihtiyacı olan müşteri (erişimi kapalı, panoya giremeyen) tam o ekranda.
   Aynı gerekçeyle --notr da açılmıştı (yukarıdaki blok); token bloğu zaten
   '.pnl, .auth' kapsamında olduğu için açmak yeni bir bağımlılık getirmiyor. */
.pnl .ay-alert--uyari,
.auth .ay-alert--uyari {
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
    box-shadow: inset 0 0 0 1px var(--st-bek-line);
}

/* --- 24i-1b · Yönetici panelinin İKONLARI  (.adk__*_sim)
       —  adk-panel/index.php -----------------------------------------------

   ⚠ BU KLASÖRDE BİR DÖNEM HİÇ İKON YOKTU. adk-panel/'in yedi sayfasında sıfır
   ikon vardı: pano sayaçları, gezinme düğmeleri, çıkış, ödeme onay listesi ve
   posta ekranı tamamen çıplak metindi. Müşteri paneli (panel/) ise dokuz menü
   satırının hepsinde ikon taşıyordu — aynı ürünün iki yüzü iki farklı
   olgunlukta görünüyordu.

   Sebebi teknikti, tercih değil: ikon eklemek satır içi SVG çizmek ya da
   başka bir dosyadan kopyalamak demekti, yani pahalıydı. Font Awesome'a
   geçildikten sonra (bkz. _ikon.php) maliyet tek satıra indi.

   ÜÇ AYRI ÖLÇÜ, ÜÇ AYRI İŞ:

     .adk__h1_sim    Sayfa başlığı. Kalkan ikonu "burası yönetim paneli"
                     diyor — iki panel aynı temayı kullandığı için ekran
                     görüntüleri birbirine benziyor.
     .adk__h2_sim    Kart başlıkları (Müşteriler · Mesajlar). Başlık
                     text-uppercase ve küçük; ikon da o ölçekte kalıyor.
     .adk__kutu_sim  Sayaç kutularının etiket satırı. En küçük ölçü: kutunun
                     asıl bilgisi ALTTAKİ SAYI ve ikon onu bastırmamalı.

   HİÇBİRİ RENK TAŞIMIYOR ki etiketin tonunu bozmasın: ikisi de
   currentColor ile başlığın/etiketin rengini alıyor, yalnızca opaklıkla
   geri çekiliyorlar. Bastırma gerekçesi panel menüsündekiyle aynı (§ 24a):
   göz önce YAZIYI okumalı, ikon işaret olarak arkada kalmalı.

   ⚠ ERİŞİLEBİLİRLİK BEDELİ YOK: ikonların hepsi aria-hidden (ay_ikon) ve
   anlamı yanındaki metinde yazılı. Kontrast eşiği metne uygulanır,
   dekoratif çizime değil — yani opaklık düşürmek kural ihlali değil. */
.adk__h1_sim {
    font-size: .8em;
    margin-inline-end: .45rem;
    color: var(--brand);
    opacity: .85;
}

/* ⚠ ÖLÇÜ 'em', PİKSEL DEĞİL. Bu sınıf İKİ FARKLI başlık seviyesinde
   kullanılıyor: panoda ve ödeme/posta ekranlarında .h6 (küçük, uppercase),
   teşhis ekranında .h5 (belirgin biçimde büyük). Sabit 12 piksel ikisinden
   birinde her zaman yanlış olurdu — h5'te cılız, h6'da kaba. 'em' başlığın
   kendi ölçüsünü takip ediyor. */
.adk__h2_sim {
    font-size: .85em;
    margin-inline-end: .375rem;
    opacity: .7;
}

.adk__kutu_sim {
    font-size: 12px;
    margin-inline-end: .3125rem;
    opacity: .75;
}

/* İŞ kutusunda ikon da dikkat tonunu alıyor: kutunun tamamı kehribar
   (aşağıdaki § 24i-2) ve --brand laciverti orada yabancı duruyordu. */
.adk__kutu--is .adk__kutu_sim {
    color: #8A5A06;
    opacity: 1;
}

/* --- 24i-2 · Yönetici panosundaki İŞ kutusu  (.adk__kutu--is)
       —  adk-panel/index.php ------------------------------------------------

   Onay bekleyen havale sayacı (2026-09-24, kullanıcı kararı: "panelden de
   ödeme onayla, aboneliği aktif et işlemi olsun"). Diğer altı kutu düz sayı;
   bu kutu bir İŞ LİSTESİNE işaret ediyor ve sıfırdan büyükken bağlantı
   oluyor — o yüzden ayrılıyor.

   ⚠ TONLAR SABİT YAZILI, --st-bek-* TOKEN'INDAN GELMİYOR. Değerler o üçlüyle
   BİREBİR aynı (#FEF6E7 / #F3D9A4 / #8A5A06) ama token bloğu '.pnl, .auth'
   kapsamında (§ 24f) ve yönetici panelinin <body>'sinde o sınıfların ikisi de
   yok — tanımsız değişken bildirimi geçersiz kılar, kutu renksiz kalırdı.
   Kapsamı üçüncü bir seçiciye açmak için yönetici paneline sınıf eklemek
   gerekiyordu; üç değer için o kadar dokunuş fazla.
   DEĞİŞİRSE İKİSİ BİRLİKTE değişmeli (§ 24f'deki --st-bek-* üçlüsü).

   Renk TEK taşıyıcı değil: kutunun etiketi ("Onay bekleyen havaleler") ve
   sayının kendisi de aynı şeyi söylüyor (WCAG 1.4.1). */
.adk__kutu--is {
    border-color: #F3D9A4;
    background: #FEF6E7;
    color: inherit;
}
.adk__kutu--is .h4 {
    color: #8A5A06;
}
@media (hover: hover) and (pointer: fine) {
    .adk__kutu--is:hover {
        border-color: #8A5A06;
    }
}

/* --- 24p · Aboneliğim  (.abn__*)  —  panel/abonelik.php ------------------

   KULLANICI KARARI (2026-09-24): "eğer paketim varsa da paket detayımı ya da
   paket bilgisi, geçmişi gösterebilir."

   Ekranın ÜÇ bölümü var ve üçü de MEVCUT bileşenlerle kuruldu: .ayr__bolum
   (bölüm kartı), .hsp__h2 (bölüm başlığı), .ayr__liste (etiket/değer ızgarası),
   .ayr__ipucu (açıklama satırı). Buraya yalnızca ödeme geçmişi listesi ve
   durum rozeti için gereken kurallar yazıldı — yeni bir kart dili
   kurulmuyor.
   ------------------------------------------------------------------------- */

/* --- KART BAŞI: paket adı + durum rozeti  —  2026-09-24 -----------------

   KULLANICI İSTEĞİ: "abonelik.php sayfasını iyileştir · tasarım, padding,
   layout gibi sorunları da gider."

   Paket adı ve durum, bölümün <dl>'sinin ilk İKİ SATIRIYDI ("Paket →
   Profesyonel", "Durum → Etkin") ve dokuz satırlık bir dizide "Otomatik
   yenileme" ile aynı ağırlıkta duruyorlardı. Oysa ekranın CEVAPLADIĞI SORU
   o ikisi. Listeden çıkıp kartın başına, büyük puntoya taşındılar.

   align-items: center — rozet metnin taban çizgisiyle değil ORTASIYLA
   hizalı: 1.35rem'lik ada baseline ile bağlanan rozet 2 piksel aşağıda
   duruyordu.

   flex-wrap: wrap — Arapça/Almanca uzun durum metinlerinde ("Wartet auf
   Bestätigung") rozet alt satıra geçiyor; kırılım eklenmedi, eşiği içerik
   belirliyor. */
.abn__kart_bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    margin: .75rem 0 0;
}

.abn__ad {
    margin: 0;
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 680;
    line-height: 1.2;
}

/* --- AYRINTI IZGARASI (.abn__bilgi)  —  ÖLÇÜLMÜŞ LAYOUT DÜZELTMESİ -------

   ⚠ .ayr__liste BİLİNÇLİ OLARAK KULLANILMIYOR.

   O bileşen iki kolonlu bir <dl>: 'minmax(0, max-content) minmax(0, 1fr)'.
   panel/ayarlar.php'de doğru çalışıyor çünkü oradaki değerler UZUN (e-posta,
   telefon). Burada değerler KISA ve ölçüm şunu gösterdi: 1280 piksellik
   ekranda etiket kolonu 144, DEĞER KOLONU 782 piksel. "Medya alanı" ile
   "5 GB" arasında ekranın yarısı kadar boşluk kalıyordu ve göz ikisini
   eşleştirmek için satırı baştan sona taramak zorundaydı.

   PAIR IZGARASI: etiket değerin ÜSTÜNDE, çiftler auto-fit ile yan yana.
   minmax(12rem, 1fr) — 12rem (192px) en uzun etiketin ("Otomatik yenileme")
   tek satırda sığdığı ölçü. Sonuç: masaüstünde dört kolon (984 piksel dolu
   kullanılıyor), telefonda tek kolon; etiket ile değer hiçbir genişlikte
   birbirinden kopmuyor.

   Üstündeki ince çizgi kart başını ayrıntıdan ayırıyor — iki bölge tek
   kartın içinde ama farklı ağırlıkta. padding-top ile margin AYNI değer:
   çizginin iki yanı eşit boşluk alıyor (aynı kalıp .pks__ozellik'te de var). */
.abn__bilgi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .9rem 1.5rem;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}

/* min-width: 0 — ızgara öğesi içindeki uzun bir değer (tarih + kalan gün)
   kolonu min-content'ten geniş yapıp ızgarayı taşırmasın. */
.abn__cift {
    min-width: 0;
}

/* ⚠ .abn__cift--genis DENENDİ VE KALDIRILDI (aynı tur).

   Fikir şuydu: en uzun değeri taşıyan çifti (otomatik yenileme) tam satıra
   yaymak, çünkü 12rem'lik bir kolonda cümle iki satıra iniyor.

   ÖLÇÜM TERSİNİ GÖSTERDİ. Yedi çift auto-fit ile şöyle diziliyor:
     tam satır VARKEN  (1280px)  4 + 2 + 1(tam)   → ikinci satırda iki boş kolon
     tam satır YOKKEN  (1280px)  4 + 3            → dizi tam
   Cümlenin iki satıra inmesi ızgarada zararsız (satır yüksekliği kendiliğinden
   büyüyor, 73 piksel); ikinci satırdaki iki boş kolon ise ekranda GÖRÜNÜR bir
   boşluk. Tırtıklı görünen düzen, iki satırlık bir değerden kötü.

   Tek çiftin bazı genişliklerde satırda yalnız kalması (1024 · 901 · 520'de
   öyle oluyor) kabul edildi: yedi öğe hiçbir kolon sayısına tam bölünmüyor ve
   ızgaranın son satırının eksik kalması alışılmış bir görüntü. */

.abn__et {
    margin: 0 0 .1rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.abn__deg {
    margin: 0;
    color: var(--ink);
    /* Uzun bir değer (referans, uzun tarih) kolonu taşırmasın. */
    overflow-wrap: anywhere;
}

/* Bölüm içindeki açıklama satırı.

   ⚠ .ayr__ipucu DEĞİL — ÖLÇÜLMÜŞ PADDING KUSURU. O sınıf 'margin: .3rem 0 0'
   taşıyor, yani YALNIZCA ÜST boşluk; düğmenin kendi margin'i de 0 olduğu için
   "Paketleri karşılaştır" paragrafa YAPIŞIK basılıyordu (ölçüldü: aradaki
   boşluk 0 piksel). Bu sınıf alt boşluğu da veriyor.

   ⚠ .ayr__ipucu GLOBAL OLARAK DEĞİŞTİRİLMEDİ: aynı kalıp panel/ayarlar.php'de
   de var ve orada aynı kusuru üretiyor olabilir, ama o ekran bu turda
   ölçülmedi — görülmeyen bir yeri değiştirmek yerine kusur not edildi
   (rol.md → AÇIK KALAN).

   ⚠ ÜST BOŞLUK .75rem — üç bölümün başlık→içerik aralığı EŞİT olsun diye.
   Ölçüldü: .abn__kart_bas 12px, bu satır 8px, ödeme listesi 0px veriyordu;
   aynı sayfada üç farklı ritim. Hepsi 12 pikselde buluştu. */
.abn__aciklama {
    margin: .75rem 0 1rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.55;
    /* Okuma ölçüsü: açıklama cümlesi 984 piksellik kartta 150 karaktere
       yayılıyordu. 62ch tipografik üst sınır. */
    max-width: 62ch;
}

/* DURUM ROZETİ — abonelik durumu ve ödeme durumu için ortak.

   Varsayılan ton NÖTR (--surface-2 + hairline): "onay bekliyor" bir sorun
   değil ve sarı uyarı tonu ödemede bir aksilik olduğunu düşündürürdü. İyi
   hâl (--ok) ve geçersiz hâl (--pas) ayrı değiştiricilerle geliyor.

   Renk TEK taşıyıcı değil: rozetin metni de durumu söylüyor (WCAG 1.4.1).

   .ay-badge KULLANILMADI: o bileşen min-width: 30px + letter-spacing ile
   KISA rozetler için ölçülü (sayı, dil kodu). Buradaki metinler cümle
   uzunluğunda ("Wartet auf Bestätigung"), o ölçüler onları bozuyordu. */
.abn__durum {
    display: inline-flex;
    align-items: center;
    padding: .1rem .5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    /* Uzun çevirilerde satır kırılabilsin: nowrap 320 piksellik ekranda
       rozeti kutunun dışına taşırıyordu. */
    white-space: normal;
}
.abn__durum--ok {
    border-color: var(--st-ok-line);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
}
/* İptal / iade: geçersiz kayıt. Kırmızı DEĞİL — iade bir hata değil,
   tamamlanmış bir işlem. Soluk ton "artık geçerli değil" diyor. */
.abn__durum--pas {
    opacity: .7;
}

/* Kalan süre, bitiş tarihinin YANINDA ikincil bilgi. */
.abn__kalan {
    margin-inline-start: .4rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* --- Ödeme geçmişi listesi ----------------------------------------------

   TABLO DEĞİL LİSTE ve bu bilinçli: yönetici panelindeki bekleyen havale
   listesi <table> çünkü yönetici kolonları karşılaştırıyor. Müşteri kendi
   geçmişine "ne zaman ne ödemişim" diye bakıyor ve dört kolonlu bir tablo
   390 piksellik ekranda yatay kaydırma üretiyor. Satır listesi kendiliğinden
   sarıyor.

   list-style yok: sıra <ol> ile anlam taşıyor (en yeni üstte) ama numaralar
   ekranda gürültü — ödemenin kaçıncı olduğu bir bilgi değil.

   ⚠ ÜST BOŞLUK .75rem — ÖLÇÜLMÜŞ PADDING KUSURU. Liste 'margin: 0' taşıyordu
   ve .hsp__h2 de 'margin: 0'; sonuç "Ödeme geçmişi" başlığı ile ilk satır
   arasında SIFIR piksel. Değer öteki iki bölümle aynı (bkz. .abn__aciklama):
   sayfada tek bir başlık→içerik ritmi var. */
.abn__liste {
    display: grid;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

.abn__satir {
    padding: .7rem .85rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}

/* Satırın üst yarısı: tutar + durum rozeti.

   space-between — tutar solda, rozet sağda. İki öğe var ve ikisi de satırın
   "başlığı"; gap ile yan yana koymak rozeti tutara yapıştırıyordu.

   align-items: center DEĞİL flex-start: rozet uzun çeviride iki satıra
   çıkabiliyor ve o durumda tutarın taban çizgisi kayıyordu. */
.abn__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .35rem .75rem;
}

.abn__tutar {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 650;
    /* Tutar ile birim ayrılmasın (aynı karar .pks__tutar ve .hvs__vurgu'da
       da var, ikisi de ölçülmüş kusurun karşılığı). */
    white-space: nowrap;
}

/* Satırın alt yarısı: tarih · paket · dönem · yöntem · referans.

   Ayraçlar CSS'ten (::after) — havale şeridinin özet satırıyla (.hvs__ozet,
   § 24i) AYNI kalıp ve aynı gerekçe: hangi öğenin son olduğu veriye göre
   değişiyor (referans yalnızca havalede var) ve :last-child bunu
   kendiliğinden çözüyor.

   ⚠ İLK ÖĞE <span> DEĞİL, düz metin (tarih). O yüzden ayraç kuralı
   'span:not(:last-child)' değil 'span' üzerinden ÖNE (::before) yazılıyor:
   her span kendi başına bir ayraç açıyor ve tarihten sonraki ilk ayraç da
   böyle doğuyor. */
.abn__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .45rem;
    margin: .3rem 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.abn__alt span::before {
    content: '·';
    padding-inline-end: .45rem;
    opacity: .55;
}

/* Referans bir numara: harf aralığı sabit olsun ki AY-000023 ile AY-000032
   gözle ayırt edilebilsin. */
.abn__ref {
    font-variant-numeric: tabular-nums;
}

/* --- 2026-09-27 · İYİLEŞTİRME TURU: sayfalama, süzgeç, özet, geçmiş ------

   KULLANICI İSTEĞİ: "abonelik.php sayfasını iyileştir. sayfalama da olsun."

   Sayfalama ve süzgeç sekmeleri YENİ BİLEŞEN DEĞİL: .gdr__sayfalama /
   .gdr__sayfa_no ve .gdr__suzgec / .gdr__sekme (§ 24f) aynen kullanılıyor,
   başlık satırı da .hsp__baslik_satir + .hsp__sayac (§ 24e). Buradaki
   kurallar yalnızca bu ekranın ARALIKLARINI o bileşenlerle uzlaştırıyor. */

/* BAŞLIK→İÇERİK RİTMİ 12 PİKSEL KALSIN.
   .hsp__baslik_satir kendi .75rem alt boşluğunu taşıyor; .abn__liste ve
   .abn__aciklama da .75rem ÜST boşluk taşıyor (tek başına .hsp__h2'nin
   ardından gelsinler diye). Yan yana geldiklerinde 24 piksel oluyordu —
   öteki bölümlerin iki katı. Aynı şey süzgeç şeridi için de geçerli
   (.gdr__suzgec 1rem alt boşluk + liste .75rem üst). */
.abn__baslik_satir {
    margin-top: 0;
}
.abn__baslik_satir + .abn__liste,
.abn__baslik_satir + .abn__aciklama,
.abn__suzgec + .abn__liste,
.abn__suzgec + .abn__aciklama {
    margin-top: 0;
}
.abn__suzgec {
    margin-bottom: .75rem;
}

/* Özet satırı: "3 kayıt · Toplam ödenen: 35.000 TRY". Ayraç CSS'ten, .abn__alt
   ile aynı kalıp — toplam yalnızca ödenmiş kayıt varsa basılıyor ve ayraç
   onunla birlikte doğuyor. */
.abn__ozet {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .45rem;
}
.abn__ozet span + span::before {
    content: '·';
    padding-inline-end: .45rem;
    opacity: .55;
}

/* Önceki aboneliklerde satırın başlığı paket adı. .abn__tutar'ın ağırlığını
   alıyor ama nowrap'ını ALMIYOR: uzun bir ad dar ekranda sarmalı. */
.abn__gecmis_ad {
    min-width: 0;
    color: var(--ink);
    font-weight: 650;
    overflow-wrap: anywhere;
}

/* Dönem ilerleme çubuğu — bitiş tarihinin altında. Panonun .pnl__ilerleme
   bileşeni (§ 24d) aynen; yalnızca boşluğu hücreye göre küçülüyor. Aynı
   özgüllük, daha sonra yazıldığı için bu kural kazanıyor. */
.abn__ilerleme {
    height: 4px;
    margin: .45rem 0 0;
}

/* Bitiş yaklaşıyor uyarısı kartın dibinde: ızgaranın altındaki boşluk
   ızgaranın kendi satır aralığıyla aynı ritimde. */
.abn__uyari {
    margin-top: 1rem;
}

/* Sayfalama düğmeleri listenin hemen altında; .gdr__sayfalama'nın 1.5rem'i
   kart içinde fazla (kart zaten kendi dolgusunu taşıyor). Dar ekranda
   "Önceki · Sayfa 2 / 4 · Sonraki" sığmazsa sarmalıyor, yatay kaydırma
   üretmiyor. */
.gdr__sayfalama.abn__sayfalama {
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* --- 24i-4 · Yönetici girişinin dip satırı  (.adk__giris_*)
       —  adk-panel/giris.php ------------------------------------------------

   KULLANICI KARARI (2026-09-24): "adk-panel/giris.php sayfasını sıfırdan
   oluştur."

   Kartın ALTINDAKİ iki yardımcı tek satırda: dil seçici + ana sayfa
   bağlantısı. Eski sayfada dil seçici kartın ÜSTÜNDEYDİ (logo ile başlık
   arasında) ve asıl işle yarışıyordu — ekrana gelen yöneticinin yapacağı tek
   şey giriş yapmak.

   space-between DEĞİL: iki öğe ekranın iki ucuna dağılırsa aralarında
   sebepsiz bir boşluk kalıyor ve ikisi de "sayfanın köşesine atılmış"
   görünüyor. center + gap ikisini bir grup olarak tutuyor.

   flex-wrap: wrap — dar ekranda <select> ile bağlantı yan yana sığmıyor,
   alt alta geçiyorlar. Kırılım eklenmedi: eşiği içerik belirliyor.

   ⚠ DİKEY BOŞLUK YOK: .auth--odak .auth__main bir flex kolonu ve gap'i
   clamp(1.25rem, 3vw, 2rem) (§ 23m). Buraya margin vermek onu çiftlerdi —
   aynı not .pks__izgara'da da yazılı. */
/* --------------------------------------------------------------------------
   DİKEY ORTALAMA — YALNIZCA BU SAYFADA

   Odak kipinin ortak davranışı içeriği YUKARIDAN hizalamak ve bu bilinçli
   (§ 23m, üç ölçümlü geçmişiyle yazılı): orada hiç auto boşluk yok, çünkü tek
   başına kalmış bir auto boşluk içeriği dibe süpürüyordu.

   O karar UZUN içerik için doğru — paket ızgarası, banka bilgileri, havale
   kartı. GİRİŞ FORMU KISA: ölçüldü, 1280 × 900 pencerede kart 375 pikselde
   bitiyor ve altında 400 piksellik boşluk kalıyordu; ekran yarım yüklenmiş
   gibi duruyordu.

   § 23m'in kendi notu bu durumu öngörüyor: "Bir ekranda kartı dikeyde
   ortalamak gerekirse bunu auto boşlukla DEĞİL, o ekranın kendi kuralında
   yapmak gerekiyor — yoksa dört odak ekranı birden kayar."

   ⚠ justify-content, margin: auto DEĞİL. .auth--odak .auth__main bir flex
   KOLONU, yani justify-content dikey eksene bakıyor ve logo + kart + dip
   satırını TEK GRUP olarak ortalıyor. auto boşluk kullanılsa § 23m'deki
   kusurun aynısı bu sayfada üretilirdi.

   ⚠ KAPSAM .adk__giris İLE SINIRLI: öteki dört odak ekranı (paket seçimi ·
   havale · ödeme başarılı · ödeme iptal) etkilenmiyor. Kural genel kapsama
   taşınırsa o ekranlar da kayar.

   İçerik pencereden uzun olduğunda (dar telefon + Arapça, ya da hata şeridi
   basılıyken) 'center' taşmaya yol açmıyor: flex öğeleri min-height'ı aşarsa
   kolon büyüyor ve sayfa normal şekilde kaydırılıyor. 390 ve 320 piksellik
   ölçümlerde doğrulandı. */
.adk__giris .auth__main {
    justify-content: center;
}

.adk__giris_dip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
}

/* Bağlantı ikincil: dip satırı bir eylem alanı değil, çıkış yolu.
   min-height 24px — WCAG 2.5.8'in dokunma hedefi sınırı. Bağlantı satırda
   tek başına durduğu için 'inline' istisnası geçmiyor (aynı kalıp
   .pks__havale ve .hsp__kaldir'da da var). */
.adk__giris_don {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    min-height: 24px;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}

/* --- Yönetici panelinde "geri dön" oku  (.adk__don_ok) -------------------

   İKİ YERDE KULLANILIYOR ve tek sınıf: yönetici girişinin dip satırındaki
   "Ana sayfa" bağlantısı (adk-panel/giris.php) ve ödeme/posta ekranlarının
   "Panele dön" düğmesi. Ayrı sınıflarla başlamıştı; biri değiştiğinde
   diğerinin geride kalacağı ölçü ve RTL kuralı ortak olduğu için
   birleştirildi.

   Ölçü düğme boyundan bağımsız: ok ikincil bir işaret, ana metin kadar
   ağırlık taşımamalı.

   RTL'de aynalanıyor — "geri" Arapçada SAĞA bakar. transform logical bir
   özellik değil, bu yüzden kural elle yazılıyor; aynı kalıp .auth__geri_ok
   (§ 23m) ve .pks__gercek'in tikinde de var. */
.adk__don_ok { font-size: 11px; }

[dir="rtl"] .adk__don_ok { transform: scaleX(-1); }
.adk__giris_don:hover,
.adk__giris_don:focus-visible {
    color: var(--brand);
}

/* --- 24i-3 · "Müşteri ödemeyi bildirdi" rozeti  (.adk__bildirdi)
       —  adk-panel/odemeler.php --------------------------------------------

   KULLANICI KARARI (2026-09-24): müşteri "ödememi gönderdim" düğmesine
   bastığında yöneticiye haber gidiyor; rozet aynı bilgiyi onay listesinde de
   gösteriyor (gerekçe adk-panel/odemeler.php → $bildirilen).

   TON YEŞİL, sarı değil: bekleyen listesindeki satırların HEPSİ zaten
   "bekliyor" durumunda, yani sarı hiçbir şeyi ayırmıyordu. Rozet bir sorun
   bildirmiyor — yöneticiye YAPILABİLİR bir iş gösteriyor: "bu satırda para
   gelmiş olabilir, dökümüne bak." Kırmızı da yanlış olurdu (hata yok).

   ⚠ TONLAR SABİT YAZILI, --st-ok-* TOKEN'INDAN GELMİYOR — tam olarak
   .adk__kutu--is'teki (§ 24i-2) gerekçeyle: token bloğu '.pnl, .auth'
   kapsamında (§ 24f) ve yönetici panelinin <body>'sinde o sınıfların ikisi de
   yok. Değerler § 24f'deki --st-ok-* üçlüsüyle BİREBİR aynı; DEĞİŞİRSE İKİSİ
   BİRLİKTE değişmeli.

   Renk tek taşıyıcı değil: rozetin metni ("Müşteri ödemeyi bildirdi") ve
   altındaki tarih aynı şeyi söylüyor (WCAG 1.4.1).

   ⚠ display: inline-block EKLENDİ. .ay-badge (theme.css § 7) display
   vermiyor, yani satır içi kalıyor ve satır içi öğede DİKEY dolgu satır
   yüksekliğine katılmıyor: zemin harflerin üstüne/altına taşıyor, alttaki
   tarih satırının üstüne biniyordu. Rozet burada <br> ile kendi satırında
   duruyor, yani blok gibi davranması gereken bir yer.

   ⚠ YATAY DOLGU ARTIRILDI. .ay-badge'in .25rem'i SAYI rozetleri için ölçülü
   (min-width: 30px ile birlikte "3" gibi tek karakterler için); burada dört
   kelimelik bir metin var ve zemin harflere yapışıyordu. */
.adk__bildirdi {
    display: inline-block;
    padding-inline: .5rem;
    background: #E9F8EF;
    box-shadow: inset 0 0 0 1px #A7DDBE;
    color: #1C6B3C;
}

/* --- 24j · Elle hesap bağlama  (.hsp__bagla*)  —  panel/hesaplar.php ----- */

/* Bağlama formu olan kart iki satırdan üçe çıkıyor: işaret + ad + alt bilgi
   üstte, form altta TAM GENİŞLİKTE. Formu ızgaranın ikinci kolonuna
   sıkıştırmak denendi — 240px'lik kartta kanal adı alanı okunamayacak kadar
   daralıyordu. */
.hsp__plat--acik {
    align-items: start;
}
.hsp__plat--acik .hsp__isaret {
    /* İki satırlık hizalama artık geçerli değil: kart üç satır. İşaret
       yalnızca ilk iki satırı kaplamaya devam ediyor, form kendi satırında. */
    grid-row: 1 / 3;
}

.hsp__bagla,
.hsp__plat_kurulum {
    grid-column: 1 / -1;
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--hairline);
}

/* Kimlik eksik satırı: form yerine Bağlantılar ekranına yönlendiriyor.
   Uyarı rengi DEĞİL — eksik bir kurulum adımı, hata değil. */
.hsp__plat_kurulum {
    display: block;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
/* ⚠ '.hsp__plat_kurulum a' KURALI KALDIRILDI (2026-09-25) — ÖLÜYDÜ.
   Cümlenin içindeki "Bağlantılar ekranına git" bağlantısı silindi: kartın
   dibindeki eylem satırı (.hsp__plat_eylem) artık AYNI adrese gidiyor ve
   aynı kartta aynı hedefe iki bağlantı, klavye kullanıcısına iki durak
   demekti. Cümle kaldı, işi açıklama; bağlantı işi alt satırın.

   İKİ ÜST ÇİZGİ ÜST ÜSTE GELMESİN: açıklama satırının kendi border-top'u
   var (yukarıdaki ortak kural) ve hemen ardından eylem satırı ikinciyi
   ekliyordu — aralarında .6rem olan iki yatay çizgi. Komşu seçici ikinciyi
   kapatıyor; boşluk da daralıyor, çünkü ikisi tek bir blok olarak
   okunuyor ("neden yapılamıyor" + "nereden yapılır").

   ⚠ .hsp__bagla + .hsp__plat_eylem'de AYNI ŞEY YAPILMIYOR: orada araya
   form giriyor (etiket + alan + düğme + ipucu) ve ayıran bir çizgi
   gerekiyor. */
.hsp__plat_kurulum + .hsp__plat_eylem {
    margin-top: .25rem;
    padding-top: 0;
    border-top: 0;
}

.hsp__bagla_etiket {
    display: block;
    margin-bottom: .3rem;
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* Alan + düğme yan yana; düğme kendi genişliğinde kalıyor (auto), alan
   kalanı alıyor. 1fr auto yerine flex: düğme metni dile göre uzuyor
   ("Bağla" / "Verbinden" / "Verbinden" ...) ve sabit kolon genişliği
   uzun çeviride düğmeyi kırpıyordu. */
.hsp__bagla_satir {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}
.hsp__bagla_kutu {
    flex: 1 1 auto;
    min-width: 0;
    padding: .45rem .6rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    /* Kanal adı tek karakter hassasiyetinde (l/1/I ayırt edilebilsin). */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
}
.hsp__bagla_kutu:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}
.hsp__bagla_satir .ay-btn {
    flex: 0 0 auto;
}

.hsp__bagla_ipucu {
    display: block;
    margin-top: .35rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

/* Çok dar ekranda alan ve düğme alt alta: 320px'de ikisi yan yana durunca
   düğme metni kırpılıyordu. */
@media (max-width: 380px) {
    .hsp__bagla_satir {
        flex-wrap: wrap;
    }
    .hsp__bagla_satir .ay-btn {
        width: 100%;
    }
}

/* --- 24k · Otonom hazırlık listesi  (.ajn__otonom*)  —  panel/agent.php --- */

/* Kip seçicinin ALTINDA, forma gömülü bir kontrol listesi: otonom kipin
   önkoşulları. Şerit (.ay-alert) DEĞİL — şerit sayfanın tepesinde durur,
   bu bilgi ise seçimin yanında durmak zorunda.

   Uyarı rengi kullanılıyor ama kırmızı DEĞİL: kullanıcı yanlış bir şey
   yapmadı, henüz tamamlanmamış bir kurulum var. */
.ajn__otonom {
    margin: .6rem 0 0;
    padding: .7rem .85rem;
    border: 1px solid var(--st-bek-line);
    border-radius: var(--r-md);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.ajn__otonom_baslik {
    margin: 0 0 .35rem;
    font-weight: 600;
}

/* list-style KALIYOR: bunlar sayılabilir, tek tek giderilecek maddeler.
   Kaldırılsaydı iki eksik tek bir paragraf gibi okunurdu. */
.ajn__otonom_liste {
    margin: 0;
    padding-inline-start: 1.15rem;
}
.ajn__otonom_liste > li + li {
    margin-top: .25rem;
}
.ajn__otonom > p:last-child {
    margin: .6rem 0 0;
}

/* Saklama bilgisi onay kutusunun altında; onaydan ayrı görünmesi için
   ince bir üst çizgi ama kutu değil (ikinci bir kutu, onay kutusuyla
   yarışırdı). */
.ajn__saklama {
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid var(--hairline);
    /* Genişlik sınırı KALKTI — bkz. § 24 KARAR (kartlar sayfa genişliğinde). */
}
.ajn__saklama a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- 24l · Gelen mesajlar  (.dm*)  —  panel/dm.php ---------------------- */

/* Platform işareti ve durum renkleri YENİDEN TANIMLANMIYOR: §24e'deki
   .hsp__isaret ve §24f'deki --st-* tokenları kullanılıyor. Sekmeler ve
   sayfalama da §24f'deki .gdr__sekme / .gdr__sayfa — gelen kutusu ile
   gönderi listesi aynı desende gezinmeli. */

/* --- Gelen kutusu listesi ----------------------------------------------- */

.dm__liste {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden;
}

.dm__satir {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .35rem .85rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--hairline);
}
.dm__satir:first-child { border-top: 0; }

/* Okunmamış satır: SOL KENARDA şerit + hafif zemin. Kalın yazı tek başına
   kullanılmadı — uzun listede hangi satırın kalın olduğu ayırt edilemiyor,
   kenar şeridi taranabilir bir işaret. */
/* Şeridin geometrisi ve RTL aynalaması §24f'deki tek blokta; burada
   yalnızca renk ve zemin. Eskiden box-shadow'u bu sınıf kendi yazıyordu
   ve Arapça sayfada şerit yanlış kenarda kalıyordu. */
.dm__satir--yeni {
    --st-serit: var(--brand);

    background: var(--brand-soft);
}

/* Satırın tamamı bağlantı: tıklama alanı büyük olsun (telefonda önemli). */
.dm__kimlik {
    display: grid;
    gap: .15rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.dm__kimlik:hover .dm__ad { text-decoration: underline; }

.dm__ad {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
}

/* Okunmamış sayısı. Rozet ekran okuyucuya aria-label ile anlatılıyor
   (sayı tek başına "3" diye okunurdu). */
.dm__rozet {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

/* Önizleme TEK SATIR: satır sonları PHP'de boşluğa çevrildi, burada da
   taşma kırpılıyor. İki satıra izin verilse liste üç katı uzardı. */
.dm__ozet {
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm__alt {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

.dm__durum {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
}

.dm__etiket {
    padding: .16rem .5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
/* Taslak BEKLEYEN bir iş: dikkat çekmeli ama hata değil. */
.dm__etiket--taslak {
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
}
.dm__etiket--devir {
    border-color: var(--st-bek-line);
    color: var(--st-bek-ink);
}
.dm__etiket--hata {
    border-color: var(--st-hata-line);
    background: var(--st-hata-bg);
    color: var(--st-hata-ink);
}

/* --- Tek konuşma -------------------------------------------------------- */

/* KONUŞMA BAŞLIĞI ARTIK KART  —  2026-09-25 (§24l-2 turunda).

   Önce çerçevesiz iki satırdı (ad + "platform · hesap") ve sayfanın en
   üstünde, mesaj balonlarıyla aynı yüzeyde duruyordu: konuşmanın kimle
   olduğu, hangi kanaldan geldiği ve DURUMU tek bir görsel blok olarak
   okunmuyordu. Durum ayrıca yalnızca altındaki uyarı şeridinden
   anlaşılıyordu — yani 'acik' konuşmada hiçbir yerde yazmıyordu.

   Kart ölçüleri §24o'daki .ayr__bolum ile aynı aileden (1px hairline,
   --r-md, --surface); panelin diğer başlık kartlarıyla aynı çizgide.

   space-between: kimlik solda, durum hapı sağ uçta. Sarma açık — 360
   piksellik ekranda hap alt satıra geçiyor, kimliği daraltmıyor. */
.dm__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin: 0 0 1rem;
    padding: .95rem 1.15rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}

/* Kimlik bloğu büyüyen taraf. min-width: 0 ŞART — uzun bir kullanıcı adı
   flex öğesinin taban genişliğini içerik kadar yapıp kartı taşırıyor. */
.dm__ust_kim {
    flex: 1 1 12rem;
    display: grid;
    gap: .2rem;
    min-width: 0;
}
.dm__h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 650;
}
.dm__ust_alt {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* Mesaj akışı. <ol> çünkü SIRA ANLAMLI — ekran okuyucu bunu liste olarak
   okuyup kaçıncı mesajda olduğunu söylüyor. */
.dm__akis {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .6rem;
}

.dm__mesaj {
    display: flex;
}
/* Gelen solda, giden sağda — sohbet uygulamalarının alışılmış düzeni.
   RTL'de (Arapça) flex-end/start kendiliğinden yer değiştiriyor, ayrı kural
   gerekmiyor. */
.dm__mesaj--gelen { justify-content: flex-start; }
.dm__mesaj--giden { justify-content: flex-end; }

.dm__balon {
    max-width: min(46rem, 88%);
    padding: .6rem .8rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}
.dm__mesaj--giden .dm__balon {
    background: var(--brand-soft);
}

/* TASLAK KESİKLİ ÇERÇEVE. Gönderilmiş mesajdan görsel olarak ayrılması
   şart: taslağı gönderilmiş sanan müşteri cevabın çıktığını düşünür. */
.dm__mesaj--taslak .dm__balon {
    border-style: dashed;
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
}
.dm__mesaj--hata .dm__balon {
    border-color: var(--st-hata-line);
    background: var(--st-hata-bg);
}

/* pre-wrap: satır sonları korunuyor, HTML kaçışı PHP'de (ay_e).
   nl2br kullanılmadı — <br> üretmek metni HTML'e çeviriyor ve kopyalamada
   bozuluyor. overflow-wrap: uzun bağlantı balonu taşırmasın. */
.dm__metin {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
}

.dm__meta {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin: .4rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.dm__kaynak {
    font-weight: 600;
}
.dm__hata {
    margin: .4rem 0 0;
    color: var(--st-hata-ink);
    font-size: var(--fs-sm);
}

.dm__taslak_eylem {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .6rem 0 0;
    padding-top: .6rem;
    border-top: 1px dashed var(--st-bek-line);
}

/* --- Cevap kutusu ------------------------------------------------------- */

.dm__cevap {
    margin: 0 0 1rem;
    /* Genişlik sınırı KALKTI — bkz. § 24 KARAR (kartlar sayfa genişliğinde). */
}
.dm__cevap_alt {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: .6rem 0 0;
}
.dm__ipucu {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* Konuşma eylemleri (devral / agenta ver / kapat) cevap kutusundan AYRI ve
   ikincil: yanlışlıkla basılması akışı değiştiriyor. */
.dm__eylemler {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}

/* --- Dar ekran --------------------------------------------------------- */

@media (max-width: 640px) {
    .dm__satir {
        grid-template-columns: auto minmax(0, 1fr);
    }
    /* Durum etiketleri alt satıra, sola hizalı: sağa yapışık kalsalar
       ikinci kolonu daraltıp önizlemeyi okunamaz hâle getiriyorlardı. */
    .dm__durum {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .dm__balon {
        max-width: 100%;
    }
}

/* --- Webhook kutusu (.bgl__webhook) — panel/baglantilar.php ------------- */

/* Adres bölümünün içinde ayrı bir blok: adresler "ne yazacağım", bu
   "platforma söyledim mi". İkisi aynı kutuda olsaydı kurulum adımı
   adreslerin arasında kaybolurdu. */
.bgl__webhook {
    margin: 1rem 0 0;
    padding: .75rem .85rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.bgl__webhook_durum {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 .6rem;
}
.bgl__webhook form {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
}
.bgl__webhook .bgl__ipucu { margin: 0; }

/* --- 24m · Yorumlar  (.yrm*)  —  panel/yorumlar.php ---------------------

   ⚠ BÖLÜM 2026-09-25'te YENİDEN YAZILDI (kullanıcı kararı: "yorumlar.php
   sayfasını sıfırdan oluştur. amatör duruyor."). Ne amatör duruyordu ve her
   kuralın hangi ölçüme karşılık geldiği panel/yorumlar.php'nin başında
   madde madde yazılı; burada yalnızca CSS'e ait gerekçeler var.

   YENİDEN TANIMLANMAYANLAR — üç liste ekranı (gönderi, gelen kutusu, yorum)
   aynı desende gezinmeli, ayrı bir görünüm üçüncü bir öğrenme yükü olurdu:
     .hsp__isaret                   platform karosu        (§ 24e)
     .hsp__bolum .hsp__baslik_satir .hsp__h2 .hsp__sayac   (§ 24e)
     .hsp__bos_kutu .hsp__bos_sim .hsp__bos_h .hsp__bos_metin  (§ 24e)
     .gdr__lead                     ekran açıklaması       (§ 24f)
     .gdr__suzgec .gdr__sekme       durum sekmeleri        (§ 24f)
     .gdr__sayfalama .gdr__sayfa_no sayfalama              (§ 24f)
     --st-* · --st-serit            durum tonları/şeridi   (§ 24f)

   ⚠ SAYFALAMA SINIFI '.gdr__sayfalama'. Markup bir dönem 'gdr__sayfa'
   yazıyordu ve öyle bir kural HİÇ YOKTU: ortalama, üst boşluk ve aradaki
   açıklık uygulanmıyor, iki düğme listenin dibine ve sol kenara yapışıyordu.
   Aynı tuzağa daha önce '.gdr__sekme_oge' ile düşülmüştü; ikisi de artık
   araclar/surum-imzalari.php'de 'istemez' imzası.

   ⚠ BU BÖLÜMÜN TAMAMINI BELİRLEYEN ŞEY: yorum cevapları HERKESE AÇIK.
   Taslak ile gönderilmiş cevabın karışması, müşterinin onaylamadığı bir
   metni gönderilmiş sanması demek — o yüzden ayrım rengin yanında
   ÇERÇEVE DESENİYLE de yapılıyor (renk körlüğü ve düşük kontrastlı ekran). */

/* --- Agent kipi şeridi --------------------------------------------------

   ÜÇ KOLON: ikon · metin · eylem. Eskiden tek bir <p> içinde kalın başlık,
   cümle ve "Değiştir" bağlantısı yan yana AKIYORDU ve 360 piksellik ekranda
   üç satıra sarıp bağlantı cümlenin ortasında kalıyordu — tıklanacak şeyin
   nerede bittiği görünmüyordu.

   align-items: center, baseline DEĞİL: kutuda artık iki satırlık bir metin
   bloğu ve 2rem'lik bir ikon var; baseline hizası ikonu ilk satırın taban
   çizgisine asıyordu. */
.yrm__kip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem .75rem;
    margin: 1rem 0 0;
    padding: .7rem .85rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: inset 3px 0 0 0 var(--st-serit, var(--ink-mute));
    font-size: var(--fs-sm);
}
[dir="rtl"] .yrm__kip {
    box-shadow: inset -3px 0 0 0 var(--st-serit, var(--ink-mute));
}

/* Kapalı kip UYARI değil BİLGİ rengiyle: varsayılan durum bu ve müşteriye
   "bir şey yanlış" dememeli. Taslak kipi dikkat istiyor (onay bekleyen iş
   birikiyor), otonom ise gerçek bir risk — kamuya onaysız yazan bir akış.

   ⚠ ŞERİT ARTIK ORTAK DEĞİŞKENLE (--st-serit) ve inset gölgeyle, kenarlıkla
   DEĞİL: 'border-inline-start: 3px' kutunun kendi 1px kenarlığıyla toplanıp
   iç genişliği 2 piksel daraltıyordu, yani üç kip birbirinden 2 piksel kaymış
   başlıyordu. Aynı gerekçe § 24f'deki DURUM ŞERİDİ bloğunda da yazılı; burada
   o bloğa katılmak yerine kendi kuralı var çünkü bu bir liste satırı değil. */
.yrm__kip--kapali { --st-serit: var(--ink-mute); }
.yrm__kip--taslak {
    --st-serit: var(--st-bek-ink);
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
}
.yrm__kip--otonom {
    --st-serit: var(--st-hata-ink);
    border-color: var(--st-hata-line);
    background: var(--st-hata-bg);
}

/* İkon kipin rengini alıyor: şeridi zaten o renk, ikisi birlikte okunuyor.
   Kapalı kipte nötr kalıyor (yukarıdaki gerekçe). */
.yrm__kip_sim {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-mute);
}
.yrm__kip_sim .pnl__ikon { font-size: 16px; }
.yrm__kip--taslak .yrm__kip_sim { background: #fff; color: var(--st-bek-ink); }
.yrm__kip--otonom .yrm__kip_sim { background: #fff; color: var(--st-hata-ink); }

/* Başlık ile cümle ALT ALTA: yan yana dizildiklerinde tek uzun satır
   oluyor ve "Agent'ın yorumlardaki davranışı: kapalı — yorumlar toplanıyor
   ama agent cevap yazmıyor." cümlesi hangi kelimede bilgi verdiğini
   göstermiyordu. Kalın kısım ETİKET, ince kısım DEĞER. */
.yrm__kip_metin {
    display: grid;
    gap: .1rem;
    min-width: 0;
}
.yrm__kip_metin strong { color: var(--ink); }
.yrm__kip_metin span {
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}
.yrm__kip_eylem { flex: 0 0 auto; }

/* --- Bölüm sayacı ------------------------------------------------------- */

/* Bekleyen iş sayısı sayacın İÇİNDE ama ayrı ağırlıkta: "3 cevap bekliyor ·
   toplam 15 yorum" satırında ilk parça eylem gerektiren bilgi, ikincisi
   bağlam. Aynı puntoda aynı renkte olduklarında göz ikisini tek cümle olarak
   okuyup bekleyen sayısını atlıyordu. */
.yrm__sayac_bekleyen {
    color: var(--brand);
    font-weight: 700;
}

/* --- Gönderi süzgeci şeridi -------------------------------------------- */
.yrm__gonderi_suzgec {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: .5rem .75rem;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--fs-sm);
}
.yrm__gonderi_suzgec .pnl__ikon {
    font-size: 14px;
    color: var(--brand);
}
/* Metin düğmeyi alta itmeden önce daralsın; düğme hiçbir zaman sıkışmasın. */
.yrm__gonderi_suzgec span { flex: 1 1 12rem; }
.yrm__gonderi_suzgec .ay-btn { flex: 0 0 auto; }

/* --- Liste -------------------------------------------------------------- */
.yrm__liste {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .75rem;
}

/* KART, satır değil. Bir yorumda beş kat bilgi var (kişi, yorum, kaynak,
   cevabımız, eylemler); gelen kutusundaki tek satırlık ızgara bunları
   taşıyamıyordu.

   Durum SOL KENAR ŞERİDİYLE: uzun listede taranabilir ve zemin rengiyle
   yarışmıyor (aynı karar §24l'deki .dm__satir--* ve §24g'deki .tkv__satir--*
   için de geçerli). Geometri §24f'deki tek blokta (DURUM ŞERİDİ); burada
   yalnızca renk.

   ⚠ GÖNDERİ EKRANI ARTIK BU DİLDE DEĞİL: orada satır yok, kapak görselli
   kart var ve durumu kartın KENARLIK rengiyle söylüyor (§ 24f-4 →
   .gdr__kart--*). Sebep inset gölgenin kapak görselinin arkasında kalması;
   gerekçe orada yazılı. Yorum ve mesaj satırları satır olarak kaldığı için
   şerit deseni onlarda sürüyor. */
.yrm__satir {
    padding: .9rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.yrm__satir--yeni       { --st-serit: var(--brand); }
.yrm__satir--cevaplandi { --st-serit: var(--st-ok-ink); }
.yrm__satir--devredildi { --st-serit: var(--st-bek-line); }
.yrm__satir--yoksayildi { --st-serit: var(--ink-mute); opacity: .72; }
.yrm__satir--silindi    { --st-serit: var(--st-hata-ink); opacity: .72; }

/* --- Kart başlığı: işaret · kimlik · durum ------------------------------ */
.yrm__ust {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .2rem .7rem;
}
.yrm__kimlik {
    display: grid;
    gap: .1rem;
    min-width: 0;
}
.yrm__ad {
    margin: 0;
    color: var(--ink);
    font-weight: 650;
    overflow-wrap: anywhere;
}

/* META SATIRI — ayraçlar CSS'te, metinde DEĞİL.

   Eskiden hesap adı, gönderi bağlantısı, zaman ve "bir yoruma yanıt" tek
   satırda elle yazılmış '·' karakterleriyle ayrılıyordu. İki kusuru vardı:
   parçalardan biri boş olduğunda ayraç havada kalıyordu, ve dar ekranda
   satır sarınca ayraç yeni satırın BAŞINA düşüyordu.

   Şimdi her parça kendi <span>/<time> öğesi, ayraç ::before ile ve yalnızca
   İLK OLMAYAN parçaya veriliyor — parça sayısı değişse de doğru. Gönderi
   bağlantısı da bu satırdan çıktı, kendi satırına indi (.yrm__kaynak). */
.yrm__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .4rem;
    margin: 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}
.yrm__meta > * + *::before {
    content: "·";
    margin-inline-end: .4rem;
    color: var(--hairline);
}
.yrm__meta time { font-variant-numeric: tabular-nums; }

/* --- Durum etiketleri --------------------------------------------------- */
.yrm__etiket {
    display: inline-block;
    padding: .1rem .5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}
/* 'yeni' ETİKETİ BİR DÖNEM HİÇ BASILMIYORDU ve cevap bekleyen yorumun tek
   işareti kartın sol kenarındaki lacivert şeritti — yani ekranın en önemli
   durumu YALNIZCA RENKLE anlatılıyordu (WCAG 1.4.1). Ton şeritle aynı marka
   rengi: ikisi tek durumu gösteriyor. */
.yrm__etiket--yeni  { border-color: var(--brand-line);   background: var(--brand-soft); color: var(--brand); }
.yrm__etiket--ok    { border-color: var(--st-ok-line);   background: var(--st-ok-bg);   color: var(--st-ok-ink); }
.yrm__etiket--devir { border-color: var(--st-bek-line);  background: var(--st-bek-bg);  color: var(--st-bek-ink); }
.yrm__etiket--sil   { border-color: var(--st-hata-line); background: var(--st-hata-bg); color: var(--st-hata-ink); }
.yrm__etiket--taslak {
    border-style: dashed;
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
}

/* --- Gelen yorum: ALINTI ------------------------------------------------ */

/* <blockquote> ÇÜNKÜ ALINTI: bu metin müşterinin değil, onun müşterisinin
   sözü. Eskiden gelen yorum ile bizim cevabımız AYNI sınıfı (.yrm__metin)
   taşıyordu — aynı punto, aynı renk, aynı ağırlık — ve hangisinin kimin sözü
   olduğu yalnızca girintiden anlaşılıyordu.

   ZEMİN VE SOL ÇİZGİ: alıntı işaretinin en sessiz biçimi. Tırnak karakteri
   (::before ile büyük bir “) denenmedi çünkü metin yedi dilde ve Arapçada o
   işaretin yönü ve yeri değişiyor; zemin + kenar yönden bağımsız ve logical
   özellikle RTL'de kendiliğinden aynalanıyor. */
.yrm__yorum {
    margin: .6rem 0 0;
    padding: .55rem .75rem;
    border-inline-start: 2px solid var(--hairline);
    border-start-end-radius: var(--r-sm);
    border-end-end-radius: var(--r-sm);
    background: var(--surface-2);
}

/* Metin: satır sonları KORUNUYOR (pre-wrap). nl2br ile <br> üretmek
   kopyalamada metni bozuyor; aynı karar §24l'de de var. */
.yrm__metin {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
}

/* --- Kaynak satırı: gönderi + gönderinin yorumları --------------------- */

/* Gönderi bağlantısı ve "bu gönderinin yorumları" süzgeci. İkincisi bir dönem
   EYLEM ÇUBUĞUNDA duruyordu ve orası yanlış yerdi: çubuktaki diğer düğmeler
   YORUMA bir şey yapıyor (cevapla, yoksay, sil), o ise başka bir listeye
   gidiyor. Çubuktan çıkması her karttan bir düğme de eksiltti.

   Dokunma payı: bağlantılar cümle İÇİNDE değil, kendi satırında duran ayrı
   hedefler — o yüzden min-height veriliyor (aynı kural § 24f'deki
   .gdr__geri a'da da var). */
.yrm__kaynak {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    margin: .5rem 0 0;
    font-size: var(--fs-sm);
}
/* ⚠ RENK AÇIKÇA MARKA. Panelin içerik kolonunda <a> öğeleri gövde rengini
   miras alıyor ve ekran görüntüsünde ölçüldü: "Bu gönderinin yorumları"
   koyu gri düz metin olarak çıkıyor, tıklanabilir olduğu HİÇBİR şekilde
   görünmüyordu (alt çizgi de yok, ikon da nötr). Bir bağlantının
   tıklanabilirliği yalnızca imleç değdiğinde anlaşılıyorsa dokunmatikte hiç
   anlaşılmıyor. */
.yrm__kaynak a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 24px;
    min-width: 0;
    color: var(--brand);
    font-weight: 600;
}
.yrm__kaynak a:hover,
.yrm__kaynak a:focus-visible {
    text-decoration: underline;
    text-underline-offset: .15em;
}
/* İkon bağlantının rengini alıyor: nötr griyken bağlantının parçası gibi
   değil, yanına konmuş ayrı bir işaret gibi duruyordu. */
.yrm__kaynak .pnl__ikon {
    font-size: 13px;
    color: currentColor;
}
.yrm__kaynak a > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yrm__devir {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .55rem 0 0;
    padding: .45rem .65rem;
    border-radius: var(--r-sm);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
    font-size: var(--fs-sm);
}

/* --- Cevabımız --------------------------------------------------------- */

/* Girintili ve kendi çerçevesinde: hangi metnin yorum hangisinin cevap
   olduğu bir bakışta ayrılmalı. Alıntının (.yrm__yorum) zemini gri ve
   çizgisi nötr; cevap BEYAZ zeminli ve MARKA çizgili — "bu bizim sözümüz". */
.yrm__cevap {
    margin: .7rem 0 0;
    margin-inline-start: 1.25rem;
    padding: .6rem .8rem;
    border: 1px solid var(--hairline);
    border-inline-start: 3px solid var(--brand-line);
    border-radius: var(--r-md);
    background: var(--surface);
}
/* ⚠ KESİKLİ ÇERÇEVE = HENÜZ GÖNDERİLMEDİ. Yalnızca renkle ayırmak yetmez;
   bu ayrımı kaçıran müşteri cevabın kamuya çıktığını sanar. */
.yrm__cevap--taslak {
    border-style: dashed;
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
}
.yrm__cevap--hata {
    border-color: var(--st-hata-line);
    background: var(--st-hata-bg);
}
.yrm__cevap_meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    margin: 0 0 .35rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.yrm__cevap_meta strong { color: var(--ink-soft); }
.yrm__cevap_meta .pnl__ikon { font-size: 14px; }
.yrm__cevap_meta time { font-variant-numeric: tabular-nums; }
.yrm__hata {
    margin: .35rem 0 0;
    color: var(--st-hata-ink);
    font-size: var(--fs-sm);
}
.yrm__cevap_eylem {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .6rem 0 0;
}
.yrm__cevap_eylem form { margin: 0; }

/* --- Cevap kutusu ------------------------------------------------------ */
.yrm__form {
    margin: .7rem 0 0;
    padding: .75rem .85rem;
    border: 1px solid var(--brand);
    border-radius: var(--r-md);
    background: var(--brand-soft);
}
.yrm__form .ay-textarea { margin: .25rem 0 0; }
/* Kamuya açık uyarısı KUTUNUN DİBİNDE, sayfanın başında değil: karar
   düğmeye basılırken veriliyor. İkon eklendi — düz metin olduğunda
   kutudaki diğer yardımcı satırlardan ayırt edilmiyordu. */
.yrm__uyari {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: .5rem 0 0;
    color: var(--st-hata-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.yrm__uyari .pnl__ikon {
    font-size: 14px;
    /* Satırın ilk satırının ortasına: flex-start hizasında ikon metnin
       tepesine yapışıp bir punto yukarıda duruyordu. */
    margin-top: .1rem;
}
.yrm__form_eylem {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .7rem 0 0;
}

/* --- Eylem çubuğu ------------------------------------------------------ */

/* AĞIRLIK SIRALANDI. Beş düğme de --ghost iken hepsi eşit görünüyordu ve
   "Cevapla" (asıl iş) ile "Sil" (geri alınamaz) komşu duruyordu.

   Şimdi "Cevapla" dolu düğme, yardımcı eylemler çerçeveli, silme ise
   çubuğun DİĞER UCUNDA. Parmağın yanlış düğmeye gitmesinin bedeli burada
   bir müşterinin yorumunun yok edilmesi. */
.yrm__eylem {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    margin: .75rem 0 0;
    padding: .7rem 0 0;
    border-top: 1px solid var(--hairline);
}
.yrm__eylem form { margin: 0; }
.yrm__eylem .pnl__ikon { font-size: 14px; }

/* Silme çubuğun sonuna itiliyor. Logical margin, yani RTL'de kendiliğinden
   diğer uca geçiyor.

   ⚠ SINIFTA ARTIK YALNIZCA BU VAR (2026-09-25). Rengi, hover zemini ve ikon
   ölçüsü ortak ikon düğmesinin 'tehlike' tonundan geliyor (§ 24b-2); burada
   tekrarlanırsa iki yerde tutulan bir ton olurdu. Sınıf işaretlemede
   KALIYOR çünkü konum ekrana özel: çubuğun sonu. */
.yrm__sil_link {
    margin-inline-start: auto;
}

.yrm__sil_onay {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    /* Onay istemi bütün çubuğu alıyor: yanında başka düğme kalmasın,
       karar tek bir şey üzerine olsun. */
    flex: 1 1 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--st-hata-line);
    border-radius: var(--r-md);
    background: var(--st-hata-bg);
    color: var(--st-hata-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.yrm__sil_onay .pnl__ikon { font-size: 15px; }
.yrm__sil_onay > span { flex: 1 1 14rem; }
.yrm__sil_onay form { margin: 0; }
/* Yıkıcı düğme SAYFAYA AİT bir sınıf. Genel bir ay-btn--tehlike theme.css'e
   girer ve bütün ekranları etkiler; burada tek bir eylem için gerekiyor
   (platformdan silmek geri alınamaz). */
.yrm__sil_btn {
    background: var(--st-hata-ink);
    border-color: var(--st-hata-ink);
    color: #fff;
}
.yrm__sil_btn:hover,
.yrm__sil_btn:focus-visible {
    filter: brightness(1.08);
    color: #fff;
}

/* --- Teşhis: <details> ------------------------------------------------- */

/* ⚠ ARTIK AÇILIR/KAPANIR VE KAPALI BAŞLIYOR. Bu bölüm hiç yorum yokken
   kendiliğinden AÇIK geliyordu ve ekranın büyük kısmını üç maddelik bir
   Telegram talimatı kaplıyordu; "Henüz yorum gelmedi" mesajı onun altında
   tek satır gri metindi. Yani ürünün yorum ekranı ilk açılışta bir sorun
   giderme sayfası gibi görünüyordu.

   <details> tarayıcının kendi öğesi: klavye ve ekran okuyucu desteği
   bedava geliyor, JS kapalıyken de açılıyor ve sayfaya tek satır script
   eklenmiyor (aynı karar § 16'daki SSS akordiyonunda da verilmişti).

   ZEMİN YOK, YALNIZCA ÇERÇEVE: bölüm listenin altında ikincil bir yardım
   ve dolu bir kart olduğunda listeyle aynı ağırlıkta görünüyordu. */
.yrm__tani {
    margin: 1.5rem 0 0;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}

/* SUMMARY BİR DÜĞME GİBİ: dokunma payı 44 pikselden büyük, imleç işaretçi
   ve odak halkası kutunun içine çekiliyor (outline-offset negatif — aynı
   kalıp § 16'daki .faq__q'da da var).

   list-style KALDIRILIYOR: tarayıcının varsayılan üçgeni ::marker (Firefox)
   ya da ::-webkit-details-marker (Safari) ile geliyor ve ikisi farklı yerde
   duruyor. Kendi oku .yrm__tani_ok yerine ::after ile çiziliyor — ek bir
   HTML öğesi gerekmiyor. */
.yrm__tani_h {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .6rem .9rem;
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.yrm__tani_h::-webkit-details-marker { display: none; }
.yrm__tani_h::marker { content: ""; }
.yrm__tani_h:hover { color: var(--brand); }
.yrm__tani_h:focus-visible { outline-offset: -3px; }

/* Ok: kapalıyken aşağı, açıkken yukarı. Karakter değil kenarlıktan çizim —
   yazıtipine bağlı değil ve RTL'de aynalanması gerekmiyor (dikey döner). */
.yrm__tani_h::after {
    content: "";
    flex: 0 0 auto;
    margin-inline-start: auto;
    width: .5rem;
    height: .5rem;
    border-inline-end: 2px solid var(--ink-mute);
    border-block-end: 2px solid var(--ink-mute);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--t-fast) var(--ease);
}
.yrm__tani[open] > .yrm__tani_h::after {
    transform: rotate(-135deg) translateY(-2px);
}
.yrm__tani[open] > .yrm__tani_h {
    border-bottom: 1px solid var(--hairline);
}

.yrm__tani_ic {
    padding: .85rem .9rem 1rem;
}
.yrm__tani_liste {
    margin: 0 0 .85rem;
    padding-inline-start: 1.25rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}
.yrm__tani_liste li { margin: .25rem 0; }
.yrm__tani_form {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}
/* Alan .ay-field içinde: etiket ile kutu arasındaki boşluk bileşenin kendi
   kuralından geliyor, burada yeniden yazılmıyor (theme.css § 9). */
.yrm__tani_form .ay-field {
    margin: 0;
    flex: 1 1 18rem;
    max-width: 22rem;
}
.yrm__tani_form .ay-btn { flex: 0 0 auto; }
/* Platformun kendi açıklaması: çeviri değil, olduğu gibi aktarılan metin.
   Ayrı biçim, hangisinin bizden hangisinin platformdan geldiğini gösteriyor. */
.yrm__tani_api {
    display: block;
    margin: .25rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-style: italic;
}
.yrm__ipucu {
    margin: 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.yrm__tani .ay-alert { margin-bottom: .85rem; }

/* --- Telefon (≤640px) -------------------------------------------------- */
@media (max-width: 640px) {
    /* Agent kipi: eylem alta, tam genişlik. Üç kolon 360 piksele
       sığmıyordu — "Değiştir" düğmesi metni 4-5 karaktere kadar
       daraltıyordu. */
    .yrm__kip {
        grid-template-columns: auto minmax(0, 1fr);
        gap: .5rem .7rem;
    }
    .yrm__kip_eylem {
        grid-column: 2;
        justify-self: start;
    }

    /* Durum etiketi kimlik kolonunun ALTINA: sağa yapışık kaldığında
       kimlik kolonunu daraltıp adı okunamaz hâle getiriyordu (§24l'de aynı
       düzeltme .dm__durum için yapıldı). */
    .yrm__ust {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .yrm__ust .yrm__etiket {
        grid-column: 2;
        justify-self: start;
        margin-top: .15rem;
    }

    /* Cevabın girintisi yarıya: 1.25rem, 320 piksellik ekranda metni
       okunmaz bir kolona sıkıştırıyordu. */
    .yrm__cevap {
        margin-inline-start: .5rem;
    }

    /* SİLME TELEFONDA SAĞ UCA İTİLMİYOR. Çubuk telefonda zaten sarıyor ve
       'margin-inline-start: auto' o durumda silme düğmesini KENDİ
       SATIRININ sağ ucuna atıyordu — diğer düğmeler solda, silme sağda,
       aralarında bir ekran boşluk.

       ⚠ 'flex: 1 1 100%' KALDIRILDI (2026-09-25): düğme artık 32×32 bir ikon
       (§ 24b-2) ve tam genişlik flex-basis, kare düğmeyi ekran boyu bir
       şeride geriyordu — metinli düğmede dokunma hedefini büyüten kural,
       ikonda kutuyu bozuyor. Dokunma hedefi kareyle zaten 32 piksel, yani
       WCAG 2.5.8'in üstünde. */
    .yrm__sil_link {
        margin-inline-start: 0;
        margin-top: .15rem;
    }

    .yrm__tani_form .ay-field { max-width: 100%; }
    .yrm__tani_form .ay-btn { width: 100%; }
}

/* --- 24n · Bekleyen iş rozetleri ve şeridi  (.pnl__rozet, .pnl__bekleyen)
       panel/_panel.php · panel/_panel_hdr.php · panel/index.php ----------- */

/* --- Menü rozeti -------------------------------------------------------- */
/* Yan menüde ve mobil drawer'da AYNI sınıf: iki ayrı görünüm öğrenmeye değmez.
   Rozet yalnızca sayı > 0 iken basılıyor (PHP tarafında), o yüzden burada
   "boşsa gizle" kuralı yok — olmayan öğeye stil yazmak yanıltıcı olurdu. */
.pnl__rozet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    margin-inline-start: auto;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Yan menü öğesi ızgara değil flex; rozet margin-inline-start:auto ile sağa
   yapışıyor. Aktif öğede marka rengi zemin oluyor, rozet o zeminde
   kaybolmasın diye tersine çevriliyor. */
.pnl__oge--aktif .pnl__rozet {
    background: #fff;
    color: var(--brand);
}

/* Drawer satırında chevron var; rozet ondan ÖNCE geliyor ve araya boşluk
   giriyor. auto margin burada işlemiyor (satır chevron'la bitiyor), o yüzden
   sabit boşluk. */
.pnl__drw .pnl__rozet {
    margin-inline-start: .5rem;
    margin-inline-end: .1rem;
}

/* --- Pano şeridi ------------------------------------------------------- */
/* Kartların ÜSTÜNDE ve onlardan görsel olarak ayrı: kartlar "durum", bu
   "şu an bekleyen iş". Sol kenar şeridi §24m'deki .yrm__satir--* ve
   §24l'deki .dm__satir--* ile aynı dil. (§24f'deki gönderi ekranı bu dilden
   çıktı — orada kart var ve durum kenarlık rengiyle söyleniyor, § 24f-4.) */
.pnl__bekleyen {
    display: flex;
    align-items: baseline;
    gap: .5rem 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 0;
    padding: .7rem .95rem;
    border: 1px solid var(--hairline);
    border-inline-start: 3px solid var(--brand);
    border-radius: var(--r-md);
    background: var(--brand-soft);
}
.pnl__bekleyen_h {
    font-size: var(--fs-sm);
}
/* Bağlantılar düğme gibi değil bağlantı gibi görünüyor: hedefleri bir liste
   ekranı, yıkıcı ya da tek yönlü bir eylem değil.

   min-height: şeritteki bağlantılar 22 piksel ölçüldü (WCAG 2.5.8 AA sınırı
   24). Şerit bir cümle değil, yan yana dizilmiş iki eylem bağlantısı —
   'inline' istisnası geçmiyor. inline-flex, altı çizili görünümü
   değiştirmiyor; baseline hizası da korunuyor çünkü .pnl__bekleyen
   align-items: baseline kullanıyor ve inline-flex kutusunun tabanı ilk
   satırının tabanı. */
.pnl__bekleyen_oge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 640px) {
    /* Telefonda başlık ve öğeler alt alta: yan yana sıkışınca sayı ile
       metin farklı satırlara bölünüyordu. */
    .pnl__bekleyen {
        flex-direction: column;
        gap: .35rem;
    }
}

/* --- 24o · Hesap ayarları  (.ayr*)  —  panel/ayarlar.php ---------------- */
/* Form öğeleri (.ay-field, .ay-label, .ay-input, .ay-check, .ay-error) ve
   bölüm başlığı (.hsp__h2) YENİDEN TANIMLANMIYOR: theme.css § 9 ve §24e'deki
   karşılıkları kullanılıyor. Buradaki kurallar yalnızca bu ekranın kendi
   yerleşimi için. */

.ayr__bolum {
    margin: 1.25rem 0 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}
.ayr__bolum + .ayr__bolum { margin-top: 1rem; }

/* Bölüm çıpaları (#ayr-hesap, #ayr-profil, …).

   ⚠ OKUYUCU LİSTESİ 2026-09-25'te DEĞİŞTİ. Kural bir dönem "üst şeritteki
   Profilim düğmesinin hedefi" diye gerekçelendirilmişti; o düğme kullanıcı
   kararıyla artık çıpasız /panel/ayarlar.php'ye gidiyor
   (panel/_panel.php § PROFİLİM). Kural KALDI çünkü iki okuyucusu daha var
   ve ikisi de bu sayfanın içinde:
     · sayfanın kendi bölüm menüsü (.ayr__nav_oge href="#ayr-…")
     · arayüz dili kaydedildikten sonraki 303 yönlendirmesi — kullanıcı
       kaydettiği formun başına dönüyor, sayfanın tepesine değil
       (panel/ayarlar.php).

   Panelin üst şeridi yapışık ve 4rem yüksekliğinde (--pnl-ust-h, § 24);
   çıpaya inen tarayıcı bölümün başlığını tam olarak şeridin arkasına
   sokuyordu. Genel scroll-padding-top panelde sıfırlanmış (§ 1a,
   html.ay-nohdr) çünkü orada sitenin fixed header'ı yok — ama panelin KENDİ
   şeridi var. .hsp__bolum[id] ile aynı kalıp ve aynı değer.

   ⚠ ÇIPA HEDEFİ tabindex="-1" TAŞIYOR (panel/ayarlar.php) ve odak halkası
   BASTIRILMIYOR: klavye kullanıcısı bağlantıdan sonra Tab'a bastığında
   odağın nereye geldiğini görmesi gerekiyor. outline: none yazılsaydı
   kaydırma olur ama odak görünmez olurdu. */
.ayr__bolum[id] {
    scroll-margin-top: calc(var(--pnl-ust-h) + 1rem);
}

/* --- Salt okunur hesap bilgisi ----------------------------------------- */
/* <dl> ızgarası: etiket solda, değer sağda. Kart yapısı KULLANILMADI —
   bunlar sayı değil metin ve kart içinde hizalanmaları zor. */
.ayr__liste {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: .45rem 1rem;
    margin: .75rem 0 .9rem;
}
.ayr__liste dt {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.ayr__liste dd {
    margin: 0;
    overflow-wrap: anywhere;
}
.ayr__kod {
    padding: .1rem .35rem;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-sm);
}
/* Doğrulanmamış durum UYARI rengi DEĞİL nötr: doğrulama hiçbir kapıyı
   kapatmıyor (bkz. panel/index.php şeridi), burada kırmızı göstermek
   olduğundan büyük bir sorun gibi okunurdu. */
.ayr__onay {
    display: inline-block;
    margin-inline-start: .35rem;
    padding: .05rem .4rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.ayr__onay--ok {
    border-color: var(--st-ok-line);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
}
.ayr__bos { color: var(--ink-mute); }

/* --- Form yerleşimi ---------------------------------------------------- */
/* İki alan yan yana (ad/soyad, şehir/ülke). Bootstrap ızgarası yerine kendi
   grid'i: .row/.col sınıfları kayıt formunda kullanılıyor ama panelde
   .gdr__form kendi akışını kuruyor ve ikisini karıştırmak boşlukları
   çiftliyor. */
.ayr__ikili {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .85rem;
}
.ayr__grup {
    margin: .25rem 0 0;
    padding: .85rem 1rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.ayr__grup legend {
    padding: 0 .35rem;
    font-size: var(--fs-sm);
    font-weight: 600;
}
/* fieldset içindeki alanlar arasına boşluk: .gdr__form'un grid boşluğu
   fieldset'in İÇİNE geçmiyor (fieldset kendi blok akışını kuruyor). */
.ayr__grup .ay-field,
.ayr__grup .ayr__ikili { margin-top: .75rem; }
.ayr__grup > .ayr__ipucu { margin: 0; }

.ayr__ipucu {
    display: block;
    margin: .3rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 400;
}
.ayr__eylem {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 1rem 0 0;
}

@media (max-width: 640px) {
    /* İkili alanlar alt alta: 320 piksellik ekranda iki sütun, etiketleri
       iki satıra bölüp alanları okunamaz hâle getiriyordu. */
    .ayr__ikili {
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
    }
    /* Etiket/değer ızgarası da tek sütuna: uzun adres değeri max-content
       etiket sütununu ezip taşıyordu. */
    .ayr__liste {
        grid-template-columns: minmax(0, 1fr);
        gap: .1rem .5rem;
    }
    .ayr__liste dt { margin-top: .5rem; }
    .ayr__liste dt:first-child { margin-top: 0; }
    .ayr__bolum {
        padding: .9rem 1rem;
    }
}

/* --- 24o-2 · Hesap ayarlarının YENİDEN TASARIMI  —  2026-09-25 -----------

   KULLANICI KARARI: "/panel/ayarlar.php sayfasını sıfırdan oluştur. amatör
   duruyor. tasarımla uyumlu, gelişmiş, kullanışlı ve kurumsal olsun. %100
   mobil uyumlu ve kaliteli de olsun."

   NE AMATÖR DURUYORDU — ÖLÇÜLDÜ (ekran görüntüleri, 1024px)

     1) Sayfa bir CÜMLEYLE açılıyordu. Ekranda hesabın SAHİBİNE ait hiçbir
        görsel çapa yoktu: ad, soyad ve müşteri numarası dört satırlık bir
        <dl>'nin içinde, "Kayıt tarihi" ile aynı ağırlıkta duruyordu. Panelin
        en kişisel ekranı kimin hesabı olduğunu söylemiyordu.

     2) DÖRT BÖLÜM, 2100 PİKSEL TEK KOLON. "Güvenlik" bölümüne inmek için üç
        formun tamamını geçmek gerekiyordu ve nerede olduğunu gösteren hiçbir
        işaret yoktu. Şifre değiştirmek isteyen kullanıcı sayfanın ortasında
        fatura alanlarını tarıyordu.

     3) "doğrulanmadı" YAZIYOR AMA EYLEM YOK. E-posta satırının yanındaki nötr
        hap durumu bildiriyordu, çözümü değil; doğrulama bağlantısını yeniden
        istemenin yolu bu ekranda hiç yoktu (panel/_dogrula_serit.php'de var
        ama o şerit yalnızca doğrulanmamış hesaplarda ve başka sayfalarda
        basılıyor).

     4) ÜÇ ŞİFRE ALANI ÇIPLAK <input type="password">. Kimlik ekranlarında
        (giris/kayit/sifre-sifirla) göster-gizle düğmesi ve güç çubuğu VAR
        (§ 23h-i, js/theme.js); panelin şifre formunda ikisi de yoktu. Aynı
        işi yapan iki ekran farklı davranıyordu.

     5) "Bütün cihazlardan çık" SIRADAN BİR ÇERÇEVELİ DÜĞMEYDİ — sayfadaki
        "Bize yazın" düğmesiyle aynı görünüyordu, oysa biri destek formuna
        gidiyor diğeri bütün oturumları düşürüyor.

   --------------------------------------------------------------------------
   BU BLOK YALNIZCA EKLİYOR, HİÇBİR MEVCUT KURALI DEĞİŞTİRMİYOR

   ⚠ § 24o'daki .ayr__bolum · .ayr__liste · .ayr__ipucu · .ayr__eylem ·
   .ayr__onay · .ayr__kod SINIFLARI PAYLAŞIMLI:

       .ayr__liste  →  panel/havale.php (iki <dl>, doğrudan dt/dd çocuklu)
       .ayr__bolum  →  panel/abonelik.php (üç bölüm kartı)

   Onların ölçülerini değiştirmek üç ekranı birden oynatırdı ve abonelik
   ekranı .ayr__ipucu ile .ayr__liste'yi zaten BİLİNÇLİ OLARAK kullanmıyor
   (gerekçe § 24p'de). Bu yüzden aşağıdaki her şey YENİ SINIF; mevcut
   sınıflara dokunulan tek yer, ikisi de yalnızca yeni bir kapsayıcının
   İÇİNDE geçerli olan iki ezme (.ayr__etiketler .ayr__onay ve
   .ayr__bolum .ayr__bas .hsp__h2).

   --------------------------------------------------------------------------
   ⚠ INLINE style="" YOK — CSP'DE 'unsafe-inline' YOK

   Doluluk çubuğunun genişliği style="width: 62%" ile verilemez:
   config/ayarlar.php'deki CSP'de style-src 'self' 'nonce-…' ve 'unsafe-inline'
   BİLİNÇLİ olarak yok (aynı duvara panel/hesaplar.php § platform renkleri de
   çarpmış, orada çözüm nonce'lu bir <style> bloğu).

   Burada nonce'lu blok da yazılmadı: genişlik ONLUK ADIMLARA yuvarlanıyor ve
   on bir hazır kural arasından data-oran ile seçiliyor. Kazanç sadece CSP
   değil — alan listesi büyüdüğünde CSS'in bozulmaması. Kural sayısı ALAN
   SAYISINA değil YÜZDEYE bağlı; panel/ayarlar.php'ye yeni bir profil alanı
   eklenirse burada düzeltilecek hiçbir şey olmuyor.

   ⚠ ETİKET DE AYNI YUVARLANMIŞ DEĞERİ BASIYOR (ay_t('ayr.tamam.oran')):
   çubuk %40'ta dururken yanında "%38" yazması, iki ayrı doğruluk gibi
   okunurdu. Tek sayı, iki gösterim.
   ------------------------------------------------------------------------ */

/* === 1 · KİMLİK KARTI  (.ayr__kimlik) ===================================

   Sayfanın ilk öğesi ve tek RENKLİ zeminli kutusu: aşağıdaki dört bölüm
   beyaz kart (.ayr__bolum), bu blok --brand-soft. Ayrım bilinçli — kart
   düzenlenecek bir form değil, hesabın künyesi.

   Yeni bir token açılmadı: zemin --brand-soft, çerçeve --brand-line, ikisi
   de theme.css § 1'den ve panonun karşılama bloğunda da aynı ikili var. */
.ayr__kimlik {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* 1rem: .pnl__giris paragrafı ile aynı üst boşluk, yani kart sayfanın
       ilk satırıyla aynı çizgide başlıyor. */
    gap: 1rem 1.5rem;
    margin: 1rem 0 0;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-md);
    background: var(--brand-soft);
}

/* Kimlik bloğu (baş harfler + ad + künye) BÜYÜYEN taraf; doluluk ölçer
   sabit genişlikte. flex: 1 1 auto + min-width: 0 ikilisi şart: uzun
   e-posta ya da 40 karakterlik bir ad, min-width: 0 olmadan flex öğesinin
   içerik genişliğini taban kabul edip kartı taşırıyor. */
.ayr__kimlik_kim {
    flex: 1 1 14rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

/* BAŞ HARFLER — görsel DEĞİL, veriden türetiliyor (ad + soyad).

   Gerçek bir avatar yüklemesi YOK ve uydurulmadı: `musteriler` tablosunda
   görsel alanı yok, platform avatarları (hesaplar.avatar_url) ise BAĞLI
   SOSYAL HESABA ait, müşteriye değil — birini buraya koymak yanlış kişiyi
   göstermek olurdu.

   aria-hidden ile basılıyor (panel/ayarlar.php): baş harfler ekran okuyucu
   için bilgi taşımıyor, hemen yanında adın tamamı yazıyor. */
.ayr__avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: var(--on-brand);
    font-size: var(--fs-lg);
    font-weight: 650;
    /* Harf aralığı pozitif: iki büyük harf dairenin ortasında sıkışık
       görünüyordu. Sağ boşluğu dengelemek için soldan eşit pay veriliyor. */
    letter-spacing: .04em;
    text-indent: .04em;
    text-transform: uppercase;
    /* Kullanıcı adını seçip kopyalamak isterse baş harfler araya girmesin. */
    user-select: none;
}

.ayr__kimlik_gov {
    min-width: 0;
}

.ayr__kimlik_ad {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-lg);
    font-weight: 650;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

/* Künye satırı: müşteri numarası + üyelik başlangıcı. İkisi tek satırda ve
   araya · giriyor (panel/ayarlar.php'de basılıyor, CSS'te ::before ile
   üretilmiyor — ayraç içerik, süs değil ve RTL'de de metinle akması
   gerekiyor). */
.ayr__kimlik_alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    margin: .2rem 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}

/* Doğrulama hapları. .ayr__onay (§ 24o) YENİDEN YAZILMIYOR, yalnızca bu
   kapsayıcının içinde iki şey eziliyor:

     margin-inline-start  Hap tek başına bir DEĞERİN yanında duruyordu ve
                          .35rem'lik başlangıç boşluğu onu değerden
                          ayırıyordu. Burada haplar flex satırında ve boşluk
                          gap'ten geliyor; margin kalsa ilk hap kartın
                          kenarından fazladan .35rem içeride başlardı.

     display              inline-block'ta içindeki ikon ile metin taban
                          çizgisinde hizalanıyor ve ikon 1 piksel yukarıda
                          duruyordu; inline-flex + center ikisini optik
                          merkezde buluşturuyor.

   ⚠ İki ezme de .ayr__etiketler ile SINIRLI: panel/havale.php ve ayarlar
   ekranının hesap listesi aynı hapı satır içinde kullanmaya devam ediyor. */
.ayr__etiketler {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .5rem 0 0;
}
.ayr__etiketler .ayr__onay {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-inline-start: 0;
}
.ayr__etiketler .ayr__onay .ay-ico {
    font-size: 11px;
}

/* === 2 · DOLULUK ÖLÇER  (.ayr__tamam) ==================================

   NE İŞE YARIYOR: fatura alanları isteğe bağlı ve bireysel kullanıcı için
   boş kalması doğru — ama şirket adına kullanan müşteri alanları boş
   bıraktığını fark etmiyordu, fatura kesileceği ana kadar. Ölçer bunu
   sayfanın en üstünde, tek bakışta söylüyor.

   ⚠ KAPI DEĞİL, BİLGİ: eksik alan hiçbir şeyi engellemiyor ve ölçer kırmızı
   göstermiyor. Zorunlu olmayan bir alanı hata gibi işaretlemek, boş
   bırakması doğru olan kullanıcıyı bozuk bir hesabı varmış gibi
   düşündürürdü. */
.ayr__tamam {
    flex: 0 0 auto;
    width: 13.5rem;
    max-width: 100%;
}

.ayr__tamam_ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    font-size: var(--fs-sm);
}
.ayr__tamam_et {
    color: var(--ink-soft);
    font-weight: 600;
}
.ayr__tamam_oran {
    color: var(--brand);
    font-weight: 700;
    /* Oran 10'dan 100'e çıkarken rakam sayısı değişiyor; oransal rakamda
       sayı kaydıkça etiketle arasındaki boşluk zıplıyordu. */
    font-variant-numeric: tabular-nums;
}

.ayr__tamam_cubuk {
    /* overflow: hidden ŞART: dolu kısım kendi köşe yarıçapını taşımıyor,
       yuvarlak köşeyi bu kutu kırpıyor. Aksi hâlde %100'de dolgunun kare
       köşesi rayın yuvarlak köşesinin dışına 2 piksel taşıyor. */
    overflow: hidden;
    height: 6px;
    margin: .4rem 0 0;
    border-radius: var(--r-pill);
    background: var(--brand-tint);
}
.ayr__tamam_dolu {
    display: block;
    width: 0;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--brand);
}

/* ON BİR HAZIR GENİŞLİK. Gerekçe bu bölümün başındaki "INLINE style YOK"
   bloğunda: CSP inline style'ı kapatıyor ve adımlı çözüm alan sayısından
   bağımsız kalıyor. data-oran PHP'de en yakın 10'a yuvarlanıyor, yani bu
   on bir değerin dışına çıkan bir girdi olamıyor. */
.ayr__tamam_cubuk[data-oran="0"]   .ayr__tamam_dolu { width: 0; }
.ayr__tamam_cubuk[data-oran="10"]  .ayr__tamam_dolu { width: 10%; }
.ayr__tamam_cubuk[data-oran="20"]  .ayr__tamam_dolu { width: 20%; }
.ayr__tamam_cubuk[data-oran="30"]  .ayr__tamam_dolu { width: 30%; }
.ayr__tamam_cubuk[data-oran="40"]  .ayr__tamam_dolu { width: 40%; }
.ayr__tamam_cubuk[data-oran="50"]  .ayr__tamam_dolu { width: 50%; }
.ayr__tamam_cubuk[data-oran="60"]  .ayr__tamam_dolu { width: 60%; }
.ayr__tamam_cubuk[data-oran="70"]  .ayr__tamam_dolu { width: 70%; }
.ayr__tamam_cubuk[data-oran="80"]  .ayr__tamam_dolu { width: 80%; }
.ayr__tamam_cubuk[data-oran="90"]  .ayr__tamam_dolu { width: 90%; }
.ayr__tamam_cubuk[data-oran="100"] .ayr__tamam_dolu { width: 100%; }

.ayr__tamam_not {
    margin: .35rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* === 3 · BÖLÜM GEZİNMESİ  (.ayr__nav) ==================================

   Dört çıpa: Hesap · Profil · Şifre · Güvenlik. GERÇEK BAĞLANTILAR, yani
   JavaScript'siz çalışıyor ve sağ tıkla "bağlantıyı kopyala" da veriyor
   (sekme yapılsaydı ikisi de olmazdı — ve JS kapalıyken üç bölüm ekrandan
   kaybolurdu).

   YAPIŞIK: sayfa 2100 piksel ve bölümler arasında gidip gelmek işin
   kendisi. Uzun bir formun dibindeyken "Güvenlik"e geçmek için başa
   dönmek gerekmiyor.

   ÜST OFSET KABUĞUN SABİT ŞERİDİNDEN: masaüstünde --pnl-ust-h (§ 24,
   .pnl'in 4rem'lik yapışık şeridi), telefonda mobil başlığın yüksekliği
   --h (§ 24c'de .pnl__hdr sticky). Değer elle yazılmadı, ikisi de mevcut
   token — şerit yüksekliği değişirse burası kendiliğinden takip ediyor.

   ⚠ z-index ŞERİDİN ALTINDA (3 ≪ --z-header: 1040): yapışık iki öğe üst
   üste geldiğinde kabuğun şeridi kazanmalı, yoksa bölüm gezinmesi logonun
   ve dil menüsünün üstüne biner.

   ⚠ ATASINDA overflow YOK, ÖLÇÜLDÜ: .pnl__ana ile .pnl__icerik yalnızca
   flex ve padding taşıyor (§ 24b). Yapışık öğe, atalarından birinde
   overflow: hidden/auto olsa sessizce yapışmayı bırakırdı.

   TAM GENİŞLİK — 2026-09-25, KULLANICI KARARI. Şerit daha önce yuvarlak bir
   hap olarak içerik kolonunun DOLGUSUNUN İÇİNDE duruyordu: kaydırma
   sırasında altından geçen kart, hapın iki yanında kalan 1.5rem'lik
   boşlukta görünüp şeridin üstüne binmiş gibi duruyordu. Şerit artık
   kolonun iki kenarına kadar uzanan bir BANT.

   NEGATİF MARGIN + EŞİT İÇ DOLGU: margin-inline değeri .pnl__icerik'in
   dolgusuyla BİREBİR aynı (1.5rem, § 24b), yani bant kolonun kenarına tam
   oturuyor — bir piksel fazlası yatay kaydırma çubuğu açardı. Aynı değer iç
   dolgu olarak geri veriliyor, böylece ilk çip bölüm kartlarının sol
   kenarıyla hizada kalıyor.

   border-inline: 0 + border-radius: 0 BİLİNÇLİ: kenara dayanan bir bandın
   yan çerçevesi ve yuvarlak köşesi, ekranın ortasında asılı kalmış bir kart
   izlenimi verir. Kalan üst/alt saç çizgisi bandı içerikten ayırıyor.
   (Aynı çözüm ≤640px'te zaten uygulanıyordu, artık her genişlikte.) */
.ayr__nav {
    position: sticky;
    top: var(--pnl-ust-h);
    z-index: 3;
    display: flex;
    gap: .25rem;
    margin: 1rem -1.5rem 0;
    padding: .3rem 1.5rem;
    border: 1px solid var(--hairline);
    border-inline: 0;
    border-radius: 0;
    background: var(--surface);
    /* Altından geçen içerikten ayrılsın: yapışık şerit saydam olmadığı
       hâlde, gölge olmadan kaydırma sırasında metnin üstüne "yapıştığı"
       değil "bindiği" izlenimi veriyordu. */
    box-shadow: var(--sh-1);
    /* Dört çip 640px'in altında sığmıyor. Sarmak (flex-wrap) denendi: şerit
       iki satıra çıkıp yüksekliği 88 piksele fırlıyor ve yapışık bir öğe
       için bu, telefon ekranının %20'sini kalıcı olarak yemek demek.
       Yatay kaydırma şeridi tek satırda tutuyor. */
    overflow-x: auto;
    /* Kaydırma çubuğu bandın altına ikinci bir çizgi çizmesin: yapışık bir
       öğede sürekli görünür kalır ve şeridi 15 piksel kalınlaştırır. */
    scrollbar-width: none;
}
.ayr__nav::-webkit-scrollbar {
    display: none;
}

.ayr__nav_oge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 34px;
    padding: 0 .9rem;
    border-radius: var(--r-pill);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}
.ayr__nav_oge .ay-ico {
    font-size: 14px;
    color: var(--ink-mute);
    transition: color var(--t-fast) var(--ease);
}

/* Dokunmatikte :hover parmak kalktıktan sonra üzerinde kalıyor ve çip
   seçiliymiş gibi donuyordu (aynı gerekçe theme.css § 3'te .ay-btn için
   de yazılı). */
@media (hover: hover) and (pointer: fine) {
    .ayr__nav_oge:hover {
        background: var(--brand-soft);
        color: var(--brand);
    }
    .ayr__nav_oge:hover .ay-ico {
        color: var(--brand);
    }
}
.ayr__nav_oge:focus-visible {
    background: var(--brand-soft);
    color: var(--brand);
}

/* ÇIPA HEDEFİ — YAPIŞIK İKİ ÖĞENİN ALTINDA DURACAK.

   § 24o'daki .ayr__bolum[id] kuralı şeridin yüksekliğini hesaba katıyor ama
   bölüm gezinmesini bilmiyor: çıpaya inen tarayıcı bölüm başlığını tam
   olarak gezinme şeridinin arkasına sokuyordu.

   ⚠ .ayr__bolum[id] DEĞİŞTİRİLMEDİ, AYRI BİR SINIF EKLENDİ. O kuralı
   büyütmek panel/abonelik.php'nin bölümlerini de etkileyebilirdi (aynı
   sınıfı kullanıyor) ve orada gezinme şeridi yok — çıpalar gereksiz yere
   44 piksel aşağıda açılırdı. Kardeş seçici (.ayr__nav ~ …) de denenmedi:
   DOM sırasına bağlı olurdu, oysa bu bir hedefin KENDİ özelliği.

   4rem = gezinme şeridi (34px çip + 2×.3rem dolgu + 2×1px çerçeve ≈ 44px)
   artı bir tutam nefes payı.

   ⚠ SEÇİCİ ÜÇ PARÇALI VE ÖYLE KALMALI. Tek başına '.ayr__hedef' (0,1,0)
   yazılsaydı § 24o'daki '.ayr__bolum[id]' (0,2,0 — öznitelik seçicisi sınıf
   ağırlığında) onu EZERDİ ve çıpa payı sessizce eski değerde kalırdı:
   sayfa kaydırılır ama bölüm başlığı gezinme şeridinin arkasında durur.
   İki sınıf + öznitelik (0,3,0) tartışmasız kazanıyor; kaynak sırasına
   dayanan bir eşitlik bırakılmadı. */
.ayr__bolum[id].ayr__hedef {
    scroll-margin-top: calc(var(--pnl-ust-h) + 4rem);
}

/* === 4 · BÖLÜM BAŞLIĞI İKONLA  (.ayr__bas) ============================

   Dört bölüm başlığı birbirinin aynısıydı ve sayfa kaydırılırken hangi
   bölümde olunduğu ancak metin okunarak anlaşılıyordu. İkon, başlığı
   okumadan tanınan bir işaret veriyor ve yan menüdeki ikon diliyle aynı
   (ay_ikon → _ikon.php, Font Awesome). */
.ayr__bas {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 .15rem;
}
.ayr__bas_sim {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand);
}
.ayr__bas_sim .ay-ico {
    font-size: 16px;
}
/* .hsp__h2'nin margin'i zaten 0 (§ 24e); burada sıfırlanmıyor, yalnızca
   flex satırında büyüyen taraf olduğu ve uzun başlığın sarabilmesi için
   min-width: 0 veriliyor. */
.ayr__bolum .ayr__bas .hsp__h2 {
    min-width: 0;
}

/* Bölüm başlığının altındaki açıklama. .ayr__ipucu KULLANILMADI: o sınıfın
   üst boşluğu .3rem ve alt boşluğu YOK (alan altı açıklaması için doğru),
   burada başlıktan sonra gelen bir paragraf gerekiyor ve altındaki forma
   yapışıyordu — aynı ölçülmüş kusur panel/abonelik.php'de .abn__aciklama
   ile çözülmüş (§ 24p). */
.ayr__aciklama {
    margin: .5rem 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-base);
}

/* === 5 · DEĞER SATIRI  (.ayr__deger) ===================================

   Hesap bilgileri hâlâ .ayr__liste'nin <dl> ızgarasında (etiket solda,
   değer sağda; 640px'te tek kolona iniyor — § 24o). Değişen tek şey <dd>'nin
   İÇİ: artık değerin yanında bir durum hapı ve gerektiğinde bir EYLEM
   düğmesi var.

   Üçü doğrudan dd'ye konsaydı satır içi akışta dizilirdi: 360 piksellik
   ekranda "doğrulanmadı" hapı ile "Yeniden gönder" düğmesi arasındaki
   kırılma kelime boşluğuna düşüyor ve düğme e-posta adresinin ortasında
   kalıyordu. Flex + wrap üçlüyü öğe olarak kırıyor. */
.ayr__deger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    min-width: 0;
}
/* Uzun e-posta adresi kendi içinde kırılsın; flex öğesi olarak taban
   genişliği içeriği kadar olduğu için min-width: 0 olmadan satırı
   taşırıyor. */
.ayr__deger_ana {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Eylem düğmesi satırın SONUNDA ve mobilde alt satıra kendi başına
   düşüyor. --sm ile satırı şişirmiyor (theme.css § 3). */
.ayr__deger .ay-btn {
    flex: 0 0 auto;
}

/* E-posta doğrulaması bir EYLEM, yani POST formu (bkz. panel/ayarlar.php);
   telefon doğrulaması ekran geçişi olduğu için <a>. Form burada flex
   ÖĞESİ olarak duruyor ve yalnızca dış boşluğu sıfırlanıyor.

   ⚠ display: contents DENENMEDİ/KULLANILMADI: formu ızgaradan kaldırıp
   düğmeyi doğrudan flex öğesi yapardı ama bazı tarayıcılarda öğenin
   erişilebilirlik ağacındaki rolünü de düşürüyor. Tek kazanç bir seviye
   daha az kutu olurdu; bedeli, form semantiğini tarayıcı kaprisine
   bağlamak. */
.ayr__deger form {
    flex: 0 0 auto;
    margin: 0;
}

/* === 6 · TERCİH SATIRI  (.ayr__anahtar) ================================

   Pazarlama izni tek başına bir .ay-check satırıydı ve formun dibinde,
   "Ülke" alanının hemen altında duruyordu: bir VERİ alanı değil bir
   KARAR olduğu görünmüyordu. Kendi çerçevesine alınınca ayrı bir şey
   olduğu okunuyor.

   Anahtar (switch) BİLEŞENİ YAZILMADI: ürünün sözlüğünde yok ve tek bir
   ekran için açmak, erişilebilirliğini (rol, klavye, durum duyurusu)
   sıfırdan kurmak demekti. .ay-check gerçek bir <input type="checkbox">
   ve hepsini tarayıcıdan hazır alıyor. */
.ayr__anahtar {
    margin: 0;
    padding: .85rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    transition: border-color var(--t-base) var(--ease);
}
/* Odak kutunun İÇİNDEKİ onay kutusuna geliyor; çerçeve o zaman
   canlanıyor. :focus-within, :focus DEĞİL — kutunun kendisi
   odaklanılabilir değil. */
.ayr__anahtar:focus-within {
    border-color: var(--brand-line);
}
/* Fatura kümesi (--surface-2 zeminli .ayr__grup) içinde aynı kutu beyaz
   kalırsa "kart içinde kart" çıkıyor; orada zemin devralınıyor. */
.ayr__grup .ayr__anahtar {
    background: var(--surface);
}

/* === 7 · ŞİFRE KURALI ŞERİDİ  (.ayr__kural) ============================

   Kural metni eskiden alanın altında .ayr__ipucu ile, gri ve tek satır
   yazıyordu — sayfadaki diğer yardımcı metinlerden ayırt edilmiyordu.
   Şerit onu "uyulacak bir kural" hâline getiriyor.

   HATA TONU DEĞİL nötr: kullanıcı henüz bir şey yazmadı, kuralı ihlal
   etmiş değil. Kırmızı göstermek formu açar açmaz hata almış gibi
   okunurdu. */
.ayr__kural {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    padding: .7rem .85rem;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}
.ayr__kural .ay-ico {
    flex: 0 0 auto;
    /* İkon çok satırlı metnin ortasına değil İLK SATIRIN optik merkezine
       oturmalı (aynı .1875rem düzeltmesi theme.css § 9'da .ay-alert svg
       için de yazılı). */
    margin-top: .1875rem;
    color: var(--brand);
    font-size: 14px;
}

/* === 8 · GÜVENLİK KUTUCUKLARI  (.ayr__kutucuklar) ======================

   Son giriş tarihi, IP ve oturum türü. Üçü de TEK SATIR gri metindi
   ("Son giriş: 2026-09-25 01:56 · 89.252.136.23") ve okunması için
   cümlenin taranması gerekiyordu.

   auto-fit + minmax: kolon sayısı KIRILIM NOKTASI OLMADAN çözülüyor —
   984 piksellik içerik alanında üç kutucuk yan yana, 640'ta iki, 360'ta
   tek. Bu bölüm için ayrı bir @media kuralı YOK ve olmasına gerek de yok;
   ölçü değişirse ızgara kendiliğinden yeniden dağıtıyor. */
.ayr__kutucuklar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .65rem;
    margin: .85rem 0 0;
}
.ayr__kutucuk {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem .85rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.ayr__kutucuk_sim {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--brand);
}
.ayr__kutucuk_sim .ay-ico {
    font-size: 14px;
}
.ayr__kutucuk_gov {
    min-width: 0;
}
.ayr__kutucuk_et {
    display: block;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.ayr__kutucuk_dg {
    display: block;
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 600;
    /* IP ve tarih yan yana kutucuklarda alt alta hizalı okunsun. */
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* === 9 · DİKKAT BÖLGESİ  (.ayr__tehlike) ===============================

   "Bütün cihazlardan çık" düğmesi sayfadaki "Bize yazın" düğmesiyle
   BİREBİR aynı görünüyordu (ikisi de .ay-btn--ghost): biri destek
   formuna gidiyor, diğeri bütün oturumları düşürüp kullanıcıyı kendi
   panelinden atıyor. Sonucu ağır olan eylem, kendi çerçevesinde ve hata
   tonunda duruyor.

   DÜĞME YİNE --ghost, DOLU KIRMIZI DEĞİL: dolu bir düğme bölümün birincil
   eylemi gibi görünürdü, oysa bu ekranın birincil eylemi bilgileri
   kaydetmek. Uyarıyı kutunun kendisi taşıyor.

   Tonlar § 24f'deki --st-hata-* tokenlarından (.pnl üzerinde tanımlı,
   § 24f), yeni renk eklenmedi. */
.ayr__tehlike {
    margin: .85rem 0 0;
    padding: .9rem 1rem;
    border: 1px solid var(--st-hata-line);
    border-radius: var(--r-md);
    background: var(--st-hata-bg);
}
.ayr__tehlike_ust {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--st-hata-ink);
    font-size: var(--fs-base);
    font-weight: 650;
}
.ayr__tehlike_ust .ay-ico {
    font-size: 14px;
}
.ayr__tehlike p {
    margin: .35rem 0 .75rem;
    color: var(--st-hata-ink);
    font-size: var(--fs-sm);
}
/* Kutunun içindeki düğme hata tonuna uyuyor: beyaz zeminli --ghost,
   kırmızı zeminin üstünde sayfadan kopmuş bir yama gibi duruyordu. */
.ayr__tehlike .ay-btn--ghost {
    border-color: var(--st-hata-line);
    background: var(--surface);
    color: var(--st-hata-ink);
}
.ayr__tehlike .ay-btn--ghost:hover,
.ayr__tehlike .ay-btn--ghost:focus-visible {
    border-color: var(--st-hata-ink);
    background: var(--surface);
    color: var(--st-hata-ink);
}

/* --- Mobil: ≤900px  (kabuk mobil başlığa geçtiği eşik, § 24c) ---------- */
@media (max-width: 900px) {
    /* Yapışma ofseti MOBİL BAŞLIĞIN yüksekliğine geçiyor: masaüstü şeridi
       (.pnl__ust) bu genişlikte display: contents alıyor, yani
       --pnl-ust-h'nin karşılığı ekranda yok. Yapışık olan öğe artık
       .pnl__hdr ve yüksekliği --h (theme.css § 1, ≤1199px'te 80px).

       TAM GENİŞLİK BANDININ TAŞMASI DA BURADA YENİLENİYOR: .pnl__icerik bu
       genişlikte 1.5rem'lik dolgusunu 1rem'e indiriyor (§ 24c sonu).
       Negatif margin eski değerde kalsa bant kolonun dışına .5rem taşar ve
       belgede yatay kaydırma çubuğu açardı. */
    .ayr__nav {
        top: var(--h);
        margin-inline: -1rem;
        padding-inline: 1rem;
    }
    /* Çıpa payı da aynı sebeple yeniden hesaplanıyor. Seçici yukarıdakiyle
       AYNI üç parçalı biçimde: sadeleştirilirse § 24o'daki
       '.ayr__bolum[id]' kuralı bu kuralı da ezer. */
    .ayr__bolum[id].ayr__hedef {
        scroll-margin-top: calc(var(--h) + 4rem);
    }
}

/* --- Mobil: ≤640px  (§ 24o'nun kırılım noktası) ------------------------ */
@media (max-width: 640px) {
    .ayr__kimlik {
        /* Dolgu .ayr__bolum'ün mobil dolgusuyla eşit (§ 24o): kimlik kartı
           ile altındaki bölüm kartları aynı çizgide başlıyor. */
        padding: .9rem 1rem;
        gap: .85rem;
    }

    /* Doluluk ölçer tam genişliğe: 13.5rem sabit genişlik 360 piksellik
       ekranda kartın sağında kalan boşluğa sığmıyor ve flex-wrap onu alt
       satıra attığında ölçer satırın solunda dar bir sütun olarak
       kalıyordu. */
    .ayr__tamam {
        width: 100%;
    }

    /* Baş harfler 3rem'den 2.5rem'e: kartın yüksekliği telefonda ada ve
       künyeye ayrılmalı, daireye değil. */
    .ayr__avatar {
        width: 2.5rem;
        height: 2.5rem;
        font-size: var(--fs-base);
    }

    /* ⚠ GEZİNME ŞERİDİNİN KENARA TAŞMASI ARTIK BURADA DEĞİL. Şerit her
       genişlikte kolonun kenarına kadar uzanan bir bant (§ 24o-2) ve
       ≤900px'teki kural taşma değerini 1rem'e çekiyor — bu blokta aynı dört
       satırı yeniden yazmak, aynı kararı üç yerde sürdürmek olurdu.
       Kaydırılabilirlik de korunuyor: son çip hâlâ ekranın kenarında
       kesiliyor, yani şeridin devam ettiği görünüyor. */

    .ayr__bas_sim {
        width: 1.875rem;
        height: 1.875rem;
    }
    .ayr__bas_sim .ay-ico {
        font-size: 14px;
    }

    .ayr__tehlike {
        padding: .8rem .9rem;
    }

    /* Kaydet satırı: düğme ile not yan yana 360 pikselde sığmıyor, not
       düğmenin altına geçiyor ve satırın başına hizalanıyor. */
    .ayr__kaydet_not {
        align-self: flex-start;
    }
}

/* --- 24o-3 · TEK SAYFA, DERLİ TOPLU  —  2026-09-27 ------------------------

   KULLANICI KARARI: "Hesap · Profil · Şifre · Güvenlik tab menülerini
   kaldır. ayarlar sayfası da tek bir sayfa içinde daha kullanışlı ve derli
   toplu bir şekilde olsun."

     · Bölüm gezinmesi panel/ayarlar.php'den KALKTI. .ayr__nav kuralları
       (§ 24o-2 · 3) yerinde: panel/kurulum.php de kullanıyor.
     · Hesap bilgisi ayrı kart değil, kimlik kartının alt sırası
       (.ayr__kunye): müşteri no · e-posta · telefon yan yana.
     · Bölümler .ayr__duzen ızgarasında: ≥1180px iki kolon (solda profil,
       sağda şifre + güvenlik), altında tek kolon.
     · Profil formundaki kümeler (.ayr__grup) YALNIZCA BU EKRANDA kutu
       değil, ayraçlı başlık: beyaz kart → gri küme → beyaz kutu üç kat
       iç içe duruyordu.

   Paylaşılan sınıflar (.ayr__bolum · .ayr__liste · .ayr__onay — havale ve
   abonelik ekranları) değişmiyor: her ezme .ayr__kimlik--tam ya da
   .ayr__duzen kapsamında.
   ------------------------------------------------------------------------ */

/* Kimlik kartı sayfanın ilk öğesi (açıklama paragrafı kalktı). */
.ayr__kimlik--tam { margin-top: 0; }
* + .ayr__kimlik--tam { margin-top: 1rem; }

/* --- Künye: kartın tam genişlik alt sırası ------------------------------ */
.ayr__kunye {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .6rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--brand-line);
}
.ayr__kunye_oge {
    min-width: 0;
    padding: .65rem .8rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    background: var(--surface);
}
.ayr__kunye dt {
    margin: 0 0 .25rem;
    color: var(--ink-mute);
    font-size: .75rem;
    font-weight: 600;
}
.ayr__kunye dd {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.ayr__kunye .ayr__deger { gap: .35rem .5rem; }
.ayr__kunye .ayr__onay {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-inline-start: 0;
    font-size: .72rem;
    font-weight: 600;
}
.ayr__kunye .ayr__onay .ay-ico { font-size: 10px; }
.ayr__kunye .ayr__bos { font-weight: 500; }

/* Değiştirme notu + "Bize yazın" bağlantısı tek satırda. */
.ayr__kunye_not {
    flex: 1 1 100%;
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.ayr__kunye_not .ay-ico {
    flex: 0 0 auto;
    margin-top: .2rem;
    color: var(--brand);
    font-size: 13px;
}
.ayr__kunye_not a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* --- İki kolon ---------------------------------------------------------- */
.ayr__duzen {
    display: grid;
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}
.ayr__kolon {
    display: grid;
    gap: 1rem;
    min-width: 0;
}
.ayr__kolon > .ayr__bolum { margin: 0; }

/* 1180px: yan menü (248) + dolgu düşülünce içerik ~884px; sol kolon
   ~505px'te ad/soyad hâlâ yan yana, sağ kolon ~370px'te şifre alanları
   rahat. Daha dar ekranda iki kolon formu sıkıştırıyordu. */
@media (min-width: 1180px) {
    .ayr__duzen { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* Çıpa payı: gezinme şeridi kalktığı için yalnızca üst şerit + nefes.
   Seçici § 24o-2'deki üç parçalı kuraldan (0,3,0) ağır: (0,4,0). */
.ayr__duzen .ayr__bolum[id].ayr__hedef,
.ayr__kimlik--tam[id].ayr__hedef {
    scroll-margin-top: calc(var(--pnl-ust-h) + 1rem);
}
@media (max-width: 900px) {
    .ayr__duzen .ayr__bolum[id].ayr__hedef,
    .ayr__kimlik--tam[id].ayr__hedef {
        scroll-margin-top: calc(var(--h) + 1rem);
    }
}

/* --- Profil kümeleri: kutu değil, ayraçlı başlık ------------------------ */
.ayr__duzen .ayr__grup {
    margin: 1.1rem 0 0;
    padding: 1rem 0 0;
    border: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;
}
.ayr__duzen .ayr__grup legend {
    float: left;
    width: 100%;
    margin: 0 0 .15rem;
    padding: 0;
    color: var(--ink-mute);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.4;
    text-transform: uppercase;
}
.ayr__duzen .ayr__grup legend + * { clear: both; }
.ayr__duzen .ayr__grup > .ayr__ipucu { margin: 0; }
.ayr__duzen .ayr__anahtar { background: var(--surface-2); }

/* Şifre formu açıklama paragrafına yapışıyordu (profilde kümenin ayracı
   bu boşluğu veriyor, şifrede küme yok). */
.ayr__duzen .ayr__bolum > .gdr__form { margin-top: 1rem; }
.ayr__duzen .ayr__bolum > .ay-alert + .gdr__form { margin-top: .75rem; }

/* Güvenlik kutucukları daha sıkı. İki kolonda sağ kolon dar: üç kutucuk
   2 + 1 dağılıp boşluklu duruyordu, alt alta tek sütun. */
.ayr__duzen .ayr__kutucuklar { gap: .5rem; }
.ayr__duzen .ayr__kutucuk { padding: .6rem .75rem; }
@media (min-width: 1180px) {
    .ayr__duzen .ayr__kutucuklar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .ayr__kunye { gap: .5rem; padding-top: .85rem; }
    .ayr__kunye_oge { padding: .55rem .7rem; }
    .ayr__duzen,
    .ayr__kolon { gap: .85rem; }
    .ayr__duzen .ayr__eylem .ay-btn--primary {
        width: 100%;
        justify-content: center;
    }
}

/* --- 24l-2 · Gelen kutusunun YENİDEN TASARIMI  —  2026-09-25 ------------

   KULLANICI KARARI: "/panel/dm.php sayfasını sıfırdan oluştur. amatör
   duruyor. tasarımla uyumlu, gelişmiş, kullanışlı ve kurumsal olsun. %100
   mobil uyumlu ve kaliteli de olsun."

   NE AMATÖR DURUYORDU — ÖLÇÜLDÜ (kod okunarak ve ekran basılarak)

     1) KONUŞMADAN GELEN KUTUSUNA DÖNECEK BAĞLANTI YOKTU. Tek çıkış yolu
        tarayıcının geri düğmesi ya da yan menüdeki "Mesajlar" — ve o
        bağlantı süzgeci, arama terimini ve sayfa numarasını SIFIRLIYOR.
        Üçüncü sayfadaki bir konuşmayı açan kullanıcı listeye dönmek için
        iki kez ileri basmak zorundaydı. Gerçek bir gezinme kusuru.

     2) BOŞ DURUM TEK GRİ CÜMLEYDİ (<p class="hsp__bos">). Aynı projede
        panel/hesaplar.php kesikli çerçeveli, ikonlu, başlıklı ve düğmeli
        bir boş durum kutusu kullanıyor (.hsp__bos_kutu, §24e). Gelen
        kutusu boşken ekranda hiçbir görsel çapa ve hiçbir sonraki adım
        yoktu.

     3) DİKKAT BEKLEYEN İKİ SAYI HİÇBİR YERDE YOKTU. Süzgeç sekmeleri durum
        başına konuşma sayıyor ('acik', 'devredildi', 'kapali') ama
        kullanıcının "şimdi ne yapmalıyım" sorusunu cevaplayan iki sayı
        orada yok: OKUNMAMIŞ konuşma ve ONAY BEKLEYEN TASLAK. Taslak
        özellikle önemli — agent cevabı yazdı, "Gönder" denmeden çıkmıyor,
        yani ekranda bekleyen gerçek bir iş.

     4) ARAMA YOKTU. Liste 25'lik sayfalara bölünüyor ve tek gezinme
        ileri/geri. Eski bir konuşmayı bulmak kör tarama demekti.

     5) SATIRIN SAĞ KOLONU yalnızca durum etiketleri taşıyordu; zaman ise
        hesap adının yanına, en soluk satıra sıkışmıştı ("hesap · tarih").
        Gelen kutusunda zaman birinci sınıf bilgi.

     6) KONUŞMA EKRANINDA DURUM YAZMIYORDU. 'devredildi' ve 'kapali' için
        uyarı şeridi vardı, 'acik' için hiçbir şey — yani "agent bu
        konuşmayı yürütüyor" bilgisi hiç görünmüyordu.

     7) MESAJ AKIŞI TARİH AYRACI OLMAYAN TEK BİR BALON YIĞINIYDI. Her
        balonun altında saat yazıyor ama günün nerede değiştiği belli
        değil.

   --------------------------------------------------------------------------
   ⚠ KONUŞMA EYLEMLERİ YUKARI TAŞINMADI — MEVCUT KARAR KORUNDU

   Devral / agent'a ver / kapat düğmeleri cevap kutusunun ALTINDA duruyor ve
   orada KALDI. §24l'deki gerekçe hâlâ geçerli: "yanlışlıkla basılması akışı
   değiştiriyor". Başlığa taşımak, kapatma düğmesini ekranın en görünür
   köşesine koymak olurdu.

   Düzeltilen şey konumu değil OKUNURLUĞU: üçü artık başlıklı bir kutunun
   (.dm__yonet) içinde ve "kapat" diğer ikisinden görsel olarak ayrı. Eskiden
   üçü de aynı .ay-btn--ghost'tu, yani "agent'a geri ver" ile "konuşmayı
   kapat" birebir aynı görünüyordu.

   --------------------------------------------------------------------------
   ⚠ BU BLOK EKLİYOR; MEVCUT KURALLARDAN YALNIZCA .dm__ust DEĞİŞTİ (yukarıda,
   yerinde). .dm__satir'ın ızgarası, balonlar, etiketler ve taslak kesikli
   çerçevesi olduğu gibi duruyor.

   ⚠ .dm__akis VE .dm__mesaj--taslak SİLİNEMEZ/YENİDEN ADLANDIRILAMAZ:
   ikisi de araclar/surum-imzalari.php'de css/style.css için ZORUNLU imza.
   Taslağın gönderilmiş mesajdan ayırt edilmesi bir güvenlik/güven konusu.

   ⚠ .dm__* SINIFLARI YALNIZCA panel/dm.php'DE kullanılıyor (denetlendi),
   yani bu sayfanın sınıflarını değiştirmek başka ekranı oynatmıyor. İstisna:
   .dm__satir §24f'deki durum şeridi blokunun seçici grubunda geçiyor
   (--st-serit geometrisi) — o yüzden adı ve sınıf yapısı korundu.
   ------------------------------------------------------------------------ */

/* === 1 · ÖZET ŞERİDİ  (.dm__pano) ======================================

   İki kutucuk: okunmamış konuşma ve onay bekleyen taslak. Üçüncü bir
   kutucuk ("Sizde bekleyen") DENENDİ VE ÇIKARILDI — süzgeç sekmeleri o
   sayıyı zaten gösteriyor ('dm.durum.devredildi'), aynı sayıyı iki kez
   basmak şeridi bilgi değil dekor yapardı.

   ⚠ ŞERİT İKİSİ DE 0 İSE HİÇ BASILMIYOR (panel/dm.php'de koşul). Sıfır
   yazan bir kutucuk dikkat çekiyor ama bilgi vermiyor — aynı kural yan
   menü rozetlerinde de var (_panel.php → 'rozet' 0 ise basılmıyor).

   auto-fit + minmax: kolon sayısı KIRILIM NOKTASI OLMADAN çözülüyor, yani
   bu bileşen için ayrı bir @media kuralı yok. */
.dm__pano {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .65rem;
    margin: 1rem 0 0;
}

.dm__ist {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}

/* RENKLER SAYFANIN KENDİ DİLİNDEN, yeni ton tanımlanmadı:

     --yeni     okunmamış satırın zemini ile AYNI (--brand-soft, .dm__satir--yeni)
     --taslak   taslak etiketinin tonu ile AYNI (--st-bek-*, .dm__etiket--taslak)

   Yani kutucuğun rengi, listede aynı şeyin hangi renkte işaretlendiğini
   önceden söylüyor. Süs değil, eşleştirme. */
.dm__ist--yeni {
    border-color: var(--brand-line);
    background: var(--brand-soft);
}
.dm__ist--taslak {
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
}

.dm__ist_sim {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--brand);
}
.dm__ist_sim .ay-ico {
    font-size: 15px;
}
.dm__ist--taslak .dm__ist_sim {
    color: var(--st-bek-ink);
}

.dm__ist_gov {
    min-width: 0;
}
.dm__ist_deger {
    display: block;
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 700;
    /* Sayı 1'den 10'a çıkarken rakam sayısı değişiyor; oransal rakamda
       altındaki etiketle arasındaki hiza kayıyordu. */
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.dm__ist_ad {
    display: block;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}

/* === 2 · ARAÇ ŞERİDİ + ARAMA  (.gdr__arac, .gdr__ara) ==================

   ⚠ SINIF ÖNEKİ .gdr__ VE BU BİLİNÇLİ: bileşen İKİ LİSTE EKRANI tarafından
   kullanılıyor (panel/dm.php gelen kutusu ve panel/gonderiler.php gönderi
   listesi), yani gelen kutusuna ait değil.

   Önek seçimi §24l'nin kendi kuralını izliyor: "Sekmeler ve sayfalama da
   §24f'deki .gdr__sekme / .gdr__sayfalama — gelen kutusu ile gönderi
   listesi aynı desende gezinmeli." Liste mobilyası (sekme, sayfalama,
   arama) zaten .gdr__ ailesinde toplanıyor; arama .dm__ önekiyle yazılsaydı
   gönderi listesinde "gelen kutusu" adlı bir sınıf durur ya da ikinci bir
   kopya çıkardı.

   Arama GERÇEK BİR GET FORMU: JavaScript'siz çalışıyor, sonuç adresi
   paylaşılabilir ve tarayıcı geçmişine giriyor. Canlı süzme (her tuşta
   istek) yazılmadı — panelde <script> yok ve olmasın.

   ⚠ ALAN YÜKSEKLİĞİ 38 PİKSELE İNİYOR. .ay-input varsayılanı
   --control-h-lg (50px, theme.css § 9) ve yanındaki .ay-btn --control-h
   (38px): aynı şeritte yan yana duran iki kontrol 12 piksel farklı
   yükseklikte kalıyordu ve ikisi de dikey ortada durduğu için fark hem
   üstte hem altta 6 piksel olarak görünüyordu. Aynı ölçü kusuru panelin
   üst şeridinde de ölçülmüştü (§ 24a → .pnl__profil). */
.gdr__arac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 1rem 0 0;
}

.gdr__ara {
    /* 18rem taban: bundan darda şeridin sarması gerekiyor, çünkü içindeki
       alan + düğme ikilisi daha küçük bir kutuda okunamaz hâle geliyor. */
    flex: 1 1 18rem;
    display: flex;
    gap: .5rem;
    min-width: 0;
}
.gdr__ara .ay-input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--control-h);
}

/* Sonuç satırı: hangi terim arandı ve aramanın KAPSAMI. Kapsam cümlesi süs
   değil ve iki ekranda AYNI DEĞİL:

     gelen kutusu    kişi adında/kullanıcı adında aranıyor, MESAJ METNİNDE
                     DEĞİL — mesajlar.metin üzerinde FULLTEXT indeksi yok ve
                     yazışma hızlı büyüyor (gerekçe config/dm.php).
     gönderi listesi başlıkta VE metinde aranıyor — gonderiler müşteri başına
                     yavaş büyüyor ve başlık çoğu zaman boş, yani yalnızca
                     başlıkta aramak işe yaramazdı.

   İki farklı vaat, iki farklı çeviri anahtarı (dm.ara_not / gdr.ara_not).
   Kullanıcı "sonuç yok" ile "bu alanda aranmıyor" arasındaki farkı bilmeli. */
.gdr__ara_bilgi {
    margin: .75rem 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}
.gdr__ara_bilgi span {
    display: block;
    color: var(--ink-mute);
}

/* === 3 · GERİ BAĞLANTISI  (.dm__geri) ==================================

   Konuşmadan gelen kutusuna dönüyor VE süzgeci, aramayı, sayfa numarasını
   koruyor (adres panel/dm.php'de kuruluyor). Yan menüdeki "Mesajlar"
   bağlantısı bunların hepsini sıfırlıyor — bu yüzden ikisi aynı şey değil
   ve bu bağlantı gerekli.

   Sayfanın ilk öğesi: gezinme, içeriği okumaya başlamadan önce görünmeli. */
.dm__geri {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .85rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: color var(--t-fast) var(--ease);
}
.dm__geri:hover,
.dm__geri:focus-visible {
    color: var(--brand);
}
.dm__geri .ay-ico {
    font-size: 13px;
}

/* Ok "ileri/geri" demek, "sol/sağ" demek değil: Arapça sayfada sola bakan
   chevron ileriyi gösterir. Aynalama kalıbı § 24'teki oklarla aynı.
   ⚠ .ay-chev'in AKSİNE burada scaleX GÜVENLİ: 'geri' ikonu bir yazı
   karakteri (fa-chevron-left), CSS ile döndürülmüş bir kutu değil — yani
   silinecek bir rotate() yok (bkz. § 24'teki .ay-chev notu). */
[dir="rtl"] .dm__geri .ay-ico {
    transform: scaleX(-1);
}

/* === 4 · DURUM HAPI  ===================================================

   Konuşmanın durumu artık BAŞLIKTA da yazıyor; eskiden yalnızca
   'devredildi' ve 'kapali' için bir uyarı şeridi vardı, 'acik' için hiçbir
   şey — yani "agent bu konuşmayı yürütüyor" bilgisi hiç görünmüyordu.

   YENİ BİLEŞEN AÇILMADI: listedeki .dm__etiket birebir kullanılıyor.
   'kapali' nötr hâli, 'devredildi' zaten --devir (kehribar). Eksik olan tek
   ton 'acik' idi ve marka tonunu alıyor — agent akışı ürünün kendi işi,
   bekleyen bir iş ya da hata değil. */
.dm__etiket--acik {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}

/* === 5 · SATIRIN ZAMAN KOLONU  (.dm__zaman) ============================

   Zaman hesap adının yanındaki en soluk satırdan çıkıp sağ kolonun başına
   geçti ("hesap · 2026-09-25 01:56" → sağda "25.09 01:56", altında
   etiketler). Gelen kutusunda zaman taranan bir bilgi; .dm__alt artık
   yalnızca hangi hesaba geldiğini söylüyor.

   Kolon zaten vardı (.dm__satir'ın üçüncü kolonu, .dm__durum) ve column
   yönünde hizalıydı — yani yeni ızgara gerekmedi, kolonun içine bir öğe
   daha girdi. */
.dm__zaman {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* === 6 · GÜN AYRACI  (.dm__gun) ========================================

   Akış tarih ayracı olmayan tek bir balon yığınıydı; her balonun altında
   saat yazıyor ama günün nerede değiştiği görünmüyordu.

   ⚠ ÖĞE <li> AMA role="separator" TAŞIYOR (panel/dm.php). .dm__akis bir
   <ol> ve sıra anlamlı; ayraç listeye normal bir madde olarak girse ekran
   okuyucu onu "3. mesaj" diye sayardı. separator rolü onu saymanın dışına
   çıkarıyor, tarih de aria-label ile veriliyor.

   Çizgiler ::before/::after ile ve içerik DEĞİL dekor: metin ortada,
   iki yanına eşit uzayan hairline. */
.dm__gun {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .5rem 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.dm__gun::before,
.dm__gun::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--hairline);
}

/* === 7 · KONUŞMA YÖNETİMİ KUTUSU  (.dm__yonet) =========================

   Üç düğme (devral / agent'a ver / kapat) cevap kutusunun altında ve orada
   KALIYOR — gerekçe bu bölümün başındaki blokta. Değişen: artık başlıklı
   bir kutunun içinde duruyorlar, yani "bunlar konuşmanın akışını değiştiren
   ikincil işler" görsel olarak da söylüyor.

   Eskiden üçü de birebir aynı .ay-btn--ghost'tu; "agent'a geri ver" ile
   "konuşmayı kapat" ayırt edilemiyordu. Kapat artık ayrı (.dm__kapat). */
.dm__yonet {
    margin: 0;
    padding: .9rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.dm__yonet_bas {
    display: block;
    margin: 0 0 .65rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Kutunun İÇİNDEKİ düğme satırı kendi çizgisini taşımıyor: kabuk zaten
   çerçeveli. Özgüllük 0,2,0 → §24l'deki 0,1,0 kuralını eziyor. */
.dm__yonet .dm__eylemler {
    padding-top: 0;
    border-top: 0;
}

/* KAPAT AYRI DURUYOR ama KIRMIZI DEĞİL. Konuşmayı kapatmak veri
   kaybettirmiyor — kişi yeniden yazarsa konuşma kendiliğinden açılıyor
   (dm.kapali.baslik bunu söylüyor). Kırmızı göstermek geri alınamaz bir iş
   gibi okunurdu. Ayrım "itici" değil "ayrı": otomatik sol boşluk onu diğer
   ikisinden koparıyor, metni de soluk. */
.dm__kapat {
    margin-inline-start: auto;
    color: var(--ink-mute);
}

/* === 8 · BOŞ DURUM ====================================================

   Kutu §24e'deki .hsp__bos_kutu — YENİ BİLEŞEN YAZILMADI. Aynı ihtiyaç
   (kesikli çerçeve, ikon, başlık, açıklama, sonraki adım düğmesi) hesaplar
   ekranında çözülmüş ve ikinci bir kopya iki yerde bakım demekti.

   Burada yalnızca bir şey ekleniyor: kutunun üst boşluğu. Hesaplar
   ekranında kutudan önce bir bölüm başlığı var ve boşluk ondan geliyordu;
   gelen kutusunda kutu doğrudan süzgeç şeridinin altına düşüyor. */
.dm__bos_kutu {
    margin-top: 1rem;
}

/* --- Dar ekran: ≤640px  (§24l'nin kırılım noktası) --------------------- */
@media (max-width: 640px) {
    /* Özet kutucukları tek kolona: auto-fit 14rem tabanıyla 360 piksellik
       ekranda zaten tek kolona iniyor, ama dolgu kısılıyor ki iki kutucuk
       ekranın yarısını yemesin. */
    .dm__ist {
        padding: .7rem .85rem;
    }
    .dm__ist_deger {
        font-size: 1.2rem;
    }

    /* Arama şeridi tam genişlik: 18rem taban 360 piksellik ekranda
       şeridin tamamını istiyor, düğme de alta geçmesin diye alan ile
       birlikte tek satırda kalıyor. */
    .gdr__ara {
        flex: 1 1 100%;
    }

    /* Yönetim kutusunda "kapat" düğmesini sağa iten otomatik boşluk
       kalkıyor: düğmeler alt alta sarıyor ve otomatik margin sarmış bir
       satırda düğmeyi tek başına ortada bırakıyordu. */
    .dm__kapat {
        margin-inline-start: 0;
    }

    .dm__yonet {
        padding: .8rem .9rem;
    }
}

/* --- 24f-2 · Gönderi listesine eklenenler  —  2026-09-25 ----------------

   İki küçük parça. Arama şeridi burada DEĞİL: o bileşen iki liste ekranı
   tarafından paylaşılıyor ve § 24l-2'de duruyor (.gdr__arac / .gdr__ara /
   .gdr__ara_bilgi) — gerekçe orada.
   ------------------------------------------------------------------------ */

/* SIRADAKİ PLANLI GÖNDERİ — açıklama cümlesinin altında ikinci satır.

   NİYE VAR: liste COALESCE(planlanan, olusturuldu) DESC ile sıralı, yani EN
   İLERİ tarihli planlı gönderi en üstte duruyor ve "birazdan çıkacak olan"
   listenin ortasında kalıyor. Bu ekranın en çok sorulan sorusu o.

   display: block — .gdr__lead bir <p> ve cümle ile bu satır aynı paragrafın
   içinde; blok yapılmadan zaman bilgisi cümlenin arkasına ekleniyor ve uzun
   açıklamada satır ortasında kayboluyordu.

   Ölçü .gdr__lead'in altında kalıyor (--fs-lg → --fs-sm): açıklama birincil,
   bu satır bağlam. */
.gdr__sirada {
    display: block;
    margin-top: .2rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* BOŞ DURUM KUTUSUNUN ÜST BOŞLUĞU.

   Kutu § 24e'deki .hsp__bos_kutu — yeni bileşen yazılmadı, gönderi listesi
   panelin diğer dört liste ekranıyla aynı kutuyu kullanıyor. Hesaplar
   ekranında kutudan önce bir bölüm başlığı var ve boşluk ondan geliyor;
   burada kutu doğrudan süzgeç şeridinin altına düşüyor.

   ⚠ Aynı tek kurala gelen kutusu da ihtiyaç duydu (.dm__bos_kutu, § 24l-2)
   ve ikisi BİRLEŞTİRİLMEDİ: iki ekranın kutusu farklı komşunun altında
   duruyor, yani değer ileride ayrışabilir. Tek satırlık bir kuralı
   paylaşmak için iki sayfayı birbirine bağlamanın karşılığı yok. */
.gdr__bos_kutu {
    margin-top: 1rem;
}

/* --- 24f-3 · Gönderi listesi + düzenleyici yeniden tasarımı  —  2026-09-25 -

   KULLANICI KARARI: "gonderiler.php ve gonderi.php sayfalarını sıfırdan
   oluştur. amatör duruyor. tasarımla uyumlu, gelişmiş, kullanışlı ve
   kurumsal olsun."

   NE AMATÖR DURUYORDU — ÖLÇÜLDÜ (kod okunarak, iki ekran)

   LİSTE (gonderiler.php)

     1) BAŞLIK ÜÇÜNCÜ SIRADAYDI. Satır üç bloktu ve üstveri (durum rozeti,
        platform rozetleri, zaman) başlığın ÜSTÜNDE duruyordu: göz her
        satırda önce rozeti okuyup sonra aradığı şeye iniyordu.

     2) HER SATIRDA 2-3 KONTROL VARDI. 20 kayıtlık sayfada 40-60 düğme; liste
        bir tablo değil düğme duvarı gibi görünüyordu. Eylemler artık kendi
        kolonunda ve satırın kendisi zaten bağlantı.

     3) SATIR ÜÇ BLOK YÜKSEKLİĞİNDEYDİ. Aynı bilgi için iki kat kaydırma.

   DÜZENLEYİCİ (gonderi.php)

     4) BEŞ ALAN TEK DÜZ AKIŞTA. Başlık, metin, bağlantı, hedefler, saat —
        üç ayrı karar (ne yazıyorum · nereye · ne zaman) ama tek ayrımsız
        liste olarak okunuyordu. Aynı kusur panel/agent.php'de ölçülmüş ve
        .ajn__grup ile çözülmüş; panel/ayarlar.php'de de .ayr__grup var.

     5) KARAKTER SAYISI DONMUŞ BİR SAYIYDI. "En sıkı sınır X: 280 karakter.
        Şu an 42." — o 42 SUNUCUDA, sayfa basılırken hesaplanıyordu ve
        kullanıcı yazmaya başladığı anda yanlışa dönüyordu. Sınırı aştığını
        ancak "Planla"ya basıp hata alınca öğreniyordu. Sayaç artık canlı
        (js/theme.js → Sayac) ve cümlenin donmuş kuyruğu çeviriden çıkarıldı.

     6) GERİ BAĞLANTISI HAM '&larr;' KARAKTERİYDİ. RTL'de (Arapça) "geri" oku
        sola bakmaya devam ediyordu, oysa sağdan sola yazımda geri SAĞA
        bakar. İkon setine geçti ve aynalanıyor — aynı düzeltme
        panel/agent-bilgi.php'yi de kapsıyor (o da .gdr__geri kullanıyor).

   ⚠ BU BLOK EKLİYOR; yerinde değişen tek şey yukarıdaki .gdr__ust_satir /
   .gdr__alt_satir ikilisinin .gdr__meta'ya dönüşmesi (ikisi de yalnızca
   panel/gonderiler.php'de kullanılıyordu).
   ------------------------------------------------------------------------ */

/* === 2 · KAPAK KUTUSU  (.gdr__kapak*)  —  karonun kendisi ===============

   Kart ızgarası bu bölümde doğmuştu (2026-09-25) ve 2026-09-27'de kaldırıldı
   (kullanıcı kararı: yalnızca Instagram profili ızgarası, § 24f-5). Kapak
   kutusu karonun kendisi olarak kaldı; aşağıdaki gerekçeler hâlâ geçerli.
   ------------------------------------------------------------------------ */

/* --- KAPAK -------------------------------------------------------------

   1:1 VE object-fit: cover. Gönderi görselleri dikey, yatay ve kare karışık
   geliyor; oranı serbest bırakmak ızgarayı tırtıklı yapıyor ve kartların
   eylem şeritleri farklı yüksekliklerde kalıyordu. Kırpma kabul edilebilir
   çünkü kapak bir KÜÇÜK RESİM — tam boy hâli gönderi ekranında duruyor.

   Zemin --surface-2: görsel inerken (loading="lazy") kutu boş beyaz değil,
   kartın parçası gibi duran açık gri bir alan oluyor. */
.gdr__kapak {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--surface-2);
    border-block-end: 1px solid var(--hairline);
}

/* ÜSTTE KARARTMA KATMANI: durum hapı beyaz bir görselin üzerine düştüğünde
   de okunuyor. Hapın kendi zemini var ama sınırı soluk kalıyordu (ölçüldü:
   açık gri bir ürün fotoğrafında hapın kenarı kayboluyor).

   ::before, ayrı bir <div> DEĞİL: katman tamamen dekoratif ve belgede
   yeri yok. Üst 4.5rem yeter — hap orada duruyor. */
.gdr__kapak::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4.5rem;
    background: linear-gradient(to bottom, rgba(16, 24, 40, .22), transparent);
    pointer-events: none;
}

/* Görsel VE video aynı sınıfı taşıyor: ikisi de kapak, farkı yalnızca
   etiketi. object-fit ikisinde de çalışıyor. */
.gdr__kapak_ort {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- KAPAK: MEDYASIZ GÖNDERİ ------------------------------------------

   Metnin kendisi tipografik bir karo oluyor. Boş dikdörtgen bırakmak
   ızgarayı delik deşik gösteriyor ve "burada bir şey yüklenemedi" gibi
   okunuyordu — oysa medyasız gönderi bir kusur değil bir tercih.

   Karartma katmanı burada da duruyor (aynı ::before) ve açık zeminde
   neredeyse görünmüyor; hapın üst kenarına hafif bir ayrım veriyor. */
.gdr__kapak--yazi {
    background: linear-gradient(155deg, var(--brand-soft), var(--surface));
}

/* ⚠ KARARTMA KATMANI METİN KAROSUNDA KAPALI — ölçüldü (yerleşim tarayıcıda
   çizilip bakıldı): karo açık ve düz, üstündeki yarı saydam siyah gradyan
   karonun tepesinde GÖRÜNÜR bir gri bant bırakıyordu ve bir kusur gibi
   duruyordu. Katmanın tek işi durum hapını fotoğraf üzerinde okunur kılmak;
   burada fotoğraf yok ve hap kendi zeminini taşıyor (.gdr__durum). */
.gdr__kapak--yazi::before {
    content: none;
}

/* Yedi satırda kırpılıyor: 1:1 kutuda sekizinci satır eylem şeridine
   dayanıyordu. Sınır CSS'te DE var (PHP 220 karakterde kesiyor) çünkü iki
   sınır iki farklı şeyi ölçüyor — PHP karakteri, CSS satırı ve satır sayısı
   kartın genişliğine göre değişiyor. */
.gdr__kapak_metin {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    overflow: hidden;
    /* ⚠ DOLGU DEĞİL KENAR BOŞLUĞU — ÖLÇÜLMÜŞ KUSUR (2026-09-26, headless
       Chrome ekran görüntüsü): overflow: hidden DOLGU kutusunda kırpıyor.
       Alt dolgu 2.75rem iken line-clamp'in gizlediği 8. satır o dolgunun
       içinde GÖRÜNÜYORDU ("…Detaylar ve… / b…") ve "Metin gönderisi"
       etiketine dayanıyordu. Boşluk kutunun dışına alınınca kırpma tam
       yedinci satırın altında kalıyor; yerleşim aynı. */
    margin: 2.5rem 1.1rem 2.75rem;
    padding: 0;
    color: var(--ink-soft);
    font-size: var(--fs-base);
    line-height: 1.55;
    text-align: center;
    overflow-wrap: anywhere;
}

/* "Metin gönderisi" etiketi — karonun sol alt köşesi. Hap zemini YOK: karo
   açık ve düz, üstünde ikinci bir kutu gürültü olurdu. */
.gdr__kapak_tur {
    position: absolute;
    inset-block-end: .55rem;
    inset-inline-start: .65rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* --- KAPAK: ÜSTÜNE BİNENLER -------------------------------------------

   ÜÇÜNÜN DE z-index'i YOK: konumlanmış öğeler belge sırasına göre
   çiziliyor ve üçü de kapağın içinde, yani görselin ÜSTÜNDE. Kapak karonun
   <a>'sının içinde (§ 24f-5), yani işaretlerin üstüne tıklamak da gönderiyi
   açıyor. (Kart ızgarası döneminde burada gerilmiş bir bağlantı katmanı
   vardı; 2026-09-27'de kart görünümüyle birlikte kalktı.) */

/* Durum hapı — sol üst. Renkleri .gdr__durum'dan geliyor (paylaşımlı sınıf,
   panel/takvim.php ve panel/gonderi.php da kullanıyor); burada yalnızca
   konum ve gölge var. Gölge hapı görselden ayırıyor. */
.gdr__kapak_durum {
    position: absolute;
    inset-block-start: .55rem;
    inset-inline-start: .55rem;
    box-shadow: var(--sh-1);
}

/* Oynat işareti — kapağın tam ortası.

   inset: 0 + margin: auto + SABİT ÖLÇÜ ile ortalanıyor; transform
   kullanılmadı çünkü kapak bir grid kabı ve mutlak konumlu çocukta
   place-items'ın davranışı tarayıcılar arasında ayrışıyor. Bu üçlü her yerde
   aynı sonucu veriyor ve RTL'de de simetrik. */
.gdr__kapak_oynat {
    position: absolute;
    inset: 0;
    margin: auto;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-pill);
    background: rgba(16, 24, 40, .55);
    /* ⚠ İÇ HALKA — ÖLÇÜLMÜŞ KUSUR (yerleşim tarayıcıda çizilip bakıldı):
       koyu bir videonun ilk karesinde (#111827 gibi) yarı saydam siyah daire
       zeminden AYRILMIYOR ve işaret kayboluyordu, yani kutunun video olduğunu
       söyleyen tek görsel ipucu görünmüyordu. Beyaz iç halka her iki uçta da
       çalışıyor: koyu karede daireyi çiziyor, açık karede zaten koyu zemin
       ayırıyor. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    color: #FFF;
    font-size: .9rem;
}

/* Çoklu dosya sayacı — sağ alt. Instagram'ın katmanlı kare işaretinin
   karşılığı: ikon + sayı. Kendi koyu zemini var çünkü kapağın ALT kenarında
   duruyor ve oradaki karartma katmanı yok (katman yalnızca üstte). */
.gdr__kapak_sayi {
    position: absolute;
    inset-block-end: .55rem;
    inset-inline-end: .55rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .5rem;
    border-radius: var(--r-pill);
    background: rgba(16, 24, 40, .6);
    color: #FFF;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

/* === 2 · DÜZENLEYİCİ: FORM GRUBU  (.gdr__grup) =========================

   Beş alan tek düz akışta iniyordu ve hangi alanın hangi kararın parçası
   olduğu görünmüyordu ("Bağlantı" içerik mi, hedef mi?). Üç gruba ayrıldı:
   içerik · hedefler · zamanlama. Gruplama yalnızca görsel değil SEMANTİK —
   <fieldset>/<legend> olduğu için ekran okuyucu alanı okurken grubun adını
   da söylüyor.

   ⚠ ÖLÇÜLER .ayr__grup (§24o) VE .ajn__grup (§24h) İLE AYNI VE BİLİNÇLİ:
   üç ekran aynı deseni kullanıyor. Tek kurala BİRLEŞTİRİLMEDİ çünkü üçü üç
   ayrı bölümde yaşıyor ve biri değişmek istediğinde diğer ikisini
   oynatmaması gerekiyor. Dördüncü bir tüketici çıkarsa birleştirme zamanı
   gelmiş olur — o zaman ortak bir .ay-grup doğru adres. */
.gdr__grup {
    margin: 0;
    padding: .85rem 1rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.gdr__grup > legend {
    padding: 0 .35rem;
    font-size: var(--fs-sm);
    font-weight: 600;
}
/* fieldset kendi blok akışını kuruyor; .gdr__form'un ızgara boşluğu İÇİNE
   geçmiyor (aynı not §24o'da da var). */
.gdr__grup .ay-field + .ay-field,
.gdr__grup .ay-field + .gdr__uyum,
.gdr__grup .gdr__hedefler { margin-top: .85rem; }

/* Hedef kümesi artık bir grubun İÇİNDE: kendi legend'ı grubun legend'ıyla
   çakışmasın diye kaldırılıyor (grup adı zaten "Yayınlanacak hesaplar"). */
.gdr__grup .gdr__hedefler > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* === 3 · KARAKTER SAYACI  (.gdr__sayac) ================================

   Sunucu doğru sayıyı basıyor, js/theme.js → Sayac onu yazarken canlı
   tutuyor. JS kapalıysa sayı sayfanın basıldığı andaki değerde kalıyor —
   eski davranışın aynısı, yani gerileme yok.

   ⚠ <output> ETİKETİ: form sonucu bildiren yerleşik öğe. aria-live'ı JS
   yönetiyor ve yalnızca AŞIMDA açıyor — her tuş vuruşunda sayı okumak ekran
   okuyucuyu kullanılamaz hâle getirir. */
.gdr__sayac_satir {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin: .35rem 0 0;
}
.gdr__sayac {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
/* Aşım HATA TONUNDA: sınırı geçen metin gönderilemiyor, yani bu bir uyarı
   değil engel. Renk tek taşıyıcı değil — sayının kendisi sınırdan büyük
   görünüyor ve JS title'a "{n} karakter fazla" yazıyor. */
.gdr__sayac_satir.is-asim .gdr__sayac {
    color: var(--st-hata-ink);
}

/* === 4 · DÜZENLEYİCİ BAŞLIK SATIRI  (.gdr__bas) ========================

   Mevcut bir gönderi açıldığında durumu ekranda hiçbir yerde yazmıyordu:
   h1 her iki kipte de "Gönderi" diyor. Listede "Hata" görüp satırı açan
   kullanıcı, sonuç bölümünü okuyana kadar neyle karşılaştığını bilmiyordu.

   Yeni gönderide hiç basılmıyor (gösterilecek durum yok). */
.gdr__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0 0 1rem;
}

/* === 5 · SALT OKUNUR KARTI  (.gdr__kilit) ==============================

   "Bu gönderi düzenlenemez" bildirimi .ay-alert--blok ile basılıyordu, yani
   ONBOARDING/DURUM içeriği bir UYARI ŞERİDİ olarak. İki sorun birdendi:

     · role="status" bir DEĞİŞİKLİK duyurusu; ekran okuyucu sayfanın kalıcı
       içeriğini canlı bölge güncellemesi gibi okuyordu.
     · js/theme.js şeride kapatma (×) düğmesi ekliyor: kullanıcı "bu gönderi
       düzenlenemez" bilgisini kapatabiliyordu ve kapatınca ekranda kilidin
       sebebi kalmıyordu.

   Aynı kusur gönderi listesinin boş durumunda da vardı ve aynı turda
   düzeltildi (§24f-2 → .gdr__bos_kutu). */
.gdr__kilit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    margin: 0 0 1.25rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--brand-line);
    border-radius: var(--r-md);
    background: var(--brand-soft);
}
.gdr__kilit_gov { flex: 1 1 16rem; min-width: 0; }
.gdr__kilit_bas {
    display: block;
    color: var(--ink);
    font-weight: 650;
}
.gdr__kilit p {
    margin: .2rem 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}

/* === 6 · SİL AYRI DURUYOR  (.gdr__sil) =================================

   Düğme satırında "Taslak olarak kaydet", "Planla" ve "Sil" yan yanaydı;
   üçüncüsü geri alınamaz. Otomatik boşluk onu diğer ikisinden koparıyor.
   Kırmızı YAPILMADI: .hsp__kaldir zaten sessiz bir bağlantı ve o karar
   (yıkıcı eylemi öne çıkarmamak) § 24e'de gerekçeli. */
.gdr__sil { margin-inline-start: auto; }

/* === 7 · GERİ OKU RTL'DE AYNALANIYOR ===================================

   Bağlantı ham '&larr;' karakteri taşıyordu: Arapça sayfada "geri" oku sola
   bakmaya devam ediyordu, oysa sağdan sola yazımda geri SAĞA bakar. Artık
   ikon setinden geliyor ve aynalanıyor.

   ⚠ scaleX BURADA GÜVENLİ: 'geri' ikonu bir yazı karakteri
   (fa-chevron-left), CSS ile döndürülmüş bir kutu değil — yani silinecek bir
   rotate() yok (bkz. § 24'teki .ay-chev notu, orada scaleX dönüşü siliyordu).

   Kural .gdr__geri'ye bağlı, yani panel/agent-bilgi.php de aynı düzeltmeyi
   alıyor — o ekran da bu bileşeni kullanıyor. */
[dir="rtl"] .gdr__geri .ay-ico {
    transform: scaleX(-1);
}

/* --- Dar ekran: ≤640px ------------------------------------------------- */
@media (max-width: 640px) {
    .gdr__grup {
        padding: .8rem .9rem .9rem;
    }

    /* Düz formdaki gruplar masaüstünde kart dolgusu alıyor (§24f); telefonda
       o dolgu ekranın dar genişliğini yiyor, bu yüzden yukarıdaki mobil
       ölçüye dönüyorlar. Özgüllük 0,2,0 olduğu için ayrıca yazılması
       ŞART: 0,1,0'lık .gdr__grup kuralı masaüstü değerini ezemez. */
    .gdr__form--duz > .gdr__grup {
        padding: .8rem .9rem .9rem;
    }

    /* Sil düğmesini sağa iten otomatik boşluk kalkıyor: düğmeler alt alta
       sarıyor ve otomatik boşluk onu tek başına ortada bırakıyordu. */
    .gdr__sil { margin-inline-start: 0; }
}

/* --- 24f-5 · Gönderi IZGARASI — Instagram profili  —  2026-09-27 ---------

   KULLANICI KARARLARI (aynı gün, sırayla):
     1) "instagram da kutu kutu gönderi gibi de olsun. alt alta kayan feed
        gibi de olsun. görünüm seçme gibi de olsun" → kart · ızgara · akış
     2) "gonderiler.php sayfası sadece ızgara görünümünde olsun. [Kart ·
        Izgara · Akış] kartlarını da sil." → YALNIZCA IZGARA

   Kart görünümünün (.gdr__izgara / .gdr__kart / .gdr__kart_gov / .gdr__bag /
   .gdr__baslik / .gdr__ozet / .gdr__meta* / .gdr__eylem) ve akışın
   (.gdr__akis*) kuralları, seçicinin (.gdr__arac_satir / .gdr__gorunum)
   kuralları SİLİNDİ — hiçbirinin başka tüketicisi yoktu (panel/, adk-panel/
   ve js/ tarandı). Ölü CSS, bir sonraki okuyucuya iki yerleşim varmış gibi
   gösterirdi.

   KAPAK KUTUSU (.gdr__kapak* — § 24f-4 · KAPAK) YERİNDE KALDI: karonun
   kendisi o. Burada yalnızca küçük karoya göre ölçüler ve karonun kabı var.
   Gerekçelerin tamamı panel/gonderiler.php'nin başında. */

/* "Sıradaki: …" satırı o gönderiye bağlantı. Blok DEĞİL: tam satır
   genişliğinde bir tıklama alanı cümlenin bittiği yerden sonra da
   tıklanıyordu. 24px — WCAG 2.5.8, satırda tek başına duruyor. */
a.gdr__sirada {
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    color: var(--brand);
    text-decoration: none;
}
a.gdr__sirada:hover,
a.gdr__sirada:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* IZGARA. Kolon sayısı SABİT: telefonda 3 (Instagram profili — kullanıcı o
   düzeni tanıyor), ≥576px'te 4, ≥1400px'te 5. Sayfa 20 karo (kullanıcı
   kararı, 2026-09-27) ve 4 ile 5 kolon ona tam bölünüyor; yalnızca
   telefonda son sıra iki kare kalıyor. minmax(0, 1fr): uzun bir ad ya da
   geniş bir görsel kolonu min-content'ten genişletip ızgarayı taşırmasın.
   Boşluk dar (.3rem): karolar bir mozaik gibi okunmalı. */
.gdr__karolar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gdr__karo {
    min-width: 0;
}
/* İptal edilmiş gönderi soluk: ızgarada duruyor (geri alınabilir) ama
   dikkat çekmiyor. */
.gdr__karo--iptal {
    opacity: .72;
}

/* KARO TEK BAĞLANTI. overflow: hidden → kapak karonun köşesini alıyor.
   Odak halkası bağlantının kendisinde (karo = bağlantı). */
.gdr__karo_bag {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--r-sm);
    color: inherit;
    text-decoration: none;
}
.gdr__karo_bag:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Kapak kare ve alt kenarlıksız: § 24f-4'teki kenarlık kartın gövdesini
   kapaktan ayırıyordu, karoda gövde yok. */
.gdr__karo .gdr__kapak {
    aspect-ratio: 1 / 1;
    border-block-end: 0;
}

/* Metin karosunun zemini sayfa zeminine çok yakın (brand-soft → surface) ve
   sık ızgarada kenarsız bir leke gibi duruyordu; ince iç çizgi onu
   görsellerle aynı kare olarak okutuyor. */
.gdr__karo .gdr__kapak--yazi {
    box-shadow: inset 0 0 0 1px var(--hairline);
}

/* KAPAĞIN ÜSTÜNDEKİ İŞARETLER küçük karoya göre daralıyor.

   ⚠ Durum hapında max-width + ellipsis — ÖLÇÜLMÜŞ KUSUR (360px, headless
   Chrome): ~110 piksellik karoda "Kısmen yayınlandı" karonun sağ kenarından
   taşıp kırpılıyordu. Tam durum adı sekmede yazılı ve ekran okuyucu hapın
   tam metnini okuyor.

   ⚠ HAP SOL ALTTA (2026-09-27): sol üst köşe çoklu seçimin kutusu, sağ üst
   Düzenle + Sil. Sağ altta çoklu dosya sayacı varsa (.gdr__kapak--cok)
   genişlik ona yer bırakıyor (3.5rem) — ikisi aynı satırda üst üste
   binmesin. Sayaçsız karoda 3.5rem'i koşulsuz ayırmak 360 pikselde
   "Gönderiliyor"u "Gönd…"e indiriyordu (ölçüldü). */
.gdr__karo .gdr__kapak_durum {
    inset-block-start: auto;
    inset-block-end: .35rem;
    inset-inline-start: .35rem;
    max-width: calc(100% - .7rem);
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .05rem .45rem;
    font-size: .7rem;
}
.gdr__karo .gdr__kapak--cok .gdr__kapak_durum {
    max-width: calc(100% - 3.5rem);
}

/* ⚠ TELEFONDA SAYAÇ YALNIZCA İKON — ÖLÇÜLMÜŞ KUSUR (2026-09-27, 390px):
   üç kolonlu ızgarada karo ~115px; sayaç (ikon + sayı) 3.5rem ayırınca
   çoklu dosyalı her karoda hap "Planla…", "Yayınl…", "Kısme…" diye
   kırpılıyordu. Instagram profilinin kendi işareti de sayısız — yalnızca
   katmanlı kare. Sayı görsel olarak düşüyor; ekran okuyucu tam cümleyi
   ("3 dosya", sr-only) okumaya devam ediyor. */
@media (max-width: 575px) {
    .gdr__karo .gdr__kapak_sayi_n {
        display: none;
    }
    .gdr__karo .gdr__kapak--cok .gdr__kapak_durum {
        max-width: calc(100% - 2.4rem);
    }
}
.gdr__karo .gdr__kapak_sayi {
    inset-block-end: .35rem;
    inset-inline-end: .35rem;
    padding: .05rem .4rem;
    font-size: .7rem;
}
.gdr__karo .gdr__kapak_oynat {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .75rem;
}
.gdr__karo .gdr__kapak_tur {
    inset-block-end: .35rem;
    inset-inline-start: .45rem;
    font-size: .7rem;
}
/* Metin karosu: kenar boşluğu (dolgu DEĞİL — § 24f-4'teki ölçülmüş kırpma
   kusuru: dolgu line-clamp'in gizlediği satırı görünür bırakıyordu) ve
   satır sayısı küçük kareye göre. */
.gdr__karo .gdr__kapak_metin {
    -webkit-line-clamp: 5;
    line-clamp: 5;
    margin: 2rem .7rem 1.9rem;
    font-size: var(--fs-sm);
    line-height: 1.45;
}

/* ÜZERİNE GELİNCE BELİREN KATMAN — ad + zaman.

   Karonun ERİŞİLEBİLİR ADI bu metin; opacity ile gizli, display ile DEĞİL —
   display: none olsa ekran okuyucu karonun adını hiç duymazdı. Dokunmatikte
   görünmüyor (hover yok), klavyede odakla beliriyor.

   Gradyan alttan: metin karonun dibinde, üstteki durum hapı mümkün olduğunca
   görünür kalıyor. */
.gdr__karo_ust {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .2rem;
    padding: .7rem;
    background: linear-gradient(to top, rgba(16, 24, 40, .82), rgba(16, 24, 40, .2) 65%, transparent);
    color: #FFF;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease-out);
}
.gdr__karo_bag:hover .gdr__karo_ust,
.gdr__karo_bag:focus-visible .gdr__karo_ust {
    opacity: 1;
}

/* ⚠ KATMAN BELİRİNCE ALT KÖŞE İŞARETLERİ ÇEKİLİYOR — ÖLÇÜLMÜŞ KUSUR
   (2026-09-27, headless Chrome): durum hapı sol ALT köşeye indikten sonra
   katmanın zaman satırıyla aynı yere düştü ve yarı saydam gradyanın
   altından "Planlandı" yazısı "Planlanan 2026-…" satırının içinden
   okunuyordu. Katman zaten adı ve zamanı söylüyor; hap ve sayaç o sırada
   görünmez. */
.gdr__karo .gdr__kapak_durum,
.gdr__karo .gdr__kapak_sayi {
    transition: opacity var(--t-fast) var(--ease-out);
}
.gdr__karo_bag:hover .gdr__kapak_durum,
.gdr__karo_bag:hover .gdr__kapak_sayi,
.gdr__karo_bag:focus-visible .gdr__kapak_durum,
.gdr__karo_bag:focus-visible .gdr__kapak_sayi {
    opacity: 0;
}
.gdr__karo_ad {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.gdr__karo_zaman {
    font-size: .75rem;
    opacity: .85;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 576px) {
    .gdr__karolar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .4rem;
    }
}
@media (min-width: 1400px) {
    .gdr__karolar {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* --- ÇOKLU SEÇİM + SAĞ ÜST EYLEMLER  —  2026-09-27 ----------------------

   KULLANICI KARARI: "çoklu seçim ve tümünü sil gibi de olsun. hover
   olduğunda da sağ üst köşesinde düzenle ve sil butonları da olsun."

   YENİ BİLEŞEN YOK: seçim çubuğu ve kutusu medya kütüphanesinin
   (.mdk__arac · .mdk__tumu · .mdk__secili · .mdk__sil_toplu · .mdk__sec*,
   § 24r), düğmeler panelin ikon düğmesi (.pnl__eylem, § 24b-2). Burada
   yalnızca karodaki KONUM ve GÖRÜNÜRLÜK var.

   KATMAN SIRASI: kapak bağlantısı (.gdr__karo_bag) ve içindeki üzerine
   gelince beliren katman (.gdr__karo_ust) → seçim kutusu ve eylemler
   (z-index: 3). İkisi bağlantının KARDEŞİ; üstte olmasalar katman onları
   örter ve tıklama gönderiyi açardı. */
.gdr__secim_form {
    margin: 0;
}

/* --- ARAÇ PANELİ — TEK KART, İKİ SATIR  (.gdr__panel)  —  2026-09-27 -----

   KULLANICI KARARI: "görünüm sorunlarını gider. çok dağınık kopuk kopuk
   duruyor. … çok yer kaplamasın."

   Izgaranın üstündeki DÖRT ayrı şerit (açıklama + Yeni gönderi · arama ·
   sekmeler · seçim çubuğu) tek karta, iki satıra indi (gerekçe
   panel/gonderiler.php → § ARAÇ PANELİ). Kart panelin öteki kartlarıyla
   aynı dil: beyaz zemin, ince çizgi, --r-lg köşe. Satırlar arasında ince
   ayraç: üst satır "ne arıyorum / ne ekliyorum", alt satır "neye
   bakıyorum". */
.gdr__panel {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 0 0 .9rem;
    padding: .6rem .65rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
}

/* ÜST SATIR: arama geniş, düğmeler sabit. */
.gdr__panel_ust {
    display: flex;
    align-items: center;
    gap: .45rem;
}
/* .gdr__ara (§ 24l-2, dm.php ile paylaşımlı) 18rem tabanlı ve sarıyor;
   kartta satırın kalanını dolduruyor ve alan+düğme arası daha sıkı. */
.gdr__panel .gdr__ara {
    flex: 1 1 auto;
    gap: .35rem;
}
/* Arama alanı kartın içinde: çerçevesiz ve açık gri — kart zaten bir
   çerçeve; ikinci çerçeve "kutu içinde kutu" görüntüsü veriyordu. Odakta
   gerçek alan hâline dönüyor. */
.gdr__panel .gdr__ara .ay-input {
    border-color: transparent;
    background: var(--surface-2);
}
.gdr__panel .gdr__ara .ay-input:focus {
    border-color: var(--brand-line);
    background: var(--surface);
}
/* Kare ikon düğmeleri: denetimlerin yüksekliğiyle aynı (--control-h). */
.gdr__ara_dgm,
.gdr__ara_temizle {
    flex: 0 0 auto;
    min-width: var(--control-h);
    height: var(--control-h);
    padding-inline: .65rem;
}
.gdr__yeni {
    flex: 0 0 auto;
    height: var(--control-h);
    gap: .45rem;
}

/* ALT SATIR: ☐ · sekmeler · sıradaki  —  seçimde: ☑ · sayaç · sil. */
.gdr__panel_alt {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 34px;
    padding-top: .55rem;
    border-top: 1px solid var(--hairline);
}

/* TÜMÜNÜ SEÇ — yalnızca kutu, 32px dokunma hedefi. */
.gdr__tumu {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.gdr__tumu:hover {
    background: var(--surface-2);
}

.gdr__panel_normal {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .5rem .75rem;
}
/* Sekmeler kartın içinde: şeridin kendi alt boşluğu (1rem) ve kaydırma
   çubuğu payı kalkıyor, hap biraz daha ince. */
.gdr__panel .gdr__suzgec {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding-bottom: 0;
}
.gdr__panel .gdr__sekme {
    padding: .25rem .65rem;
}

/* ⚠ MASAÜSTÜNDE SEKMELER SARIYOR, KAYMIYOR — ÖLÇÜLMÜŞ KUSUR (2026-09-27,
   headless Chrome 1280px): sekiz sekme + "Sıradaki" hapı satıra sığmıyor ve
   "Hata" / "İptal" kartın sağ kenarında kesiliyordu. macOS ve dokunmatik
   tarayıcılar kaydırma çubuğunu gizlediği için kaydırılabildiği hiç
   görünmüyordu; ?durum=hata seçiliyken AKTİF sekmenin kendisi ekran
   dışındaydı. Genişlik varken ikinci satır, gizli sekmeden ucuz. Telefonda
   kaydırma kalıyor (aşağıda, solma kenarıyla). */
@media (min-width: 641px) {
    .gdr__panel .gdr__suzgec {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

/* SIRADAKİ — satırın sağ ucunda saatli hap. */
.gdr__panel a.gdr__sirada {
    flex: 0 0 auto;
    gap: .35rem;
    margin: 0;
    padding: .2rem .6rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.gdr__panel a.gdr__sirada .ay-ico {
    font-size: .8rem;
}

/* SEÇİM HÂLİ. Betik yokken görünür (sil düğmesi sunucu onayına gidiyor);
   betik kökü .gdr--js ile işaretleyince yalnızca seçimde görünüyor ve
   normal hâlin YERİNE geçiyor. */
.gdr__panel_secim {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.gdr--js .gdr__panel_secim {
    display: none;
}
.gdr--js.gdr--secim .gdr__panel_secim {
    display: flex;
}
.gdr--js.gdr--secim .gdr__panel_normal {
    display: none;
}

/* SEÇİMDE KART ÖNE ÇIKIYOR VE YAPIŞIYOR: yirmi karonun dibinde seçim yapan
   kullanıcı "Seçilenleri sil"i bulmak için yukarı kaydırmıyor. Ofset
   panelin üst şeridi (--pnl-ust-h); mobilde şerit yok (aşağıda statik). */
.gdr--secim .gdr__panel {
    position: sticky;
    top: calc(var(--pnl-ust-h, 4rem) + .5rem);
    z-index: 5;
    border-color: var(--brand-line);
    box-shadow: var(--sh-2);
}

/* Karolar kartın hemen altında; arama sonuç satırı arada kalırsa kendi
   üst boşluğunu kartın alt boşluğuyla birleştirmesin. */
.gdr__panel + .gdr__ara_bilgi {
    margin-top: 0;
}

@media (max-width: 900px) {
    .gdr--secim .gdr__panel {
        position: static;
    }
}

/* DAR EKRAN: "Yeni gönderi" ve "Aramayı temizle" yalnızca ikon (metin
   sr-only kalıbıyla görsel olarak gizli — display: none DEĞİL, ekran
   okuyucu adı duymaya devam ediyor). Sıradaki hapı alt satırda kendi
   satırına iniyor; sekmeler kaymaya devam ediyor. */
@media (max-width: 640px) {
    .gdr__dar_gizli {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .gdr__yeni {
        min-width: var(--control-h);
        padding-inline: .7rem;
    }
    .gdr__panel_normal {
        flex-wrap: wrap;
    }
    .gdr__panel .gdr__suzgec {
        flex: 1 1 100%;
        /* SOLMA KENARI: telefonda üç sekme görünüyor, kalan beşi sağda.
           Kaydırma çubuğu dokunmatikte çizilmiyor; kesilmiş son hap tek
           başına "devamı var" demiyordu. Sondaki dolgu solma genişliği
           kadar: en sona kaydırınca son sekme solgun bölgeden çıkıyor. */
        padding-inline-end: 1.5rem;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    }
    [dir="rtl"] .gdr__panel .gdr__suzgec {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 1.5rem), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 1.5rem), transparent);
    }
    .gdr__panel a.gdr__sirada {
        order: 2;
    }
    .gdr__panel_alt {
        align-items: flex-start;
    }
    .gdr__panel_secim .mdk__sil_toplu span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.gdr__karo {
    position: relative;
}

/* SEÇİM KUTUSU — sol üst. İmleç yokken GİZLİ (opacity, display DEĞİL:
   klavye sekmesi kutuya ulaşıyor ve :focus-within onu görünür yapıyor).
   Seçim başladıysa (.gdr--secim, js/gonderiler.js) HEPSİ görünür: kullanıcı
   imleci her karoya götürmeden seçmeye devam ediyor. */
.gdr__karo_sec {
    inset-block-start: .3rem;
    inset-inline-start: .3rem;
    z-index: 3;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease-out);
}

/* SAĞ ÜST EYLEMLER — Düzenle (ya da Görüntüle) + Sil. */
.gdr__karo_eylem {
    position: absolute;
    inset-block-start: .35rem;
    inset-inline-end: .35rem;
    z-index: 3;
    display: flex;
    gap: .25rem;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease-out);
}
/* Düğme fotoğrafın üstünde: yarı saydam beyaz zemin + gölge, hem açık hem
   koyu görselde seçiliyor. Ölçü 30px — 110 piksellik telefon karosunda
   kutu (28) + iki düğme sığsın; WCAG 2.5.8'in 24 pikselinin üstünde. */
.gdr__karo_dgm {
    width: 30px;
    height: 30px;
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 4px rgba(2, 12, 33, .3);
}

.gdr__karo:hover .gdr__karo_sec,
.gdr__karo:focus-within .gdr__karo_sec,
.gdr--secim .gdr__karo_sec,
.gdr__karo:hover .gdr__karo_eylem,
.gdr__karo:focus-within .gdr__karo_eylem {
    opacity: 1;
}

/* SEÇİM KİPİNDE EYLEMLER ÇEKİLİYOR: kip açıkken karoya tıklamak onu
   seçiyor (js/gonderiler.js, Instagram'ın seçim kipi); tek tek Düzenle/Sil
   düğmeleri o sırada dikkat dağıtan ikinci bir hedef. Klavye odağı
   karonun içindeyken yine görünüyor. */
.gdr--secim .gdr__karo:hover:not(:focus-within) .gdr__karo_eylem {
    opacity: 0;
}

/* DOKUNMATİK: hover yok — kutu ve düğmeler HER ZAMAN görünür, yoksa
   telefonda hiç açılmazlardı. */
@media (hover: none) {
    .gdr__karo_sec,
    .gdr__karo_eylem {
        opacity: 1;
    }
}

/* SEÇİLİ KARO: marka halkası + kapağın üstünde hafif marka örtüsü
   (Instagram'ın seçim görünümü). Halka bağlantının dışında (box-shadow),
   kırpılmıyor. */
.gdr__karo--secili .gdr__karo_bag {
    box-shadow: 0 0 0 3px var(--brand);
}
.gdr__karo--secili .gdr__kapak::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(1, 30, 90, .22);
    pointer-events: none;
}

/* --- NUMARALI SAYFALAMA  (.gdr__sayfalama--sayili)  —  2026-09-27 -------

   KULLANICI KARARI: "sayfalama da olsun. 20 20".

   Kabuk § 24f'nin .gdr__sayfalama'sı (ortalı flex, üst boşluk); değiştirici
   yalnızca SARMAYA izin veriyor: "Önceki · 1 … 4 5 6 … 12 · Sonraki" 360
   pikselde tek satıra sığmıyor ve yatay kaydırma üretmemeli.

   Numaralar durum sekmeleriyle (.gdr__sekme) aynı dil: hap, ince kenar,
   seçili olan marka dolgusu. Ölçü 2.25rem (36px) kare — WCAG 2.5.8'in 24
   pikselinin üstünde, dokunmatikte rahat. */
.gdr__sayfalama--sayili {
    flex-wrap: wrap;
    gap: .5rem .75rem;
}
.gdr__sayfalar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gdr__sayfa_git {
    display: inline-grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .55rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
a.gdr__sayfa_git:hover,
a.gdr__sayfa_git:focus-visible {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}
.gdr__sayfa_git--aktif {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 600;
}
/* "…" — atlanan sayfalar. Bağlantı değil, yalnızca görsel ipucu (aria-hidden). */
.gdr__sayfa_bosluk {
    display: inline-block;
    min-width: 1.25rem;
    color: var(--ink-mute);
    text-align: center;
}
/* Önceki/Sonraki: chevron + metin. RTL'de chevron aynalanıyor (Arapçada
   "önceki" sağa bakar — .gdr__geri ile aynı kural, § 23m). */
.gdr__sayfalama--sayili .ay-btn .ay-ico {
    font-size: .75rem;
}
[dir="rtl"] .gdr__sayfalama--sayili .ay-btn .ay-ico {
    transform: scaleX(-1);
}

/* ⚠ DAR EKRANDA YALNIZCA CHEVRON — ÖLÇÜLMÜŞ KUSUR (360px, headless Chrome):
   "Önceki · 1 2 3 4 … 7 · Sonraki" tek satıra sığmıyordu ve "Sonraki"
   numaraların ALTINA, tek başına ikinci bir satıra düşüyordu. Metin görsel
   olarak gizleniyor (sr-only kalıbı, display: none DEĞİL) — ekran okuyucu
   "Önceki/Sonraki" demeye devam ediyor. */
@media (max-width: 480px) {
    .gdr__sayfalama--sayili {
        gap: .35rem;
    }
    .gdr__sayfalama--sayili .gdr__sayfa_yon {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .gdr__sayfalama--sayili .ay-btn {
        min-width: 2.25rem;
        padding-inline: .6rem;
    }
    .gdr__sayfalar {
        gap: .2rem;
    }
}

/* Kapsam satırı: "21–40 / 234 gönderi". */
.gdr__sayfa_bilgi {
    margin: .6rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

@media (max-width: 640px) {
    /* Karo ~110 piksele iniyor: "Metin gönderisi" etiketi metin karosunun
       yarısını kaplıyordu; ikon kalıyor, metin üç satır. */
    .gdr__karo .gdr__kapak_tur_ad {
        display: none;
    }
    .gdr__karo .gdr__kapak_metin {
        -webkit-line-clamp: 3;
        line-clamp: 3;
        margin: 1.7rem .5rem 1.5rem;
        font-size: .72rem;
        line-height: 1.4;
    }
    .gdr__karo .gdr__kapak_oynat {
        width: 1.9rem;
        height: 1.9rem;
    }
}

/* --- 24q · API BAĞLANTILARININ YENİDEN TASARIMI  (.bgl*)  —  2026-09-25 ----

   KULLANICI KARARI: "/panel/baglantilar.php?platform=telegram sayfasını
   sıfırdan oluştur. amatör duruyor. tasarımla uyumlu, gelişmiş, kullanışlı
   ve kurumsal olsun. %100 mobil uyumlu ve kaliteli de olsun."

   NE AMATÖR DURUYORDU, hangi kuralın hangi ölçüme karşılık geldiği ve
   yerleşim kararlarının tamamı panel/baglantilar.php'nin başında madde
   madde yazılı. Burada yalnızca CSS'e ait gerekçeler var.

   --------------------------------------------------------------------------
   § 24i'DEN NE KALDI, NE GİTTİ

   Bu bölüm § 24i'nin YERİNE GEÇMİYOR, onu TAMAMLIYOR. § 24i'de yaşamaya
   devam eden ve burada YENİDEN TANIMLANMAYANLAR:

     .bgl__neden                      açılır "niye kendi uygulamam"
     .bgl__etiket + --ok/--uyari/--hata   durum hapı
     .bgl__hata                       platform hata metni
     .bgl__aciklama · .bgl__ipucu     açıklama ve alan altı ipucu
     .bgl__adres* · .bgl__kopyala*    kopyalanabilir adres kutusu
     .bgl__alan* · .bgl__dugmeler     kimlik formu
     .bgl__sil_satir · .bgl__sil      silme bağlantısı
     .bgl__yenile                     adres yenileme satırı
     .bgl__webhook*                   mesaj alımı kutusu (ayrı blokta)

   § 24i'den SİLİNENLER (ölü değil, ZARARLI oldukları için — her birinin
   gerekçesi kaldırıldıkları yerde duruyor): .bgl__liste, .bgl__satir,
   .bgl__kimlik, .bgl__ad, .bgl__alt, .bgl__eylem, .bgl__ust, .bgl__h2,
   .bgl__h3, .bgl__bolum, .bgl__zorunlu ve dar ekran karşılıkları.

   ⚠ EN ÖNEMLİSİ .bgl__etiket'İN DAR EKRAN KURALIYDI: `grid-column: 2`
   veriyordu. Rozet YENİ ekranda da kullanılıyor ama artık bir ızgaranın
   içinde değil; kural kalsaydı telefonda kartın durum hapı, var olmayan
   bir ızgaranın ikinci kolonuna konumlanmaya çalışırdı. Bu yüzden
   "sadece ekle, hiçbir şeye dokunma" kalıbı (§ 24o-2, § 24l-2) BURADA
   UYGULANAMADI — orada eski sınıflar BAŞKA ekranlarla paylaşımlıydı,
   burada değil.

   --------------------------------------------------------------------------
   YENİDEN TANIMLANMAYAN ORTAK BİLEŞENLER

     .hsp__isaret     platform karosu (§ 24e) — üç ekranda aynı platform
                      aynı kareyle görünüyor, tek kaynağı _platformlar.php
     .ay-btn*         düğmeler (theme.css § 3)
     .ay-alert*       şeritler (theme.css § 9 + § 24i sonundaki --notr)
     .ayr__nav*       bölüm gezinmesi (§ 24o-2) — kurulum.php kullanıyor
     .ay-sr-only      görsel olarak gizli metin

   --------------------------------------------------------------------------
   ⚠ INLINE style="" YOK — CSP'DE 'unsafe-inline' YOK

   Doluluk çubuğunun genişliği style="width: 66%" ile verilemez:
   config/ayarlar.php'deki CSP'de style-src 'self' 'nonce-…' ve
   'unsafe-inline' BİLİNÇLİ olarak yok. Çözüm § 24o-2'dekiyle aynı: genişlik
   onluk adımlara yuvarlanıyor (config/kurulum.php → ay_krl_ilerleme) ve on
   bir hazır kural arasından data-oran ile seçiliyor.

   Kazanç sadece CSP değil — kural sayısı AŞAMA SAYISINA değil YÜZDEYE bağlı.
   Bir platforma dördüncü bir aşama eklenirse burada düzeltilecek hiçbir şey
   olmuyor.
   -------------------------------------------------------------------------- */

/* === 1 · LİSTE: ÖZET ŞERİDİ  (.bgl__ozet) ==============================

   Üç sayı: kapsamdaki platform · hazır · girilmedi.

   § 24l'deki .dm__ist ile AYNI İHTİYAÇ ama ayrı sınıf: orada kutucuklar bir
   arama şeridiyle aynı satırda esniyor ve o şeridin ölçülerine bağlı,
   burada tek başlarına duruyorlar. Ortak sınıf iki ekranın yerleşimini
   birbirine bağlardı.

   auto-fit + minmax(7.5rem): 360 piksellik telefonda üç kutucuk tek satırda
   kalıyor (3 × 7.5rem = 360px, eksi gap → sığıyor çünkü 1fr esniyor). Üç
   sayı yan yana okunmak zorunda — alt alta inince "karşılaştırma" özelliğini
   kaybediyorlar ve ekranın 200 pikselini yiyorlar. */
.bgl__ozet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: .6rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

/* ⚠ KUTU ARTIK <li>'NİN KENDİSİ DEĞİL, İÇİNDEKİ ÖĞE (2026-09-25).

   Kutucuklar süzgeç kapısına dönüştü (gerekçe panel/baglantilar.php'de) ve
   süzgeç kapalıyken ya da sayı sıfırken bağlantı BASILMIYOR — yani aynı
   kutu bazen <a>, bazen <div>. İkisini de <li>'nin içine almak, iki farklı
   <li> yapısı basmaktan basit.

   li'ye display: grid VERİLİYOR ki içindeki kutu hücrenin TAMAMINI kaplasın:
   varsayılan blok akışında kutunun yüksekliği kendi içeriği kadar kalıyor ve
   iki satıra sarmış bir etiketin yanındaki kutu kısa durup şerit basamak
   basamak görünüyordu. */
.bgl__ozet > li {
    display: grid;
}
/* Kutunun kendisi: hem <a> hem <div> hâli aynı kuralla biçimleniyor.

   color: inherit + text-decoration: none BAĞLANTI HÂLİ İÇİN: <a>
   varsayılanı mavi ve altı çizili bir metin veriyor, kutu "içinde bağlantı
   olan bir kart" gibi okunuyordu — oysa TAMAMI tek bir hedef. Değerler
   <div> hâlinde de zararsız, o yüzden a[class] ile ayrıştırılmadı.

   align-content: start — li artık ızgara ve kutu hücreyi kaplıyor; sayı ile
   etiket kutunun ortasına dağılmasın, tepeden başlasın. */
.bgl__ozet_kutu {
    display: grid;
    gap: .1rem;
    align-content: start;
    padding: .75rem .85rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
}

/* İmleçle vurgulama yalnızca gerçek işaretçide (§ 24q-3'teki .bgl__kart ile
   aynı gerekçe: dokunmatikte :hover parmak kalktıktan sonra üzerinde
   kalıyor ve kutu seçiliymiş gibi donuyor). */
@media (hover: hover) and (pointer: fine) {
    a.bgl__ozet_kutu:hover {
        border-color: var(--brand-line);
        box-shadow: var(--sh-2);
    }
}

/* "Hazır" kutucuğu yeşil çerçeveli: dokuz platformun kaçının çalıştığı
   listenin tek gerçekten iyi haberi. Zemin --st-ok-bg DEĞİL, yalnızca
   çerçeve ve değer rengi — dolu yeşil bir kutu bir DURUM ŞERİDİ gibi
   okunuyordu, oysa bu bir sayaç. */
.bgl__ozet_kutu--ok {
    border-color: var(--st-ok-line);
}

/* SEÇİLİ SÜZGEÇ. Marka çerçevesi + soluk marka zemini; kutu <a> DEĞİL
   (kendine giden bağlantı gezinme değil) ve aria-current="true" taşıyor.

   Renk tek başına taşıyıcı değil (WCAG 1.4.1) ama burada ihlal yok: hangi
   süzgecin açık olduğu ADRESTE ve aria-current özniteliğinde yazılı, zemin
   yalnızca görsel kısayol. */
.bgl__ozet_kutu--aktif {
    border-color: var(--brand);
    background: var(--brand-soft);
}

/* ÇAKIŞMA: yeşil "Hazır" kutucuğu SEÇİLİ olduğunda iki kural da
   border-color veriyor. Tek sınıflı iki kural aynı ağırlıkta olurdu ve
   sonuç sıraya kalırdı; BİLEŞİK SEÇİCİ (iki sınıf, 0-2-0) sırayı işin
   içinden çıkarıyor ve seçim her durumda marka rengini kazanıyor —
   "hangi süzgeç açık" bilgisi "bu sayı iyi haber"den önce geliyor. */
.bgl__ozet_kutu--ok.bgl__ozet_kutu--aktif {
    border-color: var(--brand);
}
.bgl__ozet_deger {
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    /* Sayaçlar yan yana ve rakam genişliği değiştikçe etiketle arasındaki
       hiza kayıyordu. */
    font-variant-numeric: tabular-nums;
}
.bgl__ozet_kutu--ok .bgl__ozet_deger {
    color: var(--st-ok-ink);
}
.bgl__ozet_et {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* === 2 · LİSTE: KILAVUZ ŞERİDİ  (.bgl__kilavuz_serit) ==================

   .ay-alert--notr'ün ÜSTÜNE biniyor, yeni bir kutu çizmiyor: ne uyarı ne
   hata, sadece bilgi — o varyantın tanımlandığı durumun tam örneği.

   .ay-alert theme.css § 9'da bir flex SATIRI ve içine ikon + metin + düğme
   konduğunda üçü yan yana diziliyor. Burada eklenen tek şey metnin
   BÜYÜYEN taraf olması ve dar ekranda düğmenin alta geçmesi. */
.bgl__kilavuz_serit {
    margin: 1rem 0 0;
}
.bgl__kilavuz_gov {
    flex: 1 1 14rem;
    min-width: 0;
}
.bgl__kilavuz_metin {
    margin: 0;
}
/* Şeridin düğmesi küçülmüyor: "Kılavuzlara git" iki satıra bölünürse
   şeridin yüksekliği artıyor ve metinle hizası kayıyor. */
.bgl__kilavuz_serit .ay-btn {
    flex: 0 0 auto;
}

/* === 3 · LİSTE: PLATFORM KARTLARI  (.bgl__kartlar) =====================

   SATIR IZGARASI YERİNE KART. Gerekçe ve ölçüm panel/baglantilar.php
   başındaki ".hsp__satir IZGARA ORTAKLIĞI" bloğunda.

   ⚠ 2026-09-25 · IZGARA ÜÇE SABİTLENDİ — auto-fit KALKTI.

   KULLANICI KARARI: "kartlar bir satırda 3 tane olacak şekilde col-md-4
   olarak olsun."

   Eski hâli repeat(auto-fit, minmax(17rem, 1fr)) idi: kolon sayısını ızgara
   genişliği belirliyordu, yani geniş ekranda DÖRT kart yan yana geliyordu.
   Artık sayı kırılımla sabit — üç kolon bir KARAR, hesabın sonucu değil.

   BOOTSTRAP .col-md-4 SINIFLARI KULLANILMADI, kolon sayısı aynı eşikte kendi
   ızgarasıyla veriliyor — § 24r-2'de (.krl__kartlar) ve § 23n'de (paket
   ızgarası) yazılı gerekçelerin aynısı:
     · .row'un negatif margin'i + .col'un yatay dolgusu panelin kart
       boşluklarıyla çiftliyor.
     · .row > .col sarmalayıcıları <ul>/<li> yapısını bozardı; liste
       semantiği bilinçli korunuyor (gerekçe panel/baglantilar.php'de).
     · araclar/surum-imzalari.php 'col-12 col-lg-4' dizgesini panelde
       "olmamalı" listesinde arıyor — kolon sınıfları geri gelirse teşhis
       aracı dosyayı eski sürüm ilan eder.

   KIRILIM MERDİVENİ § 24r-2'DEKİ .krl__kartlar İLE BİREBİR AYNI: altta tek
   kolon, 768px'ten (Bootstrap'ın md eşiği, yani '.col-md-4'ün devreye girdiği
   nokta) itibaren üç kolon. Kurulum kılavuzları ızgarası aynı istek üzerine
   zaten böyle çevrilmişti; iki komşu liste farklı eşiklerde kolon değiştirse
   menüde yan yana duran iki ekran aynı pencerede farklı düzende görünürdü.

   KOLON GENİŞLİĞİ — içerik alanı = pencere − yan menü (--pnl-yan-w: 248px,
   yalnızca ≥901px'te görünür, § 24c) − dolgu (2 × 1.5rem):

     768–900px   yan menü YOK  → ızgara ~736px  → kolon ~230px
     901–991px   yan menü VAR  → ızgara ~605px  → kolon ~190px  (en dar bant)
     ≥1200px     yan menü VAR  → ızgara ~904px  → kolon ~292px

   Yani kolon 901'de EKRAN BÜYÜDÜĞÜ hâlde daralıyor — yan menü o eşikte
   devreye giriyor. Kolon sayısı kullanıcı kararı olduğu için eşik yine de
   768'de tutuldu; dar bandın bedeli aşağıdaki iki sıralı başlık kuralıyla
   ödeniyor.

   ⚠ Bu ölçüler tarayıcıda ölçülmedi, yerleşim değerlerinden hesaplandı. */
.bgl__kartlar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

/* ÜÇ KOLON — kullanıcının istediği yerleşim (col-md-4 karşılığı).

   minmax(0, 1fr) — 1fr DEĞİL: ızgara öğesinin varsayılan min-width'i 'auto'
   ve sarmayı reddeden bir içerik (uzun platform adı, uzun hata metni) kolonu
   içeriği kadar şişirip üç kolonu ızgaranın dışına taşırıyor. Aynı düzeltme
   § 24e/24i/24r'de de yazılı. */
@media (min-width: 768px) {
    .bgl__kartlar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 768–1199px'te BAŞLIK SATIRI İKİ SIRAYA İNİYOR.

   Üç kolon bu bantta 190–230 piksel ve kartın iç genişliği ~155–195 piksele
   düşüyor: karo (34px) + durum hapı ("Girilmedi" ~90px) + boşluklar yan yana
   dururken platform adına 50 piksel kalıyor ve "Google My Business" dört
   satıra bölünüyor.

   Çözüm YENİ DEĞİL: ≤640px için yazılmış iki sıralı başlık kuralının aynısı
   (§ 24q sonundaki mobil blok). Karo solda ve iki satır boyunca kalıyor, hap
   platform adının altına geçiyor.

   ≥1200px'te GERİ DÖNÜYOR: orada kolon ~292 piksel ve karo + ad + hap tek
   satıra sığıyor — kartın tasarlandığı 272 piksellik tabanın üstünde. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .bgl__kart_ust {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .bgl__kart_etiket {
        grid-column: 2;
        justify-self: start;
        margin-top: .15rem;
    }
}

/* SÜZGEÇ BOŞ DÖNDÜĞÜNDE kartların yerine tek satır + çıkış kapısı.
   Kutucuk sıfırken bağlantı basılmadığı için buraya ancak adres elle
   yazılarak gelinir; yine de kart ızgarasının boşluğunu bir cümle
   dolduruyor. Kendi kutusu YOK: bu bir hata değil, bir sonuç. */
.bgl__suzgec_bos {
    margin: 1.25rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.bgl__suzgec_bos a {
    margin-inline-start: .35rem;
    color: var(--brand);
    font-weight: 600;
}

/* Kart dikey bir flex: eylem satırı HER KARTTA ALTA yapışıyor
   (margin-top: auto aşağıda). Yoksa hata metni olan kartın düğmesi
   aşağıda, olmayanın yukarıda duruyor ve ızgara düzensiz görünüyordu. */
.bgl__kart {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
}

/* İmleçle vurgulama yalnızca gerçek işaretçide: dokunmatikte :hover parmak
   kalktıktan sonra üzerinde kalıyor ve kart seçiliymiş gibi donuyor (aynı
   gerekçe theme.css § 3'te .ay-btn, § 24o-2'de .ayr__nav_oge için yazılı).

   :focus-within DE VAR ve gerekli: klavyeyle gezen kullanıcı kartın
   içindeki düğmeye geldiğinde hangi kartta olduğunu görmeli. */
@media (hover: hover) and (pointer: fine) {
    .bgl__kart:hover {
        border-color: var(--brand-line);
        box-shadow: var(--sh-2);
    }
}
.bgl__kart:focus-within {
    border-color: var(--brand-line);
}

/* Şeması olmayan ("hazırlanıyor") platform SOLUK ve kesik çerçeveli.
   opacity KULLANILMADI: metni de soluklaştırıp okunurluğu düşürüyordu
   (kesik çerçeve + nötr zemin aynı bilgiyi kontrast kaybetmeden veriyor). */
.bgl__kart--hazirlaniyor {
    border-style: dashed;
    background: var(--surface-2);
}

/* Başlık satırı: karo · kimlik · durum hapı.

   GRID, FLEX DEĞİL. Flex'te rozet uzun platform adının ("Google My
   Business") yanında sıkışıp iki satıra bölünüyordu; grid'de rozet kendi
   kolonunda ve genişliğini içeriği belirliyor (auto), kimlik kolonu
   minmax(0,1fr) ile küçülebiliyor. */
.bgl__kart_ust {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .65rem;
}
.bgl__kart_kimlik {
    min-width: 0;
}
/* h2 ama kart başlığı: ölçü görsel hiyerarşiden geliyor, etiketten değil.
   overflow-wrap: anywhere — "Google My Business" 272 piksellik kartta
   sarmak zorunda ve kelime arası boşluk yetmiyordu. */
.bgl__kart_ad {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 650;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.bgl__kart_akis {
    margin: .15rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.45;
}

/* Kartın durum hapı: § 24i'deki .bgl__etiket'in üstüne yalnızca iki şey
   ekliyor — ikonla metnin optik merkezde buluşması ve satır başı boşluğun
   olmaması. Hapın kendisi YENİDEN TANIMLANMIYOR. */
.bgl__kart_etiket {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    /* Başlık satırının ilk satırıyla hizalanıyor: align-items: start
       olduğu için kendiliğinden tepeye yapışıyor ve platform adının
       taban çizgisiyle buluşması için 1 piksel iniyor. */
    margin-top: 1px;
}
.bgl__kart_etiket .ay-ico {
    font-size: 11px;
}

/* Sınama hatası kartın içinde, TAM GENİŞLİKTE ve zeminli.

   Eski satır ızgarasında kimlik kolonunu eziyordu. Zemin verilmesi
   bilinçli: kartın içinde çerçevesiz kırmızı bir paragraf, platform adının
   altındaki açıklama satırıyla karışıyordu. */
.bgl__kart_hata {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: 0;
    padding: .5rem .6rem;
    border: 1px solid var(--st-hata-line);
    border-radius: var(--r-sm);
    background: var(--st-hata-bg);
    color: var(--st-hata-ink);
    font-size: var(--fs-sm);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.bgl__kart_hata .ay-ico {
    flex: 0 0 auto;
    margin-top: .15rem;
    font-size: 12px;
}

/* Eylem satırı kartın DİBİNE yapışıyor (margin-top: auto) — kartlar farklı
   yükseklikte ama düğmeler aynı çizgide. */
.bgl__kart_eylem {
    display: flex;
    align-items: center;
    gap: .5rem .75rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: .25rem;
}

/* Kılavuz bağlantısı DÜĞME DEĞİL, bağlantı: kartın işi kurulum, kılavuz
   ikincil bir kapı. İki dolu düğme yan yana konsaydı hangisinin asıl iş
   olduğu kaybolurdu (§ 24e'deki .hsp__kaldir ile aynı ayrım mantığı).

   Dokunma hedefi 24px: küçük ama geri alınamaz bir iş değil. */
.bgl__kart_kilavuz {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 24px;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.bgl__kart_kilavuz .ay-ico {
    font-size: 12px;
    color: var(--ink-mute);
    transition: color var(--t-fast) var(--ease);
}
.bgl__kart_kilavuz:hover,
.bgl__kart_kilavuz:focus-visible {
    color: var(--brand);
}
.bgl__kart_kilavuz:hover .ay-ico,
.bgl__kart_kilavuz:focus-visible .ay-ico {
    color: var(--brand);
}

/* === 4 · TEK PLATFORM: KÜNYE KARTI  (.bgl__kunye) ======================

   Kaldırılan .bgl__ust'ün yerine geçiyor ama işi büyüdü: artık platform
   kimliği + durum rozeti + DOLULUK ÖLÇERİ + listeye dönüş taşıyor.

   Platformun KENDİ RENGİNDE sol şerit — inset box-shadow ile, border DEĞİL:
   border kutu genişliğini değiştirip alttaki adım kartlarıyla hizasını
   bozardı (§ 24f'de ölçülen aynı sorun). --hsp-renk değeri
   panel/baglantilar.php'deki nonce'lu blokta basılıyor
   (ay_platform_renk_css). */
.bgl__kunye {
    --hsp-renk: var(--brand);

    margin: 1rem 0 0;
    padding: 1.15rem 1.35rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: inset 3px 0 0 0 var(--hsp-renk);
}
[dir="rtl"] .bgl__kunye {
    box-shadow: inset -3px 0 0 0 var(--hsp-renk);
}

.bgl__kunye_ust {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
}
.bgl__kunye_ad {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 680;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
/* Künyedeki işaret kart ızgarasındakinden büyük: burası o platformun
   sayfası, listede ise dokuz karttan biri. */
.bgl__kunye .hsp__isaret {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.05rem;
}
/* Durum rozeti sağa: başlıkla arasındaki boşluk ekranın genişliğine göre
   büyüyor. Sarma olduğunda otomatik boşluk kalkıyor (dar ekran bloğunda),
   yoksa rozet tek başına bir satırın sağına yapışıyordu. */
.bgl__kunye_etiket {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: auto;
}
.bgl__kunye_etiket .ay-ico {
    font-size: 11px;
}

/* Listeye dönüş — kartın dibinde, ayırıcı çizginin altında.

   NİYE VAR: kabuk konum izi basmıyor (2026-09-24'te kaldırıldı) ve yan
   menüdeki "Bağlantılar" satırı bu sayfada AKTİF görünüyor, yani üst
   seviyeye dönen bir bağlantı gibi okunmuyor. Telefonda yan menü hiç yok.
   Bu bağlantı olmadan listeye dönmenin tek yolu tarayıcının geri
   düğmesiydi.

   RTL'de ok aynalanıyor: 'geri' ikonu chevron-left ve Arapçada "geri"
   sağa bakar (§ 23m'deki aynı kural). */
.bgl__kunye_geri {
    margin: 1rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-sm);
}
.bgl__kunye_geri a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 24px;
    color: var(--ink-soft);
    font-weight: 600;
}
.bgl__kunye_geri a:hover,
.bgl__kunye_geri a:focus-visible {
    color: var(--brand);
}
.bgl__kunye_geri .ay-ico {
    font-size: 11px;
}
[dir="rtl"] .bgl__kunye_geri .ay-ico {
    transform: scaleX(-1);
}

/* === 5 · DOLULUK ÖLÇERİ  (.bgl__olcer) ================================

   EKRANIN YENİDEN YAZILMA SEBEBİ. "Kimlikleri girdim, sırada ne var"
   sorusunun cevabı hiçbir yerde yazmıyordu; ölçer onu tek bakışta veriyor.

   ⚠ KAPI DEĞİL, BİLGİ: eksik aşama hiçbir şeyi engellemiyor ve ölçer
   kırmızı göstermiyor (§ 24o-2'deki .ayr__tamam ile aynı karar). Kurulumu
   yarıda bırakmak meşru bir durum — müşteri Meta'nın incelemesini
   bekliyor olabilir. */
.bgl__olcer {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}
.bgl__olcer_ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
}
.bgl__olcer_et {
    color: var(--ink-soft);
    font-weight: 600;
}
.bgl__olcer_deger {
    color: var(--brand);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* overflow: hidden ŞART — dolu kısım kendi köşe yarıçapını taşımıyor,
   yuvarlak köşeyi bu kutu kırpıyor. Aksi hâlde %100'de dolgunun kare
   köşesi rayın yuvarlak köşesinin dışına taşıyor (§ 24o-2'de ölçülen
   aynı 2 piksel). */
.bgl__olcer_ray {
    overflow: hidden;
    height: 6px;
    margin: .45rem 0 0;
    border-radius: var(--r-pill);
    background: var(--brand-tint);
}
.bgl__olcer_dolu {
    display: block;
    width: 0;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--brand);
}

/* ON BİR HAZIR GENİŞLİK — gerekçe bu bölümün başındaki "INLINE style YOK"
   bloğunda. PHP en yakın 10'a yuvarlıyor, yani bu on bir değerin dışına
   çıkan bir data-oran olamıyor.

   ⚠ § 24o-2'DEKİ .ayr__tamam_cubuk KURALLARI YENİDEN KULLANILAMADI:
     o seçiciler sınıf adına bağlı (.ayr__tamam_cubuk[data-oran="10"]
     .ayr__tamam_dolu) ve iki ekranın markup'ı ortak bir sınıf
     paylaşmıyor. Ortak bir .ay-olcer bileşeni açmak doğru olurdu ama
     ayarlar ekranının çubuğuna dokunmayı gerektiriyordu; o ekran bu turda
     kapsam dışı. İki kopya bilinçli ve burada yazılı. */
.bgl__olcer_ray[data-oran="0"]   .bgl__olcer_dolu { width: 0; }
.bgl__olcer_ray[data-oran="10"]  .bgl__olcer_dolu { width: 10%; }
.bgl__olcer_ray[data-oran="20"]  .bgl__olcer_dolu { width: 20%; }
.bgl__olcer_ray[data-oran="30"]  .bgl__olcer_dolu { width: 30%; }
.bgl__olcer_ray[data-oran="40"]  .bgl__olcer_dolu { width: 40%; }
.bgl__olcer_ray[data-oran="50"]  .bgl__olcer_dolu { width: 50%; }
.bgl__olcer_ray[data-oran="60"]  .bgl__olcer_dolu { width: 60%; }
.bgl__olcer_ray[data-oran="70"]  .bgl__olcer_dolu { width: 70%; }
.bgl__olcer_ray[data-oran="80"]  .bgl__olcer_dolu { width: 80%; }
.bgl__olcer_ray[data-oran="90"]  .bgl__olcer_dolu { width: 90%; }
.bgl__olcer_ray[data-oran="100"] .bgl__olcer_dolu { width: 100%; }

/* --- Aşama çipleri ------------------------------------------------------

   Çubuk "2/3" diyor, çipler HANGİ ikisi olduğunu söylüyor. Biri olmadan
   diğeri yarım bilgi.

   flex-wrap ŞART: üç çip ("Kimlikler", "Mesaj alımı", "Bağlantı sınaması")
   360 piksellik telefonda tek satıra sığmıyor ve kırpılırsa hangi aşama
   olduğu okunmuyor. */
.bgl__asamalar {
    display: flex;
    align-items: center;
    gap: .4rem .5rem;
    flex-wrap: wrap;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}
.bgl__asama {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.bgl__asama .ay-ico {
    font-size: 11px;
}
.bgl__asama--ok {
    border-color: var(--st-ok-line);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
}
/* Bekleyen aşama NÖTR, SARI DEĞİL: § 24i'deki .bgl__etiket--uyari sarısı
   "bir şey yanlış" diyor, oysa henüz yapılmamış bir adım yanlış değil.
   Sarı yalnızca gerçekten dikkat isteyen tek yerde (mesaj alımı kapalıyken
   webhook kutusunda). */
.bgl__asama--bek {
    border-style: dashed;
}
/* "Bu platformda gerekmiyor" — soluk ama ÜSTÜ ÇİZİLİ DEĞİL. Üstü çizgi
   "iptal edildi" diye okunuyordu; oysa aşama hiç var olmadı. Metni
   .ay-sr-only ile ekran okuyucuya da veriliyor (renk ve kesik çerçeve tek
   başına taşıyıcı olamaz). */
.bgl__asama--yok {
    border-color: color-mix(in srgb, var(--hairline) 60%, transparent);
    color: color-mix(in srgb, var(--ink-mute) 65%, transparent);
}

/* Hata şeridi künye kartıyla adım kartları ARASINDA: rozet "Hatalı" diyor,
   nedeni hemen altında. Şeritler theme.css'te margin: 0 taşıyor. */
.bgl__hata_serit {
    margin: 1rem 0 0;
    overflow-wrap: anywhere;
}

/* === 6 · İKİ KOLON  (.bgl__yerlesim) ==================================

   ⚠ KIRILIM 1200px VE ÖLÇÜLEREK SEÇİLDİ.

   İçerik alanı = pencere − yan menü (--pnl-yan-w: 248px) − .pnl__icerik
   dolgusu (2 × 1.5rem = 48px).

     1440px → 1144px içerik → 21rem panel + 1.25rem boşluk = sol kolon 800px
     1280px → 984px         → sol kolon 640px
     1200px → 904px         → sol kolon 560px   ← kimlik alanı (30rem =
                                                  480px) hâlâ sığıyor
     1100px → 804px         → sol kolon 460px   ← alan eziliyor, KULLANILMADI

   Yani eşik "güzel bir sayı" değil, kimlik alanının sığdığı son nokta.

   ⚠ 900px'lik kabuk kırılımıyla KARIŞTIRILMAMALI (§ 24c): orada yan menü
   tamamen kalkıyor ve içerik alanı BÜYÜYOR. 900–1200 arasında yan menü var
   ve içerik en dar hâlinde — iki kolon tam o aralıkta yapılamıyor. */
.bgl__yerlesim {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 1200px) {
    .bgl__yerlesim {
        /* minmax(0, 1fr) ŞART, çıplak 1fr DEĞİL: sol kolonda tek aralıklı
           yazı tipiyle basılan uzun adres kutuları var ve 1fr
           min-content'ten küçülmeyi reddediyor — kolon şişip paneli
           ızgaranın dışına itiyordu (§ 24e/24i'de ölçülen aynı kusur). */
        grid-template-columns: minmax(0, 1fr) 21rem;
        align-items: start;
    }

    /* PANEL YAPIŞIK. Akış kolonu 1400 piksele kadar uzuyor ve durum bilgisi
       sayfanın neresinde olursan olsun görünür kalmalı.

       ÜST OFSET KABUĞUN ŞERİDİNDEN (--pnl-ust-h, § 24). Değer elle
       yazılmadı; şerit yüksekliği değişirse burası kendiliğinden takip
       ediyor.

       ⚠ z-index ŞERİDİN ALTINDA (2 ≪ --z-header: 1040): yapışık iki öğe üst
       üste geldiğinde kabuğun şeridi kazanmalı.

       ⚠ ATASINDA overflow YOK: .pnl__ana ile .pnl__icerik yalnızca flex ve
       padding taşıyor (§ 24b). Yapışık öğe, atalarından birinde
       overflow: hidden/auto olsa sessizce yapışmayı bırakırdı — § 24o-2'de
       .ayr__nav için de aynı denetim yazılı. */
    .bgl__panel {
        position: sticky;
        top: calc(var(--pnl-ust-h) + 1.5rem);
        z-index: 2;
    }
}

.bgl__akis {
    min-width: 0;
}

/* === 7 · ADIM KARTLARI  (.bgl__adim_kart) =============================

   Kaldırılan .bgl__bolum'ün yerine geçiyor ve tek farkı DURUM TAŞIMASI.
   Eski hâlinde dört kart birbirinin aynısıydı: tamamlanmış adım ile hiç
   dokunulmamış adım arasında görsel fark yoktu.

   Dört durum:

     --tamam     bitmiş        yeşil numara dairesi (rakam yerine onay)
     --sirada    şu an yapılacak   marka renkli çerçeve + hafif gölge
     --bekliyor  önü kapalı    nötr, soluk başlık
     --bilgi     doğrulanamaz  nötr ama soluk DEĞİL (bkz. aşağıdaki not)

   Ölçüler § 24o'daki .ayr__bolum ile AYNI: iki ekran da "bölümlere
   ayrılmış tek uzun form" ve farklı görünmeleri için sebep yok. */
.bgl__adim_kart {
    margin: 1rem 0 0;
    padding: 1.15rem 1.35rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
}

/* SIRADAKİ KART — marka renkli çerçeve + gölge.

   TEK KART vurgulanıyor (PHP tarafında garanti: akıştaki ilk tamamlanmamış
   adım). İki kart birden vurgulanırsa "hangisi şimdi" sorusu yine cevapsız
   kalıyor.

   Zemin DEĞİŞMİYOR: --brand-soft denendi ve bırakıldı, kartın içindeki
   beyaz zeminli kimlik alanları (--surface) mavi zeminde yüzer gibi
   duruyordu. Çerçeve + gölge aynı vurguyu form alanlarını bozmadan
   veriyor. */
.bgl__adim_kart--sirada {
    border-color: var(--brand-line);
    box-shadow: var(--sh-2);
}

/* TAMAMLANAN KART soluk DEĞİL, yalnızca numarası yeşil.

   opacity ile soluklaştırmak denendi: müşteri kaydettiği App ID'yi görmek
   için geri geliyor ve solmuş bir kartta okumak zorlaşıyordu. Bitmiş olmak
   "artık okunmaz" demek değil. */
.bgl__adim_kart--tamam {
    border-color: var(--st-ok-line);
}

/* --bilgi (doğrulanamayan adım) için AYRI KURAL YOK ve bu bilinçli: kart
   varsayılan görünümde duruyor. Soluklaştırılsaydı "gereksiz" diye
   okunurdu, oysa geri dönüş adresini platforma yapıştırmak zorunlu bir
   adım — yalnızca yaptığını göremiyoruz. */

.bgl__adim_h {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    margin: 0 0 .75rem;
    font-size: var(--fs-base);
    font-weight: 680;
    overflow-wrap: anywhere;
}
.bgl__adim_metin {
    min-width: 0;
}
.bgl__adim_kart--bekliyor .bgl__adim_h {
    color: var(--ink-soft);
}

/* Numara dairesi. CSS counter KULLANILMADI: numara PHP'den geliyor çünkü
   kartların bir kısmı koşullu (geri dönüş adresi yalnızca OAuth'ta, mesaj
   alımı yalnızca webhook'ta, sınama yalnızca adaptörlü platformda) ve
   sayaç DOM sırasına bağlanırsa koşullar açılıp kapandığında numaralar
   kayıyor.

   ⚠ TAMAMLANAN KARTTA RAKAM YERİNE ONAY İKONU basılıyor (PHP tarafında).
   Daire aynı ölçüde kalıyor ki kartlar arasında dikey hiza bozulmasın. */
.bgl__adim_no {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.bgl__adim_no .ay-ico {
    font-size: 12px;
}
.bgl__adim_kart--tamam .bgl__adim_no {
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
}
/* Bekleyen adımın dairesi nötr: marka rengi "burada bir iş var" diyor ve
   üç kart birden öyle görünürse sıradaki kartın vurgusu kayboluyor. */
.bgl__adim_kart--bekliyor .bgl__adim_no {
    background: var(--surface-2);
    color: var(--ink-mute);
}

.bgl__adim_ic {
    min-width: 0;
}

/* Kart içindeki eylem satırı (konsolu aç, sınama düğmesi). Formun kendi
   margin'i olmadığı için buradan veriliyor. */
.bgl__adim_eylem {
    display: flex;
    align-items: center;
    gap: .5rem .75rem;
    flex-wrap: wrap;
    margin: .85rem 0 0;
}

/* Kimlik formunda yıldız yerine metinli haplar.

   İkisi de HAP (yalnızca zorunlu olan değil): WhatsApp formunda üç alan
   var ve sadece zorunluları işaretlemek, üçüncü alanın atlanabildiğini
   söylemiyordu.

   "Zorunlu" kırmızı DEĞİL: alan boş bırakıldığında henüz bir hata yok,
   yalnızca bir beklenti. Kırmızı hap, forma ilk bakışta üç hata varmış
   gibi gösteriyordu. */
.bgl__zorunlu_hap,
.bgl__istege_bagli {
    display: inline-block;
    margin-inline-start: .4rem;
    padding: .05rem .4rem;
    border-radius: var(--r-pill);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    /* Etiket kalın (600) ve hap onun içinde; dikey hizayı taban çizgisinden
       ayırmak için hafif yukarı alınıyor. */
    vertical-align: 1px;
}
.bgl__zorunlu_hap {
    background: var(--brand-soft);
    color: var(--brand);
}
.bgl__istege_bagli {
    background: var(--surface-2);
    color: var(--ink-mute);
}

/* .bgl__alan_etiket § 24i'de display: block; hap yanına girdiği için
   satır içi hizalama gerekiyor. Ölçüler DEĞİŞTİRİLMİYOR, yalnızca
   yerleşim. */
.bgl__alan_etiket {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0;
}

/* Sır alanının altındaki kilit ipucusu — § 24i'deki .bgl__ipucu'nun
   üstüne yalnızca ikon hizalaması ekliyor. */
.bgl__ipucu .ay-ico {
    margin-inline-end: .3rem;
    font-size: 11px;
}

/* Son başarılı sınama satırı: yeşil ama ŞERİT DEĞİL. .ay-alert--ok
   kullanılabilirdi; kullanılmadı çünkü şerit "bir şey oldu" diyor
   (bir eylemin sonucu), bu ise durağan bir kayıt. */
.bgl__sinama_zaman {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: 0 0 .25rem;
    color: var(--st-ok-ink);
    font-size: var(--fs-sm);
}
.bgl__sinama_zaman .ay-ico {
    font-size: 12px;
}
.bgl__sinama_zaman time {
    font-variant-numeric: tabular-nums;
}

/* === 8 · GÖMÜLÜ KILAVUZ  (.bgl__kilavuz) ==============================

   <details> — kapalı başlıyor. Gerekçe panel/baglantilar.php'de: açık
   olsaydı kurulumu daha önce yapmış müşteri her gelişte sekiz adımı geçmek
   zorunda kalırdı.

   § 24i'deki .bgl__neden ile AYNI DEĞİL: o kısa bir paragraf açıyor, bu
   bütün bir belge parçası (önkoşullar + numaralı adımlar) ve açıldığında
   kendi zeminine ihtiyacı var — yoksa adım kartının içeriğiyle karışıyor. */
.bgl__kilavuz {
    margin: .85rem 0 0;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.bgl__kilavuz_bas {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .9rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 650;
    cursor: pointer;
    /* Dokunma hedefi: 0.7rem dolgu + satır yüksekliği ≈ 42px. */
    border-radius: var(--r-md);
}
.bgl__kilavuz_bas:hover,
.bgl__kilavuz_bas:focus-visible {
    color: var(--brand);
}
.bgl__kilavuz_bas .ay-ico {
    font-size: 13px;
    color: var(--ink-mute);
}
.bgl__kilavuz_bas:hover .ay-ico,
.bgl__kilavuz_bas:focus-visible .ay-ico {
    color: var(--brand);
}
/* Açıkken üst köşeler düz: kapak ile gövde tek kutu gibi görünsün. */
.bgl__kilavuz[open] .bgl__kilavuz_bas {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-bottom: 1px solid var(--hairline);
}
.bgl__kilavuz_ic {
    padding: .9rem .9rem 1rem;
}
.bgl__kilavuz_dip {
    margin: 1rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-sm);
}
.bgl__kilavuz_dip a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 24px;
    font-weight: 600;
}
.bgl__kilavuz_dip .ay-ico {
    font-size: 11px;
}
[dir="rtl"] .bgl__kilavuz_dip .ay-ico {
    transform: scaleX(-1);
}

/* === 9 · DURUM PANELİ  (.bgl__panel) ==================================

   Üç kutu: durum özeti · sonraki adım · hızlı bağlantılar.

   ⚠ TELEFONDA GİZLENMİYOR, ALTA İNİYOR. display: none denendi ve
   bırakıldı: "sonraki adım" kutusu bu ekranın en yararlı tek cümlesi ve
   telefonda da gerekiyor. DOM sırası akıştan SONRA olduğu için ekstra bir
   iş gerekmiyor — ızgara tek kolona düşünce panel kendiliğinden alta
   geliyor. */
.bgl__panel {
    display: grid;
    gap: .85rem;
    min-width: 0;
    /* Akış kolonunun ilk kartıyla aynı çizgide başlıyor (.bgl__adim_kart
       margin-top: 1rem). Izgara gap'i kolonlar arasında; kolonun kendi
       üst boşluğu buradan. */
    margin: 1rem 0 0;
}
.bgl__panel_kutu {
    padding: .9rem 1rem 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
}
/* "Sonraki adım" kutusu marka zeminli: panelin üç kutusundan biri EYLEM
   söylüyor, diğer ikisi bilgi veriyor. Zemin --brand-soft ve çerçeve
   --brand-line — ikisi de theme.css § 1'den, panonun karşılama bloğunda ve
   § 24o-2'deki kimlik kartında da aynı ikili var. */
.bgl__panel_kutu--sonraki {
    border-color: var(--brand-line);
    background: var(--brand-soft);
}
.bgl__panel_h {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .7rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.bgl__panel_h .ay-ico {
    font-size: 12px;
    color: var(--ink-mute);
}
.bgl__panel_kutu--sonraki .bgl__panel_h,
.bgl__panel_kutu--sonraki .bgl__panel_h .ay-ico {
    color: var(--brand);
}

/* Durum özeti bir <dl>: etiket solda, değer sağda. Ekran okuyucu
   "Kimlikler: Hazır" diye eşleştirerek okuyor.

   IZGARA, float DEĞİL: değer hücresindeki hap kendi genişliğinde kalıyor
   ve uzun etiket ("Bağlantı sınaması") sarabiliyor. */
.bgl__panel_liste {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0;
    font-size: var(--fs-sm);
}
.bgl__panel_liste dt {
    min-width: 0;
    color: var(--ink-mute);
    overflow-wrap: anywhere;
}
.bgl__panel_liste dd {
    margin: 0;
    justify-self: end;
    text-align: end;
}
.bgl__panel_zaman {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.bgl__panel_metin {
    margin: 0 0 .85rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
/* Tek cümle + tek düğme kutusunda cümlenin altındaki boşluk düğme yoksa
   gereksiz kalıyor. :last-child ile sıfırlanıyor — ayrı bir sınıf
   eklemek PHP tarafında koşul demekti. */
.bgl__panel_metin:last-child {
    margin-bottom: 0;
}

/* Hızlı bağlantılar — düğme değil, bağlantı listesi. Üçü de sayfanın
   başka yerlerinde de var (tekrar bilinçli, gerekçe PHP tarafında). */
.bgl__kisayol {
    display: grid;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}
.bgl__kisayol a {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* Dokunma hedefi 36px: yapışık panelde bağlantılar alt alta ve
       parmakla ayırt edilebilmeleri gerekiyor. */
    min-height: 36px;
    padding: 0 .4rem;
    margin-inline: -.4rem;
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    font-weight: 600;
}
.bgl__kisayol a:hover,
.bgl__kisayol a:focus-visible {
    background: var(--brand-soft);
    color: var(--brand);
}
.bgl__kisayol .ay-ico {
    flex: 0 0 auto;
    width: 1rem;
    font-size: 12px;
    color: var(--ink-mute);
    text-align: center;
}
.bgl__kisayol a:hover .ay-ico,
.bgl__kisayol a:focus-visible .ay-ico {
    color: var(--brand);
}

/* === 10 · DAR EKRAN  (≤640px) =========================================

   Eşik § 24i ve § 24e ile AYNI — panel genelinde tek bir telefon kırılımı
   var ve ondan ayrılmak, iki ekranın farklı genişlikte bozulması demek. */
@media (max-width: 640px) {

    /* Künye kartının dolgusu daralıyor: telefonda içerik alanı zaten 1rem
       kenar boşluğu taşıyor (§ 24c), kartın 1.35rem'i üstüne binince yazı
       alanı 360 piksellik ekranda 40 piksel kaybediyordu. */
    .bgl__kunye {
        padding: 1rem 1rem .9rem;
    }
    .bgl__adim_kart {
        padding: 1rem 1rem 1.15rem;
    }
    .bgl__panel_kutu {
        padding: .85rem .9rem .9rem;
    }

    /* Künyede ad ve rozet alt alta: yan yana dururken "Google My Business"
       ile "Girilmedi" arasında 40 piksel kalıyor ve ikisi de sarıyordu.
       Otomatik sol boşluk kalkıyor — sarmış bir satırda rozeti tek başına
       sağa yapıştırıyordu. */
    .bgl__kunye_ad {
        font-size: 1.05rem;
    }
    .bgl__kunye_etiket {
        margin-inline-start: 0;
    }
    .bgl__kunye .hsp__isaret {
        width: 2.15rem;
        height: 2.15rem;
        font-size: .95rem;
    }

    /* Kart başlığı iki sıraya: rozet üçüncü kolonda dururken kimlik
       kolonuna 150 piksel kalıyor ve platform adı üç satıra bölünüyordu.
       Rozet ikinci satırın soluna geçiyor (karo hâlâ solda, iki satır
       boyunca). */
    .bgl__kart_ust {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .bgl__kart_etiket {
        grid-column: 2;
        justify-self: start;
        margin-top: .15rem;
    }

    /* Özet kutucuklarının dolgusu daralıyor ki üç kutucuk 360 piksellik
       ekranda tek satırda kalabilsin. */
    .bgl__ozet {
        gap: .45rem;
    }
    .bgl__ozet_kutu {
        padding: .6rem .5rem;
    }
    .bgl__ozet_deger {
        font-size: 1.2rem;
    }

    /* Kılavuz şeridinin düğmesi tam genişlik: şeritte metinle yan yana
       dururken 120 piksele iniyor ve "Kılavuzlara git" kırpılıyordu. */
    .bgl__kilavuz_serit .ay-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* Kaydet düğmesi tam genişlik (§ 24h'deki .ajn__kaydet ile aynı
       karar): formun birincil eylemi telefonda parmağın rahat bulduğu
       hedefte olmalı. */
    .bgl__dugmeler .ay-btn {
        width: 100%;
    }
}


/* ==========================================================================
   § 24r · KURULUM KILAVUZLARI  (panel/kurulum.php · panel/_kilavuz.php)
   ==========================================================================

   Dokuz platformun "nasıl kurulur" belgesi. İki ekran, tek kaynak:

     panel/kurulum.php       liste (kart ızgarası) + tek belge (?platform=)
     panel/_kilavuz.php      belgeyi basan ortak parça, iki KİPTE
                               'tam'      kurulum.php'de, tüm bölümler
                               'kompakt'  baglantilar.php'de, adım kartının
                                          içindeki <details> içinde

   İçerik config/kurulum.php'de, metinler lang/*.php'de (krl.*).

   --------------------------------------------------------------------------
   YENİDEN TANIMLANMAYAN ORTAK BİLEŞENLER

     .ayr__nav · .ayr__nav_oge   bölüm gezinmesi (§ 24o-2) — yapışık hap
                                 şeridi olduğu gibi kullanılıyor, burada
                                 yalnızca ÇIPA PAYI ekleniyor (aşağıda)
     .hsp__isaret                platform karosu (§ 24e)
     .ay-btn* · .ay-alert*       düğmeler ve şeritler (theme.css)
     .bgl__kilavuz*              kompakt kipi saran <details> (§ 24q)
     .pnl__giris                 liste kipinin giriş cümlesi (§ 24)
     .ay-sr-only                 görsel olarak gizli metin

   --------------------------------------------------------------------------
   ⚠ İKİ KİP, TEK SINIF AĞACI — GEREKÇE

   Kompakt kip için ayrı sınıflar (.krlk__*) yazmak DENENDİ ve bırakıldı:
   aynı belgenin iki sınıf ağacı, bir bölüme yapılan her düzeltmenin iki
   yerde tekrarlanması demekti ve ikisi kaçınılmaz olarak ayrışıyordu.
   Şimdi tek ağaç var; kip farkı kapsayıcıdaki .krl--tam / .krl--kompakt
   ile veriliyor ve fark yalnızca ÖLÇÜ (dolgu, zemin, yazı boyu) — yapı
   birebir aynı.

   ⚠ KOMPAKT KİP --surface-2 ZEMİNİN ÜSTÜNDE ÇİZİLİYOR.

   Ölçüldü: .bgl__kilavuz_ic'in zemini --surface-2 (§ 24q) ve adım
   kartlarına da --surface-2 verilince iki katman birbirine karışıyor,
   kart sınırı görünmüyordu. Kompakt kipte adımlar bu yüzden KART DEĞİL:
   sol tarafında ince bir ray olan düz bir liste. Kart görünümü yalnızca
   tam belgede var, orada zemin --surface.

   --------------------------------------------------------------------------
   ⚠ ADIM NUMARALARI <ol> İŞARETÇİSİ DEĞİL, ELLE BASILAN <span>

   Gerekçe panel/_kilavuz.php'de yazılı ve CSS tarafındaki karşılığı şu:
   list-style ile numaranın görsel kutusu (daire) hizalanmıyor,
   list-style-position: inside ile daire metnin akışına girip satır
   kırılımında metnin altına kayıyor. Izgara ile numara kendi kolonunda
   duruyor ve metin ne kadar sarsa sarsın hizası bozulmuyor.

   Bunun bedeli: <ol> artık görsel olarak numaralı değil, anlamsal olarak
   numaralı. Ekran okuyucu yine "9 öğeli liste, öğe 3" diyor — o bilgi
   <ol>/<li> yapısından geliyor, işaretçiden değil.
   -------------------------------------------------------------------------- */

/* === 1 · KÜNYE ŞERİDİ  (.krl__kunye) ===================================

   Süre · zorluk · inceleme · bekleme. ÜÇ YERDE aynı bileşen: liste
   kartında, belgenin künye kartında ve kompakt kipin tepesinde. Kart
   içinde 260 piksele sıkışıyor, belgede 900 piksel alan var — flex-wrap
   ikisini de tek kuralla karşılıyor.

   ⚠ ZORLUK ÇİPİ RENK TAŞIMIYOR (nötr). Gerekçe panel/_kilavuz.php'de:
   zorluk bir HATA değil, bir beklenti; kırmızı bir çip müşteriye
   "bunu yapamazsın" diyordu. Renk yalnızca gerçekten bir bekleme üreten
   bilgide var (inceleme). */
.krl__kunye {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .85rem 0 0;
    padding: 0;
    list-style: none;
}
.krl__kunye_oge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .6rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    /* Uzun bekleme metni ("Meta incelemesi: 3–15 iş günü") 360 piksellik
       telefonda sarmak zorunda; nowrap verilseydi şeridi yatay taşıtırdı. */
    line-height: 1.35;
}
.krl__kunye_oge .ay-ico {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--ink-mute);
}

/* İnceleme çipi — İKİ DURUMDA DA BASILIYOR ve renkleri ZIT.

   "Gerekmiyor" bilgisi en az "gerekiyor" kadar değerli (gerekçe
   panel/_kilavuz.php'de): Telegram kurulumuna başlayan müşteri,
   Facebook'ta gördüğü onay sürecinin burada OLMADIĞINI bilmek istiyor.
   Yeşil/sarı ayrımı bu iki durumu metin okumadan ayırt ettiriyor. */
.krl__kunye_oge--uyari {
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
}
.krl__kunye_oge--uyari .ay-ico {
    color: var(--st-bek-ink);
}
.krl__kunye_oge--ok {
    border-color: var(--st-ok-line);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
}
.krl__kunye_oge--ok .ay-ico {
    color: var(--st-ok-ink);
}

/* === 2 · LİSTE KİPİ: KILAVUZ KARTLARI  (.krl__kartlar) =================

   § 24q'daki .bgl__kartlar ile AYNI DESEN ve aynı gerekçe: kart başına
   dört bilgi var (akış türü, süre, zorluk, inceleme) ve tek satıra
   sığmıyorlar.

   ⚠ AYRI SINIF (.bgl__kartlar ile ortak değil): bağlantı kartı durum
   hapı ve hata metni taşıyor, bu kart künye şeridi ve adım sayısı.
   İkisinin yüksekliği ve iç ızgarası farklı; ortak sınıf birinin
   ölçüsü değiştiğinde diğerini sürüklerdi.

   --- KOLON SAYISI SABİTLENDİ: SATIRDA ÜÇ KART  —  2026-09-25 ------------

   KULLANICI KARARI: "kurulum.php sayfasında ki kartlar da col-md-4 şeklinde
   olsun, bir satırda 3 kart olacak şekilde olsun."

   ÖNCEKİ HÂLİ auto-fit'ti: 'repeat(auto-fit, minmax(16.5rem, 1fr))'. Kolon
   sayısını tarayıcı seçiyordu ve panelin içerik alanı genişliğine göre
   basamaklı ilerliyordu — 1144 pikselde üç, ~900'de iki, 640'ın altında tek.
   Yani aynı sayfa 1280 piksellik bir ekranda üç, 1024 piksellik bir ekranda
   İKİ kart gösteriyordu ve dokuz kart beş satıra dağılıyordu.

   ⚠ BOOTSTRAP .row/.col KULLANILMADI, DAVRANIŞI TAŞINDI. İstenen şey
   '.col-md-4' ve bu ızgara onun tam karşılığını veriyor: md eşiğinden (768px)
   itibaren üç eşit kolon, altında tek kolon. Bootstrap kolonlarına geçmek
   projedeki iki bilinen kusuru geri getirirdi — panelde .row/.col negatif
   kenar boşluklarıyla kart aralıklarını çiftliyor (§ 24o) ve bu sayfanın
   kartları <li>, yani .row'un beklediği <div> yapısına girmek için listeyi
   bozmak gerekirdi. Aynı gerekçe paket ızgarasında da yazılı (§ 23·paket).

   minmax(0, 1fr) — 1fr DEĞİL: grid öğesinin varsayılan min-width'i 'auto' ve
   kart içindeki künye şeridi ile platform adı sarmayı reddettiğinde kolon
   içeriği kadar genişliyor, üç kolon ızgaranın dışına taşıyordu. 0 tabanı
   kolonu gerçekten üçe bölüyor, sarma işi kartın içine kalıyor.

   768–900 ARALIĞINDA KART 230 PİKSELE DÜŞÜYOR (eski minmax tabanı 264'tü) ve
   bu bilinçli: kullanıcı kolon sayısını istedi, tarayıcının seçmesini değil.
   Kartın içi bu ölçüde hâlâ okunuyor — platform adı tek satır, künye şeridi
   sarıyor (.krl__kunye kendi flex-wrap'ıyla), adım sayısı zaten kısa. Alt
   eşikte (768) tek kolona düşüyor, yani telefon görünümü etkilenmiyor. */
.krl__kartlar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}

/* 768px = Bootstrap'ın md eşiği. '.col-md-4' tam burada devreye giriyor ve
   ızgara da burada üçe bölünüyor; altında tek kolon (yukarıdaki taban kural).

   ⚠ BU MEDYA SORGUSU § 24c'DEN (max-width: 900) BAĞIMSIZ ÇALIŞIYOR ve
   çakışmıyor: § 24c panelin KABUĞUNU mobil kipe alıyor (yan menü kapanıyor,
   içerik tam genişliğe çıkıyor), buradaki kural yalnızca kart ızgarasının
   kolon sayısını söylüyor. 768–900 aralığında ikisi birlikte geçerli: kabuk
   mobil, ızgara üç kolon — içerik alanı o aralıkta yan menüsüz olduğu için
   üç karta yeri var. */
@media (min-width: 768px) {
    .krl__kartlar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.krl__kart {
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.15rem 1.15rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-1);
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .krl__kart:hover {
        border-color: var(--brand-line);
        box-shadow: var(--sh-2);
    }
}

/* Başlık satırı: platform karosu + ad/altyazı. Izgara, flex DEĞİL —
   karo sabit genişlikte ve ad sarınca altyazının karonun altına değil
   ikinci kolonda kalması gerekiyor. */
.krl__kart_ust {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
}
.krl__kart_kimlik {
    min-width: 0;
}
.krl__kart_ad {
    margin: 0;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}
.krl__kart_akis {
    margin: .15rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.35;
}

/* Adım sayısı — künye şeridinin altında, kendi satırında. "8 adım"
   bilgisi kartın en çok taranan verisi: müşteri önce işin BÜYÜKLÜĞÜNE
   bakıyor, sonra hangisini açacağına karar veriyor. */
.krl__kart_sayi {
    margin: .7rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.krl__kart_rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .6rem 0 0;
}
.krl__rozet {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.4;
}
.krl__rozet .ay-ico {
    font-size: 11px;
}
.krl__rozet--ok {
    border-color: var(--st-ok-line);
    background: var(--st-ok-bg);
    color: var(--st-ok-ink);
}
/* "Paketinizde yok" NÖTR, KIRMIZI DEĞİL: bu bir hata değil, paketin bir
   gerçeği (aynı karar panel/kurulum.php'deki kapsam şeridinde de var). */
.krl__rozet--notr {
    background: var(--surface-2);
    color: var(--ink-mute);
}

/* Eylemler kartın DİBİNE yapışıyor: margin-top: auto ile. Kartlar ızgarada
   eşit yükseklikte (align-items varsayılan stretch) ve künye şeridi
   platforma göre bir ya da iki satır oluyor — düğmeler akışta bırakılsaydı
   komşu kartlarda farklı yükseklikte durur, ızgara dağılmış görünürdü. */
.krl__kart_eylem {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: auto;
    padding-top: .9rem;
}

/* === 3 · BELGE KİPİ: KÜNYE KARTI  (.krl__kunye_kart) ===================

   ⚠ § 24q'daki .bgl__kunye İLE AYNI SINIF DEĞİL ve olmamalı: bağlantı
   ekranının kartı DURUM taşıyor (rozet + doluluk çubuğu + aşama çipleri),
   bu kart BELGE künyesi taşıyor (süre + zorluk + konsol bağlantısı).
   İkisini tek sınıfa bağlamak, birinin ölçüsü değiştiğinde diğerini
   sürüklemek demekti.

   AYNI KALAN ŞEY GÖRSEL DİL: aynı yarıçap, aynı gölge, aynı platform
   karosu. İki ekran arasında geçen kullanıcı aynı platformu aynı görsel
   imzayla görüyor. */
.krl__kunye_kart {
    margin: 1rem 0 0;
    padding: 1.2rem 1.35rem 1.25rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-1);
}
.krl__kunye_ad {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}
.krl__kunye_eylem {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}

/* ÇIPA PAYI — .ayr__nav YAPIŞIK OLDUĞU İÇİN ZORUNLU.

   Gezinme şeridi olduğu gibi § 24o-2'den geliyor ama çıpa hedefleri bu
   ekranda .krl__bolum. Pay verilmezse #krl-izin bağlantısına basıldığında
   sayfa kaydırılıyor ama bölüm başlığı şeridin ARKASINDA duruyor.

   Değer § 24o'daki .ayr__bolum ile BİREBİR aynı: kabuğun şeridi
   (--pnl-ust-h) + gezinme şeridinin yüksekliği (4rem). Elle piksel
   yazılmadı — şerit yüksekliği değişirse burası kendiliğinden takip ediyor.

   [id] SEÇİCİSİ: yalnızca çıpası olan bölümler pay alıyor. Kompakt kipteki
   bölümlerin de id'si var (#krl-onkosul, #krl-adimlar) ama orada yapışık
   bir gezinme şeridi YOK — pay yine de zararsız: o bölümlere hiçbir yerden
   çıpayla gidilmiyor, yani scroll-margin hiç devreye girmiyor. */
.krl__bolum[id] {
    scroll-margin-top: calc(var(--pnl-ust-h) + 4rem);
}

/* GEZİNME ŞERİDİNİN KANCASI  (.krl__nav)

   Şeridin kendisi § 24o-2'deki .ayr__nav — yeni bir bileşen yazılmadı
   (gerekçe panel/kurulum.php'de: o sınıf ayarlar ekranının bölümlerine
   özgü hiçbir şey taşımıyor ve ikinci bir kopya altmış satır CSS'i iki
   yerde sürdürmek olurdu).

   Bu kanca TEK BİR ŞEYİ değiştiriyor: şerit ile belgenin ilk bölümü
   arasındaki boşluk. Ayarlar ekranında şeridin altında hemen bir kart
   geliyor ve .krl'nin 1.1rem'lik üst boşluğu oraya yetiyordu; burada
   şeridin altında bir BAŞLIK var (.krl__h) ve yapışık şerit kaydırma
   sırasında başlığın hemen üstüne geldiğinde ikisi birbirine değiyordu. */
.krl__nav {
    margin-bottom: .35rem;
}

/* === 4 · BÖLÜMLER VE BAŞLIKLAR  (.krl__bolum · .krl__h) ================ */
.krl {
    margin: 1.1rem 0 0;
}
.krl__bolum + .krl__bolum {
    margin-top: 1.6rem;
}

/* Bölüm başlığı: ikon karesi + metin. § 24o-2'deki .ayr__bas ile aynı
   desen ama ayrı sınıf — orada başlık bir formun bölümünü açıyor ve
   yanında bir durum rozeti olabiliyor, burada yalnızca belge başlığı. */
.krl__h {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .85rem;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}
.krl__h_sim {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--r-sm);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 13px;
}

/* Kompakt kipin alt başlığı — h3 DEĞİL, <p>.

   Sebep başlık hiyerarşisi: kompakt kip bağlantı ekranının adım kartının
   İÇİNDE duruyor ve o kart zaten h3 basıyor. İkinci bir h3, kartın
   başlığıyla aynı seviyede görünürdü. Görsel olarak da küçük ve nötr:
   burası bir bölüm değil, bir ara etiket. */
.krl__alt_bas {
    margin: 0 0 .6rem;
    color: var(--ink-mute);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* === 5 · ÖNKOŞULLAR  (.krl__on) ========================================

   BELGENİN İLK BÖLÜMÜ (gerekçe panel/_kilavuz.php'de: WhatsApp'ta geri
   dönüşü olmayan bir kararı işin ortasında haber vermemek için).

   Onay ikonu YEŞİL DEĞİL, nötr: bunlar tamamlanmış işler değil, sahip
   olman gerekenler. Yeşil tik "bu hazır" diye okunuyordu. */
.krl__on {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.krl__on_oge {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .55rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.krl__on_ok {
    margin-top: .3rem;
    font-size: 11px;
    color: var(--ink-mute);
}

/* === 6 · ADIMLAR  (.krl__adimlar) ======================================

   Izgara: numara kolonu + gövde. Gerekçe bölüm başındaki "<ol> işaretçisi
   değil" notunda.

   ADIMLAR ARASINDA DİKEY RAY: numaranın altından geçen 1 piksellik çizgi,
   sekiz adımın tek bir akış olduğunu söylüyor. ::before ile çiziliyor ve
   SON ÖĞEDE yok — son adımın altından aşağı inen bir çizgi "devamı var"
   diye okunuyordu. */
.krl__adimlar {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.krl__adim {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .85rem;
}
.krl__adim:not(:last-child)::before {
    content: "";
    position: absolute;
    /* Numara dairesinin (1.75rem) ortası: yarıçap 0.875rem. */
    inset-inline-start: calc(.875rem - .5px);
    top: 2rem;
    bottom: -1.1rem;
    width: 1px;
    background: var(--hairline);
}
.krl__adim_no {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .82rem;
    font-weight: 700;
    /* Sayılar farklı genişlikte ("1" ile "8") ve daire içinde ortalanırken
       kayıyordu. */
    font-variant-numeric: tabular-nums;
}
.krl__adim_gov {
    min-width: 0;
    /* Numara dairesi 1.75rem, başlık satırı ~1.4rem: başlığı dairenin
       optik ortasına hizalıyor. */
    padding-top: .15rem;
}
.krl__adim_b {
    margin: 0;
    color: var(--ink);
    font-size: .97rem;
    font-weight: 700;
    line-height: 1.4;
}
.krl__adim_m {
    margin: .35rem 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* ADIM METNİNİN İÇİNDEKİ <strong> VE <code> — ANLAMIN PARÇASI.

   Gerekçe panel/_kilavuz.php'de: <strong> konsoldaki düğme adları
   ("App settings"), <code> birebir yazılacak değerler ("/newbot").
   Müşteri o yazıyı platformun ekranında ARAYACAK; ayırt edilebilir
   olmaları gerekiyor.

   <code> tek aralıklı: 'pages_manage_posts' ile 'pages-manage-posts'
   arasındaki fark gözle görünmek zorunda ve alt çizgi ile tire yalnızca
   monospace'te ayrışıyor. */
.krl__adim_m strong,
.krl__not strong,
.krl__sorun_c strong,
.krl__on_oge strong,
.krl__sinir strong {
    color: var(--ink);
    font-weight: 700;
}
.krl__adim_m code,
.krl__not code,
.krl__sorun_c code,
.krl__on_oge code,
.krl__sinir code {
    padding: .05em .3em;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    /* Uzun kapsam adresleri (…/auth/youtube.force-ssl) 360 piksellik
       ekranda satırı taşırıyordu. */
    overflow-wrap: anywhere;
}

/* === 7 · ADIM ÇİPLERİ  (.krl__cipler) ==================================

   Kılavuz ile formun bağı: "bu adımda okunan değer şu alana girecek" /
   "bu adımda AYDUKE'tan şu adres taşınacak".

   --alan MARKA RENGİNDE, --kopya NÖTR: ikisi farklı iş. Birincisi
   müşterinin BU EKRANDA dolduracağı bir alanı gösteriyor (eylem),
   ikincisi buradan alıp platforma taşıyacağı bir değeri (taşıma).
   Aynı renkte olsalar hangisinin nerede yapıldığı kaybolurdu. */
.krl__cipler {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .6rem 0 0;
}
.krl__cip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .24rem .55rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.45;
}
.krl__cip .ay-ico {
    flex: 0 0 auto;
    font-size: 11px;
}
.krl__cip--alan {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}
.krl__cip--kopya {
    background: var(--surface-2);
    color: var(--ink-mute);
}

/* === 8 · ADIM UYARISI  (.krl__not) =====================================

   Kılavuzun en değerli satırları burada: "uygulama tipi sonradan
   değiştirilemiyor", "geçici jeton 24 saatte ölüyor", "denetlenmemiş
   uygulamanın gönderilerini kimse görmüyor".

   .ay-alert--uyari KULLANILMADI: o bir SAYFA şeridi (tam genişlik, kendi
   dolgusu, role="status" ile birlikte) ve adımın içine girdiğinde adım
   metninden daha baskın görünüyordu. Bu daha sessiz bir biçim: sol şerit
   + hafif zemin, aynı renk ailesinden.

   ÇİPLERDEN SONRA (panel/_kilavuz.php'de basım sırası): "bunu şuraya yaz"
   bilgisinden önce gelseydi uyarı eylemin önüne geçerdi. */
.krl__not {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .5rem;
    margin: .6rem 0 0;
    padding: .6rem .7rem;
    border-inline-start: 3px solid var(--st-bek-line);
    border-radius: var(--r-sm);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.krl__not_ikon {
    margin-top: .2rem;
    font-size: 12px;
    color: var(--st-bek-ink);
}
/* Uyarı zemininde <code> nötr griyle okunmuyordu: sarı üstünde gri,
   kontrastı 3:1'in altına düşürüyor. Saydam beyaz ince bir kutu, zeminin
   rengini koruyup kontrastı geri veriyor. */
.krl__not code {
    background: rgb(255 255 255 / .55);
    color: inherit;
}

/* === 9 · ADIMIN BAĞLANTISI  (.krl__adim_git) ===========================

   Konsolun İLGİLİ SAYFASI, kök adresi değil (gerekçe config/kurulum.php
   başında). Düğme DEĞİL, bağlantı: adımda birincil eylem metnin kendisi,
   bağlantı ona eşlik ediyor. Sekiz adımda sekiz dolu düğme, hangisine
   basılacağını söylemeyen bir ekran demekti. */
.krl__adim_git {
    margin: .6rem 0 0;
}
.krl__baglanti {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 650;
}
.krl__baglanti:hover,
.krl__baglanti:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.krl__baglanti .ay-ico {
    font-size: 11px;
}

/* === 10 · İZİNLER  (.krl__izinler) =====================================

   Müşteri bu adları App Review formunda ARAYACAK. Izgara, satır listesi
   değil: 'https://www.googleapis.com/auth/youtube.force-ssl' 40 karakter
   ve yan yana iki tanesi 1144 pikselde sığıyor, ama 'openid' yedi
   karakter ve tek başına satır harcaması yersiz.

   auto-fill (auto-fit DEĞİL — burada bilinçli fark): tek izinli
   platformda (google_business) çip tüm satırı kaplayıp gerilmesin, kendi
   genişliğinde kalsın. */
.krl__izinler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, auto));
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.krl__kod {
    display: inline-block;
    padding: .3rem .55rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    /* Kapsam adresleri 360 piksellik ekranda satırı taşırıyordu. */
    overflow-wrap: anywhere;
}

/* İzin listesi BOŞ OLABİLİR ve bu bir bilgi (Telegram'da kapsam kavramı
   yok). Bölümü hiç basmamak "izin yok" ile "yazmayı unuttuk" arasındaki
   farkı siliyordu — gerekçe panel/_kilavuz.php'de. */
.krl__bos {
    margin: 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.krl__ipucu {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .5rem;
    margin: .8rem 0 0;
    padding: .65rem .75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.krl__ipucu_ikon {
    margin-top: .2rem;
    font-size: 12px;
    color: var(--brand);
}

/* === 11 · SINIRLAR VE KOTALAR  (.krl__sinir) ===========================

   Bu maddelerin hiçbiri kurulum adımı değil ama hepsi kurulumdan SONRA
   ortaya çıkan "arıza" görüntüsünün asıl sebebi (YouTube'da yedinci
   videonun yüklenmemesi bir hata değil, günlük kotanın bitmesi).

   İŞARETÇİ KORUNDU (disc yerine özel bir nokta): burası gerçek bir
   madde listesi ve maddeler arasında akış yok — adımlardaki gibi ray
   çizmek yanlış olurdu. */
.krl__sinir {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.krl__sinir li {
    position: relative;
    padding-inline-start: 1.1rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.krl__sinir li::before {
    content: "";
    position: absolute;
    inset-inline-start: .25rem;
    /* Satırın ilk satırının optik ortası: .6rem × 1.6 satır yüksekliği. */
    top: .6rem;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: var(--brand);
}

/* === 12 · SORUN GİDERME  (.krl__sorunlar) ==============================

   HER MADDE <details>, HEPSİ AÇIK BİR LİSTE DEĞİL: beş soru ve beş cevap
   açık hâlde 700 piksel ve müşteri bunların yalnızca birini arıyor —
   elindeki hata metnini.

   ⚠ SORU BİR HATA METNİ OLARAK YAZILI ("403 Forbidden") ve bu CSS'i de
   etkiliyor: başlık Ctrl+F ile aranacak, yani KIRPILAMAZ. text-overflow
   denendi ve bırakıldı — kırpılan bir hata metni aranabilir olmaktan
   çıkıyor. Başlık sarıyor.

   name="ayKrlSorun" (HTML tarafında) aynı grupta tek madde açık tutuyor;
   tarayıcı desteklemezse hepsi açık kalabilir, davranış bozulmuyor. */
.krl__sorunlar {
    display: grid;
    gap: .5rem;
}
.krl__sorun {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}
.krl__sorun_s {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .7rem .85rem;
    border-radius: var(--r-md);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 650;
    line-height: 1.5;
    cursor: pointer;
    /* Hata metinleri tek aralıklı DEĞİL: cümle hâlinde yazılmış maddeler
       de var ("Gönderi başarılı dönüyor ama sayfada görünmüyor") ve
       hepsini monospace yapmak okunurluğu düşürüyordu. */
}
.krl__sorun_s:hover,
.krl__sorun_s:focus-visible {
    color: var(--brand);
}
/* Varsayılan üçgen işaretçi kaldırılıp yerine kendi oku konuyor: yerleşik
   işaretçi tarayıcılar arasında farklı boyutta çiziliyor ve sarmış bir
   başlıkta ilk satıra hizalanmıyor. */
.krl__sorun_s::marker,
.krl__sorun_s::-webkit-details-marker {
    content: "";
    display: none;
}
.krl__sorun_s::before {
    content: "+";
    flex: 0 0 auto;
    width: 1rem;
    color: var(--ink-mute);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}
.krl__sorun[open] > .krl__sorun_s::before {
    content: "−";
    color: var(--brand);
}
.krl__sorun[open] > .krl__sorun_s {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--brand);
}
.krl__sorun_c {
    padding: .75rem .85rem .85rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.65;
}

/* === 13 · BELGENİN SONU  (.krl__dip) ===================================

   Belge bittiğinde müşterinin iki ihtiyacı var: ya kuruluma başlamak ya da
   başka bir platformun belgesine geçmek. İkisi de burada; sayfanın başına
   dönüp menüden yol aramak gerekmiyor. */
.krl__dip {
    margin: 1.8rem 0 0;
    padding: 1.1rem 1.2rem 1.15rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface-2);
}
.krl__dip_metin {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.krl__dip_eylem {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .9rem 0 0;
}

/* === 14 · KOMPAKT KİP  (.krl--kompakt) =================================

   Bağlantı ekranının adım kartı içindeki <details>'in içi. Tek fark ÖLÇÜ;
   yapı tam belgeyle birebir aynı (gerekçe bölüm başında).

   ⚠ ZEMİN --surface-2 (§ 24q'daki .bgl__kilavuz_ic) — bu yüzden buradaki
   hiçbir öğeye --surface-2 zemin VERİLMİYOR, yoksa iki katman birbirine
   karışıyor. Çipler ve <code> beyaza dönüyor. */
.krl--kompakt {
    margin: 0;
}
.krl--kompakt .krl__kunye {
    margin: 0 0 .9rem;
}
.krl--kompakt .krl__bolum + .krl__bolum {
    margin-top: 1.1rem;
}
.krl--kompakt .krl__adimlar {
    gap: .9rem;
}
.krl--kompakt .krl__adim_no {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .76rem;
}
.krl--kompakt .krl__adim:not(:last-child)::before {
    inset-inline-start: calc(.75rem - .5px);
    top: 1.75rem;
    bottom: -.9rem;
}
.krl--kompakt .krl__adim {
    gap: .7rem;
}
.krl--kompakt .krl__adim_b {
    font-size: .91rem;
}
/* --surface-2 zeminin üstünde <code> ve çipler beyaza dönüyor: aynı renk
   üstünde aynı renk, kutu sınırını görünmez yapıyordu. */
.krl--kompakt .krl__adim_m code,
.krl--kompakt .krl__on_oge code {
    background: var(--surface);
}
.krl--kompakt .krl__cip--kopya {
    background: var(--surface);
}
.krl--kompakt .krl__kunye_oge {
    background: var(--surface);
}

/* === 15 · DAR EKRAN  (≤640px) ==========================================

   Eşik § 24q · § 24i · § 24e ile AYNI — panel genelinde tek bir telefon
   kırılımı var ve ondan ayrılmak, iki ekranın farklı genişlikte bozulması
   demek. */
@media (max-width: 640px) {

    /* Çıpa payı da yeniden hesaplanıyor: telefonda kabuğun yapışık şeridi
       .pnl__hdr ve yüksekliği --h (§ 24c). Seçici yukarıdakiyle AYNI
       biçimde ([id] dahil) — sadeleştirilirse özgüllük düşüp üstteki
       kural bunu ezer. */
    .krl__bolum[id] {
        scroll-margin-top: calc(var(--h) + 4rem);
    }

    /* Kart ve künye dolguları daralıyor: telefonda içerik alanı zaten 1rem
       kenar boşluğu taşıyor (§ 24c) ve 1.35rem'lik iç dolgu üstüne
       binince yazı alanı 360 piksellik ekranda 40 piksel kaybediyordu. */
    .krl__kart {
        padding: 1rem 1rem 1.05rem;
    }
    .krl__kunye_kart {
        padding: 1rem 1rem 1.05rem;
    }
    .krl__dip {
        padding: 1rem 1rem 1.05rem;
    }

    .krl__kunye_ad {
        font-size: 1.05rem;
    }
    .krl__kunye_kart .hsp__isaret {
        width: 2.15rem;
        height: 2.15rem;
        font-size: .95rem;
    }

    /* Künye çipleri biraz daralıyor ki dört çip iki satırda kalsın —
       üç satıra çıktığında kartın yarısını künye yiyordu. */
    .krl__kunye {
        gap: .3rem;
    }
    .krl__kunye_oge {
        padding: .24rem .5rem;
        font-size: .78rem;
    }

    /* İzin ızgarası tek kolon: minmax(15rem) 360 piksellik ekranda zaten
       tek kolon veriyor ama 'auto' ikinci değeri bazı tarayıcılarda çipi
       içeriğine göre taşırıyordu. Açıkça tek kolon güvenli. */
    .krl__izinler {
        grid-template-columns: 1fr;
    }

    /* Belge sonundaki iki düğme tam genişlik: yan yana dururken
       "Bağlantı ayarlarına git" iki satıra bölünüyordu. */
    .krl__dip_eylem .ay-btn,
    .krl__kart_eylem .ay-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* --- 24b-2 · Telif satırı: sürüm rozeti + kalan gün  —  2026-09-25 -------

   KULLANICI KARARI: "hizmetinin kaç gün kaldığını gösteren geri sayım da
   olsun… 2026 © AYDUKE satırında sağ alt köşede olabilir. Kalan Gün: x
   şeklinde." ve "badge içinde versiyon no olabilir… 2026 © AYDUKE v.1 gibi".

   Satır eskiden tek bir düz paragraftı. Şimdi iki uçlu: solda telif + sürüm
   rozeti, sağ uçta kalan gün. space-between ikisini ayırıyor; sarma açık,
   yani 360 piksellik ekranda kalan gün alt satıra geçiyor ve telifi
   sıkıştırmıyor.

   ⚠ .pnl__telif'İN KENDİ KURALI (§ 24b) SİLİNMEDİ: dolgu, renk ve ölçü
   orada duruyor ve değişmedi. Burada yalnızca yerleşim eklendi — aynı
   özgüllükte (0,1,0) ve bu blok sonra geldiği için display/flex kazanıyor.
   ------------------------------------------------------------------------ */
.pnl__telif {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem .75rem;
}

/* Sol küme: telif metni ve sürüm rozeti birlikte akıyor, aralarında
   satır kırılmasın diye tek kutu. */
.pnl__telif_sol {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

/* SÜRÜM ROZETİ.

   Ölçüler .dm__etiket / .ayr__onay ailesiyle aynı hapı veriyor ama daha
   küçük: sürüm sayfanın en az önemli bilgisi, telif metninden öne
   çıkmamalı. Bu yüzden .ay-badge de kullanılmadı — o bileşen dikkat çekmek
   için var (theme.css § 6), buradaki iş künye.

   tabular-nums: "v1.0" → "v1.10" olduğunda rakam genişliği değişip
   telifin konumunu oynatmasın. */
.pnl__surum {
    display: inline-flex;
    align-items: center;
    padding: .08rem .4rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    white-space: nowrap;
}

/* KALAN GÜN — SAĞ UÇ.

   margin-inline-start: auto DEĞİL (masaüstünde): kapsayıcı space-between
   ile zaten ayırıyor. ≤640px'te ise auto AÇIK — sarmada alt satırda tek
   kalan öğeyi sağa itmenin tek yolu o (bkz. aşağıdaki mobil blok).

   Renk normalde nötr: "Kalan Gün: 214" bir uyarı değil, bir künye.

   ⚠ ÖĞE 2026-09-25'te <span>'DEN <a>'YA GEÇTİ (kullanıcı: "footer da sağ alt
     köşedeki kalan gün sayan karta link olarakta abonelik.php ekle"). Aynı
     turda panodaki "Kalan abonelik" kartı silindiği için aboneliğe giden
     kısayol bu satıra taşındı.

     GÖRÜNÜM DEĞİŞMEDİ ve bu bilinçli: satır bir künye, düğme değil. Altı
     çizili mavi bir bağlantıya dönüşmesi footer'ın sessiz tonunu bozardı.
     text-decoration: none bu yüzden AÇIK YAZILI — panelde <a> için genel bir
     sıfırlama var ama ona güvenmek, o kural değiştiği gün bu satırın habersiz
     altı çizili olması demek.

     TIKLANABİLİRLİĞİ İMLEÇ VE HOVER SÖYLÜYOR: düz metinden ayırt edilmesi
     gerekiyor, yoksa kullanıcı bağlantıyı hiç bulamaz. :focus-visible halkası
     ŞART — klavyeyle gezen kullanıcı için tek işaret o (panelin genel odak
     halkası .ay-input'lara özgü). */
.pnl__kalan {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

/* a.pnl__kalan: kural yalnızca BAĞLANTI hâline uygulanıyor. Öğe bir gün
   yeniden <span>'e dönerse imleç/hover kuralları kendiliğinden düşer. */
a.pnl__kalan {
    cursor: pointer;
}
a.pnl__kalan:hover,
a.pnl__kalan:focus-visible {
    color: var(--brand);
}
a.pnl__kalan:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Son gün hâlinde hap zeminli ve yazısı amber: hover'da markaya dönmesi
   "dikkat" tonunu siliyordu. Hap kendi renginde kalıyor, geri bildirim
   zeminin koyulaşmasıyla veriliyor. */
a.pnl__kalan--az:hover,
a.pnl__kalan--az:focus-visible {
    color: var(--st-bek-ink);
    background: var(--st-bek-line);
}

/* SON GÜN(LER) UYARI TONUNDA.

   Eşik 1 gün ve renk TEK TAŞIYICI DEĞİL: 24 saatin altında metin de
   değişiyor ("Bugün bitiyor" — pnl.telif.kalan_saat), yani renk körlüğünde
   de bilgi kaybolmuyor (WCAG 1.4.1). Tonlar § 24f'deki --st-bek-*
   tokenlarından: bitmek üzere olan abonelik bir HATA değil, dikkat
   edilecek bir durum. */
.pnl__kalan--az {
    padding: .08rem .45rem;
    border-radius: var(--r-pill);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
}

/* MOBİLDE DE SAĞ ALT KÖŞE — 2026-09-28 · KULLANICI KARARI: "footer da ki:
   Kalan Gün: 365 mobilde de sağ alt köşede olsun".

   Eskiden ≤640px'te satır flex-start'a dönüyor ve kalan gün alta geçip
   SOLA yaslanıyordu. O kural kaldırıldı. space-between tek başına yetmiyor:
   sarmada alt satırda tek kalan öğe space-between'de satırın BAŞINA düşer.
   margin-inline-start: auto öğeyi her durumda satırın sonuna itiyor — aynı
   satırdayken de, alta geçtiğinde de sağ alt köşe (RTL'de sol alt). */
@media (max-width: 640px) {
    .pnl__kalan {
        margin-inline-start: auto;
    }
}

/* --- 24p · KALDIRILDI · paket kartındaki "şu an bağlanabilen" satırı -----
       eklendi 2026-09-25 · SİLİNDİ 2026-09-25 (aynı gün, kullanıcı kararı)

   ÜÇ KURAL SİLİNDİ: .pks__simdi · .pks__simdi_ek · .pks__simdi--yok

   Kural takımı paket kartında, üç gerçeğin altında duran bir kutuyu
   biçimlendiriyordu: paketin kapsamı ile config/uygulama.php'deki bağlama
   adaptörü kaydının kesişimi. Adaptör kaydı yalnızca Telegram içerdiği için
   Başlangıç paketinde kutu "Bu paketteki platformlar için bağlama henüz
   hazırlanıyor" yazıyordu.

   KULLANICI KARARI: "kartı neden yazıyor? kaldır." Basan kod da gitti
   (panel/paket-sec.php § "ŞU AN BAĞLANABİLEN PLATFORMLAR BLOĞU
   KALDIRILDI"); kural burada kalsaydı hiçbir işaretlemeye uymayan ölü CSS
   olurdu ve sonraki okuyucuya "bir yerde kullanılıyor" diye görünürdü.

   Geri gelirse: --st-bek-* tonları (§ 24f) ve .pks__ozellik ölçüleri
   yerinde duruyor, kutu o iki aileden kurulmuştu.
   ------------------------------------------------------------------------ */

/* ==========================================================================
   § 25 · TANITIM TURU  (.tur__*)  —  2026-09-25

   KULLANICI İSTEĞİ: "panel klasörü içindeki tüm projem için tanıtım turu da
   olabilir."

   --------------------------------------------------------------------------
   NİYE SPOTLIGHT/TOOLTIP DEĞİL — TASARIM KARARININ GEREKÇESİ

   Klasik tur bileşeni hedefin ÜSTÜNE konumlanan bir balon çizer ve bunun
   için her adımda koordinat hesaplar (getBoundingClientRect → left/top).
   Koordinat CSS'e ancak iki yolla girer: inline style ya da JS'in
   element.style'ı. İkisi de bu projede kapalı:

     · CSP'de style-src 'self' 'nonce-…' var, 'unsafe-inline' YOK — tarayıcı
       style ÖZNİTELİĞİNİ de engelliyor (öznitelik nonce alamıyor).
     · js/theme.js bugüne kadar .style'a HİÇ dokunmadı; dinamik değerler
       nonce'lu tek bir <style> bloğundan geliyor (ay_stil). O disiplini bir
       tur bileşeni için bozmak, sonradan "burada neden style var" diye
       sorulan bir istisna bırakırdı.

   O yüzden tur KOORDİNAT GEREKTİRMEYECEK şekilde tasarlandı:

     1. Hedef öğe YERİNDE işaretleniyor (.tur-hedef), taşınmıyor.
     2. Rehber kartı SABİT bir köşede duruyor (.tur__panel) — her adımda
        aynı yerde, yani göz onu aramıyor.

   Yan etkileri hep olumlu: pencere yeniden boyutlanınca ya da sayfa
   kaydırılınca hesaplanacak bir şey yok; kart hiçbir zaman ekran dışına
   taşmıyor; kaydırma sırasında balon hedefin peşinden zıplamıyor.

   --------------------------------------------------------------------------
   TAM EKRAN KARARTMA DA YOK — İKİ SEBEP

     · .pnl__yan'da overflow: hidden VAR. Karartmanın üstüne çıkarılan bir
       menü öğesi (position + z-index) o kırpmadan kurtulamaz; işe yaraması
       için kabuğun yerleşimini değiştirmek gerekirdi.
     · Karartma turu modal yapıyor. Modal olmayan tur daha iyi: kullanıcı
       anlatılan ekrana turu kapatmadan gidebiliyor, klavye tuzağı (focus
       trap) gerekmiyor ve ekran okuyucu için basit kalıyor.

   Turda olduğu belirsiz kalmıyor: kart "2 / 6" sayacı ve İleri/Geri
   düğmeleriyle açıkça görünüyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEDEF İŞARETİ

   ⚠ BOX-SHADOW **INSET** — DIŞ HALKA DEĞİL. Dış halka (ya da outline)
   .pnl__yan'ın overflow: hidden'ı tarafından yanlardan KIRPILIYOR: halka
   menü öğesinin solunda ve sağında yarım kalıyordu. Inset gölge öğenin
   İÇİNE çiziliyor, yani hiçbir kırpmadan etkilenmiyor.

   Aynı kalıp projede zaten var: takvim satırındaki durum şeridi de
   inset gölge (§ 24f, box-shadow: inset 3px 0 0 0 var(--st-serit)).

   Renk TEK TAŞIYICI DEĞİL: işaretli öğe aynı zamanda aria-describedby ile
   rehber kartına bağlanıyor (js/theme.js → Tur), yani ekran okuyucu hangi
   öğenin anlatıldığını renkten bağımsız olarak söylüyor.
   -------------------------------------------------------------------------- */
.tur-hedef {
    box-shadow: inset 0 0 0 2px var(--brand);
    background: var(--brand-soft);
    border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   REHBER KARTI

   position: fixed — sayfa kaydırılsa da yerinde. Masaüstünde SAĞ ALT köşe:
   yan menü solda olduğu için kart onu kapatmıyor ve okuma yönü
   (işaret → açıklama) korunuyor.

   ⚠ RTL'DE SOL ALTA GEÇİYOR: inset-inline-end kullanılıyor, right değil.
   Arapçada yan menü sağda duruyor, kart sağda kalsa menüyü kapatırdı.

   z-index en üstte: --z-cine (1060) sinema modu, --z-drawer (1050) mobil
   menü. Tur ikisinin de üstünde olmalı, yoksa drawer açıkken kart altında
   kalır.
   -------------------------------------------------------------------------- */
.tur__panel {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    z-index: calc(var(--z-cine) + 20);
    width: min(23rem, calc(100vw - 2rem));
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-pop);
}

/* Başlık satırı: sayaç solda, kapat sağda. */
.tur__ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.tur__sayac {
    padding: .1rem .45rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .75rem;
    font-weight: 700;
    /* "2 / 6" → "10 / 12" olduğunda genişlik zıplamasın. */
    font-variant-numeric: tabular-nums;
}

.tur__bas {
    margin: 0 0 .35rem;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}

.tur__metin {
    margin: 0 0 .9rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* Dip satırı: "Turu geç" solda (ikincil), gezinme sağda. */
.tur__alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
}

.tur__gez {
    display: flex;
    align-items: center;
    gap: .4rem;
    /* Sarma hâlinde grup birlikte alta geçiyor, düğmeler bölünmüyor. */
    margin-inline-start: auto;
}

/* "Turu geç" bir düğme ama ikincil: çerçevesiz, soluk. Aynı görsel ağırlıkta
   olsaydı üç düğme arasından hangisinin asıl yol olduğu okunmuyordu. */
.tur__atla {
    padding: .3rem 0;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.tur__atla:hover,
.tur__atla:focus-visible {
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   TELEFON: KART ALT SAYFAYA (bottom sheet) DÖNÜYOR

   360 pikselde sağ alt köşeye sıkışan 23rem'lik bir kart ekranın yarısını
   kaplıyor ve altındaki içeriği tamamen gizliyordu. Tam genişlik + alta
   yapışık, mobil kalıbın beklediği biçim.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .tur__panel {
        inset-inline: 0;
        inset-block-end: 0;
        width: auto;
        border-inline: 0;
        border-block-end: 0;
        border-start-start-radius: var(--r-lg);
        border-start-end-radius: var(--r-lg);
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }
}

/* --------------------------------------------------------------------------
   HAREKET AZALTMA

   Kartın girişteki yükselme animasyonu kapanıyor; kartın KENDİSİ
   kapanmıyor. "prefers-reduced-motion" hareketi istemiyor demek, bilgiyi
   istemiyor demek değil (aynı ayrım § 15'te de yapılı).
   -------------------------------------------------------------------------- */
.tur__panel {
    animation: turGir .18s ease-out both;
}

@keyframes turGir {
    from { opacity: 0; transform: translateY(.5rem); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tur__panel {
        animation: none;
    }
}

/* --- 24r · MEDYA KÜTÜPHANESİ  (.mdk · .mdk-kip · .mdk-birak)  —  2026-09-26

   KULLANICI KARARI: "sayfayı sıfırdan, daha kullanışlı bir şekilde oluştur.
   fancybox ile … önizleme · tick ile tek tek yada tümünü seçerek sil · file
   input ile upload yaparak görseli güncelleyebilsin."

   ESKİ .mdy__* KURALLARININ TAMAMI KALKTI (ızgara, ışık kutusu, değiştirme
   paneli, kota kutusu). Yeni ekran kendi önekini kullanıyor: .mdk (sayfa),
   .mdk-kip (kipler), .mdk-birak (bırakma alanı), .mdk-liste (seçilen
   dosyalar), .pswp__mdk-* (PhotoSwipe üstüne eklenenler). Işık kutusunun
   kendisi PhotoSwipe'ın stili (photoswipe.css, yalnızca bu ekranda).

   ÜÇ TASARIM KARARI
     · Önizleme 'contain' + satranç zemini: logo gibi geniş/şeffaf görseller
       kırpılmadan ve zeminden ayrışarak görünüyor ('cover' ortasından
       kesiyordu).
     · Eylemler görselin ALTINDA kendi şeridinde; görselin üstünde yalnızca
       seçim kutusu (sol üst) ve video rozeti (sağ üst).
     · Seçili kartta görsel hafifçe içe çekiliyor + marka çerçevesi: iki
       taşıyıcı, renk tek başına değil (WCAG 1.4.1); kutu ayrıca gerçek bir
       <input>, ekran okuyucu "işaretli" diye okuyor.
   -------------------------------------------------------------------------- */

/* hidden özniteliği ekrandaki display kurallarını (.ay-btn inline-flex,
   .mdk__tumu inline-flex …) YENMELİ. .ay-modal hariç: onun kapanış geçişi
   theme.css § 9b'de display'i allow-discrete ile yönetiyor. */
.mdk [hidden]:not(.ay-modal) {
    display: none !important;
}

/* Satranç zemini — şeffaf PNG'nin şeffaf olduğunu gösteriyor. Tek yerde,
   dört kullanıcısı var (kart · onay listesi · değiştirme · panel). */
.mdk__sahne,
.mdk__onay_on,
.mdk__panel_sahne,
.mdk-degis__sahne {
    background-color: #F4F6FA;
    background-image:
        linear-gradient(45deg, #E9EDF3 25%, transparent 25%),
        linear-gradient(-45deg, #E9EDF3 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #E9EDF3 75%),
        linear-gradient(-45deg, transparent 75%, #E9EDF3 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* === 1 · BAŞLIK SATIRI: açıklama · kota · Görsel Ekle ================== */

/* flex: 0 0 auto — ezilirse kota ile düğme alt alta düşüyordu (ölçülmüş
   eski kusur, 1280px); daralan taraf açıklama cümlesi. */
.mdk__ust_sag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .75rem;
    flex: 0 0 auto;
}

.mdk__kota {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    /* 0 0 auto + min-width, 0 1 15rem DEĞİL — ölçüldü (1440px): sarmalayıcı
       genişliğini içeriğin max-content'inden alıyor, kutu SONRA 15rem'e
       büyüyordu ve "Görsel Ekle" 15 piksel farkla alt satıra düşüyordu. */
    flex: 0 0 auto;
    min-width: 13rem;
    padding: .55rem .75rem .65rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}
.mdk__kota .pnl__olcum { margin-top: 0; }
.mdk__kota_yazi { font-variant-numeric: tabular-nums; }
.mdk__kota--uyari {
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
}
.mdk__kota--uyari .mdk__kota_yazi {
    color: var(--st-bek-ink);
    font-weight: 600;
}
.mdk__kota--uyari .pnl__olcum { background: var(--surface-2); }
.mdk__kota--uyari .pnl__olcum_dolu { background: var(--st-bek-ink); }

/* Etiket sarmıyor: "Bild hinzufügen" / "Afbeelding toevoegen". */
.mdk__ekle,
.mdk__indir_tum {
    white-space: nowrap;
}

/* === 2 · KÜTÜPHANE BÖLÜMÜ: başlık + araç çubuğu ======================== */
.mdk__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
}

.mdk__h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .55rem;
    margin: 0;
}
.mdk__adet {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ARAÇ ÇUBUĞU YAPIŞIK: 24 kartlık sayfanın dibinde seçim yapan kullanıcı
   "Seçilenleri sil"i bulmak için yukarı kaydırmak zorunda kalmıyor. Ofset
   panelin üst şeridi (--pnl-ust-h, § 24). Mobilde yapışma kapalı (aşağıda):
   orada şerit yok, sitenin header'ı var ve yüksekliği başka. */
.mdk__arac {
    position: sticky;
    top: calc(var(--pnl-ust-h, 4rem) + .5rem);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: .9rem 0 1rem;
    padding: .5rem .6rem .5rem .8rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
    transition: border-color var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
}
.mdk--secim .mdk__arac {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    box-shadow: var(--sh-1);
}

.mdk__tumu {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.mdk__tumu_kutu {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand);
    cursor: pointer;
}

.mdk__secili {
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.mdk__secili:empty { display: none; }

.mdk__arac_bosluk { flex: 1 1 auto; }

/* YIKICI DÜĞME: çerçeveli ve hata tonunda; dolgu yalnızca hover'da.
   Devre dışıyken soluk — seçim yokken ne yapacağını söylüyor ama
   basılamıyor. */
.mdk__sil_toplu {
    border: 1px solid var(--st-hata-line);
    background: var(--surface);
    color: var(--st-hata-ink);
}
.mdk__sil_toplu:hover:not(:disabled),
.mdk__sil_toplu:focus-visible:not(:disabled) {
    border-color: var(--st-hata-ink);
    background: var(--st-hata-ink);
    color: #fff;
}
.mdk__sil_toplu:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* === 3 · IZGARA VE KART ================================================

   auto-fill + minmax: kolon sayısını ekran veriyor. 11rem tabanı 1280
   pikselde 5 kolon (~170px önizleme) veriyor; telefon için aşağıda iki
   kolona sabitleniyor. */
.mdk__izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* overflow: hidden → görsel kartın yarıçapına uyuyor. Gölge kartın KENDİ
   gölgesi olduğu için kırpılmıyor. */
.mdk__kart {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease);
}
.mdk__kart:hover {
    border-color: var(--brand-line);
    box-shadow: var(--sh-1);
}
.mdk__kart--secili {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand), var(--sh-1);
}
.mdk__kart--secili .mdk__sahne {
    background-color: var(--brand-soft);
}

.mdk__sahne {
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
}

.mdk__on {
    position: absolute;
    inset: 0;
    display: block;
    cursor: zoom-in;
    outline-offset: -3px;
}
.mdk__on:focus-visible {
    outline: 2px solid var(--brand);
}

/* width/height öznitelikleri (yer kaymasını önlüyor) CSS ile eziliyor:
   kutuyu dolduran, içinde 'contain' ile duran görsel. */
.mdk__gorsel {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: .6rem;
    object-fit: contain;
    transition: transform var(--t-base) var(--ease-out);
}
video.mdk__gorsel {
    padding: 0;
    background: #0B1220;
    pointer-events: none;
}
.mdk__kart--secili .mdk__gorsel {
    transform: scale(.9);
}

/* OYNAT İŞARETİ — videonun kartta tanınması. Rozet ("Video") da var;
   işaret tek taşıyıcı değil. */
.mdk__oynat {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r-pill);
    background: rgba(1, 30, 90, .7);
    color: #fff;
    font-size: 14px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
[dir="rtl"] .mdk__oynat { transform: translate(50%, -50%); }

.mdk__rozet {
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-end: .5rem;
    padding: .15rem .5rem;
    border-radius: var(--r-pill);
    background: rgba(2, 12, 33, .72);
    color: #fff;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .02em;
    pointer-events: none;
}

/* SEÇİM KUTUSU — sol üst, her zaman görünür (dokunmatikte hover yok).
   Gerçek <input> etiketin tamamını kaplıyor ve saydam: tıklama hedefi 28px,
   görsel işaret 22px. Beyaz çerçeve + gölge: açık ve koyu görsellerin
   ikisinde de seçiliyor. */
.mdk__sec {
    position: absolute;
    inset-block-start: .4rem;
    inset-inline-start: .4rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    cursor: pointer;
}
.mdk__sec_kutu {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.mdk__sec_isaret {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    border-radius: 7px;
    background: rgba(2, 12, 33, .3);
    box-shadow: 0 1px 4px rgba(2, 12, 33, .35);
    color: transparent;
    font-size: 11px;
    pointer-events: none;
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease-out);
}
.mdk__sec:hover .mdk__sec_isaret {
    background: rgba(2, 12, 33, .5);
}
/* İşaretli: marka dolgusu + beyaz çerçevenin DIŞINDA ikinci bir marka
   halkası. Koyu görselin üstünde yalnız dolgu kayboluyordu (ölçüldü). */
.mdk__sec_kutu:checked + .mdk__sec_isaret {
    background: var(--brand);
    box-shadow: 0 0 0 2px var(--brand), 0 1px 4px rgba(2, 12, 33, .35);
    color: #fff;
    font-size: 12px;
    transform: scale(1.06);
}
.mdk__sec_kutu:focus-visible + .mdk__sec_isaret {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* KIRIK ÖNİZLEME — kayıt var, dosya yok (js/medya.js işaretliyor). */
.mdk__kart--kirik .mdk__gorsel { visibility: hidden; }
.mdk__kart--kirik .mdk__sahne::after {
    content: "";
    position: absolute;
    inset: 32%;
    border: 2px dashed var(--st-hata-line);
    border-radius: var(--r-md);
    pointer-events: none;
}

/* EYLEM ŞERİDİ — görselin altında. Düğme dili .pnl__eylem (§ 24b-2);
   sil sağa yaslı ve arada boşluk: yıkıcı eylem ötekilere karışmıyor. */
.mdk__eylem {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .45rem .5rem;
    border-top: 1px solid var(--hairline);
}
.mdk__eylem_bosluk { flex: 1 1 auto; }

/* === 4 · SUNUCU TARAFI PANELLER (JS'siz yol) =========================== */
.mdk__panel--tehlike {
    border-color: var(--st-hata-line);
}
.mdk__panel_metin {
    margin: .4rem 0 1rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.mdk__panel_dip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem .75rem;
    margin-top: 1rem;
}
.mdk__panel_iki {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 1rem 1.5rem;
    align-items: start;
}
.mdk__panel_on {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
    margin: 0;
}
.mdk__panel_sahne,
.mdk-degis__sahne {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
}
.mdk__panel_sahne { aspect-ratio: 1; }
/* ⚠ MUTLAK KONUM, height: 100% DEĞİL — ölçüldü: aspect-ratio'lu bir ızgara
   kutusunda yüzde yükseklik çözülmüyor ve 320×900'lük görsel 924 piksel
   boyunda çizilip kırpılıyordu (gerilmiş gibi görünüyordu). */
.mdk__panel_sahne img,
.mdk__panel_sahne video,
.mdk-degis__sahne img,
.mdk-degis__sahne video {
    position: absolute;
    inset: .5rem;
    display: block;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    object-fit: contain;
}
.mdk__panel_sahne video,
.mdk-degis__sahne video {
    background: #0B1220;
}
.mdk__panel_form {
    display: grid;
    gap: 1rem;
    min-width: 0;
}
.mdk__panel_form .mdk__panel_dip {
    justify-content: flex-start;
    margin-top: 0;
}

.mdk__etiket {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* Çoklu silme onay listesi: dosyalar ADIYLA, kullanım notuyla. */
.mdk__onay_liste {
    display: grid;
    gap: .45rem;
    max-height: 24rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}
.mdk__onay_satir {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .45rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}
.mdk__onay_on {
    display: grid;
    place-items: center;
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: var(--r-sm);
}
.mdk__onay_on img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.mdk__onay_video { color: var(--ink-mute); }
.mdk__onay_bilgi {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.mdk__onay_ad {
    overflow: hidden;
    color: var(--ink);
    font-size: var(--fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mdk__onay_meta,
.mdk__onay_kul {
    font-size: .75rem;   /* --fs-xs YOK: token seti üç ölçü tutuyor (sm/base/lg). */
    font-variant-numeric: tabular-nums;
}
.mdk__onay_meta { color: var(--ink-mute); }
.mdk__onay_kul  { color: var(--st-bek-ink); font-weight: 600; }

/* === 5 · KİPLER (yükleme · değiştirme) =================================

   Kabuk .ay-modal (theme.css § 9b). Buradaki kurallar yalnızca genişlik
   ve formun kart içindeki kolon ekseni: form kartın doğrudan çocuğu ve
   gövdenin kaydırması (.ay-modal__gov) formun da esnek kolon olmasına
   bağlı — yoksa uzun dosya listesi kartı taşırıyor. */
.mdk-kip__kart { width: min(36rem, 100%); }
.mdk-kip__kart--genis { width: min(46rem, 100%); }

.mdk-kip__form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}
.mdk-kip__gov {
    display: grid;
    gap: .85rem;
    align-content: start;
}
.mdk-kip__metin {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.mdk-kip__dip { justify-content: flex-end; }
.mdk-kip__ozet {
    margin-inline-end: auto;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.mdk-kip__uyari {
    margin: 0;
    padding: .65rem .8rem;
    border: 1px solid var(--st-hata-line);
    border-radius: var(--r-md);
    background: var(--st-hata-bg);
    color: var(--st-hata-ink);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.mdk-kip__form--gonderiliyor .mdk-kip__gov {
    opacity: .6;
    pointer-events: none;
}

/* BIRAKMA ALANI — bir <label>; girdisi görsel olarak gizli ama odakta
   (halka :focus-within ile alanda). */
.mdk-birak {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: 0;
    padding: 1.75rem 1rem;
    border: 2px dashed var(--brand-line);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease),
                padding var(--t-base) var(--ease-out);
}
.mdk-birak:hover,
.mdk-birak--ustte {
    border-color: var(--brand);
    background: var(--brand-soft);
}
.mdk-birak:focus-within {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.mdk-birak--dolu { padding: 1rem; }

.mdk-birak__sim {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--sh-1);
    color: var(--brand);
    font-size: 18px;
}
.mdk-birak--dolu .mdk-birak__sim {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 14px;
}
.mdk-birak__h {
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 650;
}
.mdk-birak__m {
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.mdk-birak__not {
    margin: 0;
    color: var(--ink-mute);
    font-size: .75rem;
}
.mdk-birak__girdi {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    opacity: 0;
}

/* SEÇİLEN DOSYALAR */
.mdk-liste {
    display: grid;
    gap: .4rem;
    max-height: 16rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}
.mdk-liste__satir {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .4rem .45rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}
.mdk-liste__satir--hata {
    border-color: var(--st-hata-line);
    background: var(--st-hata-bg);
}
.mdk-liste__on {
    display: grid;
    place-items: center;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink-mute);
}
.mdk-liste__on img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mdk-liste__bilgi {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}
.mdk-liste__ad {
    overflow: hidden;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mdk-liste__boy {
    color: var(--ink-mute);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}
.mdk-liste__satir--hata .mdk-liste__boy {
    color: var(--st-hata-ink);
    font-weight: 600;
}
.mdk-liste__cikar {
    width: 28px;
    height: 28px;
}

/* DEĞİŞTİRME: şu anki → yeni, yan yana. */
.mdk-degis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
}
.mdk-degis__kutu {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    margin: 0;
}
.mdk-degis__sahne { aspect-ratio: 4 / 3; }
.mdk-birak.mdk-degis__sahne {
    padding: .5rem;
    border: 2px dashed var(--brand-line);
}
.mdk-birak.mdk-degis__sahne:hover,
.mdk-birak.mdk-degis__sahne.mdk-birak--ustte {
    border-color: var(--brand);
}
.mdk-birak--dolu.mdk-degis__sahne { border-style: solid; }
.mdk-birak__bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
}
.mdk-birak__dosya {
    padding: .5rem;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.mdk-degis__ok {
    color: var(--ink-mute);
    font-size: 16px;
}
[dir="rtl"] .mdk-degis__ok { transform: scaleX(-1); }
.mdk-degis__not { text-align: start; }

/* SAYFAYA BIRAKMA ÖRTÜSÜ — sürükleme sırasında. pointer-events: none:
   olaylar belgeye gidiyor (js/medya.js orada dinliyor). z-index kiplerin
   (1300) altında, şeridin (1000) ve drawer'ın (1100) üstünde. */
.mdk-surukle {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: grid;
    place-items: center;
    background: rgba(1, 30, 90, .32);
    pointer-events: none;
}
.mdk-surukle__ic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 1.75rem 2.25rem;
    border: 2px dashed rgba(255, 255, 255, .85);
    border-radius: var(--r-lg);
    background: rgba(1, 30, 90, .82);
    color: #fff;
    font-size: var(--fs-lg);
}

/* === 6 · IŞIK KUTUSU — PhotoSwipe'ın üstüne eklenenler =================

   Kütüphanenin kendi stili photoswipe.css; burada yalnızca bizim
   eklediğimiz parçalar (video slaytı · alt yazı · üst çubuk ikonları). */
/* ⚠ ÇİFT SINIF ŞART: photoswipe.css bu dosyadan SONRA yükleniyor
   ($ay_sayfa_css, _head.php) ve kendi .pswp { --pswp-bg } tanımıyla bu
   kuralı eziyordu — arka plan siyah değil, sayfanın göründüğü bir örtüydü
   (ölçüldü). */
.pswp.pswp {
    --pswp-bg: #050B18;
}

.mdk-pswp-video {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 64px 12px 84px;
}
.mdk-pswp-video video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--r-md);
    background: #000;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}

.pswp__mdk-alt {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: 1.1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
    color: #fff;
    text-align: center;
    pointer-events: none;
    transition: opacity var(--t-base) var(--ease);
}
.pswp:not(.pswp--ui-visible) .pswp__mdk-alt { opacity: 0; }
.pswp__mdk-ad {
    max-width: 100%;
    overflow: hidden;
    font-size: .95rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pswp__mdk-meta {
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

.mdk-pswp-ikon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 17px;
    opacity: .85;
    transition: opacity var(--t-fast) var(--ease);
}
.pswp__button:hover .mdk-pswp-ikon,
.pswp__button:focus-visible .mdk-pswp-ikon {
    opacity: 1;
}

/* === 7 · DAR EKRAN ===================================================== */
@media (max-width: 900px) {
    /* Mobilde panelin üst şeridi yok, sitenin header'ı var; yapışık araç
       çubuğu onun altında kalırdı. */
    .mdk__arac {
        position: static;
    }
}

/* ⚠ 640px — PANELDE SATIR KIRILIMININ TEK EŞİĞİ (gerekçe § 24e). */
@media (max-width: 640px) {
    .mdk__ust_sag,
    .mdk__kota,
    .mdk__ekle {
        flex: 1 1 100%;
    }
    .mdk__ekle { justify-content: center; }

    /* Bölümün kendi dolgusu daralıyor: iki kolonun her birine ~20 piksel
       daha düşüyor, eylem şeridi sığıyor. */
    .mdk__kutuphane {
        padding: .9rem;
    }

    .mdk__izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }

    .mdk__eylem {
        gap: .15rem;
        padding: .35rem;
    }
    .mdk__eylem .pnl__eylem {
        width: 28px;
        height: 28px;
    }

    .mdk__panel_iki,
    .mdk-degis {
        grid-template-columns: minmax(0, 1fr);
    }
    .mdk__panel_on { max-width: 16rem; }
    .mdk-degis__ok {
        justify-self: center;
        transform: rotate(90deg);
    }
    [dir="rtl"] .mdk-degis__ok { transform: rotate(90deg); }

    .mdk__panel_dip .ay-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .mdk-surukle__ic {
        margin: 1rem;
        padding: 1.25rem;
        text-align: center;
    }
}

/* 400px altı: iki kolonda dört ikon sıkışıyor. "İndir" kartan kalkıyor —
   ışık kutusunun üst çubuğunda ve toplu indirmede duruyor. */
@media (max-width: 400px) {
    .mdk__eylem [download] {
        display: none;
    }
}

/* Hareket azaltma: seçimdeki içe çekilme ve yükleme alanının dolgu
   geçişi kapanıyor (theme.css § 11 süreleri zaten kısaltıyor). */
@media (prefers-reduced-motion: reduce) {
    .mdk__kart--secili .mdk__gorsel { transform: none; }
}

/* --- 24r-2 · GÖNDERİDEKİ MEDYA SEÇİCİSİ  (.gdr__medya)  —  panel/gonderi.php ---

   Kütüphaneden (.mdk, § 24r) AYRI sınıflar: burada kartın tamamı bir onay
   kutusu etiketi (seçim), kütüphanede kart içinde ayrı eylemler var.


   Onay kutusu GÖRSEL OLARAK GİZLİ ama erişilebilirlik ağacında duruyor:
   seçimi kutunun kendisi değil ÇERÇEVE gösteriyor (:checked + label).
   display:none KULLANILMADI — o, kutuyu klavyeden ve ekran okuyucudan da
   kaldırıyor. Bunun yerine sr-only deseni ve :focus-visible ile görünür
   odak halkası. */
.gdr__medya_izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .5rem;
    margin-top: .5rem;
}

.gdr__medya_kutu { position: relative; min-width: 0; }

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

.gdr__medya_kutu label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .35rem;
    border: 2px solid var(--hairline);
    border-radius: var(--r-md);
    cursor: pointer;
    min-width: 0;
}

/* SEÇİLİ DURUM İKİ TAŞIYICILI: çerçeve rengi VE kalınlığı değişmiyor
   (kalınlık sabit 2px, yoksa kutu seçildiğinde ızgarada kayıyordu) — ikinci
   taşıyıcı zemin. Renk tek başına kullanılmadı (WCAG 1.4.1); ayrıca onay
   kutusu erişilebilirlik ağacında olduğu için durum ekran okuyucuya
   "işaretli" olarak da gidiyor. */
.gdr__medya_kutu input:checked + label {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.gdr__medya_kutu input:focus-visible + label {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.gdr__medya_gorsel {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

/* Video kutusunda önizleme yok, ikon var (gerekçe panel/gonderi.php'de:
   etiketin içindeki <video controls> tıklamayı yutuyor ve seçim
   yapılamıyordu). İkon kutunun ortasında. */
.gdr__medya_video {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-mute);
    font-size: 1.5rem;
}

.gdr__medya_ad {
    overflow: hidden;
    color: var(--ink);
    font-size: .75rem;   /* --fs-xs YOK: token seti üç ölçü tutuyor (sm/base/lg); uygulamada bu punto zaten .75rem olarak sekiz yerde yazılı. */
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gdr__medya_alt {
    color: var(--ink-mute);
    font-size: .75rem;   /* --fs-xs YOK: token seti üç ölçü tutuyor (sm/base/lg); uygulamada bu punto zaten .75rem olarak sekiz yerde yazılı. */
}

/* Yükleme etiketi seçicinin altında, kendi boşluğuyla ayrılıyor. */
.gdr__medya_yukle_et { margin-top: .85rem; }

/* === 4 · SALT OKUNUR GÖNDERİDE MEDYA  (.gdr__oku_medya) ================

   Yayınlanmış gönderiyi açan kullanıcının sorusu "ne gönderdik" ve görselsiz
   bir cevap eksik. Burada seçim yok, o yüzden kutu/çerçeve de yok: yalnızca
   dosyalar. Ölçü sınırlı — 1.000 pikselli bir görsel ekranı kaplamasın. */
.gdr__oku_medya {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}
.gdr__oku_medya img,
.gdr__oku_medya video {
    display: block;
    width: auto;
    max-width: min(100%, 18rem);
    max-height: 12rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
}

/* ==========================================================================
   ÜCRETSİZ DEMO KARTI  (.pkg-demo)  —  _paketler.php, fiyatlar kapalıyken
   2026-09-27 · kullanıcı kararı ("fiyat kapatılırsa … Ücretsiz Demo yapısı")

   Yönetici ana sayfa fiyatlarını kapattığında (adk-panel/fiyatlar.php)
   #paketler bölümünde üç paket kartı yerine bu tek kart basılıyor. Solda
   vaat + tek çağrı, sağda demo hesabında neler olduğu. Liste biçimi
   paket kartlarıyla ortak (.pkg__list, § 14).

   Kart .pkg__card sınıfını ALMIYOR: onun 30rem sınırı ve nth-child
   gecikmeleri üç kartlık ızgaraya göre ayarlı.
   ========================================================================== */
.pkg-demo {
    --card-pad: clamp(1.5rem, 3vw, 2.5rem);

    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 60rem;
    margin-inline: auto;
}

@media (min-width: 992px) {
    .pkg-demo {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.pkg-demo__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pkg-demo__rozet {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    margin: 0 0 1rem;
    padding: .3125rem .8125rem;
    border-radius: var(--r-pill);
    background: #ECFDF3;
    box-shadow: inset 0 0 0 1px rgba(5, 96, 58, .16);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #05603A;
}

.pkg-demo__rozet .ay-ico { font-size: 13px; }

.pkg-demo__baslik {
    margin: 0 0 .375rem;
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--ink);
}

.pkg-demo__sure {
    margin: 0 0 .875rem;
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--brand-accent);
}

.pkg-demo__lead {
    margin: 0 0 clamp(1.25rem, 2.4vw, 1.625rem);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink-soft);
}

.pkg-demo__btn .ay-ico {
    font-size: 15px;
    transition: transform .3s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .pkg-demo__btn:hover .ay-ico { transform: translateX(3px); }
}

.pkg-demo__not {
    display: flex;
    align-items: center;
    gap: .4375rem;
    margin: .875rem 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

.pkg-demo__not .ay-ico { font-size: 12px; }

/* Sağ kolon kendi yüzeyinde: "demoda neler var" listesi vaatten ayrı okunsun */
.pkg-demo__side {
    padding: clamp(1.125rem, 2.2vw, 1.5rem);
    border-radius: var(--r-md);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px rgba(1, 30, 90, .06);
}

/* .pkg__list-head kartın içinde üst çizgi ve boşluk taşıyor; burada kolonun
   başında durduğu için ikisi de gereksiz. */
.pkg-demo__side .pkg__list-head {
    padding-top: 0;
    border-top: 0;
}

.pkg-demo__sonra {
    margin: 0;
    padding-top: .875rem;
    border-top: 1px solid var(--brand-line);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-soft);
}

/* RTL: ileri oku aynalanıyor — Arapçada "devam" sola bakar */
[dir="rtl"] .pkg-demo__btn .ay-ico { transform: scaleX(-1); }

@media (hover: hover) and (pointer: fine) {
    [dir="rtl"] .pkg-demo__btn:hover .ay-ico { transform: scaleX(-1) translateX(3px); }
}

/* ==========================================================================
   AI KREDİSİ ŞERİDİ  (.pkg-kredi)  —  _paketler.php, iki kipte de
   2026-09-29 · paneldeki AI kredisi yapısının ana sayfadaki karşılığı

   Paket kartlarının (ya da demo kartının) altında, cihaz panelinin üstünde.
   Solda "nasıl işler" (üç madde), sağda ek kredi paketleri. Sağ kolon demo
   kartındaki .pkg-demo__side ile aynı yüzey: iki kart alt alta geldiğinde
   aynı dil konuşsun.

   Fiyat metni yalnızca fiyatlar açıkken var; yokken satır ad + rozetle
   kalıyor, hizası bozulmuyor (sağ kutu boş kalabilir).
   ========================================================================== */
.pkg-kredi {
    --card-pad: clamp(1.5rem, 3vw, 2.25rem);

    display: grid;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    margin: clamp(2rem, 4vw, 3rem) auto 0;
}

@media (min-width: 992px) {
    .pkg-kredi {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
    }
}

.pkg-kredi__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    margin: 0 0 .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-accent);
}

.pkg-kredi__eyebrow .ay-ico { font-size: 13px; }

.pkg-kredi__baslik {
    margin: 0 0 .5rem;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

.pkg-kredi__lead {
    margin: 0 0 1.125rem;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink-soft);
}

.pkg-kredi__maddeler {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pkg-kredi__maddeler li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-soft);
}

.pkg-kredi__maddeler li + li { margin-top: .875rem; }

.pkg-kredi__maddeler b {
    display: block;
    margin-bottom: .125rem;
    font-weight: 700;
    color: var(--ink);
}

.pkg-kredi__ico {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand-accent);
    font-size: 14px;
}

.pkg-kredi__side {
    padding: clamp(1.125rem, 2.2vw, 1.5rem);
    border-radius: var(--r-md);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px rgba(1, 30, 90, .06);
}

.pkg-kredi__side .pkg__list-head {
    padding-top: 0;
    border-top: 0;
}

.pkg-kredi__ek {
    margin: 0 0 .875rem;
    padding: 0;
    list-style: none;
}

.pkg-kredi__paket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .875rem;
    border-radius: var(--r-md);
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(1, 30, 90, .08);
}

.pkg-kredi__paket + .pkg-kredi__paket { margin-top: .5rem; }

/* En avantajlı paket: renk TEK taşıyıcı değil, rozet metni de var (WCAG 1.4.1) */
.pkg-kredi__paket.is-avantaj { box-shadow: inset 0 0 0 2px var(--brand-accent); }

.pkg-kredi__ad {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pkg-kredi__ad b {
    font-weight: 700;
    color: var(--ink);
}

.pkg-kredi__ad small {
    font-size: .8125rem;
    color: var(--ink-mute);
}

.pkg-kredi__sag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    text-align: end;
}

.pkg-kredi__rozet {
    padding: .1875rem .5625rem;
    border-radius: var(--r-pill);
    background: #ECFDF3;
    box-shadow: inset 0 0 0 1px rgba(5, 96, 58, .16);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #05603A;
    white-space: nowrap;
}

.pkg-kredi__fiyat {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.pkg-kredi__not {
    margin: 0;
    padding-top: .875rem;
    border-top: 1px solid var(--brand-line);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-soft);
}

/* ==========================================================================
   ÖNCE DENE + ŞEFFAF ÖDEME  —  _paketler.php, fiyatlar AÇIKKEN de
   2026-10-01 · kullanıcı kararı ("önce 7 gün ücretsiz dene, beğenirsen
   devam et · taahhüt yok, ceza yok, ön ödemeli … şeffaf")

     .pkg-deneme   dönem anahtarının üstündeki şerit (deneme > 0 gün)
     .pkg__deneme  paket kartında fiyatın hemen altındaki not
     .pkg-seffaf   paketlerin altındaki dört maddelik şeffaflık kartı

   Yeşil ton demo kartının rozetiyle aynı (#ECFDF3 / #05603A — .pkg-demo__
   rozet): "ücretsiz" bilgisi sitede tek renkle okunuyor. Renk tek taşıyıcı
   değil, her yerde metin de var (WCAG 1.4.1). #05603A, #ECFDF3 üstünde
   ~7:1 kontrast.
   ========================================================================== */
.pkg-deneme {
    display: grid;
    gap: 1rem 1.5rem;
    align-items: center;
    max-width: 60rem;
    margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
    padding: clamp(1.125rem, 2.4vw, 1.625rem) clamp(1.125rem, 3vw, 2rem);
    border-radius: var(--r-lg);
    background: #ECFDF3;
    box-shadow: inset 0 0 0 1px rgba(5, 96, 58, .18);
}

@media (min-width: 768px) {
    .pkg-deneme { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.pkg-deneme__ico {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-md);
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(5, 96, 58, .16);
    color: #05603A;
    font-size: 20px;
}

.pkg-deneme__rozet {
    margin: 0 0 .25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #05603A;
}

.pkg-deneme__baslik {
    margin: 0 0 .375rem;
    font-size: clamp(1.125rem, 2.2vw, 1.375rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

.pkg-deneme__alt {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-soft);
}

.pkg-deneme__cagri {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

@media (min-width: 768px) {
    .pkg-deneme__cagri { align-items: center; }
}

.pkg-deneme__btn { white-space: nowrap; }

.pkg-deneme__btn .ay-ico {
    font-size: 15px;
    transition: transform .3s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .pkg-deneme__btn:hover .ay-ico { transform: translateX(3px); }
}

.pkg-deneme__not {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
    font-size: .8125rem;
    color: var(--ink-mute);
}

.pkg-deneme__not .ay-ico { font-size: 11px; }

[dir="rtl"] .pkg-deneme__btn .ay-ico { transform: scaleX(-1); }

@media (hover: hover) and (pointer: fine) {
    [dir="rtl"] .pkg-deneme__btn:hover .ay-ico { transform: scaleX(-1) translateX(3px); }
}

/* Kart içi not: fiyatla düğme arasında, fiyata yakın */
.pkg__deneme {
    display: flex;
    align-items: center;
    gap: .4375rem;
    margin: calc(-1 * clamp(.5rem, 1vw, .75rem)) 0 clamp(1rem, 1.8vw, 1.25rem);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #05603A;
}

.pkg__deneme .ay-ico { font-size: 12px; }

.pkg-seffaf {
    --card-pad: clamp(1.5rem, 3vw, 2.25rem);

    margin: clamp(2rem, 4vw, 3rem) auto 0;
}

.pkg-seffaf__bas { margin-bottom: clamp(1.125rem, 2.4vw, 1.5rem); }

.pkg-seffaf__baslik {
    margin: 0 0 .5rem;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

.pkg-seffaf__lead {
    margin: 0;
    max-width: 70ch;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink-soft);
}

.pkg-seffaf__liste {
    display: grid;
    gap: 1rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .pkg-seffaf__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .pkg-seffaf__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pkg-seffaf__madde {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-soft);
}

.pkg-seffaf__ico {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-md);
    background: #ECFDF3;
    color: #05603A;
    font-size: 14px;
}

.pkg-seffaf__txt b {
    display: block;
    margin-bottom: .125rem;
    font-weight: 700;
    color: var(--ink);
}

.pkg-seffaf__dip {
    margin: clamp(1.125rem, 2.4vw, 1.5rem) 0 0;
    padding-top: .875rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-sm);
}

.pkg-seffaf__dip a {
    color: var(--brand-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   DENEME ÇAĞRISI  —  "Hesap Oluştur" yerine "{n} gün ücretsiz dene"
   2026-10-01 · kullanıcı kararı ("eğlenceli ve dikkat çekici bir şekilde
   hemen kayıt olmasını sağlat")

     .ay-btn--deneme  hediye ikonu + periyodik parıltı (hero, kayıt düğmesi)
     .dnm-rozet       kayıt başlığının üstünde hafif eğik kupon etiketi
     .dnm-cipler      "kart yok · taahhüt yok · ceza yok" çipleri
     .dnm-kart        giriş ekranındaki "Hesabınız yok mu?" hediye kartı

   Kayıt/giriş kabuğu da style.css'i yüklüyor (_kimlik.php → _head.php),
   bu yüzden bileşen burada, kayit.css'te değil.

   HAREKET: parıltı 4 saniyede bir, hediye kutusu arada bir sallanıyor. İkisi
   de yalnızca dekor — prefers-reduced-motion'da tamamen duruyor (WCAG
   2.3.3). Parıltı ::after'da, metnin ARKASINDA değil üstünde ama
   pointer-events: none ve yarı saydam: metin kontrastı düşmüyor.
   ========================================================================== */
.ay-btn--deneme {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ay-btn--deneme::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: dnm-parilti 4s ease-in-out 1.2s infinite;
}

@keyframes dnm-parilti {
    0%, 62% { left: -60%; }
    100%    { left: 130%; }
}

.ay-btn__hediye {
    display: inline-block;
    color: #FFD37A;
    transform-origin: 50% 80%;
    animation: dnm-salla 4s ease-in-out 1.2s infinite;
}

@keyframes dnm-salla {
    0%, 70%, 100% { transform: rotate(0); }
    76%           { transform: rotate(-14deg) scale(1.12); }
    82%           { transform: rotate(12deg) scale(1.12); }
    88%           { transform: rotate(-6deg); }
    94%           { transform: rotate(3deg); }
}

/* Kupon etiketi — sarı zemin, lacivert yazı (~12:1), kesik çizgili kenar */
.dnm-rozet {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    padding: .4375rem .9375rem;
    border: 1.5px dashed rgba(1, 30, 90, .45);
    border-radius: var(--r-pill);
    background: #FFE7A8;
    box-shadow: 0 8px 18px -12px rgba(120, 80, 0, .55);
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand);
    transform: rotate(-2.5deg);
    transform-origin: left center;
}

[dir="rtl"] .dnm-rozet { transform: rotate(2.5deg); transform-origin: right center; }

.dnm-rozet__ikon {
    font-size: 15px;
    color: #C2410C;
    transform-origin: 50% 80%;
    animation: dnm-salla 4s ease-in-out .6s infinite;
}

.dnm-cipler {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.dnm-cipler li {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .75rem;
    border-radius: var(--r-pill);
    background: #ECFDF3;
    box-shadow: inset 0 0 0 1px rgba(5, 96, 58, .16);
    font-size: .8125rem;
    font-weight: 600;
    color: #05603A;
}

.dnm-cipler .ay-ico { font-size: 11px; }

/* Giriş ekranı — "Hesabınız yok mu?" kuponu. auth__alt'ın üst çizgisi ve
   boşluğu korunuyor; ortalı metin yerine tam genişlik kart. */
.auth__alt--deneme { text-align: start; }

.dnm-kart {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1rem;
    border: 1.5px dashed rgba(5, 96, 58, .45);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, #ECFDF3 0%, #FFF6DA 100%);
    color: var(--ink);
    text-decoration: none;
    transition: transform var(--t-fast, .15s) var(--ease, ease), box-shadow var(--t-fast, .15s) var(--ease, ease);
}

.dnm-kart:hover,
.dnm-kart:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -18px rgba(5, 96, 58, .6);
    color: var(--ink);
}

.dnm-kart:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
}

.dnm-kart__ikon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(5, 96, 58, .18);
    color: #C2410C;
    font-size: 18px;
}

.dnm-kart__ikon .ay-ico {
    transform-origin: 50% 80%;
    animation: dnm-salla 4s ease-in-out .8s infinite;
}

.dnm-kart__metin {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.dnm-kart__ust {
    font-size: .8125rem;
    color: var(--ink-soft);
}

.dnm-kart__ana {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #05603A;
}

.dnm-kart__alt {
    margin-top: .125rem;
    font-size: .75rem;
    color: var(--ink-mute);
}

.dnm-kart__ok {
    flex: none;
    font-size: 15px;
    color: #05603A;
    transition: transform var(--t-fast, .15s) var(--ease, ease);
}

.dnm-kart:hover .dnm-kart__ok { transform: translateX(3px); }

[dir="rtl"] .dnm-kart__ok { transform: scaleX(-1); }
[dir="rtl"] .dnm-kart:hover .dnm-kart__ok { transform: scaleX(-1) translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .ay-btn--deneme::after { animation: none; display: none; }
    .ay-btn__hediye,
    .dnm-rozet__ikon,
    .dnm-kart__ikon .ay-ico { animation: none; }
    .dnm-kart:hover,
    .dnm-kart:focus-visible { transform: none; }
}

/* ==========================================================================
   ADK-FİYAT · Fiyat görünürlüğü anahtarları  —  adk-panel/fiyatlar.php

   Yerel checkbox + role="switch", appearance: none ile anahtar görünümü.
   Bootstrap'in .form-switch'i kullanılmadı: tema renkleri, RTL aynalaması
   ve durum yazısı (Açık/Kapalı) tek yerde dursun.

   Durum yazısı RENGE EK olarak metinle de veriliyor (WCAG 1.4.1); iki
   etiket de basılıyor, :checked hangisinin görüneceğini seçiyor — JS
   kapalıyken de anahtarla birlikte değişiyor.
   ========================================================================== */
.adk-fiyat__satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--hairline);
}

.adk-fiyat__satir:first-child { padding-top: 0; }

.adk-fiyat__metin { min-width: 0; }

.adk-fiyat__baslik {
    display: block;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.adk-fiyat__aciklama {
    margin: .25rem 0 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--ink-soft);
}

.adk-fiyat__dip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}

/* JS formu anahtar değişince gönderiyor (js/theme.js → AY.OtoGonder);
   o durumda "Kaydet" gereksiz. JS yoksa görünür kalıyor. */
.adk-fiyat.is-auto .adk-fiyat__kaydet { display: none; }

.adk-sw {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .625rem;
}

.adk-sw__girdi {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 28px;
    margin: 0;
    border: 0;
    border-radius: var(--r-pill);
    /* kapalı iz --ink-mute: beyaz zeminde 3:1'in üstünde (WCAG 1.4.11) */
    background: var(--ink-mute);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color .2s var(--ease);
}

.adk-sw__girdi::before {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .3);
    transition: transform .2s var(--ease-out);
}

.adk-sw__girdi:checked { background: var(--brand); }

.adk-sw__girdi:checked::before { transform: translateX(20px); }

[dir="rtl"] .adk-sw__girdi:checked::before { transform: translateX(-20px); }

.adk-sw__girdi:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
}

.adk-sw__girdi:disabled { cursor: progress; opacity: .7; }

.adk-sw__durum {
    min-width: 3.5rem;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.adk-sw__durum--acik   { color: #05603A; }
.adk-sw__durum--kapali { color: var(--ink-mute); }

.adk-sw__girdi:checked ~ .adk-sw__durum--kapali,
.adk-sw__girdi:not(:checked) ~ .adk-sw__durum--acik { display: none; }

@media (prefers-reduced-motion: reduce) {
    .adk-sw__girdi,
    .adk-sw__girdi::before { transition: none; }
}

/* ==========================================================================
   § 24z · GÖNDERİ DÜZENLEYİCİ  (.gde*)   —   panel/gonderi.php · 2026-09-27

   KULLANICI KARARI: "gönderi metni kısmı sol kısımda, sağında görsel ve diğer
   alanlar olsun... wordpress mantığı". Solda yazı alanı, sağda kenar çubuğu
   (Yayınla · Görsel ve video · Hesaplar · Platform uyumu).

   1000 pikselin altında tek kolon: önce yazı, sonra kenar çubuğu.
   Kenar çubuğu yapışık (sticky) YAPILMADI: dört kart ekrandan uzun olunca
   alttaki kartlara sayfa sonuna kadar ulaşılamıyordu.
   ========================================================================== */
.gde {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.gde-ana,
.gde-yan {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

@media (min-width: 1000px) {
    .gde { grid-template-columns: minmax(0, 1fr) clamp(280px, 34%, 360px); }
}

/* --- Kart ---------------------------------------------------------------- */
.gde-kart {
    min-width: 0;
    margin: 0;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-1);
}

.gde-kart__h {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 650;
    letter-spacing: -.01em;
}

.gde-kart__sayi:not(:empty) {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .35rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .75rem;
    font-weight: 700;
}

.gde-kart__eylem {
    margin-inline-start: auto;
    padding: .15rem .25rem;
    color: var(--brand-accent);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.gde-kart__eylem:hover { text-decoration: underline; }

.gde-kart__not {
    margin: 0 0 .75rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.gde-kart .ay-error { margin: 0 0 .75rem; }

/* --- Yazı alanı (sol) ---------------------------------------------------- */
.gde-yazi { padding: 1.25rem 1.35rem; }

.gde-yazi__baslik {
    display: block;
    width: 100%;
    padding: .25rem 0 .6rem;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    /* Genel girdi kuralından gelen 8px köşe, tek alt çizgiyi iki uçta
       yukarı kıvırıyordu (odakta koyulaşınca belirgin). */
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 1.3rem;
    font-weight: 650;
    letter-spacing: -.02em;
    text-overflow: ellipsis;
}

.gde-yazi__metin {
    display: block;
    width: 100%;
    min-height: 16rem;
    margin-top: .85rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.65;
    resize: vertical;
}

.gde-yazi__baslik:focus,
.gde-yazi__metin:focus { outline: none; }
.gde-yazi__baslik:focus-visible { border-bottom-color: var(--brand); }

.gde-yazi__baslik::placeholder,
.gde-yazi__metin::placeholder { color: var(--ink-mute); }

.gde-yazi__metin[aria-invalid="true"] {
    box-shadow: inset 3px 0 0 var(--st-hata-ink, #B42318);
    padding-inline-start: .75rem;
}

/* Metin alanının altı: ipucu solda, sayaç sağda */
.gde-yazi__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem 1rem;
    margin-top: .75rem;
    padding-top: .65rem;
    border-top: 1px solid var(--hairline);
}

.gde-yazi__ipucu {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

.gde-sayac {
    margin-inline-start: auto;
    padding: .15rem .6rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.gde-sayac.is-asim {
    background: var(--st-hata-bg, #FEF3F2);
    color: var(--st-hata-ink, #B42318);
}

.gde-yazi .ay-error { margin: .5rem 0 0; }

/* --- UZUN METİN  (.gde-uzun)  —  2026-09-27 ------------------------------

   KULLANICI KARARI: kısa metin (X: 280) + Facebook, LinkedIn gibi
   platformlar için isteğe bağlı ikinci, uzun alan. Gerekçe ve yayın kuralı
   panel/gonderi.php → § UZUN METİN ve config/platform-uyum.php →
   ay_plt_metin_secimi.

   <details>/<summary>: kapalıyken tek satırlık bir "+ Uzun metin" çubuğu —
   kullanmayan kullanıcının ekranında yer tutmuyor. Açıkken kısa metnin
   altında aynı yazı dilinde ikinci bir alan (çerçevesiz, aynı satır
   yüksekliği), ayırıcı çizgiyle ayrık.

   Öneri satırı bilgi tonunda (uyarı DEĞİL): kısa metnin uzun olması bir
   hata değil, yalnızca "uzun hâlini şuraya yazabilirsiniz" bilgisi. Asıl
   hata sayaçta ve (planlanırken) sunucunun cümlesinde zaten kırmızı. */
.gde-uzun__oneri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    margin: .75rem 0 0;
    padding: .55rem .75rem;
    border-radius: var(--r-sm);
    background: var(--brand-soft);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.gde-uzun__oneri > .ay-ico {
    flex: 0 0 auto;
    color: var(--brand);
}
.gde-uzun__oneri > span {
    flex: 1 1 14rem;
}
.gde-uzun__oneri[hidden] { display: none; }

.gde-uzun {
    margin-top: .85rem;
    border-top: 1px solid var(--hairline);
}
.gde-uzun__ac {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    padding: .7rem 0 .1rem;
    color: var(--brand);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.gde-uzun__ac::-webkit-details-marker { display: none; }
.gde-uzun__ac .ay-ico {
    align-self: center;
    font-size: .8rem;
    transition: transform var(--t-fast) var(--ease-out);
}
/* Açıkken "+" çarpıya dönüyor: aynı düğme kapatıyor. */
.gde-uzun[open] > .gde-uzun__ac .ay-ico { transform: rotate(45deg); }
.gde-uzun__ac:hover .gde-uzun__ad,
.gde-uzun__ac:focus-visible .gde-uzun__ad {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gde-uzun__ac:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
.gde-uzun__alt {
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 400;
}
/* Uyarı şeridi (.ay-alert--uyari): renk ve zemin şeritten; burada yalnızca
   yerleşim ve küçük punto. */
.gde-uzun__not {
    margin: .5rem 0 .25rem;
    padding: .6rem .8rem;
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.gde-uzun__not > .ay-ico {
    font-size: 14px;
    margin-top: .15rem;
}
/* Uzun alan kısa metnin tam yüksekliğini almıyor: çoğu kullanıcı birkaç
   paragraf yazıyor, kutu içeriğe göre uzuyor (js/gonderi.js). */
.gde-uzun__metin {
    min-height: 10rem;
}

/* Uyum listesinde "hangi metin gidiyor" etiketi (yalnızca uzun metin
   doluyken). Uzun olan marka tonunda, kısa olan nötr. */
.gde-uyum__metin {
    display: inline-block;
    margin-inline-start: .35rem;
    padding: 0 .4rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-mute);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: .08em;
}
.gde-uyum__metin.is-uzun {
    background: var(--brand-soft);
    color: var(--brand);
}
.gde-uyum__metin[hidden] { display: none; }

/* --- Yayınla ------------------------------------------------------------- */
.gde-durum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0 0 .85rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

/* flex-wrap, iki eşit kolon DEĞİL: dar kenar çubuğunda (1024 px ekran)
   "Taslak olarak kaydet" + "Planla" yan yana sığmıyor ve ızgarada ikinci
   düğme kartın dışına taşıyordu (ölçüldü). Sığmayınca alt satıra iniyor. */
.gde-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}
.gde-dugmeler .ay-btn { flex: 1 1 auto; }

.gde.is-gonderiliyor .gde-dugmeler .ay-btn {
    opacity: .65;
    pointer-events: none;
}

/* Kart başlığı + sağ uçta eylem (Yayınla kartında Sil). */
.gde-kart__ust {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
}
.gde-kart__ust .gde-kart__h { margin: 0; }
.gde-kart__ust .gdr__sil { margin-inline-start: auto; }

/* --- Görsel ve video ----------------------------------------------------- */
.gde-medya { transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.gde-medya.is-birak {
    border-color: var(--brand);
    border-style: dashed;
    background: var(--brand-soft);
}

.gde-medya__liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}
/* :empty tutmuyor (PHP döngüsünün boşlukları metin düğümü); :has ile. */
.gde-medya__liste:empty,
.gde-medya__liste:not(:has(li)) { display: none; }
.gde-medya__liste[hidden] { display: none; }

.gde-medya__oge {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
    cursor: grab;
}
.gde-medya__oge.is-tasiniyor { opacity: .4; }
.gde-medya__oge.is-bekleyen {
    cursor: default;
    border-style: dashed;
}

.gde-medya__gorsel {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.gde-medya__yer {
    display: grid;
    place-items: center;
    color: var(--ink-mute);
    font-size: 1.25rem;
}

.gde-medya__rozet {
    position: absolute;
    inset-inline-start: .35rem;
    bottom: .35rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--r-pill);
    background: rgba(2, 12, 33, .65);
    color: #fff;
    font-size: .65rem;
    pointer-events: none;
}

.gde-medya__sira {
    position: absolute;
    top: .35rem;
    inset-inline-start: .35rem;
    display: grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    pointer-events: none;
}

.gde-medya__bekliyor {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: .2rem .35rem;
    background: rgba(2, 12, 33, .65);
    color: #fff;
    font-size: .65rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gde-medya__kaldir {
    position: absolute;
    top: .3rem;
    inset-inline-end: .3rem;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    font-size: .75rem;
    box-shadow: var(--sh-1);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.gde-medya__oge:hover .gde-medya__kaldir,
.gde-medya__kaldir:focus-visible { opacity: 1; }
.gde-medya__kaldir:hover { color: var(--st-hata-ink, #B42318); }

/* Dokunmatik ekranda üzerine gelme yok: kaldır düğmesi hep görünür. */
@media (hover: none) {
    .gde-medya__kaldir { opacity: 1; }
}

/* Bilgisayardan yükle — girdi görünmez ama odaklanabilir; etiket tıklanıyor */
.gde-yukle {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .15rem;
    margin-top: .5rem;
    padding: .7rem .75rem;
    border: 1px dashed var(--brand-line);
    border-radius: var(--r-md);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.gde-yukle:hover,
.gde-yukle:focus-within {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.gde-yukle__girdi {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.gde-yukle__ad {
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.gde-yukle__not {
    color: var(--ink-mute);
    font-size: .75rem;
}

/* --- Hesaplar ------------------------------------------------------------ */
.gde-hesaplar {
    display: grid;
    gap: .35rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.gde-hesap {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .55rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.gde-hesap:hover { border-color: var(--brand-line); }
.gde-hesap:has(input:checked) {
    border-color: var(--brand-line);
    background: var(--brand-soft);
}

.gde-hesap input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--brand);
}

.gde-hesap__kimlik {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}
.gde-hesap__ad {
    overflow: hidden;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gde-hesap__alt {
    color: var(--ink-mute);
    font-size: .75rem;
}

/* --- Platform uyumu ------------------------------------------------------ */
.gde-anahtar {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 0 .85rem;
    padding: .6rem .7rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
    cursor: pointer;
}
.gde-anahtar input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: .1rem 0 0;
    accent-color: var(--brand);
}
.gde-anahtar__gov { display: grid; gap: .15rem; }
.gde-anahtar__ad {
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.gde-anahtar__not {
    color: var(--ink-mute);
    font-size: .75rem;
    line-height: 1.45;
}

.gde-uyum {
    display: grid;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gde-uyum__satir {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .3rem .35rem;
    border-radius: var(--r-sm);
}
.gde-uyum__satir.is-secili { background: var(--brand-soft); }

.gde-uyum__ad {
    overflow: hidden;
    color: var(--ink);
    font-size: var(--fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gde-uyum__satir.is-secili .gde-uyum__ad { font-weight: 650; }

.gde-uyum__durum {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 600;
    text-align: end;
}
.gde-uyum__satir.is-ok .gde-uyum__durum    { color: var(--st-ok-ink, #067647); }
.gde-uyum__satir.is-sorun .gde-uyum__durum { color: var(--st-bek-ink, #B54708); }
.gde-uyum__satir.is-sorun.is-secili .gde-uyum__durum { color: var(--st-hata-ink, #B42318); }

/* --- Salt okunur --------------------------------------------------------- */
.gde-oku__baslik {
    margin: 0 0 .5rem;
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 650;
}
.gde-oku__metin {
    margin: 0;
    color: var(--ink);
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.gde-oku .gdr__oku_medya { margin-top: 1rem; }
/* Uzun metin (2026-09-27): kısa metnin altında etiketli ikinci blok. */
.gde-oku__uzun {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid var(--hairline);
}
.gde-oku__uzun_h {
    margin: 0 0 .35rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-weight: 650;
}

.gde-sonuc .hsp__liste { margin: 0; }

/* --- Medya galerisi kibi ------------------------------------------------- */
.gde-galeri__kart {
    width: min(58rem, 100%);
    height: min(44rem, 92vh);
}

.gde-galeri__arac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem .9rem;
    padding: .7rem .95rem;
    border-bottom: 1px solid var(--hairline);
}

.gde-galeri__sekmeler {
    display: inline-flex;
    gap: .25rem;
    padding: .2rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
}
.gde-galeri__sekme {
    padding: .3rem .8rem;
    border-radius: var(--r-pill);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.gde-galeri__sekme[aria-pressed="true"] {
    background: var(--surface);
    color: var(--brand);
    box-shadow: var(--sh-1);
}

.gde-galeri__ara {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 14rem;
    margin: 0;
}
.gde-galeri__ara .ay-ico {
    position: absolute;
    inset-inline-start: .7rem;
    color: var(--ink-mute);
    pointer-events: none;
}
.gde-galeri__ara .ay-input { padding-inline-start: 2.2rem; }

.gde-galeri__izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gde-galeri__oge {
    display: grid;
    gap: .2rem;
    width: 100%;
    padding: .35rem;
    border: 2px solid transparent;
    border-radius: var(--r-md);
    text-align: start;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.gde-galeri__oge:hover { background: var(--surface-2); }
.gde-galeri__oge[aria-pressed="true"] {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.gde-galeri__gorsel {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.gde-galeri__gorsel img,
.gde-galeri__gorsel video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gde-galeri__tik {
    position: absolute;
    top: .35rem;
    inset-inline-end: .35rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #fff;
    border-radius: var(--r-pill);
    background: rgba(2, 12, 33, .35);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    box-shadow: var(--sh-1);
}
.gde-galeri__oge[aria-pressed="true"] .gde-galeri__tik {
    border-color: var(--brand);
    background: var(--brand);
}

.gde-galeri__ad {
    overflow: hidden;
    color: var(--ink);
    font-size: .8rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gde-galeri__alt {
    color: var(--ink-mute);
    font-size: .72rem;
}

.gde-galeri__durum:not(:empty) {
    margin: 1.5rem 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    text-align: center;
}
.gde-galeri__daha {
    display: flex;
    margin: 1rem auto 0;
}

.gde-galeri__sayi {
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.gde-galeri__bosluk { flex: 1 1 auto; }

@media (max-width: 575.98px) {
    .gde-galeri { padding: 0; }
    .gde-galeri__kart {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
    .gde-galeri__izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
    .gde-galeri__ad, .gde-galeri__alt { display: none; }
}

/* --- SADELEŞTİRME  (2026-09-27)  —  KULLANICI: "sade, temiz ve kullanışlı
   olsun" (panel/gonderi.php ve ?medya=) --------------------------------------

     · Medya: koyu "Medya galerisi" düğmesi + ayrı kesikli yükleme kutusu
       yerine TEK kesikli alan, içinde iki eşit çerçeveli düğme. Sayfanın tek
       dolu düğmesi "Planla" kaldı.
     · Hesap yok: kırmızı şerit yerine kartın içinde sakin bilgi kutusu.
     · Platform uyumu: başlıkta özet; uyumlu satırda yalnızca ✓, sorunlu
       satırın açıklaması adın altında (ad artık kesilmiyor).
     · Yazı alanı: boş hâlde daha kısa (kenar çubuğuyla dengeli), içerik
       geldikçe js/gonderi.js uzatıyor.
   ========================================================================== */

/* Yazı alanı: 16rem boş hâlde ekranın yarısını beyaz bırakıyordu. */
.gde-yazi__metin { min-height: 12rem; }
.gde-uzun__metin { min-height: 8rem; }
.gde-yazi__alt { margin-top: .6rem; }

/* Medya ekleme alanı */
.gde-ekle {
    display: grid;
    gap: .55rem;
    padding: .8rem;
    border: 1px dashed var(--brand-line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    text-align: center;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.gde-medya.is-birak .gde-ekle {
    border-color: var(--brand);
    background: var(--brand-soft);
}
/* Bırakma vurgusu artık alanın kendisinde; kartın tamamı kesikli olmuyor. */
.gde-medya.is-birak {
    border-style: solid;
    background: var(--surface);
}

.gde-ekle__dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.gde-ekle__dugmeler .ay-btn {
    flex: 1 1 8rem;
    background: var(--surface);
}
/* .ay-btn display:inline-flex, [hidden] özniteliğini eziyor. */
.gde-ekle__dugmeler .ay-btn[hidden] { display: none; }

.gde-ekle__yukle { position: relative; }
.gde-ekle__yukle:focus-within {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-color: var(--brand-line);
    color: var(--brand);
}

.gde-ekle__not {
    margin: 0;
    color: var(--ink-mute);
    font-size: .75rem;
    line-height: 1.45;
}

/* Yayınla: saat dilimi notu kendi satırında ("(Europe/Istanbul (+03:00))"
   etiketin ortasından bölünüyordu). */
.gde-yan .ay-label > span {
    display: block;
    margin-top: .1rem;
    font-weight: 400;
}

/* Seçili dosyalar ile ekleme alanı arası */
.gde-medya__liste { margin-bottom: .6rem; }

/* Hesap yok — sakin bilgi kutusu */
.gde-bos {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    padding: .7rem .8rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.gde-bos > .ay-ico {
    flex: 0 0 auto;
    margin-top: .2rem;
    color: var(--brand);
}
.gde-bos strong {
    display: block;
    color: var(--ink);
    font-weight: 650;
}

/* Platform uyumu — başlıktaki özet */
.gde-uyum__ozet {
    margin-inline-start: auto;
    padding: .1rem .55rem;
    border-radius: var(--r-pill);
    background: var(--st-bek-bg, #FFFAEB);
    color: var(--st-bek-ink, #B54708);
    font-size: .75rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gde-uyum__ozet.is-tam {
    background: var(--st-ok-bg, #ECFDF3);
    color: var(--st-ok-ink, #067647);
}

.gde-anahtar { margin-bottom: .6rem; }

/* Satır: [işaret] [ad ............ ✓]; sorunluda açıklama adın altında */
.gde-uyum__satir {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "isaret ad durum";
    column-gap: .6rem;
    row-gap: .05rem;
    padding: .35rem .4rem;
}
.gde-uyum__satir > :first-child { grid-area: isaret; }
.gde-uyum__ad    { grid-area: ad; }
.gde-uyum__durum { grid-area: durum; }

.gde-uyum__satir.is-sorun {
    grid-template-areas: "isaret ad" "isaret durum";
    grid-template-columns: auto minmax(0, 1fr);
}
.gde-uyum__satir.is-sorun .gde-uyum__durum {
    justify-self: start;
    font-weight: 500;
    text-align: start;
}

/* Uyumlu satırda yazı yalnızca ekran okuyucuya ("Uyumlu"). */
.gde-uyum__satir.is-ok .gde-uyum__durum > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Platform uyumu KİBİ (2026-09-27) — kenar çubuğundaki kart kalktı, içerik
   geri satırındaki düğmeyle açılan kipte (panel/gonderi.php).

   Geri satırının sağ ucu bir GRUP: Hesaplar (yalnızca hesap yokken) +
   Platform uyumu. .gdr__geri--eylemli'nin space-between'i tam iki çocuk
   bekliyor; grup bu sözleşmeyi koruyor. */
.gdr__geri_eylemler {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-inline-start: auto;
}

.gde-uyum-kip__kart { width: min(30rem, 100%); }

/* Özet rozeti başlığın sağında; kapatma düğmesiyle arasında ay-modal__ust'ün
   gap'i var. */
.gde-uyum-kip__h {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.gde-uyum-kip__dip { justify-content: flex-end; }

/* ==========================================================================
   § 24r-3 · MEDYA KÜTÜPHANESİ İYİLEŞTİRMESİ   —   2026-09-27
   KULLANICI: "medya sayfasını da iyileştir"

     · SÜZGEÇ (.mdk__suz)   tür sekmeleri + "Kullanılmayanlar" + arama +
                            sıralama. GET formu; JS'siz de çalışıyor.
     · KİMLİK (.mdk__bilgi) kartta ad · tür/boyut/ölçü · kaç gönderide.
                            Önceden kart yalnızca görseli gösteriyordu.
     · GÖNDERİ OLUŞTUR      seçilenler (ya da tek kart) yeni gönderiye
                            seçili gidiyor (panel/gonderi.php?medya=).
   ========================================================================== */

/* Beş eylem düğmesi (Göster · Gönderide kullan · Değiştir · İndir · Sil)
   11rem'lik karta sığmıyordu; taban 12.5rem ve şerit gerekirse kırılıyor. */
.mdk__izgara { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.mdk__eylem  { flex-wrap: wrap; }

/* --- TEK ARAÇ SATIRI  (sadeleştirme, aynı gün) ---------------------------
   Kullanıcı: "form çok kalabalık, sadeleştir". Başlık satırı + süzgeç satırı
   + seçim çubuğu üç şeritti; şimdi solda sekmeler, sağda ara · sırala ·
   ZIP · Görsel Ekle — hepsi 34 piksel, aynı hizada. */
.mdk__cubuk {
    --mdk-h: 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem .75rem;
}

.mdk__cubuk_sag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.mdk__suz {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.mdk__cubuk .ay-btn--sm,
.mdk__zip {
    height: var(--mdk-h);
    min-height: var(--mdk-h);
}
.mdk__zip { width: var(--mdk-h); }

.mdk__sekmeler {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.mdk__sekme {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 34px;
    padding: .3rem .8rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
}
.mdk__sekme:hover {
    border-color: var(--brand-line);
    color: var(--brand);
}
.mdk__sekme.is-acik {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.mdk__sekme_n {
    min-width: 1.25rem;
    padding: 0 .35rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-mute);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.mdk__sekme.is-acik .mdk__sekme_n {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* "Kullanılmayanlar" ayrı bir anahtar: tür sekmeleriyle birlikte çalışıyor. */
.mdk__sekme--bos { margin-inline-start: .35rem; }
.mdk__sekme--bos.is-acik {
    border-color: var(--st-bek-ink, #B54708);
    background: var(--st-bek-ink, #B54708);
}

/* Arama: büyüteç SOLDA, alanın içinde (tıklanabilir ama sekme sırasında
   değil — Enter zaten gönderiyor). */
.mdk__ara {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}
/* 9.5rem: 1024 px'lik ekranda sekmeler + ara + sırala + ZIP + Görsel Ekle
   tek satıra sığsın (12rem'de sağ grup alt satıra iniyordu, ölçüldü). */
.mdk__ara .ay-input {
    width: 9rem;
    max-width: 100%;
    padding-inline-start: 2.1rem;
    transition: width var(--t-base) var(--ease);
}
.mdk__ara .ay-input:focus { width: 12rem; }
@media (min-width: 1200px) {
    .mdk__ara .ay-input,
    .mdk__ara .ay-input:focus { width: 13rem; }
}
.mdk__ara_dgm {
    position: absolute;
    inset-inline-start: .2rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-sm);
    color: var(--ink-mute);
    cursor: pointer;
}
.mdk__ara_dgm:hover,
.mdk__ara_dgm:focus-visible { color: var(--brand); }

/* Arama ve sıralama sekmelerle aynı satırda: yükseklik panelin kontrol
   ölçüsüne iniyor (.ay-input'un büyük hâli satırı şişiriyordu, ölçüldü). */
.mdk__suz .ay-input {
    height: var(--mdk-h);
    min-height: var(--mdk-h);
    padding-block: 0;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
}

.mdk__sira { margin: 0; }
.mdk__sira .ay-input {
    width: auto;
    max-width: 8.5rem;
    padding-inline-end: 2rem;
    cursor: pointer;
}

.mdk__suz_bos {
    display: grid;
    justify-items: center;
    gap: .6rem;
    margin: 1rem 0 0;
    padding: 2rem 1rem;
    border: 1px dashed var(--hairline);
    border-radius: var(--r-md);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    text-align: center;
}
.mdk__suz_bos p { margin: 0; }

/* --- Kart kimliği -------------------------------------------------------- */
.mdk__bilgi {
    display: grid;
    gap: .1rem;
    min-width: 0;
    padding: .55rem .65rem .5rem;
    border-top: 1px solid var(--hairline);
}

.mdk__ad {
    overflow: hidden;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdk__meta {
    overflow: hidden;
    color: var(--ink-mute);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mdk__kul {
    justify-self: start;
    margin-top: .25rem;
    padding: .05rem .45rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-mute);
    font-size: .7rem;
    font-weight: 600;
}
.mdk__kul--var {
    background: var(--st-ok-bg, #ECFDF3);
    color: var(--st-ok-ink, #067647);
}

/* --- Araç çubuğu: "Gönderi oluştur" ------------------------------------ */
.mdk__gonderiye:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* --- SEÇİM ÇUBUĞU: sessiz başlıyor ---------------------------------------
   Boşken çerçevesiz, zeminsiz, yapışık değil; yalnızca "Tümünü seç".
   Seçim olunca (.mdk--secim) taban kuralın vurgusu (§ 24r) geri geliyor ve
   eylemler beliriyor. .mdk--js koşulu: JS yoksa eylemler hep görünür. */
.mdk__arac {
    position: static;
    margin: .85rem 0 .75rem;
    padding: 0;
    border-color: transparent;
    background: transparent;
}
.mdk--secim .mdk__arac {
    position: sticky;
    padding: .45rem .6rem .45rem .8rem;
}
.mdk__secim_eylem {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.mdk--js:not(.mdk--secim) .mdk__secim_eylem { display: none; }

/* Satır kırılınca sağ grup sağda kalsın (1024 px'te sekmelerin altına iniyor). */
.mdk__cubuk_sag { margin-inline-start: auto; }

/* Telefon: iki sıra — [ara ··· sırala] ve [ZIP] [Görsel Ekle ········].
   Tek sıraya sıkıştırıldığında arama kutusu sıfıra iniyordu (ölçüldü). */
@media (max-width: 640px) {
    .mdk__cubuk_sag {
        width: 100%;
        margin-inline-start: 0;
    }
    .mdk__suz { flex: 1 1 100%; min-width: 0; }
    .mdk__ara { flex: 1 1 auto; min-width: 0; }
    .mdk__ara .ay-input { width: 100%; }
    .mdk__sira { flex: 0 0 auto; }
    .mdk__sira .ay-input { max-width: 9.5rem; }
    .mdk__ekle { flex: 1 1 auto; width: auto; }
    .mdk__sekmeler {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .mdk__sekme { flex: 0 0 auto; }
    .mdk__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   § 24r-4 · MEDYA KARTI TEK PARÇA   —   2026-09-27
   KULLANICI: "kart ayrı bir şekilde olmasın, tasarımla uyumlu, içinde olsun;
   ek ek bir kart gibi olmasın"

   Kart üç ayrı şeritten (tam taşan görsel · çizgili kimlik · çizgili eylem)
   ve her biri çerçeveli beş düğmeden oluşuyordu; yamanmış parçalar gibi
   duruyordu. Şimdi:
     · görsel kartın İÇİNDE, kenardan boşluklu ve yuvarlatılmış bir kutuda;
       görselin kendi dolgusu kalktı (opak görsel satranç çerçevesi içinde
       ikinci bir kart gibi görünmüyor);
     · kimlik ve eylem arasındaki ayırıcı çizgiler kalktı;
     · eylem şeridi kartın dibine yaslı (margin-top: auto) — "1 gönderide"
       etiketi olan kartla olmayanın düğmeleri aynı hizada;
     · kart içindeki ikon düğmeleri çerçevesiz; çerçeve/zemin yalnızca
       üzerine gelince (dil yine .pnl__eylem, § 24b-2).
   ========================================================================== */
.mdk__sahne {
    margin: .5rem .5rem 0;
    overflow: hidden;
    border-radius: var(--r-sm);
}

.mdk__gorsel { padding: 0; }

.mdk__bilgi {
    padding: .6rem .7rem .15rem;
    border-top: 0;
}

.mdk__eylem {
    margin-top: auto;
    padding: .3rem .45rem .45rem;
    border-top: 0;
}

.mdk__eylem .pnl__eylem {
    border-color: transparent;
    background: transparent;
}
/* Yukarıdaki kural taban :hover ile aynı özgüllükte ve sonra geliyor;
   üzerine gelme görünümü burada yeniden veriliyor. */
.mdk__eylem .pnl__eylem:hover,
.mdk__eylem .pnl__eylem:focus-visible {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}
.mdk__eylem .pnl__eylem--tehlike:hover,
.mdk__eylem .pnl__eylem--tehlike:focus-visible {
    border-color: var(--st-hata-line);
    background: var(--st-hata-bg);
    color: var(--st-hata-ink);
}

@media (max-width: 640px) {
    .mdk__sahne { margin: .4rem .4rem 0; }
    .mdk__bilgi { padding: .5rem .55rem .1rem; }
    .mdk__eylem {
        gap: .15rem;
        padding: .2rem .3rem .35rem;
    }
}

/* ==========================================================================
   § 24r-5 · MEDYA — DÜZEN · KULLANIŞ · MOBİL   —   2026-09-27
   KULLANICI: "resimdeki gibi olsun (daha da düzenli, kullanışlı ve mobil
   uyumlu olsun)"

   Yerleşim ekran görüntüsündeki gibi kalıyor (sekmeler · ara · sırala ·
   ZIP · Görsel Ekle / Tümünü seç / kart ızgarası). Değişenler:

     · SEÇİM KUTUSU  gri yarı saydam kare açık görsellerde "devre dışı"
                     gibi duruyordu. Artık gerçek bir onay kutusu gibi:
                     beyaz zemin + ince çerçeve, işaretlide marka dolgusu.
     · SAYI          "Tümünü seç" satırının sağında toplam ("3 dosya");
                     seçim olunca yerini eylemlere bırakıyor.
     · EYLEM ŞERİDİ  hiç kırılmıyor: düğmeler dar kartta 24 piksele kadar
                     küçülüyor (WCAG 2.5.8 alt sınırı). Eskiden dar kartta
                     çöp kutusu tek başına ikinci satıra düşüyordu.
     · DIŞ KATMAN    kütüphanenin beyaz kartı kalktı (her ekran boyunda);
                     medya kartları doğrudan sayfa zemininde.
     · TELEFON       araç satırı [ara · sırala · ZIP] + tam genişlik
                     "Görsel Ekle"; seçim eylemleri ekranın dibine yapışan
                     çubukta.
   ========================================================================== */

/* --- Beyaz dış katman YOK ----------------------------------------------
   KULLANICI (aynı gün): "kartları, beyaz bir kart içinde … beyaz katmanı
   kaldır. direkt ekranda olsun."
   .mdk__kutuphane bir .gdr__bolum ve o sınıf panelde beyaz kart çiziyor
   (§ 24h). Burada kart dili geri alınıyor: araç satırı ve medya kartları
   doğrudan sayfa zemininde, kartlar tek katman. Bu kural dosyanın sonunda
   ve aynı özgüllükte — hem § 24h'yi hem § 24r · 7'deki telefon dolgusunu
   eziyor. Önünde bir panel/uyarı varsa (JS'siz onay, kota uyarısı) araya
   boşluk kalıyor. */
.mdk__kutuphane {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.mdk > * + .mdk__kutuphane { margin-top: 1rem; }

/* --- Seçim kutusu -------------------------------------------------------- */
.mdk__sec_isaret {
    width: 22px;
    height: 22px;
    border: 1.5px solid rgba(2, 12, 33, .28);
    border-radius: 6px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 1px 3px rgba(2, 12, 33, .18);
    color: transparent;
    font-size: 11px;
}
.mdk__sec:hover .mdk__sec_isaret {
    border-color: var(--brand);
    background: #fff;
}
.mdk__sec_kutu:checked + .mdk__sec_isaret {
    border-color: var(--brand);
    background: var(--brand);
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(2, 12, 33, .35);
    color: #fff;
    font-size: 12px;
    transform: none;
}

/* "Tümünü seç" kutusu kart kutularıyla aynı ölçüde. */
.mdk__tumu_kutu {
    width: 18px;
    height: 18px;
}

/* --- Tümünü seç satırı: sağda toplam ------------------------------------- */
.mdk__adet--arac { white-space: nowrap; }
.mdk--secim .mdk__adet--arac { display: none; }

/* Masaüstünde "Seçimi kaldır" metinli; ikon yalnızca telefonda. */
.mdk__temizle .ay-ico { display: none; }

/* --- Kart ---------------------------------------------------------------- */
/* Önizlemeye gelince görsel hafifçe büyüyor: tıklanınca açılacağını
   söylüyor (imleç zaten zoom-in). Seçili kartın içe çekilmesi önde. */
@media (hover: hover) {
    .mdk__on:hover .mdk__gorsel { transform: scale(1.03); }
    .mdk__kart--secili .mdk__on:hover .mdk__gorsel { transform: scale(.9); }
}

/* Eylem şeridi TEK SATIR: düğmeler küçülüyor, kırılmıyor. */
.mdk__eylem {
    flex-wrap: nowrap;
    min-width: 0;
}
.mdk__eylem .pnl__eylem {
    flex: 0 1 32px;
    min-width: 24px;
    width: auto;
    height: 30px;
}
.mdk__eylem_bosluk { min-width: 0; }

/* --- Telefonda seçim çubuğu ekranın dibinde ------------------------------
   ≤900px: yan menü yok, üstte sitenin header'ı var ve yapışık üst çubuk
   kapalı (§ 24r · 7 DAR EKRAN). Seçim olunca eylemler parmağın ulaştığı yere, alta
   iniyor. z-index header'ın (1040) ve kiplerin altında: onay diyalogu
   çubuğun üstünde açılıyor. .mdk--secim yalnızca JS'te kuruluyor, yani
   JS'siz yolda eylemler akışta kalıyor. */
@media (max-width: 900px) {
    .mdk--secim .mdk__secim_eylem {
        position: fixed;
        inset-inline: .75rem;
        inset-block-end: calc(.75rem + env(safe-area-inset-bottom, 0px));
        z-index: 1020;
        display: flex;
        flex-wrap: nowrap;
        gap: .5rem;
        padding: .5rem;
        border: 1px solid var(--brand-line);
        border-radius: var(--r-lg);
        background: var(--surface);
        box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .08);
        animation: mdk-cubuk-gir var(--t-base) var(--ease-out);
    }
    .mdk--secim .mdk__secim_eylem .ay-btn {
        flex: 1 1 0;
        min-width: 0;
        height: 40px;
        min-height: 40px;
        padding-inline: .6rem;
        justify-content: center;
    }
    .mdk--secim .mdk__secim_eylem .ay-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* "Seçimi kaldır" kare ikon; ad ekran okuyucuda ve title'da. */
    .mdk--secim .mdk__secim_eylem .mdk__temizle {
        flex: 0 0 40px;
        width: 40px;
        padding: 0;
    }
    .mdk--secim .mdk__temizle .ay-ico { display: inline-block; }
    .mdk--secim .mdk__temizle .mdk__temizle_yazi {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Çubuk son satırın eylemlerini örtmesin. */
    .mdk--secim .mdk__secim_form { padding-bottom: 4.5rem; }

    /* Tablet: 12.5rem tabanı 700 pikselde iki dev kolon veriyordu. Eylem
       şeridi küçülerek sığdığı için taban burada daralabiliyor. */
    .mdk__izgara { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
}

/* Dar telefonda çubuk düğmelerinin ikonu düşüyor: "Gönderi oluştur" ve
   "Seçilenleri sil" 375 pikselde kırpılmadan sığsın. */
@media (max-width: 420px) {
    .mdk--secim .mdk__secim_eylem .mdk__gonderiye .ay-ico,
    .mdk--secim .mdk__secim_eylem .mdk__sil_toplu .ay-ico { display: none; }
}

@keyframes mdk-cubuk-gir {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: none; }
}

/* --- Telefon: araç satırı ve bölüm -------------------------------------- */
@media (max-width: 640px) {
    .mdk__cubuk { gap: .6rem; }

    /* Sekmeler tek satır, yatay kaydırılıyor; kaydırma çubuğu gizli. */
    .mdk__sekmeler {
        flex: 1 1 100%;
        min-width: 0;
        padding-block: 2px;
        scrollbar-width: none;
    }
    .mdk__sekmeler::-webkit-scrollbar { display: none; }
    .mdk__sekme--bos { margin-inline-start: 0; }

    /* [ara ········ sırala ZIP]  /  [ Görsel Ekle ] */
    .mdk__cubuk_sag { gap: .5rem; }
    .mdk__suz { flex: 1 1 0; min-width: 0; }
    .mdk__sira .ay-input { max-width: 8rem; }
    .mdk__zip { flex: 0 0 var(--mdk-h); }
    .mdk__ekle {
        flex: 1 1 100%;
        justify-content: center;
        height: 40px;
        min-height: 40px;
    }

    .mdk__arac { margin: .75rem 0 .6rem; }

    /* Telefonda iki kolon sabit (≤900 tabanını eziyor). */
    .mdk__izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }

    .mdk__eylem {
        gap: .1rem;
        padding: .2rem .3rem .35rem;
    }
    .mdk__eylem .pnl__eylem { height: 30px; }
}

/* Eski kural (§ 24r · 7 DAR EKRAN) 400px altında "İndir"i gizliyordu; şerit artık
   küçülerek sığıyor. Yalnızca çok dar ekranda (<340px) gizli kalıyor. */
@media (max-width: 400px) {
    .mdk__eylem [download] { display: inline-flex; }
}
@media (max-width: 339px) {
    .mdk__eylem [download] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mdk__on:hover .mdk__gorsel { transform: none; }
    .mdk--secim .mdk__secim_eylem { animation: none; }
}

/* ==========================================================================
   § 24h-ajb · AGENT BİLGİSİ EKLE / DÜZENLE  (.ajb)  —  panel/agent-bilgi.php
   2026-09-27 · kullanıcı: "sadeleştir, derli toplu olsun, %100 mobil uyumlu"

   Form DÜZ (.gdr__form--duz): kart dili üç gruptan geliyor (tür · içerik ·
   ayarlar), en dıştaki beyaz kutu yok — gonderi.php ile aynı karar (§ 24f).

   :has() İKİ YERDE, İKİSİ DE İLERLEMELİ İYİLEŞTİRME:
     · yalnızca seçili türün açıklaması görünüyor
     · soru-cevap türünde etiketler "Soru" / "Cevap" oluyor
   @supports selector(:has(*)) desteklemeyen tarayıcıda dört açıklama birden
   ve genel etiketler görünüyor, yani eski ekranın davranışı.
   ========================================================================== */

/* Grup başlığı kuralları (.ajb__grup_h) 2026-09-27'de kalktı: Tür ve
   Ayarlar kartları silindi, kalan İçerik kartının başlığı yok.

   fieldset varsayılan min-width: min-content — uzun bir açıklama telefonda
   grubu ekrandan taşırıyordu. */
.ajb__grup { min-width: 0; }

/* --- 1 · İlk satır: Başlık 6 · Tür 3 · Dil 3 ---------------------------
   2026-09-27 · kullanıcı: "tür kartını sil, tür ve dil selectbox'larını
   başlık inputunun sağına ekle — başlık col-md-6, tür col-md-3, dil
   col-md-3". Ayrı tür kartı ve radyo kutuları kalktı.

   Bootstrap .row/.col KULLANILMADI (panelde negatif margin + gutter kart
   boşluklarını çiftliyor, § 24o); aynı oran 12 kolonluk ızgarayla, aynı
   md eşiğinde (768px) veriliyor. Altında üç alan alt alta — .col-md-*'nin
   md altındaki tam genişlik hâli. */
.ajb__ust {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .85rem 1rem;
    align-items: start;
}
@media (min-width: 768px) {
    .ajb__ust { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); }
}
/* .gdr__grup'un `.ay-field + .ay-field` üst boşluğu ızgarada gap'le
   çiftlenmesin. Aynı özgüllük, dosyada sonra geldiği için bu kazanıyor. */
.ajb .ajb__ust > .ay-field { margin: 0; }

/* Açıklama ve dil notu satırın altında; içerik alanı onlardan sonra. */
.ajb__dil_not { margin: .5rem 0 0; }
.ajb__dil_not + .ay-field { margin-top: .85rem; }

/* Açıklama listesi. .ajn__tur_yardim'ın madde işaretli düzeni burada
   sıfırlanıyor: seçim kutularının altında sade bir not olarak duruyor. */
.ajb__yardim {
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.ajb__yardim li { margin: 0 0 .25rem; }
.ajb__yardim li:last-child { margin-bottom: 0; }

@supports selector(:has(*)) {
    /* Yalnızca seçili türün açıklaması. Tür listesinin n'inci seçeneği ↔
       n'inci madde: PHP ikisini aynı döngüden basıyor. `option:checked`
       <select>'te seçili seçeneği yakalıyor. Altı tür için yazıldı —
       bugün dört var; yedinci bir tür eklenirse açıklaması gizli kalmasın
       diye buraya bir satır eklenmeli. */
    .ajb__yardim li {
        display: none;
        margin: 0;
        padding: .6rem .8rem;
        border-radius: var(--r-md);
        background: var(--surface-2);
    }
    .ajb__yardim li strong { display: none; }
    /* Önek ("Bilgi:") gizlenince açıklama küçük harfle başlıyordu — çeviri
       metinleri önekin devamı olarak yazılmış. İlk harf büyütülüyor; <html
       lang> doğru olduğu için Türkçede "i" → "İ" oluyor. */
    .ajb__yardim li::first-letter { text-transform: uppercase; }

    .ajb:has(#tur > option:nth-child(1):checked) .ajb__yardim li:nth-child(1),
    .ajb:has(#tur > option:nth-child(2):checked) .ajb__yardim li:nth-child(2),
    .ajb:has(#tur > option:nth-child(3):checked) .ajb__yardim li:nth-child(3),
    .ajb:has(#tur > option:nth-child(4):checked) .ajb__yardim li:nth-child(4),
    .ajb:has(#tur > option:nth-child(5):checked) .ajb__yardim li:nth-child(5),
    .ajb:has(#tur > option:nth-child(6):checked) .ajb__yardim li:nth-child(6) {
        display: block;
    }
}

/* --- 2 · İçerik ------------------------------------------------------- */

/* Etiket adı .ay-label'ın İÇİNDE bir <span> ve theme.css'teki
   `.ay-label span` kuralı onu dipnot gibi küçültüyordu. Ad etiketin kendi
   ölçüsüne dönüyor; parantezli not (.ajb__not_sss) küçük kalıyor. */
.ajb .ay-label .ajb__etk {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
.ajb .ay-label .ajb__etk--sss { display: none; }

@supports selector(:has(*)) {
    .ajb:has(#tur > option[value="sss"]:checked) .ay-label .ajb__etk--genel { display: none; }
    .ajb:has(#tur > option[value="sss"]:checked) .ay-label .ajb__etk--sss   { display: inline; }
    /* Etiket zaten "Soru" diyorsa "(soru-cevap türünde soruyu buraya
       yazın)" tekrar. */
    .ajb .ay-label .ajb__not_sss { display: none; }
}

.ajb__metin { min-height: 10rem; }

/* Maliyet notu solda, sayaç sağda; dar ekranda sayaç notun altına iniyor
   (flex-wrap). */
.ajb__sayac_satir { align-items: flex-start; }
.ajb__sayac_satir > .ajn__ipucu {
    flex: 1 1 18rem;
    margin: 0;
}
.ajb__sayac_satir > .gdr__sayac {
    flex: 0 0 auto;
    margin-inline-start: auto;
    white-space: nowrap;
}

/* Alanlar arası boşluk: grup bir fieldset değil ama .gdr__grup'un
   `.ay-field + .ay-field` kuralı zaten geçerli (.85rem). */

/* --- Aç/kapa anahtarı (agent.php) --------------------------------------
   agent-bilgi.php'nin Ayarlar kartı 2026-09-27'de kalktı (kullanıcı:
   "Ayarlar kartını da sil"); .ajb__sira kuralı da onunla gitti.

   Açık/kapalı anahtarı: metin solda, anahtar satırın ucunda (ayar
   uygulamalarındaki alışılmış düzen). Satırın tamamı dokunulabilir.

   Artık yalnızca agent.php kullanıyor (.ajn__sw*). agent-bilgi.php'deki
   .ajb__anahtar* eşi 2026-09-27'de kalktı (kullanıcı: "aktif olacak zaten
   direkt"); kurallar yerinde kaldı çünkü agent.php'nin anahtarı bunlar. */
.ajn__sw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem .9rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.ajn__sw_metin {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    cursor: pointer;
}
.ajn__sw_metin strong {
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.ajn__sw_metin .ajn__ipucu { margin: 0; }

.ajn__sw_girdi {
    -webkit-appearance: none;
            appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 28px;
    margin: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: #C5CBD6;
    cursor: pointer;
    transition: background-color var(--t-base) var(--ease);
}
.ajn__sw_girdi::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(2, 12, 33, .25);
    transition: transform var(--t-base) var(--ease);
}
.ajn__sw_girdi:checked { background: var(--brand); }
.ajn__sw_girdi:checked::after { transform: translateX(18px); }
[dir="rtl"] .ajn__sw_girdi:checked::after { transform: translateX(-18px); }
.ajn__sw_girdi:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}


/* --- Düğme satırı: AKIŞTA (yapışık DEĞİL) ------------------------------
   KULLANICI KARARI (2026-09-27): ekran kayarken sabit durmasın, formun
   altında dursun — .ajn__kaydet (§ 24h) ile aynı karar. Sticky, üst gölge
   ve iOS alt güvenli alan payı kalktı (satır artık ekranın dibinde değil).
   Form düz olduğu için satır kendi kartını taşıyor. */
.ajb__dugmeler {
    margin: 0;
    padding: .75rem 1.35rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}
.ajb__kaydet { min-width: 8.5rem; }

/* Silme onayı şeridi formdan ayrı dursun. */
.ajb__sil_onay { margin: 0 0 1rem; }

/* --- Telefon: ≤640px -------------------------------------------------- */
@media (max-width: 640px) {
    /* iOS Safari 16px altındaki alanlara odaklanınca sayfayı yakınlaştırıyor
       ve kullanıcı her alandan sonra geri uzaklaştırmak zorunda kalıyordu. */
    .ajb .ay-input { font-size: 16px; }

    .ajb__metin { min-height: 9rem; }

    /* Kaydet satırı ekranın kenarlarına kadar bir BANT: negatif margin
       .pnl__icerik'in ≤900px yan dolgusuyla (1rem, § 24c) birebir aynı —
       fazlası yatay kaydırma açardı (.ayr__nav'daki kalıp). Kaydet esnek,
       Vazgeç ve Sil doğal boyda — üçü tek satırda kalıyor. */
    .ajb__dugmeler {
        flex-wrap: nowrap;
        gap: .5rem;
        margin-inline: -1rem;
        padding: .6rem .9rem;
        border-inline: 0;
        border-radius: 0;
    }
    .ajb__dugmeler .ajb__kaydet {
        flex: 1 1 auto;
        min-width: 0;
        height: var(--control-h-lg);
    }
    .ajb__dugmeler > .ay-btn--ghost {
        flex: 0 0 auto;
        height: var(--control-h-lg);
    }
    .ajb__dugmeler .gdr__sil {
        flex: 0 0 auto;
        width: var(--control-h-lg);
        height: var(--control-h-lg);
    }

    .ajb__sil_onay .hsp__onay { width: 100%; }
}

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

/* ==========================================================================
   § 24h-ajn · AGENT EKRANI DÜZENİ  —  panel/agent.php  (2026-09-27)
   Kullanıcı: "düzenli, derli toplu, kurumsal, profesyonel ve kullanışlı"

   Bu blok § 24h'nin ÜSTÜNE yazılıyor, onun yerine değil: durum kartı,
   özet, tür rozeti, önizleme, yapışık kaydet satırı oradan geliyor. Burada
   yalnızca yeni yerleşim var:

     .ajn__giris         düz giriş paragrafı (şerit değil)
     .ajn__satir         AYAR SATIRI — solda başlık + açıklama, sağda
                         kontroller; @container ile iki kolon
     .ajn__sw            aç/kapa anahtarı (kurallar § 24h-ajb ile ortak)
     .ajn__kayit         eğitim listesinin kart satırı
   ========================================================================== */

/* --- Giriş paragrafı ---------------------------------------------------- */
.ajn__giris {
    max-width: 62ch;
    margin: 0 0 1rem;
    font-size: var(--fs-base);
    line-height: 1.55;
}

/* --- Durum kartı: ton ve boşluk ------------------------------------------ */
.ajn__durum { margin-top: 0; }
.ajn__durum_h { letter-spacing: -.01em; }

/* --- Bölüm başlığı: başlık + açıklama solda, eylem sağda ---------------- */
.ajn__bolum_bas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
}
.ajn__bolum_metin {
    display: grid;
    gap: .3rem;
    flex: 1 1 22rem;
    min-width: 0;
}
.ajn__bolum_not {
    max-width: 62ch;
    margin: 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.ajn__bolum_bas .ajn__bilgi_sag { flex: 0 0 auto; }

/* ==========================================================================
   AYARLAR — AYAR SATIRLARI
   ========================================================================== */

/* KAPSAYICI SORGUSU: iki kolona geçişi pencere değil KARTIN genişliği
   belirliyor. Yan menü açıkken 1100 piksellik pencerede kart 800 piksel;
   pencere sorgusu burada yanlış kırılırdı. */
.ajn__ayarlar {
    container-type: inline-size;
    container-name: ajn-ayar;
}
.ajn__ayarlar > .hsp__h2 { margin-bottom: .25rem; }

/* Form ızgarasının 1.1rem boşluğu satırlar arasında kalmasın: satırları
   çizgi + dolgu ayırıyor. */
.ajn__form { gap: 0; }

.ajn__satir {
    display: grid;
    gap: .85rem;
    min-width: 0;
    padding: 1.35rem 0;
    border-top: 1px solid var(--hairline);
}
.ajn__satir:first-of-type {
    border-top: 0;
    padding-top: .75rem;
}

.ajn__satir_bas {
    display: grid;
    align-content: start;
    gap: .3rem;
    min-width: 0;
}
.ajn__satir_h {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 650;
    letter-spacing: -.01em;
    line-height: 1.35;
}
.ajn__satir_not {
    margin: 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

/* Kontroller: okunabilir bir üst genişlik. 900 piksellik bir <select>
   üç seçenek için abartılı (§ 24h'deki ölçüm). */
.ajn__satir_ic {
    display: grid;
    gap: 1rem;
    align-content: start;
    min-width: 0;
    max-width: 44rem;
}
.ajn__satir_ic > .ay-field,
.ajn__satir_ic > .ajn__ikili,
.ajn__satir_ic > .ajn__saat_ikili { margin: 0; }

/* § 24h'deki alan notu kendi üst boşluğunu taşıyor; grid gap'i zaten var. */
.ajn__alan_not { margin-top: -.5rem; }

@container ajn-ayar (min-width: 44rem) {
    .ajn__satir {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        gap: 2.5rem;
    }
    .ajn__satir_bas { padding-top: .1rem; }
}

/* İkili ızgara artık KARTIN genişliğine bakıyor (eskiden ≥900px pencere).
   Kart dar kalınca iki <select> yan yana okunmuyordu. */
.ajn__satir .ajn__ikili { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@container ajn-ayar (min-width: 36rem) {
    .ajn__satir .ajn__ikili {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.25rem;
    }
}

/* Saat aralığı: iki saat alanı yan yana, geniş satıra yayılmadan. */
.ajn__satir .ajn__saat_ikili {
    max-width: 24rem;
    gap: .75rem 1rem;
}

/* Günlük sınır sayısı dar; ipucu uyarı tonunda ise (0 = sınırsız) renk
   değişiyor — metin de zaten "önerilmez" diyor. */
.ajn__satir .ajn__sayi { max-width: 9rem; }
.ajn__ipucu--uyari { color: var(--st-bek-ink); }

/* Anahtar satırı: birincil ("Agent açık") hafif marka zemininde, diğerleri
   nötr. Çıpa hedefi olduğu için scroll payı üst şeridin altında. */
.ajn__sw--birincil {
    border-color: var(--brand-line);
    background: var(--brand-soft);
}
#ajn-anahtar { scroll-margin-top: calc(var(--pnl-ust-h, 64px) + 1rem); }

/* Yorum uyarısı formun içinde bir not: şerit ölçüsünde değil. */
.ajn__yorum_uyari {
    padding: .6rem .8rem;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

/* Otonom hazırlık kutusu: grid içinde tam genişlik, düğme ikonlu. */
.ajn__otonom { margin: 0; }
.ajn__otonom .ay-btn { display: inline-flex; align-items: center; gap: .4rem; }
.ajn__otonom .ay-btn .pnl__ikon { font-size: 12px; }

/* Gizlilik onayı: ayrı bir beyan olarak çerçeveli. */
.ajn__onay {
    padding: .75rem .9rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
}
.ajn__onay label { display: grid; gap: .2rem; }
.ajn__onay label .ajn__ipucu { margin: 0; }
/* Onay verildi damgası: onay tonunda, ikonlu. .ajn__ipucu'dan (§ 24h) sonra
   tanımlandığı için aynı özgüllükte onu eziyor. */
.ajn__onay .ajn__onay_tarih {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--st-ok-ink);
}
.ajn__onay_tarih .pnl__ikon { font-size: 12px; }
.ajn__saklama { margin: 0; max-width: none; }

/* --- YALNIZCA İLGİLİ OLAN GÖRÜNSÜN (:has) --------------------------------
   Desteklemeyen tarayıcıda üç blok da her zaman görünüyor — eski ekranın
   davranışı. Gizlenen alan gönderilmeye devam ediyor (display:none form
   verisinden çıkarmaz), kayıtlı değer kaybolmuyor. */
@supports selector(:has(*)) {
    .ajn__form .ajn__otonom,
    .ajn__form .ajn__yorum_uyari,
    .ajn__form .ajn__disi_mesaj { display: none; }

    .ajn__form:has(#kip option[value="otonom"]:checked) .ajn__otonom,
    .ajn__form:has(#yorum_kip option[value="otonom"]:checked) .ajn__otonom { display: grid; }

    .ajn__form:has(#yorum_kip option:not([value="kapali"]):checked) .ajn__yorum_uyari { display: flex; }

    .ajn__form:has(#saat_disi option[value="otomatik_mesaj"]:checked) .ajn__disi_mesaj { display: flex; }
}

/* ==========================================================================
   EĞİTİM BİLGİLERİ — KART SATIRLARI
   ========================================================================== */
.ajn__kayitlar {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden;
}

.ajn__kayit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem 1.25rem;
    padding: .95rem 1.1rem;
    background: var(--surface);
}
.ajn__kayit + .ajn__kayit { border-top: 1px solid var(--hairline); }

@media (hover: hover) and (pointer: fine) {
    .ajn__kayit:hover { background: var(--surface-2); }
}

.ajn__kayit_govde {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.ajn__kayit_etiket {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-bottom: .1rem;
}
/* Rozetler satırın içinde: § 24h'deki sabit 5.5rem genişlik burada
   gereksiz (hizalanacak bir sütun yok). */
.ajn__kayit_etiket .ajn__tur { min-width: 0; }
.ajn__kayit_etiket .hsp__etiket {
    padding: .1rem .5rem;
    font-size: .72rem;
    font-weight: 600;
}

.ajn__kayit_ad {
    color: var(--ink);
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.ajn__kayit_ad:hover { color: var(--brand); text-decoration: underline; }
.ajn__kayit_ad:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Özet en fazla iki satır: uzun kayıtlar listeyi şişirmesin. */
.ajn__kayit_ozet {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    line-height: 1.5;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.ajn__kayit_eylem {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.ajn__kayit_eylem form { margin: 0; }
.ajn__cevir { white-space: nowrap; }

/* Pasif kayıt soluk ama okunur: agent onu kullanmıyor. */
.ajn__kayit--pasif .ajn__kayit_ad,
.ajn__kayit--pasif .ajn__kayit_ozet { color: var(--ink-mute); }
.ajn__kayit--pasif .ajn__tur { opacity: .7; }

/* ==========================================================================
   TELEFON  ≤640px
   ========================================================================== */
@media (max-width: 640px) {
    .ajn__giris { font-size: var(--fs-sm); }

    /* iOS 16px altındaki alana odaklanınca sayfayı yakınlaştırıyor. */
    .ajn__form .ay-input { font-size: 16px; }

    /* Kart dolgusu telefonda daralıyor; kaydet bandının negatif margin'i
       dolguyla BİREBİR eşleşmeli (§ 24h .ajn__kaydet). */
    .ajn__ayarlar { padding: 1rem; }
    .ajn__ayarlar .ajn__kaydet {
        margin-inline: -1rem;
        margin-bottom: -1rem;
        padding: .75rem 1rem;
    }

    .ajn__satir { padding: 1.1rem 0; gap: .75rem; }
    .ajn__satir:first-of-type { padding-top: .5rem; }
    .ajn__satir .ajn__sayi { max-width: 100%; }

    /* § 24h telefonda saat alanlarını alt alta diziyordu; iki kısa saat
       alanı 360 piksele yan yana sığıyor ve aralık tek bakışta okunuyor. */
    .ajn__satir .ajn__saat_ikili {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    /* Özet: kutucuklar yerine etiket–değer listesi. İki kolonlu kutucuklar
       390 pikselde uzun etiketleri üç satıra kırıyordu. */
    .ajn__ozet {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-top: .35rem;
    }
    /* SARAN FLEX SATIR, ızgara değil. İki kolonlu ızgarada uzun değer
       ("Kapalı — yorumlara dokunmasın") etiketi harf harf kırıyordu
       ("Yorumlard / a"), eşit kolonlarda da "Günlük otomatik cevap sınırı"
       üç satıra iniyordu. Flex-wrap satırı içeriğin doğal genişliğiyle
       ölçüyor: ikisi sığıyorsa aynı satırda, sığmıyorsa değer alt satıra
       iniyor ve sağa yaslanıyor — etiket hiçbir zaman kırılmıyor. */
    .ajn__ozet_hucre {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: .75rem;
        padding: .55rem 0;
        border: 0;
        border-bottom: 1px solid var(--hairline);
        border-radius: 0;
        background: transparent;
    }
    .ajn__ozet_hucre:last-child { border-bottom: 0; padding-bottom: 0; }
    .ajn__ozet_hucre--dikkat { background: transparent; }
    .ajn__ozet_hucre { row-gap: .15rem; }
    .ajn__ozet_deger {
        margin-inline-start: auto;
        text-align: end;
    }

    /* Bölüm başlığı: eylem başlığın altına, sayaç solda düğme sağda. */
    .ajn__bolum_bas .ajn__bilgi_sag {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    /* Kayıt kartı: eylemler gövdenin ALTINDA tek sıra; aç/kapa esnek,
       ikonlar doğal boyda. Dokunma hedefleri 40px. */
    .ajn__kayit {
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
        padding: .9rem;
    }
    .ajn__kayit_eylem {
        padding-top: .7rem;
        border-top: 1px dashed var(--hairline);
    }
    .ajn__kayit_eylem form { flex: 1 1 auto; }
    .ajn__kayit_eylem .ajn__cevir {
        width: 100%;
        height: 40px;
    }
    .ajn__kayit_eylem .pnl__eylem {
        width: 40px;
        height: 40px;
    }
}

/* ==========================================================================
   § 24h-lst · AGENT — ÜST SATIR + EĞİTİM BİLGİLERİ TABLOSU  (2026-09-27)
   panel/agent.php · panel/agent-ayar.php

   KULLANICI KARARI: "agent ayarlarını başka bir sayfaya taşı. sağ üst
   köşede Agent Ayar butonu yap … agent.php sayfasında tanımlanmış Eğitim
   bilgileri listesi olsun. kullanışlı ve profesyonel olsun. sayfalama da
   olsun. derli toplu düzenli ve kurumsal olsun."

     .ajn__ust         başlık + tek cümle solda, "Agent ayarları" sağ üstte
     .ajn__panel       arama + tür/durum sekmeleri (.gdr__panel üstüne)
     .ajn__tablo       kayıt tablosu; ≤760px'te satır karta dönüyor
     .ajn__tablo_alt   kapsam ("1–10 / 34 kayıt") + numaralı sayfalama
   ========================================================================== */

/* --- SADELEŞTİRME (2026-09-28) ---------------------------------------------
   KULLANICI KARARI: "Eğitim bilgileri kartı olan beyaz arka planlı kart
   ayrı bir katman gibi olmasın … iç içe kart yapma."

   Bölüm (.ajn__liste) artık KART DEĞİL: zemini, çerçevesi, dolgusu yok.
   Eskiden beyaz bölüm kartı → gri araç kutusu → çerçeveli tablo üç katman
   üst üste duruyordu. Şimdi sayfanın zemininde iki KARDEŞ kart var: araç
   kartı (.gdr__panel, gonderiler.php ile ortak) ve tablo kartı
   (.ajn__tablo_kap). */
.ajn__liste {
    margin: 0;
}

/* --- Üst satır: başlık solda, düğmeler sağda, açıklama altta tam satır ---

   KULLANICI KARARI (2026-09-28): "Agent ayarları butonunun sağına Bilgi
   ekle … sağına Toplu Data Aktar … sağına dışarı aktar" + açıklama cümlesi
   "alta kaymasın tek satırda olsun, buton ile çarpışmıyorsa".

   ⚠ CÜMLE NİYE ALTTA TAM SATIR: başlıkla aynı kolondayken (flex, 62ch)
   düğmelerin yanında ~40 karakterde kırılıyordu. Şimdi cümle kendi
   satırında (flex-basis 100%): düğmelerle yatayda hiç karşılaşmıyor,
   genişlik yettiği sürece TEK SATIR. Daralınca normal sarıyor (kesme yok).

   Kırılım yok, sarma var: başlık + dört düğme sığmazsa düğme grubu
   başlığın altına iniyor (sola yaslı), cümle yine en altta. */
.ajn__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin: 0 0 1rem;
}
.ajn__ust_baslik { flex: 1 1 auto; }
.ajn__ust_dgm {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}
.ajn__ust_eylem {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

/* --- İçe/Dışa Aktar açılır menüsü (2026-09-28) ----------------------------
   KULLANICI KARARI: önce dört düğme "Hızlı İşlemler" menüsüne alındı; sonra
   "bilgi ekle … hızlı işlemlerin solunda olsun. agent ayarları da bilgi
   eklenin sağında olsun. hızlı işlemlerin adı da: İçe/Dışa Aktar olsun".
   Sıra: Bilgi ekle · Agent ayarları · İçe/Dışa Aktar ▾ (Toplu data aktar ·
   Dışarı aktar). Sınıf adları (.ajn__hizli*) ilk turdan kaldı.
   Yüzey theme.css § 5 (.ay-pop · .ay-pop__item), açma/kapama AY.Dropdown
   (js/agent.js bağlıyor, kök .is-open alıyor). Menü düğmenin bittiği
   kenara yapışıyor: LTR'de sağ, RTL'de sol (§ 5a .lang__menu ile aynı).

   JS'SİZ YOL: betik bağlanınca köke .is-js ekliyor. O işaret yokken menü
   odakla (:focus-within) açılıyor — Tab ile düğmeye gelen kullanıcı
   bağlantılara ulaşabiliyor. İşaret varken yalnızca .is-open açıyor;
   aksi hâlde düğmeye ikinci tıklama odak içeride kaldığı için menüyü
   kapatamazdı. */
.ajn__hizli { position: relative; }
.ajn__hizli_btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}
.ajn__hizli_btn .caret {
    font-size: 10px;
    opacity: .75;
    transition: transform .3s var(--ease-out), opacity .22s var(--ease);
}
.ajn__hizli_btn[aria-expanded="true"] .caret { transform: rotate(180deg); opacity: 1; }

.ajn__hizli_menu {
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 30;
    min-width: 232px;
    transform-origin: top right;
}
[dir="rtl"] .ajn__hizli_menu { transform-origin: top left; }

/* Telefonda düğme satırı alta kırılıyor ve "Aktar" satırın BAŞINDA kalıyor:
   sona yapışan menü ekranın dışına taşıyordu (2026-09-29 görüntüde
   "Web sitesinden aktar" kesikti). Dar ekranda menü düğmenin başına. */
@media (max-width: 575.98px) {
    .ajn__hizli_menu { inset-inline-end: auto; inset-inline-start: 0; transform-origin: top left; }
    [dir="rtl"] .ajn__hizli_menu { transform-origin: top right; }
}

.ajn__hizli_oge { white-space: nowrap; }

/* 2026-09-29 · "Web sitesinden aktar" menüde POST düğmesi: bağlantı öğesiyle
   birebir aynı görünsün (düğme varsayılanları sıfırlanıyor). */
.ajn__hizli_form { margin: 0; }
.ajn__hizli_oge--dgm {
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: inherit;
    text-align: start;
    cursor: pointer;
}

/* Tarama arka planda sürüyor notu (liste başlığının altında, tek satır). */
.ajn__site_suruyor { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; color: var(--ink-soft); }
.ajn__site_suruyor .ay-ico { animation: ajnDon 1.6s linear infinite; }
@keyframes ajnDon { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ajn__site_suruyor .ay-ico { animation: none; } }

/* Boş durum: "Bilgi ekle" + "Web sitesinden aktar" yan yana. */
.ajn__bos_dgm { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ajn__bos_dgm form { margin: 0; }
.ajn__hizli_oge .ay-ico { font-size: 15px; flex: 0 0 auto; width: 1.1em; opacity: .8; }
.ajn__hizli_oge:hover .ay-ico,
.ajn__hizli_oge:focus-visible .ay-ico { opacity: 1; }

.ajn__hizli:not(.is-js):focus-within > .ay-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.ajn__ust_not {
    flex: 1 1 100%;
    margin: -.15rem 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

/* --- Seçim kutusu kolonu (toplu silme · js/agent.js) -------------------- */
.ajn__tablo th.ajn__k_sec,
.ajn__tablo td.ajn__k_sec {
    width: 1%;
    padding-inline-end: 0;
}
.ajn__sec {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.ajn__sec[hidden] { display: none; }
.ajn__sec:hover { background: var(--surface-2); }

/* Seçili satır: marka tonunda zemin (hover'ı da eziyor). */
.ajn__tablo tbody tr.ajn__satir_k--secili td,
.ajn__tablo tbody tr.ajn__satir_k--secili:hover td {
    background: var(--brand-soft);
}

/* Seçim satırındaki ikinci yıkıcı düğme: "Tümünü sil (N)". */
.ajn__hepsi_sil { white-space: nowrap; }

/* Toplu silme formları boş: kutular ve düğmeler form="…" ile bağlı. */
.ajn__secim_form { display: contents; }
.ajn__ayar_dgm {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    white-space: nowrap;
}
.ajn__ayar_dgm .pnl__ikon { font-size: 14px; }

/* Ayar sayfasının kart başlığı: başlık + tek cümle, formdan çizgiyle ayrık
   değil (ilk ayar satırı zaten çizgisiz başlıyor). */
.ajn__ayar_bas { margin-bottom: .25rem; }

/* --- Araç kartı ------------------------------------------------------------
   Kart, satırlar, arama alanı ve düğmeler .gdr__panel'in (§ ARAÇ PANELİ):
   burada yalnızca agent'a özgü iki şey var. Tür sekmeleri satırı dolduruyor,
   durum sekmeleri sağ uçta; tür sekmesi basılmadığında (tek tür) durum
   sekmeleri tek başına soldan başlıyor. */
.ajn__panel .gdr__suzgec + .ajn__durum_sekme {
    flex: 0 0 auto;
}

/* --- Süzgeç sonucu boş ---------------------------------------------------- */
.ajn__sonuc_yok {
    display: grid;
    justify-items: center;
    gap: .6rem;
    padding: 2rem 1rem;
    border: 1px dashed var(--hairline);
    border-radius: var(--r-md);
    color: var(--ink-mute);
    text-align: center;
}
.ajn__sonuc_yok > .pnl__ikon { font-size: 20px; }
.ajn__sonuc_yok > p { margin: 0; font-size: var(--fs-sm); }

/* --- Tablo ----------------------------------------------------------------
   Kap yatay kaydırmıyor: ≥761px'te kolonlar sığıyor (başlık kolonu esnek,
   diğerleri içerik kadar), altında tablo karta dönüyor. */
/* overflow-x: auto (hidden DEĞİL): kolonlar yine de sığmazsa eylem düğmeleri
   kesilip görünmez olmasın, kap kendi içinde kaysın. Köşe kırpması aynı. */
.ajn__tablo_kap {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow-x: auto;
    background: var(--surface);
}
.ajn__tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.ajn__tablo th,
.ajn__tablo td {
    padding: .8rem 1rem;
    text-align: start;
    vertical-align: middle;
}
.ajn__tablo thead th {
    border-bottom: 1px solid var(--hairline);
    background: var(--surface-2);
    color: var(--ink-mute);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ajn__tablo tbody tr + tr td { border-top: 1px solid var(--hairline); }

@media (hover: hover) and (pointer: fine) {
    .ajn__tablo tbody tr:hover td { background: var(--surface-2); }
}

/* Kolon ölçüleri: başlık esnek, geri kalanı içeriği kadar. */
.ajn__k_baslik { width: 100%; min-width: 14rem; }
.ajn__k_tur,
.ajn__k_dil,
.ajn__k_durum,
.ajn__k_tarih,
.ajn__k_eylem { white-space: nowrap; }
.ajn__k_tarih {
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}
.ajn__tablo td.ajn__k_eylem { padding-block: .5rem; }

/* Başlık hücresi: ad + tek satır özet. */
.ajn__k_baslik .ajn__kayit_ad {
    display: block;
    font-size: var(--fs-base);
}
.ajn__k_baslik .ajn__kayit_ozet {
    margin-top: .2rem;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    max-width: 60ch;
}

/* Rozetler tabloda sütun hizasında: sabit en az genişlik tür rozetini
   kolonda aynı boya getiriyor. */
.ajn__tablo .ajn__tur { display: inline-block; }
.ajn__tablo .hsp__etiket {
    padding: .1rem .5rem;
    font-size: .72rem;
    font-weight: 600;
}
.ajn__dil--hepsi {
    background: transparent;
    font-weight: 500;
    letter-spacing: 0;
}

.ajn__tablo .ajn__kayit_eylem { justify-content: flex-end; }
/* "Pasife al" / "Aktif et" farklı uzunlukta: sabit en az genişlik olmadan
   düzenle ikonları satırdan satıra kayıyordu (ekranda görüldü). */
.ajn__tablo .ajn__cevir { min-width: 6.5rem; justify-content: center; }

/* Pasif satır soluk ama okunur. */
.ajn__satir_k--pasif .ajn__kayit_ad,
.ajn__satir_k--pasif .ajn__kayit_ozet { color: var(--ink-mute); }
.ajn__satir_k--pasif .ajn__tur { opacity: .7; }

/* --- Alt satır: kapsam + sayfalama -------------------------------------- */
.ajn__tablo_alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1rem;
}
.ajn__kapsam {
    margin: 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.ajn__tablo_alt .ajn__sayfalama {
    margin: 0;
    justify-content: flex-end;
}

/* Sayfa bağlantısı listeye (#ajn-bilgiler) iniyor; üst şerit altında
   kalmasın. */
#ajn-bilgiler { scroll-margin-top: calc(var(--pnl-ust-h, 64px) + 1rem); }

/* --- Dar masaüstü (761–1200px): tablo SIĞSIN — ÖLÇÜLMÜŞ KUSUR (2026-09-28)
   1024 pikselde (yan menü açık) içerik alanı ~728 piksel, tablo 916'ydı:
   seçim kolonu eklenince eylem kolonu (düzenle · aç/kapa · sil) kabın
   dışında kalıyordu. Burada "Son güncelleme" kolonu gizleniyor (tarih
   düzenleme ekranında ve Excel çıktısında var), hücre dolgusu ve başlık
   kolonunun en az genişliği daralıyor. */
@media (min-width: 761px) and (max-width: 1200px) {
    .ajn__tablo th,
    .ajn__tablo td { padding-inline: .6rem; }
    .ajn__tablo .ajn__k_tarih { display: none; }
    .ajn__k_baslik { min-width: 10rem; }
    .ajn__tablo .ajn__cevir { min-width: 5.5rem; }
}

/* --- Tablet/telefon ≤760px: satır KART ----------------------------------
   Kolon başlıkları gizleniyor (sr-only değil: caption ve data-etiket
   bağlamı taşıyor; ekran okuyucu tabloyu tablo olarak okumaya devam
   ediyor, yalnızca görsel yerleşim değişiyor). Rozetler başlığın ALTINDA
   tek sıra, tarih onların yanında, eylemler kartın dibinde. */
@media (max-width: 760px) {
    /* Telefonda sıra: başlık · cümle · düğmeler. */
    .ajn__ust { flex-direction: column; align-items: stretch; }
    .ajn__ust_baslik,
    .ajn__ust_not { flex: 0 0 auto; }
    .ajn__ust_not { order: 2; margin: 0; }
    .ajn__ust_dgm { order: 3; flex: 0 0 auto; margin-top: .35rem; }

    /* Seçim kutusu kartın sağ üst köşesinde; başlık ona yer bırakıyor. */
    .ajn__tablo tbody tr { position: relative; }
    .ajn__tablo td.ajn__k_sec {
        position: absolute;
        inset-block-start: .6rem;
        inset-inline-end: .6rem;
        width: auto;
        padding: 0;
    }
    .ajn__tablo td.ajn__k_baslik { padding-inline-end: 2.25rem; }
    .ajn__sec { width: 36px; height: 36px; }
    .ajn__tablo tbody tr.ajn__satir_k--secili {
        border-color: var(--brand-line);
        background: var(--brand-soft);
    }

    .ajn__tablo_kap { border: 0; border-radius: 0; background: transparent; overflow: visible; }

    .ajn__tablo,
    .ajn__tablo tbody { display: block; }
    /* display:block ŞART (2026-10-01): tablo bölümünde (table-header-group)
       overflow uygulanmıyor; gizli başlığın 643px'lik satırı 375px ekranda
       sayfayı yatay kaydırıyordu. */
    .ajn__tablo thead {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .ajn__tablo tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem;
        padding: .9rem;
        border: 1px solid var(--hairline);
        border-radius: var(--r-md);
        background: var(--surface);
    }
    .ajn__tablo tbody tr + tr { margin-top: .6rem; }
    .ajn__tablo tbody tr + tr td { border-top: 0; }
    .ajn__tablo tbody tr:hover td { background: transparent; }

    .ajn__tablo td {
        display: block;
        padding: 0;
    }
    .ajn__tablo td.ajn__k_baslik {
        flex: 1 1 100%;
        min-width: 0;
        width: auto;
        margin-bottom: .2rem;
    }
    .ajn__k_baslik .ajn__kayit_ozet {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    .ajn__tablo td.ajn__k_tarih {
        margin-inline-start: auto;
        font-size: .75rem;
    }
    .ajn__tablo td.ajn__k_eylem {
        flex: 1 1 100%;
        margin-top: .35rem;
        padding: .65rem 0 0;
        border-top: 1px dashed var(--hairline);
    }
    /* § 24h-ajn'nin ≤640px kuralı .ajn__kayit_eylem'e kendi kesikli
       çizgisini ve dolgusunu veriyor; burada çizgiyi hücre taşıyor, ikisi
       üst üste binip boşluğu ikiye katlıyordu. */
    .ajn__tablo .ajn__kayit_eylem {
        justify-content: flex-start;
        padding-top: 0;
        border-top: 0;
    }
    .ajn__tablo .ajn__kayit_eylem form { flex: 1 1 auto; }
    .ajn__tablo .ajn__kayit_eylem .ajn__cevir { width: 100%; height: 40px; }
    .ajn__tablo .ajn__kayit_eylem .pnl__eylem { width: 40px; height: 40px; }

    .ajn__tablo_alt { flex-direction: column-reverse; align-items: center; }
    .ajn__tablo_alt .ajn__sayfalama { justify-content: center; }
}

@media (max-width: 640px) {
    /* Telefonda iki sekme şeridi alt alta, ikisi de tam satır. */
    .ajn__panel .gdr__suzgec + .ajn__durum_sekme { flex: 1 1 100%; }
    /* iOS 16px altındaki alana odaklanınca sayfayı yakınlaştırıyor. */
    .ajn__panel .gdr__ara .ay-input { font-size: 16px; }

    /* İKİ YIKICI DÜĞME AYIRT EDİLSİN: § 24f-5 telefonda "Seçilenleri sil"in
       metnini gizliyor (tek çöp ikonu). Burada iki çöp ikonu yan yana
       kalıyordu ve hangisinin "tümü" olduğu anlaşılmıyordu (ekranda
       görüldü). "Tümünü sil (N)" metinli kalıyor, satır gerekirse sarıyor. */
    .ajn__panel .gdr__panel_secim { flex-wrap: wrap; row-gap: .4rem; }
    .gdr__panel_secim .ajn__hepsi_sil span {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
    }
}

/* ==========================================================================
   § 24h-cs · AGENT — CEVAPLANAMAYAN SORULAR  (panel/agent.php · 2026-09-30)

   KULLANICI: "cevaplanamayan sorular gibi birşey yap. orada yönetici
   isterse cevap eklesin … yada … silebilsin. listeleme ve sayfalama da
   olsun"

   Eğitim listesinin üstünde, aynı dil: başlık satırı (.ajn__ust) + TEK
   kart (liste) + alt satır (.ajn__tablo_alt). Satır: soru · meta (kaç kez,
   en son, dil, sohbet) · sil ikonu sağ üstte; altında <details> cevap
   formu. İç içe kart yok — form satırın içinde gri zeminli bir alan.
   ========================================================================== */
.ajn__cs { margin: 0 0 2.5rem; }

.ajn__cs_sayi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    margin-inline-start: .35rem;
    padding: 0 .45rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.ajn__cs_bos {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .9rem 1rem;
    border: 1px dashed var(--hairline);
    border-radius: var(--r-md);
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.ajn__cs_bos .ay-ico { color: var(--brand); }

.ajn__cs_onay { margin: 0 0 1rem; }

.ajn__cs_liste {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
}
.ajn__cs_oge { padding: .9rem 1rem; }
.ajn__cs_oge + .ajn__cs_oge { border-top: 1px solid var(--hairline); }

.ajn__cs_ust {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.ajn__cs_bilgi { flex: 1 1 auto; min-width: 0; }
.ajn__cs_soru {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.ajn__cs_meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    margin: .3rem 0 0;
    color: var(--ink-mute);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}
.ajn__cs_adet { font-weight: 600; }
.ajn__cs_sohbet { color: var(--brand); font-weight: 600; }
.ajn__cs_sohbet:hover { text-decoration: underline; }
.ajn__cs_sohbet:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 2px;
}
.ajn__cs_eylem { flex: 0 0 auto; display: flex; }

/* Cevap formu — <details>, JS'siz açılıp kapanıyor. Özet düğme görünümünde;
   tarayıcının üçgen işareti yok. */
.ajn__cs_cevap { margin-top: .65rem; }
.ajn__cs_cevap > summary {
    width: max-content;
    list-style: none;
    cursor: pointer;
}
.ajn__cs_cevap > summary::-webkit-details-marker { display: none; }
.ajn__cs_cevap[open] > summary {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}
.ajn__cs_form {
    display: grid;
    gap: .85rem;
    margin-top: .75rem;
    padding: 1rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.ajn__cs_form .ay-field { margin: 0; }
.ajn__cs_form .ajn__ipucu { margin: .35rem 0 0; }
.ajn__cs_dugme { display: flex; }

/* Sayfa bağlantıları ve hatalı gönderim bölüme / satıra iniyor; üst şerit
   altında kalmasın. */
#ajn-cevapsiz,
.ajn__cs_oge { scroll-margin-top: calc(var(--pnl-ust-h, 64px) + 1rem); }

@media (max-width: 760px) {
    .ajn__cs_oge { padding: .85rem; }
    .ajn__cs_ust { gap: .5rem; }
    .ajn__cs_eylem .pnl__eylem { width: 40px; height: 40px; }
    .ajn__cs_cevap > summary { width: 100%; height: 40px; }
    .ajn__cs_form { padding: .85rem; }
    .ajn__cs_dugme .ay-btn { width: 100%; height: 40px; }
    /* iOS 16px altındaki alana odaklanınca sayfayı yakınlaştırıyor. */
    .ajn__cs_form .ay-input { font-size: 16px; }
}

/* ==========================================================================
   § 24h-akt · AGENT — TOPLU DATA AKTAR  (panel/agent-aktar.php · 2026-09-28)

   KULLANICI KARARI: "Toplu Data Aktar butonu yap. içeri aktarmak için."

   İki KARDEŞ kart (şablon · yükleme), geniş ekranda yan yana; iç içe kart
   yok (agent.php ile aynı kural). Kartların kendisi .gdr__bolum /
   .gdr__form (§ 24f üstü); burada yalnızca yerleşim ve rapor.
   ========================================================================== */
.akt__izgara {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}
.akt__izgara > .akt__kart { margin: 0; }
.akt__kart > .hsp__h2 { margin-bottom: .5rem; }
.akt__kart.gdr__form { display: grid; gap: 1rem; }
.akt__kart.gdr__form > .hsp__h2 { margin-bottom: -.5rem; }

.akt__not {
    margin: 0 0 1rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.akt__eylem { margin: 0; }
.akt__eylem .ay-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
.akt__azami { margin: 0; }

/* Geçerli değerler: etiket solda, açıklama sağda. */
.akt__degerler {
    display: grid;
    gap: .55rem;
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-sm);
}
.akt__degerler > div {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: .75rem;
}
.akt__degerler dt {
    color: var(--ink);
    font-weight: 650;
}
.akt__degerler dd {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* --- Rapor --------------------------------------------------------------- */
.akt__sonuc { border-color: var(--st-ok-line); }
.akt__sonuc--uyari { border-color: var(--st-bek-line); }
.akt__sayilar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.akt__sayi {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.akt__sayi--ok .ay-ico { color: var(--st-ok-ink); }
.akt__sayi--uyari .ay-ico { color: var(--st-bek-ink); }
.akt__hatalar {
    display: grid;
    gap: .3rem;
    max-height: 16rem;
    margin: 1rem 0 0;
    padding: .75rem 1rem .75rem 2rem;
    overflow-y: auto;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}
[dir="rtl"] .akt__hatalar { padding: .75rem 2rem .75rem 1rem; }
.akt__daha {
    margin: .5rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.akt__dip { margin: 1rem 0 0; }

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

/* ==========================================================================
   § 24s · RAPORLAR  —  panel/raporlar.php  (2026-09-28)

   KULLANICI KARARI: "yan menüde ki Ayarlar menüsü yerine … Raporlar menüsü
   oluştur … grafiksel ve liste olarakta … kullanışlı ve anlaşılır."

   YENİDEN KULLANILANLAR (burada tanımlı DEĞİL):
     .hsp__bolum / .hsp__baslik_satir / .hsp__h2 / .hsp__sayac   § 24e
     .pnl__blok / .pnl__olcut* / .pnl__cizim / .pnl__cbk_* /
     .pnl__gosterge* / .pnl__bos_satir / .pnl__aralik              § 24d
     .gdr__sekme / .gdr__suzgec / .gdr__sayfalama* / .gdr__sayfa_bilgi  § 24f
     .hsp__etiket(--ok|--uyari) / .hsp__isaret--kucuk              § 24e

   YALNIZCA BU EKRANA ÖZGÜ OLANLAR:
     .rpr__suz          dönem sekmeleri · platform seçimi · CSV
     .rpr__tablo*       hesap tablosu ve teslim kayıtları; ≤760px'te kart
     .rpr__oran*        tablodaki oran çubuğu (genişlik nonce'lu bloktan)
     .rpr__hata*        sık görülen hatalar listesi

   ⚠ DİNAMİK ÖLÇÜ YOK: .rpr__oran_dolu--o<n> ve .pnl__cbk_p--y<n>
   kuralları PHP'de hesaplanıp ay_stil() ile basılıyor (CSP: style="" yasak).
   ========================================================================== */

/* --- Süzgeç şeridi ------------------------------------------------------- */
/* Sekmeler solda, platform formu ortada, CSV sağ uçta. Sarıyor: dar ekranda
   form ve CSV alt satıra iniyor, hiçbir öğe küçülmüyor. */
.rpr__suz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1rem;
    margin: 0 0 1.25rem;
}
.rpr__suz_form {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
/* Seçim kutusu şeritte ürünün standart kontrol yüksekliğini alıyor
   (.ay-input); genişliği en uzun platform adına göre, tam satır değil. */
.rpr__secim {
    width: auto;
    min-width: 11rem;
}
.rpr__indir {
    margin-inline-start: auto;
}

/* --- Özet kartları BAĞLANTI (2026-09-28) ---------------------------------
   Kullanıcı kararı: "kartlarına link ekle. hangisine tıklanırsa onları
   listelesin." Kart .pnl__olcut_hucre'nin görünümünü koruyor (§ 24d); burada
   yalnızca bağlantı davranışı: alt çizgi yok, üzerine gelince kenarlık marka
   rengine dönüyor, seçili kart dolu marka kenarlığı + açık zemin alıyor.
   Seçili hâl renkle birlikte KALIN KENARLIKLA da veriliyor ve aria-current
   taşıyor — renk tek taşıyıcı değil. */
.rpr__kart {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.rpr__kart:hover {
    border-color: var(--brand-line);
    box-shadow: 0 2px 8px rgb(15 23 42 / .06);
}
.rpr__kart:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.rpr__kart--aktif,
.rpr__kart--aktif:hover {
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand);
}
/* Başarısız kartı seçiliyken de hata tonunu koruyor: seçim kenarlıkla. */
.rpr__kart--aktif.pnl__olcut_hucre--dikkat {
    background: var(--st-hata-bg);
}
@media (prefers-reduced-motion: reduce) {
    .rpr__kart { transition: none; }
}

/* Liste başlığındaki indirme düğmeleri (Excel · CSV). */
.rpr__liste_indir {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Gönderi görünümünde platform rozetleri yan yana. */
.rpr__rozetler {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.rpr__k_platform { white-space: nowrap; }

/* Bölüm çıpaları (#rpr-liste · sekme ve sayfa bağlantıları oraya iniyor)
   .hsp__bolum[id] kuralından scroll-margin alıyor (§ 24e). */

/* Sekmeler bölüm başlığının altında: .gdr__suzgec'in 1rem alt boşluğu
   tablo ile arasında yeterli. Ek kural gerekmiyor; sınıf JS/test kancası. */

/* --- Tablo ----------------------------------------------------------------
   .ajn__tablo (§ 24h-lst) ile aynı görsel dil: ince çerçeve, gri başlık
   satırı, satır arası çizgi. Ayrı sınıf çünkü kolonlar ve kart kırılımı bu
   ekrana özgü; agent tablosunun kuralını değiştirmek iki ekranı birden
   oynatırdı. */
.rpr__tablo_kap {
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
}
.rpr__tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.rpr__tablo th,
.rpr__tablo td {
    padding: .75rem 1rem;
    text-align: start;
    vertical-align: middle;
}
.rpr__tablo thead th {
    border-bottom: 1px solid var(--hairline);
    background: var(--surface-2);
    color: var(--ink-mute);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.rpr__tablo tbody tr + tr td { border-top: 1px solid var(--hairline); }

@media (hover: hover) and (pointer: fine) {
    .rpr__tablo tbody tr:hover td { background: var(--surface-2); }
}

/* Kolonlar: ad esnek, geri kalanı içeriği kadar. */
.rpr__k_ad { width: 100%; min-width: 12rem; }
.rpr__k_sayi,
.rpr__k_tarih,
.rpr__k_durum { white-space: nowrap; }

/* Sayılar sağa yaslı ve eş genişlikli rakamla: alt alta satırlarda
   basamaklar hizalanıyor, göz kolonu yukarıdan aşağı tarayabiliyor. */
.rpr__tablo .rpr__k_sayi {
    text-align: end;
    font-variant-numeric: tabular-nums;
}
.rpr__k_sayi--hata {
    color: var(--st-hata-ink);
    font-weight: 600;
}
.rpr__k_tarih {
    color: var(--ink-mute);
    font-variant-numeric: tabular-nums;
}

/* Oranı eşiğin altında kalan hesap: satırın başında ince kırmızı çizgi.
   Renk tek taşıyıcı değil — yüzde yanında yazıyor. */
.rpr__satir--dikkat td:first-child {
    box-shadow: inset 3px 0 0 var(--st-hata-ink);
}
[dir="rtl"] .rpr__satir--dikkat td:first-child {
    box-shadow: inset -3px 0 0 var(--st-hata-ink);
}

/* Hesap hücresi: platform karosu + ad + alt satır (platform/hedef). */
.rpr__hesap {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.rpr__hesap_ic {
    display: grid;
    gap: .1rem;
    min-width: 0;
}
.rpr__hesap_ad {
    overflow: hidden;
    color: var(--ink);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rpr__hesap_alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    color: var(--ink-mute);
    font-size: .75rem;
}
.rpr__hesap_alt .hsp__etiket {
    padding: 0 .45rem;
    font-size: .68rem;
    font-weight: 600;
    text-decoration: none;
}
.rpr__tablo .hsp__etiket {
    padding: .1rem .5rem;
    font-size: .72rem;
    font-weight: 600;
}

/* Oran: ray + yüzde. Ray 6rem sabit — satırdan satıra aynı uzunlukta
   olmazsa karşılaştırma bozulurdu. */
.rpr__oran {
    display: flex;
    align-items: center;
    gap: .6rem;
    white-space: nowrap;
}
.rpr__oran_ray {
    display: block;
    flex: 0 0 6rem;
    height: 8px;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
}
/* Genişlik BURADA DEĞİL: nonce'lu bloktan (.rpr__oran_dolu--o<n>).
   Kural gelmezse 0'da kalıyor ve ray boş görünüyor — taşma yok. */
.rpr__oran_dolu {
    display: block;
    width: 0;
    height: 100%;
    background: var(--brand);
}
.rpr__satir--dikkat .rpr__oran_dolu { background: var(--st-hata-ink); }
.rpr__oran_sayi {
    min-width: 3rem;
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Teslim kayıtları: gönderi adı iki satırda kırpılıyor, hata nedeni üç. */
.rpr__gonderi {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.rpr__gonderi:hover,
.rpr__gonderi:focus-visible { color: var(--brand); text-decoration: underline; }

.rpr__k_detay { min-width: 12rem; max-width: 22rem; }

/* Kayıt tablosunda gönderi kolonu %100 DEĞİL: hesap kolonu içerik kadar
   kalıyor ve adı "Dene…" diye kırpılıyordu (ekran görüntüsünde ölçüldü).
   Hesap adına asgari yer ayrılıyor, gönderi adı iki satıra sarıyor. */
.rpr__tablo--liste .rpr__k_ad { width: 34%; min-width: 11rem; }
.rpr__tablo--liste .rpr__k_hesap { min-width: 14rem; }
.rpr__neden {
    display: -webkit-box;
    overflow: hidden;
    color: var(--st-hata-ink);
    font-size: .78rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.rpr__ac {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.rpr__ac:hover,
.rpr__ac:focus-visible { text-decoration: underline; }
.rpr__ac .ay-ico { font-size: .7rem; }
[dir="rtl"] .rpr__ac .ay-ico { transform: scaleX(-1); }

.rpr__deneme {
    display: block;
    margin-top: .2rem;
    color: var(--ink-mute);
    font-size: .72rem;
}
.rpr__bos_hucre { color: var(--ink-mute); }

/* Tablo ile sayfalama arası: .gdr__sayfalama kendi boşluğunu taşıyor ama
   tablonun hemen ardında 1rem daha nefes gerekiyordu. */
.rpr__tablo_kap + .gdr__sayfalama { margin-top: 1rem; }

/* --- Sık görülen hatalar -------------------------------------------------
   Liste, tablo değil: her satır bir mesaj ve mesajlar uzun; kolonlara
   bölünse metin dar bir kolonda sekiz satıra yayılırdı. */
.rpr__hatalar {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.rpr__hata {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .75rem;
    padding: .75rem .9rem;
    border: 1px solid var(--st-hata-line);
    border-radius: var(--r-md);
    background: var(--surface);
}
.rpr__hata_ic {
    display: grid;
    gap: .25rem;
    min-width: 0;
}
.rpr__hata_mesaj {
    color: var(--ink);
    font-size: var(--fs-sm);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.rpr__hata_alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    color: var(--ink-mute);
    font-size: .75rem;
}
/* Kod eş aralıklı: destek ekibine okunacak bir tanımlayıcı, cümle değil. */
.rpr__kod {
    padding: .05rem .4rem;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
}
.rpr__hata_sayi {
    color: var(--st-hata-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rpr__hata_git {
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.rpr__hata_git:hover,
.rpr__hata_git:focus-visible { text-decoration: underline; }
.rpr__hata_kalan {
    margin: .6rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* --- Tablet/telefon ≤760px: tablo satırı KART ---------------------------
   .ajn__tablo ile aynı yaklaşım: başlık satırı görsel olarak gizli ama
   belgede (caption + data-etiket bağlamı taşıyor), hücreler kartın içinde
   akıyor. Etiketi olan hücre kendi başlığını ::before ile yazıyor — tablo
   başlığı görünmediğinde "12" sayısının neyin sayısı olduğu kaybolmasın. */
@media (max-width: 760px) {
    .rpr__indir { margin-inline-start: 0; }

    .rpr__tablo_kap { border: 0; border-radius: 0; background: transparent; overflow: visible; }

    .rpr__tablo,
    .rpr__tablo tbody { display: block; }
    .rpr__tablo thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .rpr__tablo tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .5rem 1rem;
        padding: .85rem .9rem;
        border: 1px solid var(--hairline);
        border-radius: var(--r-md);
        background: var(--surface);
    }
    .rpr__tablo tbody tr + tr { margin-top: .6rem; }
    .rpr__tablo tbody tr + tr td { border-top: 0; }
    .rpr__tablo tbody tr:hover td { background: transparent; }

    .rpr__tablo td {
        display: block;
        padding: 0;
    }
    .rpr__tablo td[data-etiket]::before {
        content: attr(data-etiket);
        display: block;
        margin-bottom: .15rem;
        color: var(--ink-mute);
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    .rpr__tablo .rpr__k_sayi { text-align: start; }

    /* Ad hücresi ve ayrıntı tam satır; sayılar yan yana. */
    .rpr__tablo td.rpr__k_ad,
    .rpr__tablo td.rpr__k_detay,
    .rpr__tablo td.rpr__k_hesap {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
        width: auto;
    }
    .rpr__tablo--hesap td.rpr__k_oran { flex: 1 1 100%; }
    .rpr__tablo--hesap td.rpr__k_tarih { flex: 1 1 100%; font-size: .78rem; }

    /* Kayıt kartı: tarih üstte küçük, gönderi adı başlık gibi. */
    .rpr__tablo--liste td.rpr__k_tarih { flex: 1 1 100%; order: -1; font-size: .75rem; }
    .rpr__tablo--liste td.rpr__k_detay:empty { display: none; }

    /* Kayıt kartında hesap ve durum AYNI SATIRDA ve etiketsiz: platform
       karosu ile durum hapı kendini anlatıyor, "HESAP"/"DURUM" başlıkları
       her kartı dört satır uzatıyordu (390px ekran görüntüsünde ölçüldü).
       Etiketler ekran okuyucu için yerinde: tablo başlığı belgede duruyor. */
    .rpr__tablo--liste td[data-etiket]::before { display: none; }
    .rpr__tablo--liste td.rpr__k_hesap { flex: 1 1 auto; width: auto; }
    .rpr__tablo--liste td.rpr__k_durum { flex: 0 0 auto; text-align: end; }

    .rpr__satir--dikkat td:first-child { box-shadow: none; }
    .rpr__tablo tbody tr.rpr__satir--dikkat { border-color: var(--st-hata-line); }

    .rpr__oran_ray { flex-basis: auto; flex-grow: 1; }
}

@media (max-width: 760px) {
    /* Gecikme görünümünde planlanan saat ve gecikme etiketleriyle
       görünüyor: iki çıplak saat yan yana hangisinin ne olduğunu
       söylemiyor. (Öteki kayıt kartlarında etiketler kapalı, yukarıda.) */
    .rpr__tablo--liste td.rpr__k_etiketli::before { display: block; }
    /* Planlanan saat .rpr__k_tarih sınıfını da taşıyor ve kayıt kartının
       "tarih en üstte" kuralına takılıp yayın saatinin altına çıkıyordu
       (390px'te ölçüldü). Sıra geri alınıyor: hesap tam satır, altında
       planlanan + gecikme yan yana. */
    .rpr__tablo--gecikme td.rpr__k_hesap { flex: 1 1 100%; }
    .rpr__tablo--gecikme td.rpr__k_etiketli { flex: 0 0 auto; order: 0; font-size: var(--fs-sm); }
    .rpr__tablo--gecikme td.rpr__k_etiketli + td.rpr__k_etiketli { margin-inline-start: auto; }

    /* Gönderi kartı: ad tam satır, platform rozetleri tam satır, üç sayı
       yan yana. */
    .rpr__tablo--gonderi td.rpr__k_tarih { flex: 1 1 100%; order: -1; font-size: .75rem; }
    .rpr__tablo--gonderi td.rpr__k_platform { flex: 1 1 100%; }
}

@media (max-width: 640px) {
    .rpr__suz_form { flex: 1 1 100%; }
    .rpr__secim { flex: 1 1 auto; min-width: 0; font-size: 16px; }

    /* Hata satırı: rozet + mesaj üstte, sayı ve bağlantı altta. */
    .rpr__hata {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .rpr__hata_sayi,
    .rpr__hata_git { grid-column: 2; }
}

/* ==========================================================================
   § 24s-2 · GÖNDERİM GRAFİĞİ  —  panel/rapor-grafik.php  (2026-09-28)

   KULLANICI KARARI: "döviz grafiği tarzında gönderim başarı olanlarını ve
   gönderim sayılarını … tasarımla uyumlu daha da güzel bir yapıda."

     .rgr__kurlar     kur şeridi: değer · değişim (▲/▼) · kıvılcım
     .rgr__kart       grafik kartı (başlık + gösterge + grafik)
     .rgr__grafik     çizim | y ekseni (sağda, döviz ekranı gibi) / x ekseni
     .rgr__imlec      JS'in çizdiği imleç katmanı (piksel koordinatı)

   ⚠ RENKLER YALNIZCA BURADA. SVG yolları sınıf taşıyor, renk özniteliği
   taşımıyor: tema değişkeni değişince grafik de değişiyor. Platform
   çizgileri .hsp__isaret--<kod>'un --hsp-renk değişkenini okuyor (tek
   kaynak: ay_platform_renk_css).

   ⚠ KONUMLAR (.rgr__xp--<n>, .rgr__tp--<n>) nonce'lu bloktan geliyor
   (binde birlik tam sayı). Burada tanımlı değiller.
   ========================================================================== */

/* --- Üst şerit ----------------------------------------------------------- */
.rgr__ust .rgr__geri { flex: 0 0 auto; }
.rgr__donem {
    margin: 0 0 0 auto;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

/* raporlar.php'nin sağ üst düğmesi (Gönderim Grafiği) — "Tümünü indir"in
   solunda, ikisi birlikte sağ uca yaslı. */
.rpr__arac_sag {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-inline-start: auto;
}
.rpr__arac_sag .rpr__indir { margin-inline-start: 0; }

/* --- Kur şeridi ---------------------------------------------------------- */
.rgr__kurlar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}
.rgr__kur {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .2rem;
    height: 100%;
    padding: .9rem 1rem .75rem;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rgr__kur:hover {
    border-color: var(--brand-line);
    box-shadow: 0 4px 14px rgb(15 23 42 / .07);
}
.rgr__kur:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.rgr__kur_ad {
    color: var(--ink-mute);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.rgr__kur_deger {
    color: var(--ink);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.rgr__kur--hata .rgr__kur_deger { color: var(--st-hata-ink); }

/* Değişim hapı. Ton ANLAMDAN (iyi/kötü), ok işareti YÖNDEN. */
.rgr__degisim {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: .75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.rgr__degisim--iyi  { background: var(--st-ok-bg);   color: var(--st-ok-ink); }
.rgr__degisim--kotu { background: var(--st-hata-bg); color: var(--st-hata-ink); }

/* Kıvılcım: kutunun dibinde, tam genişlik. */
.rgr__kivilcim {
    display: block;
    width: calc(100% + 2rem);
    height: 2.5rem;
    margin: .45rem -1rem -.75rem;
}
.rgr__kivilcim_cizgi {
    fill: none;
    stroke: var(--brand);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.rgr__kivilcim_alan {
    fill: var(--brand);
    opacity: .1;
}
.rgr__kur--hata .rgr__kivilcim_cizgi { stroke: var(--st-hata-ink); }
.rgr__kur--hata .rgr__kivilcim_alan  { fill: var(--st-hata-ink); }
.rgr__kur--oran .rgr__kivilcim_cizgi { stroke: var(--st-ok-ink); }

/* --- Grafik kartı -------------------------------------------------------- */
.rgr__kart {
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.25rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.rgr__kart_bas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1.25rem;
    margin-bottom: 1rem;
}
.rgr__kart_bas .hsp__h2 { margin: 0; }
.rgr__kart_alt {
    margin: .2rem 0 0;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}

/* İki kart yan yana (oran + platform); platform yoksa oran tam satır. */
.rgr__ikili {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
}
.rgr__ikili--tek { grid-template-columns: minmax(0, 1fr); }

/* Gösterge: renk örneği + ad + toplam. */
.rgr__gosterge {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}
.rgr__gosterge li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.rgr__gosterge strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.rgr__nokta_ornek {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--ink-mute);
}
.rgr__nokta_ornek--kesik {
    background: repeating-linear-gradient(90deg, var(--ink-mute) 0 4px, transparent 4px 7px);
}
.rgr__nokta_ornek--esik {
    background: repeating-linear-gradient(90deg, var(--st-hata-ink) 0 4px, transparent 4px 7px);
}

/* Seri renkleri — gösterge örneği, JS imleç noktası ve ipucu karesi AYNI
   sınıfı taşıyor. */
.rgr__s--ok   { background: var(--brand);       fill: var(--brand); }
.rgr__s--hata { background: var(--st-hata-ink); fill: var(--st-hata-ink); }
.rgr__s--once { background: var(--ink-mute);    fill: var(--ink-mute); }
.rgr__s--oran { background: var(--st-ok-ink);   fill: var(--st-ok-ink); }
.rgr__s--p    { background: var(--hsp-renk, var(--brand)); fill: var(--hsp-renk, var(--brand)); }

/* --- Grafik iskeleti ------------------------------------------------------
   Izgara: çizim | y ekseni / x ekseni | boş. Y ekseni SAĞDA — döviz
   ekranlarının alışkanlığı ve son değerin etiketi zaten sağ uçta. */
.rgr__grafik {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5rem;
    grid-template-areas: "cizim y" "x .";
    border-radius: var(--r-sm);
}
.rgr__grafik:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 6px;
}
.rgr__cizim {
    grid-area: cizim;
    position: relative;
    height: 17rem;
    cursor: crosshair;
    touch-action: pan-y;
}
.rgr__ikili .rgr__cizim { height: 12rem; }
.rgr__svg,
.rgr__imlec {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.rgr__imlec {
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}
.rgr__imlec--acik { opacity: 1; }

.rgr__izgara {
    stroke: var(--hairline);
    stroke-width: 1;
}
.rgr__izgara--dip { stroke: var(--ink-mute); stroke-opacity: .35; }

.rgr__cizgi {
    fill: none;
    stroke-width: 2.25;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.rgr__cizgi--ok   { stroke: var(--brand); stroke-width: 2.5; }
.rgr__cizgi--hata { stroke: var(--st-hata-ink); }
.rgr__cizgi--once { stroke: var(--ink-mute); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .7; }
.rgr__cizgi--oran { stroke: var(--st-ok-ink); stroke-width: 2.5; }
.rgr__cizgi--p    { stroke: var(--hsp-renk, var(--brand)); }

.rgr__alan { stroke: none; }
.rgr__dur--ok-ust   { stop-color: var(--brand); stop-opacity: .26; }
.rgr__dur--ok-alt   { stop-color: var(--brand); stop-opacity: 0; }
.rgr__dur--oran-ust { stop-color: var(--st-ok-ink); stop-opacity: .18; }
.rgr__dur--oran-alt { stop-color: var(--st-ok-ink); stop-opacity: 0; }

.rgr__esik {
    stroke: var(--st-hata-ink);
    stroke-width: 1.25;
    stroke-dasharray: 4 4;
    opacity: .6;
}

/* Noktalar: sıfır uzunluklu yol + yuvarlak uç = her oranda daire. */
.rgr__nokta {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}
.rgr__nokta--ok   { stroke: var(--brand); }
.rgr__nokta--hata { stroke: var(--st-hata-ink); }
.rgr__nokta--oran { stroke: var(--st-ok-ink); }

/* Son değerin nabzı. */
.rgr__nabiz {
    fill: none;
    stroke: var(--brand);
    stroke-linecap: round;
    stroke-width: 8;
    opacity: .35;
    animation: rgr-nabiz 1.8s ease-out infinite;
}
@keyframes rgr-nabiz {
    0%   { stroke-width: 8;  opacity: .45; }
    100% { stroke-width: 26; opacity: 0; }
}

.rgr__kolonlar rect { fill: transparent; }

/* --- Eksenler ------------------------------------------------------------ */
.rgr__y {
    grid-area: y;
    position: relative;
}
.rgr__yk {
    position: absolute;
    inset-inline-start: .5rem;
    transform: translateY(-50%);
    color: var(--ink-mute);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rgr__yk--0 { top: 0; }
.rgr__yk--1 { top: 25%; }
.rgr__yk--2 { top: 50%; }
.rgr__yk--3 { top: 75%; }
.rgr__yk--4 { top: 100%; }

/* Son değerin "fiyat etiketi": eksenin üstünde, çizginin hizasında. */
.rgr__etiket {
    position: absolute;
    inset-inline-start: .25rem;
    z-index: 1;
    transform: translateY(-50%);
    padding: .1rem .4rem;
    border-radius: 4px;
    background: var(--brand);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rgr__etiket::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    border: 4px solid transparent;
    transform: translateY(-50%);
}
.rgr__etiket--ok::before   { border-right-color: var(--brand); }
.rgr__etiket--oran         { background: var(--st-ok-ink); }
.rgr__etiket--oran::before { border-right-color: var(--st-ok-ink); }
.rgr__etiket--hata         { background: var(--st-hata-ink); }
.rgr__etiket--hata::before { border-right-color: var(--st-hata-ink); }

.rgr__x {
    grid-area: x;
    position: relative;
    height: 1.6rem;
}
.rgr__xk {
    position: absolute;
    top: .45rem;
    transform: translateX(-50%);
    color: var(--ink-mute);
    font-size: .7rem;
    white-space: nowrap;
}

/* --- İmleç katmanı (JS) -------------------------------------------------- */
.rgr__imlec_cizgi {
    stroke: var(--ink-soft);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}
.rgr__imlec_nokta {
    stroke: var(--surface);
    stroke-width: 2;
}
.rgr__ipucu_kutu {
    fill: var(--ink);
    opacity: .94;
}
.rgr__ipucu_bas {
    fill: #fff;
    font-size: 12px;
    font-weight: 700;
}
.rgr__ipucu_satir {
    fill: #fff;
    fill-opacity: .88;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* --- Platform göstergesi (grafiğin altında) ------------------------------ */
.rgr__platformlar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .4rem 1rem;
    margin: .75rem 0 0;
    padding: .75rem 0 0;
    border-top: 1px dashed var(--hairline);
    list-style: none;
}
.rgr__platform {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: var(--fs-sm);
}
.rgr__platform_cizgi {
    flex: 0 0 auto;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--hsp-renk, var(--brand));
}
.rgr__platform_ad {
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rgr__platform_sayi {
    margin-inline-start: auto;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Veri tablosu -------------------------------------------------------- */
.rgr__tablo_kap { margin: 0 0 1rem; }
.rgr__tablo_ac {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .75rem;
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.rgr__tablo th[scope="row"] {
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
}

.rgr__bos { margin-top: .5rem; }

@media (prefers-reduced-motion: reduce) {
    .rgr__nabiz { animation: none; opacity: 0; }
    .rgr__kur,
    .rgr__imlec { transition: none; }
}

/* --- Tablet ≤1024px: ikili kartlar alt alta ------------------------------ */
@media (max-width: 1024px) {
    .rgr__ikili { grid-template-columns: minmax(0, 1fr); }
    .rgr__kurlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Telefon ≤640px ------------------------------------------------------ */
@media (max-width: 640px) {
    .rgr__donem { flex: 1 1 100%; margin: 0; }
    .rpr__arac_sag { flex: 1 1 100%; margin-inline-start: 0; }
    .rgr__kart { padding: .9rem .9rem .75rem; }
    .rgr__kur { padding: .75rem .8rem .6rem; }
    .rgr__kur_deger { font-size: 1.3rem; }
    .rgr__kivilcim { width: calc(100% + 1.6rem); margin: .35rem -.8rem -.6rem; height: 2rem; }
    .rgr__grafik { grid-template-columns: minmax(0, 1fr) 2.75rem; }
    .rgr__cizim,
    .rgr__ikili .rgr__cizim { height: 11rem; }
    .rgr__xk--seyrek { display: none; }
    .rgr__tablo th[scope="row"] { flex: 1 1 100%; }
}

/* ==========================================================================
   § 24q · PANELİN HIZLI ARAMASI  (.pnl__ara)  —  2026-09-28

   KULLANICI KARARI: "header da tepedeki dil seçimi solunda arama kısmı
   olsun. menü ve özellikleri buradan kolay/pratik bir şekilde arayabilmek
   ve hızlı kullanım olması açısından."

   İki örnek, tek bileşen (panel/_ara.php, js/theme.js → AY.Ara):
     .pnl__ara--ust   masaüstü şeridinin sağ bloğunda, dil menüsünün solunda
                      (araya ince ayırıcı), kartla aynı genişlikte;
                      sonuçlar açılır yüzeyde (.ay-pop tabanı)
     .pnl__ara--drw   mobil drawer'ın tepesi; sonuçlar menü listesinin
                      YERİNE akışta basılıyor

   ⚠ YÜKSEKLİK --control-h (38px): şeritteki dil menüsü ve ikon düğmeleriyle
   aynı. Biçim kapsül — dil menüsüyle aynı aile, ama zemin --surface-2:
   "yazılabilir alan" düğmelerden ayrışsın.

   ⚠ YÜZEY OPAK (--surface), cam değil: arkasında içerik metni var ve
   sonuç satırları küçük puntolu; .ay-pop'un yarı saydam zemini okunurluğu
   düşürüyordu (aynı gerekçe § 24a'da şerit için yazılı).

   Bu blok dosyanın SONUNDA: .pnl__drw .pnl__rozet (§ 24n) ile aynı
   özgüllükteki rozet kuralı ancak sonra gelirse kazanıyor.
   ========================================================================== */
.pnl__ara {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}

/* --- Şerit örneği: DİL MENÜSÜNÜN SOLUNDA, AYIRICIYLA  —  2026-09-28 -----

   KULLANICI KARARI (üçüncü tur): "header'daki arama inputu dil seçiminin
   solunda olsun, ama arasında | gibi ayıran hafif bir alan olsun, yapışık
   gibi de olmasın."

   Önceki tur kutuyu şeridin ortasına absolute ile oturtuyordu ("header'da
   ortalı olsun"). Kutu artık .pnl__ust_sag'ın ilk öğesi, yani AKIŞTA: yer
   tutuyor ve başlık (.pnl__baslik → min-width: 0 + ellipsis) kalan alanda
   kırpılıyor. Başlığa ayrıca max-width hesabı gerekmiyor.

   Kutu ile sonuç kartı AYNI genişlikte; kart kutunun iki kenarına oturuyor
   (.pnl__ara_pano → inset-inline: 0).

   GENİŞLİK clamp(18rem, 100vw − 44rem, 24rem). 44rem ≈ şeridin geri kalanı
   (logo bloğu ~248 + başlığa ~150 + dil/profil/çıkış ~200 + ayırıcı ve
   boşluklar); 1088px'in altında kutu daralıyor.

   ⚠ ALT SINIR 18rem: kart da bu genişlikte ve daha dar kartta
   (1000px'te ölçüldü, 13rem) "Google My B…" gibi satırlar okunmuyordu.
   Bedeli: ~1000px'in altında sayfa başlığı kırpılarak kısalıyor — tam
   metin <title>'da. */
.pnl__ara--ust {
    flex: 0 0 auto;
    width: clamp(18rem, 100vw - 44rem, 24rem);
}

/* AYIRICI — arama ile dil menüsü arasında ince dikey çizgi.

   Kontrollerin yüksekliğinin (38px) ~yarısı: tam boy çizgi iki kutuyu
   çerçeve gibi birbirine bağlıyordu, yarım boy "ayrı gruplar" diyor.
   Yan boşluk: kutunun gap'i (.5rem) + .375rem = iki yanda ~14px — yapışık
   durmuyor, ama aramayı sağ bloktan koparacak kadar da açılmıyor. */
.pnl__ust_ayrac {
    flex: 0 0 auto;
    width: 1px;
    height: 1.25rem;
    margin-inline: .375rem;
    background: var(--hairline);
}

/* Mobilde şeridin kutusu yok (display: contents, § 24c); gizlenmeseydi
   kutu belge köküne göre konumlanıp içeriğin üstünde asılı kalırdı.
   Telefondaki eşi drawer'ın tepesinde (.pnl__ara--drw). */
@media (max-width: 900px) {
    .pnl__ara--ust { display: none; }
}

/* KÖŞE 6px, HAP DEĞİL — kullanıcı kararı (2026-09-28): "sol ve sağ tarafı
   çok radius olmasın, köşeliye yakın olsun; kaliteli ve kurumsal dursun."
   Hap biçimi (--r-pill) tüketici uygulaması havası veriyordu. Kutunun
   içindeki parçalar (kısayol rozeti, temizle düğmesi) ve açılan sonuç kartı
   aynı köşe ailesine çekildi: yuvarlak bir düğme köşeli kutunun içinde
   ayrı bir dilden konuşuyordu. */
.pnl__ara_kutu {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: var(--control-h);
    border: 1px solid var(--hairline);
    border-radius: 6px;
    background: var(--surface-2);
    box-shadow: inset 0 1px 1px rgba(1, 30, 90, .03);
    transition: border-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease);
}

.pnl__ara_kutu:hover { border-color: var(--brand-line); }

/* Odak halkası kutuda (.ay-input ile aynı halka); input'un kendi çerçevesi
   kapalı, iki halka üst üste binmesin.

   ⚠ ODAKTA GENİŞLİK DEĞİŞMİYOR (kullanıcı kararı 2026-09-28: "tıklandığında
   büyüyor, çıktığında normale dönüyor. büyüme küçülme olmasın, standart
   olsun"). Eskiden 17rem → 21rem genişliyordu ve şeritteki başlık ile dil
   düğmesi her tıklamada yer değiştiriyordu. Odağı yalnızca çerçeve rengi,
   halka ve zemin söylüyor. */
.pnl__ara_kutu:focus-within {
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(1, 30, 90, .12);
}

.pnl__ara_sim {
    position: absolute;
    inset-inline-start: .875rem;
    font-size: 14px;
    color: var(--ink-mute);
    pointer-events: none;
}

.pnl__ara_kutu:focus-within .pnl__ara_sim { color: var(--brand); }

.pnl__ara_alan {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    padding-inline: 2.3rem .75rem;
    border: 0;
    border-radius: inherit;
    background: transparent;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--ink);
    text-overflow: ellipsis;
}

.pnl__ara_alan::placeholder { color: var(--ink-mute); opacity: 1; }

.pnl__ara_alan:focus,
.pnl__ara_alan:focus-visible { outline: none; }

/* Kısayol ipucu (⌘ K / Ctrl K). Odakta ya da kutu doluyken gizli: o anda
   kullanıcı zaten kutunun içinde. */
.pnl__ara_kisa {
    flex: 0 0 auto;
    margin-inline-end: .5rem;
    padding: .0625rem .4rem;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background: var(--surface);
    font: 600 .6875rem/1.5 var(--font-sans);
    color: var(--ink-mute);
    white-space: nowrap;
    pointer-events: none;
}

.pnl__ara_kisa[hidden],
.pnl__ara_kutu:focus-within .pnl__ara_kisa,
.pnl__ara.is-dolu .pnl__ara_kisa { display: none; }

.pnl__ara_temizle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-inline-end: .3rem;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-mute);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.pnl__ara_temizle:hover { background: var(--brand-soft); color: var(--brand); }
.pnl__ara_temizle[hidden] { display: none; }
.pnl__ara_temizle .ay-ico { font-size: 13px; }

/* --- Sonuç yüzeyi ------------------------------------------------------- */
/* Kart kutuyla aynı genişlikte: iki kenarı da kutuya oturuyor. */
.pnl__ara_pano {
    top: calc(100% + 8px);
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    width: auto;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform-origin: top center;
}

/* Yüzey pencerenin dibine taşmasın: şerit + nefes payı düşülüyor. */
.pnl__ara_liste {
    max-height: min(28rem, calc(100vh - var(--pnl-ust-h, 4rem) - 6rem));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pnl__ara_grup[hidden] { display: none; }

/* Görünür ilk grup dışındakiler üstten ayrılıyor; gizli gruplar ayırıcı
   üretmesin diye :not([hidden]) iki tarafta da. */
.pnl__ara_grup:not([hidden]) ~ .pnl__ara_grup:not([hidden]) {
    margin-top: .25rem;
    padding-top: .25rem;
    border-top: 1px solid var(--hairline);
}

.pnl__ara_grup_ad {
    padding: .5rem .625rem .3rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    user-select: none;
}

.pnl__ara_oge {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 2.5rem;
    padding: .375rem .625rem;
    border-radius: 5px;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.pnl__ara_oge[hidden] { display: none; }

.pnl__ara_oge:hover,
.pnl__ara_oge:focus-visible { color: var(--ink); }

.pnl__ara_oge.is-aktif {
    background: var(--brand-soft);
    color: var(--brand);
}

.pnl__ara_ikon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: var(--brand-tint);
    color: var(--ink-soft);
    font-size: 13px;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.pnl__ara_oge.is-aktif .pnl__ara_ikon {
    background: var(--brand);
    color: var(--on-brand);
}

.pnl__ara_ad {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Eşleşen parça: sarı fosforlu zemin değil, kalın + alt çizgi — satırın
   etkin zemini (--brand-soft) ile çakışmıyor. */
.pnl__ara_ad mark {
    padding: 0;
    background: transparent;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(28, 74, 168, .4);
    text-underline-offset: 3px;
}

.pnl__ara_ust {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 45%;
    margin-inline-start: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
    font-weight: 500;
    color: var(--ink-mute);
}

.pnl__ara_oge .pnl__rozet {
    flex: 0 0 auto;
    margin-inline: .25rem 0;
}

.pnl__ara_bos {
    margin: 0;
    padding: 1.25rem .75rem;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--ink-mute);
}

.pnl__ara_bos[hidden] { display: none; }

.pnl__ara_alt {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin-top: .375rem;
    padding: .5rem .625rem .25rem;
    border-top: 1px solid var(--hairline);
    font-size: .75rem;
    color: var(--ink-mute);
    user-select: none;
}

.pnl__ara_alt kbd {
    display: inline-flex;
    justify-content: center;
    min-width: 1.25rem;
    margin-inline-end: .15rem;
    padding: 0 .3rem;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    background: var(--surface-2);
    font: 600 .6875rem/1.5 var(--font-sans);
    color: var(--ink-soft);
}

/* --- Mobil drawer örneği ------------------------------------------------
   Sonuçlar açılır yüzeyde DEĞİL, akışta ve menü listesinin yerine: drawer
   zaten dar bir kolon ve üstüne binen bir yüzey menüyü yarım örterdi.
   Kutu boşken yüzey hiç görünmüyor — altında menünün kendisi var. */
.pnl__ara--drw { margin: .25rem 0 .75rem; }

.pnl__ara--drw .pnl__ara_kutu,
.pnl__ara--drw .pnl__ara_kutu:focus-within {
    width: 100%;
    height: 46px;
}

/* 16px: iOS Safari 16 pikselin altındaki alanlara odaklanınca sayfayı
   yakınlaştırıyor. */
.pnl__ara--drw .pnl__ara_alan { font-size: 16px; }

.pnl__ara--drw .pnl__ara_pano {
    position: static;
    display: none;
    width: auto;
    min-width: 0;
    max-width: none;
    margin-top: .5rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
}

.pnl__ara--drw.is-open.is-dolu > .pnl__ara_pano { display: flex; }
.pnl__ara--drw.is-open.is-dolu ~ nav { display: none; }

.pnl__ara--drw .pnl__ara_liste {
    max-height: none;
    overflow: visible;
}

/* Dokunma hedefi 44px üstünde (WCAG 2.5.8) ve punto menü satırlarıyla aynı
   ailede. */
.pnl__ara--drw .pnl__ara_oge {
    min-height: 48px;
    font-size: var(--fs-base);
}

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

/* ==========================================================================
   ÖZEL TARİH ARALIĞI  (.arl)  —  2026-09-28

   KULLANICI KARARI: "raporlama sayfaları ve kartları için iki tarih aralığı
   gibi filtreleme seçenekleri de ekle... grafik, raporlama vs. ne varsa."

   Tek bileşen, üç yerde (panel/_tarih_araligi.php → ay_arl_form):
     · raporlar.php ve rapor-grafik.php süzgeç şeridinde (.rpr__suz)
     · panonun "Gönderim grafiği" başlık satırında (.hsp__baslik_satir)

   Yükseklik --control-h: şeritteki sekmeler, platform seçimi ve düğmelerle
   aynı çizgide dursun (tkv__git_girdi ile aynı gerekçe, § takvim).
   Etkin aralıkta alanların çerçevesi marka rengine dönüyor — sekmelerde
   hiçbiri etkin görünmüyor, seçimin nerede olduğunu çerçeve söylüyor.
   ========================================================================== */
.arl {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    margin: 0;
}

.arl__sim {
    display: inline-flex;
    color: var(--ink-mute);
    font-size: 14px;
}

.arl__tarih {
    width: auto;
    min-width: 8.75rem;
    height: var(--control-h);
    padding: 0 .625rem;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.arl__ayrac {
    color: var(--ink-mute);
    user-select: none;
}

.arl--aktif .arl__tarih { border-color: var(--brand); }
.arl--aktif .arl__sim   { color: var(--brand); }

/* Sıfırla: düğme değil bağlantı — ikincil eylem, "Uygula"nın ağırlığıyla
   yarışmasın. */
.arl__sifirla {
    margin-inline-start: .15rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.arl__sifirla:hover,
.arl__sifirla:focus-visible { color: var(--brand); }

/* Dar ekran: iki alan satırı eşit paylaşıyor, düğme ve bağlantı alt
   satırda. min-width 0 — 8.75rem iki kez 320 piksele sığmıyordu. */
@media (max-width: 560px) {
    .arl { flex: 1 1 100%; }

    .arl__tarih {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ==========================================================================
   ADK · YAPAY ZEKÂ  (.adk-yz)  —  2026-09-28   ·   adk-panel/yapay-zeka.php

   Sağlayıcı seçimi RADYO KARTLARI: yerel <input type="radio"> görünür ve
   odaklanabilir kalıyor (klavye + ekran okuyucu), kartın tamamı etikete
   bağlı. Seçili kart çerçevesini :has(:checked) ile alıyor; :has
   desteklenmeyen tarayıcıda radyonun kendisi seçimi göstermeye devam
   ediyor — bilgi renge ve çerçeveye bağlı değil.
   ========================================================================== */
.adk-yz__durum { border-inline-start: 4px solid var(--st-hata-ink, #b42318); }
.adk-yz__durum--hazir { border-inline-start-color: var(--brand); }

.adk-yz__durum_satir {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.adk-yz__adimlar { padding-inline-start: 1.25rem; }
.adk-yz__adimlar li + li { margin-top: .25rem; }

.adk-yz__saglayicilar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: .75rem;
}

.adk-yz__sag {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .875rem 1rem;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.adk-yz__sag:hover { border-color: var(--brand-line); }

.adk-yz__sag:has(.adk-yz__sag_girdi:checked) {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(1, 30, 90, .10);
}

.adk-yz__sag_girdi {
    flex: 0 0 auto;
    margin-top: .2rem;
    accent-color: var(--brand);
}

.adk-yz__sag_govde {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.adk-yz__sag_ad { font-size: var(--fs-base); color: var(--ink); }

.adk-yz__sag_taban {
    overflow-wrap: anywhere;
    font-size: .75rem;
    color: var(--ink-mute);
}

.adk-yz__rozet {
    align-self: flex-start;
    padding: .05rem .5rem;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink-soft);
}

/* "Ücretsiz" yazıyla da söyleniyor; renk tek taşıyıcı değil. */
.adk-yz__rozet--ucretsiz {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}

.adk-yz__baglantilar a { font-weight: 600; }

/* --- Kullanım kılavuzu (2026-09-28) --------------------------------------
   <details> akordeon: tarayıcının kendi bileşeni, JS yok. Seçili sağlayıcı
   açık geliyor. Özet satırı düğme gibi dolgulu ve tam genişlikte; ok işareti
   CSS ile (▸ / ▾), yerel üçgen gizli — tarayıcılar arasında aynı görünsün. */
.adk-yz__klv_h {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.adk-yz__secim th { font-size: var(--fs-sm); color: var(--ink-soft); }
.adk-yz__secim td { font-size: var(--fs-sm); }

.adk-yz__akordeon {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.adk-yz__klv {
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--surface);
}

.adk-yz__klv[open] { border-color: var(--brand-line); }

.adk-yz__klv_ozet {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.adk-yz__klv_ozet::-webkit-details-marker { display: none; }

.adk-yz__klv_ozet::before {
    content: "▸";
    color: var(--ink-mute);
    transition: transform var(--t-fast) var(--ease);
}

.adk-yz__klv[open] > .adk-yz__klv_ozet::before { transform: rotate(90deg); }

.adk-yz__klv_ozet:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
    border-radius: 8px;
}

.adk-yz__klv_govde {
    padding: 0 1rem 1rem 2.25rem;
    font-size: var(--fs-sm);
}

.adk-yz__klv_govde code {
    padding: .05rem .35rem;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: .8125rem;
}

.adk-yz__klv_govde a,
.adk-yz__sorun a { font-weight: 600; overflow-wrap: anywhere; }

.adk-yz__sorun dt {
    margin-top: .5rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
}

.adk-yz__sorun dd {
    margin: .15rem 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

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

/* ==========================================================================
   § 24w · SİTENE EKLE + WEB SOHBETLERİ  (.sbt__*)
           panel/sitene-ekle.php · panel/sohbetler.php  (2026-09-28)

   YENİ BİLEŞEN YOK, EKLER VAR. Ekranların iskeleti ortak parçalardan:
     durum kartı     .ajn__durum · .ajn__ozet · .ajn__otonom   (§ 24h)
     bölüm + form    .ajn__bolum · .ajn__satir · .ajn__sw      (§ 24h)
     kod kutusu      .bgl__adres · .bgl__kopyala               (§ 24i)
     gelen kutusu    .dm__liste · .dm__akis · .dm__cevap       (§ 24l)
   Burada yalnızca o parçaların karşılamadığı dört şey var: çok satırlı kod
   kutusu, kurulum adımları, renk alanı ve platform satırındaki web işareti.

   Pencerenin KENDİ stili burada DEĞİL: js/sohbet.js içinde (Shadow DOM,
   müşterinin sitesinde çalışıyor ve bu dosya orada yok).
   ========================================================================== */

/* --- Durum kartındaki eksik listesi ve "Sohbetler" düğmesi -------------- */
.sbt__durum .sbt__eksik { margin: .9rem 0 0; }
.sbt__eksik .ajn__otonom_liste a { font-weight: 600; margin-inline-start: .25rem; }
.sbt__durum .ajn__ozet { margin-top: 1rem; }
.sbt__durum .ajn__durum_eylem { display: inline-flex; align-items: center; gap: .4rem; }
.sbt__sayi {
    min-width: 1.35rem;
    padding: 0 .4rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
}

/* --- Kurulum kodu: çok satırlı kutu -------------------------------------
   .bgl__adres_kutu tek satırlık <input> için yazılmıştı. Kod 110+ karakter;
   textarea satır kırıyor (pre-wrap + anywhere) ki telefonda da tamamı
   görünsün — yatay kaydırmalı bir kodda sonunun kopyalandığı görülmüyor. */
.sbt__kod_alan {
    min-height: 4.5rem;
    /* Destekleyen tarayıcıda kutu kodun boyuna uzuyor: telefonda kod
       dört satıra kırılıyor ve 3 satırlık kutuda sonu görünmüyordu. */
    field-sizing: content;
    resize: none;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.sbt__kod_kutu .bgl__adres_satir { align-items: stretch; }
.sbt__kod_kutu .bgl__kopyala { align-self: flex-start; min-height: 2.5rem; }

/* --- Üç adım ------------------------------------------------------------- */
.sbt__adimlar {
    display: grid;
    gap: .55rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.sbt__adimlar li { display: flex; align-items: flex-start; gap: .65rem; }
.sbt__adim_no {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--r-pill);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .75rem;
    font-weight: 700;
}
.sbt__adimlar code,
.sbt__rehber code {
    padding: .05rem .35rem;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: .8125rem;
}

/* --- Platform rehberi / anahtar yenileme (<details>) -------------------- */
.sbt__rehber {
    margin: 1rem 0 0;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.sbt__rehber > summary {
    padding: .7rem .9rem;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--r-md);
}
.sbt__rehber > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.sbt__rehber[open] > summary { border-bottom: 1px solid var(--hairline); border-radius: var(--r-md) var(--r-md) 0 0; }
.sbt__rehber > :not(summary) { margin-inline: .9rem; }
.sbt__rehber > :last-child { margin-bottom: .9rem; }
.sbt__rehber_liste { display: grid; gap: .7rem; margin-top: .8rem; }
.sbt__rehber_liste dt { color: var(--ink); font-size: var(--fs-sm); font-weight: 650; }
.sbt__rehber_liste dd { margin: .15rem 0 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.sbt__rehber_csp { margin-top: .8rem; }
.sbt__anahtar { padding: 0; background: none; border: 0; }
.sbt__anahtar .sbt__rehber { margin: 0; }
.sbt__anahtar form { margin-top: .6rem; }
.sbt__anahtar .ay-btn { display: inline-flex; align-items: center; gap: .4rem; }
.sbt__rehber--tehlike > summary { color: var(--st-hata-ink, #B42318); }

/* --- Önizleme bölümü ----------------------------------------------------
   Düğme yalnızca betik yüklendiyse görünür (js/sitene-ekle.js kök öğeye
   .sbt--js koyuyor): JS'siz hâlde basınca hiçbir şey olmayan bir düğme
   bırakmıyoruz. Pencerenin kendi düğmesi zaten sağ altta. */
.sbt__onizleme .ajn__bolum_bas { margin-bottom: 0; align-items: center; }
.sbt__onizleme [data-sbt-ac] { display: none; }
.sbt--js .sbt__onizleme [data-sbt-ac] { display: inline-flex; align-items: center; gap: .4rem; }

/* --- Renk alanı --------------------------------------------------------- */
.sbt__renk { display: flex; align-items: center; gap: .6rem; }
.sbt__renk_girdi {
    width: 3rem;
    height: 2.5rem;
    padding: .2rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
}
.sbt__renk_girdi:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sbt__renk_kod {
    color: var(--ink-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
}

/* --- Web sohbetleri: platform işaretinin yerindeki web karosu ------------
   .dm__satir üç kolonlu ızgara ve ilk kolon platform karosu (.hsp__isaret)
   bekliyor. Web sohbetinin platformu yok; aynı ölçüde nötr bir karo. */
.sbt__isaret {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand);
}
.sbt__isaret .pnl__ikon { font-size: 15px; }
.dm__h2 .sbt__isaret { width: 2rem; height: 2rem; }

/* Sistem mesajı ("ekibimiz dönecek"): ziyaretçiye giden ama agent'ın
   üretmediği cümle — kesikli çerçeve ile ayrılıyor, müşteri hangisinin
   gerçek bir cevap olduğunu ayırt etsin. */
.sbt__sistem .dm__balon { border-style: dashed; background: var(--surface-2); }
.sbt__iletisim a { font-weight: 600; margin-inline-start: .25rem; }
.sbt__sil { display: inline-flex; align-items: center; gap: .35rem; }
@media (hover: hover) and (pointer: fine) {
    .sbt__sil:hover { color: var(--st-hata-ink, #B42318); border-color: var(--st-hata-line, rgba(180, 35, 24, .3)); }
}

@media (max-width: 640px) {
    .sbt__kod_kutu .bgl__adres_satir { flex-direction: column; }
    .sbt__kod_kutu .bgl__kopyala { align-self: stretch; justify-content: center; }
    .sbt__onizleme .ajn__bolum_bas { align-items: flex-start; }
}

/* --- § 24w-2 · ÖZELLEŞTİRME SEÇİCİLERİ (2026-09-28) ---------------------
   Logo ve düğme ikonu RADYO GRUBU: gerçek <input type="radio"> görünür
   kalmıyor ama erişilebilir (klavyeyle ok tuşları, ekran okuyucu grup adı
   <legend>'dan). Seçili hâl kutunun çerçevesinde; odak halkası da kutuda
   (:focus-visible girdiden kardeşe taşınıyor). */
.sbt__secim { margin: 0; padding: 0; border: 0; min-width: 0; }
.sbt__secim > legend { padding: 0; margin-bottom: .45rem; }
.sbt__secim input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.sbt__logolar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
    gap: .5rem;
    max-width: 34rem;
}
.sbt__logo { position: relative; display: grid; justify-items: center; gap: .3rem; cursor: pointer; }
.sbt__logo_kutu {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: 0 0 0 1px var(--hairline);
    transition: box-shadow var(--t-base) var(--ease);
}
.sbt__logo_kutu img { width: 100%; height: 100%; object-fit: cover; }
/* Baş harf + hazır simge: pencerede marka renginde çiziliyor; seçici de
   formdaki renge uyuyor (js/sitene-ekle.js --sbt-logo-* yazıyor). */
.sbt__logo_kutu--harf,
.sbt__logo_kutu--simge {
    background: var(--sbt-logo-zemin, var(--brand));
    color: var(--sbt-logo-yazi, #fff);
    font-weight: 700;
    font-size: 1.15rem;
}
.sbt__logo_kutu--simge svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.sbt__logo_ad { color: var(--ink-mute); font-size: .75rem; text-align: center; }

/* Bölüm başlıkları (kendi görseli · temsilciler · simgeler). */
.sbt__logo_grup_h {
    margin: .9rem 0 .45rem;
    color: var(--ink-soft);
    font-size: .8125rem;
    font-weight: 600;
}
.sbt__secim > legend + .sbt__logo_grup_h { margin-top: 0; }

/* Doğrudan yükleme kutusu. Dosya girdisi görünmez ama odaklanabilir
   (klavye); odak halkası kutuda. "yeni" radyosu yalnızca dosya seçilince
   açılıyor (JS). */
.sbt__logo_dosya {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.sbt__logo_kutu--yukle {
    position: relative;
    cursor: pointer;
    background: var(--surface);
    color: var(--ink-soft);
    box-shadow: inset 0 0 0 1.5px var(--hairline);
    outline: 1.5px dashed var(--ink-mute);
    outline-offset: -1.5px;
}
.sbt__logo_kutu--yukle svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.sbt__logo_kutu--yukle img { position: absolute; inset: 0; }
.sbt__logo--yukle.is-dolu .sbt__logo_kutu--yukle { outline: 0; }
.sbt__logo--yukle label.sbt__logo_ad {
    cursor: pointer;
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sbt__logo_dosya:focus-visible ~ .sbt__logo_kutu { outline: 2px solid var(--brand); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
    .sbt__logo--yukle:hover .sbt__logo_kutu--yukle { color: var(--brand); outline-color: var(--brand); }
}
.sbt__logo input:checked + .sbt__logo_kutu,
.sbt__ikon input:checked + .sbt__ikon_kutu { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.sbt__logo input:focus-visible + .sbt__logo_kutu,
.sbt__ikon input:focus-visible + .sbt__ikon_kutu { outline: 2px solid var(--brand); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
    .sbt__logo:hover .sbt__logo_kutu,
    .sbt__ikon:hover .sbt__ikon_kutu { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-line); }
}

.sbt__ikonlar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.sbt__ikon { position: relative; display: grid; justify-items: center; gap: .35rem; cursor: pointer; }
.sbt__ikon_kutu {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    transition: box-shadow var(--t-base) var(--ease);
}
.sbt__ikon_kutu svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.sbt__ikon_ad { color: var(--ink-soft); font-size: .8125rem; }
.sbt__kisa_alan { max-width: 12rem; }
.sbt__ariza_metin { margin: .35rem 0 0; }

/* --- § 24w-3 · YERLEŞİM + GELİŞMİŞ GÖRÜNÜM (2026-09-28) -----------------
   Aynı radyo kalıbı (§ 24w-2): girdi gizli ama erişilebilir, seçili hâl
   ve odak halkası kardeş kutuda.

   .sbt__cip       küçük seçenek hapı (köşe, başlık stili, düğme boyu)
   .sbt__yerlesim  iki kart: yüzen / gömülü
   .sbt__ekran     6 noktalı "ekran" — nokta ekranda göründüğü yerde
   .sbt__gomulu_kutu  önizlemede gömülü pencerenin konduğu kutu */
.sbt__cipler { display: flex; flex-wrap: wrap; gap: .5rem; }
.sbt__cip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.5rem;
    padding: .45rem .9rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline);
    color: var(--ink-soft);
    font-size: .875rem;
    cursor: pointer;
    transition: box-shadow var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.sbt__cip:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand); font-weight: 600; }
.sbt__cip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.sbt__cip_kose {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid currentColor;
    border-inline-start-color: transparent;
    border-block-end-color: transparent;
}
.sbt__cip_kose--keskin { border-start-end-radius: 1px; }
.sbt__cip_kose--normal { border-start-end-radius: 5px; }
.sbt__cip_kose--yuvarlak { border-start-end-radius: 10px; }

.sbt__yerlesimler { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.sbt__yerlesim {
    position: relative;
    display: flex;
    gap: .75rem;
    padding: .9rem 1rem;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline);
    cursor: pointer;
    transition: box-shadow var(--t-base) var(--ease);
}
.sbt__yerlesim_metin { display: grid; gap: .2rem; }
.sbt__yerlesim:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-tint); }
.sbt__yerlesim:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Ekran: 2 sütun × 3 satır; sol noktalar solda, sağ noktalar sağda. */
.sbt__ekran {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, minmax(2.75rem, auto));
    gap: .35rem 1rem;
    max-width: 26rem;
    padding: .75rem;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
}
.sbt__nokta {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    font-size: .8125rem;
    cursor: pointer;
}
.sbt__nokta--sag { flex-direction: row-reverse; text-align: end; }
.sbt__nokta_isaret {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--hairline);
    transition: box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.sbt__nokta input:checked ~ .sbt__nokta_isaret { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-line); }
.sbt__nokta input:checked ~ .sbt__nokta_ad { color: var(--brand); font-weight: 600; }
.sbt__nokta input:focus-visible ~ .sbt__nokta_isaret { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .sbt__nokta:hover .sbt__nokta_isaret { box-shadow: inset 0 0 0 2px var(--brand-line); }
}

.sbt__gomulu_kutu { max-width: 30rem; margin-top: 1rem; }
.sbt__gomulu_kutu[hidden] { display: none; }

/* ==========================================================================
   § 24x · SOHBET ANALİZİ  (panel/analiz.php · .anz__*)

   Raporların parçaları yeniden kullanılıyor: .rpr__suz (süzgeç şeridi),
   .pnl__olcut (özet kartları), .pnl__cizim (yığın sütun), .rpr__oran_ray
   (yatay oran çubuğu). Burada yalnızca analize özgü olanlar.

   ⚠ DİNAMİK ÖLÇÜ YOK: genişlikler (.rpr__oran_dolu--o<n>, .anz__dilim--w<n>)
   ve yükseklikler (.pnl__cbk_p--y<n>) sayfanın nonce'lu bloğundan geliyor
   (CSP: satır içi style yasak).

   DUYGU RENKLERİ: olumlu = onay mürekkebi, nötr = soluk mürekkep, olumsuz
   = hata mürekkebi. Renk tek taşıyıcı değil: her çubuğun yanında sayı/yüzde
   metni, çizimlerin yanında .ay-sr-only liste var.
   ========================================================================== */
.anz__izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 0 2rem;
}
.anz__kutu { min-width: 0; }
.anz__soluk { color: var(--ink-mute); font-weight: 400; }

/* ---- Türler: satır = bağlantı ---- */
.anz__cubuklar { display: grid; gap: .25rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.anz__cubuk {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(4rem, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .5rem .6rem;
    border-radius: var(--r-sm);
    color: var(--ink);
    text-decoration: none;
    transition: background var(--t-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .anz__cubuk:hover { background: var(--surface-2); }
}
.anz__cubuk:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.anz__cubuk--secili { background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
.anz__cubuk_ad { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.anz__ray.rpr__oran_ray { flex: none; width: 100%; height: 10px; }
.anz__cubuk--sikayet .rpr__oran_dolu,
.anz__cubuk--iade .rpr__oran_dolu { background: var(--st-hata-ink); }
.anz__cubuk--memnuniyet .rpr__oran_dolu { background: var(--st-ok-ink); }
.anz__cubuk--selam .rpr__oran_dolu,
.anz__cubuk--spam .rpr__oran_dolu,
.anz__cubuk--diger .rpr__oran_dolu { background: var(--ink-mute); }
.anz__cubuk_sayi {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    min-width: 5.5rem;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
}
.anz__cubuk_sayi span { color: var(--ink-mute); font-size: .8125rem; }

/* ---- Duygu dilimleri (tek %100 çubuk) ---- */
.anz__dilimler {
    display: flex;
    width: 100%;
    height: 14px;
    margin: .9rem 0 0;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--hairline);
}
.anz__dilim { display: block; height: 100%; width: 0; }
.anz__dilim--olumlu, .anz__p--olumlu, .anz__nokta--olumlu { background: var(--st-ok-ink); }
.anz__dilim--notr, .anz__p--notr, .anz__nokta--notr { background: var(--ink-mute); opacity: .55; }
.anz__dilim--olumsuz, .anz__p--olumsuz, .anz__nokta--olumsuz { background: var(--st-hata-ink); }
.anz__nokta--notr { opacity: .55; }
.anz__gosterge_bag { color: inherit; text-decoration: none; border-radius: var(--r-sm); }
.anz__gosterge_bag:hover { text-decoration: underline; text-underline-offset: 3px; }
.anz__gosterge_bag:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.anz__kanallar { display: grid; gap: .85rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.anz__kanal .anz__dilimler { margin-top: .35rem; height: 10px; }
.anz__kanal_ad {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}
.anz__yontem_not { margin-top: 1rem; }

/* ---- Konular ---- */
.anz__konular {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: .6rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}
.anz__konu {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem .75rem;
    padding: .75rem .9rem;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline);
    color: var(--ink);
    text-decoration: none;
    transition: box-shadow var(--t-base) var(--ease);
}
.anz__konu:hover { box-shadow: inset 0 0 0 1px var(--brand-line); }
.anz__konu:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.anz__konu--secili { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-tint); }
.anz__konu_ad { font-weight: 600; overflow-wrap: anywhere; }
.anz__konu_sayi { color: var(--ink-soft); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.anz__ray--olumsuz .rpr__oran_dolu { background: var(--st-hata-ink); }
.anz__konu .anz__ray { grid-column: 1; align-self: center; height: 6px; }
.anz__konu_oran { color: var(--ink-mute); font-size: .75rem; text-align: end; }

/* ---- Etkin süzgeç çipleri ---- */
.anz__etkin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    margin: .5rem 0 1rem;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
}
.anz__etkin_cip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: var(--r-pill);
    background: var(--brand-tint);
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}
.anz__etkin_cip:hover { background: var(--brand-soft); }
.anz__etkin_cip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.anz__etkin_temizle { color: var(--ink-soft); }

/* ---- Liste ---- */
.anz__liste { display: grid; gap: .6rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.anz__satir {
    --st-serit: var(--hairline);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .85rem;
    padding: .85rem 1rem;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline), inset 3px 0 0 var(--st-serit);
}
.anz__satir--olumlu  { --st-serit: var(--st-ok-ink); }
.anz__satir--olumsuz { --st-serit: var(--st-hata-ink); }
.anz__satir_ikon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-soft);
}
.anz__satir_bas { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0; }
.anz__kisi { overflow-wrap: anywhere; }
.anz__etiket {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
}
.anz__etiket--tur     { background: var(--brand-tint); color: var(--brand); }
.anz__etiket--olumlu  { background: var(--st-ok-bg); color: var(--st-ok-ink); }
.anz__etiket--olumsuz { background: var(--st-hata-bg); color: var(--st-hata-ink); }
.anz__etiket--acil    { background: var(--st-hata-ink); color: #fff; }
.anz__ozet { margin: .35rem 0 0; color: var(--ink); overflow-wrap: anywhere; }
.anz__satir_alt {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    margin: .35rem 0 0;
    color: var(--ink-mute);
    font-size: .8125rem;
}
.anz__konu_cip { color: var(--ink-soft); }
.anz__ac { align-self: center; white-space: nowrap; }

@media (max-width: 640px) {
    .anz__cubuk { grid-template-columns: minmax(0, 1fr) auto; }
    .anz__cubuk .anz__ray { grid-column: 1 / -1; grid-row: 2; }
    .anz__satir { grid-template-columns: auto minmax(0, 1fr); }
    .anz__ac { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Ayar ---- */
.anz__ayar_form { display: grid; gap: .75rem; justify-items: start; max-width: 44rem; margin: .5rem 0 1.25rem; }
.anz__ayar_form .ajn__sw { width: 100%; }
.anz__simdi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.anz__simdi .ajn__ipucu { margin: 0; }

/* ==========================================================================
   § 24h-onz · AGENT — KANAL KANAL İSTEM ÖNİZLEMESİ  (panel/agent.php · 2026-09-28)
   Özel mesaj · yorum · web penceresi: her biri modele giden istemin aynısı.
   ========================================================================== */
.ajn__onizleme_kanal {
    margin-top: .75rem;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline);
}
.ajn__onizleme_kanal > summary {
    padding: .7rem 1rem;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--ink);
    cursor: pointer;
}
.ajn__onizleme_kanal[open] > summary { box-shadow: inset 0 -1px 0 var(--hairline); }
.ajn__onizleme_kanal > .ajn__istem { margin: 0; border-radius: 0 0 var(--r-md) var(--r-md); }

/* ==========================================================================
   AI KREDİSİ KARTI (panel/_ai_kredi.php · 2026-09-28 gece)
   Kalan kredi, dönem çubuğu (<meter>), kanal kanal harcama. Az kaldığında
   ve bittiğinde sol kenar rengi değişiyor; bilgi yine YAZIYLA da duruyor.
   ========================================================================== */
.ajn__kredi {
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-inline-start: 4px solid var(--brand);
}
.ajn__kredi.is-az { border-inline-start-color: var(--st-bek-ink, #b54708); }
.ajn__kredi.is-bitti { border-inline-start-color: var(--st-hata-ink, #b42318); }
.ajn__kredi_ust { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.ajn__kredi_ust .hsp__h2 { margin: 0; }
.ajn__kredi_kalan { margin: 0; color: var(--ink-soft); }
.ajn__kredi_kalan strong { font-size: 1.5rem; color: var(--ink); margin-inline-end: .25rem; }
.ajn__kredi_cubuk { display: block; width: 100%; height: .6rem; margin: .6rem 0 .4rem; }
.ajn__kredi_kanal { list-style: none; margin: .5rem 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ajn__kredi_kanal li {
    display: flex; align-items: baseline; gap: .35rem;
    padding: .3rem .65rem; border: 1px solid var(--hairline); border-radius: var(--r-pill);
    font-size: var(--fs-sm); background: var(--surface-2);
}
/* ==========================================================================
   AI KREDİSİ · EK KREDİ SATIN AL  (panel/_ai_kredi.php · 2026-09-28)
   "kredi bittiğinde ekstra kredi satın al gibi birşey de olsun"
   Radyo kartları: seçili paket vurgulu çerçeve; "En avantajlı" rozeti.
   ========================================================================== */
.krd__al {
    margin-top: 1rem;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg, 16px);
    background: linear-gradient(180deg, var(--brand-soft, #F1F4FA), var(--surface) 70%);
}
.krd__al_bas {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    cursor: pointer;
    list-style: none;
}
.krd__al_bas::-webkit-details-marker { display: none; }
.krd__al_ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #FFF4D6;
    color: #B7791F;
    font-size: 18px;
}
.krd__al_metin { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.krd__al_metin strong { color: var(--ink); font-size: 1rem; }
.krd__al_metin span { color: var(--ink-soft); font-size: var(--fs-sm); }
.krd__al_ok { color: var(--ink-mute); transition: transform var(--t-base, .2s) var(--ease, ease); }
.krd__al[open] .krd__al_ok { transform: rotate(180deg); }
.krd__form { display: grid; gap: .9rem; margin: 0; padding: 0 1rem 1rem; }
.krd__paketler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.krd__paket { position: relative; display: block; cursor: pointer; }
.krd__paket input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.krd__paket_ic {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    height: 100%;
    padding: 1rem 1rem .9rem;
    border: 1.5px solid var(--hairline);
    border-radius: 14px;
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.krd__paket:hover .krd__paket_ic { border-color: var(--brand-line, rgba(1, 30, 90, .18)); transform: translateY(-1px); }
.krd__paket input:checked + .krd__paket_ic {
    border-color: var(--brand-accent, #1C4AA8);
    box-shadow: 0 0 0 3px rgba(28, 74, 168, .14), 0 8px 20px -12px rgba(1, 30, 90, .45);
}
.krd__paket input:checked + .krd__paket_ic::after {
    content: "";
    position: absolute;
    top: .8rem;
    inset-inline-end: .8rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-accent, #1C4AA8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.krd__paket input:focus-visible + .krd__paket_ic { outline: 2px solid var(--brand-accent, #1C4AA8); outline-offset: 2px; }
.krd__rozet {
    align-self: flex-start;
    margin-bottom: .25rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: #12B76A;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.krd__kredi { color: var(--ink); font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.krd__kredi small { color: var(--ink-mute); font-size: .8rem; font-weight: 600; letter-spacing: 0; }
.krd__fiyat { color: var(--brand); font-size: 1.1rem; font-weight: 700; }
.krd__alt { color: var(--ink-mute); font-size: .78rem; }
.krd__alt_satir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.krd__yontem { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; }
.krd__yontem label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.krd__yontem label:has(input:checked) { border-color: var(--brand-accent, #1C4AA8); background: var(--brand-soft, #F1F4FA); color: var(--brand); }
.krd__yontem input { accent-color: var(--brand-accent, #1C4AA8); margin: 0; }

/* ==========================================================================
   24z · PANEL MENÜ GRUPLARI + BÖLÜM SEKMELERİ  —  2026-10-01

   Kullanıcı kararı: "panellerin içindeki dağınıklığı gider… ilk kez panele
   giren birisi bile kolay ve anlaşılır bir şekilde istediği her şeyi
   rahatlıkla kullanabilmeli."

   1) Yan menü ve drawer gruplara ayrıldı (panel/_panel.php → $ay_menu
      'grup'): Gelen kutusu · Sosyal medya · Yapay zekâ asistanı ·
      Raporlar · Hesap ve kurulum. Başlık küçük, büyük harfli, soluk bir
      etiket — satırlarla yarışmıyor, yalnızca ayırıyor.
   2) Birden çok ekranı olan bölümlerde içeriğin tepesinde sekme şeridi
      (.pnl__altnav): Agent · Sitene Ekle · Raporlar · Profil/Paket.
   ========================================================================== */

/* --- Yan menü grubu (masaüstü) --- */
.pnl__grup {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: .7rem;
}
.pnl__grup_ad {
    margin: 0;
    padding: .2rem .7rem .15rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ink-mute);
}
/* Satırlar grup içinde biraz sıkı: 15 satır + 5 başlık 768 piksellik bir
   pencerede kaydırmasız sığsın. */
.pnl__grup .pnl__oge {
    min-height: 36px;
    padding-block: .4rem;
}

/* --- Drawer grubu (mobil) --- */
.pnl__drw .pnl__drw_grup {
    padding: 1.1rem .125rem .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.drawer__body > nav > ul > .pnl__drw_grup:first-child { padding-top: .25rem; }
/* Başlığın hemen altındaki satıra ayırıcı çizgi gelmesin (§ 7'deki
   'li + li .hdr__link' kuralı); başlığın kendisi ayırıcı. */
.pnl__drw .pnl__drw_grup + li .hdr__link { border-top: 0; }
.pnl__drw .drawer__body li + .pnl__drw_grup { border-top: 1px solid var(--hairline); margin-top: .25rem; }

/* Liste artık ~22 satır. Kademeli giriş adımı 45 ms → 22 ms; aksi hâlde
   son satır bir saniye gecikmeyle geliyordu. Değerler yalnızca menüde. */
@media (max-width: 900px) {
    .pnl__drw .drawer__body li:nth-child(n)  { animation-delay: .08s; }
    .pnl__drw .drawer__body li:nth-child(n+3)  { animation-delay: .12s; }
    .pnl__drw .drawer__body li:nth-child(n+6)  { animation-delay: .17s; }
    .pnl__drw .drawer__body li:nth-child(n+9)  { animation-delay: .22s; }
    .pnl__drw .drawer__body li:nth-child(n+12) { animation-delay: .27s; }
    .pnl__drw .drawer__body li:nth-child(n+15) { animation-delay: .32s; }
    .pnl__drw .drawer__body li:nth-child(n+18) { animation-delay: .37s; }
    .pnl__drw .drawer__body li:nth-child(n+21) { animation-delay: .42s; }
    .pnl__drw .drawer__foot > *:nth-child(1)   { animation-delay: .47s; }
}

/* --- Bölüm sekmeleri --- */
.pnl__altnav {
    display: flex;
    gap: .25rem;
    margin: 0 0 1.25rem;
    padding: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--hairline);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.pnl__altnav::-webkit-scrollbar { display: none; }
.pnl__altnav_oge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    margin-bottom: -1px;
    padding: .65rem .95rem;
    border-bottom: 2px solid transparent;
    border-radius: var(--r-md) var(--r-md) 0 0;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pnl__altnav_oge .pnl__ikon { font-size: 15px; color: var(--ink-mute); }
.pnl__altnav_oge:hover { color: var(--brand); background: var(--brand-soft); }
.pnl__altnav_oge:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }
.pnl__altnav_oge.is-aktif { color: var(--brand); border-bottom-color: var(--brand); }
.pnl__altnav_oge.is-aktif .pnl__ikon,
.pnl__altnav_oge:hover .pnl__ikon { color: var(--brand); }

/* Gruplu menü 15 satır + 5 başlık: 900 piksellik bir pencerede son grup
   ("Hesap ve kurulum") kolonun dibindeki kota kartının arkasında kalıyordu.
   Alçak pencerede satırlar biraz sıkışıyor ve kota kartı tek satıra iniyor
   (ölçer ve "x / y kullanıldı" satırı gizli; aynı bilgi Medya ekranında). */
@media (min-width: 901px) and (max-height: 980px) {
    .pnl__grup { margin-top: .45rem; gap: .125rem; }
    .pnl__grup_ad { padding-block: .1rem; }
    .pnl__nav { gap: .125rem; }
    .pnl__oge,
    .pnl__grup .pnl__oge { min-height: 33px; padding-block: .3rem; }
    .pnl__yan_alt .pnl__olcum,
    .pnl__yan_alt .pnl__kota_alt { display: none; }
    .pnl__yan_alt .pnl__kota { padding-block: .5rem; }
}

/* ==========================================================================
   24-CÜZDAN · ÜST ŞERİDİN CÜZDAN DÜĞMESİ VE AÇILIR ÖZETİ  (2026-10-01)

   KULLANICI KARARI: "header'da user butonunun soluna cüzdan ikonu gibi bir
   şey ekle. bunun içinde abonelik, yapay zekâ kredisi, kalan gün ve ödeme
   işlemleri, ödeme geçmişi/hareketleri…"

   Markup panel/_cuzdan_pop.php, veri panel/_cuzdan_ortak.php, açma/kapama
   AY.Dropdown (js/main.js). Düğme profil ve çıkışla AYNI daire
   (.pnl__ust_dgm, § 24a) — burada yalnızca dikkat noktası ve açık hâl.
   Yüzey ürünün popover'ı (.ay-pop, theme.css § 5); her panel sayfasında
   basıldığı için kurallar burada, cuzdan.css'te değil (o dosya yalnızca
   cüzdan ekranının ödediği stiller).

   MOBİLDE YOK: .pnl__ust_sag telefonda gizli (§ 24c); karşılığı mobil
   menünün "Cüzdan" satırı (_panel_hdr.php) — dikkat noktası orada da.
   ========================================================================== */
.czd-pop {
    position: relative;
    display: flex;
    flex: 0 0 auto;
}

.czd-pop__btn { position: relative; }
.czd-pop__btn[aria-expanded="true"] {
    border-color: var(--brand-line);
    background: var(--brand-soft);
    color: var(--brand);
}

/* DİKKAT NOKTASI — renk tek taşıyıcı değil, düğmenin sr-only metni de
   söylüyor. Zeminden ayrılsın diye beyaz halka. */
.czd-pop__nokta {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ig-solid);
    box-shadow: 0 0 0 2px var(--surface);
    pointer-events: none;
}
/* Mobil menü satırında: etiketin sağında, okun solunda (akışta). */
.czd-pop__nokta--satir {
    position: static;
    flex: 0 0 auto;
    margin-inline-end: .35rem;
    box-shadow: none;
}

.czd-pop__yuzey {
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: min(360px, calc(100vw - 2rem));
    max-height: calc(100vh - var(--pnl-ust-h, 4rem) - 2rem);
    padding: .5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--hairline);
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform-origin: top right;
}
[dir="rtl"] .czd-pop__yuzey { transform-origin: top left; }

/* JS'SİZ YOL: işaret (.is-js) yokken yüzey odakla açılıyor. */
.czd-pop:not(.is-js):focus-within > .ay-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.czd-pop__bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .3rem .5rem .55rem;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: .2rem;
}
.czd-pop__baslik {
    margin: 0;
    color: var(--ink);
    font-size: var(--fs-base);
    font-weight: 700;
}
.czd-pop__tumu {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}
.czd-pop__tumu:hover,
.czd-pop__tumu:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* --- Abonelik / kredi satırları ---------------------------------------- */
.czd-pop__satir {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .6rem;
    border-radius: var(--r-md);
    color: var(--ink);
    text-decoration: none;
    transition: background-color var(--t-fast) var(--ease);
}
.czd-pop__satir:hover,
.czd-pop__satir:focus-visible { background: var(--brand-soft); }
.czd-pop__satir.is-uyari { background: var(--st-bek-bg); }

.czd-pop__sim {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand);
}
.czd-pop__sim .pnl__ikon { font-size: 15px; }
.czd-pop__satir:hover .czd-pop__sim { background: var(--surface); }
.czd-pop__satir.is-uyari .czd-pop__sim { background: var(--surface); color: var(--st-bek-ink); }

.czd-pop__govde {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}
.czd-pop__et {
    color: var(--ink-mute);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.czd-pop__deger {
    color: var(--ink);
    font-weight: 650;
    overflow-wrap: anywhere;
}
.czd-pop__alt {
    color: var(--ink-soft);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}
.czd-pop__satir.is-uyari .czd-pop__alt { color: var(--st-bek-ink); }

/* Ölçerler satırda ince: panonun çubukları (.pnl__ilerleme, .ajn__kredi_cubuk)
   aynen, yalnızca boşluk ve kalınlık küçülüyor. */
.czd-pop__cubuk.pnl__ilerleme,
.czd-pop__cubuk.ajn__kredi_cubuk {
    height: 5px;
    margin: .45rem 0 .1rem;
}

/* --- Bekleyen havale ---------------------------------------------------- */
.czd-pop__bekleyen {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .1rem 0;
    padding: .55rem .65rem;
    border: 1px solid var(--st-bek-line);
    border-radius: var(--r-md);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}
.czd-pop__bekleyen:hover,
.czd-pop__bekleyen:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* --- Son hareketler ----------------------------------------------------- */
.czd-pop__ara_baslik {
    margin: .45rem .5rem 0;
    color: var(--ink-mute);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .02em;
}
.czd-pop__bos {
    margin: .25rem .5rem .35rem;
    color: var(--ink-mute);
    font-size: var(--fs-sm);
}
.czd-pop__liste {
    margin: 0;
    padding: 0 .5rem;
    list-style: none;
}
.czd-pop__hareket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
}
.czd-pop__hareket + .czd-pop__hareket { border-top: 1px solid var(--hairline); }
.czd-pop__h_sol,
.czd-pop__h_sag {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.czd-pop__h_sol { min-width: 0; }
.czd-pop__h_sag { flex: 0 0 auto; align-items: flex-end; }
.czd-pop__h_ad {
    overflow: hidden;
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.czd-pop__h_tarih {
    color: var(--ink-mute);
    font-size: .75rem;
}
.czd-pop__h_tutar {
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.czd-pop__h_durum {
    padding: 0 .4rem;
    font-size: .7rem;
    white-space: nowrap;
}

.czd-pop__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .3rem;
    padding: .6rem .5rem .3rem;
    border-top: 1px solid var(--hairline);
}
.czd-pop__eylem .ay-btn { flex: 1 1 auto; justify-content: center; }

/* BEKLEYEN ödeme rozeti — .abn__durum'un üçüncü tonu (cüzdan ekranı ve
   özet). Onay beklemek bir hata değil: "dikkat" tonu, kırmızı değil. */
.czd__durum--bek {
    border-color: var(--st-bek-line);
    background: var(--st-bek-bg);
    color: var(--st-bek-ink);
}