/* =====================================================================
   MediaBalans CMS - modern tasarım katmanı
   ---------------------------------------------------------------------
   Bu dosya styles.css'ten (SB Admin Pro) SONRA yüklenir ve onun üstüne
   yazar. SB Admin'in DOM yapısı ve JS'i (sidebarToggle, collapse, feather)
   olduğu gibi korunur; sadece görsel katman değiştirilir.

   Neden ayrı dosya: styles.css 20.000 satırlık üretilmiş bir tema dosyası.
   İçini düzenlemek her güncellemede kaybolur ve gözden kaçan yüzlerce
   kural bırakır. Tek yönlü bir override katmanı hem geri alınabilir hem de
   hangi kararın bize ait olduğunu okunur tutar.

   Sıra: 1) tokenlar 2) yerleşim 3) bileşenler 4) sayfaya özel yardımcılar
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Tasarım tokenları                                                */
/* ------------------------------------------------------------------ */
:root {
    /* Yüzeyler */
    --cms-bg: #f5f6fa;
    --cms-surface: #ffffff;
    --cms-surface-2: #fafbfc;
    --cms-border: #e5e7eb;
    --cms-border-strong: #d1d5db;

    /* Metin */
    --cms-text: #111827;
    --cms-text-soft: #4b5563;
    --cms-text-muted: #6b7280;
    --cms-text-faint: #9ca3af;

    /* Marka */
    --cms-primary: #4f46e5;
    --cms-primary-hover: #4338ca;
    --cms-primary-active: #3730a3;
    --cms-primary-soft: #eef2ff;
    --cms-primary-ring: rgba(79, 70, 229, .18);

    /* Durum */
    --cms-success: #059669;
    --cms-success-soft: #ecfdf5;
    --cms-danger: #e11d48;
    --cms-danger-soft: #fff1f2;
    --cms-warning: #d97706;
    --cms-warning-soft: #fffbeb;
    --cms-info: #0284c7;
    --cms-info-soft: #f0f9ff;

    /* Geometri */
    --cms-radius-sm: 8px;
    --cms-radius: 12px;
    --cms-radius-lg: 16px;
    --cms-radius-pill: 999px;

    --cms-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --cms-shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --cms-shadow: 0 4px 14px rgba(16, 24, 40, .07), 0 1px 3px rgba(16, 24, 40, .05);
    --cms-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);

    /* Yerleşim ölçüleri - aşağıdaki override'ların tamamı buna bakar */
    --cms-sidebar-w: 16rem;
    --cms-topbar-h: 4rem;

    --cms-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ------------------------------------------------------------------ */
/* 2. Temel tipografi ve zemin                                         */
/* ------------------------------------------------------------------ */
body {
    font-family: var(--cms-font);
    background-color: var(--cms-bg);
    color: var(--cms-text);
    font-size: .9rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cms-font);
    color: var(--cms-text);
    font-weight: 600;
    letter-spacing: -.015em;
}

a { color: var(--cms-primary); text-decoration: none; }
a:hover { color: var(--cms-primary-hover); }

hr {
    border-color: var(--cms-border);
    opacity: 1;
}

::selection { background: var(--cms-primary-soft); color: var(--cms-primary-active); }

/* İnce, modern kaydırma çubuğu */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--cms-radius-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* ------------------------------------------------------------------ */
/* 3. Yerleşim - sidebar 16rem, üst bar 4rem                           */
/*    SB Admin bu ölçüleri 15rem / 3.625rem olarak sabitler; aşağıdaki  */
/*    kurallar o sabitlerin geçtiği HER yeri karşılar, aksi halde       */
/*    sidebar ile içerik birbirinin üstüne biner.                       */
/* ------------------------------------------------------------------ */
#layoutSidenav #layoutSidenav_nav {
    flex-basis: var(--cms-sidebar-w);
    transform: translateX(calc(-1 * var(--cms-sidebar-w)));
}

#layoutSidenav #layoutSidenav_content {
    margin-left: calc(-1 * var(--cms-sidebar-w));
    min-height: calc(100vh - var(--cms-topbar-h));
    background-color: var(--cms-bg);
}

.sidenav-toggled #layoutSidenav #layoutSidenav_nav { transform: translateX(0); }

.sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
    background: #0f172a;
    opacity: .45;
}

@media (min-width: 992px) {
    #layoutSidenav #layoutSidenav_nav { transform: translateX(0); }
    #layoutSidenav #layoutSidenav_content { margin-left: 0; }

    .sidenav-toggled #layoutSidenav #layoutSidenav_nav {
        transform: translateX(calc(-1 * var(--cms-sidebar-w)));
    }
    .sidenav-toggled #layoutSidenav #layoutSidenav_content {
        margin-left: calc(-1 * var(--cms-sidebar-w));
    }
}

.nav-fixed #layoutSidenav #layoutSidenav_nav { width: var(--cms-sidebar-w); }
.nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav { padding-top: var(--cms-topbar-h); }
.nav-fixed #layoutSidenav #layoutSidenav_content {
    padding-left: var(--cms-sidebar-w);
    top: var(--cms-topbar-h);
}

/* Sidebar kapalıyken padding'i AYRICA sıfırlamak GEREKMİYOR.
   Tema, içeriği sabit padding-left ile sağa itip kapalı durumda aynı ölçüde
   negatif margin-left vererek geri alıyor; ikisi birbirini götürüyor. Buraya
   bir `padding-left: 0` eklemek içeriği 16rem sola kaydırıp soldan kırpıyordu. */

/* ------------------------------------------------------------------ */
/* 4. Üst bar                                                          */
/* ------------------------------------------------------------------ */
.topnav {
    height: var(--cms-topbar-h);
    background-color: var(--cms-surface) !important;
    border-bottom: 1px solid var(--cms-border);
    box-shadow: none !important;
    padding-right: 1rem;
}

.topnav .navbar-brand {
    width: var(--cms-sidebar-w);
    font-size: .95rem;
    font-weight: 600;
    color: var(--cms-text) !important;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: .625rem;
}

@media (min-width: 992px) {
    .topnav .navbar-brand { width: calc(var(--cms-sidebar-w) - 1.5rem); }
}

.topnav .navbar-brand .brand-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cms-primary) 0%, #7c3aed 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: -.02em;
    box-shadow: 0 2px 6px var(--cms-primary-ring);
}

.topnav .navbar-brand .brand-text { line-height: 1.15; }
.topnav .navbar-brand .brand-text small {
    display: block;
    font-size: .68rem;
    font-weight: 500;
    color: var(--cms-text-faint);
    letter-spacing: .02em;
}

/* Üst bardaki ikon butonları */
.topnav .btn-icon,
.btn-transparent-dark {
    color: var(--cms-text-muted) !important;
    border-radius: var(--cms-radius-sm);
    transition: background-color .15s ease, color .15s ease;
}
.topnav .btn-icon:hover,
.btn-transparent-dark:hover {
    background-color: #f1f2f6 !important;
    color: var(--cms-text) !important;
}

.topnav .dropdown-user .btn-icon { padding: 0; }

/* Avatar - resim yerine baş harf rozeti */
.cms-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
    flex: 0 0 auto;
}
.cms-avatar-lg { width: 42px; height: 42px; font-size: .9rem; }

/* ------------------------------------------------------------------ */
/* 5. Sol menü                                                         */
/* ------------------------------------------------------------------ */
.sidenav {
    font-size: .875rem;
    background-color: var(--cms-surface);
    border-right: 1px solid var(--cms-border);
}

.sidenav.shadow-right { box-shadow: none !important; }

.sidenav .sidenav-menu { padding: .5rem .75rem 0; }

.sidenav .sidenav-menu .nav .sidenav-menu-heading {
    padding: 1.25rem .75rem .4rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .07em;
    color: var(--cms-text-faint);
    text-transform: uppercase;
}

.sidenav .sidenav-menu .nav .nav-link {
    padding: .55rem .75rem;
    margin-bottom: .125rem;
    border-radius: var(--cms-radius-sm);
    color: var(--cms-text-soft);
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.sidenav .sidenav-menu .nav .nav-link:hover {
    background-color: #f4f5f9;
    color: var(--cms-text);
}

.sidenav .sidenav-menu .nav .nav-link.active {
    background-color: var(--cms-primary-soft);
    color: var(--cms-primary-active);
    font-weight: 600;
}

.sidenav .sidenav-menu .nav .nav-link .nav-link-icon {
    color: var(--cms-text-faint);
    margin-right: .625rem;
    display: inline-flex;
    align-items: center;
}
.sidenav .sidenav-menu .nav .nav-link:hover .nav-link-icon { color: var(--cms-text-soft); }
.sidenav .sidenav-menu .nav .nav-link.active .nav-link-icon { color: var(--cms-primary); }
.sidenav .sidenav-menu .nav .nav-link .nav-link-icon .feather { width: 18px; height: 18px; }

.sidenav .sidenav-menu .nav .nav-link .sidenav-collapse-arrow {
    margin-left: auto;
    font-size: .7rem;
    color: var(--cms-text-faint);
    transition: transform .15s ease;
}
.sidenav .sidenav-menu .nav .nav-link[aria-expanded="true"] .sidenav-collapse-arrow {
    transform: rotate(180deg);
}

/* İç içe menü - sol tarafta ince kılavuz çizgi */
.sidenav .sidenav-menu .nav .sidenav-menu-nested {
    margin: .125rem 0 .375rem;
    padding-left: 1.75rem;
    border-left: 1px solid var(--cms-border);
    margin-left: 1.25rem;
}

.sidenav .sidenav-menu .nav .sidenav-menu-nested .nav-link {
    padding: .45rem .625rem;
    font-size: .84rem;
    font-weight: 500;
}

/* Alt bilgi kartı */
.sidenav .sidenav-footer {
    padding: .875rem;
    background-color: transparent;
    border-top: 1px solid var(--cms-border);
}
.sidenav .sidenav-footer .sidenav-footer-content {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem;
    background-color: var(--cms-surface-2);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    min-width: 0;
}
.sidenav .sidenav-footer .sidenav-footer-subtitle {
    font-size: .68rem;
    color: var(--cms-text-faint);
    line-height: 1.2;
}
.sidenav .sidenav-footer .sidenav-footer-title {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cms-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ */
/* 6. Sayfa başlığı                                                    */
/*    Eski koyu mor gradient header + kartların mt-n10 ile üstüne       */
/*    binmesi yerine düz, açık bir başlık şeridi.                       */
/* ------------------------------------------------------------------ */
.cms-page-head {
    padding: 1.75rem 0 1.25rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.cms-page-head .cms-page-head-main { min-width: 0; }

.cms-page-head .cms-breadcrumb {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .78rem;
    color: var(--cms-text-faint);
    margin-bottom: .5rem;
    flex-wrap: wrap;
}
.cms-page-head .cms-breadcrumb a { color: var(--cms-text-muted); font-weight: 500; }
.cms-page-head .cms-breadcrumb a:hover { color: var(--cms-primary); }
.cms-page-head .cms-breadcrumb .sep { color: var(--cms-border-strong); }
.cms-page-head .cms-breadcrumb .current { color: var(--cms-text-soft); font-weight: 500; }

.cms-page-head .cms-page-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.5rem;
    font-weight: 650;
    margin: 0;
    letter-spacing: -.02em;
}

.cms-page-head .cms-page-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--cms-radius);
    background-color: var(--cms-primary-soft);
    color: var(--cms-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cms-page-head .cms-page-icon .feather { width: 20px; height: 20px; }

.cms-page-head .cms-page-subtitle {
    margin: .375rem 0 0;
    color: var(--cms-text-muted);
    font-size: .875rem;
}

.cms-page-head .cms-page-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Eski tema başlığı hâlâ bir yerde kalırsa sayfayı bozmasın */
.page-header.page-header-dark { background: var(--cms-surface) !important; }
.page-header.pb-10 { padding-bottom: 1.5rem !important; }
.mt-n10 { margin-top: 0 !important; }

/* ------------------------------------------------------------------ */
/* 7. Kartlar                                                          */
/* ------------------------------------------------------------------ */
.card {
    background-color: var(--cms-surface);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    box-shadow: var(--cms-shadow-xs);
}

.card > .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--cms-border);
    padding: 1rem 1.25rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--cms-text);
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    min-height: auto;
}

/* Tema kart başlıklarını mavi yazıyor:
   `.card:not([class*=bg-]) .card-header { color: #0061f2 }` - üç sınıf ağırlığında
   olduğu için yukarıdaki iki sınıflık kuralımızı yeniyordu ve her kart başlığı
   bağlantı gibi görünüyordu. Aynı ağırlıkta, sonra gelen bir kuralla düzeltiliyor. */
.card:not([class*="bg-"]) > .card-header {
    color: var(--cms-text);
}

.card > .card-header .cms-card-sub {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    color: var(--cms-text-muted);
    margin-top: .125rem;
}

.card > .card-header .card-header-actions,
.card > .card-header .rid {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.card .card-body { padding: 1.25rem; }
.card .card-footer {
    background-color: var(--cms-surface-2);
    border-top: 1px solid var(--cms-border);
    padding: .875rem 1.25rem;
    border-radius: 0 0 var(--cms-radius-lg) var(--cms-radius-lg);
}

/* Eski temanın dalgalı arka planlı kartı */
.card.card-waves { background-image: none; }

/* ------------------------------------------------------------------ */
/* 8. Butonlar                                                         */
/* ------------------------------------------------------------------ */
.btn {
    border-radius: var(--cms-radius-sm);
    font-weight: 500;
    font-size: .875rem;
    padding: .5rem .9rem;
    letter-spacing: 0;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.btn .feather { width: 16px; height: 16px; }

.btn:focus, .btn:focus-visible {
    box-shadow: 0 0 0 3px var(--cms-primary-ring);
    outline: none;
}

.btn-sm { padding: .375rem .7rem; font-size: .8125rem; border-radius: var(--cms-radius-sm); }
.btn-lg { padding: .65rem 1.15rem; font-size: .95rem; }

.btn-primary {
    background-color: var(--cms-primary);
    border-color: var(--cms-primary);
    color: #fff;
    box-shadow: var(--cms-shadow-xs);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cms-primary-hover);
    border-color: var(--cms-primary-hover);
    color: #fff;
}
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--cms-primary-active) !important;
    border-color: var(--cms-primary-active) !important;
}
.btn-primary:disabled, .btn-primary.disabled { background-color: #a5b4fc; border-color: #a5b4fc; }

/* İkincil = beyaz zemin, gri kenarlık (eski gri dolgu yerine) */
.btn-secondary,
.btn-dark,
.btn-light {
    background-color: var(--cms-surface);
    border-color: var(--cms-border-strong);
    color: var(--cms-text-soft);
    box-shadow: var(--cms-shadow-xs);
}
.btn-secondary:hover, .btn-dark:hover, .btn-light:hover {
    background-color: #f9fafb;
    border-color: #b9bfc9;
    color: var(--cms-text);
}
.btn-secondary:active, .btn-dark:active, .btn-light:active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled):active {
    background-color: #f3f4f6 !important;
    border-color: #b9bfc9 !important;
    color: var(--cms-text) !important;
}

.btn-danger {
    background-color: var(--cms-danger);
    border-color: var(--cms-danger);
    color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #be123c; border-color: #be123c; color: #fff;
}
.btn-danger:focus, .btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(225, 29, 72, .18); }

.btn-success { background-color: var(--cms-success); border-color: var(--cms-success); color: #fff; }
.btn-success:hover { background-color: #047857; border-color: #047857; color: #fff; }

.btn-link { color: var(--cms-text-muted); text-decoration: none; box-shadow: none; }
.btn-link:hover { color: var(--cms-text); text-decoration: underline; }

/* Tablo satırı içi ikon butonları */
.btn-datatable,
.btn-icon.btn-datatable {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--cms-radius-sm);
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--cms-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
.btn-datatable .feather { width: 16px; height: 16px; }
.btn-datatable:hover {
    background-color: #f1f2f6;
    border-color: var(--cms-border);
    color: var(--cms-text);
}
.btn-datatable.btn-datatable-danger:hover {
    background-color: var(--cms-danger-soft);
    border-color: #fecdd3;
    color: var(--cms-danger);
}

.btn-icon { border-radius: var(--cms-radius-sm); }

/* ------------------------------------------------------------------ */
/* 9. Form elemanları                                                  */
/* ------------------------------------------------------------------ */
.form-label,
label.form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cms-text-soft);
    margin-bottom: .375rem;
    letter-spacing: -.005em;
}

.form-label .form-label-lang {
    display: inline-block;
    margin-left: .375rem;
    padding: .05rem .35rem;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cms-text-muted);
    background-color: #f1f2f6;
    border-radius: var(--cms-radius-pill);
    vertical-align: middle;
}

.form-text, .cms-hint {
    font-size: .76rem;
    color: var(--cms-text-muted);
    margin-top: .3rem;
    display: block;
}

.form-control,
.form-select,
.datatable-input {
    border: 1px solid var(--cms-border-strong);
    border-radius: var(--cms-radius-sm);
    padding: .55rem .75rem;
    font-size: .875rem;
    color: var(--cms-text);
    background-color: var(--cms-surface);
    box-shadow: var(--cms-shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control::placeholder { color: var(--cms-text-faint); }

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: #b9bfc9; }

.form-control:focus,
.form-select:focus,
.datatable-input:focus {
    border-color: var(--cms-primary);
    box-shadow: 0 0 0 3px var(--cms-primary-ring);
    background-color: var(--cms-surface);
    outline: none;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f3f4f6;
    color: var(--cms-text-muted);
}

textarea.form-control { min-height: 96px; line-height: 1.6; resize: vertical; }

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right .7rem center;
    background-size: 16px 16px;
    padding-right: 2.25rem;
}

/* Doğrulama */
.form-control.input-validation-error,
.form-select.input-validation-error,
.form-control.is-invalid {
    border-color: var(--cms-danger);
}
.form-control.input-validation-error:focus,
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(225, 29, 72, .16);
}

.field-validation-error,
span[asp-validation-for],
.text-danger {
    color: var(--cms-danger) !important;
    font-size: .78rem;
    display: inline-block;
    margin-top: .3rem;
}

/* Hata yokken doğrulama alanı yer kaplamasın. jQuery-validation her alanın altına
   boş bir <span class="field-validation-valid"> bırakıyor; inline-block + margin
   ile bu, girdiyle ipucu metni arasında boş bir satır oluşturuyordu. */
.field-validation-valid { display: none; }

.validation-summary-errors {
    background-color: var(--cms-danger-soft);
    border: 1px solid #fecdd3;
    color: #9f1239;
    border-radius: var(--cms-radius);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .84rem;
}
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.validation-summary-valid { display: none; }

/* Dosya seçici */
.form-control[type="file"] { padding: .4rem .5rem; }
.form-control[type="file"]::file-selector-button {
    padding: .35rem .7rem;
    margin: -.05rem .7rem -.05rem -.15rem;
    border: 1px solid var(--cms-border-strong);
    border-radius: 6px;
    background-color: var(--cms-surface-2);
    color: var(--cms-text-soft);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease;
}
.form-control[type="file"]::file-selector-button:hover { background-color: #eef0f4; }

/* Onay kutusu / anahtar */
.form-check-input {
    border-color: var(--cms-border-strong);
    box-shadow: none;
}
.form-check-input:checked {
    background-color: var(--cms-primary);
    border-color: var(--cms-primary);
}
.form-check-input:focus {
    border-color: var(--cms-primary);
    box-shadow: 0 0 0 3px var(--cms-primary-ring);
}
.form-check-label { font-size: .85rem; color: var(--cms-text-soft); }

.form-switch .form-check-input { width: 2.5rem; height: 1.35rem; margin-top: .05rem; }

/* Anahtarı okunur bir "açık / kapalı" satırına çevirir */
.cms-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .875rem;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-sm);
    background-color: var(--cms-surface-2);
}
.cms-switch-row .cms-switch-text strong {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--cms-text);
}
.cms-switch-row .cms-switch-text span { font-size: .76rem; color: var(--cms-text-muted); }
.cms-switch-row .form-check { margin: 0; min-height: auto; padding-left: 2.75rem; }

/* ------------------------------------------------------------------ */
/* 10. Sekmeler (dil pill'leri)                                        */
/* ------------------------------------------------------------------ */
.nav-pills {
    background-color: #f1f2f6;
    border-radius: var(--cms-radius);
    padding: .25rem;
    gap: .25rem;
    display: inline-flex;
    flex-wrap: wrap;
}

.nav-pills .nav-link {
    border-radius: 9px;
    padding: .4rem .85rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--cms-text-muted);
    background-color: transparent;
    border: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav-pills .nav-link:hover { color: var(--cms-text); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--cms-surface);
    color: var(--cms-primary-active);
    font-weight: 600;
    box-shadow: var(--cms-shadow-xs);
}

/* ------------------------------------------------------------------ */
/* 11. Tablolar                                                        */
/* ------------------------------------------------------------------ */
.cms-table-wrap {
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    overflow: hidden;
    background-color: var(--cms-surface);
}
.cms-table-scroll { overflow-x: auto; }

table.datatable-table,
table.table,
.cms-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--cms-text);
    font-size: .875rem;
}

table.datatable-table thead th,
.cms-table thead th {
    background-color: var(--cms-surface-2);
    border-bottom: 1px solid var(--cms-border) !important;
    border-top: none !important;
    padding: .7rem 1rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cms-text-muted);
    white-space: nowrap;
    vertical-align: middle;
}

table.datatable-table tbody td,
.cms-table tbody td {
    padding: .75rem 1rem;
    border-top: none;
    border-bottom: 1px solid var(--cms-border);
    vertical-align: middle;
    color: var(--cms-text-soft);
}

table.datatable-table tbody tr:last-child td,
.cms-table tbody tr:last-child td { border-bottom: none; }

table.datatable-table tbody tr:hover,
.cms-table tbody tr:hover { background-color: #fafbfd; }

.cms-table .cms-cell-title {
    font-weight: 600;
    color: var(--cms-text);
    display: block;
}
.cms-table .cms-cell-sub {
    font-size: .76rem;
    color: var(--cms-text-faint);
    display: block;
    margin-top: .1rem;
}
.cms-table .cms-cell-actions {
    white-space: nowrap;
    text-align: end;
    width: 1%;
}
.cms-table .cms-cell-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 420px;
}

/* Liste satırındaki küçük görsel */
.cms-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 10px;
    border: 1px solid var(--cms-border);
    background-color: var(--cms-surface-2);
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cms-text-faint);
    overflow: hidden;
}
.cms-thumb-empty .feather { width: 18px; height: 18px; }

/* Görsel yüklenemediğinde (dosya silinmiş, CDN erişilemiyor) tarayıcının bozuk
   resim ikonu yerine sade bir yer tutucu. Sınıfı görselin onerror'u ekliyor. */
.cms-thumb-broken {
    color: transparent;
    background-color: var(--cms-surface-2);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='3' width='18' height='18' rx='2'/%3e%3ccircle cx='8.5' cy='8.5' r='1.5'/%3e%3cpath d='M21 15l-5-5L5 21'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
}

/* Sürükle-bırak sıralama tutamağı */
.cms-drag-handle { cursor: grab; color: var(--cms-text-faint); }
.cms-drag-handle:active { cursor: grabbing; }
tr.sortable-placeholder,
.sortable-placeholder { height: 56px; background-color: var(--cms-primary-soft); }

/* simple-datatables kabuğu.
   ------------------------------------------------------------------
   Sürüm 10 sınıf adlarını `dataTable-*` -> `datatable-*` olarak değiştirdi.
   Temanın styles.css'i eski adlara göre yazılmış 115 kural içeriyor ve
   bunların HİÇBİRİ artık eşleşmiyor - yani sayfalama düğmesinin kenarlığı,
   select'in ok işareti gibi eskiden temadan gelen şeyler de burada
   verilmek zorunda. Tabloyu baştan sona bu katman biçimlendiriyor.

   İkinci fark DOM'da: sayfalama artık <a> değil <button>, aktif sayfanın
   sınıfı `active` değil `datatable-active`, başlıktaki sıralama tutamağı da
   <a> değil <button>. Aşağıdaki kurallar buton varsayılanlarını (kenarlık,
   arka plan, font) sıfırlıyor - yoksa sayfalama tarayıcının gri düğmeleri
   olarak çizilir. */
.datatable-wrapper .datatable-top,
.datatable-wrapper .datatable-bottom {
    padding: .875rem 1rem;
    font-size: .82rem;
    color: var(--cms-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.datatable-wrapper .datatable-top { border-bottom: 1px solid var(--cms-border); }
.datatable-wrapper .datatable-bottom { border-top: 1px solid var(--cms-border); }

/* Kütüphane bu blokları float ile yerleştiriyor; flex düzeninde float artık
   gereksiz ve satırı bozuyor. Aynı sebeple ::after clearfix'i de kapatıyoruz. */
.datatable-wrapper .datatable-dropdown,
.datatable-wrapper .datatable-search,
.datatable-wrapper .datatable-info,
.datatable-wrapper .datatable-pagination { float: none; }
.datatable-wrapper .datatable-top::after,
.datatable-wrapper .datatable-bottom::after { content: none; }

/* .no-footer / .no-header kütüphanenin kendi CSS'inde konteynere gri bir
   kenarlık çiziyor (varsayılan ayarlarda no-footer HER ZAMAN ekleniyor).
   Tabloyu saran kartın kendi kenarlığı zaten var; iki sınıfı da adıyla
   yazmak, üç sınıflık o kuralı geçebilmek için. */
.datatable-wrapper .datatable-container,
.datatable-wrapper.no-header .datatable-container,
.datatable-wrapper.no-footer .datatable-container {
    border: none;
    overflow-x: auto;   /* dar ekranda tablo kartın dışına taşmasın */
    overflow-y: visible;
}
/* Kartın içindeki tablo kartın köşelerine oturur; ekstra kenarlık istemiyoruz. */
.card > .datatable-wrapper,
.card > .cms-table-scroll { border-radius: 0 0 var(--cms-radius-lg) var(--cms-radius-lg); overflow: hidden; }
.card > .cms-table-scroll { overflow-x: auto; }

/* "Sayfa başına" seçicisi. Ok işareti eskiden temanın .form-select kuralından
   geliyordu; artık eşleşmediği için SVG burada. */
.datatable-selector {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--cms-border-strong);
    border-radius: 6px;
    width: auto;
    min-width: 4.75rem;
    padding: .3rem 1.75rem .3rem .55rem;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--cms-text-soft);
    background-color: var(--cms-surface);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 14px 14px;
}
.datatable-selector:focus {
    border-color: var(--cms-primary);
    box-shadow: 0 0 0 3px var(--cms-primary-ring);
    outline: none;
}
.datatable-dropdown label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 0;
}

/* Arama kutusu. labels.searchLabel boş verildiği için etiketin görünen metni
   yok; yine de <label> input'u sarıyor, hizalamayı o yüzden burada veriyoruz. */
.datatable-search-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}
.datatable-input {
    -webkit-appearance: none;
    appearance: none;
    padding: .4rem .7rem .4rem 2.1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cpath d='M21 21l-4.35-4.35'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left .6rem center;
    background-size: 15px 15px;
    min-width: 220px;
}

/* Sayfalama. Liste öğeleri <li class="datatable-pagination-list-item">, içinde
   <button class="datatable-pagination-list-item-link">. */
.datatable-pagination ul,
.datatable-pagination-list {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.datatable-pagination-list-item { float: none; }
.datatable-pagination a,
.datatable-pagination button {
    display: block;
    float: none;
    margin: 0;
    border: 1px solid transparent;
    background-color: transparent;
    border-radius: 6px;
    padding: .3rem .6rem;
    color: var(--cms-text-soft);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
}
.datatable-pagination a:hover,
.datatable-pagination button:hover { background-color: #f1f2f6; }
.datatable-pagination button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--cms-primary-ring);
}
.datatable-pagination .datatable-active a,
.datatable-pagination .datatable-active a:focus,
.datatable-pagination .datatable-active a:hover,
.datatable-pagination .datatable-active button,
.datatable-pagination .datatable-active button:focus,
.datatable-pagination .datatable-active button:hover {
    background-color: var(--cms-primary);
    color: #fff;
}
.datatable-pagination .datatable-disabled button,
.datatable-pagination .datatable-disabled a { opacity: .4; }

/* Başlıktaki sıralama tutamağı da artık bir <button>. */
table.datatable-table thead th a,
table.datatable-table thead th button {
    display: block;
    width: 100%;
    border: 0;
    padding: 0 1rem 0 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.datatable-sorter::before { bottom: 4px; }
.datatable-sorter::after { top: 2px; }

/* Arama hiçbir satırla eşleşmediğinde kütüphanenin bastığı satır.
   DİKKAT: `datatable-empty` sınıfı hem bu hücreye HEM DE sarmalayan
   .datatable-wrapper'a ekleniyor. Seçici `td` ile daraltılmazsa tablonun
   tamamı 2rem içeri kayıyor ve metni ortalanıyor. */
td.datatable-empty {
    padding: 2rem 1rem !important;
    text-align: center;
    color: var(--cms-text-muted);
}

/* ------------------------------------------------------------------ */
/* 12. Rozetler                                                        */
/* ------------------------------------------------------------------ */
.badge {
    font-weight: 600;
    font-size: .72rem;
    padding: .3rem .6rem;
    border-radius: var(--cms-radius-pill);
    letter-spacing: .01em;
}

.cms-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 600;
    font-size: .72rem;
    padding: .25rem .6rem;
    border-radius: var(--cms-radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
}
.cms-badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.cms-badge-success { color: var(--cms-success); background: var(--cms-success-soft); border-color: #a7f3d0; }
.cms-badge-muted   { color: var(--cms-text-muted); background: #f3f4f6; border-color: var(--cms-border); }
.cms-badge-danger  { color: var(--cms-danger); background: var(--cms-danger-soft); border-color: #fecdd3; }
.cms-badge-info    { color: var(--cms-info); background: var(--cms-info-soft); border-color: #bae6fd; }
.cms-badge-primary { color: var(--cms-primary); background: var(--cms-primary-soft); border-color: #c7d2fe; }
.cms-badge-plain::before { display: none; }

/* ------------------------------------------------------------------ */
/* 13. Boş durum                                                       */
/* ------------------------------------------------------------------ */
.cms-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--cms-text-muted);
}
.cms-empty .cms-empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto .875rem;
    border-radius: var(--cms-radius);
    background-color: #f1f2f6;
    color: var(--cms-text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cms-empty .cms-empty-icon .feather { width: 24px; height: 24px; }
.cms-empty h6 { font-size: .95rem; font-weight: 600; color: var(--cms-text); margin-bottom: .3rem; }
.cms-empty p { font-size: .84rem; margin-bottom: 1rem; }

/* ------------------------------------------------------------------ */
/* 14. Görsel yükleme alanı (sürükle-bırak + önizleme)                 */
/* ------------------------------------------------------------------ */
.cms-upload { position: relative; }

.cms-upload-drop {
    position: relative;
    border: 1.5px dashed var(--cms-border-strong);
    border-radius: var(--cms-radius);
    background-color: var(--cms-surface-2);
    padding: 1.25rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.cms-upload-drop:hover { border-color: var(--cms-primary); background-color: var(--cms-primary-soft); }
.cms-upload-drop.is-dragover {
    border-color: var(--cms-primary);
    background-color: var(--cms-primary-soft);
    box-shadow: 0 0 0 3px var(--cms-primary-ring);
}

/* Gerçek input görünmez ama alanın tamamını kaplar - tıklama ve
   sürükle-bırak tarayıcının kendi davranışıyla çalışsın diye
   display:none yerine opacity:0 kullanılıyor. */
.cms-upload-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cms-upload-drop .cms-upload-icon {
    width: 40px; height: 40px;
    margin: 0 auto .5rem;
    border-radius: 10px;
    background-color: var(--cms-surface);
    border: 1px solid var(--cms-border);
    color: var(--cms-primary);
    display: flex; align-items: center; justify-content: center;
}
.cms-upload-drop .cms-upload-title {
    font-size: .84rem;
    font-weight: 600;
    color: var(--cms-text);
}
.cms-upload-drop .cms-upload-title span { color: var(--cms-primary); }
.cms-upload-drop .cms-upload-hint { font-size: .74rem; color: var(--cms-text-faint); margin-top: .15rem; }

.cms-upload-preview {
    margin-bottom: .75rem;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    background-color: var(--cms-surface-2);
    padding: .5rem;
    position: relative;
}
.cms-upload-preview img {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--cms-radius-sm);
    display: block;
    background-color: var(--cms-surface);
}
.cms-upload-preview .cms-upload-caption {
    font-size: .72rem;
    color: var(--cms-text-muted);
    margin-top: .45rem;
    text-align: center;
}

/* Eski tema sınıfı - güncelleme sayfalarındaki mevcut görsel */
.img-account-profile {
    border-radius: var(--cms-radius-sm) !important;
    border: 1px solid var(--cms-border) !important;
    max-width: 100%;
    background-color: var(--cms-surface);
}

/* ------------------------------------------------------------------ */
/* 15. Çoklu seçim etiketleri (İşlerimiz kategorileri)                 */
/* ------------------------------------------------------------------ */
.cms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    min-height: 42px;
    padding: .45rem;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-sm);
    background-color: var(--cms-surface-2);
}
.cms-chips:empty::after {
    content: attr(data-empty);
    font-size: .78rem;
    color: var(--cms-text-faint);
    padding: .2rem .3rem;
}
.cms-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem .25rem .65rem;
    background-color: var(--cms-primary-soft);
    color: var(--cms-primary-active);
    border: 1px solid #c7d2fe;
    border-radius: var(--cms-radius-pill);
    font-size: .78rem;
    font-weight: 500;
}
.cms-chip button {
    border: none;
    background: transparent;
    color: inherit;
    opacity: .6;
    line-height: 1;
    padding: 0 .1rem;
    cursor: pointer;
    font-size: 1rem;
}
.cms-chip button:hover { opacity: 1; }

/* ------------------------------------------------------------------ */
/* 16. Dashboard bileşenleri                                           */
/* ------------------------------------------------------------------ */
.cms-stat {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1.15rem 1.25rem;
    background-color: var(--cms-surface);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    box-shadow: var(--cms-shadow-xs);
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
a.cms-stat { color: inherit; }
a.cms-stat:hover {
    box-shadow: var(--cms-shadow);
    border-color: #d7dae1;
    transform: translateY(-1px);
    color: inherit;
}

.cms-stat .cms-stat-icon {
    width: 42px; height: 42px;
    flex: 0 0 42px;
    border-radius: var(--cms-radius);
    display: flex; align-items: center; justify-content: center;
}
.cms-stat .cms-stat-icon .feather { width: 20px; height: 20px; }
.cms-stat-icon-indigo { background: var(--cms-primary-soft); color: var(--cms-primary); }
.cms-stat-icon-teal   { background: #ecfdf5; color: var(--cms-success); }
.cms-stat-icon-amber  { background: var(--cms-warning-soft); color: var(--cms-warning); }
.cms-stat-icon-sky    { background: var(--cms-info-soft); color: var(--cms-info); }
.cms-stat-icon-rose   { background: var(--cms-danger-soft); color: var(--cms-danger); }
.cms-stat-icon-violet { background: #f5f3ff; color: #7c3aed; }

.cms-stat .cms-stat-value {
    display: block;
    font-size: 1.65rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--cms-text);
}
.cms-stat .cms-stat-label {
    display: block;
    font-size: .8rem;
    color: var(--cms-text-muted);
    margin-top: .15rem;
}

/* Yapılacaklar / kurulum kontrol listesi */
.cms-checklist { display: flex; flex-direction: column; }
.cms-checklist-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--cms-border);
    color: inherit;
}
.cms-checklist-item:last-child { border-bottom: none; }
a.cms-checklist-item:hover { background-color: #fafbfd; color: inherit; }

.cms-checklist-item .cms-check-mark {
    width: 24px; height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.cms-checklist-item .cms-check-mark .feather { width: 14px; height: 14px; }
.cms-check-done    { background: var(--cms-success-soft); color: var(--cms-success); }
.cms-check-pending { background: var(--cms-warning-soft); color: var(--cms-warning); }

.cms-checklist-item .cms-check-text { flex: 1 1 auto; min-width: 0; }
.cms-checklist-item .cms-check-text strong {
    display: block; font-size: .85rem; font-weight: 600; color: var(--cms-text);
}
.cms-checklist-item .cms-check-text span { font-size: .76rem; color: var(--cms-text-muted); }

/* Son eklenenler listesi */
.cms-recent-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.25rem;
    border-bottom: 1px solid var(--cms-border);
    color: inherit;
}
.cms-recent-item:last-child { border-bottom: none; }
a.cms-recent-item:hover { background-color: #fafbfd; color: inherit; }
.cms-recent-item .cms-recent-text { flex: 1 1 auto; min-width: 0; }
.cms-recent-item .cms-recent-text strong {
    display: block;
    font-size: .85rem;
    font-weight: 550;
    color: var(--cms-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cms-recent-item .cms-recent-text span { font-size: .74rem; color: var(--cms-text-faint); }

/* Hoş geldiniz şeridi */
.cms-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid #c7d2fe;
    border-radius: var(--cms-radius-lg);
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 55%, #fdf4ff 100%);
    padding: 1.75rem;
}
.cms-hero::after {
    content: "";
    position: absolute;
    right: -60px; top: -70px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, .13) 0%, rgba(124, 58, 237, 0) 70%);
    pointer-events: none;
}
.cms-hero h2 {
    font-size: 1.25rem;
    font-weight: 650;
    color: #312e81;
    margin-bottom: .35rem;
}
.cms-hero p { color: #4338ca; font-size: .875rem; margin-bottom: 1rem; max-width: 62ch; opacity: .9; }

/* ------------------------------------------------------------------ */
/* 17. Modal                                                           */
/* ------------------------------------------------------------------ */
.modal-content {
    border: none;
    border-radius: var(--cms-radius-lg);
    box-shadow: var(--cms-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--cms-border);
    padding: 1.15rem 1.35rem;
}
.modal-title { font-size: 1rem; font-weight: 600; }
.modal-body { padding: 1.35rem; color: var(--cms-text-soft); font-size: .875rem; }
.modal-footer {
    border-top: 1px solid var(--cms-border);
    padding: .9rem 1.35rem;
    gap: .5rem;
}
.modal-backdrop.show { opacity: .45; }

.cms-modal-body {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    line-height: 1.6;
}

.cms-modal-icon {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.cms-modal-icon .feather { width: 18px; height: 18px; }

/* Hata sayfası ikonu ortalanmış tek başına duruyor */
.cms-modal-icon.mx-auto { margin-bottom: .875rem; }
.cms-modal-icon-danger { background: var(--cms-danger-soft); color: var(--cms-danger); }
.cms-modal-icon-warning { background: var(--cms-warning-soft); color: var(--cms-warning); }

/* ------------------------------------------------------------------ */
/* 18. Açılır menü                                                     */
/* ------------------------------------------------------------------ */
.dropdown-menu {
    border: 1px solid var(--cms-border) !important;
    border-radius: var(--cms-radius) !important;
    box-shadow: var(--cms-shadow) !important;
    padding: .375rem;
    font-size: .875rem;
    min-width: 15rem;
}
.dropdown-item {
    border-radius: var(--cms-radius-sm);
    padding: .5rem .625rem;
    color: var(--cms-text-soft);
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: #f4f5f9;
    color: var(--cms-text);
}
.dropdown-item-icon { color: var(--cms-text-faint); display: inline-flex; margin-right: 0; }
.dropdown-item-icon .feather { width: 16px; height: 16px; }
.dropdown-divider { border-color: var(--cms-border); margin: .375rem 0; }
.dropdown-header {
    padding: .625rem;
    display: flex;
    align-items: center;
    gap: .625rem;
}
.dropdown-user-details-name { font-size: .85rem; font-weight: 600; color: var(--cms-text); }
.dropdown-user-details-email {
    font-size: .75rem;
    color: var(--cms-text-muted);
    max-width: 11rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ */
/* 19. Toast bildirimleri                                              */
/* ------------------------------------------------------------------ */
#toast-container > div {
    opacity: 1;
    border-radius: var(--cms-radius) !important;
    box-shadow: var(--cms-shadow-lg) !important;
    padding: .9rem 1rem .9rem 3rem !important;
    font-family: var(--cms-font);
    font-size: .85rem;
    font-weight: 500;
    background-size: 18px !important;
    background-position: 1rem center !important;
    width: 340px;
}
#toast-container > .toast-success { background-color: #059669 !important; }
#toast-container > .toast-error   { background-color: #e11d48 !important; }
#toast-container > .toast-warning { background-color: #d97706 !important; }
#toast-container > .toast-info    { background-color: #0284c7 !important; }
#toast-container > div:hover { box-shadow: var(--cms-shadow-lg) !important; }
.toast-close-button { font-size: 1.1rem; opacity: .7; text-shadow: none; font-weight: 400; }

/* ------------------------------------------------------------------ */
/* 20. Giriş sayfası                                                   */
/* ------------------------------------------------------------------ */
.cms-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    background-color: var(--cms-bg);
}
@media (min-width: 992px) {
    .cms-login { grid-template-columns: 1fr 1.05fr; }
}

.cms-login-aside {
    display: none;
    position: relative;
    overflow: hidden;
    padding: 3rem;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(150deg, #312e81 0%, #4f46e5 55%, #7c3aed 100%);
    color: #fff;
}
@media (min-width: 992px) { .cms-login-aside { display: flex; } }

.cms-login-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.16) 0, transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(255,255,255,.12) 0, transparent 45%);
    pointer-events: none;
}
.cms-login-aside > * { position: relative; }
.cms-login-aside h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 650;
    letter-spacing: -.03em;
    line-height: 1.25;
    margin-bottom: .75rem;
}
.cms-login-aside p { color: rgba(255,255,255,.82); font-size: .95rem; max-width: 42ch; }
.cms-login-aside .cms-login-points { list-style: none; padding: 0; margin: 2rem 0 0; }
.cms-login-aside .cms-login-points li {
    display: flex; align-items: center; gap: .625rem;
    color: rgba(255,255,255,.9);
    font-size: .875rem;
    margin-bottom: .7rem;
}
.cms-login-aside .cms-login-points .feather { width: 18px; height: 18px; opacity: .85; }
.cms-login-aside .cms-login-foot { font-size: .8rem; color: rgba(255,255,255,.6); }

.cms-login-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}
.cms-login-card { width: 100%; max-width: 25rem; }
.cms-login-card .cms-login-brand {
    display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem;
}
.cms-login-card .cms-login-brand .brand-mark {
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--cms-primary) 0%, #7c3aed 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem;
}
.cms-login-card h2 { font-size: 1.4rem; font-weight: 650; margin-bottom: .3rem; }
.cms-login-card .cms-login-lead { color: var(--cms-text-muted); font-size: .875rem; margin-bottom: 1.75rem; }

.cms-input-affix { position: relative; }
.cms-input-affix .cms-input-icon {
    position: absolute;
    left: .8rem; top: 50%;
    transform: translateY(-50%);
    color: var(--cms-text-faint);
    pointer-events: none;
    display: flex;
}
.cms-input-affix .cms-input-icon .feather { width: 17px; height: 17px; }
.cms-input-affix .form-control { padding-left: 2.4rem; }
.cms-input-affix .cms-input-btn {
    position: absolute;
    right: .35rem; top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--cms-text-faint);
    padding: .3rem .4rem;
    border-radius: 6px;
    display: flex;
    cursor: pointer;
}
.cms-input-affix .cms-input-btn:hover { color: var(--cms-text-soft); background: #f1f2f6; }
.cms-input-affix .cms-input-btn .feather { width: 17px; height: 17px; }
.cms-input-affix:has(.cms-input-btn) .form-control { padding-right: 2.5rem; }

/* ------------------------------------------------------------------ */
/* 21. Yardımcılar                                                     */
/* ------------------------------------------------------------------ */
.cms-section-note {
    display: flex;
    gap: .625rem;
    padding: .75rem .875rem;
    background-color: var(--cms-info-soft);
    border: 1px solid #bae6fd;
    border-radius: var(--cms-radius-sm);
    font-size: .8rem;
    color: #075985;
    margin-bottom: 1rem;
}
.cms-section-note .feather { width: 16px; height: 16px; flex: 0 0 16px; margin-top: .1rem; }

.cms-sticky-side { position: sticky; top: calc(var(--cms-topbar-h) + 1rem); }

.cms-form-actions {
    display: flex;
    gap: .5rem;
}
.cms-form-actions .btn { flex: 1 1 auto; }
.cms-form-actions .btn.btn-secondary { flex: 0 0 auto; }

.text-muted { color: var(--cms-text-muted) !important; }
.cms-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .78rem;
}

/* Görsel ızgarası (İşlerimiz fotoğrafları) */
.cms-photo-card {
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    overflow: hidden;
    background-color: var(--cms-surface);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.cms-photo-card:hover { box-shadow: var(--cms-shadow); border-color: #d7dae1; }
.cms-photo-card .cms-photo-media {
    aspect-ratio: 4 / 3;
    background-color: var(--cms-surface-2);
    border-bottom: 1px solid var(--cms-border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.cms-photo-card .cms-photo-media img { width: 100%; height: 100%; object-fit: cover; }
.cms-photo-card .cms-photo-body { padding: .75rem; display: flex; flex-direction: column; gap: .4rem; }
.cms-photo-card .form-check { margin: 0; min-height: auto; }
.cms-photo-card .form-check-label { font-size: .78rem; }


/* Sayfa adresi (slug) alanı -------------------------------------------- */
/* Kilitliyken salt-okunur görünür; kalem düğmesi düzenlemeyi açar. */
.cms-slug .input-group-text {
    background-color: var(--cms-surface-2);
    color: var(--cms-muted);
    font-size: .8rem;
    padding-right: .4rem;
    padding-left: .6rem;
}
.cms-slug .form-control { padding-left: .35rem; }
.cms-slug .form-control[readonly] {
    background-color: var(--cms-surface-2);
    color: var(--cms-muted);
    cursor: default;
}
.cms-slug .form-control:not([readonly]) {
    background-color: var(--cms-surface);
    color: inherit;
}
.cms-slug .form-text { font-size: .75rem; margin-top: .35rem; }
.cms-slug [data-slug-edit] { display: flex; align-items: center; }
.cms-slug [data-slug-edit] svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ */
/* 22. Zengin metin editörü (Summernote)                               */
/* ------------------------------------------------------------------ */
/* Summernote'un Bootstrap 5 yapısı kendi köklerine PANELİN sınıflarını
   veriyor: sarmalayıcı `.note-editor.note-frame.card`, araç çubuğu
   `.note-toolbar.card-header`, düğmeler `.note-btn.btn.btn-outline-secondary
   .btn-sm`. Yani hiçbir şey yazmazsak editör, içine kart gömülmüş bir kart
   gibi (gölge, kalın kenarlık, mor çerçeveli düğmeler) çiziliyor.

   Buradaki kuralların işi o sınıfları etkisiz kılıp editörü sayfadaki diğer
   form alanlarıyla aynı kutuya sokmak. Seçiciler bilerek uzun: temanın
   `.card:not([class*=bg-]) .card-header` kuralı üç sınıf değerinde, iki
   sınıflık bir override onu geçemiyor. */

.note-editor.note-frame {
    border: 1px solid var(--cms-border-strong);
    border-radius: var(--cms-radius-sm);
    box-shadow: var(--cms-shadow-xs);
    background-color: var(--cms-surface);
    margin-bottom: 0;
    overflow: hidden;
}
/* Diğer alanlarla aynı odak halkası. */
.note-editor.note-frame:focus-within {
    border-color: var(--cms-primary);
    box-shadow: 0 0 0 3px var(--cms-primary-ring);
}

/* Araç çubuğu: kart başlığı değil, alanın üstündeki ince şerit. */
.note-editor.note-frame .note-toolbar.card-header {
    padding: .35rem .4rem;
    background-color: var(--cms-surface-2);
    border-bottom: 1px solid var(--cms-border);
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Tema .card-header'a space-between veriyor; miras alınırsa altı düğme
       grubu araç çubuğunun tamamına yayılıyor. */
    justify-content: flex-start;
    gap: .1rem;
    min-height: 0;
}
.note-editor.note-frame .note-toolbar .note-btn-group {
    margin: 0 .1rem 0 0;
    display: flex;
    flex: 0 0 auto;
    gap: .05rem;
}
/* Gruplar arası ayraç - Bootstrap'in btn-group yapıştırmasının yerine. */
.note-editor.note-frame .note-toolbar .note-btn-group + .note-btn-group {
    margin-left: .35rem;
    padding-left: .45rem;
    border-left: 1px solid var(--cms-border);
}

.note-editor.note-frame .note-btn.btn {
    /* Bootstrap .btn-group > .btn'e flex:1 1 auto veriyor - düğmeler grubun
       boşluğuna yayılmasın. */
    flex: 0 0 auto;
    height: 28px;
    min-width: 28px;
    padding: 0 .4rem;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    color: var(--cms-text-soft);
    font-size: .8rem;
    line-height: 1;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .12s ease, color .12s ease;
}
.note-editor.note-frame .note-btn.btn:hover,
.note-editor.note-frame .note-btn.btn:focus {
    background-color: #e8eaef;
    color: var(--cms-text);
    box-shadow: none;
}
.note-editor.note-frame .note-btn.btn.active,
.note-editor.note-frame .note-btn.btn:active {
    background-color: var(--cms-primary-soft);
    color: var(--cms-primary);
    box-shadow: none;
}
.note-editor.note-frame .note-btn.btn:disabled { opacity: .35; }
/* Açılır menü oku düğmenin içinde kalsın. */
.note-editor.note-frame .note-btn.dropdown-toggle::after { margin-left: .25rem; }

/* Yazı alanı - .form-control ile aynı iç boşluk ve tipografi. */
.note-editor.note-frame .note-editing-area .note-editable {
    padding: .7rem .75rem;
    color: var(--cms-text);
    background-color: var(--cms-surface);
    font-size: .875rem;
    line-height: 1.65;
}
.note-editor.note-frame .note-editable[contenteditable="true"]:focus { outline: none; }
.note-editor.note-frame .note-placeholder { color: var(--cms-text-faint); padding: .7rem .75rem; }

/* İçerik tipografisi: yayındaki yazıya yaklaşsın ki editörde görünen,
   sitede çıkacak olana benzesin. */
.note-editor.note-frame .note-editable > *:first-child { margin-top: 0; }
.note-editor.note-frame .note-editable > *:last-child { margin-bottom: 0; }
.note-editor.note-frame .note-editable h2 { font-size: 1.15rem; font-weight: 700; margin: 1.1rem 0 .5rem; }
.note-editor.note-frame .note-editable h3 { font-size: 1rem; font-weight: 700; margin: 1rem 0 .45rem; }
.note-editor.note-frame .note-editable h4 { font-size: .925rem; font-weight: 600; margin: .9rem 0 .4rem; }
.note-editor.note-frame .note-editable p { margin: 0 0 .7rem; }
.note-editor.note-frame .note-editable ul,
.note-editor.note-frame .note-editable ol { margin: 0 0 .7rem; padding-left: 1.35rem; }
.note-editor.note-frame .note-editable blockquote {
    margin: 0 0 .7rem;
    padding: .1rem 0 .1rem .85rem;
    border-left: 3px solid var(--cms-border-strong);
    color: var(--cms-text-soft);
}
.note-editor.note-frame .note-editable table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 .7rem;
}
.note-editor.note-frame .note-editable table td,
.note-editor.note-frame .note-editable table th {
    border: 1px solid var(--cms-border-strong);
    padding: .4rem .55rem;
}

/* Kod görünümü. */
.note-editor.note-frame .note-codable {
    background-color: #1f2430;
    color: #e6e9ef;
    font-size: .8rem;
    padding: .75rem;
    border-radius: 0;
}

/* Alt şerit yalnızca yeniden boyutlandırma tutamağı; kart görünümü almasın. */
.note-editor.note-frame .note-statusbar {
    background-color: var(--cms-surface-2);
    border-top: 1px solid var(--cms-border);
    border-radius: 0;
}
.note-editor.note-frame .note-statusbar .note-resizebar { padding-top: 1px; height: 9px; }
.note-editor.note-frame .note-statusbar .note-icon-bar { border-top: 1px solid var(--cms-border-strong); }

/* Açılır menüler ve kutucuklar panelin diğer menüleriyle aynı olsun. */
.note-editor.note-frame .note-dropdown-menu {
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-sm);
    box-shadow: var(--cms-shadow);
    padding: .25rem;
    font-size: .82rem;
}
.note-editor.note-frame .note-dropdown-menu .note-dropdown-item,
.note-editor.note-frame .note-dropdown-menu a {
    border-radius: 6px;
    padding: .3rem .5rem;
    color: var(--cms-text-soft);
}
.note-editor.note-frame .note-dropdown-menu .note-dropdown-item:hover,
.note-editor.note-frame .note-dropdown-menu a:hover {
    background-color: #f1f2f6;
    color: var(--cms-text);
}
/* Bağlantı/tablo diyalogları Bootstrap modalı; panelin modal stilini alır.
   Yalnızca editörün içinde açıldığı için z-index'i modal katmanına çekiyoruz. */
.note-modal { z-index: 1060; }

/* Doğrulama hatası bu alanda textarea'ya değil, çerçeveye düşmeli. */
.note-editor.note-frame.is-invalid,
textarea.texteditor.input-validation-error + .note-editor.note-frame {
    border-color: var(--cms-danger);
}

/* Yazdırma - panel yazdırılacak bir arayüz değil ama en azından okunur olsun */
@media print {
    #layoutSidenav_nav, .topnav, .cms-page-actions { display: none !important; }
    .nav-fixed #layoutSidenav #layoutSidenav_content { padding-left: 0; top: 0; }
    .card { box-shadow: none; }
}