/* Admin paneli stilleri (Faz 1). Kullanicinin kendi canli magazasinin (guldencicekevi.com,
   Gagasoft altyapili) yonetim panelinden referans alinarak hazirlandi: acik/beyaz sidebar,
   renkli yuvarlak ikon rozetleri, "Nunito Sans" fontu, yumusak tonlu (tint) istatistik/badge
   renkleri. store.css ile ayni marka rengini (magazanin secili temasi, --admin-teal) paylasir. */

:root {
    --admin-sidebar-bg: #ffffff;
    --admin-sidebar-hover: #eef5f0;
    --admin-sidebar-text: #64748b;
    --admin-sidebar-text-strong: #1f2933;

    --admin-accent: #f0a83c;
    --admin-accent-bg: #fff4e0;

    --admin-teal: #0f4a44;
    --admin-teal-dark: #0a332f;

    --admin-blue: #2563eb;
    --admin-blue-bg: #e8eefd;

    --admin-green: #22c55e;
    --admin-green-bg: #e3f9ea;

    --admin-red: #ef4444;
    --admin-red-bg: #fde8e8;

    --admin-sky: #0ea5e9;
    --admin-sky-bg: #e6f6fd;

    --admin-amber: #f59e0b;
    --admin-amber-bg: #fdf1e0;

    --admin-purple: #8b5cf6;
    --admin-purple-bg: #f0eafe;

    --admin-rose: #f43f5e;
    --admin-rose-bg: #fde8ec;

    --admin-slate: #64748b;
    --admin-slate-bg: #eef1f4;

    --admin-indigo: #6366f1;
    --admin-indigo-bg: #ebebfd;

    --admin-bg: #f4f6f8;
    --admin-card-bg: #fff;
    --admin-border: #e5e7eb;
    --admin-text: #1f2933;
    --admin-muted: #6b7280;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--admin-text);
    background: var(--admin-bg);
}

a {
    color: var(--admin-blue);
}

/* ---- Genel iskelet ---- */

.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---- Sidebar ---- */

.admin-sidebar {
    width: 264px;
    flex-shrink: 0;
    background: var(--admin-sidebar-bg);
    color: var(--admin-sidebar-text);
    padding: 1.25rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--admin-border);
    /* Sidebar viewport yuksekliginde sabit kalir, uzun nav listesi (ozellikle
       "Gorunum" grubu) kendi icinde kayar - sayfanin tamami kaymaz. */
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width 0.18s ease, padding 0.18s ease;
}

/* Daraltilmis sidebar: icerigi ustunden kapatmiyor, sadece kendi genisligini
   kucultup icerigi (.admin-main) saga itiyor - sadece ikonlar kalir. */
.admin-shell.sidebar-collapsed .admin-sidebar {
    width: 64px;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.admin-shell.sidebar-collapsed .admin-nav-text {
    display: none;
}

.admin-shell.sidebar-collapsed .admin-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.admin-shell.sidebar-collapsed .admin-nav-item,
.admin-shell.sidebar-collapsed .admin-nav-toggle {
    justify-content: center;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.admin-shell.sidebar-collapsed .admin-nav-item .icon {
    width: auto;
    font-size: 1.15rem;
}

.admin-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 0.6rem 0.75rem;
    border-bottom: 1px solid var(--admin-border);
}

/* Daraltilmis (collapsed) sidebar'da tek basina kucuk ikon - genisken hic gorunmez,
   genisken gosterilen tam logo (.admin-brand-expanded) .admin-nav-text sinifi uzerinden
   mevcut collapse mekanizmasiyla (admin.css'te asagida) otomatik gizleniyor. */
.admin-brand-mark-collapsed {
    display: none;
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
}

.admin-shell.sidebar-collapsed .admin-brand-mark-collapsed {
    display: block;
}

.admin-brand-expanded {
    width: 100%;
    text-align: center;
}

.admin-brand-logo {
    width: 100%;
    max-width: 168px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.admin-brand-version {
    font-size: 0.68rem;
    color: var(--admin-sidebar-text);
    margin-top: 0.3rem;
    letter-spacing: 0.02em;
}

/* Magaza sahibinin kendi logosu (SiteSettings.LogoUrl) - Cirali Soft markasinin hemen
   altinda, beyaz bir kutu icinde (referans tasarimdaki gibi). */
.admin-tenant-logo-box {
    margin: 0.75rem 0.7rem 0.9rem;
    padding: 0.55rem;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--admin-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-tenant-logo-box img {
    max-width: 100%;
    max-height: 44px;
    object-fit: contain;
}

.admin-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-nav-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 0.6rem 0.6rem 0.25rem;
    font-weight: 700;
}

.admin-nav-label-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.admin-nav-label-toggle:hover {
    color: var(--admin-teal, #0f4d26);
}

.admin-nav-label-toggle .admin-nav-chevron {
    padding-right: 0.4rem;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 0.87rem;
    font-weight: 600;
    border-left: 3px solid transparent;
}

/* Renkli yuvarlak ikon rozeti - referans panelin "her modul kendi rengi" dilini
   taklit eder. Her admin-nav-group kendi tint/renk cifti alir (asagida nth-of-type
   ile), boylece Razor tarafinda tek tek renk atamaya gerek kalmiyor. */
.admin-nav-item .icon {
    font-size: 0.95rem;
    width: 1.85rem;
    height: 1.85rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--admin-blue-bg);
    transition: background 0.15s ease;
}

.admin-nav-group:nth-of-type(1) .admin-nav-item .icon { background: var(--admin-blue-bg); }
.admin-nav-group:nth-of-type(2) .admin-nav-item .icon { background: var(--admin-green-bg); }
.admin-nav-group:nth-of-type(3) .admin-nav-item .icon { background: var(--admin-purple-bg); }
.admin-nav-group:nth-of-type(4) .admin-nav-item .icon { background: var(--admin-amber-bg); }
.admin-nav-group:nth-of-type(5) .admin-nav-item .icon { background: var(--admin-sky-bg); }
.admin-nav-group:nth-of-type(6) .admin-nav-item .icon { background: var(--admin-accent-bg); }
.admin-nav-group:nth-of-type(7) .admin-nav-item .icon { background: var(--admin-rose-bg); }
.admin-nav-group:nth-of-type(8) .admin-nav-item .icon { background: var(--admin-slate-bg); }
.admin-nav-group:nth-of-type(9) .admin-nav-item .icon { background: var(--admin-indigo-bg); }

.admin-shell.sidebar-collapsed .admin-nav-item .icon {
    width: 2rem;
    height: 2rem;
    font-size: 1.05rem;
}

.admin-nav-item:hover {
    background: var(--admin-sidebar-hover);
    color: var(--admin-sidebar-text-strong);
}

.admin-nav-item.active {
    background: var(--admin-sidebar-hover);
    color: var(--admin-sidebar-text-strong);
    border-left-color: var(--admin-teal);
}

.admin-nav-badge {
    margin-left: auto;
    background: var(--admin-slate-bg);
    color: var(--admin-slate);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    min-width: 1.4rem;
    text-align: center;
}

.admin-nav-badge.has-items {
    background: var(--admin-accent);
    color: #fff;
}

.admin-nav-toggle {
    width: 100%;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.admin-nav-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    color: #cbd5e1;
}

.admin-nav-subgroup {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-left: 0.5rem;
}

.admin-nav-subitem {
    font-size: 0.85rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* ---- Top bar ---- */

.admin-topbar {
    background: #fff;
    border-bottom: 1px solid var(--admin-border);
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 5;
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.admin-topbar-hamburger {
    font-size: 1.2rem;
    color: var(--admin-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border-radius: 6px;
    flex-shrink: 0;
}

.admin-topbar-hamburger:hover {
    background: var(--admin-blue-bg);
}

.admin-topbar-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-search {
    display: flex;
    align-items: center;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    overflow: hidden;
}

.admin-search input {
    border: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    width: 220px;
    outline: none;
}

.admin-search button {
    border: none;
    background: var(--admin-teal);
    color: #fff;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.admin-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--admin-teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.admin-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}

.admin-user-role {
    font-size: 0.72rem;
    color: var(--admin-muted);
}

/* ---- Content ---- */

.admin-content {
    flex: 1;
    padding: 1.5rem;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

/* ---- Sayfa basligi karti (AdminPageHeader) ---- */

.admin-page-header {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-page-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--admin-teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.admin-page-header-text {
    flex: 1;
    min-width: 200px;
}

.admin-page-header-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--admin-muted);
    font-weight: 600;
}

.admin-page-header-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0.1rem 0;
}

.admin-page-header-subtitle {
    font-size: 0.85rem;
    color: var(--admin-muted);
}

.admin-page-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---- Istatistik kartlari (AdminStatCard) ---- */

.admin-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

/* Ziyaretci Yonetimi'nde yan yana 2 form-panel (orn. Cihaz + Tarayici) icin. */
.admin-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.admin-two-col .form-panel {
    margin-bottom: 0;
}

.admin-stat-card {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    cursor: default;
}

.admin-stat-card.active {
    border-color: var(--admin-stat-color, var(--admin-blue));
    box-shadow: 0 0 0 1px var(--admin-stat-color, var(--admin-blue));
}

.admin-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    background: var(--admin-stat-bg, var(--admin-blue-bg));
    color: var(--admin-stat-color, var(--admin-blue));
}

.admin-stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--admin-muted);
    font-weight: 600;
}

.admin-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

/* ---- Bolum karti (section card - Notlarim / listeler icin) ---- */

.admin-section-card {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.admin-section-card-header {
    background: var(--admin-teal);
    color: #fff;
    padding: 0.75rem 1.1rem;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-section-card-body {
    padding: 1rem 1.1rem;
}

/* ---- Toolbar (eski sayfalar icin geriye donuk) ---- */

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* ---- Tablo ---- */

table.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    overflow: hidden;
}

table.admin-table th,
table.admin-table td {
    text-align: left;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--admin-border);
    font-size: 0.9rem;
}

table.admin-table th {
    background: #fafbfc;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--admin-muted);
}

/* Tıklanınca listeyi sıralayan tablo başlıkları (Urunler.razor ve benzerleri) - aktif sütunun
   yönünü gösteren ok, admin-sort-icon span'i ile eklenir. */
th.admin-sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

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

.admin-sort-icon {
    margin-left: 0.25rem;
    opacity: 0.6;
}

table.admin-table tbody tr:hover {
    background: #fafbfc;
}

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

/* ---- Butonlar ---- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.88rem;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}

.btn-primary {
    background: var(--admin-teal);
    color: #fff;
}

.btn-primary:hover {
    background: var(--admin-teal-dark);
}

.btn-secondary {
    background: #fff;
    color: var(--admin-text);
    border-color: var(--admin-border);
}

.btn-secondary:hover {
    background: #f3f4f6;
}

.btn-danger {
    background: #fff;
    color: var(--admin-red);
    border-color: #fca5a5;
}

.btn-danger:hover {
    background: var(--admin-red-bg);
}

.btn-sm {
    padding: 0.32rem 0.65rem;
    font-size: 0.8rem;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---- Form ---- */

.form-panel {
    background: var(--admin-card-bg);
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    max-width: 520px;
}

.form-field {
    margin-bottom: 0.9rem;
}

.form-field label {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: #374151;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ---- Uyarilar ---- */

.alert {
    padding: 0.7rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

.alert-error {
    background: var(--admin-red-bg);
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.alert-success {
    background: var(--admin-green-bg);
    color: #15803d;
    border: 1px solid #86efac;
}

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

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
}

.badge-aktif {
    background: var(--admin-green-bg);
    color: #15803d;
}

.badge-taslak {
    background: var(--admin-accent-bg);
    color: #92600e;
}

.badge-pasif {
    background: #f3f4f6;
    color: #6b7280;
}

.badge-danger {
    background: var(--admin-red-bg);
    color: #b91c1c;
}

/* Tiklanip durum degistirilebilen badge'ler (orn. Urunler listesindeki Aktif/Pasif) - renk
   sinifi (badge-aktif/badge-pasif) AYNI kaliyor, sadece etkileşim ipuclari ekleniyor. */
.badge-clickable {
    border: none;
    font: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.badge-clickable:hover {
    opacity: 0.75;
}

.badge-clickable:active {
    transform: scale(0.96);
}

.badge-info {
    background: var(--admin-blue-bg);
    color: #1d4ed8;
}

/* Toplu Urun Yukle: native <input type=file> tarayicida degisken/genis render oluyor ve
   dar tablo hucresini tasiriyordu ("gorsel tasmasi") - hem input'un kendisini kucultuyoruz
   hem de tabloyu bir overflow-x:auto sarmalayiciya aliyoruz (genel guvenlik agi). */
.admin-quick-upload {
    max-width: 120px;
}

.admin-quick-upload input[type="file"] {
    width: 100%;
    max-width: 120px;
    font-size: 0.72rem;
}

.table-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--admin-border);
    display: block;
}

.image-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.image-preview img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
}

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

/* ---- Mobil admin panel (kullanıcının "hemen hemen tüm ekranlar bozuk" geri bildirimi
   üzerine) ---- Ana sorun: .admin-sidebar masaüstünde her zaman .admin-main'in yanında yer
   kaplayan sabit genişlikli (264px, daraltılmışsa 64px) bir flex kardeşiydi - dar bir telefon
   ekranında (~375px) içeriğe neredeyse hiç yer kalmıyordu, "daralt" düğmesi bile sadece 64px'e
   iniyordu, gerçek bir "kapat" durumu yoktu. Çözüm: 860px altında sidebar'ı position:fixed
   off-canvas bir çekmeceye çeviriyoruz (varsayılan olarak EKRAN DIŞI, hamburger ile içeri
   kayıyor) + koyu bir backdrop. AYNI "sidebarCollapsed" bayrağı/tıklaması kullanılıyor - sadece
   CSS yorumu masaüstünde ve mobilde TERS (masaüstünde "collapsed" = daralt, mobilde
   "collapsed" = çekmeceyi AÇ) - ayrı bir state/Razor değişikliği gerekmedi. */
@media (max-width: 860px) {
    .admin-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 210;
        width: min(82vw, 300px);
        transform: translateX(-100%);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
        transition: transform 0.22s ease;
    }

    .admin-shell.sidebar-collapsed .admin-sidebar {
        transform: translateX(0);
        width: min(82vw, 300px);
        padding: 1.1rem 0.9rem;
    }

    /* Masaustunun "daraltilmis = sadece ikon" kurallarini mobilde GERI AL - mobilde
       "collapsed" acik/tam-genislik cekmece demek, ikonlara kucultme degil. */
    .admin-shell.sidebar-collapsed .admin-nav-text,
    .admin-shell.sidebar-collapsed .admin-nav-badge {
        display: revert;
    }

    .admin-shell.sidebar-collapsed .admin-brand {
        justify-content: flex-start;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    /* Mobilde "collapsed" = cekmece TAMAMEN acik (masaustundeki gibi sadece-ikon rayi degil) -
       kucuk ikon hic gerekmiyor, sadece tam logo (.admin-brand-expanded, admin-nav-text
       sinifi ile yukarida zaten geri gosteriliyor) gorunmeli - ikisi ayni anda gorunmesin. */
    .admin-shell.sidebar-collapsed .admin-brand-mark-collapsed {
        display: none;
    }

    .admin-shell.sidebar-collapsed .admin-nav-item,
    .admin-shell.sidebar-collapsed .admin-nav-toggle {
        justify-content: flex-start;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .admin-shell.sidebar-collapsed .admin-nav-item .icon {
        width: 1.85rem;
        height: 1.85rem;
        font-size: 0.95rem;
    }

    /* Kapaliyken tikleme/scroll'u engelle - arkadaki icerik yanlislikla erisilmesin. */
    .admin-shell:not(.sidebar-collapsed) .admin-sidebar {
        pointer-events: none;
    }

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

    .admin-shell.sidebar-collapsed .admin-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.5);
        z-index: 200;
    }

    /* Sidebar artik akista yer kaplamiyor (fixed) - .admin-main her zaman tam genislik. */
    .admin-main {
        width: 100%;
    }

    .admin-topbar {
        padding: 0.65rem 0.85rem;
        gap: 0.5rem;
    }

    .admin-topbar-title {
        font-size: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Arama kutusu dar ekranda topbar'i sikistirip baslik/kullanici alanini taskiriyordu -
       admin zaten sidebar'daki sayfalardan gezinebiliyor, mobilde gizleniyor. */
    .admin-search {
        display: none;
    }

    .admin-user-name {
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-content {
        padding: 0.85rem;
    }

    .admin-page-header {
        padding: 0.9rem 1rem;
        gap: 0.75rem;
    }

    .admin-page-header-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .admin-page-header-title {
        font-size: 1.1rem;
    }

    .form-panel {
        padding: 1rem;
        max-width: 100%;
    }

    /* Genis tablolar (Siparisler/Musteriler/Kuponlar/Ziyaretci Yonetimi vb.) sayfayi yatay
       kaydirmasin diye tablonun KENDISI yatay kayan bir blok haline geliyor - her sayfada ayri
       ayri overflow-x:auto sarmalayici eklemeye gerek kalmadan genel bir guvenlik agi. */
    table.admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    table.admin-table thead,
    table.admin-table tbody,
    table.admin-table tr {
        display: table;
        width: 100%;
        table-layout: auto;
    }

    /* Trafik kaynagi/sayfa yolu gibi uzun metinli cubuk grafik satirlari dar ekranda daha
       sikisik - etiket sutununu kuculttup uzun metni kirpiyoruz. */
    .admin-bar-row {
        grid-template-columns: minmax(80px, 1fr) 1.4fr auto;
        gap: 0.5rem;
        font-size: 0.8rem;
    }

    .admin-bar-row > span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-hourly-chart {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-hourly-chart-inner {
        min-width: 480px;
    }
}

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

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

    .admin-stat-value {
        font-size: 1.1rem;
    }
}

/* ---- Siparis listesi satir aksiyonlari (goz/yazdir ikonlari) ---- */
.admin-row-actions {
    display: flex;
    gap: 0.4rem;
}

.admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid var(--admin-border);
    background: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    color: var(--admin-text);
}

.admin-icon-btn:hover {
    background: var(--admin-blue-bg);
    border-color: var(--admin-blue);
}

.admin-icon-btn-danger {
    color: #dc2626;
}

.admin-icon-btn-danger:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* ---- Siparis detay sayfasi grid + zaman cizelgesi ---- */
.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-detail-grid .form-panel {
    margin: 0;
}

.admin-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.admin-timeline li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.admin-timeline-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--admin-teal);
    margin-top: 0.35rem;
    flex-shrink: 0;
}

/* ---- Raporlar: basit CSS cubuk grafik ---- */
.admin-bar-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 2fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
}

.admin-bar-track {
    background: #f1f1ee;
    border-radius: 999px;
    height: 0.55rem;
    overflow: hidden;
}

.admin-bar-fill {
    height: 100%;
    background: var(--admin-teal);
    border-radius: 999px;
}

.admin-bar-value {
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}

.admin-report-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.admin-report-filter-chip {
    border: 1px solid var(--admin-border);
    background: #fff;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--admin-text);
}

.admin-report-filter-chip.active {
    background: var(--admin-teal);
    border-color: var(--admin-teal);
    color: #fff;
    font-weight: 600;
}

/* ---- Tema secim kartlari (Site Ayarlari) ---- */
.admin-theme-grid {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.admin-theme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 6.5rem;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--admin-border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--admin-text);
}

.admin-theme-card.selected {
    border-color: var(--theme-preview);
    background: var(--theme-preview-soft);
    font-weight: 600;
}

.admin-theme-swatch {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--theme-preview);
    display: block;
}

/* ---- Yazdirma: ekrandaki normal icerik gizlenir, sadece OrderReceipt.razor'un urettigi
   .print-receipt fisi gorunur (bkz. SiparisDetay.razor/Siparisler.razor "screen-only" sarmalayici) ---- */
@media print {
    .admin-sidebar,
    .admin-topbar,
    .admin-page-header-actions,
    .admin-nav-badge,
    .form-panel h3 + button,
    .btn,
    .screen-only {
        display: none !important;
    }

    .admin-main {
        margin: 0 !important;
    }

    .admin-content {
        padding: 0 !important;
    }

    .form-panel {
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }

    .print-receipt {
        display: block !important;
        padding: 1rem;
        break-after: page;
    }

    .print-receipt:last-child {
        break-after: auto;
    }
}

/* ---- Yazdirma fisi (OrderReceipt.razor) - ekranda gizli, sadece @media print'te gorunur ---- */
.print-receipt {
    display: none;
}

.print-receipt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.6rem;
}

.print-receipt-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.print-receipt-logo {
    max-height: 50px;
    max-width: 150px;
    object-fit: contain;
}

.print-receipt-section {
    margin-bottom: 0.65rem;
    font-size: 0.92rem;
}

.print-receipt-section strong {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.15rem;
}

.print-receipt-qr {
    margin-top: 1.1rem;
    text-align: center;
}

.print-receipt-qr img {
    width: 120px;
    height: 120px;
}

.print-receipt-qr-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-top: 0.3rem;
}

/* ---- Sipariş detay: durum ilerleme ikonları (SiparisDetay.razor) ---- */
.admin-status-icons {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.admin-status-icon {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    border: 2px solid var(--admin-border);
    background: #fff;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.admin-status-icon:hover {
    border-color: var(--admin-teal);
}

.admin-status-icon.active {
    border-color: var(--admin-teal);
    background: var(--admin-green-bg);
}

.admin-status-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.admin-status-icon-danger {
    color: #dc2626;
}

.admin-status-icon-danger:hover {
    border-color: #dc2626;
    background: var(--admin-red-bg);
}

.admin-status-icon-label {
    font-size: 0.68rem;
    color: var(--admin-muted);
    text-align: center;
    margin-top: 0.2rem;
}

/* ---- Sipariş listesi: durum rozetine tıklayınca açılan mini ilerleme seçici ---- */
.admin-status-picker {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.4rem;
    padding: 0.5rem;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    background: #fafbfc;
}

/* ---- Sipariş listesi kart-satırı hücreleri ---- */
.admin-order-product-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.admin-order-note-preview {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    background: var(--admin-amber-bg);
    color: #92600e;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-order-info-box {
    font-size: 0.85rem;
}

.admin-order-info-box + .admin-order-info-box {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--admin-border);
}

.admin-order-info-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--admin-muted);
    font-weight: 700;
}

/* ---- Sipariş detay: müşteri oturumu/teknik bilgiler paneli ---- */
.admin-code-box {
    background: #0f172a;
    color: #e2e8f0;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
    word-break: break-all;
    line-height: 1.5;
}

.btn-link {
    background: none;
    border: none;
    color: var(--admin-teal, #0f4d26);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 0.4rem;
}

.btn-link:hover {
    opacity: 0.75;
}

.admin-plugin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.admin-plugin-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    border-top: 3px solid #d1d5db;
}

.admin-plugin-card.active {
    border-top-color: var(--admin-teal, #0f4d26);
}

.admin-plugin-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.admin-plugin-card-header > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.admin-plugin-icon {
    font-size: 1.6rem;
}

.admin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Basit bir ayar satiri: solda baslik/aciklama, sagda tek bir admin-toggle - KuryeSistemi.razor
   gibi tek/cift ayarli sayfalarda tam bir "eklenti karti" kurmaya gerek kalmadan kullanilir. */
.admin-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--admin-border);
}

.admin-toggle-row:last-child {
    border-bottom: none;
}

.admin-toggle-row .admin-toggle {
    margin-top: 0;
}

.admin-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #d1d5db;
    position: relative;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    transition: background 0.15s ease;
}

.admin-toggle input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

.admin-toggle input[type="checkbox"]:checked {
    background: var(--admin-green);
}

.admin-toggle input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

.admin-bulk-toolbar {
    background: #f0f9f4;
    border: 1px solid #b7e3c8;
}

.admin-bulk-panel {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed #b7e3c8;
    flex-wrap: wrap;
}

/* --- Sanal Pos Ayarlari: saglayici sekmeleri + secili saglayicinin formu --- */
.admin-pos-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.admin-pos-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.6rem;
}

.admin-pos-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border: none;
    background: transparent;
    border-radius: 8px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--admin-text, #1f2937);
    cursor: pointer;
}

.admin-pos-tab:hover {
    background: #f3f4f6;
}

.admin-pos-tab.active {
    background: var(--admin-teal, #1f8a70);
    color: #fff;
}

.admin-pos-tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
}

.admin-pos-tab.active .admin-pos-tab-dot {
    background: #fff;
}

.admin-pos-form {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

@media (max-width: 720px) {
    .admin-pos-layout {
        grid-template-columns: 1fr;
    }

    .admin-pos-tabs {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* --- Sirket Bilgileri: odeme yontemi checkbox satirlari + haftalik gun secici --- */
.admin-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

.admin-checkbox-row:hover {
    background: #f9fafb;
}

.admin-weekday-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-weekday-chip {
    padding: 0.5rem 0.9rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--admin-text, #1f2937);
}

.admin-weekday-chip.active {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* --- Genel onay penceresi (ConfirmModal) - native confirm() yerine --- */
.admin-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1rem;
}

.admin-modal {
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    border-top: 4px solid var(--admin-blue, #2f5fd9);
}

.admin-modal-danger {
    border-top-color: #dc2626;
}

.admin-modal h3 {
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
}

.admin-modal p {
    margin: 0 0 1.25rem;
    color: var(--admin-muted, #6b7280);
    line-height: 1.5;
}

.admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* ---- Ziyaretçi Yönetimi: zengin "Oturumlar" listesi (referans: gagasoft) ---- */
.admin-visitor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    justify-content: space-between;
}

.admin-visitor-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-visitor-filter-chip {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.admin-visitor-filter-chip:hover {
    border-color: var(--admin-teal, #0f4a44);
}

.admin-visitor-filter-chip.active {
    background: var(--admin-teal, #0f4a44);
    border-color: var(--admin-teal, #0f4a44);
    color: #fff;
}

.admin-visitor-search {
    padding: 0.45rem 0.8rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.85rem;
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 340px;
}

.admin-visitor-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.admin-visitor-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-visitor-row-time {
    font-weight: 700;
    font-size: 0.85rem;
    color: #1f2937;
    margin-bottom: 0.4rem;
}

.admin-visitor-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.admin-visitor-detail-card {
    background: #f9fafb;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin: 0 0 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.admin-visitor-detail-section h4 {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6b7280;
}

.admin-visitor-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
    font-size: 0.82rem;
}

.admin-visitor-detail-grid > div > span.muted {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 0.1rem;
}

.admin-visitor-detail-list-item {
    font-size: 0.85rem;
    padding: 0.2rem 0;
}