/* ============================================================ SAYRU CMS — cms-design.css Visual design variants applied on the live site via data-attributes on (set by cms-bridge.js from the CMS "Tasarım" settings). Pure CSS — no JS/React change. ============================================================ */ /* ---------------- Header background ---------------- */ /* glass = default (matches base .hdr) */ html[data-hdr="glass"] .hdr { background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); } html[data-hdr="solid"] .hdr { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-hdr="solid"] .hdr--scrolled { background: #fff; } html[data-hdr="bordered"] .hdr { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line); } html[data-hdr="bordered"] .hdr--scrolled { box-shadow: none; } /* ---------------- Footer background ---------------- */ /* deep = default radial navy */ html[data-ftr="ink"] .footer { background: #03060d; } html[data-ftr="flat"] .footer { background: var(--navy); } html[data-ftr="flat"] .footer__glow { opacity: .5; } /* ---------------- Corner radius scale ---------------- */ html[data-radius="sharp"] { --r-sm: 3px; --r-md: 5px; --r-lg: 8px; --r-xl: 10px; } html[data-radius="round"] { --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 38px; } /* soft = default base tokens */ /* ---------------- Heading font ---------------- */ html[data-font="manrope"] { --font-display: 'Manrope', system-ui, sans-serif; } html[data-font="system"] { --font-display: system-ui, -apple-system, 'Segoe UI', sans-serif; } html[data-font="ibmplex"] { --font-display: 'IBM Plex Mono', ui-monospace, monospace; } html[data-font="georgia"] { --font-display: Georgia, 'Times New Roman', serif; } /* sora = default */ /* ---------------- Body font ---------------- */ html[data-bodyfont="sora"] { --font-body: 'Sora', system-ui, sans-serif; } html[data-bodyfont="system"] { --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif; } html[data-bodyfont="georgia"] { --font-body: Georgia, 'Times New Roman', serif; } /* manrope = default */ /* ---------------- Hero text alignment + title scale ---------------- */ .hero__title { font-size: calc(var(--t-hero) * var(--hero-title-scale, 1)); } html[data-heroalign="center"] .hero__in { grid-template-columns: 1fr; max-width: 920px; margin-left: auto; margin-right: auto; text-align: center; } html[data-heroalign="center"] .hero__visual { display: none; } html[data-heroalign="center"] .hero__kick, html[data-heroalign="center"] .kicker { justify-content: center; } html[data-heroalign="center"] .hero__body, html[data-heroalign="center"] .hero__sub { margin-left: auto; margin-right: auto; } html[data-heroalign="center"] .hero__actions, html[data-heroalign="center"] .hero__stack, html[data-heroalign="center"] .hero__controls { justify-content: center; } /* ---------------- Hero / section background pattern ---------------- */ html[data-heropat="plain"] .hero__grid, html[data-heropat="plain"] .hero__rings, html[data-heropat="plain"] .hero__scan { display: none; } html[data-heropat="rings"] .hero__grid { opacity: .35; } html[data-heropat="rings"] .hero__rings { opacity: calc(.9 * var(--glow)); } /* ---------------- Button corner style (ties to radius round) ---------------- */ html[data-radius="sharp"] .btn { border-radius: 6px; } html[data-radius="sharp"] .hero__chip, html[data-radius="sharp"] .pill { border-radius: 5px; } /* ---------------- Hero gradient presets ---------------- */ /* default = base radial (defined in sections.css) */ html[data-herograd="ocean"] .hero { background: radial-gradient(120% 120% at 75% 0%, #0b3a6b 0%, #062b4d 45%, #04101f 100%); } html[data-herograd="midnight"] .hero { background: linear-gradient(160deg, #0a1f44 0%, #060f24 60%, #03060d 100%); } html[data-herograd="royal"] .hero { background: radial-gradient(130% 130% at 80% -10%, #14559e 0%, #0a2f70 40%, #061634 100%); } html[data-herograd="teal"] .hero { background: radial-gradient(120% 120% at 78% 0%, #0a4d6b 0%, #06314d 46%, #04141f 100%); } html[data-herograd="custom"] .hero { background: linear-gradient(var(--grad-angle, 135deg), var(--grad-a, #0E4DA4), var(--grad-b, #082A6B)); } /* ---------------- Hero background image (overrides gradient) ---------------- */ html.has-hero-image .hero { background: linear-gradient(rgba(5,21,47, var(--hero-overlay, .78)), rgba(5,21,47, calc(var(--hero-overlay, .78) + 0.06))), var(--hero-image) center / cover no-repeat !important; } html.has-hero-image .hero__grid { opacity: .25; } /* ---------------- CTA gradient presets ---------------- */ html[data-ctagrad="cyan"] .cta__in { background: linear-gradient(135deg, #0E4DA4, #18C5F4); } html[data-ctagrad="cyan"] .cta__body { color: #eaf8ff; } html[data-ctagrad="midnight"] .cta__in { background: linear-gradient(135deg, #0a1f44, #03060d); } html[data-ctagrad="teal"] .cta__in { background: linear-gradient(135deg, #06314d, #0a4d6b); } html[data-ctagrad="custom"] .cta__in { background: linear-gradient(var(--grad-angle, 135deg), var(--grad-a, #0E4DA4), var(--grad-b, #082A6B)); } /* ---------------- Header logo alignment ---------------- */ /* base / mobile: absolutely center the logo (nav is hidden on mobile) */ html[data-logoalign="center"] .hdr__in { position: relative; } html[data-logoalign="center"] .hdr__in .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; } /* desktop: two-row header so the wide nav never collides with the centered logo */ @media (min-width: 1025px) { html[data-logoalign="center"] .hdr__in { display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; gap: 12px; padding: 16px 0 12px; } html[data-logoalign="center"] .hdr--scrolled .hdr__in { padding: 10px 0 8px; gap: 8px; } html[data-logoalign="center"] .hdr__in .logo { position: static; transform: none; order: -1; } html[data-logoalign="center"] .nav { order: 1; } html[data-logoalign="center"] .hdr__actions { position: absolute; right: 32px; top: 18px; } } /* ---------------- Footer logo alignment ---------------- */ html[data-flogoalign="center"] .footer__brand { text-align: center; margin-left: auto; margin-right: auto; } html[data-flogoalign="center"] .footer__brand .logo { display: inline-block; } html[data-flogoalign="center"] .footer__slogan { text-align: center; }