/* assets/css/style.css */

/* Genel Stiller ve Fontlar */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono&display=swap');

:root {
    --navbar-height: 60px; /* Navbar yüksekliği için değişken */

    /* Dark Mode varsayılan */
    --background: #0E1325; /* Güncellendi: Koyu mod arka planı */
    --surface: #18181b;    /* Zinc-900 */
    --card-bg: rgba(24, 24, 27, 0.6); /* Zinc-900 @ 60% for glassmorphism */
    --text-primary: #e4e4e7; /* Zinc-200 */
    --text-secondary: #a1a1aa; /* Zinc-400 */
    --border-color: rgba(255, 255, 255, 0.08);

    --primary-color: #6366f1; /* Electric Indigo */
    --primary-color-rgb: 99, 102, 241; /* Primary color RGB for transparent effects */
    --primary-glow: rgba(99, 102, 241, 0.5);
    --secondary-color: #06b6d4; /* Cyan Ray */
    --secondary-color-rgb: 6, 182, 212;
    --success-color: #34d399; /* Neon Mint */
    --success-color-rgb: 52, 211, 153;
    --error-color: #f43f5e;   /* Laser Red */
    --error-color-rgb: 244, 63, 94;
    --warning-color: #fbbf24; /* Solar Amber */

    --neon-blue: #00E5FF;   /* Yeni eklendi: Ana grafik rengi */
    --neon-green: #00FF9C;  /* Yeni eklendi: Alternatif vurgu */
    --neon-pink: #FF69B4;
    --neon-red: #FF0000;
    
    --background-rgb: 14, 19, 37; /* Güncellendi: background ile uyumlu */
    --border-color-rgb: 255, 255, 255; /* Use with alpha for transparent borders */
    --dashboard-bg: #202025; /* Sidebar renginden bir tık açık */
}

/* Light Mode için override */
body.light-mode {
    --background: #F6F8FC; /* Güncellendi: Açık mod arka planı */
    --surface: #ffffff;    /* White */
    --card-bg: rgba(255, 255, 255, 0.9);
    --text-primary: #18181b; /* Zinc-900 */
    --text-secondary: #52525b; /* Zinc-500 */
    --border-color: #e2e8f0; /* Slate-200 */

    --primary-glow: rgba(99, 102, 241, 0.2);
    --background-rgb: 246, 248, 252; /* Güncellendi: background ile uyumlu */
    --border-color-rgb: 226, 232, 240;
    --dashboard-bg: #f0f2f5; /* Light mode için arka plan renginden bir tık koyu */
}


body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--text-primary);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-color); /* Hover rengini daha belirgin yapabiliriz */
    text-decoration: underline;
}

code, pre {
    font-family: 'JetBrains Mono', monospace;
    background-color: var(--surface);
    color: var(--text-primary);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

/* Layout */
.wrapper {
    display: flex;
    min-height: 100vh;
}

.main-header {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    z-index: 1000;
	left:240px;
	width: calc(100% - 240px);
		transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4,
	         0, 0.2, 1);
	    }
	
	    body.sidebar-collapsed .main-header {
	        left: 72px;
	        width: calc(100% - 72px);
	    }

/* ----- YENİ SIDEBAR STİLLERİ ----- */
.main-sidebar {
    width: 240px;
    background-color: var(--surface);
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
    position: fixed; /* Sabit yap */
    height: 100vh; /* Tam ekran yüksekliği */
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050; /* Diğer içeriklerin üzerinde olsun */
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    height: 60px; /* main-header ile aynı yükseklik */
    border-bottom: 1px solid var(--border-color);
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
}

.sidebar-logo {
    height: 50px;
    width: auto;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.sidebar-logo-text {
    height: 30px;
    width: auto;
    opacity: 1;
    transition: opacity 0.3s ease, width 0.3s ease;
}

/* Sidebar daraldığında logo metnini gizle */
.main-sidebar[data-collapsed="true"] .sidebar-logo-text {
    opacity: 0;
    width: 0;
    pointer-events: none;
}

.sidebar-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sidebar-toggle-btn i {
    transition: transform 0.3s ease;
}
.sidebar-toggle-btn:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.sidebar-toggle-btn:active {
    transform: scale(0.95); /* Tıklamada hafif küçülme efekti */
}

.sidebar-nav {
    flex-grow: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    position: relative;
    margin: 4px 8px;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: var(--text-secondary);
    border-radius: 8px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-left: 3px solid transparent;
}

.sidebar-menu li a .fa-fw {
    width: 20px;
    margin-right: 16px;
    font-size: 18px;
    flex-shrink: 0;
}
.sidebar-menu .menu-text {
    opacity: 1;
    transition: opacity 0.2s ease 0.1s;
}

.sidebar-menu li a:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
    color: var(--text-primary);
    text-decoration: none;
}

.sidebar-menu li.active > a {
    background-color: rgba(var(--primary-color-rgb), 0.15);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    box-shadow: 0 0 15px -5px rgba(var(--primary-color-rgb), 0.5);
}

/* Treeview (Accordion) */
.treeview .treeview-indicator {
    margin-left: auto;
    transition: transform 0.2s ease;
}
.treeview.open > a > .treeview-indicator {
    transform: rotate(90deg);
}
.treeview-menu {
    list-style: none;
    padding-left: 20px; /* Gizliyken de yer kaplamaması için margin/padding ayarı */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.treeview.open > .treeview-menu {
    max-height: 500px; /* Gerekirse artırılabilir */
    padding-top: 8px;
}
.treeview-menu li a {
    padding: 8px 12px;
}
.treeview-menu li a .menu-text-sub {
     opacity: 1;
     transition: opacity 0.2s ease 0.1s;
}

/* ----- COLLAPSED STATE ----- */
.main-sidebar[data-collapsed="true"] {
    width: 72px;
    overflow: hidden; /* Kaydırma çubuğunu gizle */
}
.main-sidebar[data-collapsed="true"] .sidebar-logo {
    opacity: 1;
    height: 60px; /* Küçültülmüş boyut */
    width: auto;
    margin: 0 auto; /* Ortalamak için */
    display: block; /* margin auto için block olmalı */
}
/* Sidebar daraldığında toggle buton ikonunun yönü */
body.sidebar-collapsed .sidebar-toggle-btn i {
    transform: rotate(180deg);
}
.main-sidebar[data-collapsed="true"] .menu-text,
.main-sidebar[data-collapsed="true"] .menu-text-sub,
.main-sidebar[data-collapsed="true"] .treeview-indicator {
    opacity: 0;
    width: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}
.main-sidebar[data-collapsed="true"] .sidebar-menu li a {
    justify-content: center;
}
.main-sidebar[data-collapsed="true"] .sidebar-menu li a .fa-fw {
    margin-right: 0;
}
.main-sidebar[data-collapsed="true"] .treeview-menu {
    display: none; /* Collapsed iken alt menüleri tamamen kaldır */
}

/* Tooltip for collapsed state */
.main-sidebar[data-collapsed="true"] .sidebar-menu li {
    position: relative;
}
.main-sidebar[data-collapsed="true"] .sidebar-menu li:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--surface);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin-left: 12px;
    white-space: nowrap;
    z-index: 1001;
    font-size: 14px;
    opacity: 1;
    animation: tooltip-fade-in 0.2s ease;
}

@keyframes tooltip-fade-in {
    from { opacity: 0; margin-left: 8px; }
    to { opacity: 1; margin-left: 12px; }
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

.main-content-wrapper {
    flex-grow: 1; /* İçerik alanı kalan tüm alanı kaplasın */
    padding: 20px; padding-top: var(--navbar-height);
    background-color: var(--dashboard-bg); /* Dashboard arka plan rengi */
    margin-left: 240px; /* Sidebar'ın genişliği kadar boşluk bırak */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Sidebar daraldığında content wrapper'ın sol boşluğunu ayarla */
body.sidebar-collapsed .main-content-wrapper {
    margin-left: 72px;
}

/* Auth sayfaları için content wrapper */
.content-wrapper-auth {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Header kaldırıldığı için tam yükseklik */
}


/* Cards (Glassmorphism benzeri) */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px; /* Güncellendi */
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.1), 0 5px 15px rgba(0, 0, 0, 0.2); /* Yeni neon gölge eklendi */
    backdrop-filter: blur(10px); /* Glassmorphism efekti */
    -webkit-backdrop-filter: blur(10px);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem; /* Bootstrap default padding for card-header */
}

.card-title {
    margin-bottom: 0; /* Remove default margin from h3.card-title */
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-glow);
    transform: translateY(-1px);
}

.btn-primary.btn-loading {
    background-color: var(--primary-color); /* Yüklendiğinde de rengi koru */
    border-color: var(--primary-color);
    box-shadow: 0 0 15px var(--primary-glow); /* Daha güçlü parlama */
    color: white;
    cursor: wait;
    animation: button-glow-pulse 1.5s infinite alternate; /* Hafif nabız efekti */
}

@keyframes button-glow-pulse {
    from { box-shadow: 0 0 8px rgba(var(--primary-color-rgb), 0.5); }
    to { box-shadow: 0 0 20px rgba(var(--primary-color-rgb), 0.8), 0 0 10px rgba(var(--primary-color-rgb), 0.6); }
}

.btn-secondary {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
    color: white;
}
.btn-danger {
    background-color: var(--error-color);
    border-color: var(--error-color);
}
.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}
.btn-info {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Alerts */
.alert-success {
    background-color: rgba(52, 211, 153, 0.2); /* Neon Mint %20 */
    color: var(--success-color);
    border-color: var(--success-color);
}
.alert-danger {
    background-color: rgba(244, 63, 94, 0.2); /* Laser Red %20 */
    color: var(--error-color);
    border-color: var(--error-color);
}
.alert-info {
    background-color: rgba(6, 182, 212, 0.2); /* Cyan Ray %20 */
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.alert-warning {
    background-color: rgba(251, 191, 36, 0.2); /* Solar Amber %20 */
    color: var(--warning-color);
    border-color: var(--warning-color);
}

/* Badge */
.badge-success { background-color: var(--success-color); color: var(--background); }
.badge-danger { background-color: var(--error-color); color: white; }
.badge-warning { background-color: var(--warning-color); color: var(--background); }
.badge-primary { background-color: var(--primary-color); color: white; }
.badge-info { background-color: var(--secondary-color); color: var(--background); }

/* Forms */
.form-control {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.form-control:focus {
    background-color: var(--surface);
    color: var(--text-primary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem var(--primary-glow);
}

.form-control[readonly] {
    background-color: var(--surface) !important;
    opacity: 1;
}

/* Tables */
.table {
    color: var(--text-primary);
}

.table thead th {
    border-bottom: 2px solid var(--border-color);
    color: var(--text-secondary);
}

.table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--card-bg); /* Hafif glassmorphism */
}

/* List Group within Cards for Dark/Light Mode */
.card .list-group-item {
    background-color: transparent; /* Varsayılan olarak şeffaf, card'ın bg'sini alacak */
    border-color: var(--border-color); /* Temaya duyarlı kenarlık */
    color: var(--text-primary); /* Temaya duyarlı metin rengi */
}
.card .list-group-item:last-child {
    border-bottom-width: 0; /* Son öğede alt kenarlığı kaldır */
}

/* Şeritli efekt (isteğe bağlı, tablolar gibi) */
.card .list-group-item:nth-of-type(odd) {
    background-color: rgba(var(--background-rgb), 0.05); /* Koyu modda hafif koyu, açık modda hafif açık şerit */
}

/* Dark/Light Mode Toggle (Placeholder for now) */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.theme-toggle:hover {
    box-shadow: 0 0 10px var(--primary-glow);
}


/* Dashboard Entry Animation */

/* ----- YENİ ANİMASYON AKIŞI (DASHBOARD GİRİŞİ) ----- */

/* 1. Dashboard Giriş Animasyonları */

/* Genel container için. Sayfa yüklendiğinde çalışacak. */
.dashboard-enter {
    animation: dashboard-container-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

@keyframes dashboard-container-enter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sidebar-enter {
    animation: sidebar-enter 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s backwards;
}

@keyframes sidebar-enter {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.header-enter {
    animation: header-enter 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
@keyframes header-enter {
    from {
        opacity: 0;
        filter: blur(3px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* 4. Mikro Etkileşimler */
.sidebar-menu li.active > a {
    animation: neon-pulse 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes neon-pulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3), 0 0 10px rgba(var(--primary-color-rgb), 0.2);
        border-left-color: var(--primary-color);
    }
}

/* Notes Board Premium Styles */
.notes-board-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(7, 8, 12, 0.85);
    backdrop-filter: blur(15px);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.notes-board-overlay.show { display: flex; opacity: 1; }

.notes-board {
    width: 100%;
    max-width: 1100px;
    max-height: 85vh;
    background: rgba(21, 25, 34, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0,0,0,0.6);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notes-board-overlay.show .notes-board { transform: scale(1); }

.board-header {
    padding: 30px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.board-icon {
    width: 50px; height: 50px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 1.5rem;
}

.board-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 12px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.board-close:hover { background: #ef4444; border-color: #ef4444; transform: rotate(90deg); }

.board-body {
    padding: 40px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 25px;
}

/* Sticky Note Card */
.note-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 25px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.note-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(99, 102, 241, 0.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(99, 102, 241, 0.1);
}

.note-card-title { font-weight: 800; color: #ffffff; margin-bottom: 12px; font-size: 1.15rem; letter-spacing: -0.5px; }
.note-card-content { color: #A0A7B5; font-size: 0.95rem; line-height: 1.6; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.note-card-date { font-size: 0.7rem; color: rgba(255, 255, 255, 0.2); margin-top: 15px; font-weight: 600; text-transform: uppercase; }

/* Editor Overlay (Redesigned) */
.note-editor-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(7, 8, 12, 0.9); backdrop-filter: blur(10px); z-index: 3100;
    display: none; align-items: center; justify-content: center;
}

.note-editor {
    width: 100%; max-width: 550px;
    background: #151922; border: 1px solid rgba(99, 102, 241, 0.3);
    padding: 40px; border-radius: 28px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.9);
    position: relative;
}

.note-editor h5 { font-weight: 900; letter-spacing: -1px; font-size: 1.5rem; }

.note-editor .form-control {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    padding: 15px 20px !important;
    font-family: 'Inter', sans-serif !important;
    transition: all 0.3s ease;
}

.note-editor .form-control:focus {
    border-color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2) !important;
    outline: none !important;
}

.note-editor textarea.form-control {
    min-height: 180px;
    line-height: 1.7;
}

    }
    50% {
        box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.6), 0 0 25px rgba(var(--primary-color-rgb), 0.4);
        border-left-color: #fff;
    }
}

.chart-grow-up {
    animation: chart-grow-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
@keyframes chart-grow-up {
    from {
        transform: scaleY(0);
        opacity: 0;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* Spinner'ı buton içinde daha iyi ortalamak için */
.neon-button .spinner-border {
    vertical-align: text-bottom;
}


/* Responsive Düzenlemeler */
@media (max-width: 768px) {
    .main-content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 15px;
        padding-top: calc(var(--navbar-height) + 10px);
    }
    .main-header {
        left: 0 !important;
        width: 100% !important;
    }
    .content-wrapper {
        padding: 10px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .main-header {
        position: fixed;
        top: 0;
        z-index: 1000;
    }
    .navbar {
        padding: 0 1rem;
    }
    .mobile-nav-toggle {
        display: block;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 20px;
        cursor: pointer;
        margin-right: 1rem;
    }
    .main-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        z-index: 9999;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-right: 1px solid var(--border-color);
        width: 260px; /* Mobil için sabit genişlik */
    }
    /* Javascript ile body'e eklenen class */
    :root.mobile-sidebar-open .main-sidebar {
        transform: translateX(0);
        box-shadow: 5px 0 25px rgba(0,0,0,0.3);
    }
    :root.mobile-sidebar-open .sidebar-overlay {
        display: block;
        opacity: 1;
    }
    .sidebar-toggle-btn {
        display: none; /* Desktop toggle'ı mobilde gizle */
    }
    .main-sidebar[data-collapsed="true"] {
        width: 260px; /* Mobil kapalıyken bile genişliği koru */
    }
    .main-sidebar[data-collapsed="true"] .menu-text,
    .main-sidebar[data-collapsed="true"] .menu-text-sub,
    .main-sidebar[data-collapsed="true"] .treeview-indicator {
        opacity: 1; /* Mobilde metinleri gizleme */
        width: auto;
    }
}
@media (min-width: 769px) {
    .mobile-nav-toggle {
        display: none;
    }
}


/* Yeni Header/Navbar Stilleri */
.wrapper {
    display: flex; /* Sidebar ve main-content-wrapper için Flexbox */
    min-height: 100vh;
}

.main-content-wrapper {
    flex-grow: 1; /* Kalan tüm alanı kapla */
    display: flex;
    flex-direction: column; /* İçindeki header ve main için dikey düzen */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Sidebar daraltma/genişletme animasyonu - genişlik ile geçiş */
    width: calc(100% - 240px); /* Sidebar açıkken */
}

/* Sidebar daraldığında content wrapper'ın genişliği */
body.sidebar-collapsed .main-content-wrapper {
    width: calc(100% - 72px); /* Daraltılmış sidebar genişliği */
}

.main-header .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Öğeleri dağıt */
    padding: 0.75rem 1.5rem;
    height: var(--navbar-height); /* Sabit yüksekliği geri getir */
    min-height: var(--navbar-height); /* Yüksekliğin değişmediğinden emin ol */
    flex-wrap: nowrap; /* Öğelerin tek satırda kalmasını sağla */
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
    z-index: 999; /* Sidebar'dan daha düşük, overlay'den yüksek */
}

.main-header .navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-right: 20px;
    text-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3);
}

.main-header .navbar-nav {
    flex-shrink: 0; /* Menü dikeyde genişleyip navbar'ı itmesini engelle */
}

.header-center-content {
    flex-grow: 1; /* Ortadaki içeriğin esnek olmasını sağlar */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.header-center-content .page-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    text-shadow: 0 0 5px rgba(var(--text-primary-rgb), 0.1); /* RGB olmadığı için doğrudan kullanamıyoruz, varsayılan değer */
}


/* Kullanıcı Avatarı ve Dropdown */
.user-dropdown-wrapper {
    position: relative; /* Dropdown menüsü için konumlandırma bağlamı */
    z-index: 1000; /* Dropdown'ın diğer elemanların üzerinde olmasını sağla */
    flex-shrink: 0; /* İçeriği itmemesini sağla */
    /* height: 100%; ve display: flex; align-items: center; kaldırıldı. Üst öğe (ul.navbar-nav) halledecek */
}
.user-dropdown-wrapper .nav-link {
    display: flex;
    align-items: center;
    gap: 10px; /* Avatar ve isim arası boşluk */
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.user-dropdown-wrapper .nav-link:hover {
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

.user-avatar {
    width: 30px; /* Biraz küçültüldü */
    height: 30px; /* Biraz küçültüldü */
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-color);
    box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3);
}

.user-text {
    color: var(--text-primary);
    font-weight: 500;
}

.user-name {
    color: var(--text-primary);
    font-weight: 500;
}

/* Dropdown Menü Stilleri */
.dropdown-menu {
    position: absolute; /* Navbar akışından çıkar */
    top: 100% !important; /* Konumlandırmayı içeren elementin altına ayarla */
    right: 0 !important;
    margin-top: 5px !important; /* Navbar altından başlaması için küçük bir boşluk ekle */
    transform: none !important; /* Herhangi bir transform'u sıfırla */
    z-index: 1050; /* Bootstrap dropdown z-index'i, diğer elemanların üzerinde olsun */
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 0;
    min-width: 180px; /* Varsayılan genişlik */
}




.dropdown-item {
    color: var(--text-secondary);
    padding: 8px 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
}

.dropdown-item i {
    margin-right: 10px;
    color: var(--primary-color);
}

.dropdown-item:hover {
    background-color: rgba(var(--primary-color-rgb), 0.15);
    color: var(--primary-color);
}

.dropdown-divider {
    border-top: 1px solid var(--border-color);
    margin: 8px 0;
}


/* Mobil Responsive Düzenlemeler için Header */
/* Dashboard Stilleri */
.dashboard-container {
    padding: 20px;
}

.dashboard-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.3);
}

.section-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 25px;
    text-shadow: 0 0 8px rgba(var(--secondary-color-rgb), 0.2);
    text-align: center; /* Başlığı ortala */
}






/* Özel renkler ve glowlar */
.summary-card.card-active-sites .card-icon { color: var(--success-color); text-shadow: 0 0 10px rgba(var(--success-color-rgb), 0.5); }
.summary-card.card-active-sites:hover { border-color: var(--success-color); box-shadow: 0 8px 25px rgba(var(--success-color-rgb), 0.3); }

.summary-card.card-inactive-sites .card-icon { color: var(--error-color); text-shadow: 0 0 10px rgba(var(--error-color-rgb), 0.5); }
.summary-card.card-inactive-sites:hover { border-color: var(--error-color); box-shadow: 0 8px 25px rgba(var(--error-color-rgb), 0.3); }

.summary-card.card-visitors .card-icon { color: var(--secondary-color); text-shadow: 0 0 10px rgba(var(--secondary-color-rgb), 0.5); }
.summary-card.card-visitors:hover { border-color: var(--secondary-color); box-shadow: 0 8px 25px rgba(var(--secondary-color-rgb), 0.3); }

/* Kullanıcı Siteleri Kartları */
.site-cards-grid .col-lg-4,
.site-cards-grid .col-md-6 {
    opacity: 0; /* Lazy load için başlangıçta gizli */
    transform: translateY(20px);
    /* animation: fadeInSlideUp 0.6s ease-out forwards; */ /* JS tetikleyecek */
    animation-delay: var(--delay);
}

.dashboard-enter-summary.dashboard-enter-summary, /* Özgüllüğü artırmak için */
.dashboard-enter-site.dashboard-enter-site { /* Özgüllüğü artırmak için */
    animation: fadeInSlideUp 0.6s ease-out forwards;
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.site-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    min-height: 280px; /* Kartın min yüksekliği */
}

.site-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.site-thumbnail {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.site-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.site-card:hover .site-thumbnail img {
    transform: scale(1.05);
}

.site-info {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.site-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-domain {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-last-checked {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: auto; /* En alta hizala */
}

.site-status {
    display: flex;
    align-items: center;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}

.site-status .status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.site-card.card-status-active {
    border-color: var(--success-color);
    box-shadow: 0 0 15px rgba(var(--success-color-rgb), 0.3);
}
.site-card.card-status-active:hover {
    box-shadow: 0 8px 25px rgba(var(--success-color-rgb), 0.5);
}
.site-card.card-status-active .status-indicator {
    background-color: var(--success-color);
    box-shadow: 0 0 8px rgba(var(--success-color-rgb), 0.7);
}

.site-card.card-status-inactive {
    border-color: var(--error-color);
    box-shadow: 0 0 15px rgba(var(--error-color-rgb), 0.3);
    animation: neonPulseRed 2s infinite alternate ease-in-out;
}
.site-card.card-status-inactive:hover {
    box-shadow: 0 8px 25px rgba(var(--error-color-rgb), 0.5);
}
.site-card.card-status-inactive .status-indicator {
    background-color: var(--error-color);
    box-shadow: 0 0 8px rgba(var(--error-color-rgb), 0.7);
}

@keyframes neonPulseRed {
    0% {
        box-shadow: 0 0 10px rgba(var(--error-color-rgb), 0.4), 0 0 0px rgba(var(--error-color-rgb), 0.1);
    }
    50% {
        box-shadow: 0 0 20px rgba(var(--error-color-rgb), 0.7), 0 0 10px rgba(var(--error-color-rgb), 0.3);
    }
    100% {
        box-shadow: 0 0 10px rgba(var(--error-color-rgb), 0.4), 0 0 0px rgba(var(--error-color-rgb), 0.1);
    }
}


/* Responsive Düzenlemeler */
@media (max-width: 991px) { /* Tablet ve altı */
    .summary-cards .col-lg-3 {
        flex: 0 0 50%; /* 2x2 grid için */
        max-width: 50%;
    }
}

@media (max-width: 576px) { /* Mobil */
    .dashboard-title, .section-title {
        font-size: 2rem;
        margin-bottom: 20px;
    }
    .summary-cards .col-md-6 {
        flex: 0 0 100%; /* Mobil için tek kolon */
        max-width: 100%;
    }
    .summary-card {
        padding: 20px;
        min-height: 140px;
    }
    .summary-card .card-icon {
        font-size: 2rem;
    }
    .summary-card .card-value {
        font-size: 2.2rem;
    }
    .site-cards-grid .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .site-card {
        min-height: 250px;
    }
    .site-thumbnail {
        height: 120px;
    }
}
/* DROPDOWN POZISYONUNU EZMEK ICIN YUKSEK ONCELIKLI KURAL */
/* Bootstrap JS'nin inline stil eklemesini engellemek icin. */
.navbar-nav .user-dropdown-wrapper .dropdown-menu.show {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important; /* Popper.js'in transform'unu sıfırla */
    margin-top: 5px !important; /* İstenen boşluk */
    float: none !important; /* Olası float'ları sıfırla */
}
/* Empty State Dashboard Styling */
.empty-state-dashboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--navbar-height) - 100px); /* Ekran yüksekliğine göre ayarla, navbar ve footer boşluğu düş */
    text-align: center;
    padding: 30px;
    background-color: var(--card-bg); /* Mevcut kart arka planını kullan */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: 100%; /* Maksimum genişlik belirle */
    margin: auto; /* Ortala */
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    animation: fadeInScaleIn 0.6s ease-out forwards;
}

@keyframes fadeInScaleIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.empty-state-icon {
    font-size: 5rem; /* İkon boyutu */
    color: var(--primary-color); /* Neon mavi/mor vurgu */
    margin-bottom: 20px;
    text-shadow: 0 0 15px var(--primary-glow); /* Soft glow efekti */
    transition: all 0.3s ease;
}

.empty-state-dashboard:hover .empty-state-icon {
    transform: scale(1.05); /* Hover'da ikonun hafif büyümesi */
    text-shadow: 0 0 20px var(--primary-glow);
}

.empty-state-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.empty-state-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 30px;
    max-width: 400px;
}

.empty-state-cta {
    font-size: 1.1rem;
    padding: 12px 30px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.empty-state-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.5); /* Güçlü pulse/glow */
}

.empty-state-learn-more {
    color: var(--secondary-color); /* İkincil renk tonu */
    font-size: 0.95rem;
    margin-top: 15px;
    text-decoration: underline;
}

.empty-state-learn-more:hover {
    color: var(--secondary-color);
    opacity: 0.8;
}

/* Add Site Multi-Step Form Styling */
.add-site-container {
    max-width: 800px;
    margin: 2rem auto;
}

.step-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.step-label {
    font-size: 0.9rem;
}

.step-connector {
    flex-grow: 1;
    height: 2px;
    background-color: var(--border-color);
    margin: 0 1rem;
    transform: translateY(-1rem); /* Align with the middle of the number */
}

/* Active & Completed States for Step Indicator */
.step-item.active .step-number {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 0 15px var(--primary-glow);
}

.step-item.active {
    color: var(--text-primary);
}

.step-item.completed .step-number {
    border-color: var(--success-color);
    background-color: var(--success-color);
    color: #fff;
}
.step-item.completed::before {
    content: '\f00c'; /* Font Awesome check icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    color: var(--success-color);
    transform: translateY(-25px);
    font-size: 1.5rem;
    opacity: 0;
    animation: check-fade-in 0.5s forwards;
}

@keyframes check-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Step Styling */
.form-step {
    display: none;
    animation: fade-in 0.5s ease-out;
}

.form-step.active {
    display: block;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card-header p {
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Code Block Styling */
.code-block {
    position: relative;
    background-color: var(--background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.code-inline {
    background-color: var(--background);
    padding: 2px 5px;
    border-radius: 4px;
}
.btn-copy-code {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    padding: 5px 10px;
    transition: all 0.2s ease;
}

.btn-copy-code:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-copy-code.copied {
    color: var(--success-color);
    border-color: var(--success-color);
}

#verification-status .spinner-border {
    margin-right: 10px;
}

/* Chart.js Custom Tooltip Style (Glassmorphism) */
.chartjs-tooltip-glass {
    opacity: 0.9 !important; /* Yarı saydamlık */
    background: rgba(var(--background-rgb), 0.7) !important; /* Blur ile arka plan */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(0, 229, 255, 0.5) !important; /* İnce neon border (neon-blue) */
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3) !important;
    padding: 10px 15px !important;
    font-family: 'Inter', sans-serif !important;
}

.chartjs-tooltip-glass .chartjs-tooltip-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important;
    margin-bottom: 5px !important;
    padding-bottom: 5px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.chartjs-tooltip-glass .chartjs-tooltip-body {
    background-color: transparent !important;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
}

.chartjs-tooltip-glass .chartjs-tooltip-body span {
    color: var(--text-primary) !important;
}

/* Site Settings - Vertical Tabs Dark Mode */
.site-settings-page .list-group-item {
    background-color: transparent !important;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    margin-bottom: 5px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.site-settings-page .list-group-item:hover,
.site-settings-page .list-group-item:focus {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: var(--text-primary);
    border-left-color: #6366f1;
    border-left-width: 4px;
}

.site-settings-page .list-group-item.active {
    background-color: #6366f1 !important;
    color: #ffffff;
    border-color: #6366f1;
    font-weight: 600;
}

.site-settings-page .list-group-item-action.text-danger {
    color: var(--error-color) !important;
}

.site-settings-page .list-group-item-action.text-danger:hover,
.site-settings-page .list-group-item-action.text-danger.active {
    background-color: rgba(244, 63, 94, 0.15) !important;
    color: #f43f5e !important;
    border-color: #f43f5e;
}

/* Tracking Code Section */
.tracking-code-card .card-header {
    flex-wrap: wrap;
    gap: 1rem;
}

.tracking-code-card .btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.code-block-wrapper {
    position: relative;
}

.code-block {
    background-color: #0E1325;
    color: #e4e4e7;
    font-family: 'JetBrains Mono', monospace;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow-x: auto;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.code-block:hover {
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3); /* neon-blue */
}

.btn-copy-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.btn-copy-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.tracking-code-card.verified .code-block {
    border-color: var(--success-color);
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.5); /* neon-green */
}

#verification-status {
    font-weight: 500;
}

#verification-status.verified {
    color: var(--success-color);
}

#verification-status.not-verified {
    color: var(--error-color);
}

/* Light Mode for Tracking Code Section */
body.light-mode .code-block {
    background-color: #F4F6FB;
    color: #18181b;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

body.light-mode .code-block:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

body.light-mode .btn-copy-icon {
    background: rgba(0,0,0,0.05);
}

body.light-mode .btn-copy-icon:hover {
    background: rgba(0,0,0,0.1);
}

body.light-mode .tracking-code-card.verified .code-block {
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.5); /* neon-green */
}

/* Danger Zone Specific Styles */
.danger-zone-card {
    background-color: #1A1111 !important; /* Dark red background for danger zone */
    border: 1px solid #FF3B3B !important; /* Neon red border */
    box-shadow: 0 0 15px rgba(255, 59, 59, 0.4) !important; /* Soft red glow */
}

.danger-zone-card .card-header h5 {
    color: #FF3B3B !important; /* Red title */
}

.danger-zone-card .text-muted {
    color: #e4e4e7 !important; /* Ensure readable text color */
}

.danger-zone-card .btn-danger {
    background-color: #f43f5e !important; /* Laser Red */
    border-color: #f43f5e !important;
    transition: all 0.3s ease;
}

.danger-zone-card .btn-danger:hover {
    background-color: #e12b4e !important; /* Slightly darker red on hover */
    border-color: #e12b4e !important;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.6) !important; /* Stronger glow on hover */
    transform: translateY(-1px);
}

/* Modal Specific Styles for Danger Zone */
.danger-modal-content {
    background-color: var(--card-bg) !important;
    border: 1px solid #FF3B3B !important; /* Neon red border */
    border-radius: 18px !important;
    box-shadow: 0 0 20px rgba(244, 63, 94, 0.7) !important; /* Intense red glow */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.danger-modal-content .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Make close button visible in dark modes */
}

.danger-modal-content .modal-title {
    color: #FF3B3B !important; /* Red title in modal */
}

.danger-modal-content .form-control:focus {
    border-color: #FF3B3B !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 59, 59, 0.25) !important; /* Red glow on focus */
}

.danger-modal-content .form-control.is-invalid {
    border-color: #f43f5e !important;
}

.danger-modal-content .btn-danger {
    background-color: #f43f5e !important;
    border-color: #f43f5e !important;
}

.danger-modal-content .btn-danger:hover:not(:disabled) {
    background-color: #e12b4e !important;
    border-color: #e12b4e !important;
    box-shadow: 0 0 15px rgba(244, 63, 94, 0.8) !important;
}

/* Light Mode specific for Danger Zone */
body.light-mode .danger-zone-card {
    background-color: #ffe0e0 !important; /* Light red background */
    border: 1px solid #ff9999 !important;
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.1) !important;
}

body.light-mode .danger-zone-card .card-header h5 {
    color: #cc0000 !important;
}

body.light-mode .danger-zone-card .text-muted {
    color: #555 !important;
}

body.light-mode .danger-modal-content {
    background-color: #ffffff !important;
    border: 1px solid #ff9999 !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.2) !important;
}

body.light-mode .danger-modal-content .modal-title {
    color: #cc0000 !important;
}

body.light-mode .danger-modal-content .btn-close {
    filter: none; /* Reset filter for light mode */
}

/* Dashboard Specific Styles */

/* Summary Cards */
.summary-card {
    display: flex;
    flex-direction: column; /* İçeriği dikey olarak düzenle */
    align-items: center;   /* Yatayda ortala */
    justify-content: center; /* Dikeyde ortala */
    padding: 20px;
    border-radius: 12px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    text-align: center; /* Metinleri ortala */
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: var(--primary-color);
}

.summary-card-icon {
    font-size: 2.5rem; /* İkon boyutunu biraz büyüttük */
    margin-bottom: 15px; /* İkon ile içerik arasına boşluk */
    color: var(--primary-color);
}

.summary-card-content {
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center; /* İçerik elemanlarını ortala */
    justify-content: center;
    height: 100%;
    /* padding-top ve padding-left artık gerekli değil */
}

.summary-card-label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.summary-card-value {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    margin-top: 10px; /* Space for icon */
    display: inline-block; /* Allow side-by-side with trend */
}

.summary-card-trend {
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-block; /* Allow side-by-side with value */
    margin-left: 5px; /* Small space between value and trend */
}

.summary-card-trend .fas {
    margin-right: 3px;
}

/* Site Cards */
.site-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Make card fill the col height */
}

.site-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

a.site-card-link-wrapper {
    text-decoration: none;
    color: inherit;
}

.site-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
}

.site-card-header-info {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.site-favicon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.site-name {
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-status-badge {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.site-status-badge.active {
    background-color: rgba(var(--success-color-rgb, 0, 255, 156), 0.15);
    color: var(--success-color);
}

.site-status-badge.inactive {
    background-color: rgba(var(--error-color-rgb, 255, 59, 59), 0.15);
    color: var(--error-color);
}


.site-thumbnail {
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
    overflow: hidden;
    background-color: var(--background);
}

.site-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, might crop */
    object-position: top center; /* Show the top of the page */
    transition: transform 0.4s ease;
}

.site-card:hover .site-thumbnail img {
    transform: scale(1.05);
}

.site-card-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px;
    border-top: 1px solid var(--border-color);
    margin-top: auto; /* Push footer to the bottom */
    background-color: rgba(var(--background-rgb), 0.2);
}

.footer-stat {
    text-align: center;
    line-height: 1.2;
}

.footer-stat i {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.footer-stat span {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.footer-stat small {
    font-size: 0.75rem;
    color: var(--text-secondary);
}


/* Status-based card styling */
.site-card.card-status-active {
    border-color: var(--success-color);
}

.site-card.card-status-active:hover {
    box-shadow: 0 0 20px rgba(var(--success-color-rgb, 0, 255, 156), 0.3);
}

.site-card.card-status-inactive {
    border-color: var(--error-color);
}

.site-card.card-status-inactive:hover {
    box-shadow: 0 0 20px rgba(var(--error-color-rgb, 255, 59, 59), 0.3);
}

/* Ultra Premium Indigo Modal System (Global) */
.modal-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(7, 8, 12, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999999 !important;
}

.modal-overlay.active-modal { 
    display: flex !important; 
    opacity: 1 !important;
    visibility: visible !important;
}

.checkout-modal {
    background: #151922 !important;
    border: 1px solid rgba(99, 102, 241, 0.5) !important;
    border-radius: 32px !important;
    padding: 40px !important;
    width: 95% !important;
    max-width: 550px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9) !important;
    position: relative !important;
    z-index: 10000000 !important;
    display: block !important; /* GÖRÜNÜRLÜK GARANTİSİ */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Spinner Glow */
@keyframes spin-glow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Premium Neon Add Note Button */
     .btn-add-note {
         background: rgba(99, 102, 241, 0.1) !important;
         border: 1px solid rgba(99, 102, 241, 0.5) !important;
         color: #fff !important;
         padding: 12px 30px !important;
        border-radius: 16px !important;
         font-weight: 850 !important;
         font-size: 0.8rem !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.1), inset 0 0 10px rgba(99, 102, 241, 0.1) !important;
        position: relative !important;
        overflow: hidden !important;
    }
   
   /* Shimmer (Parlama) Efekti */
    .btn-add-note::before {
        content: '' !important;
       position: absolute !important;
        top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent) !important;
        transition: 0.5s !important;
    }
   
    .btn-add-note:hover::before {
        left: 100% !important;
    }
   
    /* Hover Durumu */
    .btn-add-note:hover {
        background: rgba(99, 102, 241, 0.25) !important;
       border-color: #6366f1 !important;
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.4), inset 0 0 15px rgba(99, 102, 241, 0.2) !important;
        transform: translateY(-2px) !important;
        color: #fff !important;
    }
   
    /* İkon Parlaması */
    .btn-add-note i {
        font-size: 1.2rem !important;
        filter: drop-shadow(0 0 5px #6366f1) !important;
    }
	/* Not Kartı Aksiyon Butonları (Düzenle & Sil) */
     .action-icon {
         width: 32px !important;
         height: 32px !important;
         border-radius: 10px !important;
         background: rgba(255, 255, 255, 0.05) !important;
         border: 1px solid rgba(255, 255, 255, 0.1) !important;
         color: rgba(255, 255, 255, 0.6) !important;
         display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
    }
   
    /* Düzenle Butonu Hover (Indigo Neon) */
    .action-icon.edit:hover {
        background: rgba(99, 102, 241, 0.2) !important;
        border-color: #6366f1 !important;
        color: #fff !important;
        box-shadow: 0 0 15px rgba(99, 102, 241, 0.4) !important;
        transform: translateY(-2px) rotate(8deg) !important;
    }
   
    /* Sil Butonu Hover (Kırmızı Neon) */
   .action-icon.delete:hover {
        background: rgba(239, 68, 68, 0.2) !important;
        border-color: #ef4444 !important;
        color: #fff !important;
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
        transform: translateY(-2px) rotate(-8deg) !important;
    }
   
    /* İkonların Kapsayıcısı (Sağ Üstte Gizli Başlar) */
    .note-actions {
        position: absolute !important;
       top: 15px !important;
        right: 15px !important;
        display: flex !important;
        gap: 8px !important;
        opacity: 0 !important;
        transform: translateX(10px) !important;
        transition: all 0.3s ease !important;
    }
   
    /* Kartın Üzerine Gelince İkonları Göster */
    .note-card:hover .note-actions {
        opacity: 1 !important;
       transform: translateX(0) !important;
    }
 /* Not ve Hatırlatıcı Panoları İçin Görünürlük Ayarları */
     .notes-panel-overlay, .reminders-panel-overlay {
         position: fixed !important;
         top: 0; left: 0;
         width: 100%; height: 100%;
         background: rgba(7, 8, 12, 0.85) !important;
         backdrop-filter: blur(15px) !important;
         z-index: 4000 !important;
         display: none !important; /* Varsayılan olarak her zaman gizli tutar */
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
   
    /* Sadece 'show' sınıfı eklendiğinde panoyu gösterir */
    .notes-panel-overlay.show, .reminders-panel-overlay.show {
        display: flex !important;
    }
   
    /* Not/Hatırlatıcı Oluşturma ve Düzenleme Pencereleri */
    .note-editor-overlay {
        position: fixed !important;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 5000 !important;
        display: none !important; /* Varsayılan olarak her zaman gizli tutar */
        align-items: center;
        justify-content: center;
    }
   
    /* Editör için görünürlük kuralı */
    #noteEditorOverlay[style*="display: flex"],
    #reminderEditorOverlay[style*="display: flex"] {
        display: flex !important;
    }
   
    /* Pano İçeriği (Container) */
    .notes-board-container {
        width: 100%;
        max-width: 1100px;
        max-height: 85vh;
        background: rgba(21, 25, 34, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 32px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    }
	/* İkon Üzerindeki Bildirim Rozetleri (Badges) */
    .sidebar-toggle-btn.position-relative #notes-badge,
    .sidebar-toggle-btn.position-relative #reminders-badge {
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
        border: 2px solid #07080C !important; /* Arka plan rengiyle uyumlu border */
    }
   
    /* Not Rozeti (Indigo) */
    #notes-badge {
        background: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 0 15px rgba(99, 102, 241, 0.4) !important;
    }
   
    /* Hatırlatıcı Rozeti (Amber/Sarı) */
    #reminders-badge {
        background: #fbbf24 !important;
        color: #000 !important;
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.4) !important;
    }
   
    /* Geçmiş Hatırlatıcılar Alanı (Footer) */
    #remindersHistory .badge {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #A0A7B5 !important;
        font-size: 0.75rem !important;
        padding: 8px 15px !important;
        border-radius: 10px !important;
        transition: all 0.3s ease;
    }
   
    #remindersHistory .badge:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        transform: translateY(-2px);
        color: #fff !important;
    }
   
    /* Hatırlatıcı Kartları İçin Özel Kenarlık (Bekleyenler) */
    .note-card[style*="rgba(251, 191, 36, 0.3)"] {
        background: rgba(251, 191, 36, 0.02) !important;
        box-shadow: 0 10px 30px rgba(251, 191, 36, 0.05) !important;
    }