/* ============================================
   DARK MODE - Keşif Rehberi
   Simplified & Reliable Version
   ============================================ */

/* ---------- BASE ---------- */
html.dark-mode,
html.dark-mode body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

html.dark-mode main {
    background-color: #0f172a !important;
}

html.dark-mode .page-content {
    background-color: #0f172a !important;
}

/* ---------- HEADINGS & TEXT ---------- */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: #f8fafc !important;
}

html.dark-mode p,
html.dark-mode li,
html.dark-mode td,
html.dark-mode th,
html.dark-mode label,
html.dark-mode .description {
    color: #f1f5f9 !important;
}

/* ---------- TAILWIDTH UTILITY OVERRIDES ---------- */
html.dark-mode .bg-white { background-color: #1e293b !important; }
html.dark-mode .bg-white\/10,
html.dark-mode .bg-white\/20,
html.dark-mode .bg-white\/30,
html.dark-mode .bg-white\/70,
html.dark-mode .bg-white\/90,
html.dark-mode .bg-white\/95 {
    background-color: rgba(30,41,59,0.9) !important;
}
html.dark-mode .bg-gray-50:not(section) { background-color: #1e293b !important; }

/* But body.bg-gray-50 should stay #0f172a like the page background */
html.dark-mode body.bg-gray-50 {
    background-color: #0f172a !important;
}
html.dark-mode .bg-gray-100 { background-color: #1e293b !important; }
html.dark-mode .bg-gray-200 { background-color: #334155 !important; }

html.dark-mode .text-gray-900 { color: #f8fafc !important; }
html.dark-mode .text-gray-800 { color: #f1f5f9 !important; }
html.dark-mode .text-gray-700 { color: #e2e8f0 !important; }
html.dark-mode .text-gray-600 { color: #94a3b8 !important; }
html.dark-mode .text-gray-500 { color: #94a3b8 !important; }
html.dark-mode .text-gray-400 { color: #64748b !important; }

html.dark-mode .border-gray-100 { border-color: #334155 !important; }
html.dark-mode .border-gray-200 { border-color: #334155 !important; }
html.dark-mode .border-gray-300 { border-color: #475569 !important; }

html.dark-mode .shadow-lg,
html.dark-mode .shadow-md,
html.dark-mode .shadow-sm,
html.dark-mode .shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.4) !important;
}

/* ---------- SECTION BACKGROUNDS (homepage) — ALL UNIFORM #0f172a ---------- */
/* Override ALL gradient CSS variables so Tailwind gradients become dark */
html.dark-mode {
    --tw-gradient-from: #0f172a !important;
    --tw-gradient-to: rgba(15,23,42,0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Force override any gradient background-image on sections */
html.dark-mode section {
    background: #0f172a !important;
}

/* Dark mode logo switching */
html.dark-mode .site-logo-light { display: none !important; }
html.dark-mode .site-logo-dark { display: inline-block !important; }
:root .site-logo-dark { display: none; }
:root .site-logo-light { display: inline-block; }

/* Override bg-gray-50 on sections (the generic .bg-gray-50 rule is less specific) */
html.dark-mode section.bg-gray-50 {
    background-color: #0f172a !important;
}

/* Top gradient bar (header announcement) - keep visible but dark */
html.dark-mode div[class*="from-blue-600"][class*="to-purple-600"][class*="py-2"] {
    background: #0f172a !important;
}

/* ---------- HEADER / NAVBAR ---------- */
html.dark-mode header,
html.dark-mode header.bg-white {
    background-color: #0f172a !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode header .bg-white {
    background-color: transparent !important;
}

html.dark-mode header nav a,
html.dark-mode header nav button,
html.dark-mode header .language-selector button,
html.dark-mode header .language-selector span,
html.dark-mode header .language-selector i,
html.dark-mode header nav a.nav-link,
html.dark-mode header nav a.nav-link.nav-link,
html.dark-mode header nav a.nav-link.nav-link.nav-link,
html.dark-mode header nav button.nav-link,
html.dark-mode header nav button.nav-link.nav-link,
html.dark-mode header a:not(.btn),
html.dark-mode header div:not([class*="absolute"]):not([class*="sidebar"]) a {
    color: #ffffff !important;
}

html.dark-mode header nav a:hover,
html.dark-mode header nav button:hover,
html.dark-mode header a:not(.btn):hover {
    color: #ffffff !important;
    opacity: 0.9;
}

/* ---------- DROPDOWN MENUS ---------- */
/* All absolute-positioned dropdown panels inside header/nav */
html.dark-mode header div[class*="absolute"][class*="bg-white"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5) !important;
}

html.dark-mode header div[class*="absolute"][class*="bg-white"] a[href],
html.dark-mode header div[class*="absolute"][class*="bg-white"] button,
html.dark-mode header div[class*="absolute"][class*="bg-white"] span:not(.badge-count) {
    color: #ffffff !important;
}

html.dark-mode header div[class*="absolute"][class*="bg-white"] a[href]:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

/* Category headers inside dropdowns */
html.dark-mode header div[class*="absolute"][class*="bg-white"] div[class*="text-gray"][class*="px-4"] {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

html.dark-mode .bg-blue-50 {
    background-color: rgba(59,130,246,0.15) !important;
}

html.dark-mode .text-blue-600 {
    color: #60a5fa !important;
}

/* ---------- MOBILE MENU ---------- */
html.dark-mode #mobileMenu {
    background-color: #1e293b !important;
}

html.dark-mode #mobileMenu h2,
html.dark-mode #mobileMenu .text-gray-900 {
    color: #f8fafc !important;
}

html.dark-mode #mobileMenu a,
html.dark-mode #mobileMenu .text-gray-700,
html.dark-mode #mobileMenu .text-gray-600 {
    color: #e2e8f0 !important;
}

html.dark-mode #mobileMenu a:hover {
    background-color: #334155 !important;
}

html.dark-mode #mobileMenu .border-t,
html.dark-mode #mobileMenu .border-b {
    border-color: #334155 !important;
}

html.dark-mode #mobileMenu .bg-gradient-to-r.from-blue-50.to-purple-50 {
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.15)) !important;
    border-color: rgba(59,130,246,0.2) !important;
}

/* ---------- FOOTER ---------- */
html.dark-mode footer {
    background: #020617 !important;
}

html.dark-mode footer .text-gray-400,
html.dark-mode footer .text-gray-500,
html.dark-mode footer .text-gray-600 {
    color: #94a3b8 !important;
}

/* ---------- FORMS ---------- */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #64748b !important;
}

/* ---------- HOVER STATES ---------- */
html.dark-mode .hover\:bg-gray-50:hover,
html.dark-mode .hover\:bg-gray-100:hover,
html.dark-mode .hover\:bg-gray-200:hover {
    background-color: #334155 !important;
}

/* ---------- HERO SECTION child elements ---------- */
html.dark-mode section[class*="from-blue-600"] div[class*="backdrop-blur"] {
    background-color: rgba(15,23,42,0.7) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

html.dark-mode section[class*="from-blue-600"] input,
html.dark-mode section[class*="from-blue-600"] select {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark-mode section[class*="from-blue-600"] input::placeholder {
    color: #94a3b8 !important;
}

html.dark-mode section[class*="from-blue-600"] .text-blue-100 {
    color: #bfdbfe !important;
}

/* ---------- STORIES SECTION ---------- */
html.dark-mode .bg-white\/70.backdrop-blur-xl.rounded-2xl {
    background-color: rgba(15,23,42,0.7) !important;
}

html.dark-mode .story-username {
    color: #94a3b8 !important;
}

/* Stories section gradient background - override to solid dark */
html.dark-mode section.bg-gradient-to-br.from-purple-50.via-white.to-pink-50 {
    background: #0f172a !important;
}

/* Stories icon circle gradient */
html.dark-mode div.w-10.h-10.bg-gradient-to-br.from-purple-500.to-pink-500.rounded-xl {
    background: linear-gradient(135deg, #1e3a5f, #3b1f6e) !important;
}

/* Stories guest card border */
html.dark-mode div.relative.border-purple-100\/50 {
    border-color: rgba(59,130,246,0.15) !important;
}

/* Stories login overlay gradient */
html.dark-mode div.bg-gradient-to-r.from-purple-900\/60.via-purple-800\/50.to-pink-900\/60 {
    background: rgba(15,23,42,0.85) !important;
}

html.dark-mode .bg-gradient-to-r.from-purple-900\/60.via-purple-800\/50.to-pink-900\/60 h3,
html.dark-mode .bg-gradient-to-r.from-purple-900\/60.via-purple-800\/50.to-pink-900\/60 p {
    color: #f8fafc !important;
}

/* ---------- STORY UPLOAD MODAL ---------- */
html.dark-mode .story-upload-content {
    background: #1e293b !important;
}
html.dark-mode .story-upload-header h2 {
    color: #f8fafc !important;
}
html.dark-mode .story-upload-header p {
    color: #94a3b8 !important;
}
html.dark-mode .story-upload-header .bg-yellow-50.border-yellow-200 {
    background-color: rgba(250,204,21,0.12) !important;
    border-color: rgba(250,204,21,0.25) !important;
    color: #fef08a !important;
}
html.dark-mode .story-dropzone {
    background: #0f172a !important;
    border-color: #475569 !important;
}
html.dark-mode .story-dropzone:hover,
html.dark-mode .story-dropzone.dragover {
    border-color: #6366f1 !important;
    background: rgba(99,102,241,0.1) !important;
}
html.dark-mode .story-dropzone i {
    color: #818cf8 !important;
}
html.dark-mode .story-dropzone h3 {
    color: #e2e8f0 !important;
}
html.dark-mode .story-dropzone p {
    color: #64748b !important;
}
html.dark-mode .story-upload-caption textarea {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}
html.dark-mode .story-upload-caption textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
}
html.dark-mode .story-upload-caption textarea::placeholder {
    color: #64748b !important;
}
html.dark-mode button.w-full.mt-3.py-3.rounded-xl.text-gray-500 {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}
html.dark-mode button.w-full.mt-3.py-3.rounded-xl.text-gray-500:hover {
    background-color: #3b4f6d !important;
    color: #f1f5f9 !important;
}

/* ---------- STORY VIEWERS MODAL ---------- */
html.dark-mode .story-viewers-content {
    background: #1e293b !important;
}
html.dark-mode .story-viewers-header h3 {
    color: #f8fafc !important;
}
html.dark-mode .story-viewers-header button {
    color: #94a3b8 !important;
}

/* Story bar background */
html.dark-mode .stories-bar {
    background: rgba(15,23,42,0.85) !important;
    border-color: rgba(59,130,246,0.12) !important;
}

/* Story ring conic gradient (default gray ring) */
html.dark-mode .story-ring {
    background: conic-gradient(#334155 0deg 360deg) !important;
}
html.dark-mode .story-ring.has-unseen {
    background: conic-gradient(#f59e0b 0deg 270deg, #334155 270deg 360deg) !important;
}
html.dark-mode .story-ring.has-unseen-all {
    background: conic-gradient(#f59e0b 0deg 360deg) !important;
}
html.dark-mode .story-ring.is-own {
    background: conic-gradient(#4f46e5 0deg 360deg) !important;
}

/* Story ring inner default background */
html.dark-mode .story-ring-inner {
    background: #1e293b !important;
}

/* Story category gradient circles - mute to dark tones */
html.dark-mode .story-ring-inner.bg-gradient-to-br.from-purple-400.to-pink-400 {
    background: linear-gradient(135deg, #4a1a5e, #2d1b4e) !important;
}
html.dark-mode .story-ring-inner.bg-gradient-to-br.from-blue-400.to-cyan-400 {
    background: linear-gradient(135deg, #1a3a5c, #1a3a4a) !important;
}
html.dark-mode .story-ring-inner.bg-gradient-to-br.from-green-400.to-emerald-400 {
    background: linear-gradient(135deg, #1a4a2e, #1a3a2a) !important;
}
html.dark-mode .story-ring-inner.bg-gradient-to-br.from-orange-400.to-red-400 {
    background: linear-gradient(135deg, #5a2a1a, #4a1a1a) !important;
}
html.dark-mode .story-ring-inner.bg-gradient-to-br.from-indigo-400.to-violet-400 {
    background: linear-gradient(135deg, #2a2a5a, #2a1a4a) !important;
}

/* Story add button */
html.dark-mode .story-add-btn {
    border-color: #0f172a !important;
}

/* Background decorations in stories section */
html.dark-mode .bg-purple-200\/30 {
    background-color: rgba(30,41,59,0.5) !important;
}
html.dark-mode .bg-pink-200\/20 {
    background-color: rgba(30,41,59,0.4) !important;
}
html.dark-mode .bg-indigo-200\/20 {
    background-color: rgba(30,41,59,0.4) !important;
}

html.dark-mode button.bg-white.border.border-gray-200.rounded-full {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

/* Story scroll buttons hover states */
html.dark-mode button#storiesScrollLeft:hover,
html.dark-mode button#storiesScrollRight:hover {
    background-color: #1e293b !important;
    border-color: #6366f1 !important;
}

/* ---------- VITRIN CARDS ---------- */
html.dark-mode .vitrin-card,
html.dark-mode .vitrin-card.bg-white {
    background-color: #1e293b !important;
}

html.dark-mode .vitrin-card .text-gray-900,
html.dark-mode .vitrin-card h3 { color: #f8fafc !important; }
html.dark-mode .vitrin-card .text-gray-600 { color: #94a3b8 !important; }
html.dark-mode .vitrin-card .text-gray-500 { color: #64748b !important; }

/* ---------- NEARBY CARDS ---------- */
html.dark-mode .nearby-card,
html.dark-mode .nearby-card.bg-white,
html.dark-mode .nearby-card.group.relative.bg-white {
    background-color: #1e293b !important;
}

html.dark-mode .nearby-card .text-gray-800,
html.dark-mode .nearby-card h3 { color: #f8fafc !important; }
html.dark-mode .nearby-card .text-gray-600 { color: #94a3b8 !important; }
html.dark-mode .nearby-card .text-gray-500 { color: #64748b !important; }

/* ---------- CATEGORY CARDS ---------- */
html.dark-mode .category-card,
html.dark-mode .category-card.bg-white,
html.dark-mode .category-card.group.relative.bg-white {
    background-color: #1e293b !important;
}

html.dark-mode .category-card h3,
html.dark-mode .category-card .text-gray-800 { color: #f8fafc !important; }

html.dark-mode .category-card .bg-gradient-to-br.from-blue-100.to-purple-100 {
    background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(139,92,246,0.2)) !important;
}

/* ---------- CITY CARDS ---------- */
html.dark-mode .city-card,
html.dark-mode .city-card.bg-white,
html.dark-mode .city-card.group.bg-white {
    background-color: #1e293b !important;
}

/* ---------- PLACE CARDS ---------- */
html.dark-mode .place-card,
html.dark-mode .place-card.bg-white {
    background-color: #1e293b !important;
}

html.dark-mode .place-card .text-gray-900,
html.dark-mode .place-card h3 { color: #f8fafc !important; }
html.dark-mode .place-card .text-gray-600 { color: #94a3b8 !important; }
html.dark-mode .place-card .text-gray-500 { color: #64748b !important; }
html.dark-mode .place-card .border-t { border-color: #334155 !important; }
html.dark-mode .place-card .bg-white\/90 { background-color: rgba(30,41,59,0.9) !important; }

/* ---------- EVENT CARDS ---------- */
html.dark-mode .event-card,
html.dark-mode .event-card.bg-white {
    background-color: #1e293b !important;
}

html.dark-mode .event-card .text-gray-900,
html.dark-mode .event-card h3 { color: #f8fafc !important; }
html.dark-mode .event-card .text-gray-600 { color: #94a3b8 !important; }
html.dark-mode .event-card .text-gray-500 { color: #64748b !important; }
html.dark-mode .event-card .border-t { border-color: #334155 !important; }
html.dark-mode .event-card .bg-white.rounded-xl { background-color: #334155 !important; }
html.dark-mode .event-card .bg-white.rounded-xl .text-gray-900 { color: #f8fafc !important; }

/* ---------- WORLD TOUR / TRAVEL CARDS ---------- */
html.dark-mode .bg-white.rounded-2xl.shadow-lg.border {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .bg-white.rounded-2xl.shadow-lg.border h3,
html.dark-mode .bg-white.rounded-2xl.shadow-lg.border h4,
html.dark-mode .bg-white.rounded-2xl.shadow-lg.border .text-gray-900 { color: #f8fafc !important; }
html.dark-mode .bg-white.rounded-2xl.shadow-lg.border .text-gray-600 { color: #94a3b8 !important; }
html.dark-mode .bg-white.rounded-2xl.shadow-lg.border .text-gray-500 { color: #64748b !important; }

html.dark-mode .bg-gray-50.rounded-lg.p-4 {
    background-color: #334155 !important;
    border-color: #475569 !important;
}

html.dark-mode .bg-gray-50.rounded-lg.p-4 h4,
html.dark-mode .bg-gray-50.rounded-lg.p-4 .text-gray-900 { color: #f8fafc !important; }
html.dark-mode .bg-gray-50.rounded-lg.p-4 .text-gray-600 { color: #94a3b8 !important; }

/* ---------- STATS CARDS ---------- */
html.dark-mode .bg-white.p-6.rounded-lg.shadow {
    background-color: #1e293b !important;
}

html.dark-mode .bg-white.p-6.rounded-lg.shadow .text-gray-600 { color: #94a3b8 !important; }

/* ---------- PAGINATION ---------- */
html.dark-mode .bg-white.border.border-gray-300.rounded-lg {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

/* ---------- GRADIENT TEXT ---------- */
html.dark-mode .bg-clip-text.text-transparent {
    -webkit-text-fill-color: transparent !important;
}

/* ---------- THEME TOGGLE BUTTON ---------- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    color: #6b7280;
    font-size: 18px;
    line-height: 1;
}

.theme-toggle-btn:hover {
    background-color: rgba(59,130,246,0.1);
    color: #3b82f6;
    transform: rotate(15deg);
}

html.dark-mode .theme-toggle-btn {
    color: #ffffff !important;
    background: rgba(251,191,36,0.2);
    border-color: rgba(251,191,36,0.5);
    box-shadow: 0 0 15px rgba(251,191,36,0.25);
    text-shadow: 0 0 8px rgba(251,191,36,0.5);
}

html.dark-mode .theme-toggle-btn:hover {
    background: rgba(251,191,36,0.35);
    color: #ffffff;
    border-color: #fbbf24;
    box-shadow: 0 0 25px rgba(251,191,36,0.5);
    text-shadow: 0 0 12px rgba(251,191,36,0.8);
}

.theme-toggle-btn-mobile {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    color: #374151;
    font-size: 15px;
    border-radius: 8px;
    gap: 12px;
    transition: all 0.3s ease;
}

.theme-toggle-btn-mobile:hover { background-color: #f3f4f6; }

html.dark-mode .theme-toggle-btn-mobile {
    color: #fbbf24;
    background: rgba(251,191,36,0.12);
    border-color: rgba(251,191,36,0.25);
    font-weight: 600;
}

html.dark-mode .theme-toggle-btn-mobile .theme-icon {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(251,191,36,0.5);
}

html.dark-mode .theme-toggle-btn-mobile:hover {
    background: rgba(251,191,36,0.2);
    border-color: rgba(251,191,36,0.4);
}

/* Sidebar theme toggle - admin */
html.dark-mode .sidebar .theme-toggle-btn {
    background: rgba(251,191,36,0.15);
    border-color: rgba(251,191,36,0.3);
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(251,191,36,0.5);
}
html.dark-mode .sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%) !important;
}

html.dark-mode .sidebar .text-gray-200,
html.dark-mode .sidebar .text-gray-300 { color: #94a3b8 !important; }
html.dark-mode .sidebar .menu-item.active {
    background: linear-gradient(90deg, rgba(59,130,246,0.25), rgba(59,130,246,0.1)) !important;
}
html.dark-mode .sidebar .menu-item:hover { background: rgba(59,130,246,0.15) !important; }
html.dark-mode .sidebar .category-header { color: #64748b !important; }

/* ---------- ADMIN HEADER ---------- */
html.dark-mode header.bg-white.shadow-sm.border-b,
html.dark-mode header.hidden.lg\:block.bg-white {
    background-color: #0f172a !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .text-2xl.font-semibold.text-gray-800,
html.dark-mode h2.text-gray-800 { color: #f8fafc !important; }
html.dark-mode header .text-gray-600 { color: #94a3b8 !important; }

/* ---------- ADMIN MOBILE HEADER ---------- */
html.dark-mode .lg\:hidden.fixed.top-0 {
    background-color: #0f172a !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .lg\:hidden .text-gray-600,
html.dark-mode .lg\:hidden .text-gray-800 { color: #f1f5f9 !important; }

/* ---------- ADMIN TABLES ---------- */
html.dark-mode table thead th {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode table tbody td {
    border-bottom-color: #334155 !important;
}

html.dark-mode tbody.bg-white,
html.dark-mode tbody.bg-white.divide-y {
    background-color: #1e293b !important;
}

html.dark-mode table tbody tr:hover { background-color: #334155 !important; }
html.dark-mode table tbody tr:nth-child(even) {
    background-color: rgba(51,65,85,0.3) !important;
}

/* ---------- ADMIN STATS CARDS ---------- */
html.dark-mode .rounded-xl.shadow-sm { background-color: #1e293b !important; }
html.dark-mode .font-semibold.text-gray-700 { color: #f8fafc !important; }

/* ---------- ADMIN CARDS (pages) ---------- */
html.dark-mode .bg-white.rounded-lg.shadow,
html.dark-mode .bg-white.rounded-lg.shadow-sm {
    background-color: #1e293b !important;
}

html.dark-mode .bg-white.rounded-md.shadow-lg {
    background-color: #1e293b !important;
}

html.dark-mode .bg-white.rounded-2xl.shadow-2xl {
    background-color: #1e293b !important;
}

/* ---------- ADMIN SETTINGS PAGE ---------- */
/* Gradient info boxes inside Genel Ayarlar card */
html.dark-mode .bg-white.rounded-lg.shadow .bg-gradient-to-r.from-blue-50.to-indigo-50.p-6.rounded-lg.border.border-blue-200 {
    background: #1e293b !important;
    border-color: rgba(59,130,246,0.25) !important;
}
html.dark-mode .bg-white.rounded-lg.shadow .bg-gradient-to-r.from-purple-50.to-pink-50.p-6.rounded-lg.border.border-purple-200 {
    background: #1e293b !important;
    border-color: rgba(168,85,247,0.25) !important;
}
html.dark-mode .bg-white.rounded-lg.shadow .bg-gradient-to-r.from-orange-50.to-red-50.p-6.rounded-lg.border.border-orange-200 {
    background: #1e293b !important;
    border-color: rgba(249,115,22,0.25) !important;
}

/* Admin settings - card header gradients */
html.dark-mode .bg-white.rounded-lg.shadow .border-b.border-gray-200.bg-gradient-to-r.from-yellow-50.to-orange-50,
html.dark-mode .bg-white.rounded-lg.shadow .border-b.border-gray-200.bg-gradient-to-r.from-red-50.to-red-100,
html.dark-mode .bg-white.rounded-lg.shadow .border-b.border-gray-200.bg-gradient-to-r.from-yellow-50.to-yellow-100,
html.dark-mode .bg-white.rounded-lg.shadow .border-b.border-gray-200.bg-gradient-to-r.from-green-50.to-teal-100 {
    background: #1e293b !important;
}

/* Admin settings - gradient header icons */
html.dark-mode .bg-white.rounded-lg.shadow .w-10.h-10.bg-gradient-to-br.from-yellow-400.to-orange-600.rounded-lg,
html.dark-mode .bg-white.rounded-lg.shadow .w-10.h-10.bg-gradient-to-br.from-red-400.to-red-600.rounded-lg,
html.dark-mode .bg-white.rounded-lg.shadow .w-10.h-10.bg-gradient-to-br.from-yellow-400.to-yellow-600.rounded-lg,
html.dark-mode .bg-white.rounded-lg.shadow .w-10.h-10.bg-gradient-to-br.from-red-500.to-red-600.rounded-lg,
html.dark-mode .bg-white.rounded-lg.shadow .w-10.h-10.bg-gradient-to-br.from-green-500.to-teal-600.rounded-lg {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
}

/* Admin settings - badge labels */
html.dark-mode span.bg-yellow-200.text-yellow-700.rounded-full {
    background-color: rgba(250,204,21,0.15) !important;
    color: #fde047 !important;
}
html.dark-mode span.bg-red-200.text-red-700.rounded-full {
    background-color: rgba(239,68,68,0.15) !important;
    color: #fca5a5 !important;
}
html.dark-mode span.bg-green-200.text-green-800 {
    background-color: rgba(34,197,94,0.15) !important;
    color: #bbf7d0 !important;
}

/* Admin settings - Nöbetçi Eczane toggle box */
html.dark-mode .bg-gradient-to-r.from-green-50.to-white.p-4.rounded-lg.border.border-green-200 {
    background: #1e293b !important;
    border-color: rgba(34,197,94,0.3) !important;
}

/* ---------- ADMIN REVENUE MANAGEMENT ---------- */
/* PayTR Bakiye Tahmini gradient box */
html.dark-mode .bg-gradient-to-r.from-emerald-50.to-emerald-100.p-6.rounded-lg {
    background: #1e293b !important;
}
html.dark-mode .bg-gradient-to-r.from-emerald-50.to-emerald-100.p-6.rounded-lg h3 {
    color: #d1fae5 !important;
}
html.dark-mode .bg-gradient-to-r.from-emerald-50.to-emerald-100.p-6.rounded-lg .text-emerald-900 {
    color: #a7f3d0 !important;
}
html.dark-mode .bg-gradient-to-r.from-emerald-50.to-emerald-100.p-6.rounded-lg .text-emerald-700 {
    color: #6ee7b7 !important;
}
html.dark-mode .bg-gradient-to-r.from-emerald-50.to-emerald-100.p-6.rounded-lg button,
html.dark-mode .bg-gradient-to-r.from-emerald-50.to-emerald-100.p-6.rounded-lg a {
    background-color: #059669 !important;
}

/* Otomatik Ödeme Kurulumu gradient box */
html.dark-mode .bg-gradient-to-r.from-blue-50.to-blue-100.p-6.rounded-lg {
    background: #1e293b !important;
}
html.dark-mode .bg-gradient-to-r.from-blue-50.to-blue-100.p-6.rounded-lg h3 {
    color: #bfdbfe !important;
}

/* Step items border in Otomatik Ödeme */
html.dark-mode .bg-white.p-3.rounded.border {
    border-color: #334155 !important;
}

/* Revenue management empty state icon */
html.dark-mode .text-center.py-8 i.text-gray-300 {
    color: #475569 !important;
}

/* Revenue management table header */
html.dark-mode table thead tr.bg-gray-50 {
    background-color: #1e293b !important;
}

/* Revenue table body rows */
html.dark-mode table tbody.bg-white {
    background-color: #1e293b !important;
}

/* Revenue table divider */
html.dark-mode table tbody .divide-y.divide-gray-200 > tr {
    border-color: #334155 !important;
}
html.dark-mode table tbody tr {
    border-color: #334155 !important;
}

/* PayTR status badges - green */
html.dark-mode .bg-green-100.text-green-800.rounded-full {
    background-color: rgba(34,197,94,0.15) !important;
    color: #bbf7d0 !important;
}
/* PayTR status badges - red */
html.dark-mode .bg-red-100.text-red-800.rounded-full {
    background-color: rgba(239,68,68,0.15) !important;
    color: #fca5a5 !important;
}
/* PayTR status badges - yellow */
html.dark-mode .bg-yellow-100.text-yellow-800.rounded-full {
    background-color: rgba(245,158,11,0.15) !important;
    color: #fde047 !important;
}

/* ---------- ADMIN PAGINATION ---------- */
html.dark-mode .bg-white.border.border-gray-300.rounded-md {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .bg-white.px-4.py-3.flex.items-center {
    background-color: #1e293b !important;
    border-top-color: #334155 !important;
}

/* ---------- NOTIFICATIONS ---------- */
html.dark-mode #notificationDropdown,
html.dark-mode #mobileNotificationDropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark-mode .notification-item:hover { background-color: #334155 !important; }

/* ---------- ALERTS ---------- */
html.dark-mode .bg-red-100 { background-color: rgba(239,68,68,0.15) !important; }
html.dark-mode .text-red-700 { color: #fca5a5 !important; }
html.dark-mode .bg-green-100 { background-color: rgba(34,197,94,0.15) !important; }
html.dark-mode .text-green-700 { color: #86efac !important; }
html.dark-mode .bg-yellow-100 { background-color: rgba(245,158,11,0.15) !important; }
html.dark-mode .text-yellow-700 { color: #fcd34d !important; }
html.dark-mode .bg-blue-100 { background-color: rgba(59,130,246,0.15) !important; }
html.dark-mode .text-blue-700 { color: #93c5fd !important; }

/* ---------- MODAL ---------- */
html.dark-mode .fixed.inset-0.bg-black.bg-opacity-50 {
    background-color: rgba(0,0,0,0.7) !important;
}

/* ---------- BADGE ---------- */
html.dark-mode .badge-count { color: #ffffff !important; }

/* ---------- DIVIDER ---------- */
html.dark-mode .divider { background: #334155 !important; }
html.dark-mode .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

/* ---------- NEWSLETTER INPUT ---------- */
html.dark-mode section[class*="from-blue-600"][class*="to-purple-700"] input {
    background-color: rgba(30,41,59,0.6) !important;
}

/* ---------- SCROLLBAR ---------- */
html.dark-mode ::-webkit-scrollbar-track { background: #1e293b !important; }
html.dark-mode ::-webkit-scrollbar-thumb { background: #334155 !important; }

/* ---------- LANGUAGE SELECTOR ---------- */
html.dark-mode .language-selector .text-gray-700,
html.dark-mode .language-selector button { color: #ffffff !important; }

/* ---------- AUTH PAGES (Login / Register) ---------- */
/* Container - override gradient background to match site */
html.dark-mode .min-h-screen.flex.items-center.justify-center.py-12 {
    background: #0f172a !important;
}

html.dark-mode .bg-white.rounded-lg.shadow-xl.p-8 {
    background-color: #1e293b !important;
}

html.dark-mode .bg-red-50.border-red-200 {
    background-color: rgba(239,68,68,0.15) !important;
    border-color: rgba(239,68,68,0.3) !important;
    color: #fca5a5 !important;
}

html.dark-mode .bg-green-50.border-green-200 {
    background-color: rgba(34,197,94,0.15) !important;
    border-color: rgba(34,197,94,0.3) !important;
    color: #86efac !important;
}

html.dark-mode .bg-yellow-50.border-yellow-200 {
    background-color: rgba(234,179,8,0.15) !important;
    border-color: rgba(234,179,8,0.3) !important;
}

html.dark-mode .bg-yellow-50 h4,
html.dark-mode .bg-yellow-50 .text-yellow-800 {
    color: #fde047 !important;
}

html.dark-mode .bg-yellow-50 p,
html.dark-mode .bg-yellow-50 .text-yellow-700 {
    color: #fef08a !important;
}

html.dark-mode .bg-yellow-50 button.bg-yellow-600,
html.dark-mode .bg-yellow-50 a.bg-yellow-600 {
    background-color: #a16207 !important;
}

/* ---------- text-yellow generic ---------- */
html.dark-mode .text-yellow-900 { color: #fef08a !important; }
html.dark-mode .text-yellow-800 { color: #fde047 !important; }

html.dark-mode .bg-red-100.rounded-full {
    background-color: rgba(239,68,68,0.2) !important;
}

html.dark-mode .bg-gray-100.text-gray-700.rounded-lg {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

/* Divider "veya" text */
html.dark-mode .border-t.border-gray-300 {
    border-color: #475569 !important;
}

html.dark-mode .bg-white.text-gray-500.px-2 {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
}

/* Google OAuth button */
html.dark-mode a.border-gray-300.text-gray-700.bg-white.rounded-lg {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html.dark-mode a.border-gray-300.text-gray-700.bg-white.rounded-lg:hover {
    background-color: #3b4f6d !important;
}

/* Referral code input */
html.dark-mode input.border-b.border-gray-300 {
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html.dark-mode input.border-b.border-gray-300::placeholder {
    color: #64748b !important;
}

html.dark-mode #toggleReferralBtn {
    color: #60a5fa !important;
}

html.dark-mode #toggleReferralBtn:hover {
    color: #93c5fd !important;
}

/* Auth page specific text colors that generic rules miss */
html.dark-mode .text-gray-500,
html.dark-mode p.text-gray-500,
html.dark-mode span.text-gray-500 {
    color: #94a3b8 !important;
}

/* Checkbox */
html.dark-mode input[type="checkbox"] {
    accent-color: #3b82f6;
}

/* Auth link colors */
html.dark-mode a.font-medium.text-blue-600 {
    color: #60a5fa !important;
}

html.dark-mode a.font-medium.text-blue-600:hover {
    color: #93c5fd !important;
}

/* ---------- EMPTY STATE ICON CIRCLES ---------- */
html.dark-mode div[class*="bg-gradient-to-br"][class*="from-blue-100"][class*="to-purple-100"],
html.dark-mode div[class*="bg-gradient-to-br"][class*="from-purple-100"][class*="to-pink-100"] {
    background: rgba(30,41,59,0.4) !important;
}



/* ---------- VITRIN CATEGORY BADGE (bg-white bg-opacity-90) ---------- */
html.dark-mode .bg-opacity-90 {
    --tw-bg-opacity: 1 !important;
}

/* ---------- text-gray-300 ---------- */
html.dark-mode .text-gray-300 { color: #cbd5e1 !important; }

/* ---------- LINKS ---------- */
html.dark-mode a:not(.text-white):not(.btn):not([class*="text-white"]) {
    color: #60a5fa;
}

html.dark-mode a:hover:not(.text-white):not(.btn) {
    color: #93c5fd;
}

/* ============================================
   CATEGORY PAGES (kategoriler.php & kategori.php)
   ============================================ */

/* ---------- HERO SECTIONS (div, not section - generic section rule won't catch) ---------- */
html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600 {
    background: #0f172a !important;
}

html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600 h1,
html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600 p,
html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600 nav {
    color: #ffffff !important;
}

html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600 nav a,
html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600 nav span {
    color: #94a3b8 !important;
}

html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600 nav a:hover {
    color: #ffffff !important;
}

/* ---------- CATEGORY CARD PLACEHOLDER GRADIENTS (kategoriler.php) ---------- */
html.dark-mode div.h-32.bg-gradient-to-br.from-blue-400.to-purple-500 {
    background: #1e293b !important;
}

html.dark-mode div.h-32.bg-gradient-to-br.from-blue-400.to-purple-500 i {
    color: #475569 !important;
}

/* ---------- CATEGORY BADGE GRADIENTS (kategoriler.php count badge) ---------- */
html.dark-mode div[class*="bg-gradient-to-r"][class*="from-blue-500"][class*="to-purple-500"] {
    background: linear-gradient(135deg, #1e3a5f, #3b1f6e) !important;
}

/* ---------- PLACE/EVENT PLACEHOLDER IMAGES (kategori.php) ---------- */
html.dark-mode div.h-48.bg-gradient-to-br.from-blue-400.to-purple-500,
html.dark-mode div.h-48.bg-gradient-to-br.from-purple-400.to-pink-400 {
    background: #1e293b !important;
}

html.dark-mode div.h-48.bg-gradient-to-br.from-blue-400.to-purple-500 i,
html.dark-mode div.h-48.bg-gradient-to-br.from-purple-400.to-pink-400 i {
    color: #475569 !important;
}

/* ---------- EVENT DATE BADGES (kategori.php) ---------- */
html.dark-mode div.bg-white.bg-opacity-90.rounded-full {
    background-color: rgba(30,41,59,0.9) !important;
    color: #e2e8f0 !important;
}

html.dark-mode div.bg-white.bg-opacity-90.rounded-full i {
    color: #94a3b8 !important;
}

/* ---------- GRADIENT DETAIL BUTTONS (kategori.php) ---------- */
html.dark-mode a.bg-gradient-to-r.from-blue-500.to-purple-500.text-white.px-4,
html.dark-mode a.bg-gradient-to-r.from-blue-600.to-purple-600.text-white.px-8,
html.dark-mode a.bg-gradient-to-r.from-blue-600.to-purple-600.text-white.px-8.rounded-full {
    background: linear-gradient(135deg, #1e3a5f, #3b1f6e) !important;
}

html.dark-mode a.bg-gradient-to-r.from-blue-500.to-purple-500.text-white.px-4:hover,
html.dark-mode a.bg-gradient-to-r.from-blue-600.to-purple-600.text-white.px-8:hover,
html.dark-mode a.bg-gradient-to-r.from-blue-600.to-purple-600.text-white.px-8.rounded-full:hover {
    background: linear-gradient(135deg, #1e3a5f, #3b1f6e) !important;
    opacity: 0.9;
}

/* ---------- SEO TIPS & FEATURES BOXES (kategori.php) ---------- */
html.dark-mode div.bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-2xl,
html.dark-mode div.bg-gradient-to-br.from-green-50.to-emerald-50.rounded-2xl {
    background: #1e293b !important;
}

html.dark-mode div.bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-2xl h3,
html.dark-mode div.bg-gradient-to-br.from-green-50.to-emerald-50.rounded-2xl h3 {
    color: #f8fafc !important;
}

html.dark-mode div.bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-2xl li span,
html.dark-mode div.bg-gradient-to-br.from-green-50.to-emerald-50.rounded-2xl li span {
    color: #e2e8f0 !important;
}

/* ---------- SEO ICON CIRCLES (kategori.php) ---------- */
html.dark-mode div.w-12.h-12.bg-gradient-to-r.from-blue-500.to-indigo-600.rounded-full,
html.dark-mode div.w-12.h-12.bg-gradient-to-r.from-green-500.to-emerald-600.rounded-full {
    background: linear-gradient(135deg, #1e3a5f, #3b1f6e) !important;
}

/* ---------- COUPON SECTION (odeme.php) ---------- */
html.dark-mode .bg-gradient-to-r.from-green-50.to-emerald-50.border.border-green-200.rounded-xl.p-5 {
    background: #1e293b !important;
    border-color: rgba(34,197,94,0.3) !important;
}
html.dark-mode .bg-gradient-to-r.from-green-50.to-emerald-50.border.border-green-200.rounded-xl.p-5 .text-gray-900 {
    color: #f8fafc !important;
}
html.dark-mode .bg-gradient-to-r.from-green-50.to-emerald-50.border.border-green-200.rounded-xl.p-5 .text-gray-600 {
    color: #94a3b8 !important;
}
html.dark-mode .bg-gradient-to-r.from-green-50.to-emerald-50.border.border-green-200.rounded-xl.p-5 .border-t.border-green-200 {
    border-color: rgba(34,197,94,0.2) !important;
}
html.dark-mode .bg-gradient-to-r.from-green-50.to-emerald-50.border.border-green-200.rounded-xl.p-5 .text-green-700 {
    color: #86efac !important;
}

/* Coupon available buttons */
html.dark-mode .bg-gradient-to-r.from-green-50.to-emerald-50 .bg-white.border.border-green-300 {
    background-color: #334155 !important;
    border-color: rgba(34,197,94,0.4) !important;
    color: #86efac !important;
}
html.dark-mode .bg-gradient-to-r.from-green-50.to-emerald-50 .bg-white.border.border-green-300:hover {
    background-color: rgba(34,197,94,0.2) !important;
}

/* ---------- SEO HOW-TO STEP CIRCLES (kategori.php) ---------- */
html.dark-mode div.w-16.h-16.bg-gradient-to-r.rounded-full.flex.items-center.justify-center.mx-auto {
    background: linear-gradient(135deg, #1e3a5f, #3b1f6e) !important;
}

/* ---------- SEO RELATED CATEGORY ICONS (kategori.php) ---------- */
html.dark-mode div.w-12.h-12.bg-gradient-to-r.from-gray-400.to-gray-500.rounded-lg {
    background: #334155 !important;
}

/* ---------- SEO FAQ BORDER (kategori.php) ---------- */
html.dark-mode .border-b.border-gray-200.pb-6 {
    border-bottom-color: #334155 !important;
}

html.dark-mode .border-b.border-gray-200.pb-6 h4 {
    color: #f8fafc !important;
}

html.dark-mode .border-b.border-gray-200.pb-6 p {
    color: #94a3b8 !important;
}

/* ============================================
   ABOUT PAGE (hakkimizda.php)
   ============================================ */

/* ---------- COLORED BACKGROUND BOXES (bg-*-50) ---------- */
html.dark-mode .bg-yellow-50 { background-color: rgba(234,179,8,0.15) !important; }
html.dark-mode .bg-green-50 { background-color: rgba(34,197,94,0.15) !important; }
html.dark-mode .bg-purple-50 { background-color: rgba(168,85,247,0.15) !important; }
html.dark-mode .bg-orange-50 { background-color: rgba(249,115,22,0.15) !important; }
html.dark-mode .bg-red-50 { background-color: rgba(239,68,68,0.15) !important; }
html.dark-mode .bg-indigo-50 { background-color: rgba(99,102,241,0.15) !important; }
html.dark-mode .bg-cyan-50 { background-color: rgba(6,182,212,0.15) !important; }
html.dark-mode .bg-pink-50 { background-color: rgba(236,72,153,0.15) !important; }
html.dark-mode .bg-lime-50 { background-color: rgba(101,163,13,0.15) !important; }
html.dark-mode .bg-amber-50 { background-color: rgba(245,158,11,0.15) !important; }
html.dark-mode .bg-emerald-50 { background-color: rgba(16,185,129,0.15) !important; }
html.dark-mode .bg-teal-50 { background-color: rgba(20,184,166,0.15) !important; }
html.dark-mode .bg-violet-50 { background-color: rgba(139,92,246,0.15) !important; }

/* ---------- COLORED TEXT (text-*-800/900) on dark bg ---------- */
html.dark-mode .text-blue-900 { color: #93c5fd !important; }
html.dark-mode .text-blue-800 { color: #bfdbfe !important; }
html.dark-mode .text-green-900 { color: #86efac !important; }
html.dark-mode .text-green-800 { color: #bbf7d0 !important; }
html.dark-mode .text-purple-900 { color: #d8b4fe !important; }
html.dark-mode .text-purple-800 { color: #e9d5ff !important; }
html.dark-mode .text-orange-900 { color: #fdba74 !important; }
html.dark-mode .text-orange-800 { color: #fed7aa !important; }
html.dark-mode .text-red-900 { color: #fca5a5 !important; }
html.dark-mode .text-red-800 { color: #fecaca !important; }
html.dark-mode .text-indigo-900 { color: #c7d2fe !important; }
html.dark-mode .text-indigo-800 { color: #e0e7ff !important; }
html.dark-mode .text-cyan-900 { color: #a5f3fc !important; }
html.dark-mode .text-cyan-800 { color: #cffafe !important; }
html.dark-mode .text-pink-900 { color: #fbcfe8 !important; }
html.dark-mode .text-pink-800 { color: #fce7f3 !important; }
html.dark-mode .text-teal-900 { color: #99f6e4 !important; }
html.dark-mode .text-teal-800 { color: #ccfbf1 !important; }
html.dark-mode .text-emerald-900 { color: #a7f3d0 !important; }
html.dark-mode .text-emerald-800 { color: #d1fae5 !important; }
html.dark-mode .text-lime-900 { color: #bef264 !important; }
html.dark-mode .text-amber-900 { color: #fde68a !important; }
html.dark-mode .text-amber-800 { color: #fde68a !important; }
html.dark-mode .text-amber-700 { color: #fcd34d !important; }
html.dark-mode .text-violet-900 { color: #ddd6fe !important; }

/* ---------- OFFER BOXES (about page) — border-left stays colored ---------- */
/* text already handled by text-*-800/900 rules above */

/* ---------- FEATURES GRADIENT BOX (from-gray-50.to-blue-50) ---------- */
html.dark-mode div.bg-gradient-to-br.from-gray-50.to-blue-50 {
    background: #1e293b !important;
}

html.dark-mode div.bg-gradient-to-br.from-gray-50.to-blue-50 h5 {
    color: #f8fafc !important;
}

html.dark-mode div.bg-gradient-to-br.from-gray-50.to-blue-50 p {
    color: #cbd5e1 !important;
}

/* ---------- CTA BOX (from-blue-50.to-purple-50) ---------- */
html.dark-mode div.bg-gradient-to-r.from-blue-50.to-purple-50.p-8 {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode div.bg-gradient-to-r.from-blue-50.to-purple-50.p-8 h4 {
    color: #f8fafc !important;
}

html.dark-mode div.bg-gradient-to-r.from-blue-50.to-purple-50.p-8 p {
    color: #cbd5e1 !important;
}

/* ---------- EXTRA INFO BOXES (from-blue-50.to-cyan-50 & from-purple-50.to-pink-50) ---------- */
html.dark-mode div.bg-gradient-to-br.from-blue-50.to-cyan-50,
html.dark-mode div.bg-gradient-to-br.from-purple-50.to-pink-50 {
    background: #1e293b !important;
}

html.dark-mode div.bg-gradient-to-br.from-blue-50.to-cyan-50 h4,
html.dark-mode div.bg-gradient-to-br.from-purple-50.to-pink-50 h4 {
    color: #f8fafc !important;
}

html.dark-mode div.bg-gradient-to-br.from-blue-50.to-cyan-50 li span,
html.dark-mode div.bg-gradient-to-br.from-purple-50.to-pink-50 li span {
    color: #cbd5e1 !important;
}

/* ---------- CTA BUTTONS ---------- */
html.dark-mode a.bg-blue-600.hover\:bg-blue-700 {
    background-color: #2563eb !important;
}

html.dark-mode a.bg-purple-600.hover\:bg-purple-700 {
    background-color: #7c3aed !important;
}

/* ---------- BORDER COLORED (border-*-500/600) — keep as-is, visible on dark ---------- */

/* ---------- HERO GRADIENT inside the about card ---------- */
html.dark-mode .bg-white.rounded-xl.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-blue-600.to-purple-600 {
    background: #0f172a !important;
}

html.dark-mode .bg-white.rounded-xl.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-blue-600.to-purple-600 h2,
html.dark-mode .bg-white.rounded-xl.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-blue-600.to-purple-600 p {
    color: #ffffff !important;
}

/* ---------- TERMS/PRIVACY gradient boxes (from-blue-50.to-purple-50, from-green-50.to-blue-50) ---------- */
html.dark-mode div.bg-gradient-to-r.from-blue-50.to-purple-50.p-6.rounded-xl.border-blue-200,
html.dark-mode div.bg-gradient-to-r.from-blue-50.to-purple-50.p-6.rounded-xl.mb-4.border-blue-200,
html.dark-mode div.bg-gradient-to-r.from-blue-50.to-purple-50.p-6.rounded-xl.mb-6.border-blue-200 {
    background: #1e293b !important;
    border-color: rgba(59,130,246,0.25) !important;
}

/* ============================================
   TERMS & PRIVACY PAGES (kullanim-kosullari.php / gizlilik-politikasi.php)
   ============================================ */

/* ---------- PAGE HEADER ICON CIRCLES ---------- */
html.dark-mode div.w-20.h-20.bg-gradient-to-br.from-blue-600.to-purple-600.rounded-full,
html.dark-mode div.w-20.h-20.bg-gradient-to-br.from-green-600.to-blue-600.rounded-full {
    background: #0f172a !important;
}

html.dark-mode div.w-20.h-20.bg-gradient-to-br.from-blue-600.to-purple-600.rounded-full i,
html.dark-mode div.w-20.h-20.bg-gradient-to-br.from-green-600.to-blue-600.rounded-full i {
    color: #60a5fa !important;
}

/* ---------- TOC GRADIENT CONTAINERS ---------- */
html.dark-mode div.bg-gradient-to-r.from-gray-50.to-gray-100.rounded-xl.shadow-md {
    background: #1e293b !important;
}

html.dark-mode div.bg-gradient-to-r.from-gray-50.to-gray-100.rounded-xl.shadow-md h2,
html.dark-mode div.bg-gradient-to-r.from-gray-50.to-gray-100.rounded-xl.shadow-md a {
    color: #f8fafc !important;
}

/* ---------- SECTION 1 GRADIENT BOX (privacy) ---------- */
html.dark-mode div.bg-gradient-to-r.from-green-50.to-blue-50.p-6.rounded-xl.border-green-200 {
    background: #1e293b !important;
    border-color: rgba(34,197,94,0.3) !important;
}

/* ---------- FEATURE/INFO CARD GRADIENTS (from-*-50.to-*-100) ---------- */
html.dark-mode div.bg-gradient-to-br.from-blue-50.to-blue-100.rounded-xl.shadow-md,
html.dark-mode div.bg-gradient-to-br.from-green-50.to-green-100.rounded-xl.shadow-md,
html.dark-mode div.bg-gradient-to-br.from-purple-50.to-purple-100.rounded-xl.shadow-md,
html.dark-mode div.bg-gradient-to-br.from-orange-50.to-orange-100.rounded-xl.shadow-md {
    background: #1e293b !important;
}

html.dark-mode div.bg-gradient-to-br.from-blue-50.to-blue-100.rounded-xl.shadow-md {
    border-color: rgba(59,130,246,0.25) !important;
}

html.dark-mode div.bg-gradient-to-br.from-green-50.to-green-100.rounded-xl.shadow-md {
    border-color: rgba(34,197,94,0.25) !important;
}

html.dark-mode div.bg-gradient-to-br.from-purple-50.to-purple-100.rounded-xl.shadow-md {
    border-color: rgba(168,85,247,0.25) !important;
}

html.dark-mode div.bg-gradient-to-br.from-orange-50.to-orange-100.rounded-xl.shadow-md {
    border-color: rgba(249,115,22,0.25) !important;
}

/* ---------- PRIVACY SECTION 1 COMPLIANCE BOXES ---------- */
html.dark-mode .grid.md\:grid-cols-3.gap-4.mb-6 > div.bg-blue-50.border-blue-200 {
    border-color: rgba(59,130,246,0.3) !important;
}

html.dark-mode .grid.md\:grid-cols-3.gap-4.mb-6 > div.bg-purple-50.border-purple-200 {
    border-color: rgba(168,85,247,0.3) !important;
}

html.dark-mode .grid.md\:grid-cols-3.gap-4.mb-6 > div.bg-green-50.border-green-200 {
    border-color: rgba(34,197,94,0.3) !important;
}

/* ---------- COOKIES GRADIENT BOX (privacy) ---------- */
html.dark-mode section#cerezler div.bg-gradient-to-r.from-blue-50.to-purple-50.p-6.rounded-xl {
    background: #1e293b !important;
    border-color: rgba(59,130,246,0.3) !important;
}

/* ---------- DATA BOXES (privacy section 3) ---------- */
html.dark-mode section#toplanan-veriler div.bg-amber-50.border-amber-200 {
    border-color: rgba(245,158,11,0.3) !important;
}

html.dark-mode section#toplanan-veriler div.bg-gray-50.p-5.rounded-lg {
    background-color: #334155 !important;
}

/* ============================================
   MEKAN MENUSU PAGE (pages/mekan-menusu.php)
   ============================================ */

/* ---------- HEADER GRADIENT — override blue-to-purple to solid dark ---------- */
html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600.text-white {
    background: #0f172a !important;
}

html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600.text-white h1 {
    color: #ffffff !important;
}

html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600.text-white p {
    color: #94a3b8 !important;
}

/* ---------- HEADER ICON WRAPPER ---------- */
html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600.text-white div.w-14.h-14.bg-white.bg-opacity-20.rounded-xl {
    background: rgba(30,41,59,0.6) !important;
}

/* ---------- HEADER ACTION BUTTONS ("Mekanı Düzenle", "Mekanı Gör") ---------- */
html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600.text-white a.bg-white.text-blue-600 {
    background-color: #1e293b !important;
    color: #60a5fa !important;
}

html.dark-mode .min-h-screen.bg-gray-50 > div.bg-gradient-to-r.from-blue-600.to-purple-600.text-white a.bg-white.bg-opacity-20 {
    background-color: rgba(30,41,59,0.6) !important;
}

/* ---------- STAT CARD ICON CONTAINERS ---------- */
html.dark-mode .grid.grid-cols-1.md\:grid-cols-3 .w-12.h-12.bg-blue-100.rounded-lg {
    background-color: rgba(59,130,246,0.15) !important;
}

html.dark-mode .grid.grid-cols-1.md\:grid-cols-3 .w-12.h-12.bg-blue-100.rounded-lg i {
    color: #60a5fa !important;
}

html.dark-mode .grid.grid-cols-1.md\:grid-cols-3 .w-12.h-12.bg-green-100.rounded-lg {
    background-color: rgba(34,197,94,0.15) !important;
}

html.dark-mode .grid.grid-cols-1.md\:grid-cols-3 .w-12.h-12.bg-green-100.rounded-lg i {
    color: #4ade80 !important;
}

/* ---------- STAT CARD NUMBERS ---------- */
html.dark-mode .grid.grid-cols-1.md\:grid-cols-3 .text-2xl.font-bold.text-gray-900 {
    color: #f8fafc !important;
}

/* ---------- MENU CATEGORY HEADER GRADIENT ---------- */
html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50.border-b.border-gray-200 {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}

/* ---------- FOLDER ICON IN CATEGORY HEADER ---------- */
html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50 .w-8.h-8.bg-blue-100.rounded-lg {
    background-color: rgba(59,130,246,0.15) !important;
}

html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50 .w-8.h-8.bg-blue-100.rounded-lg i {
    color: #60a5fa !important;
}

/* ---------- CATEGORY HEADER TEXT ---------- */
html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50 h3 {
    color: #f8fafc !important;
}

html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50 p.text-sm.text-gray-500 {
    color: #94a3b8 !important;
}

/* ---------- CATEGORY ITEM COUNT BADGE ---------- */
html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50 span.text-sm.text-gray-500.bg-white {
    background-color: #334155 !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}

/* ---------- CATEGORY ACTION BUTTONS (düzenle/sil) ---------- */
html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50 button.p-2.text-blue-600 {
    color: #60a5fa !important;
}

html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50 button.p-2.text-blue-600:hover {
    background-color: rgba(59,130,246,0.15) !important;
}

html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50 button.p-2.text-red-600 {
    color: #f87171 !important;
}

html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50 button.p-2.text-red-600:hover {
    background-color: rgba(239,68,68,0.15) !important;
}

html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50 button.p-2.text-gray-600 {
    color: #94a3b8 !important;
}

html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50 button.p-2.text-gray-600:hover {
    background-color: #334155 !important;
}

/* ---------- MENU ITEM DIVIDER ---------- */
html.dark-mode .divide-y.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

/* ---------- MENU ITEM PLACEHOLDER IMAGE ---------- */
html.dark-mode div.w-16.h-16.rounded-lg.bg-gray-100.flex.items-center.justify-center {
    background-color: #334155 !important;
}

html.dark-mode div.w-16.h-16.rounded-lg.bg-gray-100.flex.items-center.justify-center i {
    color: #475569 !important;
}

/* ---------- MENU ITEM PRICE ---------- */
html.dark-mode .text-lg.font-bold.text-blue-600 {
    color: #60a5fa !important;
}

/* ---------- MENU ITEM BADGES ---------- */
html.dark-mode span.inline-flex.items-center.px-2.py-0-5.bg-yellow-100 {
    background-color: rgba(245,158,11,0.15) !important;
    color: #fcd34d !important;
}

html.dark-mode span.inline-flex.items-center.px-2.py-0-5.bg-green-100 {
    background-color: rgba(34,197,94,0.15) !important;
    color: #86efac !important;
}

html.dark-mode span.inline-flex.items-center.px-2.py-0-5.bg-red-100 {
    background-color: rgba(239,68,68,0.15) !important;
    color: #fca5a5 !important;
}

html.dark-mode span.inline-flex.items-center.px-2.py-0-5.bg-purple-100 {
    background-color: rgba(168,85,247,0.15) !important;
    color: #d8b4fe !important;
}

/* ---------- "BU KATEGORİYE ÖĞE EKLE" FOOTER ---------- */
html.dark-mode .px-5.py-3.bg-gray-50.border-t.border-gray-100 {
    background-color: #0f172a !important;
    border-top-color: #334155 !important;
}

/* ---------- GRADIENT BUTTONS (Kategori Ekle, Kaydet, İlk Kategoriyi Ekle) ---------- */
html.dark-mode button.bg-gradient-to-r.from-blue-600.to-purple-600.text-white,
html.dark-mode a.bg-gradient-to-r.from-blue-600.to-purple-600.text-white {
    background: linear-gradient(135deg, #1e3a5f, #3b1f6e) !important;
}

html.dark-mode button.bg-gradient-to-r.from-blue-600.to-purple-600.text-white:hover,
html.dark-mode a.bg-gradient-to-r.from-blue-600.to-purple-600.text-white:hover {
    background: linear-gradient(135deg, #1e3a5f, #3b1f6e) !important;
    opacity: 0.9;
}

/* ---------- BOS DURUM (empty state) ICON CIRCLE ---------- */
html.dark-mode div.w-20.h-20.bg-blue-100.rounded-full.flex.items-center.justify-center {
    background-color: rgba(59,130,246,0.15) !important;
}

html.dark-mode div.w-20.h-20.bg-blue-100.rounded-full.flex.items-center.justify-center i {
    color: #60a5fa !important;
}

/* ---------- BOS DURUM (empty state) TEXT ---------- */
html.dark-mode .bg-white.rounded-lg.shadow-sm.border.border-gray-200.p-12.text-center h3 {
    color: #f8fafc !important;
}

/* ---------- ÖNE ÇIKAN MENÜ ÖĞELERİ RANKING CIRCLES ---------- */
html.dark-mode div.w-8.h-8.bg-yellow-100.rounded-full.flex.items-center.justify-center.font-bold.text-sm {
    background-color: rgba(245,158,11,0.15) !important;
    color: #fcd34d !important;
}

html.dark-mode div.w-8.h-8.bg-gray-100.rounded-full.flex.items-center.justify-center.font-bold.text-sm {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}

/* ---------- ÖNE ÇIKAN MENÜ ÖĞELERİ TEXT ---------- */
html.dark-mode .mt-8 .font-medium.text-gray-900 {
    color: #f8fafc !important;
}

html.dark-mode .mt-8 .text-sm.text-gray-500 {
    color: #94a3b8 !important;
}

/* ---------- SECTION HEADINGS ---------- */
html.dark-mode h2.text-xl.font-semibold.text-gray-900 {
    color: #f8fafc !important;
}

/* ---------- MODAL BACKDROP ---------- */
/* Already covered by .fixed.inset-0.bg-black.bg-opacity-50 */

/* ---------- MODAL CHECKBOX LABELS ---------- */
html.dark-mode label.flex.items-center.p-3.bg-yellow-50.border-yellow-200.rounded-lg {
    background-color: rgba(245,158,11,0.12) !important;
    border-color: rgba(245,158,11,0.25) !important;
}

html.dark-mode label.flex.items-center.p-3.bg-green-50.border-green-200.rounded-lg {
    background-color: rgba(34,197,94,0.12) !important;
    border-color: rgba(34,197,94,0.25) !important;
}

html.dark-mode label.flex.items-center.p-3.bg-red-50.border-red-200.rounded-lg {
    background-color: rgba(239,68,68,0.12) !important;
    border-color: rgba(239,68,68,0.25) !important;
}

html.dark-mode label.flex.items-center.p-3 span.text-sm.font-medium {
    color: #e2e8f0 !important;
}

/* ---------- MODAL BORDER ---------- */
html.dark-mode .border-b.border-gray-200.px-6.py-4 {
    border-bottom-color: #334155 !important;
}

/* ---------- STAT CARES ---------- */
html.dark-mode .grid.grid-cols-1.md\:grid-cols-3 .border.border-gray-200 {
    border-color: #334155 !important;
}

/* ============================================
   MEKAN EKLE & ETKİNLİK EKLE PAGES (pages/mekan-ekle.php & pages/etkinlik-ekle.php)
   ============================================ */

/* ---------- PAGE WRAPPER ---------- */
html.dark-mode .min-h-screen.bg-gray-50.py-8 {
    background-color: #0f172a !important;
}

/* ---------- GRADIENT HEADER (mekan: blue->purple, etkinlik: green->blue) ---------- */
html.dark-mode .max-w-4xl.mx-auto.px-4 > .bg-white.rounded-lg.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-blue-600.to-purple-600,
html.dark-mode .max-w-4xl.mx-auto.px-4 > .bg-white.rounded-lg.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-green-600.to-blue-600 {
    background: #0f172a !important;
}

html.dark-mode .max-w-4xl.mx-auto.px-4 > .bg-white.rounded-lg.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-green-600.to-blue-600 h1,
html.dark-mode .max-w-4xl.mx-auto.px-4 > .bg-white.rounded-lg.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-blue-600.to-purple-600 h1,
html.dark-mode .max-w-4xl.mx-auto.px-4 > .bg-white.rounded-lg.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-green-600.to-blue-600 p,
html.dark-mode .max-w-4xl.mx-auto.px-4 > .bg-white.rounded-lg.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-blue-600.to-purple-600 p {
    color: #ffffff !important;
}

html.dark-mode .max-w-4xl.mx-auto.px-4 > .bg-white.rounded-lg.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-green-600.to-blue-600 .text-green-100,
html.dark-mode .max-w-4xl.mx-auto.px-4 > .bg-white.rounded-lg.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-blue-600.to-purple-600 .text-blue-100 {
    color: #94a3b8 !important;
}

html.dark-mode .max-w-4xl.mx-auto.px-4 > .bg-white.rounded-lg.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-green-600.to-blue-600 .flex.items-center,
html.dark-mode .max-w-4xl.mx-auto.px-4 > .bg-white.rounded-lg.shadow-lg.overflow-hidden > div.bg-gradient-to-r.from-blue-600.to-purple-600 .flex.items-center {
    color: #94a3b8 !important;
}

/* ---------- FORM SECTION HEADING ---------- */
html.dark-mode h2.text-xl.font-semibold.text-gray-800 {
    color: #f8fafc !important;
}

/* ---------- FORM LABELS ---------- */
html.dark-mode label.block.text-sm.font-medium.text-gray-700 {
    color: #e2e8f0 !important;
}

/* ---------- FOTOĞRAF YÜKLEME BÖLÜMÜ (gradient box) ---------- */
html.dark-mode div.bg-gradient-to-r.from-indigo-50.to-cyan-50.border.border-indigo-200.rounded-lg.p-6 {
    background: #1e293b !important;
    border-color: rgba(99,102,241,0.25) !important;
}

html.dark-mode div.bg-gradient-to-r.from-indigo-50.to-cyan-50.border.border-indigo-200.rounded-lg.p-6 h3 {
    color: #f8fafc !important;
}

html.dark-mode div.bg-gradient-to-r.from-indigo-50.to-cyan-50.border.border-indigo-200.rounded-lg.p-6 p.text-sm.text-gray-600 {
    color: #94a3b8 !important;
}

html.dark-mode div.bg-gradient-to-r.from-indigo-50.to-cyan-50.border.border-indigo-200.rounded-lg.p-6 p.text-xs.text-indigo-600 {
    color: #818cf8 !important;
}

/* ---------- FOTOĞRAF İKON GRADIENTI ---------- */
html.dark-mode div.bg-gradient-to-r.from-indigo-500.to-cyan-500.rounded-lg {
    background: linear-gradient(135deg, #1e3a5f, #1a3a4a) !important;
}

/* ---------- DOSYA YÜKLEME LABEL ---------- */
html.dark-mode label[for="images"].bg-white {
    background-color: #334155 !important;
    border-color: #475569 !important;
}

html.dark-mode label[for="images"].bg-white span#file-label {
    color: #64748b !important;
}

html.dark-mode label[for="images"].bg-white div.text-gray-400 {
    color: #64748b !important;
}

/* ---------- DOSYA FORMAT BADGE'LERİ ---------- */
html.dark-mode span.inline-flex.items-center.px-2.py-1.bg-green-100.text-green-800.text-xs.rounded {
    background-color: rgba(34,197,94,0.15) !important;
    color: #bbf7d0 !important;
}

/* ---------- PREMIUM VIDEO BÖLÜMÜ (gradient box) ---------- */
html.dark-mode div.bg-gradient-to-r.from-purple-50.to-pink-50.border.border-purple-200.rounded-lg.p-6 {
    background: #1e293b !important;
    border-color: rgba(168,85,247,0.25) !important;
}

html.dark-mode div.bg-gradient-to-r.from-purple-50.to-pink-50.border.border-purple-200.rounded-lg.p-6 h3 {
    color: #f8fafc !important;
}

html.dark-mode div.bg-gradient-to-r.from-purple-50.to-pink-50.border.border-purple-200.rounded-lg.p-6 p.text-sm.text-gray-600 {
    color: #94a3b8 !important;
}

html.dark-mode div.bg-gradient-to-r.from-purple-50.to-pink-50.border.border-purple-200.rounded-lg.p-6 .text-xs.text-gray-500 {
    color: #64748b !important;
}

/* ---------- PREMIUM VİDEO İKON GRADIENTI ---------- */
html.dark-mode div.bg-gradient-to-r.from-purple-500.to-pink-500.rounded-lg {
    background: linear-gradient(135deg, #3b1f6e, #4a1a5e) !important;
}

/* ---------- VİDEO ÖNİZLEME KUTUSU ---------- */
html.dark-mode .bg-gray-100.rounded-lg.p-4 {
    background-color: #0f172a !important;
}

html.dark-mode .aspect-video.bg-gray-200.rounded {
    background-color: #1e293b !important;
}

/* ---------- PLATFORM BADGE'LERİ (premium video) ---------- */
html.dark-mode span.inline-flex.items-center.px-2.py-1.bg-red-100.text-red-800.text-xs.rounded {
    background-color: rgba(239,68,68,0.15) !important;
    color: #fca5a5 !important;
}

html.dark-mode span.inline-flex.items-center.px-2.py-1.bg-blue-100.text-blue-800.text-xs.rounded {
    background-color: rgba(59,130,246,0.15) !important;
    color: #bfdbfe !important;
}

html.dark-mode span.inline-flex.items-center.px-2.py-1.bg-orange-100.text-orange-800.text-xs.rounded {
    background-color: rgba(249,115,22,0.15) !important;
    color: #fdba74 !important;
}

html.dark-mode span.inline-flex.items-center.px-2.py-1.bg-indigo-100.text-indigo-800.text-xs.rounded {
    background-color: rgba(99,102,241,0.15) !important;
    color: #c7d2fe !important;
}

html.dark-mode span.inline-flex.items-center.px-2.py-1.bg-pink-100.text-pink-800.text-xs.rounded {
    background-color: rgba(236,72,153,0.15) !important;
    color: #fbcfe8 !important;
}

/* ---------- KOORDİNAT BÖLÜMÜ (gradient box) ---------- */
html.dark-mode div.bg-gradient-to-r.from-yellow-50.to-yellow-100.border.border-yellow-200.rounded-lg.p-4 {
    background: #1e293b !important;
    border-color: rgba(245,158,11,0.25) !important;
}

html.dark-mode div.bg-gradient-to-r.from-yellow-50.to-yellow-100.border.border-yellow-200.rounded-lg.p-4 h3 {
    color: #f8fafc !important;
}

html.dark-mode div.bg-gradient-to-r.from-yellow-50.to-yellow-100.border.border-yellow-200.rounded-lg.p-4 p.text-sm.text-gray-600 {
    color: #94a3b8 !important;
}

html.dark-mode div.bg-gradient-to-r.from-yellow-50.to-yellow-100.border.border-yellow-200.rounded-lg.p-4 p.text-xs.text-gray-500 {
    color: #64748b !important;
}

html.dark-mode div.bg-gradient-to-r.from-yellow-50.to-yellow-100.border.border-yellow-200.rounded-lg.p-4 .flex.items-center .text-sm.text-gray-500 {
    color: #94a3b8 !important;
}

/* ---------- KOORDİNAT İKON GRADIENTI ---------- */
html.dark-mode div.w-8.h-8.bg-gradient-to-r.from-yellow-400.to-yellow-600.rounded-lg {
    background: linear-gradient(135deg, #1e3a5f, #3b1f6e) !important;
}

/* ---------- KOORDİNAT MAVİ BİLGİ KUTUSU ---------- */
html.dark-mode div.mt-3.p-3.bg-blue-50.border.border-blue-200.rounded-lg {
    background-color: rgba(59,130,246,0.12) !important;
    border-color: rgba(59,130,246,0.25) !important;
}

html.dark-mode div.mt-3.p-3.bg-blue-50.border.border-blue-200.rounded-lg .text-sm.text-blue-700 {
    color: #93c5fd !important;
}

html.dark-mode div.mt-3.p-3.bg-blue-50.border.border-blue-200.rounded-lg p {
    color: #93c5fd !important;
}

/* ---------- KONUM HARİTA ---------- */
html.dark-mode #location-map.w-full.h-64.rounded-lg.border.border-gray-300 {
    border-color: #475569 !important;
}

/* ---------- BİLGİLENDİRME KUTUSU (alt) - mekan:blue / etkinlik:green ---------- */
html.dark-mode .max-w-4xl.mx-auto.px-4 .bg-blue-50.border.border-blue-200.rounded-lg.p-4,
html.dark-mode .max-w-4xl.mx-auto.px-4 .bg-green-50.border.border-green-200.rounded-lg.p-4 {
    background-color: rgba(59,130,246,0.12) !important;
    border-color: rgba(59,130,246,0.25) !important;
}

html.dark-mode .max-w-4xl.mx-auto.px-4 .bg-green-50.border.border-green-200.rounded-lg.p-4 {
    border-color: rgba(34,197,94,0.25) !important;
}

html.dark-mode .max-w-4xl.mx-auto.px-4 .bg-blue-50.border.border-blue-200.rounded-lg.p-4 .text-blue-800,
html.dark-mode .max-w-4xl.mx-auto.px-4 .bg-green-50.border.border-green-200.rounded-lg.p-4 .text-green-800 {
    color: #93c5fd !important;
}

html.dark-mode .max-w-4xl.mx-auto.px-4 .bg-blue-50.border.border-blue-200.rounded-lg.p-4 .text-blue-800 p,
html.dark-mode .max-w-4xl.mx-auto.px-4 .bg-green-50.border.border-green-200.rounded-lg.p-4 .text-green-800 p,
html.dark-mode .max-w-4xl.mx-auto.px-4 .bg-blue-50.border.border-blue-200.rounded-lg.p-4 .text-blue-800 li,
html.dark-mode .max-w-4xl.mx-auto.px-4 .bg-green-50.border.border-green-200.rounded-lg.p-4 .text-green-800 li {
    color: #e2e8f0 !important;
}

/* ---------- İPTAL BUTONU ---------- */
html.dark-mode a.px-6.py-3.border.border-gray-300.rounded-lg.text-gray-700 {
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

html.dark-mode a.px-6.py-3.border.border-gray-300.rounded-lg.text-gray-700:hover {
    background-color: #334155 !important;
}

/* ---------- KAYDET/GÖNDER BUTON GRADIENTLERİ ---------- */
html.dark-mode button.bg-gradient-to-r.from-blue-600.to-purple-600.text-white.rounded-lg,
html.dark-mode button.bg-gradient-to-r.from-green-600.to-blue-600.text-white.rounded-lg {
    background: linear-gradient(135deg, #1e3a5f, #3b1f6e) !important;
}

html.dark-mode button.bg-gradient-to-r.from-blue-600.to-purple-600.text-white.rounded-lg:hover,
html.dark-mode button.bg-gradient-to-r.from-green-600.to-blue-600.text-white.rounded-lg:hover {
    opacity: 0.9;
}

/* ---------- MEKAN MENÜSÜ BUTONU (success mesajı içinde) ---------- */
html.dark-mode a.inline-flex.items-center.bg-gradient-to-r.from-orange-500.to-red-500 {
    background: linear-gradient(135deg, #5a2a1a, #4a1a1a) !important;
}

html.dark-mode a.inline-flex.items-center.bg-gradient-to-r.from-orange-500.to-red-500:hover {
    opacity: 0.9;
}

/* ---------- BAŞARI MESAJI BORDER ---------- */
html.dark-mode .mt-3.pt-3.border-t.border-green-200 {
    border-top-color: rgba(34,197,94,0.25) !important;
}

/* ---------- GREEN SUCCESS TEXT ---------- */
html.dark-mode span.text-green-800.font-medium {
    color: #bbf7d0 !important;
}

/* ---------- INDIGO TEXT (image limit) ---------- */
html.dark-mode p.text-xs.text-indigo-600.font-medium {
    color: #818cf8 !important;
}

/* ---------- KONUM HATA MESAJI ---------- */
html.dark-mode #location-error.bg-red-50.border.border-red-200.rounded-lg {
    background-color: rgba(239,68,68,0.15) !important;
    border-color: rgba(239,68,68,0.3) !important;
}

html.dark-mode #location-error .text-red-700 {
    color: #fca5a5 !important;
}

/* ---------- SEÇİLEN RESİMLER TEXT ---------- */
html.dark-mode p.text-sm.font-medium.text-gray-700 {
    color: #e2e8f0 !important;
}

/* ---------- RESİM ÖNİZLEME BORDER ---------- */
html.dark-mode img.rounded-lg.border.border-gray-200.shadow-sm {
    border-color: #334155 !important;
}

/* ---------- TEXT GRAY-600 FORMLARDA ---------- */
html.dark-mode p.text-xs.text-gray-500.mt-1 {
    color: #64748b !important;
}

/* ---------- PRICE RANGE SELECT ---------- */
html.dark-mode .text-xs.text-gray-500.mt-1 i.fas.fa-info-circle {
    color: #60a5fa !important;
}

/* ---------- GREEN INFO BOX TEXT (etkinlik) ---------- */
html.dark-mode .bg-green-50.border.border-green-200.rounded-lg.p-4.mb-6 span.text-green-900 {
    color: #86efac !important;
}

html.dark-mode .bg-red-50.border.border-red-200.rounded-lg.p-4.mb-6 span.text-red-700 {
    color: #fca5a5 !important;
}

/* ============================================
   PROFILE PAGE (profile.php) — Dashboard & Statistics
   ============================================ */

/* ---------- BACKGROUND GRAY-300 ---------- */
html.dark-mode .bg-gray-300 { background-color: #475569 !important; }

/* ---------- BACKGROUND BLUE-200 (progress bar) ---------- */
html.dark-mode .bg-blue-200 { background-color: #1e3a5f !important; }

/* ---------- STATISTICS SECTION CONTAINER (bg-white card) ---------- */
html.dark-mode .statistics-section.bg-white.rounded-2xl.shadow-lg.p-8 {
    background-color: #1e293b !important;
}

/* ---------- ANALYTICS GRADIENT CARDS (from-*-50 to-*-50 rounded-xl p-6) ---------- */
html.dark-mode .bg-gradient-to-br.from-blue-50.to-cyan-50.rounded-xl.p-6,
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50.rounded-xl.p-6,
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-xl.p-6 {
    background: #1e293b !important;
}

/* ---------- ANALYTICS CARD TITLES ---------- */
html.dark-mode .bg-gradient-to-br.from-blue-50.to-cyan-50.rounded-xl.p-6 h4,
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50.rounded-xl.p-6 h4,
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-xl.p-6 h4 {
    color: #f8fafc !important;
}

/* ---------- ANALYTICS CARD STAT NUMBERS ---------- */
html.dark-mode .bg-gradient-to-br.from-blue-50.to-cyan-50.rounded-xl.p-6 .text-3xl.font-bold.text-blue-600,
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50.rounded-xl.p-6 .text-3xl.font-bold.text-green-800,
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-xl.p-6 .text-3xl.font-bold.text-yellow-600 {
    color: #f8fafc !important;
}

/* ---------- ANALYTICS CARD SUBTEXT ---------- */
html.dark-mode .bg-gradient-to-br.from-blue-50.to-cyan-50.rounded-xl.p-6 .text-sm.text-gray-600,
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50.rounded-xl.p-6 .text-sm.text-gray-600,
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-xl.p-6 .text-sm.text-gray-600 {
    color: #94a3b8 !important;
}

/* ---------- PROFILE COMPLETION PROGRESS BAR ---------- */
html.dark-mode .w-full.bg-blue-200.rounded-full.h-2 {
    background-color: #1e293b !important;
}

/* ---------- CITY RANKING ITEMS (bg-gray-50 rounded-lg p-4) ---------- */
html.dark-mode .bg-gray-50.rounded-lg.p-4 .font-semibold.text-gray-900 {
    color: #f8fafc !important;
}

/* ---------- TRAVEL STATISTICS GRADIENT BOXES ---------- */
html.dark-mode .bg-gradient-to-br.from-teal-50.to-cyan-50.rounded-lg.p-4,
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-lg.p-4,
html.dark-mode .bg-gradient-to-br.from-purple-50.to-pink-50.rounded-lg.p-4 {
    background: #1e293b !important;
}

html.dark-mode .bg-gradient-to-br.from-teal-50.to-cyan-50.rounded-lg.p-4 h5,
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-lg.p-4 h5,
html.dark-mode .bg-gradient-to-br.from-purple-50.to-pink-50.rounded-lg.p-4 h5 {
    color: #f8fafc !important;
}

html.dark-mode .bg-gradient-to-br.from-teal-50.to-cyan-50.rounded-lg.p-4 .text-xs.text-gray-600,
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-lg.p-4 .text-xs.text-gray-600,
html.dark-mode .bg-gradient-to-br.from-purple-50.to-pink-50.rounded-lg.p-4 .text-xs.text-gray-600 {
    color: #94a3b8 !important;
}

html.dark-mode .bg-gradient-to-br.from-teal-50.to-cyan-50.rounded-lg.p-4 .text-2xl.font-bold.text-teal-700 {
    color: #5eead4 !important;
}

html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-lg.p-4 .text-2xl.font-bold.text-blue-700 {
    color: #93c5fd !important;
}

html.dark-mode .bg-gradient-to-br.from-purple-50.to-pink-50.rounded-lg.p-4 .text-2xl.font-bold.text-purple-700 {
    color: #c4b5fd !important;
}

html.dark-mode .bg-gradient-to-br.from-teal-50.to-cyan-50.rounded-lg.p-4 .text-xs.text-teal-600,
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-lg.p-4 .text-xs.text-blue-600,
html.dark-mode .bg-gradient-to-br.from-purple-50.to-pink-50.rounded-lg.p-4 .text-xs.text-purple-600 {
    color: #94a3b8 !important;
}

/* ---------- BORDER-LEFT COLORS FOR TRAVEL STATS (keep visible) ---------- */
html.dark-mode .border-l-4.border-teal-500 { border-left-color: #14b8a6 !important; }
html.dark-mode .border-l-4.border-blue-500 { border-left-color: #3b82f6 !important; }
html.dark-mode .border-l-4.border-purple-500 { border-left-color: #a855f7 !important; }

/* ---------- SECTION HEADINGS IN STATISTICS ---------- */
html.dark-mode .statistics-section h3.text-xl.font-semibold {
    color: #f8fafc !important;
}

html.dark-mode .city-ranking-section h4.font-semibold.text-gray-900 {
    color: #f8fafc !important;
}

/* ---------- CITY RANKING NAMES ---------- */
html.dark-mode .bg-gray-50.rounded-lg.p-4 h5.font-semibold.text-gray-900 {
    color: #f8fafc !important;
}

/* ---------- DETAYLI ISTATISTIKLER (premium fallback - from-yellow-50.to-orange-50) ---------- */
html.dark-mode .statistics-section.bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-2xl.shadow-lg.p-8.mt-8.border.border-yellow-200 {
    background: #1e293b !important;
    border-color: rgba(245,158,11,0.25) !important;
}

html.dark-mode .statistics-section.bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-2xl.shadow-lg.p-8.mt-8.border.border-yellow-200 h3 {
    color: #f8fafc !important;
}

html.dark-mode .statistics-section.bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-2xl.shadow-lg.p-8.mt-8.border.border-yellow-200 p.text-gray-600 {
    color: #94a3b8 !important;
}

/* ---------- FAVORITES TAB CONTENT ---------- */
html.dark-mode #favorites.tab-content > div.bg-white.rounded-2xl.shadow-lg.p-4 {
    background-color: #1e293b !important;
}

html.dark-mode #favorites.tab-content h2.text-xl.md\:text-2xl.font-bold.text-gray-900 {
    color: #f8fafc !important;
}

/* ---------- PREMIUM BADGE (bg-gradient-to-r from-yellow-400 to-orange-500) ---------- */
html.dark-mode .premium-badge.bg-gradient-to-r.from-yellow-400.to-orange-500 {
    background: linear-gradient(135deg, #5a4a1a, #5a2a1a) !important;
}

/* ---------- STAR RATINGS (text-gray-300 for empty stars) ---------- */
html.dark-mode .text-gray-300.fa-star,
html.dark-mode i.text-gray-300.fa-star {
    color: #475569 !important;
}

/* ---------- AVERAGE RATING ICON ---------- */
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-xl.p-6 i.fa-star.text-yellow-400 {
    color: #fbbf24 !important;
}

/* ---------- GRADIENT STAT CARDS (dashboard top) ---------- */
/* Keep colored gradients as-is, they look good on dark bg */

/* ---------- TAB CONTENT PANELS (generic) ---------- */
html.dark-mode .tab-content > div.bg-white.rounded-2xl.shadow-lg {
    background-color: #1e293b !important;
}

/* ---------- TAB CONTENT PANEL HEADINGS ---------- */
html.dark-mode .tab-content > div.bg-white.rounded-2xl.shadow-lg h2,
html.dark-mode .tab-content > div.bg-white.rounded-2xl.shadow-lg h3 {
    color: #f8fafc !important;
}

/* ---------- SIDEBAR NAVIGATION ---------- */
html.dark-mode nav.p-4 .tab-btn .text-gray-700 {
    color: #e2e8f0 !important;
}

html.dark-mode nav.p-4 .tab-btn span.ml-auto.bg-gray-200 {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}

html.dark-mode nav.p-4 .tab-btn span.ml-auto.bg-green-500 {
    background-color: rgba(34,197,94,0.2) !important;
    color: #86efac !important;
}

html.dark-mode nav.p-4 .tab-btn span.ml-auto.bg-yellow-200 {
    background-color: rgba(245,158,11,0.2) !important;
    color: #fcd34d !important;
}

html.dark-mode nav.p-4 .tab-btn span.ml-auto.bg-purple-100 {
    background-color: rgba(168,85,247,0.2) !important;
    color: #d8b4fe !important;
}

html.dark-mode nav.p-4 .tab-btn span.ml-auto.bg-red-200 {
    background-color: rgba(239,68,68,0.2) !important;
    color: #fca5a5 !important;
}

html.dark-mode nav.p-4 .tab-btn span.ml-auto.bg-green-200 {
    background-color: rgba(34,197,94,0.2) !important;
    color: #bbf7d0 !important;
}

html.dark-mode nav.p-4 .tab-btn span.ml-auto.bg-emerald-200,
html.dark-mode nav.p-4 .tab-btn span.ml-auto.bg-orange-200 {
    background-color: rgba(34,197,94,0.2) !important;
    color: #86efac !important;
}

html.dark-mode nav.p-4 .tab-btn span.ml-auto.bg-orange-200 {
    background-color: rgba(249,115,22,0.2) !important;
    color: #fdba74 !important;
}

/* ---------- SIDEBAR STATS ---------- */
html.dark-mode .p-4.border-b.border-gray-200 .text-2xl.font-bold.text-blue-600 {
    color: #60a5fa !important;
}

html.dark-mode .p-4.border-b.border-gray-200 .text-2xl.font-bold.text-green-800 {
    color: #4ade80 !important;
}

html.dark-mode .p-4.border-b.border-gray-200 .text-xs.text-gray-500 {
    color: #64748b !important;
}

/* ---------- SIDEBAR MENU GROUP ---------- */
html.dark-mode .menu-group-header .menu-group-title {
    color: #f1f5f9 !important;
}

html.dark-mode .menu-group-header .menu-group-arrow.text-gray-400 {
    color: #64748b !important;
}

/* ---------- FAVORITE ITEMS ---------- */
html.dark-mode a.flex.items-center.p-4.bg-gray-50.rounded-lg {
    background-color: #1e293b !important;
}

html.dark-mode a.flex.items-center.p-4.bg-gray-50.rounded-lg:hover {
    background-color: #334155 !important;
}

/* ---------- EMPTY STATE TEXT ---------- */
html.dark-mode .text-center.py-8.text-gray-500 {
    color: #64748b !important;
}

html.dark-mode .text-center.py-8.text-gray-500 i {
    color: #475569 !important;
}

/* ---------- XP PROGRESS BAR ---------- */
html.dark-mode .bg-gradient-to-r.from-purple-500.to-violet-600 .w-full.bg-white\/20.rounded-full {
    background-color: rgba(255,255,255,0.1) !important;
}

/* ---------- FILTER BUTTONS (bg-gray-200) ---------- */
html.dark-mode .filter-btn.bg-gray-200.text-gray-700.rounded-lg {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .filter-btn.bg-gray-200.text-gray-700.rounded-lg:hover {
    background-color: #475569 !important;
}

/* ---------- INVOICE FILTER BUTTONS ---------- */
html.dark-mode .invoice-filter-btn.bg-gray-100.text-gray-700.rounded-lg {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* ---------- PROGRESS BARS (bg-gray-200) ---------- */
html.dark-mode .w-full.bg-gray-200.rounded-full {
    background-color: #334155 !important;
}

/* ---------- FAVORITE PLACEHOLDER IMAGE ---------- */
html.dark-mode .w-12.h-12.bg-gray-300.rounded-lg {
    background-color: #334155 !important;
}

html.dark-mode .w-12.h-12.bg-gray-300.rounded-lg i,
html.dark-mode .w-12.h-12.bg-gray-300.rounded-lg .text-gray-500 {
    color: #475569 !important;
}

/* ---------- VERIFICATION BADGES ---------- */
html.dark-mode span.ml-auto.bg-green-200.text-green-900 {
    background-color: rgba(34,197,94,0.2) !important;
    color: #bbf7d0 !important;
}

html.dark-mode span.ml-auto.bg-yellow-200.text-yellow-700 {
    background-color: rgba(245,158,11,0.2) !important;
    color: #fcd34d !important;
}

html.dark-mode span.ml-auto.bg-red-200.text-red-700 {
    background-color: rgba(239,68,68,0.2) !important;
    color: #fca5a5 !important;
}

/* ---------- TAB CONTENTS (all) ---------- */
html.dark-mode .tab-content .bg-white.rounded-2xl.shadow-lg {
    background-color: #1e293b !important;
}

/* ---------- MOBILE ELEMENTS ---------- */
html.dark-mode #mobileMenu.bg-white {
    background-color: #1e293b !important;
}

html.dark-mode .flex.items-center.px-3.py-2.bg-gray-100.text-gray-600.rounded-full {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}

html.dark-mode .flex.items-center.justify-center.w-10.h-10.bg-gray-100.text-gray-700.rounded-lg {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* ---------- TOGGLE SWITCH ---------- */
html.dark-mode .w-11.h-6.bg-gray-200 {
    background-color: #475569 !important;
}

html.dark-mode .w-11.h-6.bg-gray-200.peer-checked\:bg-green-600 {
    background-color: #059669 !important;
}

/* ---------- BADGE REWARD CARDS ---------- */
html.dark-mode .bg-gray-100.rounded-xl.shadow-sm,
html.dark-mode .bg-gray-200.text-gray-400,
html.dark-mode .bg-gray-200.text-gray-900 {
    background-color: #334155 !important;
}

html.dark-mode .bg-gray-200.text-gray-400 {
    color: #64748b !important;
}

html.dark-mode .bg-gray-200.text-gray-900 {
    color: #f8fafc !important;
}

/* ---------- CITY LIST ITEMS ---------- */
html.dark-mode .city-list-item .text-gray-600,
html.dark-mode .city-list-item .text-gray-500 {
    color: #94a3b8 !important;
}

/* ---------- DIVIDERS IN TAB CONTENT ---------- */
html.dark-mode .tab-content .border-b.border-gray-200 {
    border-bottom-color: #334155 !important;
}

/* ---------- DROPDOWN USER MENU ---------- */
html.dark-mode header .group div.absolute.bg-white a {
    color: #e2e8f0 !important;
}

html.dark-mode header .group div.absolute.bg-white a:hover {
    background-color: #334155 !important;
}

/* ---------- PREMIUM QUICK ACCESS BOXES (dashboard) ---------- */
html.dark-mode a.flex.items-center.p-4.bg-blue-50.rounded-xl {
    background-color: rgba(59,130,246,0.12) !important;
}

html.dark-mode a.flex.items-center.p-4.bg-purple-50.rounded-xl {
    background-color: rgba(168,85,247,0.12) !important;
}

html.dark-mode a.flex.items-center.p-4.bg-blue-50.rounded-xl .font-semibold.text-gray-900,
html.dark-mode a.flex.items-center.p-4.bg-purple-50.rounded-xl .font-semibold.text-gray-900 {
    color: #f8fafc !important;
}

html.dark-mode a.flex.items-center.p-4.bg-blue-50.rounded-xl .text-sm.text-gray-600,
html.dark-mode a.flex.items-center.p-4.bg-purple-50.rounded-xl .text-sm.text-gray-600 {
    color: #94a3b8 !important;
}

/* ---------- PREMIUM QUICK ACCESS ICONS ---------- */
html.dark-mode a.flex.items-center.p-4 .w-12.h-12.bg-blue-100.rounded-lg {
    background-color: rgba(59,130,246,0.15) !important;
}

html.dark-mode a.flex.items-center.p-4 .w-12.h-12.bg-purple-100.rounded-lg {
    background-color: rgba(168,85,247,0.15) !important;
}

/* ============================================
   PREMIUM PERFORMANCE METRICS CARDS (profile.php)
   ============================================ */

/* ---------- GELISMIS PERFORMANS METRIKLERI HEADING ---------- */
html.dark-mode .performance-metrics-section h4.font-semibold.text-gray-900 {
    color: #f8fafc !important;
}

/* ---------- METRIC CARD BACKGROUNDS (rounded-lg p-3 border-l-4) ---------- */
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-lg.p-3,
html.dark-mode .bg-gradient-to-br.from-purple-50.to-violet-50.rounded-lg.p-3,
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50.rounded-lg.p-3,
html.dark-mode .bg-gradient-to-br.from-orange-50.to-red-50.rounded-lg.p-3,
html.dark-mode .bg-gradient-to-br.from-cyan-50.to-blue-50.rounded-lg.p-3,
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-lg.p-3,
html.dark-mode .bg-gradient-to-br.from-pink-50.to-rose-50.rounded-lg.p-3,
html.dark-mode .bg-gradient-to-br.from-indigo-50.to-purple-50.rounded-lg.p-3 {
    background: #1e293b !important;
}

/* ---------- METRIC CARD TITLES ---------- */
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-lg.p-3 h5,
html.dark-mode .bg-gradient-to-br.from-purple-50.to-violet-50.rounded-lg.p-3 h5,
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50.rounded-lg.p-3 h5,
html.dark-mode .bg-gradient-to-br.from-orange-50.to-red-50.rounded-lg.p-3 h5,
html.dark-mode .bg-gradient-to-br.from-cyan-50.to-blue-50.rounded-lg.p-3 h5,
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-lg.p-3 h5,
html.dark-mode .bg-gradient-to-br.from-pink-50.to-rose-50.rounded-lg.p-3 h5,
html.dark-mode .bg-gradient-to-br.from-indigo-50.to-purple-50.rounded-lg.p-3 h5 {
    color: #f8fafc !important;
}

/* ---------- METRIC CARD SUBTITLES ---------- */
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-lg.p-3 p,
html.dark-mode .bg-gradient-to-br.from-purple-50.to-violet-50.rounded-lg.p-3 p,
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50.rounded-lg.p-3 p,
html.dark-mode .bg-gradient-to-br.from-orange-50.to-red-50.rounded-lg.p-3 p,
html.dark-mode .bg-gradient-to-br.from-cyan-50.to-blue-50.rounded-lg.p-3 p,
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-lg.p-3 p,
html.dark-mode .bg-gradient-to-br.from-pink-50.to-rose-50.rounded-lg.p-3 p,
html.dark-mode .bg-gradient-to-br.from-indigo-50.to-purple-50.rounded-lg.p-3 p {
    color: #94a3b8 !important;
}

/* ---------- METRIC CARD LABELS (text-gray-600) ---------- */
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-lg.p-3 span.text-xs.text-gray-600,
html.dark-mode .bg-gradient-to-br.from-purple-50.to-violet-50.rounded-lg.p-3 span.text-xs.text-gray-600,
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50.rounded-lg.p-3 span.text-xs.text-gray-600,
html.dark-mode .bg-gradient-to-br.from-orange-50.to-red-50.rounded-lg.p-3 span.text-xs.text-gray-600,
html.dark-mode .bg-gradient-to-br.from-cyan-50.to-blue-50.rounded-lg.p-3 span.text-xs.text-gray-600,
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-lg.p-3 span.text-xs.text-gray-600,
html.dark-mode .bg-gradient-to-br.from-pink-50.to-rose-50.rounded-lg.p-3 span.text-xs.text-gray-600,
html.dark-mode .bg-gradient-to-br.from-indigo-50.to-purple-50.rounded-lg.p-3 span.text-xs.text-gray-600 {
    color: #94a3b8 !important;
}

/* ---------- METRIC CARD VALUES (colorful stat numbers) ---------- */
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-lg.p-3 span.font-bold.text-blue-600,
html.dark-mode .bg-gradient-to-br.from-purple-50.to-violet-50.rounded-lg.p-3 span.font-bold.text-purple-600,
html.dark-mode .bg-gradient-to-br.from-purple-50.to-violet-50.rounded-lg.p-3 span.font-bold.text-teal-600,
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50.rounded-lg.p-3 span.font-bold.text-green-600,
html.dark-mode .bg-gradient-to-br.from-orange-50.to-red-50.rounded-lg.p-3 span.font-bold.text-orange-600,
html.dark-mode .bg-gradient-to-br.from-cyan-50.to-blue-50.rounded-lg.p-3 span.font-bold.text-cyan-600,
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-lg.p-3 span.font-bold.text-yellow-600,
html.dark-mode .bg-gradient-to-br.from-pink-50.to-rose-50.rounded-lg.p-3 span.font-bold.text-pink-600,
html.dark-mode .bg-gradient-to-br.from-indigo-50.to-purple-50.rounded-lg.p-3 span.font-bold.text-indigo-600 {
    color: #f8fafc !important;
}

/* ---------- METRIC CARD VALUES (darker variants - 800 shades) ---------- */
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50.rounded-lg.p-3 span.font-bold.text-green-800,
html.dark-mode .bg-gradient-to-br.from-orange-50.to-red-50.rounded-lg.p-3 span.font-bold.text-orange-800,
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-lg.p-3 span.font-bold.text-yellow-800,
html.dark-mode .bg-gradient-to-br.from-pink-50.to-rose-50.rounded-lg.p-3 span.font-bold.text-pink-800,
html.dark-mode .bg-gradient-to-br.from-indigo-50.to-purple-50.rounded-lg.p-3 span.font-bold.text-indigo-800 {
    color: #cbd5e1 !important;
}

/* ---------- METRIC CARD ICONS (colored) ---------- */
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50.rounded-lg.p-3 i.text-blue-600,
html.dark-mode .bg-gradient-to-br.from-purple-50.to-violet-50.rounded-lg.p-3 i.text-purple-600,
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50.rounded-lg.p-3 i.text-green-600,
html.dark-mode .bg-gradient-to-br.from-orange-50.to-red-50.rounded-lg.p-3 i.text-orange-600,
html.dark-mode .bg-gradient-to-br.from-cyan-50.to-blue-50.rounded-lg.p-3 i.text-cyan-600,
html.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50.rounded-lg.p-3 i.text-yellow-600,
html.dark-mode .bg-gradient-to-br.from-pink-50.to-rose-50.rounded-lg.p-3 i.text-pink-600,
html.dark-mode .bg-gradient-to-br.from-indigo-50.to-purple-50.rounded-lg.p-3 i.text-indigo-600 {
    color: #60a5fa !important;
}

/* ---------- METRIC CARD BORDER-LEFT COLORS (keep visible) ---------- */
html.dark-mode .border-l-4.border-blue-500 { border-left-color: #3b82f6 !important; }
html.dark-mode .border-l-4.border-purple-500 { border-left-color: #a855f7 !important; }
html.dark-mode .border-l-4.border-green-500 { border-left-color: #22c55e !important; }
html.dark-mode .border-l-4.border-orange-500 { border-left-color: #f97316 !important; }
html.dark-mode .border-l-4.border-cyan-500 { border-left-color: #06b6d4 !important; }
html.dark-mode .border-l-4.border-yellow-500 { border-left-color: #eab308 !important; }
html.dark-mode .border-l-4.border-pink-500 { border-left-color: #ec4899 !important; }
html.dark-mode .border-l-4.border-indigo-500 { border-left-color: #6366f1 !important; }

/* ---------- PERFORMANS IPUCLARI SECTION (bg-blue-50 rounded-lg p-3) ---------- */
html.dark-mode .performance-metrics-section .mt-4.bg-blue-50.rounded-lg.p-3 {
    background-color: rgba(59,130,246,0.1) !important;
}

html.dark-mode .performance-metrics-section .mt-4.bg-blue-50.rounded-lg.p-3 h6 {
    color: #f8fafc !important;
}

html.dark-mode .performance-metrics-section .mt-4.bg-blue-50.rounded-lg.p-3 .text-xs.text-gray-600 {
    color: #94a3b8 !important;
}

html.dark-mode .performance-metrics-section .mt-4.bg-blue-50.rounded-lg.p-3 .text-xs.text-gray-600 p {
    color: #94a3b8 !important;
}

/* ============================================
   OZET ISTATISTIKLER SUMMARY BOX (profile.php)
   ============================================ */

/* ---------- OZET ISTATISTIKLER CONTAINER ---------- */
html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50.rounded-lg.p-4.border.border-gray-200 {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* ---------- VALUES (numbers: count) ---------- */
html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50.rounded-lg.p-4.border.border-gray-200 .text-lg.font-bold.text-gray-900 {
    color: #f8fafc !important;
}

/* ---------- LABELS (text-gray-600) ---------- */
html.dark-mode div.bg-gradient-to-r.from-gray-50.to-blue-50.rounded-lg.p-4.border.border-gray-200 .text-xs.text-gray-600 {
    color: #94a3b8 !important;
}

/* ============================================
   RECOMMENDATIONS CARDS (profile.php - Öneriler)
   ============================================ */

/* ---------- RECOMMENDATION ITEMS (dynamic: from-white.to-gray-50) ---------- */
html.dark-mode #recommendations .bg-gradient-to-r.from-white.to-gray-50.rounded-xl.p-6.shadow-sm.border.border-gray-100 {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode #recommendations .bg-gradient-to-r.from-white.to-gray-50.rounded-xl.p-6.shadow-sm.border.border-gray-100 h4.text-lg.font-semibold.text-gray-900 {
    color: #f8fafc !important;
}

html.dark-mode #recommendations .bg-gradient-to-r.from-white.to-gray-50.rounded-xl.p-6.shadow-sm.border.border-gray-100 p.text-sm.text-gray-600 {
    color: #94a3b8 !important;
}

html.dark-mode #recommendations .bg-gradient-to-r.from-white.to-gray-50.rounded-xl.p-6.shadow-sm.border.border-gray-100 p.text-sm.text-blue-600 {
    color: #60a5fa !important;
}

html.dark-mode #recommendations .bg-gradient-to-r.from-white.to-gray-50.rounded-xl.p-6.shadow-sm.border.border-gray-100 .text-xs.text-gray-500 {
    color: #64748b !important;
}

/* ---------- TRENDING CARDS (dynamic: from-red-50.to-orange-50) ---------- */
html.dark-mode #recommendations .bg-gradient-to-r.from-red-50.to-orange-50.rounded-lg.p-4.border.border-red-100 {
    background: #1e293b !important;
    border-color: rgba(239,68,68,0.25) !important;
}

html.dark-mode #recommendations .bg-gradient-to-r.from-red-50.to-orange-50.rounded-lg.p-4.border.border-red-100 h5.font-semibold.text-gray-900 {
    color: #f8fafc !important;
}

html.dark-mode #recommendations .bg-gradient-to-r.from-red-50.to-orange-50.rounded-lg.p-4.border.border-red-100 p.text-sm.text-gray-600 {
    color: #94a3b8 !important;
}

html.dark-mode #recommendations .bg-gradient-to-r.from-red-50.to-orange-50.rounded-lg.p-4.border.border-red-100 span.text-red-600.font-medium {
    color: #fca5a5 !important;
}

html.dark-mode #recommendations .bg-gradient-to-r.from-red-50.to-orange-50.rounded-lg.p-4.border.border-red-100 .text-yellow-500 {
    color: #fbbf24 !important;
}

/* ============================================
   HESAP BILGILERI (profile.php - Hesap Yönetimi)
   ============================================ */

html.dark-mode #account .mb-8.bg-gradient-to-r.from-blue-50.to-indigo-50.rounded-xl.p-6.border.border-blue-200 {
    background: #1e293b !important;
    border-color: rgba(59,130,246,0.25) !important;
}

html.dark-mode #account .mb-8.bg-gradient-to-r.from-blue-50.to-indigo-50.rounded-xl.p-6.border.border-blue-200 h3.text-lg.font-semibold.text-blue-900 {
    color: #f8fafc !important;
}

html.dark-mode #account .mb-8.bg-gradient-to-r.from-blue-50.to-indigo-50.rounded-xl.p-6.border.border-blue-200 .text-sm.text-blue-700 {
    color: #94a3b8 !important;
}

html.dark-mode #account .mb-8.bg-gradient-to-r.from-blue-50.to-indigo-50.rounded-xl.p-6.border.border-blue-200 .font-medium.text-blue-900 {
    color: #f8fafc !important;
}

/* ============================================
   HIZLI GIDER EKLE (profile.php - Harcamalarım)
   ============================================ */

html.dark-mode #my-expenses .bg-gradient-to-r.from-gray-50.to-gray-100.rounded-xl.p-5.mb-6.border.border-gray-200 {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode #my-expenses .bg-gradient-to-r.from-gray-50.to-gray-100.rounded-xl.p-5.mb-6.border.border-gray-200 h3 {
    color: #f8fafc !important;
}

/* ============================================
   REFERANS KODUN (profile.php - Arkadaş Davet Et)
   ============================================ */

html.dark-mode #referral .bg-gradient-to-r.from-purple-50.to-pink-50.rounded-xl.p-4.border.border-purple-200 {
    background: #1e293b !important;
    border-color: rgba(168,85,247,0.3) !important;
}

html.dark-mode #referral .bg-gradient-to-r.from-purple-50.to-pink-50.rounded-xl.p-4.border.border-purple-200 .text-xs.text-gray-500 {
    color: #94a3b8 !important;
}

html.dark-mode #referral .bg-gradient-to-r.from-purple-50.to-pink-50.rounded-xl.p-4.border.border-purple-200 .text-2xl.font-mono.font-bold.tracking-widest.text-purple-700 {
    color: #c4b5fd !important;
}

/* ---------- REFERRAL LINK INPUT ---------- */
html.dark-mode #referral input#referralLink.bg-gray-50.border-2.border-purple-300.rounded-xl.text-gray-700 {
    background-color: #1e293b !important;
    border-color: rgba(168,85,247,0.4) !important;
    color: #e2e8f0 !important;
}

html.dark-mode #referral input#referralLink.bg-gray-50.border-2.border-purple-300.rounded-xl.text-gray-700:focus {
    border-color: #a855f7 !important;
}

/* ============================================
   MEKAN KARSILASTIRMA STAT CARDS (profile.php)
   ============================================ */

/* ---------- COMPARISON STAT CARD BACKGROUNDS ---------- */
html.dark-mode #place-comparison .bg-gradient-to-r.from-orange-50.to-amber-50.rounded-lg,
html.dark-mode #place-comparison .bg-gradient-to-r.from-blue-50.to-indigo-50.rounded-lg,
html.dark-mode #place-comparison .bg-gradient-to-r.from-green-50.to-emerald-50.rounded-lg,
html.dark-mode #place-comparison .bg-gradient-to-r.from-purple-50.to-violet-50.rounded-lg {
    background: #1e293b !important;
}

/* Keep border colors subtle */
html.dark-mode #place-comparison .bg-gradient-to-r.from-orange-50.to-amber-50.rounded-lg { border-color: rgba(249,115,22,0.3) !important; }
html.dark-mode #place-comparison .bg-gradient-to-r.from-blue-50.to-indigo-50.rounded-lg { border-color: rgba(59,130,246,0.3) !important; }
html.dark-mode #place-comparison .bg-gradient-to-r.from-green-50.to-emerald-50.rounded-lg { border-color: rgba(34,197,94,0.3) !important; }
html.dark-mode #place-comparison .bg-gradient-to-r.from-purple-50.to-violet-50.rounded-lg { border-color: rgba(168,85,247,0.3) !important; }

/* ---------- COMPARISON STAT LABELS ---------- */
html.dark-mode #place-comparison .bg-gradient-to-r.from-orange-50.to-amber-50.rounded-lg p.text-xs,
html.dark-mode #place-comparison .bg-gradient-to-r.from-blue-50.to-indigo-50.rounded-lg p.text-xs,
html.dark-mode #place-comparison .bg-gradient-to-r.from-green-50.to-emerald-50.rounded-lg p.text-xs,
html.dark-mode #place-comparison .bg-gradient-to-r.from-purple-50.to-violet-50.rounded-lg p.text-xs {
    color: #94a3b8 !important;
}

/* ---------- COMPARISON STAT VALUES ---------- */
html.dark-mode #place-comparison .bg-gradient-to-r.from-orange-50.to-amber-50.rounded-lg .font-bold.text-orange-600,
html.dark-mode #place-comparison .bg-gradient-to-r.from-blue-50.to-indigo-50.rounded-lg .font-bold.text-blue-600,
html.dark-mode #place-comparison .bg-gradient-to-r.from-purple-50.to-violet-50.rounded-lg .font-bold.text-purple-600 {
    color: #f8fafc !important;
}

html.dark-mode #place-comparison .bg-gradient-to-r.from-green-50.to-emerald-50.rounded-lg .font-bold.text-green-800 {
    color: #86efac !important;
}

/* ---------- COMPARISON ICON BACKGROUNDS ---------- */
html.dark-mode #place-comparison .bg-gradient-to-r.from-orange-50.to-amber-50.rounded-lg .bg-orange-100,
html.dark-mode #place-comparison .bg-gradient-to-r.from-blue-50.to-indigo-50.rounded-lg .bg-blue-100,
html.dark-mode #place-comparison .bg-gradient-to-r.from-green-50.to-emerald-50.rounded-lg .bg-green-100,
html.dark-mode #place-comparison .bg-gradient-to-r.from-purple-50.to-violet-50.rounded-lg .bg-purple-100 {
    background-color: rgba(255,255,255,0.08) !important;
}

/* ---------- COMPARISON ICONS ---------- */
html.dark-mode #place-comparison .bg-gradient-to-r.from-orange-50.to-amber-50.rounded-lg i.text-orange-600,
html.dark-mode #place-comparison .bg-gradient-to-r.from-blue-50.to-indigo-50.rounded-lg i.text-blue-600,
html.dark-mode #place-comparison .bg-gradient-to-r.from-purple-50.to-violet-50.rounded-lg i.text-purple-600 {
    color: #94a3b8 !important;
}

html.dark-mode #place-comparison .bg-gradient-to-r.from-green-50.to-emerald-50.rounded-lg i.text-green-800 {
    color: #6ee7b7 !important;
}

/* ============================================
   ROZETLERIM BADGE CARDS (profile.php)
   ============================================ */

/* ---------- BADGE CARD CONTAINERS (all color variants) ---------- */
html.dark-mode #badges .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.gap-4 > div {
    background: #1e293b !important;
    border-color: #475569 !important;
}

/* ---------- BADGE NAMES ---------- */
html.dark-mode #badges .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.gap-4 > div h4.font-semibold.text-gray-900 {
    color: #f8fafc !important;
}

/* ---------- BADGE DESCRIPTIONS ---------- */
html.dark-mode #badges .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.gap-4 > div p.text-xs.text-gray-600 {
    color: #94a3b8 !important;
}

/* ---------- BADGE DATES ---------- */
html.dark-mode #badges .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.gap-4 > div .text-xs.text-gray-500 {
    color: #64748b !important;
}

/* ---------- BADGE XP TEXT ---------- */
html.dark-mode #badges .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.gap-4 > div .text-xs.font-medium {
    color: #94a3b8 !important;
}

/* ---------- BADGE ICON CIRCLES (keep colorful but muted) ---------- */
html.dark-mode #badges .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.gap-4 > div div.w-16.h-16.rounded-full {
    filter: brightness(0.7) saturate(0.8);
}

/* ============================================
   AKTIF KUPONLARIM CARDS (profile.php)
   ============================================ */

/* ---------- COUPON CARD BACKGROUNDS ---------- */
html.dark-mode #coupons [class*="border-2"][class*="rounded-xl"][class*="p-5"].relative {
    background: #1e293b !important;
    border-color: rgba(34,197,94,0.25) !important;
}

/* ---------- COUPON TITLES ---------- */
html.dark-mode #coupons [class*="border-2"][class*="rounded-xl"][class*="p-5"].relative h3.font-bold.text-gray-900 {
    color: #f8fafc !important;
}

/* ---------- COUPON DESCRIPTIONS ---------- */
html.dark-mode #coupons [class*="border-2"][class*="rounded-xl"][class*="p-5"].relative p.text-sm.text-gray-600 {
    color: #94a3b8 !important;
}

/* ---------- COUPON VALUES ---------- */
html.dark-mode #coupons [class*="border-2"][class*="rounded-xl"][class*="p-5"].relative .text-2xl.font-bold.text-green-600,
html.dark-mode #coupons [class*="border-2"][class*="rounded-xl"][class*="p-5"].relative .text-2xl.font-bold.text-blue-600 {
    color: #f8fafc !important;
}

/* ---------- COUPON ICONS ---------- */
html.dark-mode #coupons [class*="border-2"][class*="rounded-xl"][class*="p-5"].relative i.text-green-600 {
    color: #4ade80 !important;
}