html:not(.dark-mode) .product-card, html:not(.dark-mode) .content-card {
display: flex !important;
background-color: #ffffff;
border-radius: var(--border-radius-base) !important;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: none !important;
transition: border-color 0.2s ease !important;
overflow: hidden;
text-decoration: none;
}
.product-card, .content-card {
display: flex !important;
border-radius: var(--border-radius-base) !important;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: none !important;
transition: border-color 0.2s ease !important;
overflow: hidden;
text-decoration: none;
}
.product-card:hover, .content-card:hover {
box-shadow: none !important;
border-color: rgba(0,0,0,0.12);
}
.product-card, .content-card { flex-direction: column !important; }
/* Tüm kartlar - Light Mode beyaz arka plan */
html:not(.dark-mode) .product-card,
html:not(.dark-mode) .content-card,
html:not(.dark-mode) .katalog-card,
html:not(.dark-mode) .video-card,
html:not(.dark-mode) #kataloglar .bg-white,
html:not(.dark-mode) #videolar .bg-white {
display: flex !important;
background-color: #ffffff !important;
border-radius: var(--border-radius-base) !important;
overflow: hidden;
}
.katalog-card,
.video-card {
flex-direction: column !important;
}
.product-card,
.content-card {
box-shadow: none !important;
transition: border-color 0.2s ease !important;
}
.katalog-card,
.video-card,
#kataloglar .bg-white,
#videolar .bg-white {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}
@media (max-width: 767px) {
.product-card, .content-card, .katalog-card, .video-card {
flex-direction: column !important;
}
.product-card > a, .content-card > a {
flex-direction: column !important;
width: 100% !important;
}
.product-card > a > div:first-child, .content-card > a > div:first-child,
.product-card > a > div:last-child, .content-card > a > div:last-child,
.product-card > div:first-child, .product-card > div:last-child {
width: 100% !important;
}
}
.product-card:hover,
.content-card:hover {
box-shadow: none !important;
border-color: rgba(0, 0, 0, 0.12) !important;
}
.katalog-card:hover,
.video-card:hover,
#kataloglar .bg-white:hover,
#videolar .bg-white:hover {
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
/* Kart içi metin renkleri - Light Mode */
.product-card h3,
.content-card h3,
.katalog-card h3,
.video-card h3 {
color: var(--color-text-heading) !important;
}
.product-card p,
.content-card p,
.katalog-card p,
.video-card p,
.product-card .text-body,
.content-card .text-body {
color: var(--color-text-body) !important;
}
/* Referans kartları */
.reference-item {
background-color: #ffffff;
border-radius: var(--border-radius-base) !important;
box-shadow: none;
transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
border: 1px solid #d1d5db;
}
.reference-item:hover {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
border-color: var(--color-primary);
}
/* =============================================== */
/* DİNAMİK STİLLER (Veritabanından Üretildi) */
/* Oluşturma: 2026-11-09 13:46:09 */
/* =============================================== */
/* ─── Global Polish & Premium Details ───────────────────────────────────────── */
::selection { background: var(--color-primary, #0ea5e9); color: inherit; }
::-moz-selection { background: var(--color-primary, #0ea5e9); color: inherit; }
/* Modern Custom Scrollbar */
@media (min-width: 1024px) {
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-light, #f8fafc); }
.dark-mode ::-webkit-scrollbar-track { background: var(--color-bg-dark, #121214); }
::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--color-primary, #0ea5e9) 40%, transparent);
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-primary, #0ea5e9);
border: 2px solid transparent;
background-clip: padding-box;
}
}
/* Global Focus & Accessibility Polish */
:focus-visible { outline: 2px solid var(--color-primary, #0ea5e9); outline-offset: 4px; }
/* =============================================== */
/* TAILWIND TEXT-PRIMARY OVERRIDE */
/* =============================================== */
.text-primary {
--tw-text-opacity: 1 !important;
color: var(--color-primary) !important;
}
/* =============================================== */
/* CSS VARIABLES */
/* =============================================== */
:root {
--color-primary: #f59c10;
--color-primary-rgb: 245, 156, 16;
--color-primary-alpha: #f59c1014;
--color-primary-dark: #935d09;
--color-text-hero: #ffffff;
--color-text-heading: #3f3e3e;
--color-text-body: #6f6e6e;
--color-bg-light: #faf8f5;
--color-bg-dark: #121212;
--solid-bg1: #6f6e6e;
--solid-bg2: #f59c10;
--color-button-primary: #f59c10;
--color-button-secondary: #d97706;
--color-on-primary: #1a1205;
--color-primary-strong: #865508;
/* Yardımcı palet — açık altın temada kontrast / vurgu */
--color-assist-gold: #fece64;
--color-assist-coral: #ee7573;
--color-assist-peach: #f5a280;
--color-secondary-soft: #f1cd8b;
--topbar-bg: #121212;
--topbar-fg: #ffffff;
--font-family-base: 'Onest', sans-serif;
--hero-height: 200px;
--border-radius-base: 12px;
--color-border: rgba(0,0,0,0.1);
--color-heading: #3f3e3e;
--color-text: #6f6e6e;
--slider-overlay: 0.50;
--slider-text-scale: 1.00;
/* GLASSMOPRHISM VARIABLES */
--glass-bg: rgba(0, 0, 0, 0.08);
--glass-border: rgba(0, 0, 0, 0.12);
--glass-blur: blur(12px);
--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
--glass-hover-bg: rgba(0, 0, 0, 0.14);
--glass-hover-border: rgba(0, 0, 0, 0.25);
}
/* ===================================================================== */
/* MERKEZİ TEMA TOKENLARI (theme_engine.php) */
/* :root = açık tema, html.dark-mode = karanlık tema. Bileşenler bu */
/* değişkenleri tüketir; runtime tema geçişi cascade ile çözülür. */
/* ===================================================================== */
:root {
--bg-page: #faf8f5;
--sw-bg: #ffffff;
--sw-heading: #3f3e3e;
--sw-text: #6f6e6e;
--sw-muted: #64748b;
--sw-accent: #865508;
--sw-link: #865508;
--sw-border: rgba(15,23,42,0.10);
--sz-bg: rgba(245, 156, 16, 0.08);
--sz-grad: linear-gradient(165deg, rgba(255,255,255,0.10) 0%, transparent 45%, rgba(0,0,0,0.05) 100%);
--sz-heading: #0f172a;
--sz-text: #1e293b;
--sz-muted: #475569;
--sz-accent: #865508;
--sz-eyebrow: #5d431a;
--sz-marker: #865508;
--sz-link: #865508;
--sz-border: rgba(15,23,42,0.10);
--sd-heading: #ffffff;
--sd-text: rgba(255,255,255,0.90);
--sd-muted: rgba(255,255,255,0.66);
--sd-accent: #fbd293;
--sd-marker: #ffffff;
--sd-link: #fbd293;
--cw-bg: #ffffff;
--cw-border: rgba(15,23,42,0.08);
--cw-shadow: 0 8px 24px -6px rgba(0,0,0,0.10);
--cw-heading: #0f172a;
--cw-text: #334155;
--cw-muted: #64748b;
--cw-icon: #865508;
--cw-link: #865508;
--cz-bg: #ffffff;
--cz-border: rgba(15,23,42,0.08);
--cz-shadow: 0 8px 24px -6px rgba(0,0,0,0.10);
--cz-heading: #0f172a;
--cz-text: #334155;
--cz-muted: #64748b;
--cz-icon: #865508;
--cz-link: #865508;
--cd-bg: rgba(255,255,255,0.14);
--cd-border: rgba(255,255,255,0.32);
--cd-shadow: 0 8px 32px rgba(0,0,0,0.12);
--cd-heading: #ffffff;
--cd-text: rgba(255,255,255,0.92);
--cd-muted: rgba(255,255,255,0.72);
--cd-icon: #ffffff;
--cd-link: #ffffff;
--form-bg: #ffffff;
--form-border: rgba(15,23,42,0.16);
--form-shadow: 0 14px 40px rgba(15,23,42,0.10);
--form-heading: #0f172a;
--form-text: #475569;
--form-input-bg: #ffffff;
--form-input-text: #0f172a;
--form-input-border: #94a3b8;
--form-placeholder: rgba(15,23,42,0.45);
--form-kvkk-bg: #f1f5f9;
--form-kvkk-text: #334155;
--cc-bg: #ffffff;
--cc-border: rgba(15,23,42,0.12);
--cc-shadow: 0 10px 30px rgba(15,23,42,0.08);
--cc-text: #0f172a;
--cc-muted: #475569;
--cc-link-bg: #f8fafc;
--cc-link-border: #cbd5e1;
--cc-icon: #f59c10;
--cc-link-hover-bg: rgba(245, 156, 16, 0.10);
--cc-link-hover-border: #f59c10;
--cc-link-hover-text: #865508;
--cc-link-hover-icon: #865508;
--cc-link-hover-shadow: 0 10px 26px -6px rgba(15,23,42,0.22);
--brand: #f59c10;
--brand-strong: #865508;
--brand-soft: #fbd293;
--color-on-primary: #1a1205;
}
html.dark-mode {
--bg-page: #121214;
--sw-bg: #1c1c20;
--sw-heading: #ffffff;
--sw-text: rgba(255,255,255,0.90);
--sw-muted: rgba(255,255,255,0.66);
--sw-accent: #fbd293;
--sw-link: #fbd293;
--sw-border: rgba(255,255,255,0.18);
--sz-bg: #2b2520;
--sz-grad: linear-gradient(165deg, rgba(0,0,0,0.20) 0%, transparent 60%);
--sz-heading: #ffffff;
--sz-text: rgba(255,255,255,0.90);
--sz-muted: rgba(255,255,255,0.66);
--sz-accent: #fbd293;
--sz-eyebrow: #ffffff;
--sz-marker: #ffffff;
--sz-link: #fbd293;
--sz-border: rgba(255,255,255,0.18);
--sd-heading: #ffffff;
--sd-text: rgba(255,255,255,0.90);
--sd-muted: rgba(255,255,255,0.66);
--sd-accent: #fbd293;
--sd-marker: #ffffff;
--sd-link: #fbd293;
--cw-bg: #303038;
--cw-border: rgba(255,255,255,0.11);
--cw-shadow: 0 12px 32px -10px rgba(0,0,0,0.55);
--cw-heading: #f4f4f5;
--cw-text: #c8c8d0;
--cw-muted: #9c9ca6;
--cw-icon: #fbd293;
--cw-link: #fbd293;
--cz-bg: #303038;
--cz-border: rgba(255,255,255,0.11);
--cz-shadow: 0 12px 32px -10px rgba(0,0,0,0.55);
--cz-heading: #f4f4f5;
--cz-text: #c8c8d0;
--cz-muted: #9c9ca6;
--cz-icon: #fbd293;
--cz-link: #fbd293;
--cd-bg: #303038;
--cd-border: rgba(255,255,255,0.11);
--cd-shadow: 0 12px 32px -10px rgba(0,0,0,0.55);
--cd-heading: #f4f4f5;
--cd-text: #c8c8d0;
--cd-muted: #9c9ca6;
--cd-icon: #fbd293;
--cd-link: #fbd293;
--form-bg: #25252b;
--form-border: rgba(255,255,255,0.11);
--form-shadow: 0 16px 44px rgba(0,0,0,0.45);
--form-heading: #f4f4f5;
--form-text: #c8c8d0;
--form-input-bg: #121214;
--form-input-text: #f4f4f5;
--form-input-border: rgba(255,255,255,0.14);
--form-placeholder: rgba(255,255,255,0.38);
--form-kvkk-bg: rgba(255,255,255,0.06);
--form-kvkk-text: #c8c8d0;
--cc-bg: #25252b;
--cc-border: rgba(255,255,255,0.11);
--cc-shadow: 0 12px 34px rgba(0,0,0,0.45);
--cc-text: #f4f4f5;
--cc-muted: #9c9ca6;
--cc-link-bg: #303038;
--cc-link-border: rgba(255,255,255,0.12);
--cc-icon: #fbd293;
--cc-link-hover-bg: #3a3a44;
--cc-link-hover-border: #fbd293;
--cc-link-hover-text: #fbd293;
--cc-link-hover-icon: #fbd293;
--cc-link-hover-shadow: 0 10px 26px -6px rgba(0,0,0,0.45);
--brand: #f59c10;
--brand-strong: #865508;
--brand-soft: #fbd293;
--color-on-primary: #1a1205;
}
/* =============================================== */
/* SLIDER — karartma & orta öğe boyutu */
/* =============================================== */
#home .slider-dim-gradient.slider-dim-left {
background: linear-gradient(to right,
rgba(0, 0, 0, var(--slider-overlay)),
rgba(0, 0, 0, calc(var(--slider-overlay) * 0.40)),
transparent) !important;
}
#home .slider-dim-gradient.slider-dim-center {
background: linear-gradient(to top,
rgba(0, 0, 0, var(--slider-overlay)),
rgba(0, 0, 0, calc(var(--slider-overlay) * 0.40)),
transparent) !important;
}
#home .slider-dim-flat {
background: rgba(0, 0, 0, calc(var(--slider-overlay) * 0.20)) !important;
}
#home .slider-content-inner {
transform: scale(var(--slider-text-scale));
transform-origin: center center;
}
#home .slider-content-inner.is-left {
transform-origin: left center;
}
@media (max-width: 767px) {
#home .slider-content-inner {
transform: none !important;
transform-origin: left bottom !important;
}
#home .slider-content-inner.is-left {
transform: none !important;
transform-origin: left bottom !important;
}
}
/* =============================================== */
/* ZEBRA STRİPİNG - MODERN GLASS LOGIC */
/* =============================================== */
/* ===================================================================== */
/* TOKEN TÜKETİCİ KATMANI — BÖLÜM ZEMİNLERİ & METİN */
/* Renkler theme_engine token'larından gelir; tema/mod cascade ile çözülür*/
/* ===================================================================== */
/* Bölüm zeminleri */
.bg-zebra {
background-color: var(--sz-bg) !important;
background-image: var(--sz-grad) !important;
}
section.bg-white {
background-color: var(--sw-bg) !important;
}
/* ── bg-white bölüm metni ── */
section.bg-white .text-heading,
section.bg-white h1, section.bg-white h2, section.bg-white h3,
section.bg-white h4, section.bg-white h5, section.bg-white h6 {
color: var(--sw-heading) !important;
}
section.bg-white .text-body,
section.bg-white p:not(.text-primary):not(.text-white),
section.bg-white li, section.bg-white td, section.bg-white th,
section.bg-white .prose, section.bg-white .prose p, section.bg-white .prose li {
color: var(--sw-text) !important;
}
section.bg-white .text-primary,
section.bg-white span.text-primary,
section.bg-white .text-primary.uppercase {
color: var(--sw-accent) !important;
opacity: 1 !important;
}
section.bg-white .prose a { color: var(--sw-link) !important; }
/* ── bg-zebra bölüm metni ── */
.bg-zebra .text-heading,
.bg-zebra h1, .bg-zebra h2, .bg-zebra h3, .bg-zebra h4, .bg-zebra h5, .bg-zebra h6 {
color: var(--sz-heading) !important;
}
.bg-zebra .text-body,
.bg-zebra p:not(.text-primary):not(.text-white),
.bg-zebra li, .bg-zebra td, .bg-zebra th,
.bg-zebra .prose, .bg-zebra .prose p, .bg-zebra .prose li {
color: var(--sz-text) !important;
}
.bg-zebra .prose ul>li::marker,
.bg-zebra .prose ol>li::marker,
.bg-zebra .prose li::marker,
.bg-zebra li::marker {
color: var(--sz-marker) !important;
}
.bg-zebra .text-primary,
.bg-zebra span.text-primary,
.bg-zebra h2.text-primary {
color: var(--sz-accent) !important;
opacity: 1 !important;
}
/* Küçük üst başlık (eyebrow): zemin marka renginde olduğundan kesin ayrışan ton */
.bg-zebra .text-primary.uppercase,
.bg-zebra .uppercase.text-primary,
section.bg-zebra .text-primary.uppercase {
color: var(--sz-eyebrow) !important;
opacity: 1 !important;
}
.bg-zebra .prose a {
color: var(--sz-link) !important;
border-bottom-color: var(--sz-link) !important;
}
/* ── bg-slate-900 / koyu bölüm metni ── */
section.bg-slate-900 .text-heading,
section.bg-slate-900 h1, section.bg-slate-900 h2, section.bg-slate-900 h3,
section.bg-slate-900 h4, section.bg-slate-900 h5, section.bg-slate-900 h6,
section.bg-slate-900 .prose h1, section.bg-slate-900 .prose h2,
section.bg-slate-900 .prose h3, section.bg-slate-900 .prose h4 {
color: var(--sd-heading) !important;
}
section.bg-slate-900 .text-body,
section.bg-slate-900 p:not(.text-primary):not(.text-white),
section.bg-slate-900 li, section.bg-slate-900 td, section.bg-slate-900 th,
section.bg-slate-900 .prose, section.bg-slate-900 .prose p, section.bg-slate-900 .prose li {
color: var(--sd-text) !important;
}
section.bg-slate-900 .prose ul>li::marker,
section.bg-slate-900 .prose ol>li::marker,
section.bg-slate-900 .prose li::marker {
color: var(--sd-marker) !important;
}
section.bg-slate-900 .text-primary,
section.bg-slate-900 .text-primary.uppercase {
color: var(--sd-accent) !important;
opacity: 1 !important;
}
section.bg-slate-900 .prose a { color: var(--sd-link) !important; }
/* ===================================================================== */
/* TOKEN TÜKETİCİ KATMANI — BİLGİ KARTLARI (Değer/İstatistik/Tarihçe) */
/* Kartlar bulundukları bölüme göre bağlamsal token tüketir; tema değeri */
/* :root / html.dark-mode'da otomatik değişir. */
/* ===================================================================== */
.bg-white .value-card, .bg-white .stat-card, .bg-white .timeline-card,
.bg-zebra .value-card, .bg-zebra .stat-card, .bg-zebra .timeline-card,
.bg-slate-900 .value-card, .bg-slate-900 .stat-card, .bg-slate-900 .timeline-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Beyaz bölümdeki bilgi kartları */
.bg-white .value-card, .bg-white .stat-card, .bg-white .timeline-card {
background-color: var(--cw-bg) !important;
border: 1px solid var(--cw-border) !important;
box-shadow: var(--cw-shadow) !important;
}
.bg-white .value-card .value-title, .bg-white .value-card h3,
.bg-white .stat-card .stat-number, .bg-white .stat-card h3,
.bg-white .timeline-card .timeline-title, .bg-white .timeline-card h3 {
color: var(--cw-heading) !important; text-shadow: none !important;
}
.bg-white .value-card .value-desc, .bg-white .value-card p,
.bg-white .stat-card .stat-label, .bg-white .stat-card p,
.bg-white .timeline-card .timeline-desc, .bg-white .timeline-card p {
color: var(--cw-text) !important;
}
.bg-white .value-card i, .bg-white .stat-card i, .bg-white .timeline-card i { color: var(--cw-icon) !important; }
/* Zebra bölümdeki bilgi kartları */
.bg-zebra .value-card, .bg-zebra .stat-card, .bg-zebra .timeline-card {
background-color: var(--cz-bg) !important;
border: 1px solid var(--cz-border) !important;
box-shadow: var(--cz-shadow) !important;
}
.bg-zebra .value-card .value-title, .bg-zebra .value-card h3,
.bg-zebra .stat-card .stat-number, .bg-zebra .stat-card h3,
.bg-zebra .timeline-card .timeline-title, .bg-zebra .timeline-card h3 {
color: var(--cz-heading) !important; text-shadow: none !important;
}
.bg-zebra .value-card .value-desc, .bg-zebra .value-card p,
.bg-zebra .stat-card .stat-label, .bg-zebra .stat-card p,
.bg-zebra .timeline-card .timeline-desc, .bg-zebra .timeline-card p {
color: var(--cz-text) !important;
}
.bg-zebra .value-card i, .bg-zebra .stat-card i, .bg-zebra .timeline-card i { color: var(--cz-icon) !important; }
/* Koyu bölümdeki bilgi kartları */
.bg-slate-900 .value-card, .bg-slate-900 .stat-card, .bg-slate-900 .timeline-card {
background-color: var(--cd-bg) !important;
border: 1px solid var(--cd-border) !important;
box-shadow: var(--cd-shadow) !important;
}
.bg-slate-900 .value-card .value-title, .bg-slate-900 .value-card h3,
.bg-slate-900 .stat-card .stat-number, .bg-slate-900 .stat-card h3,
.bg-slate-900 .timeline-card .timeline-title, .bg-slate-900 .timeline-card h3 {
color: var(--cd-heading) !important; text-shadow: none !important;
}
.bg-slate-900 .value-card .value-desc, .bg-slate-900 .value-card p,
.bg-slate-900 .stat-card .stat-label, .bg-slate-900 .stat-card p,
.bg-slate-900 .timeline-card .timeline-desc, .bg-slate-900 .timeline-card p {
color: var(--cd-text) !important;
}
.bg-slate-900 .value-card i, .bg-slate-900 .stat-card i, .bg-slate-900 .timeline-card i { color: var(--cd-icon) !important; }
/* ===================================================================== */
/* TOKEN TÜKETİCİ KATMANI — MEDYA KARTLARI (ürün/içerik/kategori/video) */
/* ===================================================================== */
/* Medya kartları: bölüm kart token'ı (--cz-*/--cd-*). Yoğun/turuncu zebra'da
cam yüzey + açık metin; açık zebra'da opak beyaz + koyu metin. */
.bg-zebra .product-card .text-heading, .bg-zebra .product-card h2, .bg-zebra .product-card h3, .bg-zebra .product-card h4,
.bg-zebra .content-card .text-heading, .bg-zebra .content-card h2, .bg-zebra .content-card h3, .bg-zebra .content-card h4,
.bg-zebra .video-card h3, .bg-zebra .katalog-card h3,
.bg-zebra article.product-card .text-heading, .bg-zebra article.video-card h3, .bg-zebra article.katalog-card h3 {
color: var(--cz-heading) !important; text-shadow: none !important;
}
.bg-slate-900 .product-card .text-heading, .bg-slate-900 .product-card h3,
.bg-slate-900 .content-card .text-heading, .bg-slate-900 .content-card h3,
.bg-slate-900 .video-card h3, .bg-slate-900 .katalog-card h3 {
color: var(--cd-heading) !important; text-shadow: none !important;
}
.bg-zebra .product-card p, .bg-zebra .product-card .text-body, .bg-zebra .content-card p, .bg-zebra .content-card .text-body,
.bg-zebra .video-card p, .bg-zebra .katalog-card p {
color: var(--cz-text) !important;
}
.bg-slate-900 .product-card p, .bg-slate-900 .content-card p, .bg-slate-900 .video-card p, .bg-slate-900 .katalog-card p {
color: var(--cd-text) !important;
}
.bg-zebra .product-card .text-primary, .bg-zebra .content-card .text-primary,
.bg-zebra .video-card .text-primary, .bg-zebra .katalog-card .text-primary {
color: var(--cz-icon) !important; opacity: 1 !important;
}
.bg-slate-900 .product-card .text-primary, .bg-slate-900 .content-card .text-primary {
color: var(--cd-icon) !important; opacity: 1 !important;
}
/* Açık solid/altın zemin emniyet ağı — data-solid-all koyu-tema varsayımlarını düzelt */
html[data-zebra-surface="light"] .bg-zebra .text-heading,
html[data-zebra-surface="light"] .bg-zebra h1,
html[data-zebra-surface="light"] .bg-zebra h2,
html[data-zebra-surface="light"] .bg-zebra h3,
html[data-zebra-surface="light"] .bg-zebra h4 {
color: var(--sz-heading, #0f172a) !important;
}
html[data-zebra-surface="light"] .bg-zebra .text-body,
html[data-zebra-surface="light"] .bg-zebra p:not(.text-primary):not(.text-white) {
color: var(--sz-text, #1e293b) !important;
}
/* Hero asla açık-zemin h1/p kurallarından siyah almasın */
html[data-zebra-surface="light"] .hero-section h1,
html[data-zebra-surface="light"] .hero-section h2,
html[data-zebra-surface="light"] .hero-section-solid h1,
html[data-zebra-surface="light"] .legal-banner h1 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-zebra-surface="light"] .hero-section p,
html[data-zebra-surface="light"] .hero-section-solid p,
html[data-zebra-surface="light"] .legal-banner p {
color: rgba(255, 255, 255, 0.88) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}
html[data-zebra-surface="light"] .bg-zebra .text-primary {
color: var(--brand-strong, var(--color-primary-strong, #8a5a10)) !important;
}
html[data-zebra-surface="light"] .btn-primary,
html[data-zebra-surface="light"] a.btn-primary {
color: var(--color-on-primary, #1a1205) !important;
}
/* Slider koyu foto üzerinde siyah metin patlamasın */
html[data-zebra-surface="light"] #home .btn-primary,
html[data-zebra-surface="light"] #home a.btn-primary {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-zebra-surface="light"] section.bg-zebra .contact-card.is-glass-card::after,
html[data-zebra-surface="light"] section.bg-zebra .address-card.is-glass-card::after {
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
backdrop-filter: none !important;
}
html[data-zebra-surface="light"] section.bg-zebra .contact-card-title,
html[data-zebra-surface="light"] section.bg-zebra .contact-link-value,
html[data-zebra-surface="light"] section.bg-zebra .address-text {
color: #0f172a !important;
}
html[data-zebra-surface="light"] section.bg-zebra .contact-link-label,
html[data-zebra-surface="light"] section.bg-zebra .contact-link-icon {
color: #475569 !important;
}
html[data-zebra-surface="light"] section.bg-zebra .contact-link {
background: rgba(15, 23, 42, 0.04) !important;
border-color: rgba(15, 23, 42, 0.08) !important;
color: #0f172a !important;
}
/* SOLID ALL MODU - Her yer tema rengi */
/* =============================================== */
/* DARK MODE STİLLERİ */
/* Katmanlı kömür skala (tek düz antrasit değil) */
/* =============================================== */
html.dark-mode {
/* bg < surface < panel < elevated < hover */
--dm-bg: #121214;
--dm-surface: #1c1c20;
--dm-panel: #25252b;
--dm-elevated: #303038;
--dm-hover: #3a3a44;
--dm-border: #4a4a54;
--dm-border-soft: #34343c;
--dm-muted: #9c9ca6;
--dm-heading: #f4f4f5;
--dm-body: #c8c8d0;
--color-text-heading: var(--dm-heading);
--color-text-body: var(--dm-body);
--color-bg-light: var(--dm-surface);
--color-bg-dark: var(--dm-bg);
--color-border: rgba(255, 255, 255, 0.12);
--color-heading: var(--dm-heading);
--color-text: var(--dm-muted);
}
html.dark-mode body {
background-color: var(--dm-bg);
color: var(--dm-body);
}
/* Tailwind slate → katman map */
html.dark-mode .bg-slate-950,
html.dark-mode .dark\:bg-slate-950 { background-color: var(--dm-bg) !important; }
html.dark-mode .bg-slate-900,
html.dark-mode .dark\:bg-slate-900,
html.dark-mode section.bg-slate-900 { background-color: var(--dm-bg) !important; }
html.dark-mode .bg-slate-800,
html.dark-mode .dark\:bg-slate-800 { background-color: var(--dm-surface) !important; }
html.dark-mode .bg-slate-700,
html.dark-mode .dark\:bg-slate-700 { background-color: var(--dm-panel) !important; }
html.dark-mode .bg-slate-600,
html.dark-mode .dark\:bg-slate-600 { background-color: var(--dm-elevated) !important; }
html.dark-mode .border-slate-700,
html.dark-mode .dark\:border-slate-700,
html.dark-mode .border-slate-800,
html.dark-mode .dark\:border-slate-800 { border-color: var(--dm-border-soft) !important; }
/* Bölüm katmanları: sayfa üzerinde “beyaz” bölüm yükselir; zebra token’dan gelir */
html.dark-mode section.bg-white {
background-color: var(--dm-surface) !important;
}
/* =============================================== */
/* GLOBAL KART HOVER — Tema Rengi İnce Gölge */
/* =============================================== */
.card,
.katalog-card,
.video-card,
.reference-item,
.search-result-card,
.stat-card,
.team-card,
.timeline-card,
.value-card,
.guest-review-card,
.expo-quick-card,
article[data-animate]:not(.content-card):not(.product-card) {
transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease, background-color 0.35s ease !important;
}
.content-card,
.product-card {
transition: border-color 0.2s ease !important;
}
.card:hover,
.katalog-card:hover,
.video-card:hover,
.reference-item:hover,
.search-result-card:hover,
.stat-card:hover,
.team-card:hover,
.timeline-card:hover,
.value-card:hover,
.guest-review-card:hover,
.expo-quick-card:hover,
article[data-animate]:not(.content-card):not(.product-card):hover {
box-shadow: 0 8px 24px -4px rgba(245, 156, 16, 0.18) !important;
}
/* İçerik kartı parçaları asla global kart gölgesi almasın (cms-card-title, content-card__*) */
.content-card [class*="content-card__"],
.product-card [class*="content-card__"],
.content-card .cms-card-title,
.content-card .cms-card-title-inner,
.product-card .cms-card-title,
.product-card .cms-card-title-inner,
.content-card [class*="content-card__"]:hover,
.product-card [class*="content-card__"]:hover,
.content-card .cms-card-title:hover,
.content-card .cms-card-title-inner:hover,
.product-card .cms-card-title:hover,
.product-card .cms-card-title-inner:hover {
box-shadow: none !important;
filter: none !important;
transform: none !important;
}
article.content-card:hover,
article.product-card:hover,
.content-card:hover,
.product-card:hover {
box-shadow: none !important;
transform: none !important;
filter: none !important;
}
/* Dark mode için de aynı */
html.dark-mode .card:hover,
html.dark-mode .katalog-card:hover,
html.dark-mode .video-card:hover,
html.dark-mode .reference-item:hover,
html.dark-mode .search-result-card:hover,
html.dark-mode .stat-card:hover,
html.dark-mode .team-card:hover,
html.dark-mode .timeline-card:hover,
html.dark-mode .value-card:hover,
html.dark-mode .guest-review-card:hover,
html.dark-mode .expo-quick-card:hover,
html.dark-mode article[data-animate]:not(.content-card):not(.product-card):hover {
box-shadow: 0 8px 24px -4px rgba(245, 156, 16, 0.28) !important;
}
html.dark-mode article.content-card:hover,
html.dark-mode article.product-card:hover,
html.dark-mode .content-card:hover,
html.dark-mode .product-card:hover {
box-shadow: none !important;
transform: none !important;
filter: none !important;
}
/* ─── GLOBAL: Buton Tema Rengi Gölgesi ─── */
.btn-primary {
box-shadow: 0 4px 14px rgba(245, 156, 16, 0.30) !important;
transition: box-shadow 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
}
.btn-primary:hover {
box-shadow: 0 6px 20px rgba(245, 156, 16, 0.45) !important;
}
.btn-secondary {
box-shadow: 0 4px 12px rgba(245, 156, 16, 0.20) !important;
transition: box-shadow 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
}
.btn-secondary:hover {
box-shadow: 0 6px 18px rgba(245, 156, 16, 0.35) !important;
}
/* Tüm başlıklar - primary renk hariç (bölüm kuralları daha spesifik override eder) */
html.dark-mode h1:not(.text-primary),
html.dark-mode h2:not(.text-primary),
html.dark-mode h3:not(.text-primary),
html.dark-mode h4:not(.text-primary),
html.dark-mode h5:not(.text-primary),
html.dark-mode h6:not(.text-primary),
html.dark-mode .text-heading:not(.text-primary) {
color: #f1f5f9 !important;
}
/* Primary renk dark mode'da da korunsun (Sadece normal zeminlerde) */
html.dark-mode .text-primary {
color: var(--color-primary);
}
/* Tüm paragraflar ve body text - primary hariç */
html.dark-mode p:not(.text-primary),
html.dark-mode span:not(.text-primary):not(.uppercase),
html.dark-mode li:not(.text-primary),
html.dark-mode td:not(.text-primary),
html.dark-mode th:not(.text-primary),
html.dark-mode label:not(.text-primary),
html.dark-mode .text-body:not(.text-primary) {
color: #cbd5e1;
}
/* Küçük üst başlıklar primary renkte kalsın (Sadece normal zeminlerde) */
html.dark-mode span.text-primary,
html.dark-mode span.uppercase.text-primary {
color: var(--color-primary);
}
/* Bold / extrabold — bölüm zeminine göre token (beyaz zeminde soluk metin yok) */
html.dark-mode section.bg-white strong:not(.text-primary),
html.dark-mode section.bg-white b:not(.text-primary),
html.dark-mode section.bg-white .font-bold:not(.text-primary),
html.dark-mode section.bg-white .font-semibold:not(.text-primary),
html.dark-mode section.bg-white .font-extrabold:not(.text-primary),
html.dark-mode section.bg-white .font-black:not(.text-primary),
html.dark-mode section.bg-white .prose strong,
html.dark-mode section.bg-white .prose b {
color: var(--sw-heading) !important;
}
html.dark-mode section.bg-zebra strong:not(.text-primary),
html.dark-mode section.bg-zebra b:not(.text-primary),
html.dark-mode section.bg-zebra .font-bold:not(.text-primary),
html.dark-mode section.bg-zebra .font-semibold:not(.text-primary),
html.dark-mode section.bg-zebra .font-extrabold:not(.text-primary),
html.dark-mode section.bg-zebra .font-black:not(.text-primary),
html.dark-mode section.bg-zebra .prose strong,
html.dark-mode section.bg-zebra .prose b {
color: var(--sz-heading) !important;
}
html.dark-mode section:not(.bg-white):not(.bg-zebra) strong:not(.text-primary),
html.dark-mode section:not(.bg-white):not(.bg-zebra) b:not(.text-primary),
html.dark-mode section:not(.bg-white):not(.bg-zebra) .font-extrabold:not(.text-primary),
html.dark-mode section:not(.bg-white):not(.bg-zebra) .prose strong,
html.dark-mode section:not(.bg-white):not(.bg-zebra) .prose b {
color: var(--sd-heading, #f1f5f9) !important;
}
/* Prose dark mode - kapsamlı */
html.dark-mode .prose {
color: #cbd5e1 !important;
}
html.dark-mode .prose h1,
html.dark-mode .prose h2,
html.dark-mode .prose h3,
html.dark-mode .prose h4,
html.dark-mode .prose h5,
html.dark-mode .prose h6 {
color: #f1f5f9 !important;
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode .prose p {
color: #cbd5e1 !important;
}
html.dark-mode .prose a {
color: var(--color-primary) !important;
}
html.dark-mode .prose ul li::marker,
html.dark-mode .prose ol li::marker {
color: #ffffff !important;
}
html.dark-mode .prose blockquote {
border-left-color: var(--color-primary) !important;
color: #94a3b8 !important;
}
/* Section içindeki tüm metinler */
html.dark-mode section strong,
html.dark-mode section b,
html.dark-mode div strong,
html.dark-mode div b,
html.dark-mode p strong,
html.dark-mode p b {
color: #f1f5f9 !important;
}
/* Slate ve gray renk sınıfları */
html.dark-mode .text-slate-600,
html.dark-mode .text-slate-700,
html.dark-mode .text-gray-600,
html.dark-mode .text-gray-700 {
color: #94a3b8 !important;
}
html.dark-mode .text-slate-800,
html.dark-mode .text-slate-900,
html.dark-mode .text-gray-800,
html.dark-mode .text-gray-900,
html.dark-mode .text-black {
color: #f1f5f9 !important;
}
html.dark-mode .text-slate-500,
html.dark-mode .text-gray-500 {
color: #64748b !important;
}
/* Arka plan renkleri */
html.dark-mode .bg-white:not(.value-card):not(.team-card) {
background-color: var(--dm-bg, #121214) !important;
}
html.dark-mode .value-card,
html.dark-mode .team-card {
background-color: var(--dm-surface, #1c1c20) !important;
}
html.dark-mode .bg-slate-50,
html.dark-mode .bg-gray-50 {
background-color: var(--dm-bg, #121214) !important;
}
html.dark-mode .bg-slate-100,
html.dark-mode .bg-gray-100 {
background-color: var(--dm-bg, #121214) !important;
}
html.dark-mode .bg-slate-200,
html.dark-mode .bg-gray-200 {
background-color: var(--dm-border, #4a4a54) !important;
}
/* Border renkleri */
html.dark-mode .border,
html.dark-mode .border-slate-200,
html.dark-mode .border-gray-200,
html.dark-mode .border-slate-100,
html.dark-mode .border-gray-100 {
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode .border-slate-300,
html.dark-mode .border-gray-300 {
border-color: #525252 !important;
}
/* Kartlar */
html.dark-mode .product-card,
html.dark-mode .content-card,
html.dark-mode .katalog-card,
html.dark-mode .video-card,
html.dark-mode .reference-item {
border-color: var(--dm-border, #4a4a54);
}
html.dark-mode #videolar .bg-white,
html.dark-mode article[data-animate]:not(.content-card):not(.product-card) {
background-color: var(--dm-elevated, #303038) !important;
border: 1px solid var(--dm-border-soft, #34343c) !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}
html.dark-mode article.content-card,
html.dark-mode article.product-card {
box-shadow: none !important;
}
html.dark-mode .product-card:hover,
html.dark-mode .content-card:hover,
html.dark-mode .katalog-card:hover,
html.dark-mode .video-card:hover,
html.dark-mode #kataloglar .bg-white:hover,
html.dark-mode #videolar .bg-white:hover,
html.dark-mode article[data-animate]:not(.content-card):not(.product-card):hover {
border-color: var(--color-primary) !important;
box-shadow: none !important;
}
html.dark-mode .product-card h3,
html.dark-mode .product-card p,
html.dark-mode .content-card h3,
html.dark-mode .content-card p,
html.dark-mode .katalog-card h3,
html.dark-mode .katalog-card p,
html.dark-mode .video-card h3,
html.dark-mode .video-card p,
html.dark-mode .reference-item p,
html.dark-mode #kataloglar .bg-white h3,
html.dark-mode #kataloglar .bg-white p,
html.dark-mode #videolar .bg-white h3,
html.dark-mode #videolar .bg-white p,
html.dark-mode article[data-animate] h3,
html.dark-mode article[data-animate] p {
/* Bölüm FINAL token kuralları (--cw-*/--cz-*/--cd-*) geçsin diye
burada sabit renk yok; yalnızca fallback */
color: var(--cd-heading, #e2e8f0);
}
html.dark-mode section.bg-white .product-card h3,
html.dark-mode section.bg-white .content-card h3,
html.dark-mode section.bg-white .katalog-card h3,
html.dark-mode section.bg-white .video-card h3,
html.dark-mode section.bg-white article[data-animate] h3 {
color: var(--cw-heading) !important;
}
html.dark-mode section.bg-white .product-card p,
html.dark-mode section.bg-white .content-card p,
html.dark-mode section.bg-white .katalog-card p,
html.dark-mode section.bg-white .video-card p {
color: var(--cw-text) !important;
}
html.dark-mode section.bg-zebra .product-card h3,
html.dark-mode section.bg-zebra .content-card h3,
html.dark-mode section.bg-zebra .katalog-card h3,
html.dark-mode section.bg-zebra .video-card h3,
html.dark-mode section.bg-zebra article[data-animate] h3 {
color: var(--cz-heading) !important;
}
html.dark-mode section.bg-zebra .product-card p,
html.dark-mode section.bg-zebra .content-card p,
html.dark-mode section.bg-zebra .katalog-card p,
html.dark-mode section.bg-zebra .video-card p {
color: var(--cz-text) !important;
}
html.dark-mode .product-card .text-body,
html.dark-mode .content-card .text-body,
html.dark-mode .katalog-card .text-body,
html.dark-mode .video-card .text-body,
html.dark-mode article[data-animate] .text-body {
color: #ffffff !important;
}
/* Referans logoları dark mode'da daha görünür */
html.dark-mode .reference-item {
border-color: rgba(255,255,255,0.25) !important;
background-color: var(--dm-surface, #1c1c20) !important;
}
html.dark-mode .reference-item img {
filter: invert(1) grayscale(100%);
opacity: 0.75;
transition: filter 0.4s ease, opacity 0.4s ease;
}
html.dark-mode .reference-item:hover img {
filter: invert(0) grayscale(0%);
opacity: 1;
}
/* Gölgeler */
html.dark-mode .shadow-md,
html.dark-mode .shadow-lg,
html.dark-mode .shadow-xl {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3) !important;
}
/* Mobil menü */
html.dark-mode #mobile-menu {
background-color: var(--dm-surface, #1c1c20) !important;
}
html.dark-mode #mobile-menu .border-gray-200,
html.dark-mode #mobile-menu .border-gray-100 {
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode .mobile-nav-link {
color: #e2e8f0 !important;
}
html.dark-mode #mobile-menu .bg-slate-50 {
background-color: var(--dm-bg, #121214) !important;
}
/* Mobil menü logo - dark mode */
.mobile-logo-text {
color: var(--color-text-heading, #1e293b);
}
html.dark-mode .mobile-logo-normal {
display: none !important;
}
html.dark-mode .mobile-logo-white {
display: block !important;
}
html.dark-mode .mobile-logo-text {
color: #f1f5f9 !important;
}
/* Footer */
html.dark-mode body > footer {
background-color: var(--dm-surface, #1c1c20) !important;
overflow: hidden !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
box-shadow:
0 -28px 56px rgba(0, 0, 0, 0.55),
0 -8px 24px rgba(0, 0, 0, 0.35) !important;
border-top: none !important;
}
html.dark-mode body > footer .bg-slate-900,
html.dark-mode body > footer .bg-slate-800,
html.dark-mode body > footer [class*="bg-slate"] {
background-color: transparent !important;
}
html.dark-mode body > footer .footer-bottom {
background: rgba(0, 0, 0, 0.32) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html.dark-mode body > footer .footer-top-accent {
height: 2px !important;
background: var(--color-primary, #f59c10) !important;
box-shadow: 0 0 22px rgba(var(--color-primary-rgb, 245, 156, 16), 0.55) !important;
}
/* Header — üstte cam blur (light ile aynı); scrolled’da opak kömür */
html.dark-mode #header:not(.scrolled) {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html.dark-mode #header:not(.scrolled) .nav-glass-bar {
background: rgba(18, 18, 20, 0.42) !important;
background-color: rgba(18, 18, 20, 0.42) !important;
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
border-top: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28) !important;
}
html.dark-mode #header.scrolled {
background: var(--dm-bg, #121214) !important;
background-color: var(--dm-bg, #121214) !important;
}
html.dark-mode #header.scrolled .nav-glass-bar {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: none !important;
}
html.dark-mode #mobile-menu,
html.dark-mode #mobile-menu .sticky {
background-color: var(--dm-bg, #121214) !important;
}
html.dark-mode #mobile-menu .bg-slate-50,
html.dark-mode #mobile-menu .dark\:bg-slate-800,
html.dark-mode #mobile-menu .dark\:bg-slate-700,
html.dark-mode #mobile-menu .dark\:bg-slate-900 {
background-color: var(--dm-panel, #25252b) !important;
}
html.dark-mode .has-submenu .submenu,
html.dark-mode #overflow-dropdown {
background: var(--dm-elevated, #303038) !important;
border-color: var(--dm-border-soft, #34343c) !important;
}
/* Input ve form elemanları */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
background-color: var(--dm-bg, #121214) !important;
border-color: var(--dm-border-soft, #34343c) !important;
color: #e2e8f0 !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
color: #64748b !important;
}
/* Dark mode icon toggle */
html.dark-mode .dark-mode-icon-light {
display: none !important;
}
html.dark-mode .dark-mode-icon-dark {
display: inline-block !important;
}
/* Dark mode label toggle (mobil menü için) */
html.dark-mode .dark-mode-label-light {
display: none !important;
}
html.dark-mode .dark-mode-label-dark {
display: inline !important;
}
/* Mobil dark mode switch */
html.dark-mode .dark-mode-switch {
background-color: var(--color-primary) !important;
}
html.dark-mode .dark-mode-switch-dot {
transform: translateX(16px);
}
/* =============================================== */
/* NAVBAR DARK MODE */
/* =============================================== */
html.dark-mode #header.scrolled {
background-color: rgba(15, 23, 42, 0.95) !important;
border-bottom-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode #header.scrolled .nav-link {
color: #e2e8f0 !important;
}
html.dark-mode #header.scrolled .nav-link:hover {
color: var(--color-primary) !important;
}
html.dark-mode #header.scrolled .logo-text {
color: #f1f5f9 !important;
}
/* Dark mode'da scrolled header'da beyaz logo göster */
html.dark-mode #header.scrolled .logo-normal {
display: none !important;
}
html.dark-mode #header.scrolled .logo-white {
display: block !important;
}
/* Hamburger menü dark mode */
html.dark-mode #header.scrolled .hamburger-line {
background-color: #f1f5f9 !important;
}
/* Overflow dropdown dark mode */
html.dark-mode #overflow-dropdown {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode #overflow-dropdown a.overflow-dropdown-link {
color: #e2e8f0 !important;
}
html.dark-mode #overflow-dropdown a.overflow-dropdown-link:hover,
html.dark-mode #overflow-dropdown a.overflow-dropdown-link:focus-visible {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
}
html.dark-mode .overflow-submenu {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
}
/* Submenu dark mode */
html.dark-mode .submenu {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}
html.dark-mode .submenu::before {
background: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode .has-submenu:hover .submenu {
border-color: var(--color-primary) !important;
box-shadow:
0 0 0 4px rgba(var(--color-primary-rgb), 0.12),
0 12px 32px -4px rgba(var(--color-primary-rgb), 0.28) !important;
}
html.dark-mode .has-submenu:hover .submenu::before {
border-color: var(--color-primary) !important;
}
html.dark-mode .submenu-item {
color: #cbd5e1 !important;
}
html.dark-mode .submenu-item:hover {
background-color: rgba(255,255,255,0.08) !important;
color: #ffffff !important;
font-weight: 600;
border-left-color: #ffffff !important;
}
/* =============================================== */
/* SLIDER DARK MODE */
/* =============================================== */
html.dark-mode #home {
background-color: #1c1408 !important;
}
/* Slider dark mode */
html.dark-mode .slider-item {
background-color: transparent !important;
}
html.dark-mode .slider-content-wrapper {
background-color: transparent !important;
}
html.dark-mode .slider-item h1,
html.dark-mode .slider-item h2 {
color: #ffffff !important;
}
html.dark-mode .slider-item p {
color: #ffffff !important;
}
/* Hero section dark mode */
html.dark-mode .hero-section {
background-color: var(--dm-bg, #121214) !important;
}
html.dark-mode .hero-section h1 {
color: #ffffff !important;
}
html.dark-mode .hero-section p {
color: rgba(255,255,255,0.85) !important;
}
/* Page banner dark mode */
html.dark-mode .page-banner {
background-color: var(--dm-surface, #1c1c20) !important;
}
html.dark-mode .page-banner h1 {
color: #f1f5f9 !important;
}
html.dark-mode .page-banner p,
html.dark-mode .page-banner .breadcrumb {
color: #94a3b8 !important;
}
/* Pattern slider dark mode */
html.dark-mode .bg-pattern-slider {
background-color: var(--dm-bg, #121214) !important;
}
html.dark-mode .bg-pattern-slider h1,
html.dark-mode .bg-pattern-slider h2,
html.dark-mode .bg-pattern-slider .text-slate-900 {
color: #f1f5f9 !important;
}
html.dark-mode .bg-pattern-slider p,
html.dark-mode .bg-pattern-slider .text-slate-600 {
color: #94a3b8 !important;
}
/* Slider buton dark mode */
html.dark-mode .bg-pattern-slider a.bg-slate-900 {
background-color: var(--color-primary) !important;
}
/* Slider indicators dark mode */
html.dark-mode .slider-indicator:not(.active) {
background-color: rgba(255, 255, 255, 0.3) !important;
}
/* =============================================== */
/* SECTION VE SAYFA DARK MODE */
/* =============================================== */
/* Section başlıkları — bölüm token'ı (beyaz zeminde soluk #f1f5f9 zorlanmasın) */
html.dark-mode section.bg-white h2,
html.dark-mode section.bg-white h3,
html.dark-mode section.bg-white .text-heading,
html.dark-mode section.bg-white .text-2xl,
html.dark-mode section.bg-white .text-3xl,
html.dark-mode section.bg-white .text-4xl {
color: var(--sw-heading) !important;
}
html.dark-mode section.bg-zebra h2,
html.dark-mode section.bg-zebra h3,
html.dark-mode section.bg-zebra .text-heading,
html.dark-mode section.bg-zebra .text-2xl,
html.dark-mode section.bg-zebra .text-3xl,
html.dark-mode section.bg-zebra .text-4xl {
color: var(--sz-heading) !important;
}
html.dark-mode section.bg-slate-900 h2,
html.dark-mode section.bg-slate-900 h3,
html.dark-mode section.bg-slate-900 .text-heading,
html.dark-mode section:not(.bg-white):not(.bg-zebra) h2,
html.dark-mode section:not(.bg-white):not(.bg-zebra) h3,
html.dark-mode section:not(.bg-white):not(.bg-zebra) .text-heading {
color: var(--sd-heading, #f1f5f9) !important;
}
html.dark-mode section.bg-white p,
html.dark-mode section.bg-white .text-slate-600,
html.dark-mode section.bg-white .text-gray-600 {
color: var(--sw-text) !important;
}
html.dark-mode section.bg-zebra p,
html.dark-mode section.bg-zebra .text-slate-600,
html.dark-mode section.bg-zebra .text-gray-600 {
color: var(--sz-text) !important;
}
html.dark-mode section:not(.bg-white):not(.bg-zebra) p,
html.dark-mode section:not(.bg-white):not(.bg-zebra) .text-slate-600,
html.dark-mode section:not(.bg-white):not(.bg-zebra) .text-gray-600 {
color: var(--sd-text, #ffffff) !important;
}
/* İletişim kartları — .contact-card/.address-card cam ::after kullanır, buraya dahil etme */
html.dark-mode [class*="contact"] .bg-white:not(.contact-card):not(.address-card),
html.dark-mode #iletisim-bilgileri .bg-white,
html.dark-mode section .bg-white.border:not(.contact-card):not(.address-card) {
background-color: var(--dm-surface, #1c1c20) !important;
border: 1px solid var(--dm-border, #4a4a54) !important;
}
html.dark-mode section .bg-white.border:hover {
border-color: #525252 !important;
}
/* İletişim sayfası içindeki tüm bg-white kutular */
html.dark-mode main .bg-white.border-slate-200,
html.dark-mode main .bg-white.border {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode main .bg-white.border-slate-200:hover,
html.dark-mode main .bg-white.border:hover {
border-color: #525252 !important;
}
/* İletişim kartları içindeki bg-slate-50 alanlar */
html.dark-mode main .bg-slate-50 {
background-color: var(--dm-bg, #121214) !important;
}
/* Referanslar section */
html.dark-mode #referanslar,
html.dark-mode .references-section {
/* Zebra striping'e bırak - özel renk verme */
}
/* Galeri section */
html.dark-mode #galeri,
html.dark-mode .gallery-section {
/* Zebra striping'e bırak - özel renk verme */
}
/* İletişim section */
html.dark-mode #iletisim,
html.dark-mode .contact-section {
/* Zebra striping'e bırak - özel renk verme */
}
/* Harita container */
html.dark-mode .map-container {
border-color: var(--dm-border, #4a4a54) !important;
}
/* Breadcrumb */
html.dark-mode .breadcrumb,
html.dark-mode .breadcrumb a,
html.dark-mode nav[aria-label="breadcrumb"] {
color: #94a3b8 !important;
}
html.dark-mode .breadcrumb a:hover {
color: var(--color-primary) !important;
}
/* Arama modal */
html.dark-mode #search-modal .bg-white {
background-color: var(--dm-surface, #1c1c20) !important;
}
html.dark-mode #search-modal input {
background-color: var(--dm-bg, #121214) !important;
border-color: #525252 !important;
color: #e2e8f0 !important;
}
html.dark-mode #search-modal .border-b {
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode .search-result-item:hover {
background-color: var(--dm-border, #4a4a54) !important;
}
/* WhatsApp butonu */
html.dark-mode #whatsapp-button {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
/* Pagination */
html.dark-mode .pagination a,
html.dark-mode .pagination span {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
color: #e2e8f0 !important;
}
html.dark-mode .pagination a:hover {
background-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode .pagination .active {
background-color: var(--color-primary) !important;
color: #ffffff !important;
}
/* Pagination - nav içindeki linkler */
html.dark-mode nav[aria-label="Sayfalama"] a {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
color: #e2e8f0 !important;
}
html.dark-mode nav[aria-label="Sayfalama"] a:hover {
background-color: var(--dm-border, #4a4a54) !important;
color: var(--color-primary) !important;
}
html.dark-mode nav[aria-label="Sayfalama"] span.bg-primary {
background-color: var(--color-primary) !important;
color: #ffffff !important;
}
html.dark-mode nav[aria-label="Sayfalama"] span.text-slate-400 {
color: #64748b !important;
}
/* Detay sayfaları */
html.dark-mode .detail-page,
html.dark-mode .single-post,
html.dark-mode .single-product {
background-color: var(--dm-bg, #121214) !important;
}
/* Sidebar */
html.dark-mode aside,
html.dark-mode .sidebar {
background-color: transparent !important;
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode aside > div,
html.dark-mode .sidebar > div {
background-color: transparent !important;
border-color: var(--dm-border, #4a4a54) !important;
}
/* Kategori kartı - light ve dark mode'da tema rengi border */
aside .sticky > div {
border-color: var(--color-primary) !important;
}
html.dark-mode aside .sticky > div {
border-color: var(--color-primary) !important;
}
html.dark-mode aside h3,
html.dark-mode .sidebar h3 {
color: #f1f5f9 !important;
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode aside ul,
html.dark-mode .sidebar ul {
border-color: var(--dm-border, #4a4a54) !important;
}
/* Tags */
html.dark-mode .tag,
html.dark-mode [class*="tag"]:not([class*="instagram"]) {
background-color: var(--dm-border, #4a4a54) !important;
color: #e2e8f0 !important;
}
/* Badges */
html.dark-mode .badge {
background-color: var(--dm-border, #4a4a54) !important;
}
/* Alerts */
html.dark-mode .alert {
border-color: #525252 !important;
}
/* Accordion */
html.dark-mode .accordion-item {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode .accordion-button {
background-color: var(--dm-surface, #1c1c20) !important;
color: #e2e8f0 !important;
}
/* Tabs */
html.dark-mode .tab-button {
color: #94a3b8 !important;
}
html.dark-mode .tab-button.active {
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
}
/* Lightbox */
html.dark-mode #lightbox {
background-color: rgba(0, 0, 0, 0.95) !important;
}
/* Cookie consent */
html.dark-mode .cookie-consent {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
}
/* Cookie consent banner - ID ile */
html.dark-mode #cookie-consent-banner {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
}
/* Floating card layout dark mode */
html.dark-mode .product-card > div:last-child,
html.dark-mode .content-card > div:last-child {
background-color: var(--dm-surface, #1c1c20) !important;
}
/* Form section dark mode */
html.dark-mode form.bg-slate-50,
html.dark-mode .bg-slate-50 form {
background-color: var(--dm-surface, #1c1c20) !important;
}
/* İletişim formu container */
html.dark-mode #contact-form {
background-color: var(--dm-surface, #1c1c20) !important;
}
/* Select dropdown dark mode */
html.dark-mode select option {
background-color: var(--dm-surface, #1c1c20) !important;
color: #e2e8f0 !important;
}
/* Solid all — form select */
body select,
body select.bg-white {
background-color: transparent;
}
/* File input dark mode */
html.dark-mode input[type="file"] {
color: #94a3b8 !important;
}
html.dark-mode input[type="file"]::file-selector-button {
background-color: var(--dm-border, #4a4a54) !important;
color: #e2e8f0 !important;
border: none !important;
}
/* Arama sayfası dark mode */
html.dark-mode .search-filter-btn {
background-color: var(--dm-surface, #1c1c20) !important;
color: #e2e8f0 !important;
}
html.dark-mode .search-filter-btn:hover {
background-color: var(--dm-border, #4a4a54) !important;
}
/* Video kartları dark mode */
html.dark-mode .video-card {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
}
/* Katalog kartları dark mode */
html.dark-mode .catalog-card {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
}
/* Ürün detay sayfası dark mode */
html.dark-mode .product-detail-section {
background-color: var(--dm-bg, #121214) !important;
}
html.dark-mode .product-gallery-thumb {
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode .product-gallery-thumb.active {
border-color: var(--color-primary) !important;
}
/* Ürün detay iletişim butonları dark mode */
html.dark-mode .contact-btn--secondary {
color: #e2e8f0 !important;
border-color: rgba(226, 232, 240, 0.28) !important;
background-color: rgba(255, 255, 255, 0.04) !important;
}
html.dark-mode .contact-btn--secondary:hover {
border-color: rgba(226, 232, 240, 0.45) !important;
background-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark-mode .contact-btn--whatsapp:hover {
color: #25d366 !important;
border-color: rgba(37, 211, 102, 0.45) !important;
background-color: rgba(37, 211, 102, 0.08) !important;
}
html.dark-mode .contact-btn--primary {
color: #ffffff !important;
border-color: var(--color-primary) !important;
background-color: var(--color-primary) !important;
}
/* Anahtar kelimeler dark mode */
html.dark-mode .text-slate-500 {
color: #94a3b8 !important;
}
html.dark-mode .product-keywords {
color: #94a3b8 !important;
}
/* Ürün fiyat alanı dark mode */
html.dark-mode .bg-blue-50 {
background-color: rgba(59, 130, 246, 0.1) !important;
}
html.dark-mode .border-blue-400 {
border-color: rgba(59, 130, 246, 0.5) !important;
}
html.dark-mode .text-blue-600 {
color: #60a5fa !important;
}
html.dark-mode .text-blue-700 {
color: #93c5fd !important;
}
/* Table dark mode */
html.dark-mode table {
background-color: var(--dm-surface, #1c1c20) !important;
}
html.dark-mode th {
background-color: var(--dm-border, #4a4a54) !important;
color: #f1f5f9 !important;
}
html.dark-mode td {
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode tr:hover {
background-color: var(--dm-border, #4a4a54) !important;
}
/* Code blocks dark mode */
html.dark-mode pre,
html.dark-mode code {
background-color: var(--dm-bg, #121214) !important;
color: #e2e8f0 !important;
}
/* Blockquote dark mode */
html.dark-mode blockquote:not(.guest-review-card__quote) {
background-color: var(--dm-surface, #1c1c20) !important;
border-left-color: var(--color-primary) !important;
color: #cbd5e1 !important;
}
/* Scroll to top button */
html.dark-mode #scroll-to-top {
background-color: var(--dm-surface, #1c1c20) !important;
border-color: var(--dm-border, #4a4a54) !important;
}
html.dark-mode #scroll-to-top:hover {
background-color: var(--color-primary) !important;
}
/* Link renkleri */
html.dark-mode a:not(.btn-primary):not(.bg-primary):not([class*="text-"]) {
color: #94a3b8;
}
html.dark-mode a:not(.btn-primary):not(.bg-primary):hover {
color: var(--color-primary);
}
/* Divider ve separator */
html.dark-mode hr,
html.dark-mode .divider {
border-color: var(--dm-border, #4a4a54) !important;
}
/* Loading spinner */
html.dark-mode .spinner,
html.dark-mode .loading {
border-color: var(--dm-border, #4a4a54) !important;
border-top-color: var(--color-primary) !important;
}
/* Tooltip */
html.dark-mode .tooltip {
background-color: var(--dm-surface, #1c1c20) !important;
color: #e2e8f0 !important;
}
/* Empty state */
html.dark-mode .empty-state {
color: #64748b !important;
}
/* Icon colors */
html.dark-mode .fa-solid,
html.dark-mode .fa-regular,
html.dark-mode .fas,
html.dark-mode .far {
color: inherit;
}
/* Specific icon overrides */
html.dark-mode .text-slate-400 i,
html.dark-mode .text-gray-400 i {
color: #64748b !important;
}
/* =============================================== */
html {
font-size: 87.5%; /* 14px taban boyutu - siteyi daha zarif hale getirmek için küçültüldü */
}
body {
font-family: var(--font-family-base);
color: var(--color-text-body);
background-color: var(--color-bg-light);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-base);
color: var(--color-text-heading);
}
.text-primary { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary); filter: brightness(0.8); }
.hover\:text-primary-dark:hover { color: var(--color-primary) !important; filter: brightness(0.8) !important; }
.bg-primary { background-color: var(--color-primary); }
.bg-primary-dark { background-color: var(--color-primary); filter: brightness(0.8); }
.hover\:bg-primary-dark:hover { background-color: var(--color-primary) !important; filter: brightness(0.8) !important; }
.border-primary { border-color: var(--color-primary); }
.bg-dark { background-color: var(--color-bg-dark); }
.text-hero-heading { color: var(--color-text-hero); }
.text-heading { color: var(--color-text-heading); }
.text-body { color: var(--color-text-body); }
.btn-primary {
background-color: var(--color-button-primary);
color: var(--color-on-primary, #ffffff);
}
.btn-primary:hover {
background-color: var(--color-button-secondary);
color: var(--color-on-primary, #ffffff);
}
/* Zebra Button - Secondary (Buton Hover Rengi kullanır) */
.btn-secondary {
background-color: var(--color-button-secondary);
color: #ffffff;
}
.btn-secondary:hover {
background-color: var(--color-button-primary);
}
.prose a {
color: var(--color-button-primary);
}
.prose a:hover {
color: var(--color-button-secondary);
}
.prose blockquote {
border-left-color: var(--color-primary);
}
/* Global Border Radius & Hero Height overrides */
/* Sadece ana bileşenlere veriyoruz, her şeye değil! */
.rounded-xl, .rounded-lg, .rounded-md, .rounded-sm,
.btn, button, input, select, textarea, .product-card, .content-card, .btn-primary, .btn-secondary {
border-radius: var(--border-radius-base);
}
/* İçerik modülü görselleri — border-radius dinamik (kart içi görseller hariç) */
main section img:not(.content-card img):not(.product-card img),
.prose img {
border-radius: var(--border-radius-base);
}
.content-card img,
.product-card img {
border-radius: 0 !important;
}
/* CKEditor inline height:100% layout patlatmasını engelle */
.prose img,
.prose img.editor-img,
.prose figure img {
max-width: 100% !important;
height: auto !important;
}
/* İletişim barı içindeki butonların birbirini itmesini ve yuvarlak kalmasını engelliyoruz */
[id^="contact-widget-"] button {
border-radius: 0 !important;
}
/* Yuvarlak elementler hariç (avatar, badge vb.) */
.rounded-full {
border-radius: 9999px !important;
}
.hero-section {
height: var(--hero-height) !important;
}
/* Hero — koyu görsel / primary zemin: metin her zaman beyaz */
.hero-section h1,
.hero-section h2,
.hero-section .text-heading,
main .hero-section h1,
main .hero-section h2,
.hero-section-solid h1,
.legal-banner h1 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
}
.hero-section p,
.hero-section .text-body,
main .hero-section p,
.hero-section-solid p,
.legal-banner p {
color: rgba(255, 255, 255, 0.88) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}
/* Hero section tema rengi arka plan */
.hero-section.bg-primary {
background: var(--color-primary) !important;
}
html.dark-mode .hero-section.bg-primary {
background: var(--color-primary-dark) !important;
}
html:not(.dark-mode) .product-card, html:not(.dark-mode) .content-card {
display: flex !important;
background-color: #ffffff;
border-radius: var(--border-radius-base) !important;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: none !important;
transition: border-color 0.2s ease !important;
overflow: hidden;
text-decoration: none;
}
.product-card, .content-card {
display: flex !important;
border-radius: var(--border-radius-base) !important;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: none !important;
transition: border-color 0.2s ease !important;
overflow: hidden;
text-decoration: none;
}
.product-card:hover, .content-card:hover {
box-shadow: none !important;
border-color: rgba(0,0,0,0.12);
}
.product-card, .content-card { flex-direction: column !important; }
/* Tüm kartlar - Light Mode beyaz arka plan */
html:not(.dark-mode) .product-card,
html:not(.dark-mode) .content-card,
html:not(.dark-mode) .katalog-card,
html:not(.dark-mode) .video-card,
html:not(.dark-mode) #kataloglar .bg-white,
html:not(.dark-mode) #videolar .bg-white {
display: flex !important;
background-color: #ffffff !important;
border-radius: var(--border-radius-base) !important;
overflow: hidden;
}
.katalog-card,
.video-card {
flex-direction: column !important;
}
.product-card,
.content-card {
box-shadow: none !important;
transition: border-color 0.2s ease !important;
}
.katalog-card,
.video-card,
#kataloglar .bg-white,
#videolar .bg-white {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}
@media (max-width: 767px) {
.product-card, .content-card, .katalog-card, .video-card {
flex-direction: column !important;
}
.product-card > a, .content-card > a {
flex-direction: column !important;
width: 100% !important;
}
.product-card > a > div:first-child, .content-card > a > div:first-child,
.product-card > a > div:last-child, .content-card > a > div:last-child,
.product-card > div:first-child, .product-card > div:last-child {
width: 100% !important;
}
}
.product-card:hover,
.content-card:hover {
box-shadow: none !important;
border-color: rgba(0, 0, 0, 0.12) !important;
}
.katalog-card:hover,
.video-card:hover,
#kataloglar .bg-white:hover,
#videolar .bg-white:hover {
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
/* Kart içi metin renkleri - Light Mode */
.product-card h3,
.content-card h3,
.katalog-card h3,
.video-card h3 {
color: var(--color-text-heading) !important;
}
.product-card p,
.content-card p,
.katalog-card p,
.video-card p,
.product-card .text-body,
.content-card .text-body {
color: var(--color-text-body) !important;
}
/* Referans kartları */
.reference-item {
background-color: #ffffff;
border-radius: var(--border-radius-base) !important;
box-shadow: none;
transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
border: 1px solid #d1d5db;
}
.reference-item:hover {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
border-color: var(--color-primary);
}
/* =============================================== */
/* STATİK STİLLER (Orijinal styles.css içeriği) */
/* =============================================== */
/* NAVBAR — topbar solid (çizgi yok); cam sadece .nav-glass-bar */
#header {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
#topbar {
background-color: var(--topbar-bg, var(--solid-bg1, var(--color-bg-dark))) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
box-shadow: none !important;
border-bottom: none !important;
position: relative;
z-index: 5;
}
#header:not(.scrolled) .nav-glass-bar {
background: rgba(255, 255, 255, 0.14) !important;
background-color: rgba(255, 255, 255, 0.14) !important;
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
border-top: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
box-shadow: none !important;
}
#header .logo-text, #header .nav-link, #header #mobile-menu-button {
color: white;
}
#header .nav-link.nav-link-btn {
color: var(--color-on-primary, #fff) !important;
background: var(--color-button-primary);
}
#header .nav-link.nav-link-btn:hover,
#header .nav-link.nav-link-btn.active {
color: var(--color-on-primary, #fff) !important;
background: var(--color-button-secondary);
}
#header.scrolled {
background: #ffffff !important;
background-color: #ffffff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.10), 0 1px 0 rgba(15, 23, 42, 0.06) !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
/* solid_all scrolled: beyaz ezmesin — solid_bg1 kuralları aşağıda */
html[data-solid-all="1"] #header.scrolled,
html[data-zebra-mode="solid_all"] #header.scrolled {
background: var(--solid-bg1, var(--color-bg-dark, #121214)) !important;
background-color: var(--solid-bg1, var(--color-bg-dark, #121214)) !important;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(0, 0, 0, 0.2) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
#header.scrolled .nav-glass-bar {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: none !important;
}
#header.scrolled .logo-text, #header.scrolled #mobile-menu-button {
color: var(--color-text-heading);
}
html[data-solid-all="1"] #header.scrolled .logo-text,
html[data-solid-all="1"] #header.scrolled #mobile-menu-button,
html[data-zebra-mode="solid_all"] #header.scrolled .logo-text,
html[data-zebra-mode="solid_all"] #header.scrolled #mobile-menu-button {
color: #ffffff !important;
}
#header.scrolled .nav-link {
color: var(--color-text-body);
}
html[data-solid-all="1"] #header.scrolled .nav-link,
html[data-zebra-mode="solid_all"] #header.scrolled .nav-link {
color: #ffffff !important;
}
#header.scrolled .nav-link:hover {
color: var(--color-primary);
}
html[data-solid-all="1"] #header.scrolled .nav-link:hover,
html[data-zebra-mode="solid_all"] #header.scrolled .nav-link:hover {
color: rgba(255, 255, 255, 0.75) !important;
}
#header.scrolled .nav-link.nav-link-btn,
#header.scrolled .nav-link.nav-link-btn:hover,
#header.scrolled .nav-link.nav-link-btn.active {
color: #fff !important;
background: var(--color-button-primary);
}
#header.scrolled .nav-link.nav-link-btn:hover,
#header.scrolled .nav-link.nav-link-btn.active {
background: var(--color-button-secondary);
}
/* Submenu light modda koyu metin — solid_all hariç */
html:not(.dark-mode):not([data-solid-all="1"]) #header .has-submenu .submenu .submenu-item {
color: #374151 !important;
}
html:not(.dark-mode):not([data-solid-all="1"]) #header .has-submenu .submenu .submenu-item:hover {
color: var(--color-primary) !important;
}
#mobile-menu {
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#mobile-menu.open {
transform: translateX(0);
}
#menu-overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
#menu-overlay.open {
opacity: 1;
visibility: visible;
}
#header.menu-is-open {
z-index: 39 !important;
}
[data-animate] {
opacity: 0;
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animate="fade-in"] { transform: translateY(10px); }
[data-animate="fade-up"] { transform: translateY(15px); }
[data-animate="fade-down"] { transform: translateY(-15px); }
[data-animate="zoom-in"] { transform: scale(0.95); }
.is-visible[data-animate] {
opacity: 1;
transform: translateY(0) scale(1);
}
.lightbox-transition {
transition: opacity 0.3s ease-in-out;
}
.lightbox-thumb {
width: 64px;
height: 64px;
object-fit: cover;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--border-radius-base);
opacity: 0.7;
transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.lightbox-thumb:hover {
opacity: 1;
transform: scale(1.05);
}
.lightbox-thumb.active {
opacity: 1;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.3);
}
/* Lightbox scrollbar gizleme */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/* Lightbox animasyonları */
#lightbox {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
#lightbox-img {
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Lightbox buton hover efektleri */
#lightbox button:hover {
transform: scale(1.05);
}
/* Responsive lightbox */
@media (max-width: 768px) {
#lightbox-thumbnails .lightbox-thumb {
width: 40px;
height: 40px;
margin: 0 2px;
}
#lightbox {
padding: 8px !important;
}
#lightbox-img {
max-width: 95vw !important;
max-height: 60vh !important;
}
/* Lightbox bottom controls mobil spacing */
#lightbox .space-y-4 {
gap: 12px;
}
#lightbox .space-x-6 {
gap: 16px;
}
/* Mobile slider — tek yükseklik stratejisi (100dvh) sonraki blokta */
/* Thumbnail container mobil scroll */
#lightbox-thumbnails {
max-width: calc(100vw - 32px);
padding: 0 8px;
}
}
.slider-indicator.active {
background-color: #ffffff;
}
.prose {
line-height: 1.8;
font-size: 1rem;
}
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
font-weight: 600;
margin-bottom: 0.75em;
margin-top: 1.75em;
}
.prose h2 {
font-size: 1.75rem;
line-height: 2.25rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e2e8f0;
font-weight: 700;
}
.prose h3 {
font-size: 1.375rem;
line-height: 1.75rem;
}
.prose h4 {
font-size: 1.125rem;
line-height: 1.5rem;
}
.prose p {
margin-bottom: 1.25em;
}
.prose ul {
list-style-type: disc !important;
padding-left: 1.5rem;
margin-bottom: 1.25em;
}
.prose ol {
list-style-type: decimal !important;
padding-left: 1.5rem;
margin-bottom: 1.25em;
}
.prose ul ul {
list-style-type: circle !important;
}
.prose ul ul ul {
list-style-type: square !important;
}
.prose li {
display: list-item !important;
margin-bottom: 0.5em;
padding-left: 0.5rem;
}
.prose li::marker {
color: #64748b;
}
/* ── İÇERİK MODÜLÜ KOYU BÖLÜM (.bg-slate-900) — okunabilir metin ── */
section.bg-slate-900 .prose,
section.bg-slate-900 .prose p,
section.bg-slate-900 .prose li,
section.bg-slate-900 p,
section.bg-slate-900 li,
section.bg-slate-900 .text-body,
section.bg-slate-900 span:not(.text-primary) {
color: rgba(255, 255, 255, 0.85) !important;
opacity: 1 !important;
}
section.bg-slate-900 h1, section.bg-slate-900 h2, section.bg-slate-900 h3,
section.bg-slate-900 h4, section.bg-slate-900 h5, section.bg-slate-900 h6,
section.bg-slate-900 .text-heading,
section.bg-slate-900 strong, section.bg-slate-900 b,
section.bg-slate-900 .prose strong {
color: #ffffff !important;
opacity: 1 !important;
}
section.bg-slate-900 .prose ul > li::marker,
section.bg-slate-900 .prose ol > li::marker,
section.bg-slate-900 .prose li::marker,
section.bg-slate-900 li::marker {
color: rgba(255, 255, 255, 0.55) !important;
}
section.bg-slate-900 .text-primary {
color: #fbd293 !important;
opacity: 1 !important;
}
section.bg-slate-900 .prose a {
color: #fbd293 !important;
border-bottom-color: rgba(255,255,255,0.4) !important;
}
.prose a {
text-decoration: none;
font-weight: 500;
transition: color 0.4s ease, border-color 0.4s ease;
border-bottom: 1px solid #fdba74;
}
.prose strong {
font-weight: 700;
}
.prose blockquote {
margin-left: 0;
margin-right: 0;
padding-left: 1.25rem;
font-style: italic;
}
/* Footer branding styles */
.footer-branding {
font-family: 'Space Grotesk', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.1em;
transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Hover effects */
.footer-branding:hover {
opacity: 1 !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.product-card-grid .product-card h3 {
/* Başlığın 2 satırdan sonra kesilmesini sağlar */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 2.5em; /* 2 satır yükseklik (text-lg için) */
}
.product-card-grid .product-card p {
/* Özetin 3 satırdan sonra kesilmesini sağlar */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 3.75em; /* 3 satır yükseklik (text-sm için) */
}
/* =============================================== */
/* MOBİL OPTİMİZASYON */
/* =============================================== */
/* Touch-friendly minimum boyutlar */
@media (max-width: 768px) {
/* Tıklanabilir alanlar minimum 44px */
button:not(.slider-indicator),
a.btn-primary,
.btn,
input[type="submit"],
input[type="button"] {
min-height: 44px;
min-width: 44px;
}
/* Form elemanları */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
font-size: 16px !important; /* iOS zoom engellemek için */
min-height: 48px;
padding: 12px 16px;
}
/* Container padding */
.container {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Section padding — hero hariç daha sıkı */
section:not(#home):not(.hero-section) {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
/* Başlık boyutları */
h1 {
font-size: 1.75rem !important;
line-height: 1.2 !important;
}
h2 {
font-size: 1.5rem !important;
line-height: 1.25 !important;
}
h3 {
font-size: 1.25rem !important;
line-height: 1.3 !important;
}
/* Paragraf spacing */
p {
margin-bottom: 1rem;
}
/* Grid gap azaltma */
.gap-8 {
gap: 1rem !important;
}
.gap-10 {
gap: 1.25rem !important;
}
.gap-12 {
gap: 1.5rem !important;
}
/* Kart içi padding — gerçek DOM: article > a > div.p-6 */
.content-card > a > div:last-child,
.content-card .p-6,
.product-card > a > div:last-child,
.product-card > div:last-child {
padding: 1rem !important;
}
/* Hero section mobil — tek katman üst boşluk (navbar) */
.hero-section {
height: auto !important;
min-height: 240px !important;
padding: 72px 1rem 2rem !important;
display: flex !important;
align-items: center !important;
}
.hero-section > .container {
padding-top: 0 !important;
}
.hero-section h1 {
font-size: 1.5rem !important;
}
.hero-section p {
font-size: 0.9rem !important;
}
}
/* Küçük mobil (375px ve altı) */
@media (max-width: 375px) {
.container {
padding-left: 12px !important;
padding-right: 12px !important;
}
h1 {
font-size: 1.5rem !important;
}
h2 {
font-size: 1.25rem !important;
}
h3 {
font-size: 1.125rem !important;
}
/* Buton boyutları */
.btn-primary,
a.btn-primary {
padding: 10px 20px !important;
font-size: 0.875rem !important;
}
}
/* Mobil Slider Optimizasyonu */
@media (max-width: 768px) {
/* Slider mobilde tam ekran */
#home {
height: 100vh !important;
height: 100dvh !important;
min-height: 100vh !important;
min-height: 100dvh !important;
max-height: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.slider-container {
height: 100vh !important;
height: 100dvh !important;
min-height: 100vh !important;
min-height: 100dvh !important;
max-height: none !important;
}
/* Slider mobil düzeni */
.bg-pattern-slider {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
padding-top: 80px !important; /* Navbar sonrası - azaltıldı */
}
.bg-pattern-slider > .container {
height: auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
}
.bg-pattern-slider .flex.flex-col.md\:grid {
height: auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 1rem !important;
}
/* İçerik alanı - ortalı, biraz boşluk */
.bg-pattern-slider .flex.flex-col.md\:grid > div:first-child {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
padding: 0 1.5rem !important;
gap: 0.75rem !important;
}
/* Görsel alanı - ortalı */
.bg-pattern-slider .flex.flex-col.md\:grid > div:last-child {
height: auto !important;
max-height: 35vh !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 0 1.5rem !important;
}
.bg-pattern-slider .flex.flex-col.md\:grid > div:last-child img {
max-height: 35vh !important;
width: auto !important;
object-fit: contain !important;
}
.bg-pattern-slider h1,
.bg-pattern-slider h2 {
font-size: 1.75rem !important;
line-height: 1.2 !important;
margin-bottom: 0.5rem !important;
text-align: center !important;
}
.bg-pattern-slider p {
font-size: 1rem !important;
line-height: 1.5 !important;
margin-bottom: 0.75rem !important;
text-align: center !important;
}
/* Slider butonları */
.slider-item a.inline-flex {
padding: 12px 24px !important;
font-size: 0.9rem !important;
}
/* Mobil slider navigasyon butonları */
#prev-slide, #next-slide {
display: flex !important;
position: absolute !important;
bottom: 30px !important;
top: auto !important;
transform: none !important;
padding: 12px !important;
background: rgba(0, 0, 0, 0.5) !important;
}
#prev-slide {
left: calc(50% - 60px) !important;
}
#next-slide {
right: calc(50% - 60px) !important;
}
#prev-slide svg, #next-slide svg {
width: 20px !important;
height: 20px !important;
}
/* Fullscreen slider mobil içerik — solda, altta */
#home .slider-item > div.relative.z-20 {
align-items: flex-end !important;
justify-content: flex-start !important;
padding-top: 0 !important;
padding-bottom: 4.5rem !important;
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
box-sizing: border-box !important;
}
#home .slider-content-inner {
max-width: 100% !important;
text-align: left !important;
transform: none !important;
transform-origin: left bottom !important;
margin: 0 !important;
}
#home .slider-content-inner.is-left {
transform: none !important;
transform-origin: left bottom !important;
text-align: left !important;
}
/* Gradyan alttan güçlü */
#home .slider-dim-gradient.slider-dim-left,
#home .slider-dim-gradient.slider-dim-center {
background: linear-gradient(
to top,
rgba(0,0,0,0.92) 0%,
rgba(0,0,0,0.65) 35%,
rgba(0,0,0,0.15) 65%,
transparent 100%
) !important;
}
#home .slider-content-inner h2 {
font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
line-height: 1.2 !important;
margin-bottom: 0.5rem !important;
}
#home .slider-content-inner p {
font-size: 0.85rem !important;
margin-bottom: 0.75rem !important;
opacity: 0.88;
}
#home .slider-content-inner a.btn-primary {
padding: 0.5rem 1.1rem !important;
font-size: 0.82rem !important;
}
/* Önceki/sonraki okları mobilde gizle */
#prev-slide, #next-slide {
display: none !important;
}
}
/* Mobil Navbar Optimizasyonu — logo/nav yüksekliği navbar.php inline stilinden gelir */
@media (max-width: 1023px) {
#header nav.nav-main {
/* fallback; asıl değer logo_height ile navbar.php'de set edilir */
height: 64px;
}
/* Hamburger button */
#mobile-menu-button {
width: 44px;
height: 44px;
}
}
/* Mobil Menü İyileştirmeleri */
#mobile-menu {
width: 85% !important;
max-width: 320px !important;
}
#mobile-menu nav {
padding-bottom: 100px; /* Alt butonlar için alan */
}
#mobile-menu .mobile-nav-link {
padding: 14px 0 !important;
font-size: 1rem !important;
}
#mobile-menu .mobile-submenu .mobile-nav-link {
padding: 10px 0 !important;
font-size: 0.9rem !important;
}
/* Mobil Footer */
@media (max-width: 768px) {
body > footer {
margin-top: 0 !important;
}
body > footer .container {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
body > footer h4 {
font-size: 0.875rem !important;
margin-bottom: 0.75rem !important;
}
body > footer ul {
margin-top: 0.5rem !important;
}
body > footer li {
margin-bottom: 0.5rem !important;
}
body > footer a {
font-size: 0.875rem !important;
}
/* Footer logo */
body > footer img {
height: 40px !important;
}
/* Footer grid */
body > footer .grid {
gap: 1.5rem !important;
}
/* Copyright bar */
body > footer .border-t {
padding: 1rem 0 !important;
}
body > footer .border-t span,
body > footer .border-t a {
font-size: 0.75rem !important;
}
}
/* Mobil İletişim Kartları */
@media (max-width: 768px) {
#iletisim .p-6 {
padding: 1rem !important;
}
#iletisim .w-12 {
width: 40px !important;
height: 40px !important;
}
#iletisim .w-12 i {
font-size: 1rem !important;
}
#iletisim h4 {
font-size: 1rem !important;
}
#iletisim .p-3 {
padding: 0.75rem !important;
}
/* Harita minimum yükseklik */
#iletisim iframe {
min-height: 300px !important;
}
}
/* Mobil Galeri — 2’li grid, bento span’ler sütun sayısına sıkışır */
@media (max-width: 640px) {
#gallery-grid,
.galeri-grid-safe {
--galeri-cols: 2;
--galeri-gap: 0.75rem;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0.75rem !important;
}
#gallery-grid .gallery-item,
.galeri-grid-safe .gallery-item {
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
overflow: hidden !important;
}
#gallery-grid .gallery-item img,
.galeri-grid-safe .gallery-item img {
max-width: 100% !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
/* Mobil Referanslar */
@media (max-width: 640px) {
#referanslar .grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem !important;
}
.reference-item {
padding: 0.75rem !important;
}
.reference-item img {
width: 100% !important;
}
}
/* Mobil Lightbox */
@media (max-width: 768px) {
#lightbox {
padding: 8px !important;
}
#lightbox-img {
max-height: 50vh !important;
}
#lightbox button {
padding: 8px !important;
}
#lightbox button svg {
width: 20px !important;
height: 20px !important;
}
#lightbox-thumbnails {
max-width: 100% !important;
padding: 0 8px !important;
}
.lightbox-thumb {
width: 48px !important;
height: 48px !important;
}
}
/* Mobil Cookie Banner */
@media (max-width: 640px) {
#cookie-consent-banner {
left: 8px !important;
right: 8px !important;
bottom: 8px !important;
padding: 12px !important;
}
#cookie-consent-banner h4 {
font-size: 0.875rem !important;
}
#cookie-consent-banner p {
font-size: 0.75rem !important;
}
#cookie-consent-banner button {
padding: 10px 8px !important;
font-size: 0.75rem !important;
}
}
/* Mobil WhatsApp / Float iletişim butonları */
@media (max-width: 768px) {
#whatsapp-button {
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
right: 16px !important;
width: 52px !important;
height: 52px !important;
}
#whatsapp-button i {
font-size: 1.5rem !important;
}
#contact-float-buttons-desktop,
.md\:hidden.fixed.bottom-6,
#contact-mobile-trigger {
bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* Prose mobil */
@media (max-width: 768px) {
.prose {
font-size: 0.9375rem !important;
line-height: 1.7 !important;
}
.prose h2 {
font-size: 1.25rem !important;
margin-top: 1.5rem !important;
}
.prose h3 {
font-size: 1.125rem !important;
}
.prose ul,
.prose ol {
padding-left: 1.25rem !important;
}
.prose blockquote {
padding-left: 1rem !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Smooth scroll için iOS fix */
html {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* Tap highlight kaldırma */
* {
-webkit-tap-highlight-color: transparent;
}
/* Performans optimizasyonu - GPU hızlandırma */
.slider-item,
[data-animate],
#mobile-menu,
#search-modal .bg-white {
will-change: transform, opacity;
}
/* Slider tepesindeki boşluk düzeltmesi */
#home {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Header fixed olduğu için slider tam ekran olmalı */
.slider-container {
position: relative;
}
/* Slider içerik ortalama - header yüksekliğini hesaba kat */
#home .slider-item .relative.z-20 {
padding-top: 0;
}
/* Slider pattern için header offset */
.bg-pattern-slider {
padding-top: 0 !important;
}
/* Safe area padding (notch'lu telefonlar için) */
@supports (padding: max(0px)) {
body {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
#mobile-menu {
padding-bottom: max(20px, env(safe-area-inset-bottom));
}
body > footer .footer-bottom {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
#cookie-consent-banner {
bottom: max(8px, env(safe-area-inset-bottom)) !important;
}
#whatsapp-button {
bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)) !important;
}
}
/* Landscape mode optimizasyonu */
@media (max-height: 500px) and (orientation: landscape) {
#home,
.slider-container {
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
}
#home .slider-item > div.relative.z-20 {
padding-top: 4rem !important;
padding-bottom: 3.5rem !important;
}
#home .slider-content-inner h2 {
font-size: 1.25rem !important;
margin-bottom: 0.35rem !important;
}
#home .slider-content-inner p {
display: none !important;
}
#home .slider-content-inner a.btn-primary {
min-height: 40px !important;
padding: 0.4rem 0.9rem !important;
font-size: 0.8125rem !important;
}
.hero-section {
min-height: 200px !important;
padding: 60px 0 30px !important;
}
section:not(#home):not(.hero-section) {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
}
/* Genel mobil: yatay taşmayı kes */
@media (max-width: 768px) {
html, body {
overflow-x: clip;
max-width: 100%;
}
img, video, iframe {
max-width: 100%;
}
}
/* =============================================== */
/* DİL SEÇİCİ PANELİ STİLLERİ */
/* =============================================== */
/* Panel arka planı */
#language-panel {
background-color: #ffffff;
}
#language-panel .panel-header {
background-color: #f8fafc;
border-color: #e2e8f0;
}
#language-panel .panel-header .title {
color: #1e293b;
}
#language-panel .panel-header .subtitle {
color: #64748b;
}
#language-panel .panel-footer {
background-color: #f8fafc;
border-color: #e2e8f0;
}
/* Dil seçenekleri */
#language-panel .lang-item {
background-color: #ffffff;
border-color: #e2e8f0;
color: #334155;
border-radius: var(--border-radius-base, 8px);
transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
#language-panel .lang-item:hover {
background-color: #f1f5f9;
border-color: var(--color-primary);
}
#language-panel .lang-item.active,
#language-panel .lang-item.lang-item-active {
background-color: rgba(var(--color-primary-rgb), 0.1);
border-color: var(--color-primary);
}
/* Mobil dil paneli — menü ile aynı oran, rahat dokunma */
@media (max-width: 640px) {
#language-panel {
width: 85% !important;
max-width: 320px !important;
}
#language-panel .lang-item {
min-height: 52px;
border-radius: var(--border-radius-base, 10px);
}
#language-panel .lang-item:hover {
transform: none;
}
#identity-panel {
width: 85% !important;
max-width: 320px !important;
}
}
/* Dark mode dil paneli */
html.dark-mode #language-panel {
background-color: var(--dm-surface, #1c1c20);
}
html.dark-mode #language-panel .panel-header {
background-color: var(--dm-bg, #121214);
border-color: var(--dm-border, #4a4a54);
}
html.dark-mode #language-panel .panel-header .title {
color: #f1f5f9;
}
html.dark-mode #language-panel .panel-header .subtitle {
color: #94a3b8;
}
html.dark-mode #language-panel .panel-footer {
background-color: var(--dm-bg, #121214);
border-color: var(--dm-border, #4a4a54);
}
html.dark-mode #language-panel .lang-item {
background-color: var(--dm-surface, #1c1c20);
border-color: var(--dm-border, #4a4a54);
color: #e2e8f0;
}
html.dark-mode #language-panel .lang-item:hover {
background-color: var(--dm-border, #4a4a54);
border-color: var(--color-primary);
}
html.dark-mode #language-panel .lang-item.active {
background-color: rgba(var(--color-primary-rgb), 0.2);
border-color: var(--color-primary);
}
/* =============================================== */
/* GOOGLE TRANSLATE TOOLBAR GİZLE */
/* =============================================== */
/* Google Translate üst bar'ı tamamen gizle */
.goog-te-banner-frame,
.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
display: none !important;
visibility: hidden !important;
height: 0 !important;
opacity: 0 !important;
}
/* Body'nin üstüne eklenen margin'i kaldır */
body {
top: 0 !important;
position: static !important;
}
/* Google Translate iframe'i gizle */
iframe.goog-te-banner-frame {
display: none !important;
height: 0 !important;
visibility: hidden !important;
}
/* Translate widget'ı gizle */
#google_translate_element {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
/* Google'ın eklediği body top offset'i sıfırla */
html body {
top: 0 !important;
}
/* VIP class - Google bazen bunu ekliyor */
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd {
display: none !important;
}
/* =============================================================================
PROSE (İÇERİK) AKILLI RENK SİSTEMİ
Arka plan rengine göre metin, kalın yazı ve başlık renklerini otomatik ayarlar.
============================================================================= */
/* Prose içeriği — token tabanlı (tema/mod cascade ile çözülür) */
section.bg-white .prose,
section.bg-white .prose p,
section.bg-white .prose li {
color: var(--sw-text) !important;
}
section.bg-white .prose strong,
section.bg-white .prose b,
section.bg-white .prose h1,
section.bg-white .prose h2,
section.bg-white .prose h3,
section.bg-white .prose h4 {
color: var(--sw-heading) !important;
}
section.bg-zebra .prose,
section.bg-zebra .prose p,
section.bg-zebra .prose li {
color: var(--sz-text) !important;
}
section.bg-zebra .prose strong,
section.bg-zebra .prose b,
section.bg-zebra .prose h1,
section.bg-zebra .prose h2,
section.bg-zebra .prose h3,
section.bg-zebra .prose h4 {
color: var(--sz-heading) !important;
font-weight: 700;
}
section.bg-slate-900 .prose,
section.bg-slate-900 .prose p,
section.bg-slate-900 .prose li {
color: var(--sd-text) !important;
}
section.bg-slate-900 .prose strong,
section.bg-slate-900 .prose b,
section.bg-slate-900 .prose h1,
section.bg-slate-900 .prose h2,
section.bg-slate-900 .prose h3,
section.bg-slate-900 .prose h4 {
color: var(--sd-heading) !important;
font-weight: 700;
}
/* ── MOBİL İLETİŞİM PANELİ (BOTTOM SHEET) — solid_all / koyu zemin ── */
html[data-solid-all="1"] #contact-sheet,
html[data-zebra-mode="solid_all"] #contact-sheet,
html[data-zebra-surface="dark"] #contact-sheet {
background: var(--solid-bg1, var(--color-bg-dark, #121214)) !important;
border-top: 1px solid rgba(255,255,255,0.15) !important;
box-shadow: 0 -10px 40px rgba(0,0,0,0.4) !important;
}
html[data-solid-all="1"] #sheet-handle,
html[data-zebra-mode="solid_all"] #sheet-handle,
html[data-zebra-surface="dark"] #sheet-handle {
background-color: rgba(255,255,255,0.3) !important;
}
html[data-solid-all="1"] .sheet-label,
html[data-zebra-mode="solid_all"] .sheet-label,
html[data-zebra-surface="dark"] .sheet-label {
color: #ffffff !important;
}
html[data-solid-all="1"] .contact-float-btn,
html[data-zebra-mode="solid_all"] .contact-float-btn,
html[data-solid-all="1"] #contact-mobile-trigger,
html[data-zebra-mode="solid_all"] #contact-mobile-trigger {
border: 1px solid rgba(255,255,255,0.2) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html[data-solid-all="1"] .contact-float-btn i,
html[data-zebra-mode="solid_all"] .contact-float-btn i,
html[data-solid-all="1"] #contact-mobile-trigger i,
html[data-zebra-mode="solid_all"] #contact-mobile-trigger i,
html[data-solid-all="1"] #whatsapp-button i,
html[data-zebra-mode="solid_all"] #whatsapp-button i {
color: #ffffff !important;
}
/* Breadcrumb / scroll — sadece koyu solid_all zeminde beyaz */
html[data-solid-all="1"] .breadcrumb-item,
html[data-solid-all="1"] .breadcrumb-link,
html[data-zebra-mode="solid_all"] .breadcrumb-item,
html[data-zebra-mode="solid_all"] .breadcrumb-link {
color: rgba(255,255,255,0.8) !important;
}
html[data-solid-all="1"] .breadcrumb-item.active,
html[data-zebra-mode="solid_all"] .breadcrumb-item.active {
color: #ffffff !important;
}
html[data-solid-all="1"] nav[aria-label="Sayfalama"] a:not(.bg-primary),
html[data-zebra-mode="solid_all"] nav[aria-label="Sayfalama"] a:not(.bg-primary) {
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.15) !important;
color: #ffffff !important;
}
html[data-solid-all="1"] #scroll-to-top,
html[data-zebra-mode="solid_all"] #scroll-to-top {
background: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(8px) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
}
html[data-solid-all="1"] #scroll-to-top:hover,
html[data-zebra-mode="solid_all"] #scroll-to-top:hover {
background: rgba(255, 255, 255, 0.25) !important;
}
/* =============================================================================
İLETİŞİM BÖLÜMÜ TEMİZLİĞİ (Dark Mode — sadece zebra/koyu bölümler)
============================================================================= */
html.dark-mode section.bg-zebra .contact-card-title,
html.dark-mode section.bg-zebra .contact-link-label,
html.dark-mode section.bg-zebra .contact-link-value,
html.dark-mode section.bg-zebra .address-text,
html.dark-mode section.bg-zebra .contact-card-header,
html.dark-mode section.bg-zebra .contact-link-content {
background: transparent !important;
background-color: transparent !important;
color: #ffffff !important;
text-shadow: none !important;
box-shadow: none !important;
border: none !important;
}
html.dark-mode section.bg-zebra .contact-card,
html.dark-mode section.bg-zebra .address-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html.dark-mode section.bg-zebra .contact-card::after,
html.dark-mode section.bg-zebra .address-card::after {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
}
html.dark-mode section.bg-zebra .contact-link {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
}
html.dark-mode section.bg-zebra .contact-link:hover .contact-link-icon {
color: var(--color-primary) !important;
}
/* =============================================================================
İletişim Kartları — Bölüm bağlamlı token tüketimi (cw / cz / cc)
Zebra opaklığı ≥70 olsa bile bg-white bölümü --cw-* ile opak kalır.
============================================================================= */
section.bg-white .contact-card,
section.bg-white .address-card,
section.bg-white .branch-accordion,
section.bg-white .branch-contact-category,
section.bg-white .contact-cards-container,
section.bg-white#iletisim,
section.bg-white #iletisim-bilgileri {
--cc-surface-bg: var(--cw-bg);
--cc-surface-border: var(--cw-border);
--cc-surface-shadow: var(--cw-shadow);
--cc-text: var(--cw-text);
--cc-muted: var(--cw-muted);
}
section.bg-zebra .contact-card,
section.bg-zebra .address-card,
section.bg-zebra .branch-accordion,
section.bg-zebra .branch-contact-category,
section.bg-zebra .contact-cards-container,
section.bg-zebra#iletisim,
section.bg-zebra #iletisim-bilgileri {
--cc-surface-bg: var(--cz-bg);
--cc-surface-border: var(--cz-border);
--cc-surface-shadow: var(--cz-shadow);
--cc-text: var(--cz-text);
--cc-muted: var(--cz-muted);
}
/* Harita çerçevesi — cam/şeffaf zemin haritayı soluk göstermesin */
section.bg-white .shadow-lg.overflow-hidden {
background-color: #ffffff !important;
}
section.bg-zebra .shadow-lg.overflow-hidden {
background-color: #ffffff !important;
}
.is-solid-card .contact-card-title,
.is-solid-card .address-text,
.is-solid-card .contact-card-header h3,
.is-solid-card .contact-number,
.is-solid-card .branch-header-info h3,
.is-solid-card .branch-contact-header,
section.bg-white .is-solid-card .contact-link span,
section.bg-white .is-solid-card .contact-link span *,
section.bg-white .is-solid-card .contact-link-value {
color: var(--cc-text) !important;
opacity: 1 !important;
visibility: visible !important;
}
.is-solid-card .contact-link-label,
.is-solid-card .branch-header-info p,
section.bg-white .is-solid-card .contact-link-label {
color: var(--cc-muted) !important;
opacity: 1 !important;
}
/* bg-white bölümlerinde is-glass-card kalsa bile yüzeyi solid-card gibi davransın */
section.bg-white .contact-card.is-glass-card::after,
section.bg-white .address-card.is-glass-card::after,
section.bg-white .branch-accordion.is-glass-card::after,
section.bg-white .branch-contact-category.is-glass-card::after {
background: var(--cc-surface-bg) !important;
border: 1px solid var(--cc-surface-border) !important;
box-shadow: var(--cc-surface-shadow) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
section.bg-white .is-glass-card .contact-card-title,
section.bg-white .is-glass-card .address-text,
section.bg-white .is-glass-card .contact-link-value,
section.bg-white .is-glass-card .branch-header-info h3,
section.bg-white .is-glass-card .contact-number,
section.bg-white .is-glass-card .branch-contact-header {
color: var(--cc-text) !important;
opacity: 1 !important;
}
section.bg-white .is-glass-card .contact-link-label,
section.bg-white .is-glass-card .branch-header-info p {
color: var(--cc-muted) !important;
opacity: 1 !important;
}
section.bg-white .is-glass-card .contact-link,
section.bg-white .is-glass-card .branch-contact-category {
background: var(--cc-link-bg) !important;
border: 1px solid var(--cc-link-border) !important;
}
section.bg-white .is-glass-card .contact-link-icon {
color: var(--cc-muted) !important;
border-left: none !important;
}
.is-solid-card::after {
background: var(--cc-surface-bg) !important;
border: 1px solid var(--cc-surface-border) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
visibility: visible !important;
display: block !important;
box-shadow: var(--cc-surface-shadow) !important;
}
.is-solid-card .contact-link,
.is-solid-card .branch-contact-category {
background: var(--cc-link-bg) !important;
border: 1px solid var(--cc-link-border) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
transition:
background-color 0.4s ease,
border-color 0.4s ease,
box-shadow 0.4s ease,
color 0.4s ease !important;
}
.is-solid-card .contact-link-value,
.is-solid-card .contact-link-label,
.is-solid-card .contact-link-icon {
transition: color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease !important;
}
.is-solid-card .contact-link-icon {
color: var(--cc-muted) !important;
border-left: none !important;
}
/* =============================================================================
İLETİŞİM LİNKİ HOVER — TOKEN TÜKETİCİ (tema/mod farkı --cc-link-hover-* ile)
Düz beyaz yerine: açık temada ince marka tonu + gerçek gölge,
koyu temada cam yansıması. Değerler :root / html.dark-mode'da çözülür.
============================================================================= */
.contact-link:hover,
.contact-card .contact-link:hover,
.address-card .contact-link:hover,
.is-solid-card .contact-link:hover,
.is-glass-card .contact-link:hover,
section.bg-white .contact-link:hover,
section.bg-zebra .contact-link:hover,
html.dark-mode .contact-link:hover,
html.dark-mode section.bg-zebra .contact-link:hover,
html.dark-mode section.bg-white .contact-link:hover {
background: var(--cc-link-hover-bg) !important;
background-color: var(--cc-link-hover-bg) !important;
border-color: var(--cc-link-hover-border) !important;
box-shadow: var(--cc-link-hover-shadow) !important;
}
.contact-link:hover span,
.contact-link:hover span *,
.contact-link:hover p,
.contact-link:hover i,
.contact-link:hover .contact-link-value,
.contact-link:hover .contact-link-label,
.is-solid-card .contact-link:hover *,
.is-glass-card .contact-link:hover *,
section.bg-zebra .contact-link:hover *,
html.dark-mode .contact-link:hover * {
color: var(--cc-link-hover-text) !important;
opacity: 1 !important;
}
.contact-link:hover .contact-link-icon,
.is-solid-card .contact-link:hover .contact-link-icon,
.is-glass-card .contact-link:hover .contact-link-icon,
section.bg-zebra .contact-link:hover .contact-link-icon,
html.dark-mode .contact-link:hover .contact-link-icon {
color: var(--cc-link-hover-icon) !important;
border-left: none !important;
}
/* Şube linkleri (branch) — aynı token mantığı */
.branch-contact-link:hover,
.is-solid-card .branch-contact-link:hover,
.is-glass-card .branch-contact-link:hover,
section.bg-zebra .branch-contact-link:hover,
html.dark-mode .branch-contact-link:hover {
background: var(--cc-link-hover-bg) !important;
background-color: var(--cc-link-hover-bg) !important;
border-color: var(--cc-link-hover-border) !important;
box-shadow: var(--cc-link-hover-shadow) !important;
}
.branch-contact-link:hover,
.branch-contact-link:hover *,
.is-solid-card .branch-contact-link:hover *,
.is-glass-card .branch-contact-link:hover *,
section.bg-zebra .branch-contact-link:hover *,
html.dark-mode .branch-contact-link:hover * {
color: var(--cc-link-hover-text) !important;
}
/* =============================================================================
MANDATORY CARD BORDER OVERRIDES (Corporate Theme-Color Border in Both Themes)
============================================================================= */
/* 1. Light Theme Cards (Solid) */
.is-solid-card::after,
.branch-accordion.is-solid-card::after,
.branch-contact-category.is-solid-card::after {
border: 1.5px solid var(--color-primary) !important;
}
/* 2. Dark Theme Cards (Glass) */
.is-glass-card::after,
.branch-accordion.is-glass-card::after,
.branch-contact-category.is-glass-card::after {
border: 1.5px solid var(--color-primary) !important;
}
/* =============================================================================
İLETİŞİM HOVER — TOKEN TÜKETİCİ (eski sabit beyaz hover blokları kaldırıldı)
bg-zebra / theme-color / dark-mode bağlamlarının tümü --cc-link-hover-* ile
çözülür: açık temada ince marka tonu + nötr gölge, koyu temada cam + gölge.
============================================================================= */
section.bg-zebra .contact-link:hover,
section.bg-zebra .branch-contact-link:hover,
html.dark-mode .contact-link:hover,
html.dark-mode .contact-card .contact-link:hover,
html.dark-mode .address-card .contact-link:hover,
html.dark-mode .is-glass-card .contact-link:hover,
html.dark-mode .is-solid-card .contact-link:hover,
html.dark-mode section.bg-white .contact-link:hover,
html.dark-mode section.bg-zebra .contact-link:hover,
html.dark-mode .branch-contact-link:hover,
html.dark-mode section.bg-zebra .branch-contact-link:hover {
background: var(--cc-link-hover-bg) !important;
background-color: var(--cc-link-hover-bg) !important;
border-color: var(--cc-link-hover-border) !important;
box-shadow: var(--cc-link-hover-shadow) !important;
}
section.bg-zebra .contact-link:hover span,
section.bg-zebra .contact-link:hover span *,
section.bg-zebra .contact-link:hover p,
section.bg-zebra .contact-link:hover i,
section.bg-zebra .contact-link:hover .contact-link-value,
section.bg-zebra .contact-link:hover .contact-link-label,
section.bg-zebra .branch-contact-link:hover,
section.bg-zebra .branch-contact-link:hover *,
html.dark-mode .contact-link:hover .contact-link-value,
html.dark-mode .contact-link:hover .contact-link-label,
html.dark-mode .is-glass-card .contact-link:hover *,
html.dark-mode .is-solid-card .contact-link:hover *,
html.dark-mode section.bg-zebra .contact-link:hover *,
html.dark-mode .branch-contact-link:hover * {
color: var(--cc-link-hover-text) !important;
opacity: 1 !important;
}
section.bg-zebra .contact-link:hover .contact-link-icon,
section.bg-zebra .branch-contact-link:hover .contact-link-icon,
html.dark-mode .contact-link:hover .contact-link-icon,
html.dark-mode .is-glass-card .contact-link:hover .contact-link-icon,
html.dark-mode .is-solid-card .contact-link:hover .contact-link-icon,
html.dark-mode section.bg-zebra .contact-link:hover .contact-link-icon {
color: var(--cc-link-hover-icon) !important;
border-left: none !important;
}
/* =============================================================================
HEADING DECORATOR OVERRIDES FOR HIGH CONTRAST ON THEME-COLORED BACKGROUNDS
============================================================================= */
/* 1. Normal (Tinted) Background Modunda Başlık Dekorasyonları */
/* Kırmızı Arka Planlarda Yüksek Opaklık Uyumluluğu */
/* Dark Mode - bg-zebra bölümleri her zaman yüksek kontrastlı beyaz olmalı */
html.dark-mode .bg-zebra .section-heading::before,
html.dark-mode .bg-zebra .prose h2::before,
html.dark-mode .bg-zebra .prose h3::before {
background: linear-gradient(to bottom, #ffffff, transparent) !important;
}
/* =============================================================================
BİRLEŞİK FORM & İLETİŞİM TEMASI — tüm modlar, yüksek kontrast
============================================================================= */
.icf-form {
--icf-card-bg: var(--form-bg);
--icf-card-border: var(--form-border);
--icf-card-shadow: var(--form-shadow);
--icf-label: var(--form-heading);
--icf-subtitle: var(--form-text);
--icf-input-bg: var(--form-input-bg);
--icf-input-text: var(--form-input-text);
--icf-input-border: var(--form-input-border);
--icf-input-placeholder: var(--form-placeholder);
--icf-kvkk-bg: var(--form-kvkk-bg);
--icf-kvkk-text: var(--form-kvkk-text);
--icf-dropdown-bg: var(--form-input-bg);
--icf-dropdown-border: var(--form-input-border);
--icf-dropdown-text: var(--form-input-text);
--icf-dropdown-hover-bg: var(--form-kvkk-bg);
}
#contact-form {
background: var(--form-bg) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid var(--form-border) !important;
box-shadow: var(--form-shadow) !important;
}
#contact-form.is-glass-card::after,
#contact-form.is-solid-card::after {
display: none !important;
content: none !important;
}
#contact-form label,
#contact-form .text-heading,
#contact-form h2 {
color: var(--form-heading) !important;
}
#contact-form .text-body,
#contact-form p {
color: var(--form-text) !important;
}
#contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="file"]),
#contact-form textarea,
#contact-form .csd-trigger {
background: var(--form-input-bg) !important;
color: var(--form-input-text) !important;
border-color: var(--form-input-border) !important;
}
#contact-form input::placeholder,
#contact-form textarea::placeholder {
color: var(--form-placeholder) !important;
}
#contact-form input:focus,
#contact-form textarea:focus,
#contact-form .csd-trigger:focus-visible {
background: var(--form-input-bg) !important;
color: var(--form-input-text) !important;
border-color: var(--color-primary) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(245, 156, 16, 0.15) !important;
}
#contact-form .bg-slate-50 {
background: var(--form-kvkk-bg) !important;
}
#contact-form .bg-slate-50 label,
#contact-form label[for="kvkk_onay"] {
color: var(--form-kvkk-text) !important;
}
#contact-form .csd-list {
background: var(--form-input-bg) !important;
border-color: var(--form-input-border) !important;
color: var(--form-input-text) !important;
}
#contact-form .csd-option {
color: var(--form-input-text) !important;
}
#contact-form .csd-option:hover {
background: var(--form-kvkk-bg) !important;
color: var(--color-primary) !important;
}
#contact-form .csd-value,
#contact-form .csd-arrow {
color: var(--form-input-text) !important;
}
#contact-form input[type="file"] {
color: var(--form-text) !important;
}
#contact-form input[type="file"]::file-selector-button {
background: var(--form-kvkk-bg) !important;
color: var(--color-primary) !important;
border: 1px solid var(--form-input-border) !important;
}
/* Form gönder butonu — solid_all cam override'ını geçersiz kıl */
#contact-form #contact-submit-btn,
#contact-form button[type="submit"].btn-primary,
.icf-form .icf-submit,
.icf-form button.icf-submit.btn-primary {
background: var(--color-button-primary, var(--color-primary)) !important;
background-color: var(--color-button-primary, var(--color-primary)) !important;
color: #ffffff !important;
border: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: 0 8px 20px rgba(245, 156, 16, 0.3) !important;
opacity: 1 !important;
}
#contact-form #contact-submit-btn:hover:not(:disabled),
#contact-form button[type="submit"].btn-primary:hover:not(:disabled),
.icf-form .icf-submit:hover:not(:disabled),
.icf-form button.icf-submit.btn-primary:hover:not(:disabled) {
background: var(--color-button-secondary, var(--color-primary)) !important;
background-color: var(--color-button-secondary, var(--color-primary)) !important;
color: #ffffff !important;
border: none !important;
box-shadow: 0 10px 24px rgba(245, 156, 16, 0.4) !important;
opacity: 1 !important;
}
#contact-form .form-message--error {
background: #fef2f2 !important;
color: #991b1b !important;
border-color: #fecaca !important;
}
#contact-form .form-message--success {
background: #ecfdf5 !important;
color: #065f46 !important;
border-color: #a7f3d0 !important;
}
/* Açık yüzeyli bölümlerde cam kartları opak token yüzeyine çek */
section.bg-white .is-glass-card::after,
section.bg-white .branch-accordion.is-glass-card::after,
section.bg-white .branch-contact-category.is-glass-card::after {
background: var(--cc-surface-bg) !important;
border: 1px solid var(--cc-surface-border) !important;
box-shadow: var(--cc-surface-shadow) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
section.bg-white .is-glass-card .contact-card-title,
section.bg-white .is-glass-card .address-text,
section.bg-white .is-glass-card .contact-link-value,
section.bg-white .is-glass-card .branch-header-info h3,
section.bg-white .is-glass-card .contact-number,
section.bg-white .branch-accordion.is-glass-card .branch-header-info h3,
section.bg-white .branch-accordion.is-glass-card .branch-contact-header,
section.bg-white .branch-accordion.is-glass-card .contact-number {
color: var(--cc-text) !important;
}
section.bg-white .is-glass-card .contact-link-label,
section.bg-white .is-glass-card .contact-link-icon,
section.bg-white .branch-accordion.is-glass-card .branch-header-info p {
color: var(--cc-muted) !important;
}
section.bg-white .is-glass-card .contact-link,
section.bg-white .is-glass-card .branch-contact-category {
background: var(--cc-link-bg) !important;
border-color: var(--cc-link-border) !important;
}
section.bg-zebra .contact-card::after,
section.bg-zebra .address-card::after {
background: var(--cc-surface-bg) !important;
border: 1px solid var(--cc-surface-border) !important;
box-shadow: var(--cc-surface-shadow) !important;
}
section.bg-zebra .contact-card-title,
section.bg-zebra .contact-link-value,
section.bg-zebra .address-text {
color: var(--cc-text) !important;
}
section.bg-zebra .contact-link-label,
section.bg-zebra .contact-link-icon {
color: var(--cc-muted) !important;
}
section.bg-zebra .contact-link {
background: var(--cc-link-bg) !important;
border-color: var(--cc-link-border) !important;
}
html.dark-mode .icf-form {
--icf-card-bg: var(--dm-panel, #25252b);
--icf-card-border: var(--dm-border-soft, #34343c);
--icf-card-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
--icf-label: #f4f4f5;
--icf-subtitle: #9c9ca6;
--icf-input-bg: var(--dm-bg, #121214);
--icf-input-text: #f4f4f5;
--icf-input-border: rgba(255, 255, 255, 0.14);
--icf-input-placeholder: rgba(255, 255, 255, 0.38);
--icf-kvkk-bg: rgba(255, 255, 255, 0.06);
--icf-kvkk-text: #c8c8d0;
--icf-dropdown-bg: var(--dm-elevated, #303038);
--icf-dropdown-border: var(--dm-border-soft, #34343c);
--icf-dropdown-text: #f4f4f5;
--icf-dropdown-hover-bg: var(--dm-hover, #3a3a44);
}
html.dark-mode #contact-form {
background: var(--dm-panel, #25252b) !important;
border-color: var(--dm-border-soft, #34343c) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
}
html.dark-mode #contact-form label,
html.dark-mode #contact-form .text-heading {
color: #f1f5f9 !important;
}
html.dark-mode #contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="file"]),
html.dark-mode #contact-form textarea,
html.dark-mode #contact-form .csd-trigger {
background: var(--dm-bg, #121214) !important;
color: #e2e8f0 !important;
border-color: #525252 !important;
}
html.dark-mode #contact-form .bg-slate-50 {
background: rgba(15, 23, 42, 0.65) !important;
}
html.dark-mode #contact-form .bg-slate-50 label {
color: #cbd5e1 !important;
}
html.dark-mode #contact-form .csd-list {
background: var(--dm-surface, #1c1c20) !important;
border-color: #525252 !important;
}
html.dark-mode section.bg-zebra .contact-card::after,
html.dark-mode section.bg-zebra .address-card::after {
background: rgba(30, 41, 59, 0.92) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
html.dark-mode section.bg-zebra .contact-card-title,
html.dark-mode section.bg-zebra .contact-link-value,
html.dark-mode section.bg-zebra .address-text,
html.dark-mode section.bg-zebra .contact-link-label {
color: #f1f5f9 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html.dark-mode section.bg-zebra .contact-link {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
/* =============================================================================
FINAL — İletişim kartları/linkleri: tema-duyarlı resting + hover (en son söz)
Açık tema beyaz/koyu yazı, koyu tema koyu/açık yazı, hover her temada primary
============================================================================= */
.contact-card.is-solid-card .contact-link,
.address-card.is-solid-card .contact-link,
.branch-contact-category.is-solid-card {
background: var(--cc-link-bg) !important;
border: 1px solid var(--cc-link-border) !important;
transition:
background-color 0.4s ease,
border-color 0.4s ease,
box-shadow 0.4s ease,
color 0.4s ease !important;
}
.contact-card .contact-link:hover,
.address-card .contact-link:hover,
.is-solid-card .contact-link:hover,
.is-glass-card .contact-link:hover,
.branch-contact-category:hover {
background: var(--cc-link-hover-bg) !important;
background-color: var(--cc-link-hover-bg) !important;
border-color: var(--cc-link-hover-border) !important;
box-shadow: var(--cc-link-hover-shadow) !important;
}
.contact-card .contact-link:hover .contact-link-value,
.contact-card .contact-link:hover .contact-link-label,
.address-card .contact-link:hover .contact-link-value,
.address-card .contact-link:hover .contact-link-label,
.is-solid-card .contact-link:hover .contact-link-value,
.is-solid-card .contact-link:hover .contact-link-label,
.is-glass-card .contact-link:hover .contact-link-value,
.is-glass-card .contact-link:hover .contact-link-label {
color: var(--cc-link-hover-text) !important;
opacity: 1 !important;
}
.contact-card .contact-link:hover .contact-link-icon,
.address-card .contact-link:hover .contact-link-icon,
.is-solid-card .contact-link:hover .contact-link-icon,
.is-glass-card .contact-link:hover .contact-link-icon {
color: var(--cc-link-hover-icon) !important;
border-left: none !important;
opacity: 1 !important;
}
/* =============================================================================
FINAL — MEDYA KARTLARI (ürün/içerik/katalog/video) BAĞLAMSAL TOKEN TÜKETİCİ
"En son söz": bölüm zeminine (beyaz/zebra/koyu) göre te_card token'ı.
Böylece solid_all'da zebra (solid2) zemininde de istasyon sayfasıyla aynı
tutarlı kart elde edilir (parlak zeminde opak beyaz, koyu zeminde cam).
============================================================================= */
section.bg-white .product-card, section.bg-white .content-card,
section.bg-white .katalog-card, section.bg-white .video-card,
section.bg-white article[data-animate]:not(.content-card):not(.product-card) {
background: var(--cw-bg) !important;
background-color: var(--cw-bg) !important;
border: 1px solid var(--cw-border) !important;
box-shadow: var(--cw-shadow) !important;
}
section.bg-white article.content-card,
section.bg-white article.product-card,
section.bg-white .content-card,
section.bg-white .product-card {
box-shadow: none !important;
}
section.bg-white .product-card h2, section.bg-white .product-card h3,
section.bg-white .content-card h2, section.bg-white .content-card h3,
section.bg-white .katalog-card h3, section.bg-white .video-card h3,
section.bg-white article[data-animate] h3 {
color: var(--cw-heading) !important; text-shadow: none !important;
}
section.bg-white .product-card p, section.bg-white .content-card p,
section.bg-white .katalog-card p, section.bg-white .video-card p,
section.bg-white .product-card span:not(.text-primary),
section.bg-white .content-card span:not(.text-primary) {
color: var(--cw-text) !important;
}
section.bg-white .product-card i, section.bg-white .content-card i { color: var(--cw-icon) !important; }
section.bg-zebra .product-card, section.bg-zebra .content-card,
section.bg-zebra .katalog-card, section.bg-zebra .video-card,
section.bg-zebra article[data-animate]:not(.content-card):not(.product-card) {
background: var(--cz-bg) !important;
background-color: var(--cz-bg) !important;
border: 1px solid var(--cz-border) !important;
box-shadow: var(--cz-shadow) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
section.bg-zebra article.content-card,
section.bg-zebra article.product-card,
section.bg-zebra .content-card,
section.bg-zebra .product-card {
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
section.bg-zebra .product-card h2, section.bg-zebra .product-card h3,
section.bg-zebra .product-card .text-heading,
section.bg-zebra .content-card h2, section.bg-zebra .content-card h3,
section.bg-zebra .content-card .text-heading,
section.bg-zebra .katalog-card h3, section.bg-zebra .video-card h3,
section.bg-zebra article[data-animate] h3,
section.bg-zebra article[data-animate] .text-heading {
color: var(--cz-heading) !important; text-shadow: none !important;
}
section.bg-zebra .product-card p, section.bg-zebra .content-card p,
section.bg-zebra .katalog-card p, section.bg-zebra .video-card p,
section.bg-zebra .product-card .text-body, section.bg-zebra .content-card .text-body,
section.bg-zebra .product-card span:not(.text-primary),
section.bg-zebra .content-card span:not(.text-primary) {
color: var(--cz-text) !important;
}
section.bg-zebra .product-card .text-primary,
section.bg-zebra .content-card .text-primary,
section.bg-zebra .katalog-card .text-primary,
section.bg-zebra .video-card .text-primary,
section.bg-zebra .product-card a.text-primary,
section.bg-zebra .content-card a.text-primary {
color: var(--color-primary) !important;
opacity: 1 !important;
}
section.bg-white .product-card .text-primary,
section.bg-white .content-card .text-primary,
section.bg-white .katalog-card .text-primary,
section.bg-white .video-card .text-primary {
color: var(--color-primary) !important;
opacity: 1 !important;
}
section.bg-zebra .product-card i, section.bg-zebra .content-card i { color: var(--cz-icon) !important; }
section.bg-slate-900 .product-card, section.bg-slate-900 .content-card,
section.bg-slate-900 .katalog-card, section.bg-slate-900 .video-card,
section.bg-slate-900 article[data-animate] {
background: var(--cd-bg) !important;
background-color: var(--cd-bg) !important;
border: 1px solid var(--cd-border) !important;
box-shadow: var(--cd-shadow) !important;
}
section.bg-slate-900 .product-card h2, section.bg-slate-900 .product-card h3,
section.bg-slate-900 .content-card h2, section.bg-slate-900 .content-card h3,
section.bg-slate-900 .katalog-card h3, section.bg-slate-900 .video-card h3,
section.bg-slate-900 article[data-animate] h3 {
color: var(--cd-heading) !important; text-shadow: none !important;
}
section.bg-slate-900 .product-card p, section.bg-slate-900 .content-card p,
section.bg-slate-900 .katalog-card p, section.bg-slate-900 .video-card p {
color: var(--cd-text) !important;
}
section.bg-slate-900 .product-card i, section.bg-slate-900 .content-card i { color: var(--cd-icon) !important; }
/* Kart başlığı / link hover — cam kartta beyaz kalır, açık kartta marka tonu */
section.bg-white .product-card:hover h3, section.bg-white .content-card:hover h3,
section.bg-white .katalog-card:hover h3, section.bg-white .video-card:hover h3 {
color: var(--cw-link, var(--sw-accent)) !important;
}
section.bg-white .product-card:hover .text-primary,
section.bg-white .content-card:hover .text-primary {
color: var(--color-primary) !important;
}
section.bg-zebra .product-card:hover h3, section.bg-zebra .content-card:hover h3,
section.bg-zebra .katalog-card:hover h3, section.bg-zebra .video-card:hover h3 {
color: var(--cz-link, var(--cw-link)) !important;
}
section.bg-zebra .product-card:hover .text-primary,
section.bg-zebra .content-card:hover .text-primary {
color: var(--cz-link, var(--cz-icon)) !important;
}
section.bg-slate-900 .product-card:hover h3, section.bg-slate-900 .content-card:hover h3,
section.bg-slate-900 .katalog-card:hover h3, section.bg-slate-900 .video-card:hover h3 {
color: var(--cd-link, var(--sd-accent)) !important;
}
/* solid_all / tüm modlar: kart metni token'dan — sabit #fff yok (açık solid kırılmasın) */
html[data-zebra-mode="solid_all"] section.bg-zebra .content-card h3,
html[data-zebra-mode="solid_all"] section.bg-zebra .content-card:hover h3,
html[data-zebra-mode="solid_all"] section.bg-zebra .content-card.group:hover h3,
html[data-zebra-mode="solid_all"] section.bg-zebra .product-card h3,
html[data-zebra-mode="solid_all"] section.bg-zebra .product-card:hover h3,
html[data-zebra-mode="solid_all"] section.bg-zebra .product-card .text-heading,
html[data-zebra-mode="solid_all"] section.bg-zebra .katalog-card:hover h3,
html[data-zebra-mode="solid_all"] section.bg-zebra .video-card:hover h3,
html[data-zebra-mode="solid_all"] .group:hover .group-hover\:text-primary,
[data-solid-all="1"] section.bg-zebra .content-card h3,
[data-solid-all="1"] section.bg-zebra .content-card:hover h3,
[data-solid-all="1"] section.bg-zebra .product-card:hover h3 {
color: var(--cz-heading) !important;
}
html[data-zebra-mode="solid_all"] section.bg-white .content-card h3,
html[data-zebra-mode="solid_all"] section.bg-white .content-card:hover h3,
html[data-zebra-mode="solid_all"] section.bg-white .product-card h3,
html[data-zebra-mode="solid_all"] section.bg-white .product-card:hover h3,
html[data-zebra-mode="solid_all"] section.bg-white .product-card .text-heading,
[data-solid-all="1"] section.bg-white .content-card h3,
[data-solid-all="1"] section.bg-white .content-card:hover h3,
[data-solid-all="1"] section.bg-white .product-card:hover h3 {
color: var(--cw-heading) !important;
}
html[data-zebra-mode="solid_all"] section.bg-zebra .content-card .text-primary,
html[data-zebra-mode="solid_all"] section.bg-zebra .content-card:hover .text-primary,
html[data-zebra-mode="solid_all"] section.bg-zebra .product-card .text-primary,
html[data-zebra-mode="solid_all"] section.bg-white .content-card .text-primary,
html[data-zebra-mode="solid_all"] section.bg-white .content-card:hover .text-primary,
html[data-zebra-mode="solid_all"] section.bg-white .product-card .text-primary,
[data-solid-all="1"] section.bg-zebra .content-card .text-primary,
[data-solid-all="1"] section.bg-zebra .content-card:hover .text-primary {
color: var(--cz-link, var(--cz-icon)) !important;
}
html[data-zebra-mode="solid_all"] section.bg-white .content-card .text-primary,
html[data-zebra-mode="solid_all"] section.bg-white .product-card .text-primary,
[data-solid-all="1"] section.bg-white .content-card .text-primary {
color: var(--cw-link, var(--cw-icon)) !important;
}
/* =============================================================================
FINAL — İLETİŞİM KARTLARI: medya kartlarıyla aynı bağlamsal token mantığı
solid_all / yüksek opaklıkta site metin rengi (beyaz) kart içine sızmasın.
============================================================================= */
section.bg-white .contact-card.is-solid-card::after,
section.bg-white .address-card.is-solid-card::after,
section.bg-white .branch-accordion.is-solid-card::after,
section.bg-white .branch-contact-category.is-solid-card::after {
background: var(--cw-bg) !important;
background-color: var(--cw-bg) !important;
border: 1px solid var(--cw-border) !important;
box-shadow: var(--cw-shadow) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
section.bg-white .contact-card .contact-card-title,
section.bg-white .contact-card .address-text,
section.bg-white .address-card .address-text,
section.bg-white .contact-card .contact-link-value,
section.bg-white .address-card .contact-link-value,
section.bg-white .contact-card .contact-number,
section.bg-white .contact-card .branch-header-info h3,
section.bg-white .contact-card .branch-contact-header {
color: var(--cw-text) !important;
opacity: 1 !important;
visibility: visible !important;
}
section.bg-white .contact-card .contact-link-label,
section.bg-white .address-card .contact-link-label,
section.bg-white .contact-card .contact-link-icon,
section.bg-white .address-card .contact-link-icon,
section.bg-white .contact-card .branch-header-info p {
color: var(--cw-muted) !important;
opacity: 1 !important;
}
section.bg-white .contact-card .contact-link,
section.bg-white .address-card .contact-link,
section.bg-white .contact-card .branch-contact-category {
background: var(--cc-link-bg) !important;
border: 1px solid var(--cc-link-border) !important;
}
section.bg-zebra .contact-card.is-solid-card::after,
section.bg-zebra .address-card.is-solid-card::after,
section.bg-zebra .branch-accordion.is-solid-card::after,
section.bg-zebra .branch-contact-category.is-solid-card::after {
background: var(--cz-bg) !important;
background-color: var(--cz-bg) !important;
border: 1px solid var(--cz-border) !important;
box-shadow: var(--cz-shadow) !important;
}
section.bg-zebra .contact-card .contact-card-title,
section.bg-zebra .contact-card .address-text,
section.bg-zebra .address-card .address-text,
section.bg-zebra .contact-card .contact-link-value,
section.bg-zebra .address-card .contact-link-value,
section.bg-zebra .contact-card .contact-number,
section.bg-zebra .contact-card .branch-header-info h3,
section.bg-zebra .contact-card .branch-contact-header {
color: var(--cz-text) !important;
opacity: 1 !important;
visibility: visible !important;
}
section.bg-zebra .contact-card .contact-link-label,
section.bg-zebra .address-card .contact-link-label,
section.bg-zebra .contact-card .contact-link-icon,
section.bg-zebra .address-card .contact-link-icon,
section.bg-zebra .contact-card .branch-header-info p {
color: var(--cz-muted) !important;
opacity: 1 !important;
}
section.bg-zebra .contact-card .contact-link,
section.bg-zebra .address-card .contact-link,
section.bg-zebra .contact-card .branch-contact-category {
background: var(--cc-link-bg) !important;
border: 1px solid var(--cc-link-border) !important;
}
section.bg-zebra .contact-card .contact-link-value,
section.bg-zebra .address-card .contact-link-value,
section.bg-zebra .contact-card .contact-link-label,
section.bg-zebra .address-card .contact-link-label,
section.bg-zebra .contact-card .contact-card-title,
section.bg-zebra .contact-card .address-text,
section.bg-zebra .address-card .address-text {
color: var(--cz-text) !important;
}
section.bg-zebra .contact-card .contact-link-label,
section.bg-zebra .address-card .contact-link-label,
section.bg-zebra .contact-card .contact-link-icon,
section.bg-zebra .address-card .contact-link-icon {
color: var(--cz-muted) !important;
}
/* is-glass-card + contact.css beyaz metin override'ını ez (opak açık yüzeyde) */
section.bg-zebra .contact-card.is-glass-card .contact-card-title,
section.bg-zebra .contact-card.is-glass-card .address-text,
section.bg-zebra .address-card.is-glass-card .address-text,
section.bg-zebra .contact-card.is-glass-card .contact-link-value,
section.bg-zebra .address-card.is-glass-card .contact-link-value,
section.bg-zebra .contact-card.is-glass-card .contact-link-label,
section.bg-zebra .address-card.is-glass-card .contact-link-label,
section.bg-zebra .contact-card.is-glass-card .contact-link-icon,
section.bg-zebra .address-card.is-glass-card .contact-link-icon {
color: var(--cz-text) !important;
}
section.bg-zebra .contact-card.is-glass-card .contact-link-label,
section.bg-zebra .address-card.is-glass-card .contact-link-label,
section.bg-zebra .contact-card.is-glass-card .contact-link-icon,
section.bg-zebra .address-card.is-glass-card .contact-link-icon {
color: var(--cz-muted) !important;
}
section.bg-zebra .contact-card.is-glass-card::after,
section.bg-zebra .address-card.is-glass-card::after {
background: var(--cz-bg) !important;
background-color: var(--cz-bg) !important;
border: 1px solid var(--cz-border) !important;
box-shadow: var(--cz-shadow) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Kart gövdesi hover: cam parlama yok — yalnızca .contact-link satırı vurgulanır */
.contact-card.is-solid-card:hover::after,
.address-card.is-solid-card:hover::after,
.contact-card.is-glass-card:hover::after,
.address-card.is-glass-card:hover::after,
section.bg-white .contact-card:hover:not(:has(.contact-link:hover))::after,
section.bg-white .address-card:hover::after,
section.bg-zebra .contact-card:hover:not(:has(.contact-link:hover))::after,
section.bg-zebra .address-card:hover::after {
background: var(--cc-surface-bg) !important;
background-color: var(--cc-surface-bg) !important;
border-color: var(--cc-surface-border) !important;
box-shadow: var(--cc-surface-shadow) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transform: none !important;
}
/* ===========================
Dark mode navbar: disable blur/glass
(dynamic_styles is loaded after page CSS, so this override wins)
=========================== */
html.dark-mode #overflow-dropdown,
html.dark-mode #overflow-dropdown *,
html.dark-mode .submenu,
html.dark-mode .overflow-submenu,
html.dark-mode #menu-overlay,
html.dark-mode #mobile-menu .backdrop-blur-sm {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html.dark-mode #overflow-dropdown,
html.dark-mode .submenu,
html.dark-mode .overflow-submenu,
html.dark-mode #menu-overlay {
background-color: var(--dm-surface, #1c1c20) !important;
}
/* =============================================================================
SMART CARD GRID — flex ile son satır ortalama (hover çerçeve sabit)
============================================================================= */
.smart-tile-grid {
--sc-cols: 1;
--sc-gap: 1.5rem;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: var(--sc-gap) !important;
}
.smart-tile-grid > .smart-tile,
.smart-tile-grid > .video-card,
.smart-tile-grid > .katalog-card {
box-sizing: border-box !important;
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
@media (min-width: 640px) {
.smart-tile-grid {
--sc-cols: 2;
--sc-gap: 2rem;
}
.smart-tile-grid > .smart-tile,
.smart-tile-grid > .video-card,
.smart-tile-grid > .katalog-card {
flex-basis: calc((100% - var(--sc-gap)) / 2) !important;
width: calc((100% - var(--sc-gap)) / 2) !important;
max-width: calc((100% - var(--sc-gap)) / 2) !important;
}
}
@media (min-width: 1024px) {
.smart-tile-grid {
--sc-cols: 3;
}
.smart-tile-grid > .smart-tile,
.smart-tile-grid > .video-card,
.smart-tile-grid > .katalog-card {
flex-basis: calc((100% - (var(--sc-gap) * 2)) / 3) !important;
width: calc((100% - (var(--sc-gap) * 2)) / 3) !important;
max-width: calc((100% - (var(--sc-gap) * 2)) / 3) !important;
}
}
/*
* Smart-tile: tek kaynak — theme_engine kart token'ları (--cw-* / --cz-*).
* Mod/tema ne olursa olsun yüzey + metin aynı token setinden gelir;
* "beyaz kart + açık yazı" / "koyu zemin + koyu yazı" çakışması olmaz.
*/
.smart-tile,
.smart-tile-grid > .smart-tile {
position: relative !important;
isolation: auto !important;
overflow: hidden !important;
border-radius: var(--border-radius-base, 8px) !important;
outline: none !important;
transform: none !important;
filter: none !important;
transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
section.bg-white .smart-tile,
section.bg-white .smart-tile-grid > .smart-tile {
background: var(--cw-bg) !important;
background-color: var(--cw-bg) !important;
border: 1px solid var(--cw-border) !important;
box-shadow: var(--cw-shadow) !important;
}
section.bg-zebra .smart-tile,
section.bg-zebra .smart-tile-grid > .smart-tile {
background: var(--cz-bg) !important;
background-color: var(--cz-bg) !important;
border: 1px solid var(--cz-border) !important;
box-shadow: var(--cz-shadow) !important;
}
section.bg-white .smart-tile h2,
section.bg-white .smart-tile h3,
section.bg-white .smart-tile .text-heading {
color: var(--cw-heading) !important;
}
section.bg-white .smart-tile p,
section.bg-white .smart-tile .text-body {
color: var(--cw-text) !important;
}
section.bg-zebra .smart-tile h2,
section.bg-zebra .smart-tile h3,
section.bg-zebra .smart-tile .text-heading {
color: var(--cz-heading) !important;
}
section.bg-zebra .smart-tile p,
section.bg-zebra .smart-tile .text-body {
color: var(--cz-text) !important;
}
.smart-tile__body,
.smart-tile > .p-5,
.smart-tile > .p-5.sm\:p-6,
.smart-tile > div:last-child:not(.smart-tile__media) {
background: transparent !important;
}
.smart-tile img,
.smart-tile__media img,
section .smart-tile img {
border-radius: 0 !important;
}
.smart-tile__media,
.smart-tile__media img,
.smart-tile__media span {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
section.bg-zebra .smart-tile-grid {
position: relative;
z-index: 1;
}
html:not([data-solid-all="1"]) .bg-zebra {
background-image: none !important;
}
.smart-tile__media {
overflow: hidden !important;
border-radius: 0 !important;
}
.smart-tile__media img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
transform: none !important;
transition: transform 0.45s ease !important;
}
html[data-zebra-mode="solid_all"] .smart-tile:hover .smart-tile__media img {
transform: scale(1.04) !important;
}
/* =============================================================================
PROFILE TILE — tam renk modunda cam kart
============================================================================= */
html[data-zebra-mode="solid_all"] .profile-tile {
background: var(--glass-bg) !important;
backdrop-filter: var(--glass-blur) !important;
-webkit-backdrop-filter: var(--glass-blur) !important;
border: 1px solid var(--glass-border) !important;
box-shadow: var(--glass-shadow) !important;
}
html[data-zebra-mode="solid_all"] .profile-tile:has(.profile-tile__link:hover),
html[data-zebra-mode="solid_all"] .profile-tile:has(.profile-tile__link:focus-visible) {
border-color: var(--glass-hover-border, rgba(255, 255, 255, 0.35)) !important;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22) !important;
}
html[data-zebra-mode="solid_all"] section.bg-white .profile-tile__title {
color: #ffffff !important;
}
html[data-zebra-mode="solid_all"] section.bg-zebra .profile-tile__title {
color: #0f172a !important;
}
html[data-zebra-mode="solid_all"] .profile-tile__cta {
color: rgba(0, 0, 0, 0.75) !important;
border-color: rgba(0, 0, 0, 0.25) !important;
}
html[data-zebra-mode="solid_all"] .profile-tile:has(.profile-tile__link:hover) .profile-tile__title {
color: #0f172a !important;
}
html[data-zebra-mode="solid_all"] .profile-tile-more {
background: var(--glass-bg) !important;
backdrop-filter: var(--glass-blur) !important;
-webkit-backdrop-filter: var(--glass-blur) !important;
border: 1px solid var(--glass-border) !important;
box-shadow: var(--glass-shadow) !important;
}
html[data-zebra-mode="solid_all"] .profile-tile-more:hover {
border-color: var(--glass-hover-border, rgba(255, 255, 255, 0.35)) !important;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22) !important;
}
html[data-zebra-mode="solid_all"] section.bg-zebra .profile-tile-more .text-heading,
html[data-zebra-mode="solid_all"] section.bg-white .profile-tile-more .text-heading {
color: #0f172a !important;
}
/* =============================================================================
İLETİŞİM HOVER — Tam Site koyu zemin (en son söz, token hover ezmesin)
Açık mint/beyaz hover + beyaz yazı patlamasını engeller.
============================================================================= */
html[data-zebra-mode="solid_all"] section.bg-zebra .contact-card .contact-link:hover,
html[data-zebra-mode="solid_all"] section.bg-zebra .address-card .contact-link:hover,
html[data-zebra-mode="solid_all"] section.bg-white .contact-card .contact-link:hover,
html[data-zebra-mode="solid_all"] section.bg-white .address-card .contact-link:hover,
html[data-zebra-mode="solid_all"] section.bg-zebra .branch-contact-category:hover,
html[data-zebra-mode="solid_all"] section.bg-white .branch-contact-category:hover {
background: rgba(255, 255, 255, 0.14) !important;
background-color: rgba(255, 255, 255, 0.14) !important;
border-color: rgba(255, 255, 255, 0.38) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 14px rgba(0, 0, 0, 0.12) !important;
color: #ffffff !important;
}
html[data-zebra-mode="solid_all"] section.bg-zebra .contact-card .contact-link:hover .contact-link-value,
html[data-zebra-mode="solid_all"] section.bg-zebra .address-card .contact-link:hover .contact-link-value,
html[data-zebra-mode="solid_all"] section.bg-white .contact-card .contact-link:hover .contact-link-value,
html[data-zebra-mode="solid_all"] section.bg-white .address-card .contact-link:hover .contact-link-value,
html[data-zebra-mode="solid_all"] section.bg-zebra .contact-card .contact-link:hover .contact-link-label,
html[data-zebra-mode="solid_all"] section.bg-zebra .address-card .contact-link:hover .contact-link-label,
html[data-zebra-mode="solid_all"] section.bg-white .contact-card .contact-link:hover .contact-link-label,
html[data-zebra-mode="solid_all"] section.bg-white .address-card .contact-link:hover .contact-link-label,
html[data-zebra-mode="solid_all"] section.bg-zebra .contact-card .contact-link:hover .contact-link-icon,
html[data-zebra-mode="solid_all"] section.bg-zebra .address-card .contact-link:hover .contact-link-icon,
html[data-zebra-mode="solid_all"] section.bg-white .contact-card .contact-link:hover .contact-link-icon,
html[data-zebra-mode="solid_all"] section.bg-white .address-card .contact-link:hover .contact-link-icon,
html[data-zebra-mode="solid_all"] section.bg-zebra .contact-card .contact-link:hover span,
html[data-zebra-mode="solid_all"] section.bg-zebra .address-card .contact-link:hover span,
html[data-zebra-mode="solid_all"] section.bg-white .contact-card .contact-link:hover span,
html[data-zebra-mode="solid_all"] section.bg-white .address-card .contact-link:hover span {
color: #ffffff !important;
opacity: 1 !important;
}
html[data-zebra-mode="solid_all"] section.bg-zebra .contact-card .contact-link:hover .contact-link-label,
html[data-zebra-mode="solid_all"] section.bg-zebra .address-card .contact-link:hover .contact-link-label,
html[data-zebra-mode="solid_all"] section.bg-white .contact-card .contact-link:hover .contact-link-label,
html[data-zebra-mode="solid_all"] section.bg-white .address-card .contact-link:hover .contact-link-label {
color: rgba(255, 255, 255, 0.82) !important;
}
html[data-zebra-mode="solid_all"] section.bg-zebra .contact-card .contact-link:hover .contact-link-icon,
html[data-zebra-mode="solid_all"] section.bg-zebra .address-card .contact-link:hover .contact-link-icon,
html[data-zebra-mode="solid_all"] section.bg-white .contact-card .contact-link:hover .contact-link-icon,
html[data-zebra-mode="solid_all"] section.bg-white .address-card .contact-link:hover .contact-link-icon {
border-left: none !important;
}
html[data-zebra-mode="solid_all"] .contact-card-header,
html[data-zebra-mode="solid_all"] section.bg-zebra .contact-card-header,
html[data-zebra-mode="solid_all"] section.bg-white .contact-card-header {
border-bottom: none !important;
}
html[data-zebra-mode="solid_all"] .contact-card .contact-link-icon,
html[data-zebra-mode="solid_all"] .address-card .contact-link-icon {
border-left: none !important;
}
/* İletişim kartları — ayırıcı çizgiler kapalı (tüm modlar) */
.contact-card-header,
.address-card .contact-card-header,
.contact-card .contact-link-icon,
.address-card .contact-link-icon,
.contact-link .contact-link-icon {
border-bottom: none !important;
border-left: none !important;
}
html[data-zebra-mode="solid_all"] section.bg-zebra .contact-card:has(.contact-link:hover)::after,
html[data-zebra-mode="solid_all"] section.bg-zebra .address-card:has(.contact-link:hover)::after,
html[data-zebra-mode="solid_all"] section.bg-white .contact-card:has(.contact-link:hover)::after,
html[data-zebra-mode="solid_all"] section.bg-white .address-card:has(.contact-link:hover)::after {
background: rgba(255, 255, 255, 0.1) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15) !important;
}
/* =============================================================================
NAVBAR + TOPBAR — cam nav-glass-bar'da; topbar çizgisiz solid
============================================================================= */
#header:not(.scrolled) {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#header:not(.scrolled) .nav-glass-bar {
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
}
html.dark-mode #header:not(.scrolled) .nav-glass-bar {
background: rgba(18, 18, 20, 0.42) !important;
background-color: rgba(18, 18, 20, 0.42) !important;
backdrop-filter: blur(30px) saturate(180%) !important;
-webkit-backdrop-filter: blur(30px) saturate(180%) !important;
}
#header.scrolled,
#header.scrolled .nav-glass-bar {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Navbar alt gölge — içerikten ayır (FINAL; none ezmelerini geç) */
#header.scrolled {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(0, 0, 0, 0.06) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
html[data-solid-all="1"] #header.scrolled,
html[data-zebra-mode="solid_all"] #header.scrolled {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(0, 0, 0, 0.22) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
/* Koyu tema scrolled: kömür (slate/lacivert gölge ve solid_bg1 ezmesin) */
html.dark-mode #header.scrolled {
background: #121214 !important;
background-color: #121214 !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html.dark-mode #header.scrolled .nav-glass-bar {
background: transparent !important;
background-color: transparent !important;
}
#header:not(.scrolled) .nav-glass-bar {
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18) !important;
}
#topbar {
background-color: var(--topbar-bg, var(--solid-bg1, var(--color-bg-dark))) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
box-shadow: none !important;
border-bottom: none !important;
}
#topbar,
#topbar a,
#topbar button,
#topbar span,
#topbar i,
#topbar .text-slate-300,
#topbar .text-slate-400 {
color: #ffffff !important;
}
/* Klasik mod — açık temada beyaz bölüm panel başlık/gövde (soluk heading koruması) */
html:not(.dark-mode) {
--color-text-heading: #3f3e3e !important;
--sw-heading: #3f3e3e !important;
--color-text-body: #6f6e6e !important;
--sw-text: #6f6e6e !important;
}
html:not(.dark-mode) section.bg-white .text-heading,
html:not(.dark-mode) section.bg-white .homepage-section-title,
html:not(.dark-mode) section.bg-white h1,
html:not(.dark-mode) section.bg-white h2,
html:not(.dark-mode) section.bg-white h3,
html:not(.dark-mode) section.bg-white h4,
html:not(.dark-mode) section.bg-white h5,
html:not(.dark-mode) section.bg-white h6,
html:not(.dark-mode) section.bg-white .prose strong,
html:not(.dark-mode) section.bg-white .prose b,
html:not(.dark-mode) section.bg-white strong,
html:not(.dark-mode) section.bg-white b {
color: #3f3e3e !important;
-webkit-text-fill-color: #3f3e3e !important;
opacity: 1 !important;
}
html:not(.dark-mode) section.bg-white .text-body,
html:not(.dark-mode) section.bg-white .homepage-section-desc,
html:not(.dark-mode) section.bg-white p:not(.text-primary):not(.text-white),
html:not(.dark-mode) section.bg-white .prose,
html:not(.dark-mode) section.bg-white .prose p,
html:not(.dark-mode) section.bg-white .prose li {
color: #6f6e6e !important;
-webkit-text-fill-color: #6f6e6e !important;
}
/* =============================================================================
UNIVERSAL FINAL — her mod (tint / solid_all) + light / dark
Kart + bölüm metni yalnızca token; legacy sabit #fff/#0f172a ezmesin.
============================================================================= */
section.bg-white .product-card,
section.bg-white .content-card,
section.bg-white .katalog-card,
section.bg-white .video-card,
section.bg-white article.product-card,
section.bg-white article.content-card {
background: var(--cw-bg) !important;
background-color: var(--cw-bg) !important;
border-color: var(--cw-border) !important;
box-shadow: var(--cw-shadow) !important;
}
section.bg-zebra .product-card,
section.bg-zebra .content-card,
section.bg-zebra .katalog-card,
section.bg-zebra .video-card,
section.bg-zebra article.product-card,
section.bg-zebra article.content-card {
background: var(--cz-bg) !important;
background-color: var(--cz-bg) !important;
border-color: var(--cz-border) !important;
box-shadow: var(--cz-shadow) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html:not(.dark-mode) section.bg-white article.content-card,
html:not(.dark-mode) section.bg-white article.product-card,
html:not(.dark-mode) section.bg-white .content-card,
html:not(.dark-mode) section.bg-white .product-card,
html:not(.dark-mode) section.bg-zebra article.content-card,
html:not(.dark-mode) section.bg-zebra article.product-card,
html:not(.dark-mode) section.bg-zebra .content-card,
html:not(.dark-mode) section.bg-zebra .product-card {
background: #ffffff !important;
background-color: #ffffff !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
filter: none !important;
}
section.bg-white .product-card h2,
section.bg-white .product-card h3,
section.bg-white .product-card .text-heading,
section.bg-white .content-card h2,
section.bg-white .content-card h3,
section.bg-white .content-card .text-heading,
section.bg-white .katalog-card h3,
section.bg-white .video-card h3,
html.dark-mode section.bg-white .product-card h3,
html.dark-mode section.bg-white .content-card h3 {
color: var(--cw-heading) !important;
-webkit-text-fill-color: var(--cw-heading) !important;
}
section.bg-white .product-card p,
section.bg-white .product-card .text-body,
section.bg-white .content-card p,
section.bg-white .content-card .text-body,
section.bg-white .katalog-card p,
section.bg-white .video-card p,
html.dark-mode section.bg-white .product-card p,
html.dark-mode section.bg-white .content-card p {
color: var(--cw-text) !important;
-webkit-text-fill-color: var(--cw-text) !important;
}
section.bg-white .product-card .text-primary,
section.bg-white .content-card .text-primary,
section.bg-white .katalog-card .text-primary,
section.bg-white .video-card .text-primary,
html.dark-mode section.bg-white .product-card .text-primary,
html.dark-mode section.bg-white .content-card .text-primary {
color: var(--cw-link, var(--cw-icon)) !important;
}
section.bg-zebra .product-card h2,
section.bg-zebra .product-card h3,
section.bg-zebra .product-card .text-heading,
section.bg-zebra .content-card h2,
section.bg-zebra .content-card h3,
section.bg-zebra .content-card .text-heading,
section.bg-zebra .katalog-card h3,
section.bg-zebra .video-card h3,
html.dark-mode section.bg-zebra .product-card h3,
html.dark-mode section.bg-zebra .content-card h3,
html[data-zebra-mode="solid_all"] section.bg-zebra .product-card h3,
html[data-zebra-mode="solid_all"] section.bg-zebra .content-card h3 {
color: var(--cz-heading) !important;
-webkit-text-fill-color: var(--cz-heading) !important;
}
section.bg-zebra .product-card p,
section.bg-zebra .product-card .text-body,
section.bg-zebra .content-card p,
section.bg-zebra .content-card .text-body,
section.bg-zebra .katalog-card p,
section.bg-zebra .video-card p,
html.dark-mode section.bg-zebra .product-card p,
html.dark-mode section.bg-zebra .content-card p {
color: var(--cz-text) !important;
-webkit-text-fill-color: var(--cz-text) !important;
}
section.bg-zebra .product-card .text-primary,
section.bg-zebra .content-card .text-primary,
section.bg-zebra .katalog-card .text-primary,
section.bg-zebra .video-card .text-primary,
html.dark-mode section.bg-zebra .product-card .text-primary,
html.dark-mode section.bg-zebra .content-card .text-primary,
html[data-zebra-mode="solid_all"] section.bg-zebra .product-card .text-primary,
html[data-zebra-mode="solid_all"] section.bg-zebra .content-card .text-primary {
color: var(--cz-link, var(--cz-icon)) !important;
}
/* Bölüm başlıkları (kart dışı) — her mod */
section.bg-zebra > .container .homepage-section-title,
section.bg-zebra > .container .homepage-section-header .text-heading,
section.bg-zebra .homepage-section-header h2 {
color: var(--sz-heading) !important;
-webkit-text-fill-color: var(--sz-heading) !important;
}
section.bg-zebra .homepage-section-header .homepage-section-desc,
section.bg-zebra .homepage-section-header .text-body {
color: var(--sz-text) !important;
}
section.bg-zebra .homepage-section-label,
section.bg-zebra .homepage-section-header .text-primary {
color: var(--sz-eyebrow, var(--sz-accent)) !important;
}
section.bg-white > .container .homepage-section-title,
section.bg-white .homepage-section-header h2 {
color: var(--sw-heading) !important;
}
section.bg-white .homepage-section-header .homepage-section-desc {
color: var(--sw-text) !important;
}
/* =============================================================================
HOVER KAYBOLMASIN — doygun zebra'da primary=zemin → turuncu-üstü-turuncu yok
Devamını Oku + Daha Fazla Bilgi her durumda okunaklı kalsın.
============================================================================= */
/* Açık zebra: marka rengi link OK (beyaz kart üstünde) */
section.bg-zebra .product-card:hover .text-primary,
section.bg-zebra .content-card:hover .text-primary,
section.bg-zebra .group:hover .text-primary {
color: var(--cz-link, var(--cz-icon)) !important;
opacity: 1 !important;
}
/* =============================================================================
FINAL — Kart CTA (Devamını Oku): her zaman okunaklı
Açık kart zemininde beyaz metin kullanma (görünmez olur).
Overlay layout kendi beyaz metnini ayrıca tanımlar.
============================================================================= */
main .content-card > a.content-card__link,
main .product-card > a,
main .content-card > a {
position: relative;
z-index: 1;
cursor: pointer;
text-decoration: none;
color: inherit;
}
main .content-card .content-card__cta,
main .content-card > a .content-card__cta-text,
main .product-card > a .content-card__cta-text,
main .product-card .content-card__cta-text,
section .content-card .content-card__cta,
section .content-card > a .content-card__cta-text,
section .product-card > a .content-card__cta-text,
section .product-card .content-card__cta-text {
color: var(--color-primary) !important;
-webkit-text-fill-color: var(--color-primary) !important;
opacity: 1 !important;
visibility: visible !important;
display: inline-flex !important;
align-items: center;
text-decoration: underline;
text-underline-offset: 0.22em;
text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}
main .content-card .content-card__cta-arrow,
main .content-card > a .content-card__cta-arrow,
main .product-card > a .content-card__cta-arrow,
section .content-card .content-card__cta-arrow,
section .content-card > a .content-card__cta-arrow,
section .product-card > a .content-card__cta-arrow,
section .product-card .content-card__cta-arrow {
color: var(--color-primary) !important;
-webkit-text-fill-color: var(--color-primary) !important;
opacity: 1 !important;
visibility: visible !important;
display: inline-flex !important;
align-items: center;
text-decoration: none !important;
}
main .content-card .content-card__cta i,
main .content-card > a .content-card__cta-text i,
main .content-card > a .content-card__cta-arrow i,
main .product-card > a .content-card__cta-text i,
main .product-card > a .content-card__cta-arrow i,
section .content-card .content-card__cta i,
section .content-card > a .content-card__cta-text i,
section .content-card > a .content-card__cta-arrow i,
section .product-card > a .content-card__cta-text i,
section .product-card > a .content-card__cta-arrow i {
color: var(--color-primary) !important;
-webkit-text-fill-color: var(--color-primary) !important;
opacity: 1 !important;
}
section.bg-white .content-card .content-card__cta,
section.bg-white .content-card > a .content-card__cta-text,
section.bg-white .product-card > a .content-card__cta-text,
section.bg-white .product-card .content-card__cta-text {
color: var(--cw-link, var(--color-primary)) !important;
-webkit-text-fill-color: var(--cw-link, var(--color-primary)) !important;
text-decoration-color: currentColor;
}
section.bg-white .content-card > a .content-card__cta-arrow,
section.bg-white .product-card > a .content-card__cta-arrow,
section.bg-white .product-card .content-card__cta-arrow {
color: var(--cw-link, var(--color-primary)) !important;
-webkit-text-fill-color: var(--cw-link, var(--color-primary)) !important;
}
section.bg-white .content-card .content-card__cta i,
section.bg-white .content-card > a .content-card__cta-text i,
section.bg-white .content-card > a .content-card__cta-arrow i,
section.bg-white .product-card > a .content-card__cta-text i,
section.bg-white .product-card > a .content-card__cta-arrow i {
color: var(--cw-link, var(--color-primary)) !important;
-webkit-text-fill-color: var(--cw-link, var(--color-primary)) !important;
}
section.bg-zebra .content-card .content-card__cta,
section.bg-zebra .content-card > a .content-card__cta-text,
section.bg-zebra .product-card > a .content-card__cta-text,
section.bg-zebra .product-card .content-card__cta-text {
color: var(--cz-link, var(--color-primary)) !important;
-webkit-text-fill-color: var(--cz-link, var(--color-primary)) !important;
text-decoration-color: currentColor;
}
section.bg-zebra .content-card > a .content-card__cta-arrow,
section.bg-zebra .product-card > a .content-card__cta-arrow,
section.bg-zebra .product-card .content-card__cta-arrow {
color: var(--cz-link, var(--color-primary)) !important;
-webkit-text-fill-color: var(--cz-link, var(--color-primary)) !important;
}
section.bg-zebra .content-card .content-card__cta i,
section.bg-zebra .content-card > a .content-card__cta-text i,
section.bg-zebra .content-card > a .content-card__cta-arrow i,
section.bg-zebra .product-card > a .content-card__cta-text i,
section.bg-zebra .product-card > a .content-card__cta-arrow i {
color: var(--cz-link, var(--color-primary)) !important;
-webkit-text-fill-color: var(--cz-link, var(--color-primary)) !important;
}
/* Overlay kart: koyu gradyan üstünde beyaz CTA */
/* Misafir yorumu kartları — tam renk modunda açık yazı */
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section.guest-reviews-home .guest-review-card__text,
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section.guest-reviews-home .guest-review-card__quote,
html[data-zebra-mode="solid_all"] #misafir-yorumlari.guest-reviews-home .guest-review-card__text,
html[data-zebra-mode="solid_all"] #misafir-yorumlari.guest-reviews-home .guest-review-card__quote,
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section .guest-review-card__text,
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section .guest-review-card__quote,
html[data-zebra-mode="solid_all"] .guest-reviews-page .guest-review-card__text,
html[data-zebra-mode="solid_all"] .guest-reviews-page .guest-review-card__quote {
color: var(--cz-text, rgba(255, 255, 255, 0.88)) !important;
-webkit-text-fill-color: var(--cz-text, rgba(255, 255, 255, 0.88)) !important;
}
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section.guest-reviews-home .guest-review-card__name,
html[data-zebra-mode="solid_all"] #misafir-yorumlari.guest-reviews-home .guest-review-card__name,
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section .guest-review-card__name,
html[data-zebra-mode="solid_all"] .guest-reviews-page .guest-review-card__name,
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section .guest-review-card cite.guest-review-card__name {
color: var(--cz-heading, #ffffff) !important;
-webkit-text-fill-color: var(--cz-heading, #ffffff) !important;
}
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section.guest-reviews-home .guest-review-card__meta,
html[data-zebra-mode="solid_all"] #misafir-yorumlari.guest-reviews-home .guest-review-card__meta,
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section .guest-review-card__meta,
html[data-zebra-mode="solid_all"] .guest-reviews-page .guest-review-card__meta {
color: var(--cz-muted, rgba(255, 255, 255, 0.62)) !important;
-webkit-text-fill-color: var(--cz-muted, rgba(255, 255, 255, 0.62)) !important;
}
html[data-zebra-mode="solid_all"] #misafir-yorumlari.guest-reviews-home .guest-review-card__text::selection,
html[data-zebra-mode="solid_all"] #misafir-yorumlari.guest-reviews-home .guest-review-card__quote::selection,
html[data-zebra-mode="solid_all"] #misafir-yorumlari.guest-reviews-home .guest-review-card__name::selection,
html[data-zebra-mode="solid_all"] #misafir-yorumlari.guest-reviews-home .guest-review-card__meta::selection,
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section .guest-review-card__text::selection,
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section .guest-review-card__name::selection,
html[data-zebra-mode="solid_all"] section.bg-zebra.guest-reviews-section .guest-review-card__meta::selection,
html[data-zebra-mode="solid_all"] .guest-reviews-page .guest-review-card__text::selection,
html[data-zebra-mode="solid_all"] .guest-reviews-page .guest-review-card__name::selection,
html[data-zebra-mode="solid_all"] .guest-reviews-page .guest-review-card__meta::selection {
background-color: rgba(255, 255, 255, 0.28) !important;
color: var(--cz-heading, #ffffff) !important;
-webkit-text-fill-color: var(--cz-heading, #ffffff) !important;
}
/* =============================================================================
SLASH CARD (.sc) — Tam Site: koyu foto overlay
============================================================================= */
/* FINAL — Hero banner metni (global h1/p !important ezmesin) */
html .hero-section h1,
html .hero-section h2,
html main .hero-section h1,
html[data-zebra-surface="light"] .hero-section h1,
html[data-zebra-mode="solid_all"] .hero-section h1,
html[data-zebra-mode="solid_all"] .hero-section-solid h1,
html[data-zebra-mode="solid_all"] .legal-banner h1 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
}
html .hero-section p,
html main .hero-section p,
html[data-zebra-surface="light"] .hero-section p,
html[data-zebra-mode="solid_all"] .hero-section p,
html[data-zebra-mode="solid_all"] .hero-section-solid p,
html[data-zebra-mode="solid_all"] .legal-banner p {
color: rgba(255, 255, 255, 0.88) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}
/* FINAL — Görsel kart başlıkları: Tam Site = koyu overlay, Klasik = tema rengi */
html[data-zebra-mode="tint"] a.st,
html[data-zebra-mode="tint"] a.sc {
background: #ffffff !important;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
html[data-zebra-mode="tint"] .st__img img,
html[data-zebra-mode="tint"] .sc__img img {
opacity: 1 !important;
}
html[data-zebra-mode="tint"] .st__overlay {
background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.85) 40%, transparent 72%) !important;
}
html[data-zebra-mode="tint"] .sc__slash {
background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.85) 40%, transparent 72%) !important;
}
html[data-zebra-mode="tint"] .st__title,
html[data-zebra-mode="tint"] .st p.st__title,
html[data-zebra-mode="tint"] .sc .sc__title,
html[data-zebra-mode="tint"] .sc h3.sc__title,
html body section.bg-zebra .st .st__title,
html body section.bg-white .st .st__title,
html body section.bg-zebra .sc .sc__title,
html body section.bg-white .sc .sc__title {
color: var(--cz-heading, #0f172a) !important;
-webkit-text-fill-color: var(--cz-heading, #0f172a) !important;
text-shadow: none !important;
}
html[data-zebra-mode="tint"] .sc .sc__desc,
html[data-zebra-mode="tint"] .sc .sc__cta-label,
html[data-zebra-mode="tint"] .sc .sc__cta-btn,
html[data-zebra-mode="tint"] .sc .sc__cta-btn i {
color: var(--cz-text, #334155) !important;
-webkit-text-fill-color: var(--cz-text, #334155) !important;
}
html[data-zebra-mode="tint"] .st__dot {
border-color: rgba(15, 23, 42, 0.18) !important;
color: var(--color-primary) !important;
}
html[data-zebra-mode="tint"] .sc__footer {
border-top-color: rgba(15, 23, 42, 0.08) !important;
}
html[data-zebra-mode="tint"] .sc__cta-btn {
border-color: rgba(15, 23, 42, 0.15) !important;
}
html[data-zebra-mode="tint"] .st-more {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.08) !important;
}
html[data-zebra-mode="tint"] .st-more__label {
color: rgba(15, 23, 42, 0.55) !important;
}
/* FINAL — Overlay kart katmanları (Tailwind img + zebra kuralları ezmesin) */
a.st,
a.sc {
position: relative !important;
display: block !important;
overflow: hidden !important;
text-decoration: none !important;
isolation: isolate;
}
.st__img,
.sc__img {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
}
.st__overlay,
.sc__slash {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
}
.sc__corner {
position: absolute !important;
z-index: 3 !important;
}
.st__body,
.sc__body {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
z-index: 2 !important;
}
.st__img img,
.sc__img img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
display: block !important;
border-radius: 0 !important;
}
@media (max-width: 767px) {
.profile-tile-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0.65rem !important;
width: 100% !important;
}
.profile-tile-grid--cols-1 {
grid-template-columns: 1fr !important;
}
.profile-tile-grid > .st,
.profile-tile-grid > .st-more,
.profile-tile-scroll > .st {
width: 100% !important;
min-width: 0 !important;
aspect-ratio: 4 / 3 !important;
min-height: 0 !important;
}
a.st,
.sc-grid > .sc {
aspect-ratio: 4 / 3 !important;
min-height: 0 !important;
height: auto !important;
}
.sc-grid {
--sc-gap: 0.65rem;
display: flex !important;
flex-wrap: wrap !important;
gap: var(--sc-gap) !important;
}
.sc-grid > .sc {
flex: 0 0 calc((100% - var(--sc-gap)) / 2) !important;
width: calc((100% - var(--sc-gap)) / 2) !important;
max-width: calc((100% - var(--sc-gap)) / 2) !important;
}
.sc-grid--cols-1 > .sc,
.cms-card-grid--cols-1 .sc {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* ═══════════════════════════════════════════════════════════════
FINAL — İçerik kartları: gölge / cam / hover parlaması yok
═══════════════════════════════════════════════════════════════ */
html:not(.dark-mode) article.content-card,
html:not(.dark-mode) article.product-card,
html:not(.dark-mode) .content-card,
html:not(.dark-mode) .product-card,
html:not(.dark-mode) section.bg-zebra article.content-card,
html:not(.dark-mode) section.bg-zebra article.product-card,
html:not(.dark-mode) section.bg-white article.content-card,
html:not(.dark-mode) section.bg-white article.product-card,
html:not(.dark-mode) .bg-zebra article.content-card,
html:not(.dark-mode) .bg-zebra article.product-card,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-zebra article.content-card,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-zebra article.product-card,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-white article.content-card,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-white article.product-card,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-zebra .content-card,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-white .content-card,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-zebra .product-card,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-white .product-card,
html:not(.dark-mode)[data-solid-all="1"] section.bg-zebra .content-card,
html:not(.dark-mode)[data-solid-all="1"] section.bg-white .content-card,
html:not(.dark-mode) section.hive-section.bg-zebra article.content-card,
html:not(.dark-mode) section.hive-section.bg-zebra article.product-card,
html:not(.dark-mode) .hive-section article.content-card,
html:not(.dark-mode) .hive-section article.product-card {
box-shadow: none !important;
filter: none !important;
transform: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: border-color 0.2s ease !important;
background: #ffffff !important;
background-color: #ffffff !important;
border-radius: var(--border-radius-base, 8px) !important;
}
html:not(.dark-mode) article.content-card:hover,
html:not(.dark-mode) article.product-card:hover,
html:not(.dark-mode) .content-card:hover,
html:not(.dark-mode) .product-card:hover,
html:not(.dark-mode) section.bg-zebra article.content-card:hover,
html:not(.dark-mode) section.bg-zebra article.product-card:hover,
html:not(.dark-mode) section.bg-white article.content-card:hover,
html:not(.dark-mode) section.bg-white article.product-card:hover,
html:not(.dark-mode) .bg-zebra article.content-card:hover,
html:not(.dark-mode) .bg-zebra article.product-card:hover,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-zebra .content-card:hover,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-white .content-card:hover,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-zebra .product-card:hover,
html:not(.dark-mode)[data-zebra-mode="solid_all"] section.bg-white .product-card:hover,
html:not(.dark-mode) .hive-section .content-card:hover,
html:not(.dark-mode) .hive-section .product-card:hover {
box-shadow: none !important;
filter: none !important;
transform: none !important;
background: #ffffff !important;
background-color: #ffffff !important;
}
html:not(.dark-mode) .content-card > a,
html:not(.dark-mode) .product-card > a,
html:not(.dark-mode) .content-card > a > div:first-child,
html:not(.dark-mode) .content-card > a > div:last-child,
html:not(.dark-mode) .product-card > a > div:first-child,
html:not(.dark-mode) .product-card > a > div:last-child {
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
background-color: #ffffff !important;
}
html:not(.dark-mode) .content-card:hover > a,
html:not(.dark-mode) .product-card:hover > a,
html:not(.dark-mode) .content-card:hover > a > div:first-child,
html:not(.dark-mode) .content-card:hover > a > div:last-child,
html:not(.dark-mode) .product-card:hover > a > div:first-child,
html:not(.dark-mode) .product-card:hover > a > div:last-child {
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
background-color: #ffffff !important;
}
.content-card h3,
.content-card h3:hover,
.content-card .cms-card-title,
.content-card .cms-card-title:hover,
.content-card .cms-card-title-inner,
.content-card .cms-card-title-inner:hover,
.product-card h3,
.product-card h3:hover,
.product-card .cms-card-title,
.product-card .cms-card-title:hover,
.content-card:hover h3,
.content-card:hover .cms-card-title,
.content-card:hover .cms-card-title-inner,
.product-card:hover h3,
.product-card:hover .cms-card-title,
.content-card:hover p,
.content-card:hover span,
.product-card:hover h3,
.product-card:hover p,
.product-card:hover span {
filter: none !important;
text-shadow: none !important;
box-shadow: none !important;
background: transparent !important;
background-color: transparent !important;
}
section.bg-zebra .content-card:hover h3,
section.bg-zebra .content-card:hover .cms-card-title,
section.bg-zebra .content-card:hover .text-heading,
section.bg-white .content-card:hover h3,
section.bg-white .content-card:hover .cms-card-title,
section.bg-white .content-card:hover .text-heading,
section.bg-zebra .product-card:hover h3,
section.bg-white .product-card:hover h3,
html[data-zebra-mode="solid_all"] section.bg-zebra .content-card:hover h3,
html[data-zebra-mode="solid_all"] section.bg-white .content-card:hover h3 {
color: var(--cz-heading, var(--cw-heading, #0f172a)) !important;
-webkit-text-fill-color: var(--cz-heading, var(--cw-heading, #0f172a)) !important;
}
section.bg-white .content-card:hover h3,
section.bg-white .content-card:hover .cms-card-title,
section.bg-white .content-card:hover .text-heading,
section.bg-white .product-card:hover h3 {
color: var(--cw-heading, #0f172a) !important;
-webkit-text-fill-color: var(--cw-heading, #0f172a) !important;
}
.content-card:hover .text-primary,
.content-card:hover .content-card__cta-text,
.content-card:hover .content-card__cta-arrow,
.product-card:hover .text-primary,
.product-card:hover .content-card__cta-text {
filter: none !important;
text-shadow: none !important;
box-shadow: none !important;
}
/* =============================================================================
DARK MODE — medya kartları (ürün/içerik): beyaz zemin + açık metin patlamasın
Token (--cw/--cz/--cd) kullanılır; iç hücreler transparan.
============================================================================= */
html.dark-mode article.content-card,
html.dark-mode article.product-card,
html.dark-mode .content-card,
html.dark-mode .product-card,
html.dark-mode .katalog-card,
html.dark-mode .video-card,
html.dark-mode section.bg-white article.content-card,
html.dark-mode section.bg-white article.product-card,
html.dark-mode section.bg-white .content-card,
html.dark-mode section.bg-white .product-card,
html.dark-mode section.bg-zebra article.content-card,
html.dark-mode section.bg-zebra article.product-card,
html.dark-mode section.bg-zebra .content-card,
html.dark-mode section.bg-zebra .product-card,
html.dark-mode .hive-section article.content-card,
html.dark-mode .hive-section article.product-card,
html.dark-mode .hive-section .content-card,
html.dark-mode .hive-section .product-card,
html.dark-mode[data-zebra-mode="solid_all"] section.bg-zebra article.content-card,
html.dark-mode[data-zebra-mode="solid_all"] section.bg-zebra article.product-card,
html.dark-mode[data-zebra-mode="solid_all"] section.bg-white article.content-card,
html.dark-mode[data-zebra-mode="solid_all"] section.bg-white article.product-card,
html.dark-mode[data-zebra-mode="solid_all"] section.bg-zebra .content-card,
html.dark-mode[data-zebra-mode="solid_all"] section.bg-zebra .product-card,
html.dark-mode[data-zebra-mode="solid_all"] section.bg-white .content-card,
html.dark-mode[data-zebra-mode="solid_all"] section.bg-white .product-card,
html.dark-mode[data-solid-all="1"] section.bg-zebra .content-card,
html.dark-mode[data-solid-all="1"] section.bg-zebra .product-card,
html.dark-mode[data-solid-all="1"] section.bg-white .content-card,
html.dark-mode[data-solid-all="1"] section.bg-white .product-card {
background: var(--cz-bg, var(--dm-elevated, #303038)) !important;
background-color: var(--cz-bg, var(--dm-elevated, #303038)) !important;
border-color: var(--cz-border, rgba(255, 255, 255, 0.12)) !important;
box-shadow: none !important;
}
html.dark-mode section.bg-white article.content-card,
html.dark-mode section.bg-white article.product-card,
html.dark-mode section.bg-white .content-card,
html.dark-mode section.bg-white .product-card,
html.dark-mode[data-zebra-mode="solid_all"] section.bg-white .content-card,
html.dark-mode[data-zebra-mode="solid_all"] section.bg-white .product-card {
background: var(--cw-bg, var(--dm-elevated, #303038)) !important;
background-color: var(--cw-bg, var(--dm-elevated, #303038)) !important;
border-color: var(--cw-border, rgba(255, 255, 255, 0.12)) !important;
}
html.dark-mode section.bg-slate-900 .content-card,
html.dark-mode section.bg-slate-900 .product-card,
html.dark-mode section.bg-slate-900 .katalog-card,
html.dark-mode section.bg-slate-900 .video-card {
background: var(--cd-bg, var(--dm-elevated, #303038)) !important;
background-color: var(--cd-bg, var(--dm-elevated, #303038)) !important;
border-color: var(--cd-border, rgba(255, 255, 255, 0.12)) !important;
}
html.dark-mode .content-card > a,
html.dark-mode .product-card > a,
html.dark-mode .content-card > a > div:first-child,
html.dark-mode .content-card > a > div:last-child,
html.dark-mode .product-card > a > div:first-child,
html.dark-mode .product-card > a > div:last-child,
html.dark-mode .content-card:hover > a,
html.dark-mode .product-card:hover > a,
html.dark-mode .content-card:hover > a > div:first-child,
html.dark-mode .content-card:hover > a > div:last-child,
html.dark-mode .product-card:hover > a > div:first-child,
html.dark-mode .product-card:hover > a > div:last-child,
html.dark-mode .hive-section .content-card > a > div:first-child,
html.dark-mode .hive-section .content-card > a > div:last-child,
html.dark-mode .hive-section .product-card > a > div:first-child,
html.dark-mode .hive-section .product-card > a > div:last-child {
background: transparent !important;
background-color: transparent !important;
}
html.dark-mode section.bg-zebra .product-card h2,
html.dark-mode section.bg-zebra .product-card h3,
html.dark-mode section.bg-zebra .product-card .text-heading,
html.dark-mode section.bg-zebra .content-card h2,
html.dark-mode section.bg-zebra .content-card h3,
html.dark-mode section.bg-zebra .content-card .text-heading,
html.dark-mode .hive-section .product-card h3,
html.dark-mode .hive-section .content-card h3 {
color: var(--cz-heading, #f8fafc) !important;
-webkit-text-fill-color: var(--cz-heading, #f8fafc) !important;
}
html.dark-mode section.bg-zebra .product-card p,
html.dark-mode section.bg-zebra .product-card .text-body,
html.dark-mode section.bg-zebra .content-card p,
html.dark-mode section.bg-zebra .content-card .text-body,
html.dark-mode .hive-section .product-card p,
html.dark-mode .hive-section .content-card p {
color: var(--cz-text, #cbd5e1) !important;
-webkit-text-fill-color: var(--cz-text, #cbd5e1) !important;
}
html.dark-mode section.bg-white .product-card h3,
html.dark-mode section.bg-white .content-card h3 {
color: var(--cw-heading, #f8fafc) !important;
-webkit-text-fill-color: var(--cw-heading, #f8fafc) !important;
}
html.dark-mode section.bg-white .product-card p,
html.dark-mode section.bg-white .content-card p,
html.dark-mode section.bg-white .product-card .text-body,
html.dark-mode section.bg-white .content-card .text-body {
color: var(--cw-text, #cbd5e1) !important;
-webkit-text-fill-color: var(--cw-text, #cbd5e1) !important;
}
html.dark-mode section.bg-zebra .product-card .text-primary,
html.dark-mode section.bg-zebra .content-card .text-primary,
html.dark-mode section.bg-white .product-card .text-primary,
html.dark-mode section.bg-white .content-card .text-primary,
html.dark-mode .hive-section .product-card .text-primary,
html.dark-mode .hive-section .content-card .text-primary {
color: var(--color-primary-light, var(--cz-link, var(--color-primary))) !important;
}
/* =============================================================================
FINAL — koyu tema harita + scrolled navbar (lacivert gölge/kenar yok)
============================================================================= */
html.dark-mode .site-map-embed iframe,
html.dark-mode .site-map-embed__frame,
html.dark-mode .acik-adres-map iframe,
html.dark-mode .branch-map iframe,
html.dark-mode main iframe[src*="maps"],
html.dark-mode main iframe[src*="output=embed"] {
filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(0.95) saturate(0.7) !important;
-webkit-filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(0.95) saturate(0.7) !important;
}
html.dark-mode #header.scrolled,
html.dark-mode #header.scrolled .nav-glass-bar {
background: #121214 !important;
background-color: #121214 !important;
}
html.dark-mode #header.scrolled {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html.dark-mode #header.scrolled .nav-glass-bar {
background: transparent !important;
background-color: transparent !important;
}
html.dark-mode body > footer,
html.dark-mode body > footer.bg-dark {
background-color: var(--dm-surface, #1c1c20) !important;
overflow: hidden !important;
padding-bottom: 0 !important;
box-shadow:
0 -28px 56px rgba(0, 0, 0, 0.55),
0 -8px 24px rgba(0, 0, 0, 0.35) !important;
}
html.dark-mode .product-specs-wrap,
html.dark-mode .prose .table-wrap,
html.dark-mode .product-specs-wrap table,
html.dark-mode table.product_detail_table,
html.dark-mode body section.bg-zebra .prose table.product_detail_table,
html.dark-mode body section.bg-white .prose table.product_detail_table,
html.dark-mode body main .prose table.product_detail_table {
background: var(--dm-panel, #25252b) !important;
background-color: var(--dm-panel, #25252b) !important;
border-color: var(--dm-border-soft, #34343c) !important;
color: var(--dm-body, #c8c8d0) !important;
box-shadow: none !important;
}
html.dark-mode .product-specs-wrap td,
html.dark-mode .product-specs-wrap th,
html.dark-mode table.product_detail_table td,
html.dark-mode table.product_detail_table th,
html.dark-mode body section.bg-zebra .prose table.product_detail_table td,
html.dark-mode body section.bg-zebra .prose table.product_detail_table th,
html.dark-mode body section.bg-white .prose table.product_detail_table td,
html.dark-mode body section.bg-white .prose table.product_detail_table th,
html.dark-mode body main .prose table.product_detail_table td,
html.dark-mode body main .prose table.product_detail_table th,
html.dark-mode body section.bg-zebra table.product_detail_table td,
html.dark-mode body section.bg-zebra table.product_detail_table th {
color: var(--dm-body, #c8c8d0) !important;
-webkit-text-fill-color: var(--dm-body, #c8c8d0) !important;
background: transparent !important;
background-color: transparent !important;
border-color: var(--dm-border-soft, #34343c) !important;
border-bottom-color: var(--dm-border-soft, #34343c) !important;
}
html.dark-mode table.product_detail_table td:first-child,
html.dark-mode table.product_detail_table th:first-child,
html.dark-mode body section.bg-zebra .prose table.product_detail_table td:first-child,
html.dark-mode body section.bg-white .prose table.product_detail_table td:first-child,
html.dark-mode body main .prose table.product_detail_table td:first-child,
html.dark-mode body section.bg-zebra table.product_detail_table td:first-child {
color: var(--dm-heading, #f4f4f5) !important;
-webkit-text-fill-color: var(--dm-heading, #f4f4f5) !important;
}
html.dark-mode .product-specs-wrap tbody tr:nth-child(even) td,
html.dark-mode table.product_detail_table tbody tr:nth-child(even) td,
html.dark-mode body section.bg-zebra .prose table.product_detail_table tbody tr:nth-child(even) td,
html.dark-mode body section.bg-white .prose table.product_detail_table tbody tr:nth-child(even) td,
html.dark-mode body main .prose table.product_detail_table tbody tr:nth-child(even) td {
background: var(--dm-elevated, #303038) !important;
background-color: var(--dm-elevated, #303038) !important;
}
html.dark-mode table.product_detail_table tr:first-child td[colspan],
html.dark-mode table.product_detail_table tr:first-child th[colspan],
html.dark-mode table.product_detail_table:not(.bayi-list-table) tr:first-child td[colspan],
html.dark-mode body section.bg-zebra .prose table.product_detail_table tr:first-child td[colspan],
html.dark-mode body section.bg-white .prose table.product_detail_table tr:first-child td[colspan],
html.dark-mode body main .prose table.product_detail_table tr:first-child td[colspan],
html.dark-mode table.product_detail_table thead th {
color: var(--dm-heading, #f4f4f5) !important;
-webkit-text-fill-color: var(--dm-heading, #f4f4f5) !important;
background: color-mix(in srgb, var(--color-primary, #f59c10) 18%, var(--dm-panel, #25252b)) !important;
background-color: color-mix(in srgb, var(--color-primary, #f59c10) 18%, var(--dm-panel, #25252b)) !important;
}
html.dark-mode table.product_detail_table tr:first-child td[colspan] strong,
html.dark-mode table.product_detail_table tr:first-child td[colspan] b,
html.dark-mode body section.bg-zebra .prose table.product_detail_table tr:first-child td[colspan] strong,
html.dark-mode body section.bg-zebra table.product_detail_table strong {
color: var(--dm-heading, #f4f4f5) !important;
-webkit-text-fill-color: var(--dm-heading, #f4f4f5) !important;
}
html.dark-mode .product-specs-wrap tbody tr:hover:not(:first-child) td,
html.dark-mode table.product_detail_table tbody tr:hover:not(:first-child) td {
background: var(--dm-hover, #3a3a44) !important;
background-color: var(--dm-hover, #3a3a44) !important;
}
html.dark-mode .ozellik-item {
background: var(--dm-elevated, #303038) !important;
border-color: var(--dm-border-soft, #34343c) !important;
color: var(--dm-body, #c8c8d0) !important;
}
html.dark-mode .product-tabs-section .tab-bar {
background: transparent !important;
box-shadow: none !important;
}
html.dark-mode body .product-tabs-section.bg-zebra .tab-btn,
html.dark-mode .product-tabs-section .tab-btn {
background: var(--dm-panel, #25252b) !important;
border: 1px solid var(--dm-border, #4a4a54) !important;
color: var(--dm-body, #c8c8d0) !important;
box-shadow: none !important;
}
html.dark-mode body .product-tabs-section.bg-zebra .tab-btn:hover,
html.dark-mode .product-tabs-section .tab-btn:hover {
background: var(--dm-hover, #3a3a44) !important;
color: var(--dm-heading, #f4f4f5) !important;
}
html.dark-mode body .product-tabs-section.bg-zebra .tab-btn.active,
html.dark-mode .product-tabs-section .tab-btn.active {
background: var(--color-primary, #f59c10) !important;
border-color: var(--color-primary, #f59c10) !important;
color: var(--color-on-primary, #ffffff) !important;
box-shadow: none !important;
}
@media (max-width: 767px) {
html.dark-mode .product-tabs-section .tab-bar,
html.dark-mode body .bg-zebra.product-tabs-section .tab-bar {
background: var(--dm-surface, #1c1c20) !important;
border-bottom: 1px solid var(--dm-border-soft, #34343c) !important;
}
}
html.dark-mode .bayi-directory-card {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--color-primary, #f59c10) 12%, var(--dm-elevated, #303038)) 0%,
var(--dm-panel, #25252b) 60%
) !important;
border-color: var(--dm-border-soft, #34343c) !important;
}
html.dark-mode section.bg-zebra .bayi-directory-card h3,
html.dark-mode section.bg-white .bayi-directory-card h3,
html.dark-mode .bayi-directory-card h3 {
color: var(--dm-heading, #f4f4f5) !important;
-webkit-text-fill-color: var(--dm-heading, #f4f4f5) !important;
}
html.dark-mode section.bg-zebra .bayi-directory-card p,
html.dark-mode section.bg-white .bayi-directory-card p,
html.dark-mode .bayi-directory-card p {
color: var(--dm-body, #c8c8d0) !important;
-webkit-text-fill-color: var(--dm-body, #c8c8d0) !important;
}
html.dark-mode .bayi-dealer-card,
html.dark-mode section.bg-zebra .bayi-dealer-card,
html.dark-mode section.bg-white .bayi-dealer-card,
html.dark-mode .prose .bayi-dealer-card,
html.dark-mode .bg-zebra article.bayi-dealer-card {
background: var(--dm-elevated, #303038) !important;
background-color: var(--dm-elevated, #303038) !important;
border-color: var(--dm-border-soft, #34343c) !important;
border-left-color: var(--color-primary, #f59c10) !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html.dark-mode .bayi-dealer-card h3,
html.dark-mode section.bg-zebra .bayi-dealer-card h3,
html.dark-mode .prose .bayi-dealer-card h3,
html.dark-mode .bayi-dealer-card__name {
color: var(--dm-heading, #f4f4f5) !important;
-webkit-text-fill-color: var(--dm-heading, #f4f4f5) !important;
}
html.dark-mode .bayi-dealer-card p,
html.dark-mode section.bg-zebra .bayi-dealer-card p,
html.dark-mode .prose .bayi-dealer-card p,
html.dark-mode .bayi-dealer-card__person,
html.dark-mode .bayi-dealer-card__addr,
html.dark-mode .bayi-dealer-card__tax {
color: var(--dm-body, #c8c8d0) !important;
-webkit-text-fill-color: var(--dm-body, #c8c8d0) !important;
}
html.dark-mode .prose .bayi-dealer-card a.bayi-dealer-card__tel,
html.dark-mode section.bg-zebra .bayi-dealer-card a.bayi-dealer-card__tel,
html.dark-mode .bayi-dealer-card a.bayi-dealer-card__tel {
color: var(--dm-heading, #f4f4f5) !important;
-webkit-text-fill-color: var(--dm-heading, #f4f4f5) !important;
}
html.dark-mode .prose .bayi-dealer-card a.bayi-dealer-card__web,
html.dark-mode .bayi-dealer-card a.bayi-dealer-card__web {
color: var(--color-primary, #f59c10) !important;
}
html.dark-mode main section.bg-white {
background-color: var(--dm-surface, #1c1c20) !important;
}
html.dark-mode .bayi-table-wrap,
html.dark-mode .product-specs-wrap,
html.dark-mode .prose .table-wrap,
html.dark-mode .prose.bayi-table-wrap {
background: var(--dm-panel, #25252b) !important;
background-color: var(--dm-panel, #25252b) !important;
border-color: var(--dm-border-soft, #34343c) !important;
}
html.dark-mode .bayi-table-wrap .bayi-table-wrap,
html.dark-mode .bayi-table-wrap .product-specs-wrap {
margin: 0 !important;
border: none !important;
background: transparent !important;
}