/* * ═══════════════════════════════════════════════════════════════ * GLOBAL RENK DEĞİŞKENLERİ — NİHAİ SENKRONİZASYON SİSTEMİ * ═══════════════════════════════════════════════════════════════ * Bu dosya FALLBACK değerleri içerir. * Gerçek değerler /api/website-settings/theme-vars endpoint'inden * theme-loader.js tarafından 'e enjekte edilir. * ═══════════════════════════════════════════════════════════════ */ :root { /* ── Temel Renkler ── */ --color-primary: #ff6b35; --color-secondary: #e55a2b; --color-accent: #f7931e; --color-success: #10b981; --color-error: #ef4444; --color-warning: #f59e0b; /* ── Arka Planlar ── */ --color-bg: #ffffff; --card-bg: #ffffff; --navbar-bg: #ffffff; --footer-bg: #111827; --section-alt-bg: #f9fafb; --mobile-menu-bg: #111827; /* ── Tipografi ── */ --text-heading: #111827; --text-body: #374151; --text-link: #ff6b35; --text-muted: #6b7280; --menu-text: #374151; /* ── Bileşenler ── */ --btn-primary: #ff6b35; --btn-hover: #e55a2b; --btn-text: #ffffff; --card-border: #e5e7eb; --input-border: #d1d5db; --input-focus: #ff6b35; /* ── Mobil Alt Menü ── */ --mob-nav-bg: #ffffff; --mob-nav-active: #ff6b35; --mob-nav-inactive: #9ca3af; --mob-nav-border: #e5e7eb; --mob-nav-badge: #ef4444; /* ── Global ── */ --border-radius-global: 8px; /* ── Alias ── */ --primary-color: var(--color-primary); --secondary-color: var(--color-secondary); --p-color: var(--color-primary); --s-color: var(--color-secondary); /* ── Admin Panel ── */ --admin-sidebar-bg: #ffffff; --admin-sidebar-border: transparent; --admin-topbar-bg: #ffffff; --admin-active-bg: rgba(255, 107, 53, 0.08); --admin-blue: #1e40af; --admin-blue-light: #eff6ff; } /* ═══════════════════════════════════════════════════════════════ GLOBAL OVERRIDE — Tüm hard-coded renkleri eze ═══════════════════════════════════════════════════════════════ */ /* ── Sayfa Arka Planı ── */ body { background-color: var(--color-bg) !important; color: var(--text-body) !important; } /* ── Başlıklar ── */ h1, h2, h3, h4, h5, h6 { color: var(--text-heading); } /* ── Linkler ── */ a:not(.btn):not([class*="btn-"]):not(.nav-item):not(.nav-link):not(.dropdown-item):not(.dt-popular-searches a):not(.site-header a):not(.site-header *) { color: var(--text-link); } /* Navbar linkleri tema renginden izole et */ .site-header a, .site-header a:visited { color: inherit; } /* ── Navbar / Header ── */ .navbar, .site-header, header.main-header, nav.main-nav, .header, .admin-topbar, .ws-mobile-topbar { background-color: var(--navbar-bg) !important; } /* ── Menü Yazı Rengi ── */ .nav-link, .menu-item a, .navbar-nav .nav-link, .nav-menu a { color: var(--menu-text) !important; } /* ── Birincil Butonlar ── */ .btn-primary, button.btn-primary, a.btn-primary, .save-button, .booking-btn, .search-btn, .cta-button, .dt-search-btn, .btn-search, .mob-search-btn, .ws-save-btn { background-color: var(--btn-primary) !important; color: var(--btn-text) !important; border-color: var(--btn-primary) !important; } .btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover, .save-button:hover, .booking-btn:hover, .search-btn:hover, .cta-button:hover, .dt-search-btn:hover, .btn-search:hover { background-color: var(--btn-hover) !important; border-color: var(--btn-hover) !important; } /* ── Kartlar ── */ .card, .facility-card, .room-card, .content-card, .stat-card, .booking-card, .approval-card { background-color: var(--card-bg) !important; border-color: var(--card-border) !important; } /* ── Input / Form ── */ input:not([type="color"]):not([type="range"]), textarea, select, .form-control, .form-input { border-color: var(--input-border) !important; } input:not([type="color"]):not([type="range"]):focus, textarea:focus, select:focus, .form-control:focus, .form-input:focus { border-color: var(--input-focus) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus) 15%, transparent) !important; outline: none !important; } /* ── Footer ── */ .site-footer, footer, .footer, .footer-section { background-color: var(--footer-bg) !important; } /* ── Alternatif Bölüm Arka Planı ── */ .section-alt, .alt-section, .bg-light-section, .features-section, .trust-section-luxury { background-color: var(--section-alt-bg) !important; } /* ── Mobil Menü (Sidebar) ── */ .mobile-menu, .mobile-sidebar, #mobileMenu, .nav-mobile, .navbar-menu, .mob-sidebar { background-color: var(--mobile-menu-bg) !important; } /* ── Admin Sidebar ── */ .admin-sidebar { background-color: var(--admin-sidebar-bg) !important; border-color: var(--admin-sidebar-border) !important; } .nav-item.active { color: var(--color-primary) !important; border-right-color: var(--color-primary) !important; background-color: var(--admin-active-bg) !important; } .nav-item:hover, .nav-section-title:hover { color: var(--color-primary) !important; } /* ── Admin Panel Butonları ── */ .btn-variable:hover, .btn-icon.active { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; } /* ── Aktif Tab / Sekme ── */ .tab-btn.active, .dt-tab.active, .filter-tab.active, .search-tab.active { color: var(--color-primary) !important; border-color: var(--color-primary) !important; } /* ── Rozet / Badge (primary) ── */ .badge-info, .badge-primary { background-color: color-mix(in srgb, var(--color-primary) 15%, transparent) !important; color: var(--color-primary) !important; } /* ── İkon Renkleri ── */ .icon-primary, .fa-primary, [data-icon-color="primary"] { color: var(--color-primary) !important; fill: var(--color-primary) !important; } svg.icon-primary path, svg.icon-primary circle, svg.icon-primary rect { fill: var(--color-primary) !important; } /* ── Swiper / Slider Override ── */ .swiper-pagination-bullet-active { background: var(--color-primary) !important; } .swiper-button-next, .swiper-button-prev { color: var(--color-primary) !important; } /* ── Flatpickr / Takvim Override ── */ .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover { background: var(--color-primary) !important; border-color: var(--color-primary) !important; } .flatpickr-day:hover { background: color-mix(in srgb, var(--color-primary) 15%, transparent) !important; } /* ── Takvim (Admin) ── */ .calendar-day.selected { background: var(--color-primary) !important; border-color: var(--color-primary) !important; } .legend-box.selected { background: var(--color-primary) !important; border-color: var(--color-primary) !important; } /* ── Border Radius Global ── */ .btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .card, .content-card, .facility-card, .room-card, .modal-content, input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea { border-radius: var(--border-radius-global) !important; } /* ── Geri Butonu (Mobil Topbar) ── */ .mob-back-btn, .back-btn, .btn-back, [onclick*="history.back"], .topbar-back, .mob-topbar-back, .header-back, .mob-back { background: #f3f4f6 !important; color: #111827 !important; border: 1px solid #e5e7eb !important; } /* ── Profil Sayfaları Bottom Nav ── */ .bottom-nav a { color: #888 !important; text-decoration: none !important; } .bottom-nav a.active, .bottom-nav a.active i { color: var(--color-primary) !important; } /* ── Profil Boş Durum Butonu ── */ .empty-btn { background: var(--color-primary) !important; color: #fff !important; text-decoration: none !important; } .empty-btn:hover { background: var(--color-secondary) !important; color: #fff !important; } /* ── Profil Filter Tab ── */ .filter-tab { color: #555 !important; text-decoration: none !important; } .filter-tab.active { background: #111 !important; border-color: #111 !important; color: #fff !important; } nav.mob-bottom-nav, .mob-bottom-nav, nav.ws-mobile-bottom-nav, .ws-mobile-bottom-nav, .mob-tesis-bottom-nav, .mob-oda-bottom-nav { background-color: var(--mob-nav-bg) !important; border-top: 1px solid var(--mob-nav-border) !important; padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06) !important; } /* Pasif ikonlar */ nav.mob-bottom-nav a, .mob-bottom-nav a, nav.ws-mobile-bottom-nav a, .ws-mobile-bottom-nav a, .mob-tesis-bottom-nav a, .mob-oda-bottom-nav a { color: var(--mob-nav-inactive) !important; } /* SVG ikonlar currentColor ile renk alır */ nav.mob-bottom-nav a i, nav.mob-bottom-nav a svg, .mob-bottom-nav a i, .mob-bottom-nav a svg { color: currentColor !important; fill: currentColor !important; } /* Aktif sekme */ nav.mob-bottom-nav a.active, .mob-bottom-nav a.active, nav.mob-bottom-nav a[class*="active"], .mob-bottom-nav a[class*="active"], nav.ws-mobile-bottom-nav a.active, .ws-mobile-bottom-nav a.active, .mob-tesis-bottom-nav a.active, .mob-oda-bottom-nav a.active { color: var(--mob-nav-active) !important; } nav.mob-bottom-nav a.active i, nav.mob-bottom-nav a.active svg, .mob-bottom-nav a.active i, .mob-bottom-nav a.active svg { color: var(--mob-nav-active) !important; fill: var(--mob-nav-active) !important; } /* Bildirim rozeti */ .mob-nav-badge, .ws-notif-dot, .notification-badge { background-color: var(--mob-nav-badge) !important; } /* ── 360 Viewer Override ── */ .viewer-header, .control-btn, .pnlm-load-box { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important; } .control-btn.active { background: linear-gradient(135deg, var(--color-success) 0%, color-mix(in srgb, var(--color-success) 80%, black) 100%) !important; } .info-content h3, .info-content ul li i, .close-info:hover { color: var(--color-primary) !important; } .custom-hotspot { background: color-mix(in srgb, var(--color-primary) 80%, transparent) !important; } .custom-hotspot:hover { background: color-mix(in srgb, var(--color-secondary) 90%, transparent) !important; } /* ── Conversion Elements Override ── */ .trust-badge-luxury::before { background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important; } .trust-badge-luxury:hover { box-shadow: 0 20px 60px color-mix(in srgb, var(--color-primary) 15%, transparent) !important; } .trust-icon-luxury { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, color-mix(in srgb, var(--color-secondary) 8%, transparent) 100%) !important; } /* ── Owner Tesisler Override ── */ .form-group select:focus, .filter-group select:focus, .filter-group input:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent) !important; } /* ── Booking Wizard Override ── */ .mob-booking-step.active, .wizard-step.active { color: var(--color-primary) !important; border-color: var(--color-primary) !important; } /* ── Profile / Panel Override ── */ .tab-btn:hover, .tab-btn.active { border-color: var(--color-primary) !important; color: var(--color-primary) !important; } /* ── Admin Panel Hard-coded Renk Override ── */ /* Tüm #ff6b35 ve #4361ee kullanımlarını CSS değişkenlerine bağla */ /* Form focus */ .form-group input:focus, .form-group select:focus, .form-group textarea:focus, .filter-group input:focus, .filter-group select:focus, .search-bar input:focus, .search-bar select:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent) !important; } /* Section başlık ikonları */ .form-section h3 i, .results-header h3 i, .customer-detail-section h3 i, .info-compact i, .contact-info i, .history-body i, .detail-value i, .facility-name i, .owner-name i, .approval-card-footer i { color: var(--color-primary) !important; } /* History item sol çizgi */ .history-item { border-left-color: var(--color-primary) !important; } /* Filter tab hover */ .filter-tab:hover { border-color: var(--color-primary) !important; color: var(--color-primary) !important; } /* Search tab active */ .search-tab.active { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--btn-text) !important; } /* Filter tab active */ .filter-tab.active { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--btn-text) !important; } /* Btn-sm primary */ .btn-sm.btn-primary { background-color: var(--color-primary) !important; color: var(--btn-text) !important; } .btn-sm.btn-primary:hover { background-color: var(--btn-hover) !important; } /* Guest avatar */ .guest-avatar { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important; } /* Detail stat icon */ .detail-stat i { color: var(--color-primary) !important; } /* Btn-icon (calendar nav) */ .btn-icon { color: var(--color-primary) !important; } /* Calendar day hover */ .calendar-day:not(.empty):not(.past):not(.booked):hover { border-color: var(--color-primary) !important; } /* Spent amount */ .spent-amount { color: var(--color-primary) !important; } /* Menu toggle */ .menu-toggle { color: var(--color-primary) !important; } .menu-toggle:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important; } /* User avatar */ .user-avatar { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important; } /* Stat icon colors */ .stat-icon.blue { background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important; color: var(--color-primary) !important; } /* ── Scrollbar (Webkit) ── */ ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-primary) 40%, transparent); } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }