:root {
    --primary: #00a5c4;
    --primary-rgb: 0, 165, 196;
    --secondary: #002b71;
    --secondary-rgb: 0, 43, 113;
    --bg-light: #f3f4f6;
}

/* Sidebar Animations & Tooltip */
#sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar.w-20 .sidebar-text,
#sidebar.w-20 .sidebar-icon-chevron,
#sidebar.w-20 .sidebar-badge {
    display: none;
    opacity: 0;
}

#sidebar.w-20 .sidebar-tooltip {
    display: flex;
    position: fixed !important;
    left: 5.5rem !important;
    z-index: 99999 !important;
    transform: none !important;
    top: 0; /* overridden by JS */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    --tw-translate-x: 0 !important;
    --tw-translate-y: 0 !important;
}

#sidebar.w-64 .sidebar-tooltip {
    display: none !important;
}

/* Collapsed sidebar: dropdown flyout panel */
#sidebar.w-20 .sidebar-flyout {
    display: block !important;
    position: fixed !important;
    left: 5.5rem !important;
    z-index: 99999 !important;
    transform: none !important;
    top: 0; /* overridden by JS */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

#sidebar.w-64 .sidebar-flyout {
    display: none !important;
}

#sidebar.w-20 .nav-link {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}

#sidebar.w-20 .nav-link-icon {
    margin: 0 auto;
    transform: scale(1.15);
}

/* Active Item Styling */
.nav-item-active {
    background: linear-gradient(90deg, rgba(var(--secondary-rgb), 0.08) 0%, rgba(var(--primary-rgb), 0.12) 100%) !important;
    color: var(--primary) !important;
    border-left: 3px solid var(--secondary);
}

.nav-item-active .nav-link-icon,
.nav-item-active .sidebar-text {
    color: var(--secondary) !important;
    font-weight: 600;
}

/* Hover Item Styling (Similar to Active) */
.nav-link:hover {
    background: linear-gradient(90deg, rgba(var(--secondary-rgb), 0.05) 0%, rgba(var(--primary-rgb), 0.08) 100%) !important;
    color: var(--primary) !important;
}

/* Seçili menüde belirgin hover zemini */
.nav-item-active:hover {
    background: linear-gradient(90deg, rgba(var(--secondary-rgb), 0.14) 0%, rgba(var(--primary-rgb), 0.22) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.15), 0 4px 12px rgba(var(--secondary-rgb), 0.12);
}
.nav-item-active:hover .nav-link-icon,
.nav-item-active:hover .sidebar-text {
    color: var(--secondary) !important;
}

/* Alt menü gradient hover (kurumsal turkuaz → lacivert hap) */
/* NOT: hover'da transform YOK — ogeyi imlecin altindan kaydirip titremeye yol aciyordu */
#sidebar-nav [id$="-submenu"] ul a { transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
#sidebar-nav [id$="-submenu"] ul a:hover,
#sidebar-nav .sidebar-flyout a:hover {
    background: linear-gradient(90deg, #00a5c4 0%, #0b3b6e 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(0, 165, 196, .35);
    transform: none;
}
#sidebar-nav [id$="-submenu"] ul a:hover i,
#sidebar-nav .sidebar-flyout a:hover i { color: #fff !important; opacity: 1; }

/* Bulunulan sayfanın alt menü öğesi: gradyan kalıcı */
#sidebar-nav [id$="-submenu"] ul a[class*="bg-primary/8"],
#sidebar-nav .sidebar-flyout a[class*="bg-primary/8"] {
    background: linear-gradient(90deg, #00a5c4 0%, #0b3b6e 100%) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(0, 165, 196, .35);
}
#sidebar-nav [id$="-submenu"] ul a[class*="bg-primary/8"] i,
#sidebar-nav .sidebar-flyout a[class*="bg-primary/8"] i { color: #fff !important; opacity: 1; }

/* Kullanıcı menüsü (topbar) */
.user-menu-link:hover {
    background: linear-gradient(90deg, #00a5c4 0%, #0b3b6e 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 165, 196, .35);
}
.user-menu-link:hover i { color: #fff !important; }
.user-menu-danger:hover {
    background: linear-gradient(90deg, #f87171 0%, #dc2626 100%);
    box-shadow: 0 6px 14px rgba(220, 38, 38, .32);
}
#user-menu-panel { animation: userMenuIn .18s cubic-bezier(.22,1,.36,1) backwards; }
#user-menu-panel.hidden { animation: none; }
@keyframes userMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* Logo açılış animasyonu (her sayfa yüklenişinde bir kez) */
#sidebar-logo {
    animation: logoIntro .7s cubic-bezier(.22, 1, .36, 1) backwards;
}
@keyframes logoIntro {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(.92);
        filter: blur(3px) drop-shadow(0 0 0 rgba(var(--primary-rgb), 0));
    }
    60% {
        opacity: 1;
        filter: blur(0) drop-shadow(0 4px 14px rgba(var(--primary-rgb), .35));
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) drop-shadow(0 2px 8px rgba(var(--primary-rgb), .18));
    }
}
@media (prefers-reduced-motion: reduce) {
    #sidebar-logo { animation: none; }
}

.nav-link:hover .nav-link-icon,
.nav-link:hover .sidebar-text,
.nav-link:hover .sidebar-icon-chevron {
    color: var(--secondary) !important;
}

/* Base Body Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-light);
}

/* Page Loader */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-light);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.page-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(var(--primary-rgb), 0.2);
    border-top-color: var(--primary);
    border-right-color: var(--secondary);
    border-radius: 50%;
    animation: loader-spin 1s linear infinite;
}

.loader-logo {
    margin-top: 20px;
    height: 30px;
    animation: loader-pulse 1.5s ease-in-out infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loader-pulse {

    0%,
    100% {
        opacity: 0.7;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Z-INDEX SCALE — tek standart, tüm uygulama için
   ────────────────────────────────────────────────────────────────────────── */
:root {
    --z-base:        1;
    --z-dropdown:   200;
    --z-sticky:     400;     /* sticky table headers */
    --z-sidebar:    600;     /* desktop sidebar */
    --z-topbar:     700;     /* topbar/header */
    --z-backdrop:  1000;     /* mobile sidebar backdrop, modal backdrop */
    --z-modal:     1100;     /* modals */
    --z-flyout:    1200;     /* sidebar collapsed flyouts/tooltips */
    --z-toast:     1300;     /* toast notifications */
    --z-swal:      1400;     /* SweetAlert dialogs */
    --z-loader:    1500;     /* full-page loader */
}

/* Apply scale */
.page-loader { z-index: var(--z-loader) !important; }

/* Sidebar (override Tailwind z-40) */
#sidebar { z-index: var(--z-sidebar); }

/* Sidebar collapsed flyouts/tooltips */
#sidebar.w-20 .sidebar-tooltip,
#sidebar.w-20 .sidebar-flyout { z-index: var(--z-flyout) !important; }

/* Topbar */
.app-topbar { z-index: var(--z-topbar); }

/* Generic modals */
.modal-fade {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(17, 24, 39, .55);
    backdrop-filter: blur(3px);
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.modal-fade.open {
    display: flex;
}

.modal-fade > .modal-panel {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    width: 100%;
    max-width: 520px;
    margin: auto;
}

/* SweetAlert override (already in layout, just keep variable) */
.swal2-container { z-index: var(--z-swal) !important; }

/* Mobile sidebar backdrop */
#mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .5);
    backdrop-filter: blur(2px);
    z-index: var(--z-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

#mobile-sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

body.mobile-sidebar-open {
    overflow: hidden;
}

/* When mobile sidebar is open: ensure aside floats above backdrop */
@media (max-width: 767.98px) {
    body.mobile-sidebar-open #sidebar {
        z-index: calc(var(--z-backdrop) + 1) !important;
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: 17rem !important;
        max-width: 85vw !important;
        box-shadow: 8px 0 32px rgba(0, 0, 0, .18) !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobil uyumluluk — ortak listeleme/form sayfaları için
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Tablo kaydırma */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-wrap table { min-width: 640px; }

    /* Standart card padding küçültme */
    .card-mobile-tight { padding: 1rem !important; }

    /* H1 boyutunu hizala */
    .page-title { font-size: 1.05rem !important; }
}

/* Standard "card" helper used by new pages (recurring, settings/* etc.) */
.card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .03);
    padding: 24px;
}

@media (max-width: 640px) {
    .card { padding: 16px; }
}

/* Common button helpers */
.btn-primary {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    padding: 9px 20px;
    border-radius: 9px;
    font-size: .83rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, transform .1s ease;
}
.btn-primary:hover { background: #0093af; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }

/* Form inputs */
.field-label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.field-input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 8px 12px;
    font-size: .85rem;
    outline: none;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.4;
}
.badge-on  { background: #d1fae5; color: #065f46; }
.badge-off { background: #f3f4f6; color: #6b7280; }
.badge-warn{ background: #fef3c7; color: #92400e; }
.badge-info{ background: #dbeafe; color: #1e40af; }

/* ──────────────────────────────────────────────────────────────────────────
   Kurumsal canlılık sistemi — gradyan ikon rozetleri, hover yükseltme,
   üst vurgu şeridi ve sayfa başlığı standardı
   ────────────────────────────────────────────────────────────────────────── */
:root {
    --corp-navy: #0b3b6e;
    --corp-teal: #00a5c4;
}

/* Hover ile yükselen kart */
.corp-lift { transition: transform .25s ease, box-shadow .25s ease; }
.corp-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(11, 59, 110, .12);
}

/* Üstte gradyan vurgu şeridi beliren kart */
.corp-card { position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.corp-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--corp-teal), var(--corp-navy));
    opacity: 0;
    transition: opacity .25s ease;
}
.corp-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11, 59, 110, .12); }
.corp-card:hover::before { opacity: 1; }

/* Gradyan ikon rozetleri (beyaz ikonlu) */
.chip-g {
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}
.chip-g i { color: #fff !important; }
.chip-g-corp     { background: linear-gradient(135deg, #00a5c4, #0b3b6e); box-shadow: 0 6px 14px rgba(0,165,196,.38); }
.chip-g-emerald  { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 6px 14px rgba(5,150,105,.35); }
.chip-g-rose     { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 6px 14px rgba(225,29,72,.32); }
.chip-g-cyan     { background: linear-gradient(135deg, #22d3ee, #0284c7); box-shadow: 0 6px 14px rgba(2,132,199,.35); }
.chip-g-violet   { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 6px 14px rgba(124,58,237,.35); }
.chip-g-indigo   { background: linear-gradient(135deg, #818cf8, #4f46e5); box-shadow: 0 6px 14px rgba(79,70,229,.35); }
.chip-g-orange   { background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 6px 14px rgba(234,88,12,.32); }
.chip-g-amber    { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 6px 14px rgba(217,119,6,.32); }

/* Sade kurumsal rozetler (göz yormayan lacivert/gri aile) */
.chip-corp {
    background: linear-gradient(135deg, #e9eff6, #d8e3f0);
    color: #0b3b6e !important;
    box-shadow: 0 4px 10px rgba(11, 59, 110, .12);
    border: 1px solid rgba(11, 59, 110, .08);
}
.chip-corp i { color: #0b3b6e !important; }
.chip-corp-teal {
    background: linear-gradient(135deg, #d9f2f7, #bfe6ef);
    color: #0b6b80 !important;
    box-shadow: 0 4px 10px rgba(0, 165, 196, .18);
    border: 1px solid rgba(0, 165, 196, .15);
}
.chip-corp-teal i { color: #0b6b80 !important; }

/* Bölüm başlığı: gradyan rozet + vurgulu başlık */
.sec-head-icon {
    background: linear-gradient(135deg, #00a5c4, #0b3b6e);
    box-shadow: 0 6px 14px rgba(0,165,196,.35);
    color: #fff;
}
.sec-head-icon i { color: #fff; }

/* Hızlı erişim kartı hover canlılığı */
.qa-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.qa-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11,59,110,.12); border-color: #bae6fd; }
.qa-card:hover .qa-icon {
    background: linear-gradient(135deg, #00a5c4, #0b3b6e);
    border-color: transparent;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 8px 18px rgba(0,165,196,.4);
}
.qa-card:hover .qa-icon i { color: #fff; }
.qa-icon { transition: all .2s ease; }

/* ── Şablon tasarımcı (tam ekran, CDN bağımsız) ── */
#designer-modal {
    position: fixed; inset: 0; z-index: 2000;
    background: #eef2f6; display: none;
}
#designer-modal.open { display: block; }
#designer-preview-modal { z-index: 2100; }
#designer-preview-modal > .modal-panel { max-width: 56rem; }
/* Sağ panel sekmeleri */
.dtab-btn {
    flex: 1; padding: 10px 0; font-size: 12px; font-weight: 700;
    color: #9ca3af; border-bottom: 2px solid transparent;
    text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
    transition: all .15s ease; background: none; border-top: none;
    border-left: none; border-right: none;
}
.dtab-btn.on { color: #0b3b6e; border-bottom-color: #00a5c4; }
/* Tuval blok kartı */
.dblock {
    background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dblock:hover { border-color: #bae6fd; }
.dblock.sel { border-color: #00a5c4; box-shadow: 0 8px 22px rgba(0,165,196,.18); }

/* ──────────────────────────────────────────────────────────────────────────
   KOYU TEMA (html.dark) — nötr yüzeyler; renkli rozetler korunur
   ────────────────────────────────────────────────────────────────────────── */
:root { --sb-thumb: #e0e7ef; --sb-track: transparent; }
html.dark { --sb-thumb: #3b5075; --sb-track: #0e1626; }
html.dark body { background-color: #0e1626; color: #dbe4f0; }
html.dark #sidebar { background: linear-gradient(180deg, #111c33 0%, #0e1626 100%) !important; box-shadow: 4px 0 24px rgba(0,0,0,.35), 1px 0 0 #1e2c47 !important; }
html.dark #sidebar .sidebar-text { color: #aebdce; }
html.dark .app-topbar { background: #16213a; border-color: #22314e; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
html.dark .bg-white { background-color: #16213a !important; }
html.dark .text-gray-800, html.dark .text-gray-700, html.dark .text-gray-900,
html.dark .text-slate-800, html.dark .text-slate-700 { color: #e6edf6 !important; }
html.dark .text-teal-800, html.dark .text-teal-700 { color: #5eead4 !important; }
html.dark .border-gray-50 { border-color: #1e2c47 !important; }
/* Hero'daki açık zeminli birincil buton koyuda da okunaklı kalsın */
html.dark .hero-cta-light { background: #e8eef6 !important; color: #0b3b6e !important; }
html.dark .text-gray-500 { color: #9fb0c8 !important; }
html.dark .text-gray-600 { color: #b9c6dc !important; }
html.dark .text-gray-400 { color: #64748f !important; }
html.dark .text-gray-300 { color: #475569 !important; }
html.dark .text-secondary { color: #8fd4ef !important; }
html.dark .border-gray-100, html.dark .border-gray-200 { border-color: #24334f !important; }
html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #1e2c47 !important; }
html.dark .bg-gray-50 { background-color: #101a30 !important; }
html.dark .bg-gray-100 { background-color: #1a2742 !important; }
html.dark .hover\:bg-gray-50:hover { background-color: #1a2742 !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #22314e !important; }
html.dark .field-input, html.dark .form-input, html.dark .form-select, html.dark .filter-input,
html.dark select.filter-input, html.dark input.filter-input {
    background-color: #101a30 !important; border-color: #2b3c5c !important; color: #dbe4f0 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #54678a; }
html.dark thead tr { background-color: #101a30 !important; }
html.dark .card { background: #16213a; border-color: #22314e; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
html.dark .toggle-pill { border-color: #2b3c5c; }
html.dark .toggle-pill label { color: #93a3bb; }
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #0e1626; }
html.dark ::-webkit-scrollbar-thumb { background: #2b3c5c; border-radius: 8px; border: 2px solid #0e1626; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #3b5075; }
html.dark * { scrollbar-width: thin; scrollbar-color: #2b3c5c #0e1626; }
html.dark #sidebar-nav::-webkit-scrollbar { width: 6px; }
html.dark #sidebar-nav::-webkit-scrollbar-thumb { background: #2b3c5c; border: none; }
/* Tema logoları: açıkta renkli, koyuda beyaz */
.logo-dark { display: none; }
html.dark .logo-dark { display: block; }
html.dark .logo-light { display: none; }
html.dark .nav-item-active { background: linear-gradient(90deg, rgba(0,165,196,.18) 0%, rgba(0,165,196,.08) 100%) !important; }
html.dark .nav-item-active .nav-link-icon, html.dark .nav-item-active .sidebar-text { color: #7fd4ef !important; }
/* Koyu temada ana menü hover: okunaklı açık zemin */
html.dark .nav-link:hover { background: linear-gradient(90deg, rgba(0,165,196,.22) 0%, rgba(0,165,196,.10) 100%) !important; }
html.dark .nav-link:hover .nav-link-icon,
html.dark .nav-link:hover .sidebar-text,
html.dark .nav-link:hover .sidebar-icon-chevron { color: #a5ecfb !important; }
html.dark .text-primary { color: #38bdd6 !important; }
/* Dropdown/panel zeminleri */
html.dark #notif-panel, html.dark #user-menu-panel { background: #16213a !important; border-color: #22314e !important; }
/* Tarayıcı kontrolleri koyu şemada */
html.dark { color-scheme: dark; }
/* Sayfa-özel ortak sınıflar */
html.dark .section-card { background: #16213a !important; border-color: #22314e !important; }
html.dark .section-title { color: #dbe4f0 !important; }
html.dark .form-label, html.dark .field-label { color: #93a3bb !important; }
html.dark .form-input, html.dark .form-select { background: #101a30 !important; border-color: #2b3c5c !important; color: #dbe4f0 !important; }
html.dark .toggle-pill { border-color: #2b3c5c !important; background: #101a30 !important; }
html.dark .toggle-pill label { color: #93a3bb !important; }
html.dark .btn-outline { background: #16213a !important; border-color: #2b3c5c !important; color: #93a3bb !important; }
html.dark .stat-card { background: #16213a !important; }
html.dark .totals-row { color: #93a3bb !important; }
html.dark .totals-row.grand { color: #e6edf6 !important; border-top-color: #2b3c5c !important; }
html.dark .provider-card { background: #16213a !important; border-color: #22314e !important; }
html.dark .provider-card .font-bold.text-gray-800 { color: #e6edf6 !important; }
/* Sayfa yükleyici */
html.dark .page-loader { background-color: #0e1626; }

/* Şablon tür filtre hapları */
.tpl-filter-btn {
    font-size: .75rem; font-weight: 600; color: #6b7280;
    border: 1px solid #e5e7eb; background: #fff;
    border-radius: 999px; padding: 6px 14px; cursor: pointer;
    transition: all .15s ease;
}
.tpl-filter-btn:hover { border-color: #00a5c4; color: #00a5c4; }
.tpl-filter-btn.on {
    background: linear-gradient(90deg, #00a5c4, #0b3b6e);
    border-color: transparent; color: #fff;
    box-shadow: 0 4px 12px rgba(0, 165, 196, .3);
}
#tpl-type-filter .tpl-filter-btn:first-child.on { background: linear-gradient(90deg, #00a5c4, #0b3b6e); }

/* ── Standart sayfa başlığı (page-head sınıfı ile işaretlenir) ── */
/* NOT: overflow:hidden YOK — içindeki dropdown menüler kesilmesin */
.page-head { position: relative; transition: box-shadow .25s ease; }
.page-head::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #00a5c4, #0b3b6e);
    border-radius: 12px 0 0 12px;
}
.page-head:hover { box-shadow: 0 10px 26px rgba(11, 59, 110, .10); }
/* başlıktaki ilk ikon rozetini gradyan yap */
.page-head > div:first-child > div[class*="rounded-xl"]:first-child {
    background: linear-gradient(135deg, #00a5c4, #0b3b6e) !important;
    box-shadow: 0 6px 14px rgba(0,165,196,.38);
}
.page-head > div:first-child > div[class*="rounded-xl"]:first-child i { color: #fff !important; }
/* başlıktaki birincil aksiyon butonuna derinlik */
.page-head a[class*="bg-primary"], .page-head button[class*="bg-primary"] {
    box-shadow: 0 8px 18px rgba(0,165,196,.35);
}
.page-head a[class*="bg-primary"]:hover, .page-head button[class*="bg-primary"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0,165,196,.45);
}