/* AktifSoft Yönetim — aydınlık (varsayılan) ve karanlık tema.
   Bootstrap 5.3 data-bs-theme="light|dark" üstüne kurulu; seçim App.razor'daki betikle uygulanır.
   Renk yalnız bu iki blokta tanımlanır. */
[data-bs-theme="light"] {
    --as-bg: #f4f6fa;
    --as-surface: #ffffff;
    --as-surface-2: #f6f8fb;
    --as-border: rgba(15, 23, 42, .10);
    --as-text: #0f172a;
    --as-muted: #64748b;
    --as-muted-2: #94a3b8;
    --as-label: #334155;
    --as-primary: #0891b2;
    --as-primary-2: #4f46e5;
    --as-primary-ink: #ffffff;
    --as-gradient: linear-gradient(135deg, #0891b2 0%, #4f46e5 100%);
    --as-link: #0e7490;
    --as-link-hover: #155e75;
    --as-code: #be185d;
    --as-topbar-bg: rgba(255, 255, 255, .85);
    --as-login-card: rgba(255, 255, 255, .96);
    --as-success-text: #047857;
    --as-muted-text: #475569;
    --as-info-text: #1d4ed8;
    --as-warning-text: #c2410c;
    --as-drawer-shadow: -20px 0 60px rgba(15, 23, 42, .18);
    --bs-body-bg: var(--as-bg);
    --bs-body-color: var(--as-text);
    --bs-border-color: var(--as-border);
    --bs-secondary-color: var(--as-muted);
    --bs-tertiary-bg: var(--as-surface-2);
    --bs-link-color: #0e7490;
    --bs-link-color-rgb: 14, 116, 144;
    --bs-link-hover-color: #155e75;
    --bs-link-hover-color-rgb: 21, 94, 117;
    --bs-primary: #0891b2;
    --bs-primary-rgb: 8, 145, 178;
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-bs-theme="dark"] {
    --as-bg: #070b14;
    --as-surface: #0d1424;
    --as-surface-2: #121b2f;
    --as-border: rgba(148, 163, 184, .14);
    --as-text: #e2e8f0;
    --as-muted: #8b98ad;
    --as-muted-2: #5b6880;
    --as-label: #cbd5e1;
    --as-primary: #22d3ee;
    --as-primary-2: #6366f1;
    --as-primary-ink: #04121a;
    --as-gradient: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
    --as-link: #67e8f9;
    --as-link-hover: #a5f3fc;
    --as-code: #f9a8d4;
    --as-topbar-bg: rgba(7, 11, 20, .8);
    --as-login-card: rgba(13, 20, 36, .9);
    --as-success-text: #6ee7b7;
    --as-muted-text: #a8b3c7;
    --as-info-text: #93c5fd;
    --as-warning-text: #fdba74;
    --as-drawer-shadow: -20px 0 60px rgba(0, 0, 0, .45);
    --bs-body-bg: var(--as-bg);
    --bs-body-color: var(--as-text);
    --bs-border-color: var(--as-border);
    --bs-secondary-color: var(--as-muted);
    --bs-tertiary-bg: var(--as-surface-2);
    --bs-link-color: #67e8f9;
    --bs-link-color-rgb: 103, 232, 249;
    --bs-link-hover-color: #a5f3fc;
    --bs-link-hover-color-rgb: 165, 243, 252;
    --bs-primary: #22d3ee;
    --bs-primary-rgb: 34, 211, 238;
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.theme-toggle { font-size: 1rem; }
[data-bs-theme="light"] .theme-toggle .icon-to-light,
[data-bs-theme="dark"] .theme-toggle .icon-to-dark { display: none; }

html, body { background: var(--as-bg); color: var(--as-text); font-family: var(--bs-font-sans-serif); }
body { font-size: .925rem; }
code { color: var(--as-code); }
a { text-decoration: none; }

/* --- butonlar --- */
.btn-primary {
    --bs-btn-color: var(--as-primary-ink); --bs-btn-bg: #22d3ee; --bs-btn-border-color: #22d3ee;
    --bs-btn-hover-color: var(--as-primary-ink); --bs-btn-hover-bg: var(--as-link); --bs-btn-hover-border-color: var(--as-link);
    --bs-btn-active-bg: #06b6d4; --bs-btn-active-border-color: #06b6d4; --bs-btn-active-color: var(--as-primary-ink);
    --bs-btn-disabled-bg: #22d3ee; --bs-btn-disabled-border-color: #22d3ee; --bs-btn-disabled-color: var(--as-primary-ink);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--as-link); --bs-btn-border-color: rgba(34, 211, 238, .5);
    --bs-btn-hover-bg: rgba(34, 211, 238, .12); --bs-btn-hover-color: var(--as-link-hover); --bs-btn-hover-border-color: #22d3ee;
    --bs-btn-active-bg: rgba(34, 211, 238, .2); --bs-btn-active-color: var(--as-link-hover);
}
.btn-icon { border: 0; background: transparent; color: var(--as-muted); padding: .3rem .45rem; border-radius: .5rem; }
.btn-icon:hover { background: var(--as-surface-2); color: var(--as-text); }
.form-control, .form-select { background-color: var(--as-surface-2); border-color: var(--as-border); }
.form-control:focus, .form-select:focus { border-color: var(--as-primary); box-shadow: 0 0 0 .2rem rgba(34, 211, 238, .18); background-color: var(--as-surface-2); }
.form-check-input:checked { background-color: var(--as-primary); border-color: var(--as-primary); }
.form-label { font-weight: 500; color: var(--as-label); margin-bottom: .35rem; }
.validation-message { color: #f87171; font-size: .8rem; }

/* --- iskelet --- */
.admin-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 260px; flex-shrink: 0; background: var(--as-surface); border-right: 1px solid var(--as-border);
    position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.25rem .85rem;
}
.brand { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; color: var(--as-text); padding: 0 .5rem 1.25rem; }
.brand b { background: var(--as-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { margin-left: auto; font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--as-muted); }
.brand-mark {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800;
    color: var(--as-primary-ink); background: var(--as-gradient); box-shadow: 0 6px 20px rgba(34, 211, 238, .25);
}
.brand-logo { width: auto; display: block; }
.brand-logo-dark { display: none; }
[data-bs-theme="dark"] .brand-logo-light { display: none; }
[data-bs-theme="dark"] .brand-logo-dark { display: block; }

/* Panel → site yayın durumu kartı */
.site-status { border-left: 4px solid var(--status); }
.site-status.is-online { --status: #10b981; }
.site-status.is-offline { --status: #f59e0b; }
.site-status .status-icon {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0;
    color: var(--status); background: color-mix(in srgb, var(--status) 14%, transparent);
}
.site-status .status-pill {
    margin-left: .4rem; padding: .1rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 600; vertical-align: middle;
    color: var(--status); background: color-mix(in srgb, var(--status) 14%, transparent);
}

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
    display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: .6rem;
    color: var(--as-muted); font-weight: 500; transition: background .15s, color .15s;
}
.side-nav a i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.side-nav a:hover { background: var(--as-surface-2); color: var(--as-text); }
.side-nav a.active { background: rgba(34, 211, 238, .1); color: var(--as-link); box-shadow: inset 3px 0 0 var(--as-primary); }
.nav-group { margin: 1.1rem .75rem .35rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--as-muted-2); font-weight: 600; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1.75rem; background: var(--as-topbar-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--as-border);
}
.topbar .btn-icon { font-size: 1.4rem; }
.user-chip { color: var(--as-muted); font-size: .85rem; display: inline-flex; gap: .4rem; align-items: center; }
.content { padding: 1.75rem; max-width: 1500px; width: 100%; }
.backdrop { display: none; }

@media (max-width: 991.98px) {
    .sidebar { position: fixed; left: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
    .menu-open .sidebar { transform: none; }
    .menu-open .backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); }
    .content, .topbar { padding-left: 1rem; padding-right: 1rem; }
}

/* --- sayfa başlığı ve paneller --- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; }
.page-head p { color: var(--as-muted); margin: 0; max-width: 720px; }
.panel { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 1rem; overflow: hidden; }
.panel .card-header { background: transparent; border-bottom: 1px solid var(--as-border); font-weight: 600; padding: .9rem 1.25rem; }
.panel-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--as-border); }
.search { position: relative; width: 260px; max-width: 100%; }
.search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--as-muted); font-size: .85rem; }
.search input { padding-left: 2rem; }

.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(148, 163, 184, .05); --bs-table-border-color: var(--as-border); }
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--as-muted); font-weight: 600; padding: .75rem 1rem; background: var(--as-surface-2); }
.table td { padding: .7rem 1rem; }
.thumb { width: 44px; height: 32px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--as-border); }
.thumb.contain { object-fit: contain; background: #fff; }
.icon-tile {
    --accent: #22d3ee; width: 34px; height: 34px; border-radius: .6rem; display: inline-grid; place-items: center; flex-shrink: 0;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.tree-indent { color: var(--as-muted); margin: 0 .4rem 0 .6rem; }
.text-gradient { background: var(--as-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }

.badge { font-weight: 500; }
.badge-soft-success { background: rgba(52, 211, 153, .14); color: var(--as-success-text); }
.badge-soft-success i, .badge-soft-muted i { font-size: .45rem; vertical-align: middle; margin-right: .2rem; }
.badge-soft-muted { background: rgba(148, 163, 184, .16); color: var(--as-muted-text); }
.badge-soft-info { background: rgba(96, 165, 250, .16); color: var(--as-info-text); }
.badge-soft-warning { background: rgba(251, 146, 60, .16); color: var(--as-warning-text); }

/* --- yan çekmece (form) --- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 14, .65); z-index: 60; backdrop-filter: blur(2px); }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: 560px; max-width: 100vw;
    background: var(--as-surface); border-left: 1px solid var(--as-border); box-shadow: var(--as-drawer-shadow);
    animation: drawer-in .18s ease-out;
}
.drawer.wide { width: 860px; }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-form { display: flex; flex-direction: column; height: 100%; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--as-border); }
.drawer-head h2 { font-size: 1.1rem; margin: 0; font-weight: 600; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.drawer-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--as-border); background: var(--as-surface-2); }

/* --- sayfa metinleri sekmeleri --- */
.text-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.text-tabs button {
    display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: .6rem;
    border: 1px solid var(--as-border); background: var(--as-surface); color: var(--as-muted); font-weight: 500;
}
.text-tabs button.on { border-color: var(--as-primary); background: rgba(34, 211, 238, .1); color: var(--as-link); }
.text-tabs .count { font-size: .72rem; padding: 0 .45rem; border-radius: 999px; background: rgba(148, 163, 184, .15); }

/* --- menü hedef seçimi --- */
.target-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.target-tabs button {
    display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: .6rem;
    border: 1px solid var(--as-border); background: var(--as-surface-2); color: var(--as-muted); font-size: .85rem;
}
.target-tabs button:hover { color: var(--as-text); }
.target-tabs button.on { border-color: var(--as-primary); background: rgba(34, 211, 238, .1); color: var(--as-link); }
.target-panel { padding: 1rem; border: 1px solid var(--as-border); border-radius: .75rem; background: rgba(148, 163, 184, .03); }
.new-page-box { margin-top: .5rem; padding: .85rem 1rem; border-radius: .6rem; border: 1px dashed rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .04); }

/* --- bileşenler --- */
.image-upload { display: flex; gap: 1rem; align-items: flex-start; }
.image-upload .preview {
    width: 120px; height: 80px; flex-shrink: 0; border-radius: .6rem; border: 1px dashed var(--as-border); background: var(--as-surface-2);
    display: grid; place-items: center; overflow: hidden; color: var(--as-muted); font-size: 1.5rem;
}
.image-upload img, .image-upload video { width: 100%; height: 100%; object-fit: cover; }
.file-badge { display: grid; place-items: center; gap: 2px; color: var(--as-primary); }
.file-badge small { font-size: .7rem; font-weight: 700; letter-spacing: .05em; }
.icon-preview { min-width: 44px; justify-content: center; color: var(--as-primary); font-size: 1.1rem; }
.html-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.html-editor textarea { font-size: .82rem; line-height: 1.5; }
.html-preview { min-height: 200px; padding: 1rem 1.25rem; border: 1px solid var(--as-border); border-radius: .5rem; background: var(--as-surface-2); }
.rich-text h3 { font-size: 1.05rem; margin-top: 1rem; }
.rich-text img { max-width: 100%; }

.stat-card {
    --accent: #22d3ee; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .9rem;
    padding: 1.1rem 1.2rem; border-radius: 1rem; background: var(--as-surface); border: 1px solid var(--as-border);
    color: var(--as-text); transition: border-color .15s, transform .15s;
}
.stat-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-2px); color: var(--as-text); }
.stat-icon {
    grid-row: span 2; width: 46px; height: 46px; border-radius: .8rem; display: grid; place-items: center; font-size: 1.25rem;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: var(--as-muted); font-size: .8rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--as-gradient); color: var(--as-primary-ink); font-weight: 700; flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--as-border); --bs-list-group-action-hover-bg: var(--as-surface-2); }
.checklist { padding-left: 1.1rem; margin: 0; display: grid; gap: .6rem; color: var(--as-muted); }

/* --- mesaj kutusu --- */
.inbox { display: grid; grid-template-columns: 360px 1fr; min-height: 560px; }
.inbox-list { border-right: 1px solid var(--as-border); overflow-y: auto; max-height: 72vh; }
.inbox-item {
    display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--as-text);
    padding: .85rem 1rem; border-bottom: 1px solid var(--as-border);
}
.inbox-item:hover { background: var(--as-surface-2); }
.inbox-item.active { background: rgba(34, 211, 238, .08); box-shadow: inset 3px 0 0 var(--as-primary); }
.inbox-item.unread .name { font-weight: 700; }
.inbox-item.unread .name::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--as-primary); margin-right: .45rem; vertical-align: middle; }
.contact-meta dt { color: var(--as-muted); font-weight: 500; }
.message-body { white-space: pre-wrap; background: var(--as-surface-2); border: 1px solid var(--as-border); border-radius: .75rem; padding: 1rem 1.25rem; line-height: 1.6; }
@media (max-width: 991.98px) { .inbox { grid-template-columns: 1fr; } .inbox-list { border-right: 0; max-height: 40vh; } }

/* --- giriş --- */
.login-page {
    min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
    background: radial-gradient(800px 400px at 15% 10%, rgba(34, 211, 238, .14), transparent 60%),
                radial-gradient(700px 400px at 90% 90%, rgba(99, 102, 241, .16), transparent 60%), var(--as-bg);
}
.login-card { width: 100%; max-width: 400px; padding: 2.25rem; border-radius: 1.25rem; background: var(--as-login-card); border: 1px solid var(--as-border); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.login-card .brand { padding: 0; }
.login-theme { position: fixed; top: 1rem; right: 1rem; }

/* --- Blazor hata çubuğu --- */
#blazor-error-ui {
    background: #7f1d1d; color: #fff; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui a { color: #fecaca; margin-left: .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: #7f1d1d; padding: 1rem; color: white; border-radius: .5rem; }
.blazor-error-boundary::after { content: "Bu bölümde bir hata oluştu."; }