/*!
* Turla360 – 5 tema seti.
* elemanına data-theme="ocean|sunset|forest|midnight|sand"
* konduğunda ana sayfanın hero / CTA / vurgu renkleri değişir.
*/
/* Varsayılan (Ocean) — mevcut kurumsal mavi */
:root,
html[data-theme="ocean"] {
--theme-primary: #2563eb;
--theme-primary-2: #1d52d0;
--theme-accent: #0f2044;
--theme-hero-grad: linear-gradient(135deg, #0f2044 0%, #163060 50%, #1d4ed8 100%);
--theme-chip-bg: #eef2ff;
--theme-chip-fg: #1d52d0;
}
/* Sunset — sıcak turuncu / mercan */
html[data-theme="sunset"] {
--theme-primary: #ea580c;
--theme-primary-2: #c2410c;
--theme-accent: #7c2d12;
--theme-hero-grad: linear-gradient(135deg, #7c2d12 0%, #c2410c 50%, #fb923c 100%);
--theme-chip-bg: #fff7ed;
--theme-chip-fg: #c2410c;
}
/* Forest — koyu zümrüt */
html[data-theme="forest"] {
--theme-primary: #059669;
--theme-primary-2: #047857;
--theme-accent: #064e3b;
--theme-hero-grad: linear-gradient(135deg, #064e3b 0%, #047857 50%, #10b981 100%);
--theme-chip-bg: #ecfdf5;
--theme-chip-fg: #047857;
}
/* Midnight — koyu mor-lacivert */
html[data-theme="midnight"] {
--theme-primary: #7c3aed;
--theme-primary-2: #6d28d9;
--theme-accent: #1e1b4b;
--theme-hero-grad: linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #8b5cf6 100%);
--theme-chip-bg: #f5f3ff;
--theme-chip-fg: #6d28d9;
}
/* Sand — sıcak bej / altın */
html[data-theme="sand"] {
--theme-primary: #b45309;
--theme-primary-2: #92400e;
--theme-accent: #451a03;
--theme-hero-grad: linear-gradient(135deg, #451a03 0%, #92400e 50%, #d97706 100%);
--theme-chip-bg: #fef3c7;
--theme-chip-fg: #92400e;
}
/* Tema değişkenlerini kritik noktalara uygula.
Mevcut inline CSS'i kırmamak için yalnızca birkaç kilit öğeyi override ediyoruz. */
.tn-btn-cta,
.tn-btn-search {
background: var(--theme-primary) !important;
}
.tn-btn-cta:hover,
.tn-btn-search:hover {
background: var(--theme-primary-2) !important;
}
.tn-hero,
.tn-hero-bg {
background-image: var(--theme-hero-grad) !important;
}
.tn-logo-wm em {
color: var(--theme-primary) !important;
}
.tn-cat-chip.on,
.tn-tab.on,
.tn-chip.on {
background: var(--theme-primary) !important;
color: #fff !important;
border-color: var(--theme-primary) !important;
}
.tn-sec-title em,
.tn-hero h1 em {
color: var(--theme-primary) !important;
}
/* ────────────────────────────────────────────────────────────
Tema seçici widget
──────────────────────────────────────────────────────────── */
.tn-theme-fab {
position: fixed; right: 20px; bottom: 20px; z-index: 990;
width: 54px; height: 54px; border-radius: 50%;
background: var(--theme-primary);
color: #fff; border: none; cursor: pointer;
box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .12);
display: flex; align-items: center; justify-content: center;
transition: transform .2s, box-shadow .2s, background .2s;
}
.tn-theme-fab:hover { transform: translateY(-2px) rotate(15deg); box-shadow: 0 14px 40px -8px rgba(0, 0, 0, .45); }
.tn-theme-fab svg { width: 22px; height: 22px; }
.tn-theme-panel {
position: fixed; right: 20px; bottom: 86px; z-index: 991;
width: 320px; background: #fff; border-radius: 18px;
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35), 0 10px 24px -12px rgba(0, 0, 0, .18);
padding: 18px; border: 1px solid #e8e5df;
transform-origin: bottom right;
animation: tnThemePop .22s cubic-bezier(.4, 0, .2, 1);
}
@keyframes tnThemePop {
from { opacity: 0; transform: scale(.92) translateY(8px); }
to { opacity: 1; transform: none; }
}
.tn-theme-panel h3 {
font-family: var(--head, system-ui), sans-serif;
font-size: 15px; font-weight: 800; color: #0c0f14;
margin-bottom: 4px; letter-spacing: -.02em;
}
.tn-theme-panel p { font-size: 12px; color: #6b7280; margin-bottom: 14px; }
.tn-theme-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tn-theme-item {
cursor: pointer; border: 2px solid transparent; border-radius: 12px;
padding: 4px 2px; transition: transform .15s, border-color .15s, box-shadow .15s;
background: none; min-width: 0;
}
.tn-theme-item:hover { transform: translateY(-2px); }
.tn-theme-item.active {
border-color: #0c0f14;
box-shadow: 0 6px 14px -6px rgba(12, 15, 20, .35);
}
.tn-theme-swatch {
width: 100%; aspect-ratio: 1; border-radius: 8px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.tn-theme-name {
display: block; font-size: 10px; color: #374151;
margin-top: 4px; font-weight: 600; text-align: center;
letter-spacing: 0; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; line-height: 1.2;
}
.tn-theme-panel { max-width: calc(100vw - 40px); box-sizing: border-box; }
@media (max-width: 520px) {
.tn-theme-panel { width: calc(100vw - 40px); right: 20px; }
}