/* ============================================================
   PTS — Kurumsal ERP Tasarım Sistemi (gradient + efekt katmanı)
   Renk/tipografi/radius MudTheme'den (PtsTheme.cs) gelir.
   Buraya YALNIZCA MudBlazor ile ifade edilemeyen şeyler yazılır:
   gradient'ler, hover efektleri, sol menü kimliği.
   Gradient kuralı (ölçülü): sadece sol menü, login, dashboard KPI.
   ============================================================ */

:root {
    --pts-radius-card: 16px;
    --pts-shadow-soft: 0 2px 8px rgba(15, 23, 42, .06);
    --pts-shadow-kpi: 0 6px 20px rgba(37, 99, 235, .18);
    --pts-ease: .18s ease;
}

body {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Üst bar: beyaz zeminde ince alt çizgi (içerikle karışmasın) ---- */
.mud-appbar.mud-appbar-fixed-top {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ============================================================
   SOL MENÜ — uygulamanın en güçlü görsel alanı (koyu lacivert ada)
   ============================================================ */
.pts-drawer .mud-drawer-content {
    background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
    border-right: none;
}

/* Sağdan açılan paneller (sipariş detayı, rezervasyon, destek sohbeti): temanın DrawerBackground'u sol menü için
   koyu lacivert — sağ panel onu devralınca light modda koyu açılıyordu. Sayfa yüzeyi rengini alır (dark modda yine koyu). */
.mud-drawer.mud-drawer-pos-right {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* Menü grupları arası ferahlık. Üst seviyedeki tek bağlantı `pts-nav-row` sarmalayıcısındadır (yıldız için);
   o da aynı yan boşluğu almalı, yoksa Raporlar gibi satırlar grup başlıklarından 8 px solda kalır (04.11.2026). */
.pts-drawer .mud-nav-group,
.pts-nav-panel > .mud-navmenu > .mud-nav-link,
.pts-nav-panel > .mud-navmenu > .pts-nav-row {
    margin: 2px 8px;
}

/* Menü satırı sıkılığı (04.11.2026): MudBlazor varsayılanı 8 px dikey dolgu + alt satırda 36 px girinti
   menüyü seyrek gösteriyordu; 6 px / 28 px ile ikon-yazı hizası korunur, menü bir satır kısalır. */
.pts-drawer .mud-nav-link {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.pts-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-inline-start: 28px !important;
}

/* ============================================================
   FORM BOŞLUKLARI (04.11.2026, UI-STANDARD §Form ve Dialog)
   Spacing verilmemiş <MudGrid> MudBlazor'da 24 px hücre boşluğu basar; formlarda alanlar birbirinden
   kopuk görünüyordu (Yeni Personel formu bir ekrana sığmıyordu). 128 yerde Spacing yazılmamıştı → tek
   kuralla 12 px. Spacing="2"/"3" verilen gridler bu kuraldan ETKİLENMEZ.
   ============================================================ */
.mud-grid.mud-grid-spacing-xs-6 {
    margin-top: -12px;
    margin-left: -12px;
    width: calc(100% + 12px);
}

.mud-grid.mud-grid-spacing-xs-6 > .mud-grid-item {
    padding: 12px 0 0 12px;
}

.pts-drawer .mud-navmenu {
    padding: 8px 0;
}

/* Link ve grup başlıkları: açık gri metin, yuvarlak köşe */
.pts-drawer .mud-nav-link,
.pts-drawer .mud-nav-group .mud-nav-link.mud-nav-group-header {
    color: #CBD5E1 !important;
    border-radius: 10px;
    transition: background-color var(--pts-ease), color var(--pts-ease);
}

.pts-drawer .mud-nav-link .mud-icon-root,
.pts-drawer .mud-nav-group .mud-nav-link .mud-icon-root {
    color: #94A3B8;
    transition: color var(--pts-ease);
}

/* Hover: hafif mavi tint */
.pts-drawer .mud-nav-link:hover {
    background-color: rgba(37, 99, 235, .18) !important;
    color: #FFFFFF !important;
}

.pts-drawer .mud-nav-link:hover .mud-icon-root {
    color: #FFFFFF;
}

/* Aktif menü: mavi gradient + beyaz + hafif glow */
.pts-drawer .mud-nav-link.active {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .45);
}

.pts-drawer .mud-nav-link.active .mud-icon-root {
    color: #FFFFFF;
}

.pts-drawer .mud-nav-group .mud-nav-link.mud-nav-group-header:hover {
    background-color: rgba(148, 163, 184, .12) !important;
    color: #FFFFFF !important;
}

/* ---- Modül rayı (sol dikey ikon şeridi) + panel yerleşimi ---- */
.pts-nav {
    display: flex;
    height: 100%;
    min-height: 0;
}

.pts-nav-panel {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Geliştirici bilgisi — menünün en altına yaslanır (BydySoft / bydysoft.com) */
.pts-dev-credit {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px 20px;
    text-decoration: none;
    opacity: .65;
    transition: opacity .15s ease;
}

.pts-dev-credit:hover {
    opacity: 1;
}

.pts-dev-credit-label {
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.pts-dev-credit-logo {
    height: 26px;
    width: auto;
    display: block;
}

/* Ray yalnızca 2+ modül varken çıkar */
.pts-rail {
    flex: 0 0 66px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 6px;
    background: rgba(0, 0, 0, .28);
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.pts-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 2px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #94A3B8;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background-color var(--pts-ease), color var(--pts-ease), box-shadow var(--pts-ease);
}

.pts-rail-item .mud-icon-root {
    font-size: 1.45rem;
    color: inherit;
}

.pts-rail-item:hover {
    background: rgba(37, 99, 235, .18);
    color: #FFFFFF;
}

.pts-rail-item.active {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .45);
}

/* Açık çalışma alanının adı — menünün tepesinde. Raydaki 10 px'lik etiket tek başına
   görülmüyordu; kullanıcı hangi modülün menüsüne baktığını anlayamıyordu. */
.pts-nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    color: #FFFFFF;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.pts-nav-title .mud-icon-root {
    color: #60A5FA;
}

/* Menü satırı: bağlantı + favori yıldızı. Yıldız HER ZAMAN soluk görünür: yalnız üzerine gelince
   çıkan yıldız dokunmatik ekranda hiç görünmüyor, farede de keşfedilmiyordu (kullanıcı geri
   bildirimi 21.09.2026). Gürültü yapmasın diye dinlenirken soluk, satıra gelince belirgindir. */
.pts-nav-row {
    position: relative;
    display: flex;
    align-items: center;
}

/* Menüde bekleyen sayısı (WhatsApp Görüşmeleri — docs/ESNAFHAN.md §8.8). */
.pts-nav-badge {
    display: inline-block;
    min-width: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}

.pts-nav-row > .mud-nav-item {
    flex: 1 1 auto;
    min-width: 0;
}

/* Yıldızlı satırda uzun ekran adı yıldızın altına girmesin. (!important: MudBlazor grup içindeki
   bağlantının sağ boşluğunu daha özgül bir seçiciyle sıfırlıyor.) */
.pts-nav-row--star .mud-nav-link {
    padding-inline-end: 46px !important;
}

/* ⚠ Dikey ortalama AÇIKÇA yazılır (top + translate). Düğme MudTooltip'in sıfır yükseklikli
   sarmalayıcısının içindedir; `top` verilmezse o sarmalayıcının tepesinden (= satırın ortasından)
   aşağı sarkar: 15 px kayar, alt yarısı sonraki satırın altında kalır ve tıklanamaz. */
.pts-nav-star {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .32);
    cursor: pointer;
    transition: color var(--pts-ease), background-color var(--pts-ease), transform var(--pts-ease);
}

.pts-nav-star .mud-icon-root {
    font-size: 1.35rem;
}

.pts-nav-row:hover .pts-nav-star,
.pts-nav-star:focus-visible {
    color: rgba(255, 255, 255, .9);
}

.pts-nav-star.on,
.pts-nav-row:hover .pts-nav-star.on {
    color: #FBBF24;
}

.pts-nav-star:hover,
.pts-nav-row:hover .pts-nav-star:hover {
    background: rgba(251, 191, 36, .2);
    color: #FBBF24;
}

.pts-nav-star:active {
    transform: translateY(-50%) scale(.9);
}

.pts-nav-star:focus-visible {
    outline: 2px solid #FBBF24;
    outline-offset: -2px;
}

.pts-nav-sep {
    border-color: rgba(255, 255, 255, .08) !important;
    margin: 8px 12px;
}

/* Menü içi bölüm başlığı (Ayarlar rayında "Firmam" / "Platform").
   Tıklanabilir görünmemeli: link değil, ayırıcı bir etikettir. */
.pts-nav-caption {
    display: block;
    padding: 10px 16px 4px;
    color: rgba(255, 255, 255, .45) !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 600;
}

/* ============================================================
   KPI / ÖZET KARTLARI — nötr zemin; renk yalnız "buna bak" demekse (04.11.2026)
   Eskiden dört kart dört doygun gradient'ti (mavi/yeşil/sarı/kırmızı) ve renk anlam taşımıyordu. Şimdi kart
   yüzey renginde + ince çizgi; yalnız KpiCardRules.IsAlert (red/amber + sayı > 0) → .pts-kpi--alert renk alır.
   Renk sınıfları (.pts-kpi-red …) tek başına hiçbir şey boyamaz, yalnız --alert ile birlikte çalışır.
   ============================================================ */
.pts-kpi {
    position: relative;
    border-radius: var(--pts-radius-card);
    padding: 20px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    min-height: 118px;
    box-shadow: none;
    transition: transform var(--pts-ease), box-shadow var(--pts-ease), border-color var(--pts-ease);
    cursor: pointer;
    height: 100%;
}

.pts-kpi:hover {
    transform: translateY(-2px);
    border-color: var(--mud-palette-primary);
    box-shadow: var(--pts-shadow-soft);
}

.pts-kpi--alert.pts-kpi-red    { --pts-kpi-accent: #DC2626; }
.pts-kpi--alert.pts-kpi-amber  { --pts-kpi-accent: #D97706; }

.pts-kpi--alert {
    border-color: var(--pts-kpi-accent);
    box-shadow: inset 0 0 0 1px var(--pts-kpi-accent);
}

.pts-kpi--alert .pts-kpi-value,
.pts-kpi--alert .mud-typography-h5 {
    color: var(--pts-kpi-accent);
}

.pts-kpi--alert .pts-kpi-icon {
    color: var(--pts-kpi-accent);
    opacity: 1;
}

/* Liste üstündeki kutu ŞERİDİ (Siparişler aşama kutuları, 04.11.2026): telefonda kutular alt alta 3 satır tutup listeyi
   aşağı itiyordu → dar ekranda tek satır, parmakla yana kaydırılır; geniş ekranda sıradan ızgara. Seçili kutunun dış
   çerçevesi (outline) kaydırma kabında kesilmesin diye şeride dikey boşluk verilir. */
@media (max-width: 599.98px) {
    .pts-kpi-strip.mud-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding: 6px 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .pts-kpi-strip.mud-grid > .mud-grid-item {
        flex: 0 0 46%;
        max-width: none;
        scroll-snap-align: start;
    }
}

/* Panel kısayol kartı (Ayarlar paneli) — sayısı olmayan ekranlara giden kart. */
.pts-shortcut {
    cursor: pointer;
    height: 100%;
    transition: border-color var(--pts-ease), box-shadow var(--pts-ease), transform var(--pts-ease);
}

.pts-shortcut:hover {
    transform: translateY(-2px);
    border-color: var(--mud-palette-primary);
    box-shadow: var(--pts-shadow-kpi);
}

/* Tıklanmayan kart tıklanabilir görünmemeli: "bastım bir şey olmadı" en sinir bozucu geri bildirimdir.
   KpiCard Href yoksa, FilterStatCard OnClick yoksa .pts-kpi--static ekler. Çıplak .pts-kpi YAZMA — tıklanabilir
   görünür (Stok ekranının "Tükenen" kutusu böyleydi: basan esnaf listeyi göremiyordu, 27.09.2026). */
.pts-kpi--static {
    cursor: default;
}

.pts-kpi--static:hover {
    transform: none;
    border-color: var(--mud-palette-lines-default);
    box-shadow: none;
}

.pts-kpi--static.pts-kpi--alert:hover {
    border-color: var(--pts-kpi-accent);
    box-shadow: inset 0 0 0 1px var(--pts-kpi-accent);
}

/* Liste üstündeki filtre kutusu seçiliyken (FilterStatCard): süzgecin açık olduğu kutudan da okunur. */
.pts-kpi--selected {
    outline: 3px solid var(--mud-palette-text-primary);
    outline-offset: 2px;
}

.pts-kpi .pts-kpi-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--mud-palette-text-secondary);
    opacity: .35;
    font-size: 3.2rem;
    line-height: 1;
}

.pts-kpi .pts-kpi-label {
    font-size: .8rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    letter-spacing: .2px;
}

.pts-kpi .pts-kpi-value {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 4px;
}

.pts-kpi .pts-kpi-caption {
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* Oran çubuğu (KpiCard Progress): sayının altında ince şerit. */
.pts-kpi .pts-kpi-progress {
    margin-top: 10px;
}

/* Alçak kart (KpiCard Compact, 04.11.2026): ikinci plandaki sayılar — üst sıranın yarısı kadar yer kaplar,
   sayı ve simge küçülür; esnafın gözü önce büyük dört karta gider. */
.pts-kpi--compact {
    padding: 12px 14px;
    min-height: 0;
}

.pts-kpi--compact .pts-kpi-icon {
    top: 10px;
    right: 12px;
    font-size: 2rem;
}

.pts-kpi--compact .pts-kpi-value {
    font-size: 1.35rem;
    margin-top: 2px;
}

/* Alçak kartta etiket sağ üstteki simgenin altına girmesin (FilterStatCard dar kutuları: "Süresi Doluyor (30 gün)"). */
.pts-kpi--compact .pts-kpi-label {
    padding-right: 34px;
}

/* ============================================================
   SAYFA BAŞLIĞI (PageHeader + aynı sınıfı kullanan elle başlıklar) — KUTUSUZ (04.11.2026)
   Süzgeç ve tablo kutularının üstünde üçüncü bir kutu hiçbir şeyi gruplamıyordu; başlık düz zeminde durur,
   yalnız avatar renklidir.
   ============================================================ */
.pts-page-header {
    background: transparent !important;
    box-shadow: none !important;
    border: none;
    padding: 4px 4px 2px;
}

/* Başlık satırı (05.11.2026, UI-STANDARD §Sayfa başlığı): başlık bloğu esner ama ~280 px'in altına inmez; düğme kabı KÜÇÜLMEZ
   (flex: 0 0 auto) ve içindekileri yan yana dizer. Yan yana sığmıyorlarsa satır sarar, düğmeler TOPLUCA alta iner. Eskiden kap
   sıkışıp blok öğeleri (<div data-tour>, menü sarmalı) alt alta diziyordu — sayfa başına MudStack yazmak gerekmez. */
.pts-page-header .pts-header-title {
    flex: 1 1 280px;
    min-width: 0;
}

.pts-page-header .pts-header-actions-row {
    display: flex;
    flex: 0 0 auto;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.pts-page-header .pts-header-avatar {
    box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}

/* ============================================================
   KART HOVER — genel kalkma efekti (opt-in .pts-hover)
   ============================================================ */
.pts-hover {
    transition: transform var(--pts-ease), box-shadow var(--pts-ease);
}

.pts-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .10);
}

/* Butonlarda hafif basınç hissi */
.mud-button-root:active {
    transform: scale(.99);
}

/* ============================================================
   ÜST ÇUBUKSUZ DÜZEN (EmptyLayout) — giriş, kayıt, şifre, PDKS okutma
   MudMainContent üst çubuk yüksekliği kadar boşluğu koşulsuz basar; çubuk yokken tepede beyaz şerit kalıyordu.
   ============================================================ */
.pts-empty-main { padding-top: 0 !important; }

/* ============================================================
   GİRİŞ / HESAP SAYFALARI — desenli lacivert zemin (tanıtım sitesinin "hero" dili: aynı degrade + ızgara + turuncu ışık)
   Tek kart (şifre, kayıt, doğrulama) ve bölmeli kart (giriş: marka paneli + form) aynı zemini kullanır.
   ============================================================ */
.pts-login-bg {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color-scheme: light;
    background:
        radial-gradient(1100px 560px at 88% -12%, rgba(255, 74, 20, .30), transparent 60%),
        radial-gradient(900px 520px at -8% 110%, rgba(43, 79, 166, .50), transparent 62%),
        linear-gradient(160deg, #13285E 0%, #0B1B41 52%, #060E22 100%);
    overflow: clip;   /* hidden sticky'yi bozar (kayıt paneli) */
}
.pts-login-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 10%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at 30% 10%, #000 0%, transparent 70%);
}
.pts-login-bg > * { position: relative; z-index: 1; }

/* Kartlar: zemin koyu olduğundan kağıt hep açık (MudPaper tema rengini alır; düzenin karanlık modu yok) */
.pts-login-bg .mud-paper {
    background: #FFFFFF;
    color: #1F2937;
    box-shadow: 0 24px 60px rgba(3, 10, 30, .45);
}

/* Bölmeli giriş kartı: sol marka paneli + sağ form */
.pts-login-split {
    width: 100%;
    max-width: 1040px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    overflow: clip;   /* hidden DEĞİL: hidden kaydırma kabı yapar, içerideki sticky (kayıt paneli) tutunamaz */
}
.pts-login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 36px 40px 0;
    color: #fff;
    background:
        radial-gradient(520px 320px at 100% 0%, rgba(255, 74, 20, .38), transparent 62%),
        radial-gradient(420px 300px at 0% 100%, rgba(37, 99, 235, .45), transparent 65%),
        linear-gradient(165deg, #1E3A8A 0%, #13285E 55%, #0B1B41 100%);
    overflow: clip;   /* hidden DEĞİL: hidden kaydırma kabı yapar, içerideki sticky (kayıt paneli) tutunamaz */
}
.pts-login-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse at 20% 0%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at 20% 0%, #000 0%, transparent 72%);
}
.pts-login-brand > * { position: relative; }
.pts-login-brand-logo { height: 56px; width: auto; display: block; }
.pts-login-brand h2 {
    margin: 22px 0 10px;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
}
.pts-login-brand h2 .hl { color: #FF7A4A; }
.pts-login-brand p { margin: 0; color: #C3CFE6; font-size: .98rem; line-height: 1.55; }
.pts-login-shots {
    display: block;
    width: 106%;
    max-width: none;
    margin: 4px 0 -40px -14px;   /* sağ/alt kenardan taşar (aside overflow:hidden): ekranlar kartın içinden "çıkıyor" */
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35));
}
.pts-login-form { padding: 36px 36px 28px; min-width: 0; }

/* Kayıt: form uzun → marka paneli sütunu dar, içeriği yapışkan (kaydırırken üstte kalır); panel zemini sütun boyunca uzar */
.pts-login-split--signup { max-width: 1080px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.pts-login-split--signup .pts-login-brand { padding: 0; display: block; }
.pts-login-brand-sticky { position: sticky; top: 0; padding: 36px 36px 0; overflow: hidden; }
.pts-login-split--signup .pts-login-shots { width: 118%; margin: 8px 0 -16px -20px; }
.pts-login-form-head { margin-bottom: 20px; }
.pts-login-form-head h1 { margin: 0; font-size: 1.45rem; font-weight: 800; color: #1F2937; }
.pts-login-form-head p { margin: 4px 0 0; color: #6B7280; font-size: .92rem; }
.pts-login-brand-logo-narrow { display: none; }

@media (max-width: 760px) {
    .pts-login-bg { padding: 16px; align-items: flex-start; }
    .pts-login-split { grid-template-columns: 1fr; max-width: 440px; }
    /* Telefonda marka paneli yalnız logo + tek cümle: form ilk ekranda kalsın */
    .pts-login-brand { padding: 22px 24px; gap: 0; }
    .pts-login-brand h2 { font-size: 1.2rem; margin: 12px 0 0; }
    .pts-login-brand p, .pts-login-shots { display: none; }
    .pts-login-split--signup .pts-login-brand { padding: 0; }
    .pts-login-brand-sticky { position: static; padding: 22px 24px; }
    .pts-login-brand-logo { height: 44px; }
    .pts-login-form { padding: 24px 22px 20px; }
}

/* ============================================================
   KASA MODÜLÜ — MOBİL (yalnız .pts-cash-page ve .pts-header-actions)

   Kasa modülü ağırlıkla telefondan kullanılıyor. Buradaki kurallar KASITLI olarak
   iki sınıfla sınırlıdır; projenin tamamına dokunulmaz (diğer modüller masaüstü
   yoğunluğunda kalsın istendi). Yeni bir ekranı bu davranışa dahil etmek için
   kökteki MudStack'e "pts-cash-page", PageHeader'a StackActionsOnMobile="true".
   ============================================================ */

/* Başlık aksiyonları alt satıra indiğinde tam genişlik ve eşit paylaşımlı olsun:
   "Gelir Ekle / Gider Ekle / Transfer" üçlüsü 390 px'de başlığın yanına sığmıyordu. */
@media (max-width: 599.98px) {
    .pts-header-actions {
        width: 100%;
    }

    .pts-header-actions > .mud-stack {
        width: 100%;
    }

    .pts-header-actions .mud-button-root {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Panel iç boşlukları: 16px → 12px. Dar ekranda içerik genişliği ~310 px'e
       düşüyordu; 8 px geri kazanmak tutar sütunlarının kırpılmasını önlüyor. */
    .pts-cash-page .mud-paper.pa-4 {
        padding: 12px !important;
    }

    /* Dokunma hedefi: kasa ekranlarındaki satır aksiyonları parmakla kullanılabilir
       olmalı (varsayılan küçük ikon butonu ~30 px). */
    .pts-cash-page .mud-table-cell .mud-icon-button,
    .pts-cash-page .mud-list-item .mud-icon-button {
        min-width: 40px;
        min-height: 40px;
    }
}


/* ------------------------------------------------------------
   KASA MOBİL — KART LİSTESİ + FAB (P2)
   Tablo yerine kart: 13 alanlı yığılmış satır tek hareketi bir ekran boyuna
   çıkarıyordu. MudTable yapısı korunur (ServerData + sayfalama + boş durum),
   yalnız satırın GÖRÜNÜMÜ değişir.
   ------------------------------------------------------------ */
.pts-cash-cards .mud-table-row {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pts-cash-cards .mud-table-cell.pts-cash-card-cell {
    padding: 10px 12px;
    border-bottom: none;
    cursor: pointer;
}

.pts-cash-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Açıklama tek satırda kalsın: kart yüksekliğinin öngörülebilir olması,
   listeyi kaydırırken göz taramasını hızlandırır. */
.pts-cash-card-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sağ alt köşede yüzen eylem düğmesi. iOS'ta alt çubuk için güvenli alan payı. */
.pts-cash-fab {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
}

@media (max-width: 599.98px) {
    .pts-hide-mobile {
        display: none !important;
    }
}

/* Alt sayfa (bottom sheet) eylem düğmeleri: dokunma hedefi en az 44 px.
   MudBlazor varsayılanı 37 px'de kalıyordu; iptal gibi geri alınamaz bir işlemin
   yanlışlıkla tetiklenmemesi için burada boy şart. */
.pts-sheet-action {
    min-height: 44px;
    justify-content: flex-start;
}

/* ---------------------------------------------------------------------------
   RENK KUTUCUĞU (ColorField, renk paleti, seçenek değeri)
   Renk metin değil GÖRSEL bilgidir: kullanıcı "Lacivert"i okuyarak değil görerek seçer.
   Beyaz/açık renk beyaz zeminde kaybolmasın diye kenarlık DAİMA vardır.
   --------------------------------------------------------------------------- */
.pts-swatch {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18);
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
    vertical-align: middle;
}
.pts-swatch.sm { width: 16px; height: 16px; cursor: default; }
.pts-swatch.lg { width: 40px; height: 40px; border-radius: 10px; }
.pts-swatch.on { box-shadow: 0 0 0 2px var(--mud-palette-surface), 0 0 0 4px var(--mud-palette-primary); }
.pts-swatch:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
/* Renk kodu olmayan (palette bulunmayan) değer: çizgili boş kutucuk. */
.pts-swatch.none {
    background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0, 0, 0, .12) 4px 6px);
}
.pts-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Logo önizlemesi: saydam PNG'nin kenarları görünsün diye dama deseni zemin. */
.pts-logo-preview {
    width: 88px;
    height: 88px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    object-fit: contain;
    background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}

/* Kapak fotoğrafı önizlemesi: yatay şerit oranı (mağazada geniş görünür). */
.pts-cover-preview {
    width: 176px; height: 88px; border-radius: 12px; object-fit: cover;
    border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray);
}

/* Mağaza görünümü seçimi (StorefrontDialog): iki büyük kart, küçük çizimle düzeni gösterir. */
.pts-layout-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pts-layout-choice {
    display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; text-align: left;
    padding: 12px; border-radius: 12px; cursor: pointer; font: inherit; color: inherit;
    border: 1.5px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface);
}
.pts-layout-choice.on { border-color: var(--mud-palette-primary); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
.pts-layout-choice:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.pts-layout-choice b { display: block; font-size: 15px; }
.pts-layout-choice span { font-size: 13px; color: var(--mud-palette-text-secondary); }
.pts-layout-thumb {
    width: 72px; height: 94px; border-radius: 8px; padding: 6px; display: grid; gap: 4px;
    background: #fff; border: 1px solid #dfe3e8;
}
.pts-layout-thumb.grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.pts-layout-thumb.grid i { background: linear-gradient(160deg, #d9dde3, #b8c0ca); border-radius: 3px; }
.pts-layout-thumb.rows { grid-auto-rows: 1fr; }
.pts-layout-thumb.rows i { display: grid; grid-template-columns: 1fr 22px; gap: 4px; }
.pts-layout-thumb.rows i::before { content: ""; background: repeating-linear-gradient(#c9cfd6 0 3px, transparent 3px 6px); }
.pts-layout-thumb.rows i::after { content: ""; background: linear-gradient(160deg, #e7b98a, #b86b3b); border-radius: 3px; }

/* =============================================================================
   Ekran içi tanıtım turu (TourOverlay) — docs/UI-STANDARD.md "Tanıtım turu".
   Katman DÖRT panelden oluşur: anlatılan öğenin çevresini bulanıklaştırır, öğenin kendisi net kalır.
   Tek panel + büyük gölge yapılsaydı arka plan yalnızca kararırdı, bulanıklaşmazdı.
   ============================================================================= */
.pts-tour {
    position: fixed;
    inset: 0;
    z-index: 2000; /* MudBlazor drawer/appbar üstünde, diyalogların (3000+) altında */
    outline: none;
}

.pts-tour-veil {
    position: fixed;
    background: rgba(17, 24, 39, .45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Anlatılan öğenin çerçevesi. Delik gerçekten boştur: öğe kendi rengiyle, net görünür. */
.pts-tour-ring {
    position: fixed;
    border: 2px solid var(--mud-palette-primary);
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(var(--mud-palette-primary-rgb), .25);
    pointer-events: none;
    transition: top .15s ease, left .15s ease, width .15s ease, height .15s ease;
}

.pts-tour-bubble {
    position: fixed;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
    padding: 12px 14px;
    max-width: calc(100vw - 32px);
}

.pts-tour-bubble-head { margin-bottom: 6px; }
.pts-tour-bubble-text { line-height: 1.5; }
.pts-tour-bubble-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}


/* ---- İlk kurulum listesi (SetupChecklist, docs/MODULES.md §Panel kurulum listesi) ----
   Yapılan adım sönük, SIRADAKİ adım vurgulu: gözün tek bir işe gitmesi istenir (UI-STANDARD §0). */
.pts-setup-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pts-setup-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
}

.pts-setup-step .mud-icon-root {
    margin-top: 3px;
    flex-shrink: 0;
}

.pts-setup-step.done .mud-typography {
    color: var(--mud-palette-text-secondary);
    text-decoration: line-through;
}

.pts-setup-step.next {
    background: var(--mud-palette-primary-hover);
}

/* =============================================================================
   TABLO — DAR EKRANDA SIKIŞMA YERİNE KAYDIRMA (docs/UI-STANDARD.md §Mobil / Responsive)
   04.11.2026: 960–1300 px arasında (yan menü açık dizüstü, Windows %125 ölçek) MudTable
   kart moduna GEÇMEZ (eşik Xs/Sm) ama masaüstü düzeni de sığmaz; tarayıcı sütunları ezer:
   başlık ikiye kırılır ("Abonelik Bitiş"), işlem simgeleri alt alta dizilir, satır 170 px olur.
   .mud-table-container zaten overflow-x:auto — eksik olan hücrelerin "kırılmam" demesiydi.

   ⚠ MudBlazor kart sınıfını (.mud-xs-table …) HER ZAMAN basar; kart geçişini medya sorgusu yapar
   (xs ≤600 · sm ≤960 · md ≤1280 · lg ≤1920 · xl ≤2560 px). Kurallar bu yüzden sınıf + min-width
   çiftiyle yazılır: yalnız TABLO modunda etkilidir, kart modunda (hücre = etiket + değer satırı)
   nowrap uzun metni taşırırdı. Breakpoint.None (sınıfsız) tablo her zaman tablo modundadır.

   Tablo modunda:
   · Başlık, İLK sütun (kaydın adı/numarası — "Demo / Firma / Moda" diye bölünmesin) ve
     düğme/simge/menü/anahtar taşıyan işlem hücresi tek satır kalır; işlem hücresi width:1% ile
     içeriğine daralır, artan yer metin sütunlarına gider. Uzun metin sütunları (açıklama, adres,
     e-posta) bilerek kırılmaya devam eder. Toplam sığmazsa tablo YATAY KAYAR, satır şişmez.
   · SON sütun işlem hücresiyse sağa yapışır (sticky): kaydırmadan da düğmeler görünür.
   · İLK sütun sola yapışır: 15+ sütunlu rapor (Puantaj, Kasa Raporları, Kurye Hakediş) kaydırılınca
     kaydın adı yerinde kalır. Tablo sığıyorsa sticky'nin görünür etkisi yoktur (gölge yok — kaydırma
     olmadan çizgi görünmesin). Tek sütunlu tabloda ilk = son → sola yapıştırılmaz (:not(:last-child)).
   · Yapışan hücrenin zemini opak olmalı (altındaki hücre görünmesin); şerit/hover rengi saydam
     olduğundan surface üstüne gradyanla bindirilir. Kart modunda sticky YOK.
   ============================================================================= */
.mud-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table):not(.mud-xl-table) th.mud-table-cell { white-space: nowrap; }
.mud-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table):not(.mud-xl-table) td.mud-table-cell:first-child { white-space: nowrap; }
.mud-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table):not(.mud-xl-table) td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox) { white-space: nowrap; width: 1%; }
.mud-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table):not(.mud-xl-table) th.mud-table-cell:last-child,
.mud-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table):not(.mud-xl-table) td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { position: sticky; right: 0; z-index: 1; background-color: var(--mud-palette-surface); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .28); }
.mud-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table):not(.mud-xl-table) th.mud-table-cell:first-child:not(:last-child),
.mud-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table):not(.mud-xl-table) td.mud-table-cell:first-child:not(:last-child) { position: sticky; left: 0; z-index: 1; background-color: var(--mud-palette-surface); }
.mud-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table):not(.mud-xl-table).mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:first-child,
.mud-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table):not(.mud-xl-table).mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-striped), var(--mud-palette-table-striped)); }
.mud-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table):not(.mud-xl-table).mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:first-child,
.mud-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table):not(.mud-xl-table).mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover)); }
@media (min-width: 601px) {
    .mud-xs-table th.mud-table-cell { white-space: nowrap; }
    .mud-xs-table td.mud-table-cell:first-child { white-space: nowrap; }
    .mud-xs-table td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox) { white-space: nowrap; width: 1%; }
    .mud-xs-table th.mud-table-cell:last-child,
    .mud-xs-table td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { position: sticky; right: 0; z-index: 1; background-color: var(--mud-palette-surface); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .28); }
    .mud-xs-table th.mud-table-cell:first-child:not(:last-child),
    .mud-xs-table td.mud-table-cell:first-child:not(:last-child) { position: sticky; left: 0; z-index: 1; background-color: var(--mud-palette-surface); }
    .mud-xs-table.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:first-child,
    .mud-xs-table.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-striped), var(--mud-palette-table-striped)); }
    .mud-xs-table.mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:first-child,
    .mud-xs-table.mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover)); }
}
@media (min-width: 961px) {
    .mud-sm-table th.mud-table-cell { white-space: nowrap; }
    .mud-sm-table td.mud-table-cell:first-child { white-space: nowrap; }
    .mud-sm-table td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox) { white-space: nowrap; width: 1%; }
    .mud-sm-table th.mud-table-cell:last-child,
    .mud-sm-table td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { position: sticky; right: 0; z-index: 1; background-color: var(--mud-palette-surface); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .28); }
    .mud-sm-table th.mud-table-cell:first-child:not(:last-child),
    .mud-sm-table td.mud-table-cell:first-child:not(:last-child) { position: sticky; left: 0; z-index: 1; background-color: var(--mud-palette-surface); }
    .mud-sm-table.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:first-child,
    .mud-sm-table.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-striped), var(--mud-palette-table-striped)); }
    .mud-sm-table.mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:first-child,
    .mud-sm-table.mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover)); }
}
@media (min-width: 1281px) {
    .mud-md-table th.mud-table-cell { white-space: nowrap; }
    .mud-md-table td.mud-table-cell:first-child { white-space: nowrap; }
    .mud-md-table td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox) { white-space: nowrap; width: 1%; }
    .mud-md-table th.mud-table-cell:last-child,
    .mud-md-table td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { position: sticky; right: 0; z-index: 1; background-color: var(--mud-palette-surface); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .28); }
    .mud-md-table th.mud-table-cell:first-child:not(:last-child),
    .mud-md-table td.mud-table-cell:first-child:not(:last-child) { position: sticky; left: 0; z-index: 1; background-color: var(--mud-palette-surface); }
    .mud-md-table.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:first-child,
    .mud-md-table.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-striped), var(--mud-palette-table-striped)); }
    .mud-md-table.mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:first-child,
    .mud-md-table.mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover)); }
}
@media (min-width: 1921px) {
    .mud-lg-table th.mud-table-cell { white-space: nowrap; }
    .mud-lg-table td.mud-table-cell:first-child { white-space: nowrap; }
    .mud-lg-table td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox) { white-space: nowrap; width: 1%; }
    .mud-lg-table th.mud-table-cell:last-child,
    .mud-lg-table td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { position: sticky; right: 0; z-index: 1; background-color: var(--mud-palette-surface); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .28); }
    .mud-lg-table th.mud-table-cell:first-child:not(:last-child),
    .mud-lg-table td.mud-table-cell:first-child:not(:last-child) { position: sticky; left: 0; z-index: 1; background-color: var(--mud-palette-surface); }
    .mud-lg-table.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:first-child,
    .mud-lg-table.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-striped), var(--mud-palette-table-striped)); }
    .mud-lg-table.mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:first-child,
    .mud-lg-table.mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover)); }
}
@media (min-width: 2561px) {
    .mud-xl-table th.mud-table-cell { white-space: nowrap; }
    .mud-xl-table td.mud-table-cell:first-child { white-space: nowrap; }
    .mud-xl-table td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox) { white-space: nowrap; width: 1%; }
    .mud-xl-table th.mud-table-cell:last-child,
    .mud-xl-table td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { position: sticky; right: 0; z-index: 1; background-color: var(--mud-palette-surface); box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .28); }
    .mud-xl-table th.mud-table-cell:first-child:not(:last-child),
    .mud-xl-table td.mud-table-cell:first-child:not(:last-child) { position: sticky; left: 0; z-index: 1; background-color: var(--mud-palette-surface); }
    .mud-xl-table.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:first-child,
    .mud-xl-table.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-striped), var(--mud-palette-table-striped)); }
    .mud-xl-table.mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:first-child,
    .mud-xl-table.mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:has(.mud-icon-button, .mud-button-root, .mud-menu, .mud-switch, .mud-checkbox):last-child { background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover)); }
}

/* -----------------------------------------------------------------------------
   SEÇİMLİ LİSTE: SEÇİM KUTUSU + KAYIT HÜCRESİ SOLDA YAPIŞIK (.pts-table-lead, 04.11.2026)
   MultiSelection açık MudTable'da İLK hücre seçim kutusudur → yukarıdaki "ilk sütun yapışır" kuralı yalnız kutuyu
   tutuyor, kaydın adı (Ürünler: resim + ad) kayıp gidiyordu. Bu sınıf ikinci hücreyi de kutunun genişliği kadar
   sağda yapıştırır. Tablo Breakpoint="Breakpoint.None" ile yazılır: telefonda da kart moduna geçmez, kalan
   sütunlar yana kayar. İkinci hücre kırılabilir (uzun ürün adı iki satır), genişliği sınırlı.
   Telefonda SON sütun (işlem anahtarı) yapışmaz: iki yapışık sol hücre + yapışık sağ hücre ekranı doldurup
   kayan bölgeyi 30 px'e indiriyordu. (!important: yukarıdaki :not() zinciri daha özgül.)
   ----------------------------------------------------------------------------- */
.pts-table-lead { --pts-lead-check: 48px; }
.pts-table-lead th.mud-table-cell:first-child,
.pts-table-lead td.mud-table-cell:first-child {
    width: var(--pts-lead-check);
    min-width: var(--pts-lead-check);
    max-width: var(--pts-lead-check);
    padding-inline: 8px 0 !important;
}
.pts-table-lead th.mud-table-cell:nth-child(2),
.pts-table-lead td.mud-table-cell:nth-child(2) {
    position: sticky;
    left: var(--pts-lead-check);
    z-index: 1;
    background-color: var(--mud-palette-surface);
    min-width: 200px;
    max-width: 340px;
    white-space: normal;
    box-shadow: 8px 0 8px -8px rgba(0, 0, 0, .28);
}
.pts-table-lead.mud-table-hover .mud-table-body .mud-table-row:hover td.mud-table-cell:nth-child(2) {
    background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
}
@media (max-width: 599.98px) {
    .pts-table-lead th.mud-table-cell:nth-child(2),
    .pts-table-lead td.mud-table-cell:nth-child(2) { min-width: 190px; max-width: 60vw; }
    .pts-table-lead th.mud-table-cell:last-child,
    .pts-table-lead td.mud-table-cell:last-child { position: static !important; box-shadow: none !important; }
}

/* -----------------------------------------------------------------------------
   SAĞ PANEL TABLOLARI (.pts-panel = DetailDrawer gövdesi, 04.11.2026; UI-STANDARD §Sağ paneldeki tablolar)
   Yukarıdaki liste kuralları (başlık/ilk sütun tek satır, ilk ve son sütun yapışık) sağ panelde TERS çalışıyordu:
   panel ≤1000 px iken tablo daralamadı, yatay kaydı; yapışık işlem sütunu "Neden"in üstüne bindi (ürün › Stok).
   · Panelde bu kurallar kapalı: hücreler normal kırılır, yapışma yok (işlem hücresi yine tek satır).
   · MudTable'ın kart geçişi EKRAN genişliğine bakar (panelin değil) → panelin kendi genişliği kap sorgusuyla ölçülür:
     panel 760 px'ten darsa breakpoint'li tablo (Xs/Sm… sınıflı) kart düzenine geçer. Breakpoint.None tablo (sade
     satırlı defter gibi) her genişlikte tablo kalır. Kart kuralı MudBlazor'ın kendi kart CSS'inin kopyasıdır.
   ⚠ Panelde 6+ sütunlu tablo yazma: iki satırlı sade satır kullan (StockLedgerView örneği).
   ----------------------------------------------------------------------------- */
.pts-panel { container: pts-panel / inline-size; }
.pts-panel .mud-table th.mud-table-cell,
.pts-panel .mud-table td.mud-table-cell:first-child { white-space: normal !important; }
.pts-panel .mud-table th.mud-table-cell,
.pts-panel .mud-table td.mud-table-cell { position: static !important; box-shadow: none !important; }
/* Telefonda (panel ≤480 px) hücre iç boşluğu 16+24 px'ten 8 px'e: üç sütunlu sade satırda 120 px boşluk ⋮ düğmesini dışarı itiyordu. */
@container pts-panel (max-width: 480px) {
    .pts-panel .mud-table .mud-table-cell { padding-inline: 8px !important; }
}
@container pts-panel (max-width: 760px) {
    .pts-panel :is(.mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table) .mud-table-root .mud-table-head .mud-table-row,
    .pts-panel :is(.mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table) .mud-table-root .mud-table-foot { display: none; }
    .pts-panel :is(.mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table) .mud-table-body { border-top: 1px solid var(--mud-palette-table-lines); }
    .pts-panel :is(.mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table) .mud-table-row { display: revert; }
    .pts-panel :is(.mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table) .mud-table-row .mud-table-cell:last-child { border-bottom: 1px solid var(--mud-palette-table-lines); }
    .pts-panel :is(.mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table) .mud-table-cell {
        display: flex; justify-content: space-between; align-items: center; border: none; padding: 6px 16px; text-align: start !important;
    }
    .pts-panel :is(.mud-xs-table, .mud-sm-table, .mud-md-table, .mud-lg-table, .mud-xl-table) .mud-table-cell:before {
        content: attr(data-label); font-weight: 500; padding-inline-end: 16px;
    }
}

/* Rozet (chip) metni hiçbir modda ikiye bölünmesin ("Kurucu / üye"). */
.mud-table-cell .mud-chip { white-space: nowrap; }

/* Adres kartı haritası (Adres Kataloğu sağ paneli — AddressDetailView). */
.pts-address-map {
    height: 320px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
}