/*! * Turla360 — HEADER PRESETS (2026-05) v26 * 10 profesyonel header varyasyonu. Admin panelinden aktif edilen class * 'ye eklenir: .hp-classic, .hp-dark, .hp-minimal, ... * Bu dosya header-presets.css dosyasında; yalnızca seçilen preset çalışır. */ /* ══════════════════════════════════════════════════════════════════════════ 1. CLASSIC (varsayılan) — beyaz zemin, mavi aksan, standart ══════════════════════════════════════════════════════════════════════════ */ .hp-classic .tn-hdr { background: #fff; border-bottom: 1px solid var(--border); } .hp-classic .tn-logo-badge { background: var(--navy); } .hp-classic .tn-btn-cta { background: var(--navy); color: #fff; } /* ══════════════════════════════════════════════════════════════════════════ 2. DARK — siyah/lacivert zemin, beyaz yazı, turuncu CTA ══════════════════════════════════════════════════════════════════════════ */ .hp-dark .tn-hdr { background: linear-gradient(180deg, #0f172a 0%, #020617 100%); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 24px rgba(0,0,0,.4); } .hp-dark .tn-logo-wm { color: #fff; } .hp-dark .tn-logo-wm em { color: #60a5fa; } .hp-dark .tn-logo-badge { background: linear-gradient(135deg, #3b82f6, #8b5cf6); } .hp-dark .tn-nb { color: rgba(255,255,255,.75); } .hp-dark .tn-nb:hover, .hp-dark .tn-ni.op .tn-nb { color: #fff; background: rgba(255,255,255,.08); } .hp-dark .tn-nb svg { color: rgba(255,255,255,.5); } .hp-dark .tn-ic-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.75); } .hp-dark .tn-ic-btn:hover { background: rgba(255,255,255,.14); color: #fff; } .hp-dark .tn-btn-login { background: transparent; color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.2); } .hp-dark .tn-btn-login:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; } .hp-dark .tn-btn-cta { background: linear-gradient(135deg, var(--theme-primary, #f97316), var(--theme-secondary, #ea580c)); box-shadow: 0 8px 20px -6px rgba(249,115,22,.5); } .hp-dark .tn-btn-cta:hover { background: linear-gradient(135deg, var(--theme-secondary, #fb923c), var(--theme-primary, #f97316)); } /* ══════════════════════════════════════════════════════════════════════════ 3. MINIMAL — ince, sade, üst çubuk + duyuru gizli ══════════════════════════════════════════════════════════════════════════ */ .hp-minimal .tn-ann, .hp-minimal .tn-util { display: none !important; } .hp-minimal .tn-hdr { background: #fff; border-bottom: 1px solid #f1f5f9; box-shadow: none; } .hp-minimal .tn-hdr-main { height: 58px; } .hp-minimal .tn-logo-badge { width: 32px; height: 32px; border-radius: 8px; } .hp-minimal .tn-logo-badge svg { width: 18px; height: 18px; } .hp-minimal .tn-logo-wm { font-size: 18px; } .hp-minimal .tn-nb { font-size: 13px; padding: 6px 12px; } .hp-minimal .tn-btn-cta { padding: 7px 16px; font-size: 13px; border-radius: 8px; } /* ══════════════════════════════════════════════════════════════════════════ 4. CENTERED — logo ortada, nav sol/sağ ══════════════════════════════════════════════════════════════════════════ */ .hp-centered .tn-hdr-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .hp-centered .tn-logo { grid-column: 2; justify-content: center; } .hp-centered .tn-nav { grid-column: 1; grid-row: 1; justify-content: flex-end; } .hp-centered .tn-hdr-r { grid-column: 3; grid-row: 1; margin-left: 0; justify-content: flex-end; } .hp-centered .tn-logo-wm { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 24px; } /* ══════════════════════════════════════════════════════════════════════════ 5. TRANSPARENT — hero üstünde şeffaf, scroll'da arka plan kazanır ══════════════════════════════════════════════════════════════════════════ */ .hp-transparent .tn-hdr { background: transparent; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: none; position: absolute; left: 0; right: 0; z-index: 500; } .hp-transparent .tn-hdr.scrolled { background: rgba(15,23,42,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: sticky; } .hp-transparent .tn-logo-wm { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.3); } .hp-transparent .tn-logo-wm em { color: #fbbf24; } .hp-transparent .tn-logo-badge { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); } .hp-transparent .tn-nb { color: rgba(255,255,255,.82); } .hp-transparent .tn-nb:hover { color: #fff; background: rgba(255,255,255,.1); } .hp-transparent .tn-nb svg { color: rgba(255,255,255,.55); } .hp-transparent .tn-ic-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.85); backdrop-filter: blur(8px); } .hp-transparent .tn-btn-login { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); backdrop-filter: blur(8px); } .hp-transparent .tn-btn-cta { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #0f172a; box-shadow: 0 8px 20px -4px rgba(251,191,36,.5); } /* ══════════════════════════════════════════════════════════════════════════ 6. GRADIENT — renkli gradient zemin (mor → pembe) ══════════════════════════════════════════════════════════════════════════ */ .hp-gradient .tn-hdr { background: linear-gradient(135deg, #6d28d9 0%, #db2777 50%, var(--theme-secondary, #ea580c) 100%); border-bottom: none; box-shadow: 0 4px 24px rgba(109,40,217,.3); } .hp-gradient .tn-logo-wm, .hp-gradient .tn-logo-wm em { color: #fff; } .hp-gradient .tn-logo-badge { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); } .hp-gradient .tn-nb { color: rgba(255,255,255,.88); font-weight: 600; } .hp-gradient .tn-nb:hover, .hp-gradient .tn-ni.op .tn-nb { color: #fff; background: rgba(255,255,255,.15); } .hp-gradient .tn-nb svg { color: rgba(255,255,255,.7); } .hp-gradient .tn-ic-btn { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.22); color: #fff; } .hp-gradient .tn-ic-btn:hover { background: rgba(255,255,255,.25); } .hp-gradient .tn-btn-login { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); } .hp-gradient .tn-btn-cta { background: #fff; color: #6d28d9; font-weight: 800; } .hp-gradient .tn-btn-cta:hover { background: #fef3c7; transform: translateY(-1px); } /* ══════════════════════════════════════════════════════════════════════════ 7. GLASS — buzlu cam efekti (hafif transparan + blur) ══════════════════════════════════════════════════════════════════════════ */ .hp-glass .tn-hdr { background: rgba(255,255,255,.72); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid rgba(255,255,255,.3); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 32px rgba(12,15,20,.04); } .hp-glass .tn-logo-badge { background: linear-gradient(135deg, #0f172a, #1e293b); } .hp-glass .tn-btn-cta { background: linear-gradient(135deg, #3b82f6, #8b5cf6); } /* ══════════════════════════════════════════════════════════════════════════ 8. BORDERED — kutulu/çerçeveli görünüm, serif font ══════════════════════════════════════════════════════════════════════════ */ .hp-bordered .tn-hdr { background: #fff; border: none; border-bottom: 3px solid #0f172a; box-shadow: none; padding: 4px 0; } .hp-bordered .tn-hdr-main { background: #fafbff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 0 16px; margin: 6px 0; height: 66px; } .hp-bordered .tn-logo-wm { font-family: var(--serif); font-weight: 600; font-style: italic; font-size: 23px; } .hp-bordered .tn-logo-badge { border-radius: 4px; } .hp-bordered .tn-btn-cta { border-radius: 4px; background: #0f172a; } /* ══════════════════════════════════════════════════════════════════════════ 9. COMPACT — tek satır ultra-ince ══════════════════════════════════════════════════════════════════════════ */ .hp-compact .tn-ann, .hp-compact .tn-util { display: none !important; } .hp-compact .tn-hdr { background: #fff; border-bottom: 1px solid #e5e7eb; } .hp-compact .tn-hdr-main { height: 48px; gap: 24px; } .hp-compact .tn-logo-badge { width: 28px; height: 28px; border-radius: 6px; } .hp-compact .tn-logo-badge svg { width: 14px; height: 14px; } .hp-compact .tn-logo-wm { font-size: 16px; } .hp-compact .tn-nb { padding: 5px 10px; font-size: 13px; } .hp-compact .tn-nb svg { width: 11px; height: 11px; } .hp-compact .tn-ic-btn { width: 32px; height: 32px; } .hp-compact .tn-btn-login { padding: 6px 12px; font-size: 12px; } .hp-compact .tn-btn-cta { padding: 6px 14px; font-size: 12px; border-radius: 7px; } /* ══════════════════════════════════════════════════════════════════════════ 10. PREMIUM GOLD — lacivert + altın aksan (lüks marka hissi) ══════════════════════════════════════════════════════════════════════════ */ .hp-premium .tn-ann { background: linear-gradient(90deg, #000 0%, #0f172a 100%); } .hp-premium .tn-hdr { background: #0a1628; border-bottom: 1px solid rgba(251,191,36,.15); box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 1px 0 rgba(251,191,36,.1) inset; } .hp-premium .tn-logo-wm { color: #fff; font-family: var(--serif); font-style: italic; font-weight: 700; letter-spacing: -.02em; } .hp-premium .tn-logo-wm em { background: linear-gradient(135deg, #fbbf24, #f59e0b); -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; color: transparent !important; font-style: italic; } .hp-premium .tn-logo-badge { background: linear-gradient(135deg, #fbbf24, #d97706); border: 1px solid rgba(251,191,36,.4); box-shadow: 0 4px 12px rgba(251,191,36,.3); } .hp-premium .tn-logo-badge svg { stroke: #0a1628 !important; } .hp-premium .tn-nb { color: rgba(255,255,255,.75); font-family: var(--serif); font-weight: 500; letter-spacing: .01em; } .hp-premium .tn-nb:hover, .hp-premium .tn-ni.op .tn-nb { color: #fbbf24; background: rgba(251,191,36,.08); } .hp-premium .tn-nb svg { color: rgba(251,191,36,.6); } .hp-premium .tn-ic-btn { background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.2); color: rgba(251,191,36,.85); } .hp-premium .tn-ic-btn:hover { background: rgba(251,191,36,.15); color: #fbbf24; } .hp-premium .tn-btn-login { background: transparent; color: #fff; border: 1px solid rgba(251,191,36,.3); } .hp-premium .tn-btn-login:hover { border-color: #fbbf24; background: rgba(251,191,36,.1); color: #fbbf24; } .hp-premium .tn-btn-cta { background: linear-gradient(135deg, #fbbf24, #d97706); color: #0a1628; font-weight: 800; box-shadow: 0 8px 20px -4px rgba(251,191,36,.5), 0 1px 0 rgba(255,255,255,.2) inset; border: 1px solid rgba(251,191,36,.3); } .hp-premium .tn-btn-cta:hover { background: linear-gradient(135deg, #fcd34d, #f59e0b); transform: translateY(-1px); } /* ══════════════════════════════════════════════════════════════════════════ 11. BLUE (yolcu360) — #1557DC parlak mavi zemin, beyaz logo/linkler Header ile hero aynı renk → görsel süreklilik. ══════════════════════════════════════════════════════════════════════════ */ .hp-blue .tn-util { background: #1557DC; border-bottom: none; } .hp-blue .tn-util-item { color: rgba(255,255,255,.75); } .hp-blue .tn-util-item svg { color: rgba(255,255,255,.55); } .hp-blue .tn-lang { color: rgba(255,255,255,.7); border-color: transparent; } .hp-blue .tn-lang:hover { background: rgba(255,255,255,.12); color: #fff; border-color: transparent; } .hp-blue .tn-lang.on { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); } .hp-blue .tn-social { border-right-color: rgba(255,255,255,.18); } .hp-blue .tn-soc { box-shadow: none; opacity: .85; } .hp-blue .tn-soc:hover { opacity: 1; transform: translateY(-2px); } /* hp-blue — sticky wrapper'ın kendisi de mavi (render gap'i kapatır) */ .hp-blue #tn-sticky-top { background: #1557DC; } /* hp-blue — her zaman: yolcu360 stili 2px açık mavi alt çizgi */ .hp-blue .tn-hdr { background: #1557DC !important; border-bottom: 2px solid #2E73F8 !important; box-shadow: none !important; } /* hp-blue — scroll'da: wrapper'a hafif gölge */ .hp-blue #tn-sticky-top.hdr-scrolled { box-shadow: 0 3px 18px rgba(13,58,158,0.3); } .hp-blue .tn-hdr-main { height: 64px; } .hp-blue .tn-logo-badge { background: #fff !important; border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .hp-blue .tn-logo-badge::after { display: none !important; } .hp-blue .tn-logo-badge svg { stroke: #1557DC !important; } .hp-blue .tn-logo-wm { color: #fff !important; -webkit-text-fill-color: #fff !important; } .hp-blue .tn-logo-wm em { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important; opacity: 1 !important; font-style: normal !important; } .hp-blue .tn-nb { color: rgba(255,255,255,0.88) !important; font-weight: 500; font-size: 13px; padding: 6px 16px; border-radius: 20px; gap: 6px; transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease; } .hp-blue .tn-nb:hover, .hp-blue .tn-ni.op .tn-nb { color: #fff !important; background: rgba(255,255,255,0.15) !important; border-radius: 20px; transform: translateY(-1px); } .hp-blue .tn-ni.active .tn-nb, .hp-blue a.tn-nb.active { background: rgba(255,255,255,0.25) !important; color: #fff !important; font-weight: 600 !important; border-radius: 20px; } .hp-blue .tn-nb svg { color: rgba(255,255,255,.6); } .hp-blue .tn-drop { background: #fff; border-color: #e2e8f0; } .hp-blue .tn-drop-t { color: #0f172a; } .hp-blue .tn-drop-s { color: #64748b; } .hp-blue .tn-drop-row:hover { background: #f8fafc; } .hp-blue .tn-ic-btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.9); } .hp-blue .tn-ic-btn:hover { background: rgba(255,255,255,.2); color: #fff; } .hp-blue .tn-btn-login { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); } .hp-blue .tn-btn-login:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); color: #fff; } .hp-blue .tn-login-trigger { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.22); color: rgba(255,255,255,.9); border-radius: 10px; padding: 8px 16px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: .2s; } .hp-blue .tn-login-trigger:hover { background: rgba(255,255,255,.18); color: #fff; } .hp-blue .tn-login-trigger svg { color: rgba(255,255,255,.7); } .hp-blue .tn-btn-cta { background: #F4851D; color: #fff; font-weight: 700; box-shadow: 0 4px 14px rgba(244,133,29,.4); border: none; } .hp-blue .tn-btn-cta:hover { background: #e07518; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(244,133,29,.5); } /* Mobil drawer — mavi modda da tutarlı */ .hp-blue .tn-mob-toggle svg { stroke: #fff; } .hp-blue .tn-mob-toggle:hover { background: rgba(255,255,255,.12); } /* yolcu360 stili auth butonu — !important gerekli: .tn-nb color:#fff !important ezmesin */ .hp-blue .tn-hdr-auth-btn { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: #fff !important; color: #1557DC !important; font-size: 13px !important; font-weight: 700 !important; padding: 9px 18px !important; border-radius: 8px !important; border: none !important; cursor: pointer !important; transition: background .2s ease, color .2s ease !important; white-space: nowrap !important; text-decoration: none !important; } .hp-blue .tn-hdr-auth-btn:hover { background: #f0f4ff !important; color: #1557DC !important; } /* tn-hdr-company-link: tn-hdr-auth-btn class zaten tum stilleri tasiyor */ .hp-blue .tn-hdr-company-link { text-decoration: none !important; } /* Dil seçici dropdown */ .hp-blue .tn-lang-sel { position: relative; } .hp-blue .tn-lang-sel-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600; transition: .18s; white-space: nowrap; } .hp-blue .tn-lang-sel-btn:hover { background: rgba(255,255,255,.2); } .hp-blue .tn-lang-sel-drop { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; min-width: 150px; z-index: 700; } .hp-blue .tn-lang-sel-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 13px; font-weight: 500; color: #1e293b; text-decoration: none; transition: .15s; } .hp-blue .tn-lang-sel-opt:hover { background: #f1f5f9; } .hp-blue .tn-lang-sel-opt.active { background: #eff6ff; color: #1557DC; font-weight: 700; } /* ══════════════════════════════════════════════════════════════════════════ GAP GUARD — body.hp-blue context'inde theme_engine inline