/*
Theme Name: Total Child Theme
Theme URI: https://waterrevolutionfoundation.org
Description: Water Revolution Foundation — Custom Child Theme
Author: WRF Dev Team
Author URI: https://waterrevolutionfoundation.org
Template: Total
Version: 1.0
*/
/* =============================================
DESIGN TOKENS
Tek kaynak: renk / font / tipografi ölçeği / pill token'ları.
Hardcoded hex veya font fallback'i yazma — buradan referansla.
============================================= */
:root {
/* Tipografi ölçek — WordPress preset değişkenleri (fluid clamp) */
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 16px; /* GÖVDE STANDARDI (Mehmet 2026-07-02): sabit 16px. Bu token yalnız gövde metninde kullanılır (buton/UI değil). */
--wp--preset--font-size--large: clamp(22.041px, 1.378rem + ((1vw - 5.76px) * 0.928), 36px);
--wp--preset--font-size--x-large: clamp(25.014px, 1.563rem + ((1vw - 5.76px) * 1.129), 42px);
--wp--preset--font-size--paragraph: clamp(1.6rem, 1.6rem + ((1vw - 0.36rem) * 0.426), 2rem);
--wp--preset--font-size--heading-1: clamp(2.6rem, 5.2vw, 5.8rem);
--wp--preset--font-size--heading-2: clamp(4rem, 4rem + ((1vw - 0.36rem) * 5.319), 9rem);
--wp--preset--font-size--heading-3: clamp(3.6rem, 3.6rem + ((1vw - 0.36rem) * 2.979), 6.4rem);
--wp--preset--font-size--heading-4: clamp(3.2rem, 3.2rem + ((1vw - 0.36rem) * 1.915), 5rem);
--wp--preset--font-size--heading-5: clamp(2.4rem, 2.4rem + ((1vw - 0.36rem) * 1.277), 3.6rem);
--wp--preset--font-size--heading-6: clamp(1.5rem, 1.1875rem + 1vw, 1.75rem);/*clamp(2.2rem, 2.2rem + ((1vw - 0.36rem) * 0.638), 2.8rem);*/
/* ---------------------------------------------------------------
UI METİN ÖLÇEĞİ — STANDART (buton, etiket, caption, küçük metin)
Başlıklar h1–h6 / gövde medium-large-x-large preset'lerinden gelir.
KURAL: Bileşenlerde ham px font-size YAZMA — daima bu token'ları kullan.
Yeni boyut gerekiyorsa önce buraya token ekle, sonra referans ver.
--------------------------------------------------------------- */
--wrf-text-xs: 13px; /* mikro etiket, caption, legal */
--wrf-text-sm: 14px; /* küçük UI metni */
--wrf-text-md: 15px; /* buton standardı */
--wrf-text-base: 16px; /* gövde UI, link */
--wrf-text-lg: 18px; /* vurgulu gövde */
--wrf-text-xl: 20px; /* lead / iri UI */
/* Marka renkleri — TEK KAYNAK: Total Color Palette (Theme > Color Palette).
--wpex-palette-{id}-color tema değişkenine bağlı; hex yalnızca fallback.
Panelden renk değişince child theme bileşenleri otomatik güncellenir. */
--wrf-navy: var(--wpex-palette-20-color, #18347d); /* Navy Blue (id 20) */
--wrf-sky: var(--wpex-palette-21-color, #76cfef); /* Light Blue (id 21) */
--wrf-blue-muted: var(--wpex-palette-586-color, #84b7cf); /* Blue Muted (id 586) */
--wrf-green: var(--wpex-palette-588-color, #00b189); /* Green (id 588) */
--wrf-grey: var(--wpex-palette-585-color, #eeeeee); /* Grey (id 585) */
--wrf-dark-grey: var(--wpex-palette-23-color, #333333); /* Dark Grey (id 23) */
--wrf-white: var(--wpex-palette-24-color, #ffffff); /* White (id 24) */
/* Legacy tonlar — yeni palette'te yok ama mevcut ekranlar (wave divider,
gradyanlar) bağlı. Canva ekranları geldikçe ayıklanacak. */
--wrf-navy-dark: #0f2260;
--wrf-sky-soft: #CEE9F5;
--wrf-blue-pale: #E9F5FB; /* Feedback R1: mavi band + kutu/quote standardı (Jessie) */
--wrf-green-soft: #DCEFE3; /* mint — Hub filtre paneli (Canva) */
--wrf-water: #5BC0E8;
--wrf-light-blue: #449BCC;
--wrf-success: #2e7d5b;
/* Tier merdiveni renkleri (Hub verification — yeşil→mavi) */
--wrf-t4: #00b189;
--wrf-t3: #0196c8;
--wrf-t2: #00b4d7;
--wrf-t1: #76cfef;
/* Navy'nin rgb parçası — rgba() alpha için (#18347d) */
--wrf-navy-rgb: 24, 52, 125;
/* Font stack'leri — tam DIN 2014 (ADR-003). Body: Campton → DIN Regular. */
--wrf-font-heading: 'DIN 2014', 'Open Sans', sans-serif; /* ExtraBold (800) başlıklar */
--wrf-font-sans: 'DIN 2014', 'Open Sans', sans-serif; /* Regular (400) gövde */
/* TİPOGRAFİ STANDARDI (2026-07-01): temanın gövde/buton fontu varsayılan Campton'dı →
başlıklar reset ile onu miras alıp Campton'a düşüyordu. Tek kaynak = DIN 2014.
Bu override site geneli Campton sızıntısını bitirir; child'ın !important DIN override'ları gereksizleşir. */
--wpex-body-font-family: var(--wrf-font-sans) !important;
--wpex-btn-font-family: var(--wrf-font-sans) !important;
--wpex-heading-font-family: var(--wrf-font-heading) !important;
/* Campton parent (Total) temada `--wpex-campton-font` ile tanımlı; menü (.link-inner)
gibi doğrudan bu var'ı kullanan yerlere body override'ı ulaşmıyordu. Kaynağı DIN'e çek. */
--wpex-campton-font: var(--wrf-font-sans) !important;
/* Section başlık ağırlığı w700 (Mehmet 2026-07-01). h1 kendi 800 kuralını korur;
lead/quote istisnaları aşağıda "TİPOGRAFİ NORMALİZASYON" bloğunda. */
--wpex-heading-font-weight: 700 !important;
/* Pill token'ları */
--wrf-radius-pill: 9999px;
--wrf-pill-tracking: 0.12em;
/* Ortak modal/popup gölgesi (sol-popup + .wrf-modal + cal-popup) */
--wrf-shadow-modal: 0 40px 80px -30px rgba(15, 34, 96, 0.5);
/* SİTE GENELİ STANDART KUTU GÖLGESİ (G4) — tüm kutu/kartlarda kullan.
.wrf-shadow utility class'ı veya doğrudan box-shadow: var(--wrf-shadow). */
--wrf-shadow: 0 22px 44px -24px rgba(var(--wrf-navy-rgb), 0.45), 0 6px 16px -10px rgba(var(--wrf-navy-rgb), 0.25);
/* İÇERİK GENİŞLİĞİ — STANDART: temanın .container genişliğine bağlı.
TEK KAYNAK: Customizer → Layout → Main Container Width (--wpex-container-width).
Böylece stretch row'lardaki içerik, non-stretch row'larla (tema .container)
birebir aynı genişliğe oturur. Fallback 1280px = temanın default'u.
KURAL: section column-inner'da ham px max-width yazma, daima bu token. */
--wrf-content-max: var(--wpex-container-width, 1280px);
/* SECTION YATAY PADDING — STANDART (gutter). Mobilde küçülür, masaüstünde 40px.
KURAL: section'larda ham "40px" yatay padding yazma, daima bu token. */
--wrf-gutter: clamp(20px, 5vw, 40px);
/* Full-bleed slider'larda içerik-sol hizası: geniş ekranda content offset,
dar ekranda gutter. Track tam genişlikte olup ilk öğeyi content-left'e oturtur. */
--wrf-bleed-pad: max(var(--wrf-gutter), calc((100vw - var(--wrf-content-max)) / 2));
}
/* Base heading ölçeği — preset'lere bağlı.
WPBakery başlıkları doğru tag (h1-h6) ile atıldığında otomatik çalışır.
hN.wpex-heading varyantları: vcex_heading'in bastığı varsayılan utility
class'ını (wpex-text-2xl) özgüllükle ezer — boyut DAİMA tag'den gelir. */
h1, h1.wpex-heading { font-size: var(--wp--preset--font-size--heading-1); }
h2, h2.wpex-heading, .animated-header { font-size: var(--wp--preset--font-size--heading-2); }
h3, h3.wpex-heading { font-size: var(--wp--preset--font-size--heading-3); }
h4, h4.wpex-heading { font-size: var(--wp--preset--font-size--heading-4); }
h5, h5.wpex-heading { font-size: var(--wp--preset--font-size--heading-5); }
h6, h6.wpex-heading { font-size: var(--wp--preset--font-size--heading-6); }
/* =============================================
UTILITY CLASSES — Renk
WPBakery "Extra class name" alanından elementlere eklenir.
!important — WPBakery'nin inline color stilini ezmek için.
============================================= */
/* Text color */
.wrf-color-navy { color: var(--wrf-navy) !important; }
.wrf-color-navy-dark { color: var(--wrf-navy-dark) !important; }
.wrf-color-sky { color: var(--wrf-sky) !important; }
.wrf-color-sky-soft { color: var(--wrf-sky-soft) !important; }
.wrf-color-water { color: var(--wrf-water) !important; }
.wrf-color-light-blue { color: var(--wrf-light-blue) !important; }
.wrf-color-success { color: var(--wrf-success) !important; }
.wrf-color-white { color: var(--wrf-white) !important; }
.wrf-color-blue-muted { color: var(--wrf-blue-muted) !important; }
.wrf-color-green { color: var(--wrf-green) !important; }
.wrf-color-grey { color: var(--wrf-grey) !important; }
.wrf-color-dark-grey { color: var(--wrf-dark-grey) !important; }
.wrf-color-orange, .mc4wp-email-suggestion a { color: #f39220 !important; }
/* Background color */
.wrf-bg-navy { background-color: var(--wrf-navy) !important; }
.wrf-bg-navy-dark { background-color: var(--wrf-navy-dark) !important; }
.wrf-bg-sky { background-color: var(--wrf-sky) !important; }
.wrf-bg-sky-soft { background-color: var(--wrf-sky-soft) !important; }
.wrf-bg-water { background-color: var(--wrf-water) !important; }
.wrf-bg-light-blue { background-color: var(--wrf-light-blue) !important; }
.wrf-bg-success { background-color: var(--wrf-success) !important; }
.wrf-bg-white { background-color: var(--wrf-white) !important; }
.wrf-bg-blue-muted { background-color: var(--wrf-blue-muted) !important; }
.wrf-bg-green { background-color: var(--wrf-green) !important; }
.wrf-bg-grey { background-color: var(--wrf-grey) !important; }
.wrf-bg-dark-grey { background-color: var(--wrf-dark-grey) !important; }
/* Non-sticky overlay header — geniş üst nefes alanı.
Sticky'ye geçince temanın kendi shrink padding'i devreye girsin diye
:not(.is-sticky) ile scope'lu. */
.wpex-sticky-header-holder:not(.is-sticky) #site-header.overlay-header {
padding: 20px 60px 0 60px;
}
.maxwidth-1000{
max-width: 1000px !important;
}
/* =============================================
CARD ROW GAP — .wrf-card-row
Sütun bg'leri border-box olduğu için padding ile ayrılmaz.
Bu yüzden row'u flex container yapıp gap ile ayırıyoruz.
WPBakery (Inner) Row → Extra class: "wrf-card-row".
============================================= */
.wrf-card-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 30px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.wrf-card-row > .wpb_column,
.wrf-card-row > .vc_column_container {
flex: 1 1 260px !important;
width: auto !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
}
/* =============================================
WAVE DIVIDER — .wrf-wave-divider
Section'ın alt kenarına animated dalgalı su yüzeyi ekler.
Kullanım: row'un Design Options → Extra class: "wrf-wave-divider"
Üst rengi var(--wrf-water), alt rengi var(--wrf-sky) — altındaki
section sky bg ise dikişsiz geçer.
NOT: WPBakery .vc_row::before clearfix'ini ezmek için !important şart. */
.wrf-wave-divider {
position: relative;
}
.wrf-wave-divider::before {
content: "" !important;
display: block !important;
position: absolute !important;
left: 0;
right: auto;
bottom: 0;
top: auto;
width: 150%;
height: 100px;
background: linear-gradient(
to bottom,
var(--wrf-water) 0%,
var(--wrf-water) 60%,
var(--wrf-sky) 100%
);
clip-path: polygon(
0% 50%,
4% 40%, 8% 33%, 12% 38%, 16.67% 50%,
20.67% 62%, 24.67% 67%, 28.67% 62%, 33.33% 50%,
37.33% 40%, 41.33% 33%, 45.33% 38%, 50% 50%,
54% 62%, 58% 67%, 62% 62%, 66.67% 50%,
70.67% 40%, 74.67% 33%, 78.67% 38%, 83.33% 50%,
87.33% 62%, 91.33% 67%, 95.33% 62%, 100% 50%,
100% 100%,
0% 100%
);
pointer-events: none;
z-index: 2;
animation: wrf-water-flow 13s linear infinite;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.wrf-wave-divider::before {
animation: none;
}
}
/* =============================================
SCROLL-DRIVEN DRIFT — .wrf-scroll-drift
Section'a uygulanır → child pseudo (yelkenli/balina vb.) sayfa kaydırılırken
yatay parallax kayar. Section CSS'inde from/to değerleri özelleştirilebilir:
--wrf-drift-from (varsayılan -30%)
--wrf-drift-to (varsayılan +20%)
Pseudo elementinde:
animation: wrf-drift 1s linear both;
animation-timeline: --wrf-drift;
============================================= */
.wrf-scroll-drift {
view-timeline-name: --wrf-drift;
view-timeline-axis: block;
}
@keyframes wrf-drift {
from { transform: translateX(var(--wrf-drift-from, -30%)); }
to { transform: translateX(var(--wrf-drift-to, 20%)); }
}
@media (prefers-reduced-motion: reduce) {
.wrf-scroll-drift::before,
.wrf-scroll-drift::after,
.wrf-scroll-drift > * {
animation: none !important;
}
}
/* =============================================
GLASS CARD — .wrf-glass-card
Yarı saydam beyaz blur kart. Insights kartları + Partners CTA kartı
gibi yerlerde paylaşılan görünüm. Padding ve max-width section'a göre
özelleştirilir; bu base sadece bg/border/blur/shadow verir.
============================================= */
.wrf-glass-card {
background: rgba(255, 255, 255, 0.72) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.7) !important;
border-radius: 32px !important;
box-shadow: 0 24px 18px -20px rgba(var(--wrf-navy-rgb), 0.14) !important;
}
.wpex-icon svg{
margin-top: 7px;
}
/* =============================================
HEADER STICKY
============================================= */
#site-header-sticky-wrapper.wpex-sticky-header-holder.is-sticky header {
/* Feedback R1 (Menu): grey → navy şeffaf */
background: rgba(var(--wrf-navy-rgb), 0.55) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: var(--wrf-white);
}
/* =============================================
WRF DROPDOWN MENÜ
============================================= */
/* Menü paneli */
#site-header nav.mobile-toggle-nav {
border-radius: 20px;
box-shadow: 0 10px 40px rgba(var(--wrf-navy-rgb), 0.15);
overflow: hidden;
background: var(--wpex-palette-24-color);
margin: 0 50px 0 auto;
width: 480px;
max-width: calc(100% - 40px);
padding: 12px 5px 8px 5px;
left: auto;
right: 0;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
/* display:none yerine opacity ile gizle — fade transition için şart */
#site-header nav.mobile-toggle-nav.wpex-hidden {
display: block !important;
opacity: 0;
pointer-events: none;
}
#site-header nav.mobile-toggle-nav.visible {
opacity: 1;
pointer-events: auto;
}
/* Container padding sıfırla */
nav.mobile-toggle-nav .mobile-toggle-nav-inner {
padding: 0;
}
/* Ana menü linkleri */
nav.mobile-toggle-nav .mobile-toggle-nav-ul > li > span > a {
font-family: var(--wrf-font-sans) !important;
font-weight: 600;
font-size: var(--wrf-text-xl);
color: var(--wpex-palette-20-color);
transition: color 0.2s ease;
padding: 14px 60px 14px 24px;
text-transform: uppercase;
}
nav.mobile-toggle-nav .mobile-toggle-nav-ul > li > span > a:hover {
color: var(--wpex-palette-586-color); /* Blue Muted — eski #449bcc'nin yerine */
}
/* Aktif parent — Feedback R1 (Menu): navy → #E9F5FB, metin navy */
nav.mobile-toggle-nav .mobile-toggle-nav-ul > li.active > span > a {
background: var(--wrf-blue-pale);
color: var(--wrf-navy);
border-radius: 12px 12px 0 0;
}
/* Alt menü — 1. seviye — Feedback R1 (Menu): navy → #E9F5FB */
nav.mobile-toggle-nav .mobile-toggle-nav-ul .sub-menu {
background: var(--wrf-blue-pale);
border-radius: 0 0 12px 12px;
padding: 0 0 10px;
margin: 0;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
/* Alt menü linkleri — 1. seviye — metin navy */
nav.mobile-toggle-nav .mobile-toggle-nav-ul .sub-menu a {
font-size: var(--wrf-text-base);
font-weight: 400;
color: var(--wrf-navy);
padding: 15px 10px 10px 15px;
white-space: normal;
word-break: break-word;
}
nav.mobile-toggle-nav .mobile-toggle-nav-ul .sub-menu a:hover {
color: var(--wrf-blue-muted);
}
/* Alt menü — 2. seviye — biraz daha koyu açık-mavi (hiyerarşi) + navy metin */
nav.mobile-toggle-nav .mobile-toggle-nav-ul .sub-menu .sub-menu {
background: var(--wrf-sky-soft);
margin: 8px 0;
}
nav.mobile-toggle-nav .mobile-toggle-nav-ul .sub-menu .sub-menu a {
color: var(--wrf-navy);
}
nav.mobile-toggle-nav .mobile-toggle-nav-ul .sub-menu .sub-menu a:hover {
color: var(--wrf-blue-muted);
}
/* Toggle ikonu — daire */
nav.mobile-toggle-nav .wpex-open-submenu {
color: var(--wpex-palette-20-color);
width: 36px;
height: 36px;
border: 1.5px solid var(--wpex-palette-20-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
right: 16px;
top: 8px;
opacity: 1;
transition: all 0.2s ease;
}
nav.mobile-toggle-nav .wpex-open-submenu:hover {
border-color: var(--wpex-palette-586-color); /* Blue Muted — eski #449bcc'nin yerine */
color: var(--wpex-palette-586-color);
}
/* Sub-menu içindeki toggle — Feedback R1 (Menu): açık zeminde navy */
nav.mobile-toggle-nav .sub-menu .wpex-open-submenu {
color: var(--wrf-navy);
border-color: rgba(var(--wrf-navy-rgb), 0.4);
}
nav.mobile-toggle-nav .sub-menu .wpex-open-submenu:hover {
color: var(--wrf-blue-muted);
border-color: var(--wrf-blue-muted);
}
/* MENU label */
#site-header .mobile-menu-toggle__label {
font-family: var(--wrf-font-heading) !important;
font-weight: 400;
letter-spacing: 2px;
}
/* MENU toggle — Canva: yuvarlatılmış köşeli (pill) border içinde.
currentColor: normal/sticky durumlarındaki metin rengine border otomatik uyar. */
#site-header a.mobile-menu-toggle {
/* Feedback R1 (Menu): buton outline kalınlığı pill butonlarla eşit (3px → 1.5px) */
border: 1.5px solid currentColor;
border-radius: var(--wrf-radius-pill);
padding: 10px 22px;
align-items: center;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
/* Yazı + hamburger dikey hizalama — DIN büyük harf optik olarak yukarı oturur,
1px aşağı it; line-height 1 ile satır kutusu farkları sıfırlanır */
#site-header .mobile-menu-toggle__label {
line-height: 1;
position: relative;
top: 1px;
}
#site-header .mobile-menu-toggle-bars-icon {
display: inline-flex;
align-items: center;
}
#site-header a.mobile-menu-toggle:hover {
background-color: rgba(255, 255, 255, 0.14);
}
/* =============================================
HEADER SCROLL ANİMASYON (sadece home)
============================================= */
#site-header,
#site-header-inner {
transition: padding 0.45s ease,
margin 0.45s ease,
height 0.45s ease,
background-color 0.45s ease,
-webkit-backdrop-filter 0.45s ease,
backdrop-filter 0.45s ease;
}
/* Sticky'ye geçerken logo + menü ikonu boyutu da yumuşak küçülsün */
#site-header img,
#site-header .site-logo-link,
#site-header .mobile-menu-toggle,
#site-header .mobile-menu-toggle__label,
#site-header .mobile-menu-toggle-bars-icon {
transition: width 0.45s ease,
height 0.45s ease,
max-width 0.45s ease,
max-height 0.45s ease,
font-size 0.45s ease,
transform 0.45s ease;
}
body.home .wpex-sticky-header-holder:not(.is-sticky) #site-header {
padding: 60px 90px 0 80px;
}
/* =============================================
HERO SECTION
============================================= */
.wrf-hero-radius {
border-radius: 5rem;
overflow: hidden;
}
/* Video overlay — COLOR GRADE (canlı/teal görünüm, image #9 referansı).
Kullanım: hero satırına (WPBakery → Extra class name) "wrf-hero-overlay" ekle.
ÖNEMLİ: Total Row → Overlay'i "None" yap (çift overlay olmasın).
1) Canlılık SADECE video'da — saturate/contrast metni/butonu ETKİLEMEZ */
.wrf-hero-overlay .wpex-video-bg-wrap video,
.wrf-hero-overlay .wpex-video-bg-wrap img {
filter: saturate(1.6) contrast(1.12) brightness(0.92);
}
/* 2) Normal (blend YOK) gradient. mix-blend-mode KALDIRILDI: multiply, üstteki beyaz
yazı + butonları da teal'e boyuyordu (beyaz × teal = teal). Üst/alt navy (metin
okunur), orta hafif teal cast. */
.wrf-hero-overlay .wpex-video-bg-wrap::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(var(--wrf-navy-rgb), 0.50) 0%,
rgba(0, 177, 137, 0.18) 35%,
rgba(0, 177, 137, 0.18) 60%,
rgba(var(--wrf-navy-rgb), 0.50) 100%
);
pointer-events: none;
}
/* Image hero (video yerine foto bg): video-wrap::after overlay olmadığından, aynı
navy→teal→navy gradienti row'un kendisine uygula. Sadece .wrf-hero-img'de (video heroları etkilemez). */
.wrf-hero-overlay.wrf-hero-img { position: relative; }
.wrf-hero-overlay.wrf-hero-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(var(--wrf-navy-rgb), 0.50) 0%,
rgba(0, 177, 137, 0.18) 35%,
rgba(0, 177, 137, 0.18) 60%,
rgba(var(--wrf-navy-rgb), 0.50) 100%
);
pointer-events: none;
z-index: 0;
}
.wrf-hero-overlay.wrf-hero-img > .wpb_column { position: relative; z-index: 1; }
.wrf-bg-transition {
transition: background 0.6s ease;
}
.wrf-hero-title {
font-family: var(--wrf-font-heading) !important;
/* heading-2 preset (max 9rem) iki satıra kırıyordu — tek satıra sığsın diye küçültüldü */
font-size: clamp(2.6rem, 5.2vw, 5.8rem);
font-weight: 800; /* ExtraBold — ADR-003 (DIN 2014 Black yerine en kalın mevcut) */
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--wpex-palette-24-color);
/* Canlı/parlak video karelerinde beyaz net kalsın diye yumuşak gölge */
text-shadow: 0 2px 18px rgba(15, 34, 96, 0.45);
}
/* Masaüstünde tek satır garantisi — mobilde doğal sarılmaya bırak */
@media (min-width: 1024px) {
.wrf-hero-title {
white-space: nowrap;
}
}
.wrf-hero-subtitle {
font-family: var(--wrf-font-heading) !important;
font-size: var(--wp--preset--font-size--paragraph);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 12px rgba(15, 34, 96, 0.4);
}
/* Feedback R1 (Jessie): mobilde başlık altı kopya bir boy küçük */
@media (max-width: 768px) {
.wrf-hero-subtitle {
font-size: 1.25rem !important;
}
}
.wrf-col-pad-100 .vc_column-inner {
padding-left: 100px;
padding-right: 100px;
}
.wrf-row-pad-30 {
padding-left: 30px;
padding-right: 30px;
}
.wrf-hero-height .vc_column-inner {
min-height: calc(70vh - 90px) !important;
}
@media (max-width: 768px) {
.center-on-mobile {
justify-content: center !important;
}
.wrf-col-pad-100 .vc_column-inner {
padding-left: unset;
padding-right: unset;
}
.wrf-row-pad-30 {
padding-left: 10px;
padding-right: 10px;
}
.wrf-hero-height .vc_column-inner {
min-height: calc(70vh - 60px) !important;
}
}
/* =============================================
STAT COUNTER — .wrf-stat
Total Milestone (vcex_milestone) element'ine "wrf-stat" extra class eklenir.
Büyük navy sayı (DIN ExtraBold) + yanında baseline hizalı açıklama metni.
============================================= */
.wrf-stat .vcex-milestone-desc {
display: flex !important;
align-items: center; /* caption sayaçla dikey ortalı */
justify-content: center;
flex-wrap: nowrap; /* HEP tek satır: solda sayı, sağda yazı (alt satıra inmez) */
gap: 1.2rem;
}
/* "50%" — sayı + after(%) birlikte */
.wrf-stat .vcex-milestone-number {
font-family: var(--wrf-font-heading) !important;
font-weight: 800 !important;
color: var(--wrf-navy) !important;
font-size: clamp(2.6rem, 6vw, 5rem) !important;
letter-spacing: -0.02em;
line-height: 1;
}
/* "of builders are using YETI" — yanda, baseline hizalı */
.wrf-stat .vcex-milestone-caption {
margin-top: 0 !important; /* wpex-mt-5 sıfırla — alta değil yana gelsin */
font-family: var(--wrf-font-heading) !important;
font-weight: 400 !important; /* daha bold */
color: var(--wrf-navy) !important;
font-size: clamp(1.3rem, 2.4vw, 2.1rem) !important; /* tam genişlikte tek satıra sığsın */
line-height: 1.2;
text-align: left; /* sağdaki yazı sola hizalı okunsun */
}
@media (max-width: 768px) {
.wrf-stat .vcex-milestone-number {
font-size: clamp(2.6rem, 12vw, 4rem) !important;
}
/* mobil: sayı ÜSTTE, yazı ALTTA (dikey) */
.wrf-stat .vcex-milestone-desc { flex-direction: column; }
.wrf-stat .vcex-milestone-caption { text-align: center; }
}
/* =============================================
FACTS — custom FADE + ZOOM (Feedback R1: OC tarzı efekt)
Carousel TinySlider (tns): aktif slide'da `.tns-slide-active`. Her stat hem ilk
görünümde hem de sonraki geçişlerde büyüyerek belirir (animation her class-add'de yeniden oynar).
`.facts-visible` IO ile ilk scroll-in'de eklenir → ilk zoom da ekranda görülür.
JS yoksa animasyon yok ama içerik görünür (güvenli).
============================================= */
@keyframes wrf-fade-zoom {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.wrf-facts-carousel.facts-visible .wpex-carousel__item.active {
/* 0.5s gecikme: eski slide gittikten sonra ~500ms boşluk, sonra zoom ile gelir.
`both` fill → gecikme boyunca "from" (opacity 0) uygulanır, yeni stat gizli kalır. */
animation: wrf-fade-zoom 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
.wrf-facts-carousel .wpex-carousel__item.active { animation: none !important; }
}
/* OC gibi: çıkan stat FADE-OUT yapmasın, ~anında kaybolsun (Owl animate.css fadeOut süresi ~0).
1ms → görünmez fade ama animationend tetiklenir, Owl temizliği bozulmaz. */
.wrf-facts-carousel .fadeOut { animation-duration: 1ms !important; }
/* Facts TAM GENİŞLİK — caption uzun cümlesi container'da kırılıyordu; viewport'a yayılınca
sayı+yazı tek satırda sığar. (#outer-wrap overflow-x:clip scrollbar taşmasını keser.) */
.wrf-facts-fullwidth {
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
max-width: 100vw !important;
padding-inline: clamp(20px, 5vw, 60px);
}
/* =============================================
ORTAK BİLEŞEN — PILL BUTTON
Roadmap CTA + Insights readmore ortak tabanı.
!important'lar WPBakery'nin inline stilini ezmek için şart.
============================================= */
.wrf-pill-btn,
.wrf-roadmap-pill > a,
.wrf-roadmap-pill .vc_btn3,
.wrf-insights-section .entry-readmore,
.wrf-insights-section a.entry-readmore,
.wrf-insights-section a.entry-readmore.theme-button,
.wrf-projects-section .entry-readmore,
.wrf-projects-section a.entry-readmore,
.wrf-projects-section a.entry-readmore.theme-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: var(--wrf-radius-pill) !important;
font-family: var(--wrf-font-sans) !important;
font-weight: 700 !important;
letter-spacing: var(--wrf-pill-tracking) !important;
text-transform: uppercase !important;
color: var(--wrf-navy) !important;
border: 1.5px solid var(--wrf-navy) !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background-color 0.25s ease, color 0.25s ease;
}
.wrf-pill-btn:hover,
.wrf-roadmap-pill > a:hover,
.wrf-roadmap-pill .vc_btn3:hover,
.wrf-insights-section .entry-readmore:hover,
.wrf-insights-section a.entry-readmore.theme-button:hover,
.wrf-projects-section .entry-readmore:hover,
.wrf-projects-section a.entry-readmore.theme-button:hover {
background-color: var(--wrf-navy) !important;
color: var(--wrf-white) !important;
}
/* Roadmap varyantı — beyaz bg, 14px */
.wrf-roadmap-pill > a,
.wrf-roadmap-pill .vc_btn3 {
padding: 14px 32px 10px !important;
font-size: var(--wrf-text-base) !important;
background-color: var(--wrf-white) !important;
}
/* Insights + Projects light varyantı — light sky bg + shrink-wrap (WPBakery 100% ezmek için) */
.wrf-insights-section .entry-readmore,
.wrf-insights-section a.entry-readmore,
.wrf-insights-section a.entry-readmore.theme-button,
.wrf-projects-section .entry-readmore,
.wrf-projects-section a.entry-readmore,
.wrf-projects-section a.entry-readmore.theme-button {
width: auto !important;
max-width: fit-content !important;
flex: 0 0 auto !important;
padding: 12px 32px 7px !important;
font-size: var(--wrf-text-base) !important;
background-color: var(--wrf-sky-soft) !important;
background-image: none !important;
}
/* Green varyant — başarı yeşili dolgu, hover'da invert (transparent + yeşil text) */
.wrf-pill-btn--green a {
background-color: var(--wrf-success) !important;
background-image: none !important;
color: var(--wrf-white) !important;
border-color: var(--wrf-success) !important;
padding-top: 14px !important;
}
.wrf-pill-btn--green a:hover {
background-color: var(--wrf-navy) !important;
color: var(--wrf-white) !important;
border-color: var(--wrf-navy) !important;
}
/* White varyant — koyu/video zemin (hero vb.) için. Tek class yeterli.
Saydam zemin + beyaz metin/outline; hover'da beyaz dolgu + navy metin.
Kullanım (WPBakery → Extra class name): "wrf-pill-btn--white" */
.wrf-pill-btn--white,
.wrf-pill-btn--white a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: var(--wrf-radius-pill) !important;
font-family: var(--wrf-font-sans) !important;
font-weight: 700 !important;
letter-spacing: var(--wrf-pill-tracking) !important;
text-transform: uppercase !important;
color: var(--wrf-white) !important;
background-color: transparent !important;
background-image: none !important;
border: 1.5px solid var(--wrf-white) !important;
text-decoration: none !important;
box-shadow: none !important;
/* DIN büyük harf optik merkezleme — yeşil varyantla aynı, iki buton tutarlı kalsın */
padding-top: 14px !important;
transition: background-color 0.25s ease, color 0.25s ease;
}
.wrf-pill-btn--white:hover,
.wrf-pill-btn--white a:hover {
background-color: var(--wrf-white) !important;
color: var(--wrf-navy) !important;
border-color: var(--wrf-white) !important;
}
/* Feedback R1: homepage hero + collective butonları lowercase.
Scope'lu — marka butonlarını (YETI, Hub of Verified Solutions vb.) etkilemesin; global lowercase G6'da. */
.wrf-hero-overlay .wrf-pill-btn--white,
.wrf-hero-overlay .wrf-pill-btn--white a,
.wrf-collective-section .wrf-pill-btn--white,
.wrf-collective-section .wrf-pill-btn--white a { text-transform: lowercase !important; }
/* Navy varyant — beyaz/açık zemin (roadmap kartı vb.) için.
Saydam zemin + navy metin/outline; hover'da navy dolgu + beyaz metin.
Canva'ya uygun olarak title case (uppercase değil).
Kullanım (WPBakery → Extra class name): "wrf-pill-btn--navy" */
.wrf-pill-btn--navy,
.wrf-pill-btn--navy a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: var(--wrf-radius-pill) !important;
font-family: var(--wrf-font-sans) !important;
font-weight: 700 !important;
letter-spacing: var(--wrf-pill-tracking) !important;
text-transform: none !important;
color: var(--wrf-navy) !important;
background-color: transparent !important;
background-image: none !important;
border: 1.5px solid var(--wrf-navy) !important;
text-decoration: none !important;
box-shadow: none !important;
padding: 12px 32px !important;
font-size: var(--wrf-text-base) !important;
transition: background-color 0.25s ease, color 0.25s ease;
}
.wrf-pill-btn--navy:hover,
.wrf-pill-btn--navy a:hover {
background-color: var(--wrf-navy) !important;
color: var(--wrf-white) !important;
border-color: var(--wrf-navy) !important;
}
/* =============================================
ROADMAP 2050 SECTION — Canva referansına göre
Sky bg + üst yumuşak dalga + büyük yelkenli (scroll parallax) +
pill başlık kutusu (slide-in) + sol hizalı içerik kolonu
============================================= */
.wrf-roadmap-hero {
position: relative;
background-color: var(--wrf-sky);
/* Üst "su köpüğü" — dalga kesimi ile birleşince yüzey hissi */
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.22) 0,
rgba(255, 255, 255, 0.08) 80px,
rgba(255, 255, 255, 0) 160px
);
background-repeat: no-repeat;
background-size: 100% 160px;
background-position: top center;
/* padding kaldırıldı — panelden (Row Design Options / Spacing) kontrol edilecek */
overflow: hidden;
/* Scroll drift — yelkenli için custom range (sola gizli başlar, hafif sağa kayar).
view-timeline ortak .wrf-scroll-drift class'ından gelir. */
--wrf-drift-from: -18%;
--wrf-drift-to: 8%;
/* Üst dalga kesimi — video row'dan yumuşak geçiş */
-webkit-mask-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(#000, #000);
mask-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(#000, #000);
-webkit-mask-position: top center, 0 140px;
mask-position: top center, 0 140px;
-webkit-mask-size: 100% 140px, 100% calc(100% - 140px);
mask-size: 100% 140px, 100% calc(100% - 140px);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-mode: alpha, alpha;
mask-mode: alpha, alpha;
margin-top: -90px;
}
/* Yelkenli — büyük ve sağ tarafa yerleşik. Navy mask + sky bg birleşimi düşük
opacity'de mavi-gri tonunu verir. Animation ortak wrf-drift keyframe'inden,
from/to değerleri yukarıdaki section CSS variable'larından geliyor. */
.wrf-roadmap-hero::after {
content: "";
position: absolute;
right: clamp(0px, 4vw, 90px);
bottom: 0;
width: clamp(380px, 48vw, 760px);
height: clamp(380px, 48vw, 760px);
background-color: var(--wrf-navy);
-webkit-mask: url("assets/yatch.svg") no-repeat right bottom / contain;
mask: url("assets/yatch.svg") no-repeat right bottom / contain;
opacity: 0.32;
pointer-events: none;
z-index: 1;
/* Scroll-linked parallax — Chrome/Edge/Safari aktif, Firefox'ta statik */
animation: wrf-drift 1s linear both;
animation-timeline: --wrf-drift;
will-change: transform;
}
/* Alt dalga şeridi — ortak class'tan gelir: .wrf-wave-divider
Roadmap row'una WPBakery'den "wrf-wave-divider" class'ı eklenmeli. */
@keyframes wrf-water-flow {
from { transform: translateX(0); }
to { transform: translateX(-33.333%); }
}
/* İçerik katmanı — hem yelkenlinin hem de su katmanının önünde */
.wrf-roadmap-hero > .wpb_column,
.wrf-roadmap-hero .vc_column-inner,
.wrf-roadmap-hero .wpb_wrapper {
position: relative;
z-index: 3;
}
/* Container — section full-width bg, içerik max 1280px ortalı */
.wrf-roadmap-content > .vc_column-inner {
max-width: var(--wrf-content-max) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* İçerik wrapper — dar metin kolonu (yelkenliye alan bırak) */
.wrf-roadmap-content > .vc_column-inner > .wpb_wrapper {
max-width: 880px;
}
/* ---------------------------------------------
Başlık pill kutusu — tamamı yuvarlak, light cyan,
sayfa görünürken soldan kayarak gelir
--------------------------------------------- */
.wrf-roadmap-heading-box {
width: fit-content !important;
max-width: 100%;
margin: 40px 0 40px 0 !important;
padding: 0 !important;
background: transparent;
overflow: hidden;
animation: wrf-slide-in-left 1s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-timeline: view();
will-change: transform, opacity;
}
.wrf-roadmap-heading-box > .vc_column-inner,
.wrf-roadmap-heading-box .vc_column_inner,
.wrf-roadmap-heading-box .vc_column_inner > .wpb_wrapper {
padding: 0 !important;
}
.wrf-roadmap-heading {
/* font-size: base h5/h6 kuralından gelir */
margin: 0 !important;
line-height: 1.1 !important;
}
.wrf-roadmap-pill-subtitle {
/* font-size: base h5/h6 kuralından gelir */
margin: 4px 0 0 0 !important;
line-height: 1.2 !important;
}
/* Mobil: alt-başlık ("Towards Regenerative Yachting") TEK satır — viewport'a göre küçülüp sığar (taşmasın). */
@media (max-width: 768px) {
/* 2-class specificity → satır 6675'teki tek-class heading-6 !important kuralını yener */
.wrf-roadmap-content .wrf-roadmap-pill-subtitle {
font-size: clamp(0.95rem, 4.3vw, 1.7rem) !important;
white-space: nowrap;
}
/* Chart alt boşluğu: Bakery vcex_spacing component'i ile (chart col'da, d:0|pl:32px) — custom CSS yok.
Üst boşluk zaten mevcut vc_empty_space'ten (32px) geliyor → üst/alt ~eşit. */
}
/* Chart mobilde içerikten ÖNCE: Total'ın wpex-flex-wrap-reverse özelliği (el_class'ta).
WPBakery .vc_row-flex flex-wrap:wrap set ettiği için burada garantiye alıyoruz.
Desktop'ta tek satır → sarma yok → etkisiz; yalnız mobilde (sarınca) sıra ters döner. */
.wrf-roadmap-cols.wpex-flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
@keyframes wrf-slide-in-left {
from {
transform: translateX(-110%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Manifesto — "Our destination:, Our method:, Our promise:..." */
.wrf-roadmap-manifesto {
color: var(--wrf-navy);
max-width: 690px;
margin: 0 0 32px !important;
}
.wrf-roadmap-manifesto strong,
.wrf-roadmap-manifesto b {
color: var(--wrf-white);
font-weight: 700;
}
/* Buton satırı — sola yaslı, flex gap */
.wrf-roadmap-buttons {
display: flex !important;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-start !important;
margin-top: 16px;
}
/* WPBakery .vc_row clearfix ::before/::after pseudo'ları flex item sayılıp butonları
yayıyor/sağa itiyordu → gizle. Butonlar içerik genişliğinde, sola paketlenir. */
.wrf-roadmap-buttons::before,
.wrf-roadmap-buttons::after {
display: none !important;
}
.wrf-roadmap-buttons > .wpb_column,
.wrf-roadmap-buttons > .vc_column_container {
width: auto !important;
flex: 0 0 auto;
padding: 0 !important;
}
.wrf-roadmap-buttons .vc_column-inner {
padding: 0 !important;
}
/* Pill wrapper — WPBakery inline style'ı sıfırla (gerçek stil pill-btn base'inden gelir) */
.wrf-roadmap-pill {
display: inline-block;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* ---------------------------------------------
Roadmap PHOTO variant — Canva: okyanus fotoğrafı bg + beyaz içerik kartı.
Row class: "wrf-roadmap-hero wrf-roadmap--photo"
Bg fotoğrafı WPBakery Design Options'tan (css attr) gelir — panelden değiştirilebilir.
--------------------------------------------- */
.wrf-roadmap--photo {
background-color: var(--wrf-navy); /* foto yüklenene dek koyu fallback */
-webkit-mask-image: none !important;
mask-image: none !important;
margin-top: 0 !important;
/* Yatay padding: kart kenarlardan içeride kalsın, bg foto sağ/solda da görünsün */
padding: clamp(56px, 8vw, 130px) clamp(20px, 5vw, 48px);
}
/* Fotoğraf üzerinde yelkenli silüetine gerek yok */
.wrf-roadmap--photo::after {
content: none;
}
/* Frosted kart — transparan beyaz + ortak blur efekti (.wrf-feature-card ile aynı teknik) */
.wrf-roadmap--photo .wrf-roadmap-content > .vc_column-inner > .wpb_wrapper {
max-width: none;
background: rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 16px;
padding: clamp(32px, 4.5vw, 56px) clamp(28px, 4vw, 56px);
}
/* 2-sütun: sol metin + sağ roadmap chart görseli (Canva) — ikisi de ÜSTE hizalı */
.wrf-roadmap--photo .wrf-roadmap-cols { align-items: flex-start; }
.wrf-roadmap--photo .wrf-roadmap-col-text .wrf-roadmap-pill-subtitle {
margin: 4px 0 clamp(18px, 2.4vw, 26px) 0 !important;
}
.wrf-roadmap--photo .wrf-roadmap-col-text .wrf-roadmap-manifesto {
margin-bottom: clamp(20px, 2.6vw, 30px) !important;
max-width: none;
}
.wrf-roadmap-col-chart { display: flex; align-items: center; justify-content: center; }
/* NOT: eski .wrf-roadmap-chart (12083 Roadmap sayfası row'u) ile çakışmasın diye ayrı class */
.wrf-home-chart { margin: 0 !important; padding: 0 !important; width: 100%; }
.wrf-home-chart img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
cursor: zoom-in;
box-shadow: 0 12px 34px rgba(var(--wrf-navy-rgb), 0.20);
}
@media (max-width: 768px) {
.wrf-roadmap-col-chart { margin-top: clamp(22px, 5vw, 34px); }
}
/* Kart içinde başlık kutusunun dış boşluğunu sıkılaştır */
.wrf-roadmap--photo .wrf-roadmap-heading-box {
margin: 0 0 24px 0 !important;
}
/* Manifesto kart içinde tam genişlik kullanır */
.wrf-roadmap--photo .wrf-roadmap-manifesto {
max-width: none;
}
/* ---------------------------------------------
Roadmap LIGHT variant — yeni Canva (beyaz zemin, dalga yok, yeşil tagline altta).
Row class: "wrf-roadmap-hero wrf-roadmap--light wrf-scroll-drift"
(wrf-wave-divider EKLENMEZ). Orijinal sky-mavi tasarımı bozmadan override.
--------------------------------------------- */
.wrf-roadmap--light {
background-color: var(--wrf-white) !important;
background-image: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
margin-top: 0 !important;
}
/* Başlık kutusu — beyaz tasarımda pill yok, düz navy başlıklar (slide-in korunur) */
.wrf-roadmap--light .wrf-roadmap-heading-box {
background: transparent !important;
padding: 0 !important;
}
/* Inner row (başlık + buton satırları) WPBakery negatif margin'ini sıfırla
→ başlık, manifest metniyle aynı sol hizada başlasın (15px kayma düzeltmesi) */
.wrf-roadmap-content .vc_inner {
margin-left: 0 !important;
margin-right: 0 !important;
}
.wrf-roadmap-content .vc_inner > .wpb_column {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Manifesto bold kısımları beyaz zeminde navy olmalı (sky zeminde beyazdı) */
.wrf-roadmap--light .wrf-roadmap-manifesto strong,
.wrf-roadmap--light .wrf-roadmap-manifesto b {
color: var(--wrf-navy) !important;
}
/* Alt yeşil slogan — "Ambitious. Necessary. Reachable." */
.wrf-roadmap-tagline {
font-family: var(--wrf-font-heading) !important;
color: var(--wrf-green) !important;
font-weight: 800 !important;
font-size: clamp(1.4rem, 2.6vw, 2.2rem) !important;
margin: 28px 0 0 !important;
}
/* ---------------------------------------------
Roadmap — Responsive
--------------------------------------------- */
@media (max-width: 1024px) {
.wrf-roadmap-hero::after {
width: clamp(320px, 55vw, 560px);
height: clamp(320px, 55vw, 560px);
opacity: 0.22;
}
.wrf-roadmap-content > .vc_column-inner > .wpb_wrapper {
max-width: 60%;
}
}
@media (max-width: 768px) {
.wrf-roadmap-hero::after {
width: 75vw;
height: 75vw;
opacity: 0.16;
right: -12%;
}
.wrf-roadmap-content > .vc_column-inner > .wpb_wrapper {
max-width: 100%;
}
/* Heading kutusu — content area'ya tam yayılsın (mobile'da fit-content yerine full) */
.wrf-roadmap-heading-box {
width: 100% !important;
max-width: 100% !important;
padding: 18px 28px !important;
margin-bottom: 24px !important;
}
.wrf-roadmap-heading {
font-size: 26px !important;
line-height: 1.05 !important;
}
.wrf-roadmap-pill-subtitle {
font-size: var(--wrf-text-md) !important;
line-height: 1.3 !important;
}
/* Pill butonlar — 4 buton 2x2 grid, eşit genişlik, dengeli düzen
(eskiden 3+1 asimetrik flex wrap'ti) */
.wrf-roadmap-buttons {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 10px !important;
max-width: 380px;
margin-top: 20px;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* WPBakery .vc_row clearfix pseudo'ları grid item olarak sayılıyor → 4 buton + 2 pseudo = 6 cell.
Aynı çözüm insights/projects'te de var. */
.wrf-roadmap-buttons::before,
.wrf-roadmap-buttons::after {
display: none !important;
}
.wrf-roadmap-buttons > .wpb_column,
.wrf-roadmap-buttons > .vc_column_container {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto;
float: none !important;
padding: 0 !important;
}
.wrf-roadmap-buttons .vc_column-inner {
padding: 0 !important;
}
.wrf-roadmap-pill {
display: block;
width: 100%;
}
.wrf-roadmap-pill > a,
.wrf-roadmap-pill .vc_btn3 {
display: flex !important;
width: 100% !important;
max-width: none !important;
padding: 12px 16px 8px !important;
font-size: var(--wrf-text-xs) !important;
white-space: nowrap;
}
}
/* Daha küçük telefonlar (≤420px) — tipografi ve buton ince ayar */
@media (max-width: 420px) {
.wrf-roadmap-heading {
font-size: 24px !important;
}
.wrf-roadmap-pill-subtitle {
font-size: var(--wrf-text-sm) !important;
}
.wrf-roadmap-buttons {
max-width: 100%;
}
.wrf-roadmap-pill > a,
.wrf-roadmap-pill .vc_btn3 {
padding: 11px 12px 7px !important;
font-size: var(--wrf-text-xs) !important;
}
}
/* =============================================
INSIGHTS SECTION — post kategori carousel
Sky bg + sol yeşil pill + sağ yeşil kart
============================================= */
.wrf-insights-section {
position: relative;
background-color: var(--wrf-sky);
padding: 100px 40px 60px 40px !important;
overflow: hidden;
margin-top: 0 !important;
}
/* Insights LIGHT variant — beyaz zemin (yeni Canva).
Row Extra class: "wrf-insights-section wrf-insights-section--light" */
.wrf-insights-section--light {
background-color: var(--wrf-white) !important;
}
/* Beyaz zeminde metin cam/blur kartı gereksiz → düz metin.
Compound selector (.wrf-insights-section.wrf-insights-section--light) → 4 class,
böylece dosyada daha sonra gelen BASE details kuralını (padding 36px 40px) ezer. */
.wrf-insights-section.wrf-insights-section--light .wpex-carousel-entry-details,
.wrf-insights-section.wrf-insights-section--light .wpex-carousel-entry-details.wpex-boxed {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 40px 0 0 !important;
}
.wrf-insights-section .wpex-carousel__item {
/* sol padding 0 → metin INSIGHTS başlığı ile aynı sol hizada başlar */
padding: 0 40px 40px 0;
}
/* Oklar yan (absolute / arrwpos-abs) konumda — sol oku sola, sağ oku sağa dışarı çek.
Total değişkenleri (varsayılan 15px); negatif = carousel kenarının dışına. */
.wrf-insights-section .wpex-carousel {
--wpex-carousel-arrow-prev-left: -60px;
--wpex-carousel-arrow-next-right: -60px;
--wpex-carousel-arrows-margin-block: -40px; /* (alttaki oklar için; abs modda etkisiz) */
/* Dot renkleri — temanın kendi değişkenleri üzerinden, palet token'larıyla */
--wpex-carousel-dot-color: var(--wrf-sky-soft);
--wpex-active-carousel-dot-color: var(--wrf-navy);
}
/* Dots — ok yerine nokta navigasyon; içerikten nefes payı + hover geçişi */
.wrf-insights-section .wpex-carousel__dots {
margin-block-start: 32px;
gap: 12px;
}
.wrf-insights-section .wpex-carousel__dots-dot {
width: 12px;
height: 12px;
transition: background-color 0.25s ease;
}
.wrf-insights-section .wpex-carousel__dots-dot:not(.active):hover {
background: var(--wrf-sky);
}
/* Canva düz görünümü (light varyant) — yeşil offset kart, büyük radius ve gölge yok.
Compound selector (.wrf-insights-section.wrf-insights-section--light): base kurallar
dosyada daha sonra geldiği için özgüllük yükseltilerek eziliyor (1115'teki desenle aynı). */
.wrf-insights-section.wrf-insights-section--light .wpex-carousel-entry-media::before {
content: none;
}
.wrf-insights-section.wrf-insights-section--light .wpex-carousel-entry-img {
border-radius: 8px;
box-shadow: none;
}
.wrf-insights-section.wrf-insights-section--light .wpex-carousel-entry-media img {
border-radius: 8px !important;
}
/* Canva'da başlık ("Insights") ve buton ("View") title case; buton zemini beyaz */
.wrf-insights-section.wrf-insights-section--light .wrf-insights-eyebrow {
text-transform: none !important;
}
.wrf-insights-section.wrf-insights-section--light .entry-readmore,
.wrf-insights-section.wrf-insights-section--light a.entry-readmore.theme-button {
text-transform: none !important;
background-color: var(--wrf-white) !important;
}
/* Hover — wrf-pill-btn--navy ile aynı davranış: navy dolgu + beyaz metin.
(Üstteki beyaz zemin kuralı base hover'ı ezdiği için hover burada yeniden tanımlanıyor;
aksi halde zemin beyaz kalıp metin beyaza dönüyor ve yazı kayboluyordu) */
.wrf-insights-section.wrf-insights-section--light .entry-readmore:hover,
.wrf-insights-section.wrf-insights-section--light a.entry-readmore.theme-button:hover {
background-color: var(--wrf-navy) !important;
color: var(--wrf-white) !important;
border-color: var(--wrf-navy) !important;
}
/* İçerik üstten hizalı (middle değil) — görsel küçülünce dengeli durur */
.wrf-insights-section.wrf-insights-section--light .wpex-carousel-slide {
align-items: center; /* içerik dikey ortalı (görselin üst/altına göre) */
}
/* Görsel %55 / kopya %45 — görsel biraz daha büyük (Feedback R1 orta yol). */
.wrf-insights-section.wrf-insights-section--light .wpex-carousel-entry-media {
flex: 0 1 55%;
}
.wrf-insights-section.wrf-insights-section--light .wpex-carousel-entry-details,
.wrf-insights-section.wrf-insights-section--light .wpex-carousel-entry-details.wpex-boxed {
flex: 1 1 45%;
max-width: none; /* base'deki 560px sınırını kaldır */
}
/* Chevron'u daire içinde tam ortala */
.wrf-insights-section .wpex-carousel__arrow {
line-height: 1 !important;
}
.wrf-insights-section .wpex-carousel__arrow-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
/* Container — içerik max 1260px ortalı */
.wrf-insights-inner > .vc_column-inner {
max-width: var(--wrf-content-max) !important;
margin-left: auto !important;
margin-right: auto !important;
position: relative;
z-index: 1;
}
/* Section title "INSIGHTS" / "PROJECTS" — ortak eyebrow stili */
.wrf-insights-eyebrow,
.wrf-projects-eyebrow {
font-family: var(--wrf-font-heading) !important;
text-transform: uppercase !important;
font-size: var(--wp--preset--font-size--heading-5) !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: 0.02em !important;
color: var(--wrf-navy) !important;
margin: 0 0 40px !important;
}
/* Slide layout — flex row-reverse: image right, text left.
Grid kullanmıyoruz çünkü .wpex-clr'nin ::before/::after clearfix'leri
grid-item olarak algılanıp layout'u bozuyor. */
.wrf-insights-section .wpex-carousel-slide {
display: flex !important;
flex-direction: row; /* görsel SOLDA, içerik SAĞDA */
gap: 48px;
align-items: center;
}
/* Clearfix pseudo'ları gizle — flex'te zaten ihtiyaç yok */
.wrf-insights-section .wpex-carousel-slide::before,
.wrf-insights-section .wpex-carousel-slide::after {
display: none !important;
}
/* Media (image) — sağ taraf + arkada küçük offset yeşil kart */
.wrf-insights-section .wpex-carousel-entry-media {
flex: 1 1 50%;
margin: 0 !important;
position: relative;
isolation: isolate;
}
/* Küçük yeşil offset kart — sağ-alt köşeden peek, görselden küçük */
.wrf-insights-section .wpex-carousel-entry-media::before {
content: "";
position: absolute;
bottom: -28px;
right: -28px;
width: 55%;
height: 65%;
background: var(--wrf-success);
border-radius: 28px;
z-index: -1;
pointer-events: none;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.wrf-insights-section .wpex-carousel-slide:hover .wpex-carousel-entry-media::before {
transform: translate(6px, 6px);
}
.wrf-insights-section .wpex-carousel-entry-img {
display: block;
line-height: 0;
border-radius: 28px;
overflow: hidden;
box-shadow:
0 30px 30px -20px rgba(var(--wrf-navy-rgb), 0.28),
0 10px 20px -10px rgba(var(--wrf-navy-rgb), 0.14);
position: relative;
z-index: 1;
}
.wrf-insights-section .wpex-carousel-entry-media img {
border-radius: 28px !important;
width: 100%;
height: auto;
display: block;
aspect-ratio: 5 / 4;
object-fit: cover;
}
/* Details (text) — sol taraf, beyaz yarı-saydam pill kart (blur efektli) */
.wrf-insights-section .wpex-carousel-entry-details,
.wrf-insights-section .wpex-carousel-entry-details.wpex-boxed {
flex: 1 1 55%;
background: rgba(255, 255, 255, 0.72) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
padding: 36px 40px !important;
border: 1px solid rgba(255, 255, 255, 0.7) !important;
border-radius: 32px !important;
box-shadow: 0 24px 18px -20px rgba(var(--wrf-navy-rgb), 0.14) !important;
max-width: 560px;
position: relative;
z-index: 1;
}
/* Title */
.wrf-insights-section .wpex-carousel-entry-title {
font-family: var(--wrf-font-heading) !important;
font-size: var(--wp--preset--font-size--large) !important;
font-weight: 700 !important; /* Feedback R1 (Jessie): diğer başlıklarla eşleşsin diye bold */
line-height: 1.1 !important;
letter-spacing: -0.01em !important;
color: var(--wrf-navy) !important;
margin: 0 0 22px !important;
}
.wrf-insights-section .wpex-carousel-entry-title a {
color: var(--wrf-navy) !important;
text-decoration: none !important;
}
/* Excerpt — Campton, navy @ 72% — title ile hiyerarşi */
.wrf-insights-section .wpex-carousel-entry-excerpt {
font-family: var(--wrf-font-sans) !important;
color: rgba(var(--wrf-navy-rgb), 0.72) !important;
font-size: var(--wp--preset--font-size--medium);
line-height: 1.65;
margin-bottom: 28px !important;
}
.wrf-insights-section .wpex-carousel-entry-excerpt p {
color: inherit !important;
}
.wrf-insights-section .wpex-carousel-entry-excerpt p:last-child {
margin-bottom: 0;
}
/* Readmore wrapper — pill-btn base'inden ek olarak flex parent düzeni */
.wrf-insights-section .wpex-carousel-entry-button,
.wrf-insights-section .entry-readmore-wrap {
margin-top: 8px;
display: flex !important;
justify-content: flex-start !important;
width: 100%;
}
/* Carousel arrow'ları — Insights + Projects ortak (Total BEM class'ları) */
.wrf-insights-section .wpex-carousel__nav button,
.wrf-insights-section .wpex-carousel__nav .wpex-carousel__prev,
.wrf-insights-section .wpex-carousel__nav .wpex-carousel__next,
.wrf-insights-section .wpex-carousel-prev,
.wrf-insights-section .wpex-carousel-next,
.wrf-insights-section .owl-prev,
.wrf-insights-section .owl-next,
.wrf-projects-section .wpex-carousel__nav button,
.wrf-projects-section .wpex-carousel__nav .wpex-carousel__prev,
.wrf-projects-section .wpex-carousel__nav .wpex-carousel__next,
.wrf-projects-section .wpex-carousel-prev,
.wrf-projects-section .wpex-carousel-next,
.wrf-projects-section .owl-prev,
.wrf-projects-section .owl-next {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.6) !important;
border: 2px solid var(--wrf-navy) !important;
color: var(--wrf-navy) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.25s ease, color 0.25s ease;
opacity: 1 !important;
}
.wrf-insights-section .wpex-carousel__nav button:hover,
.wrf-insights-section .wpex-carousel-prev:hover,
.wrf-insights-section .wpex-carousel-next:hover,
.wrf-insights-section .owl-prev:hover,
.wrf-insights-section .owl-next:hover,
.wrf-projects-section .wpex-carousel__nav button:hover,
.wrf-projects-section .wpex-carousel-prev:hover,
.wrf-projects-section .wpex-carousel-next:hover,
.wrf-projects-section .owl-prev:hover,
.wrf-projects-section .owl-next:hover {
background: var(--wrf-navy) !important;
color: var(--wrf-white) !important;
}
/* Insights — Responsive */
@media (max-width: 900px) {
.wrf-insights-section {
padding: 70px 16px !important;
}
/* Desktop'ta slide aralığı için 40px yatay padding vardı; mobilde dar viewport
o padding'i içeri yerleştirip kart genişliğini ciddi kısıyordu — sıkıyoruz. */
.wrf-insights-section .wpex-carousel__item {
padding: 0 6px 16px;
}
.wrf-insights-section .wpex-carousel-slide {
flex-direction: column;
gap: 24px;
}
.wrf-insights-section .wpex-carousel-entry-details,
.wrf-insights-section .wpex-carousel-entry-media {
flex: 1 1 100%;
max-width: 100%;
}
/* Details kart — genişlik full, padding sıkı, radius hafif düşük */
.wrf-insights-section .wpex-carousel-entry-details,
.wrf-insights-section .wpex-carousel-entry-details.wpex-boxed {
padding: 24px 22px !important;
border-radius: 24px !important;
}
}
/* =============================================
PROJECTS SECTION — Total Post Types Carousel üzerine
Insights ile paylaşılan: section bg (sky), eyebrow stili,
pill-btn light varyantı, nav arrow stili.
Fark: vertical card layout (image üst + text alt), aktif slide
opacity 1, yan slide'lar 0.45 — focus vurgusu görsel kimlikten gelir.
============================================= */
.wrf-projects-section {
position: relative;
background-color: var(--wrf-sky);
/* Alt padding: aktif slide details'ı 3-slide genişliğinde altta yayılır,
yer bırakmak için yüksek. */
padding: 100px 40px 120px !important;
overflow: hidden;
margin-top: 0 !important;
}
/* Stage overflow: visible — center details 3-slide genişliğinde taşar,
section overflow:hidden sayesinde viewport dışına asla sızmaz. */
.wrf-projects-section .wpex-carousel,
.wrf-projects-section .wpex-carousel__stage-outer,
.wrf-projects-section .wpex-carousel__stage {
overflow: visible !important;
}
/* Slide dış padding — kartlar arası nefes alanı.
Scale uygulaması merkez kartı genişlettiği için daha fazla gap gerekir. */
.wrf-projects-section .wpex-carousel__item {
padding: 0 10px 10px;
position: relative;
}
/* Container — Insights'tan geniş (1500px) ki slide width JS hesabı büyük çıksın.
Slide width = container_width / items_per_row = 1500 / 3 = 500px
(eskiden 420). Scale ile birlikte gerçek image boyutu ~%20 büyür.
NOT: column'a wrf-insights-inner class'ı da verilmiş (1260 !important koyuyor);
bu selector'ü child-combinator ile daha spesifik yapıp o kuralı ezdik. */
.wrf-projects-section > .wpb_column > .vc_column-inner {
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
position: relative;
z-index: 1;
}
/* Slide layout — vertical: image üst, text alt */
.wrf-projects-section .wpex-carousel-slide {
display: flex !important;
flex-direction: column;
gap: 20px;
align-items: stretch;
}
/* Clearfix pseudo'ları gizle — flex'te gereksiz */
.wrf-projects-section .wpex-carousel-slide::before,
.wrf-projects-section .wpex-carousel-slide::after {
display: none !important;
}
/* Card image — üstte, rounded */
.wrf-projects-section .wpex-carousel-entry-media {
margin: 0 !important;
position: relative;
}
.wrf-projects-section .wpex-carousel-entry-img {
display: block;
line-height: 0;
border-radius: 28px;
overflow: hidden;
box-shadow:
0 30px 30px -20px rgba(var(--wrf-navy-rgb), 0.22),
0 10px 20px -10px rgba(var(--wrf-navy-rgb), 0.12);
}
.wrf-projects-section .wpex-carousel-entry-media img {
border-radius: 28px !important;
width: 100%;
height: auto;
display: block;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* Details base — transparent, padding yok (center genişletildiğinde kendi padding'ini verir) */
.wrf-projects-section .wpex-carousel-entry-details,
.wrf-projects-section .wpex-carousel-entry-details.wpex-boxed {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Title — heading-6 fazla büyüktü, large preset'e düşürdük (22-36px) */
.wrf-projects-section .wpex-carousel-entry-title {
font-family: var(--wrf-font-heading) !important;
font-size: var(--wp--preset--font-size--large) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
color: var(--wrf-navy) !important;
margin: 0 0 12px !important;
}
.wrf-projects-section .wpex-carousel-entry-title a {
color: var(--wrf-navy) !important;
text-decoration: none !important;
}
.wrf-projects-section .wpex-carousel-entry-excerpt {
font-family: var(--wrf-font-sans) !important;
color: rgba(var(--wrf-navy-rgb), 0.72) !important;
font-size: var(--wp--preset--font-size--medium);
line-height: 1.6;
margin-bottom: 20px !important;
max-width: 720px;
}
.wrf-projects-section .wpex-carousel-entry-excerpt p {
color: inherit !important;
}
.wrf-projects-section .wpex-carousel-entry-excerpt p:last-child {
margin-bottom: 0;
}
/* Readmore wrapper — sola yaslı (butonun kendisi pill-btn ortak base'inden) */
.wrf-projects-section .wpex-carousel-entry-button,
.wrf-projects-section .entry-readmore-wrap {
margin-top: 4px;
display: flex !important;
justify-content: flex-start !important;
width: 100%;
}
/* Aktiflik vurgusu — tüm slide'lar genel olarak daha büyük ölçekte,
merkez slide (1.3) kenardan (0.85) göreli ~1.5x daha büyük + opacity vurgusu.
Kart boyutu carousel ayarından değil scale ile büyüyor — slide gap'i korunur. */
.wrf-projects-section .wpex-carousel__item {
opacity: 0.45;
transform: scale(0.85);
transform-origin: center center;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.wrf-projects-section .wpex-carousel__item.center {
opacity: 1;
transform: scale(1.1);
z-index: 2;
}
/* Aktif olmayan kartlarda details kapalı — sadece görsel görünür */
.wrf-projects-section .wpex-carousel__item:not(.center) .wpex-carousel-entry-details {
max-height: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
transition: max-height 0.4s ease, opacity 0.3s ease;
}
/* Center slide details — 3 slide genişliğinde yayılır, section altında merkezli.
Slide parent'a göre relative + left:50% + translateX(-50%) ile viewport ortasına
oturur. Width %300 = 3 slide = section içi görüntü alanı. Center slide kendi
scale(1)'ında olduğu için details transform'dan etkilenmez. */
.wrf-projects-section .wpex-carousel__item.center .wpex-carousel-entry-details {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 200%;
max-width: calc(100vw - 80px);
max-height: none !important;
opacity: 1 !important;
overflow: visible !important;
pointer-events: auto !important;
padding: 24px 8px 0 !important;
margin-top: 24px !important;
text-align: left;
z-index: 3;
}
/* Projects — Responsive */
@media (max-width: 900px) {
.wrf-projects-section {
padding: 60px 20px 60px !important;
}
.wrf-projects-section .wpex-carousel__item {
padding: 0 10px 20px;
opacity: 1;
transform: scale(1);
}
/* Mobilde details full-width değil — slide içinde normal */
.wrf-projects-section .wpex-carousel__item.center .wpex-carousel-entry-details,
.wrf-projects-section .wpex-carousel__item:not(.center) .wpex-carousel-entry-details {
position: static;
left: auto;
transform: none;
width: 100%;
max-width: 100%;
max-height: none !important;
padding: 8px 12px 0 !important;
margin-top: 0 !important;
opacity: 1 !important;
overflow: visible !important;
pointer-events: auto !important;
}
}
/* =============================================
PARTNERS SECTION — "We don't work alone"
Bg video + sağda parallax balina (PNG) + glass card + 3 CTA bloğu.
WPBakery row class kombinasyonu:
wrf-partners-section wrf-scroll-drift wrf-wave-divider
(wrf-wave-divider opsiyonel — alttaki section sky bg ise pürüzsüz geçer)
============================================= */
.wrf-partners-section {
position: relative;
overflow: hidden;
padding: 120px 40px 20px !important;
margin-top: 0 !important;
}
/* Eyebrow başlık — "WE DONT WORK ALONE" */
.wrf-partners-eyebrow {
color: var(--wrf-navy) !important;
text-transform: uppercase !important;
margin: 0 0 32px !important;
position: relative;
z-index: 3;
}
/* Glass card wrapper — sol tarafta, dar kolon (balinaya alan bırak) */
.wrf-partners-card {
position: relative;
z-index: 3;
max-width: 720px;
padding: 40px 44px !important;
}
/* İçindeki column / column-inner / wrapper'a sızan default padding'leri komple
sıfırla VE width: 100% zorla — Total/WPBakery'nin vc_col-sm-X gibi
bootstrap-style sınıfları içeriği sağda boş bırakabiliyor. */
.wrf-partners-card .wpb_column,
.wrf-partners-card .vc_column_container,
.wrf-partners-card .vc_column-inner,
.wrf-partners-card .wpb_wrapper,
.wrf-partners-card .wpb_text_column,
.wrf-partners-card .wpb_text_column > .wpb_wrapper {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
box-sizing: border-box !important;
}
/* CTA içerik element'lerinin de sağa kadar uzanmasını garantile */
.wrf-partners-card .wrf-cta-title,
.wrf-partners-card .wrf-cta-text,
.wrf-partners-card .vcex-heading,
.wrf-partners-card .wpb_text_column p {
width: 100% !important;
max-width: 100% !important;
}
/* CTA başlık — her CTA bloğunun ilk satırı */
.wrf-cta-title {
font-family: var(--wrf-font-heading) !important;
font-size: var(--wp--preset--font-size--large);
font-weight: 700;
line-height: 1.2;
color: var(--wrf-navy);
margin: 0 0 12px;
}
/* CTA açıklama metni */
.wrf-cta-text {
font-family: var(--wrf-font-sans) !important;
color: var(--wrf-navy);
line-height: 1.6;
margin: 0 0 20px;
}
/* İkinci ve sonraki CTA'larda üst boşluk — ilk title margin-top almaz */
.wrf-partners-card .wrf-cta-title + * + .wrf-cta-title,
.wrf-partners-card .wrf-cta-title:not(:first-of-type) {
margin-top: 40px;
}
/* Tüm bg video katmanı içerik altında kalsın */
.wrf-partners-section .wpex-vc-row-video-bg {
z-index: 0;
}
/* Partners — Responsive */
@media (max-width: 900px) {
.wrf-partners-section {
padding: 70px 12px 80px !important;
}
/* Section içindeki vc_empty_space inline height'ları (genelde 200px desktop için)
mobilde aşırı büyük → kompakt yap */
.wrf-partners-section .vc_empty_space {
height: 50px !important;
}
.wrf-partners-section .vc_empty_space .vc_empty_space_inner {
height: 50px !important;
}
.wrf-partners-section::after {
width: 70vw;
height: 70vw;
opacity: 0.4;
right: -15%;
top: 0;
}
/* Eyebrow — section içindeki tüm h2/eyebrow varyantlarını yakalar
(kullanıcı yanlışlıkla wrf-projects-eyebrow yazmış olabilir).
overflow/max-height defensive: Total'ın wpex-text-2xl gibi class'ları
satır clipping yapıyorsa "ALONE" gibi 2. satır gizlenmesin. */
.wrf-partners-section .wrf-partners-eyebrow,
.wrf-partners-section .wrf-projects-eyebrow,
.wrf-partners-section .wrf-insights-eyebrow,
.wrf-partners-section h2.vcex-heading,
.wrf-partners-section h2.wpex-heading {
font-size: 34px !important;
line-height: 1.05 !important;
margin: 0 0 24px !important;
overflow: visible !important;
max-height: none !important;
display: block !important;
-webkit-line-clamp: unset !important;
}
/* Card — full width, sıkı padding */
.wrf-partners-card {
max-width: 100%;
padding: 26px 22px !important;
}
/* CTA title — large preset mobilde 22-23px, hafif düşür */
.wrf-cta-title {
font-size: var(--wrf-text-xl);
line-height: 1.25;
margin: 0 0 10px;
}
/* CTA text — sıkı line-height, makul font */
.wrf-cta-text {
font-size: var(--wrf-text-md);
line-height: 1.55;
margin: 0 0 18px;
}
/* Bloklar arası boşluk 40 → 28 */
.wrf-partners-card .wrf-cta-title + * + .wrf-cta-title,
.wrf-partners-card .wrf-cta-title:not(:first-of-type) {
margin-top: 28px;
}
}
@media (max-width: 480px) {
.wrf-partners-eyebrow {
font-size: 28px !important;
}
.wrf-partners-card {
padding: 22px 18px !important;
}
.wrf-cta-title {
font-size: var(--wrf-text-lg);
}
.wrf-cta-text {
font-size: var(--wrf-text-sm);
}
}
/* =============================================
AMBASSADOR CARD — Total wpex_card için
Tek ambassador'ı gösteren kart. Sol: name + bio + sosyal linkler.
Sağ: featured image (transparent PNG önerilir).
Total Post Types Carousel'de slide içeriği olarak render edilir.
Veri kaynağı: post title + post content + featured image +
ACF linkedin_url + website_url.
============================================= */
.wrf-ambassador-card {
position: relative;
background: var(--wrf-navy);
border-radius: 40px;
overflow: hidden;
padding: 56px 64px !important;
margin: 0 auto !important;
max-width: 1100px;
width: 100%;
}
.wrf-ambassador-card > .wpb_column > .vc_column-inner,
.wrf-ambassador-card > .vc_column_container > .vc_column-inner {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Sol kolon — info */
.wrf-ambassador-card__info {
display: flex !important;
flex-direction: column;
justify-content: center;
}
.wrf-ambassador-card__info > .vc_column-inner > .wpb_wrapper {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
/* Name — mint başlık, uppercase, geniş */
.wrf-ambassador-card__name {
font-family: var(--wrf-font-heading) !important;
color: var(--wrf-success) !important;
font-size: var(--wp--preset--font-size--heading-4) !important;
font-weight: 700 !important;
text-transform: uppercase;
line-height: 1 !important;
letter-spacing: 0.01em;
margin: 0 0 28px !important;
}
.wrf-ambassador-card__name * {
color: inherit !important;
margin: 0 !important;
font: inherit !important;
}
/* Bio — beyaz quote metin */
.wrf-ambassador-card__bio {
font-family: var(--wrf-font-sans) !important;
color: var(--wrf-white) !important;
font-size: var(--wp--preset--font-size--medium);
line-height: 1.7;
margin: 0 0 32px !important;
quotes: '"' '"';
}
.wrf-ambassador-card__bio p {
color: inherit !important;
margin: 0 0 12px;
}
.wrf-ambassador-card__bio p:last-child {
margin-bottom: 0;
}
/* Sosyal linkler — yuvarlak ikon butonu */
.wrf-ambassador-card__links {
display: flex;
gap: 12px;
margin-top: 4px;
}
.wrf-ambassador-card__link {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.5);
color: var(--wrf-white);
background: transparent;
display: inline-flex !important;
align-items: center;
justify-content: center;
text-decoration: none !important;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.wrf-ambassador-card__link:hover,
.wrf-ambassador-card__link:focus-visible {
background-color: var(--wrf-success);
border-color: var(--wrf-success);
color: var(--wrf-white);
}
.wrf-ambassador-card__link svg {
width: 18px;
height: 18px;
fill: currentColor;
display: block;
}
/* Sağ kolon — görsel. Kart içinde, sağ-alt köşeye dayalı. */
.wrf-ambassador-card__media {
align-self: stretch !important;
}
.wrf-ambassador-card__media > .vc_column-inner,
.wrf-ambassador-card__media > .vc_column-inner > .wpb_wrapper {
height: 100%;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 0 !important;
margin: 0 !important;
}
.wrf-ambassador-card__media .wpb_single_image,
.wrf-ambassador-card__media .vc_single_image-wrapper {
margin: 0 !important;
padding: 0 !important;
line-height: 0;
/* Görsel kart sağ-alt köşesine yapışsın → padding negate */
margin-right: -64px !important;
margin-bottom: -56px !important;
}
.wrf-ambassador-card__media img {
display: block;
max-width: 100%;
height: auto;
max-height: 460px;
width: auto;
object-fit: contain;
object-position: bottom right;
}
/* Carousel context — Total Post Types Carousel slide içinde.
max-width zaten kartın kendisinde; slide içinde merkezlenmesi için auto margin. */
.wpex-carousel__item .wrf-ambassador-card {
margin: 12px auto !important;
}
/* Responsive */
@media (max-width: 900px) {
.wrf-ambassador-card {
padding: 28px 24px !important;
border-radius: 28px;
}
.wrf-ambassador-card .wpb_column,
.wrf-ambassador-card .vc_column_container {
width: 100% !important;
flex: 1 1 100% !important;
}
.wrf-ambassador-card__media {
order: -1;
margin-bottom: 20px;
}
.wrf-ambassador-card__media .wpb_single_image,
.wrf-ambassador-card__media .vc_single_image-wrapper {
margin: 0 !important;
}
/* Görsel mobilde merkezde — desktop'taki sağa-yapışıklığı sıfırla */
.wrf-ambassador-card__media img {
max-height: 280px;
margin: 0 auto;
}
/* Name — heading-5 preset bile küçük telefonda "AMBASSADOR 3"ü 2 satıra
bölüyor (uppercase DIN bold çok geniş). Sabit px ile garantile. */
.wrf-ambassador-card__name {
font-size: 36px !important;
line-height: 1.05 !important;
margin-bottom: 14px !important;
}
.wrf-ambassador-card__bio {
font-size: var(--wrf-text-md) !important;
line-height: 1.55 !important;
margin-bottom: 22px !important;
}
/* Sosyal ikonları biraz küçült */
.wrf-ambassador-card__link {
width: 40px;
height: 40px;
}
.wrf-ambassador-card__link svg {
width: 16px;
height: 16px;
}
}
@media (max-width: 480px) {
.wrf-ambassador-card {
padding: 24px 20px !important;
border-radius: 24px;
}
.wrf-ambassador-card__name {
font-size: 30px !important;
}
.wrf-ambassador-card__bio {
font-size: var(--wrf-text-sm) !important;
}
.wrf-ambassador-card__media img {
max-height: 240px;
}
}
/* =============================================
LOGOS CAROUSEL — .wrf-logos-carousel
Total vcex_image_carousel + autoplay smooth ile sürekli kayan logo şeridi.
Aspect ratio yüksekliği viewport'la büyür → logoları sabit yükseklikte tutmak için
container ve img max-height ile cap'leriz. object-fit: contain logoyu bozmaz.
Kullanım: WPBakery Image Carousel → CSS → Extra Class: wrf-logos-carousel
============================================= */
.wrf-logos-carousel{
left: -60px;
width: 120% !important;
}
.wrf-logos-carousel .wpex-carousel-entry,
.wrf-logos-carousel .wpex-carousel-entry-media,
.wrf-logos-carousel .wpex-carousel-entry-img {
max-height: 80px;
display: flex !important;
align-items: center;
justify-content: center;
background: transparent !important;
}
.wrf-logos-carousel .wpex-carousel-entry-img img,
.wrf-logos-carousel .wpex-carousel-entry-media img,
.wrf-logos-carousel img {
max-height: 80px !important;
width: auto !important;
height: auto !important;
max-width: 100%;
object-fit: contain !important;
margin: 0 auto !important;
display: block;
}
/* Aspect ratio wrapper'ı sıfırla — Total padding-bottom trick'iyle yükseklik
yaratıyor, logo için gerekmiyor (sabit cap zaten max-height'tan geliyor) */
.wrf-logos-carousel .wpex-aspect-ratio,
.wrf-logos-carousel [class*="wpex-aspect-ratio"] {
padding-bottom: 0 !important;
height: 80px;
position: relative;
}
.wrf-logos-carousel .wpex-aspect-ratio img,
.wrf-logos-carousel [class*="wpex-aspect-ratio"] img {
position: static !important;
height: 100% !important;
width: auto !important;
}
/* Slide arası nefes payı */
.wrf-logos-carousel .wpex-carousel__item {
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.wrf-logos-carousel .wpex-carousel-entry,
.wrf-logos-carousel .wpex-carousel-entry-media,
.wrf-logos-carousel .wpex-carousel-entry-img,
.wrf-logos-carousel .wpex-aspect-ratio,
.wrf-logos-carousel [class*="wpex-aspect-ratio"] {
max-height: 56px;
height: 56px;
}
.wrf-logos-carousel .wpex-carousel-entry-img img,
.wrf-logos-carousel .wpex-carousel-entry-media img,
.wrf-logos-carousel img {
max-height: 56px !important;
}
.wrf-logos-carousel .wpex-carousel__item {
padding: 0 8px;
}
}
/* =============================================
NEWSLETTER FORM — .wrf-newsletter-form
MC4WP custom HTML template ile çalışır.
Navy bg üzerinde pill outline input'lar; consent checkbox + green submit.
Section row'a "wrf-bg-navy" class'ı verilirse arka plan tamamlanır.
============================================= */
.wrf-newsletter-form {
width: 100%;
max-width: 720px;
margin: 0 auto;
font-family: var(--wrf-font-sans) !important;
color: var(--wrf-white);
}
.wrf-newsletter-form__row {
display: grid;
gap: 14px;
margin: 0 0 14px;
grid-template-columns: 1fr;
}
.wrf-newsletter-form__row--two {
grid-template-columns: 1fr 1fr;
}
.wrf-newsletter-form__field {
margin: 0 !important;
}
.wrf-newsletter-form input[type="text"],
.wrf-newsletter-form input[type="email"],
.wrf-newsletter-form input[type="tel"],
.wrf-newsletter-form textarea {
display: block;
width: 100%;
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.55);
border-radius: var(--wrf-radius-pill);
color: var(--wrf-white);
font-family: var(--wrf-font-sans) !important;
font-size: var(--wp--preset--font-size--medium);
/* Asymmetric: WRF font'larında baseline yüksek render olur, alt padding azaltıp
optik merkezleme sağlanır (pill-btn pattern'iyle aynı) */
padding: 16px 24px 11px;
line-height: 1.2;
transition: border-color 0.2s ease, background-color 0.2s ease;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
}
.wrf-newsletter-form input::placeholder,
.wrf-newsletter-form textarea::placeholder {
color: rgba(255, 255, 255, 0.65);
font-family: inherit;
opacity: 1;
}
.wrf-newsletter-form input:focus,
.wrf-newsletter-form textarea:focus {
outline: none;
border-color: var(--wrf-white);
background: rgba(255, 255, 255, 0.06);
}
/* Browser autofill — beyaz arka plan ezimini engelle */
.wrf-newsletter-form input:-webkit-autofill,
.wrf-newsletter-form input:-webkit-autofill:hover,
.wrf-newsletter-form input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--wrf-navy) inset !important;
-webkit-text-fill-color: var(--wrf-white) !important;
caret-color: var(--wrf-white);
}
/* Consent checkbox */
.wrf-newsletter-form__consent {
margin: 18px 0 !important;
font-size: var(--wrf-text-xs);
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
}
.wrf-newsletter-form__consent label {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
line-height: 1.5;
}
.wrf-newsletter-form__consent label span{
padding-top: 5px;
}
/* Custom checkbox — native görünüm sıfırlanır, WRF outline kutusu çizilir */
.wrf-newsletter-form__consent input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
background: transparent;
border: 1.5px solid rgba(255, 255, 255, 0.55);
border-radius: 5px;
cursor: pointer;
position: relative;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.wrf-newsletter-form__consent input[type="checkbox"]:hover {
border-color: var(--wrf-white);
}
.wrf-newsletter-form__consent input[type="checkbox"]:focus-visible {
outline: 2px solid var(--wrf-success);
outline-offset: 2px;
}
.wrf-newsletter-form__consent input[type="checkbox"]:checked {
background-color: var(--wrf-success);
border-color: var(--wrf-success);
}
/* Tick — diagonal border ile çizilir, kutu içinde optik merkezli */
.wrf-newsletter-form__consent input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 5px;
height: 10px;
border: solid var(--wrf-white);
border-width: 0 2px 2px 0;
transform: translate(-50%, -60%) rotate(45deg);
}
.wrf-newsletter-form__consent a {
color: var(--wrf-white);
text-decoration: underline;
}
/* Submit button — green pill, hover'da invert */
.wrf-newsletter-form__submit {
margin: 22px 0 0 !important;
}
.wrf-newsletter-form__submit button {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--wrf-font-sans) !important;
font-weight: 700;
font-size: var(--wrf-text-base);
text-transform: lowercase; /* Feedback R1: buton metni lowercase */
letter-spacing: var(--wrf-pill-tracking);
/* Optik merkezleme (lowercase) — metni dikeyde ortalamak için üst-ağırlıklı padding */
padding: 12px 36px 10px;
line-height: 1;
border-radius: var(--wrf-radius-pill);
/* wrf-pill-btn--white ile aynı görünüm: saydam zemin + beyaz outline */
background: transparent;
color: var(--wrf-white);
border: 1.5px solid var(--wrf-white);
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
-webkit-appearance: none;
appearance: none;
}
.wrf-newsletter-form__submit button:hover,
.wrf-newsletter-form__submit button:focus-visible {
/* wrf-pill-btn--white hover: beyaz dolgu + navy metin */
background: var(--wrf-white);
border-color: var(--wrf-white);
color: var(--wrf-navy);
outline: none;
}
/* MC4WP success / error mesajları — form'la hizalı, belirgin */
.mc4wp-form .mc4wp-response {
max-width: 720px;
margin: 18px auto 0;
width: 100%;
}
.mc4wp-form .mc4wp-response .mc4wp-alert {
border-radius: 18px;
padding: 18px 24px;
border: 1.5px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.08);
color: var(--wrf-white);
font-size: var(--wrf-text-md);
font-weight: 500;
line-height: 1.5;
text-align: center;
}
.mc4wp-form .mc4wp-response .mc4wp-alert p {
margin: 0 !important;
color: inherit !important;
}
.mc4wp-form .mc4wp-response .mc4wp-alert.mc4wp-success {
background: rgba(46, 125, 91, 0.22);
border-color: var(--wrf-success);
color: var(--wrf-white);
}
.mc4wp-form .mc4wp-response .mc4wp-alert.mc4wp-error {
background: rgba(239, 109, 109, 0.18);
border-color: rgba(239, 109, 109, 0.7);
}
/* Responsive */
@media (max-width: 640px) {
.wrf-newsletter-form__row--two {
grid-template-columns: 1fr;
}
.wrf-newsletter-form input[type="text"],
.wrf-newsletter-form input[type="email"],
.wrf-newsletter-form input[type="tel"] {
padding: 12px 20px;
}
}
/* =============================================
FAQ SECTION — .wrf-faq-section
Sky bg + beyaz başlık + pill şekilli açılır kapanır kartlar (WPBakery
Accordion). Sağda navy "+" ikonlu sky-water daire (aktifte "−" olur).
WPBakery row → Extra class: "wrf-faq-section"
İçinde WPBakery Accordion (vc_tta_accordion) elementi kullanılır.
============================================= */
.wrf-faq-section {
padding: clamp(56px, 7vw, 90px) var(--wrf-gutter) !important;
/* Sky bandı — fallback. G9: FAQ bg + parallax artık Total Advanced Parallax (vcex_parallax)
ile render edilir (.wpex-parallax-bg); css-bg / background-attachment:fixed kullanılmaz. */
background-color: var(--wrf-sky);
}
/* Bg foto + overlay kullanılırsa içerik overlay üstünde kalsın */
.wrf-faq-section > .wpb_column {
position: relative;
z-index: 2;
}
/* Başlık — beyaz heading, panellerle hizalı ortada */
.wrf-faq-section .vcex-heading,
.wrf-faq-section h1,
.wrf-faq-section h2,
.wrf-faq-section h3,
.wrf-faq-section h4 {
color: var(--wrf-white) !important;
text-align: center;
margin: 0 0 28px !important;
}
/* Accordion container reset */
.wrf-faq-section .vc_tta,
.wrf-faq-section .vc_tta-container {
margin-bottom: 0 !important;
}
.wrf-faq-section .vc_tta-panels-container,
.wrf-faq-section .vc_tta-panels {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
/* Her panel — sabit 28px border-radius.
Kapalıyken (~50px yükseklik) browser kendisi height/2'ye cap'leyip tam pill
görüntü verir. Açıldığında 28px köşeler kalır — radius interpolasyonu
yapılmadığı için height/2 cap'leme sırasında oluşan "köşe büyüyüp aniden
küçülüyor" sıçraması elimine edilir. Yumuşak geçiş için sırasının önemi:
panel büyür, köşeler sabit, sadece içerik açılır. */
.wrf-faq-section .vc_tta-panel {
background: var(--wrf-sky-soft) !important;
border: 0 !important;
border-radius: 28px !important;
margin-bottom: 14px !important;
overflow: hidden;
}
/* Panel heading wrapper */
.wrf-faq-section .vc_tta-panel-heading {
background: transparent !important;
border: 0 !important;
margin: 0 !important;
}
/* h4 başlık — WPBakery'nin Total style'ı 1px border veriyor; pill
overflow:hidden + radius nedeniyle üst/yan kenarlar maskelense de
alt kenar kapalı state'te ince yatay çizgi olarak sızıyordu.
Border'ı tamamen kaldırıp ayırıcıyı box-shadow ile sadece açık panelde
gösteriyoruz. Box-shadow inset olduğu için layout shift yapmaz; alpha
transition'ı ile body açılma animasyonuyla senkron fade-in olur. */
.wrf-faq-section .vc_tta-panel-title {
margin: 0 !important;
font-size: inherit !important;
border: 0 !important;
background: transparent !important;
box-shadow: inset 0 -1px 0 rgba(var(--wrf-navy-rgb), 0);
transition: box-shadow 0.3s ease 0.05s;
}
.wrf-faq-section .vc_tta-panel.vc_active .vc_tta-panel-title {
box-shadow: inset 0 -1px 0 rgba(var(--wrf-navy-rgb), 0.12);
padding-bottom: 10px;
}
/* Tıklanabilir başlık — pill içeriği. Flex + space-between ile soru solda,
daire ikon her zaman sağda (WPBakery'nin icon-position-left default'unu ezelim) */
.wrf-faq-section .vc_tta-panel-title > a {
position: relative;
display: flex !important;
align-items: center;
justify-content: space-between;
text-align: left;
gap: 16px;
padding: 12px 32px 0px 28px !important;
background: transparent !important;
border: 0 !important;
color: var(--wrf-navy) !important;
font-family: var(--wrf-font-sans) !important;
font-weight: 700 !important;
font-size: var(--wrf-text-base) !important;
line-height: 1.4 !important;
text-decoration: none !important;
}
.wrf-faq-section .vc_tta-panel-title > a:hover,
.wrf-faq-section .vc_tta-panel-title > a:focus {
color: var(--wrf-navy) !important;
background: transparent !important;
}
.wrf-faq-section .vc_tta-title-text {
flex: 1 1 auto;
order: 0 !important;
}
/* Daire ikon — flex order ile her zaman sağa; position:relative
pseudo'lara koordinat sistemi sağlasın diye */
.wrf-faq-section .vc_tta-controls-icon {
position: relative !important;
order: 99 !important;
flex: 0 0 auto !important;
margin: 0 0 0 auto !important;
width: 36px !important;
height: 36px !important;
background: var(--wrf-water) !important;
border-radius: 50% !important;
border: 0 !important;
transform: none !important;
display: block !important;
}
/* "+" yatay çubuk — WPBakery default border'larını ezelim */
.wrf-faq-section .vc_tta-controls-icon::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
width: 16px !important;
height: 2px !important;
margin: 0 !important;
background: var(--wrf-white) !important;
border: 0 !important;
border-radius: 2px;
transform: translate(-50%, -50%) !important;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* "+" dikey çubuk. Aktifte rotate(90deg) ile yatayla hizalanıp "−" hâline
gelir. scaleY(0) yerine rotate kullanıyoruz — diagonal'den geçen yumuşak
morf, ani kaybolma yerine pürüzsüz bir döndürme hissi verir. */
.wrf-faq-section .vc_tta-controls-icon::after {
content: "" !important;
display: block !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
width: 2px !important;
height: 16px !important;
margin: 0 !important;
background: var(--wrf-white) !important;
border: 0 !important;
border-radius: 2px;
transform: translate(-50%, -50%) !important;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wrf-faq-section .vc_active .vc_tta-controls-icon::after {
transform: translate(-50%, -50%) rotate(90deg) !important;
}
/* Açılan cevap içeriği — yumuşak açılma/kapanma geçişi.
WPBakery default'ta body'yi display:none↔block ile toggle eder ve
jQuery .slideDown() ile inline height animasyonu yapar (sıçramalı).
Biz onu devre dışı bırakıp tamamen CSS ile kontrol ediyoruz:
- display: block !important → body her zaman DOM akışında
- height: auto !important → WPBakery'nin inline height'ını ez
- max-height + padding + opacity → asıl yumuşak geçiş */
.wrf-faq-section .vc_tta-panel-body {
display: block !important;
height: auto !important;
max-height: 0;
overflow: hidden !important;
opacity: 0;
background: transparent !important;
border: 0 !important;
padding: 0 28px 0 !important;
color: var(--wrf-navy) !important;
font-family: var(--wrf-font-sans) !important;
font-size: var(--wrf-text-md) !important;
line-height: 1.6 !important;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s ease 0.05s;
}
.wrf-faq-section .vc_tta-panel.vc_active .vc_tta-panel-body {
max-height: 800px;
padding-top: 16px !important;
padding-bottom: 22px !important;
opacity: 1;
}
.wrf-faq-section .vc_tta-panel-body p:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.wrf-faq-section {
padding: 60px 20px !important;
}
.wrf-faq-section .vc_tta-panel-title > a {
padding: 14px 56px 14px 20px !important;
font-size: var(--wrf-text-md) !important;
}
.wrf-faq-section .vc_tta-controls-icon {
right: 10px !important;
width: 32px !important;
height: 32px !important;
}
}
/* =============================================
FOOTER — .wrf-footer (Total Footer Builder template)
Navy bg + sağ-alt köşede dekoratif beyaz dalga görseli (opacity ile soluk).
Sol: heading + subtitle + newsletter form + adres bloku.
Sağ-alt: sosyal medya ikonları (beyaz daire + navy ikon).
============================================= */
.wrf-footer {
position: relative;
background-color: var(--wrf-green) !important;
/* Yatay padding dinamik: viewport <1520px → 60px; üzeri → içeriği 1400px ortalar.
Navy bg ve dekoratif dalga her ekranda tam genişlikte kalır, sadece içerik cap'lenir. */
/* Feedback R1: alt padding 0 (copyright band ile arada boşluk kalmasın) */
padding: 80px max(60px, calc((100vw - 1400px) / 2)) 0 !important;
margin: 0 !important;
overflow: hidden;
color: var(--wrf-white);
}
/* Dekoratif sağ-alt dalga görseli — beyaz PNG, opacity ile soluk.
Köşeye iter ve viewport'tan biraz taşırarak sadece corner'ı gösteririz.
width ve height'a aynı clamp(vw) değeri → 1:1 oran, aspect-ratio'ya bağlı
değil (Safari <15.4 aspect-ratio'yu desteklemiyor → height: 0 → görsel
görünmez oluyordu). */
/* Feedback R1: sağ-alt beyaz dekoratif görsel kaldırıldı. */
.wrf-footer::after { content: none !important; }
/* İçerik katmanı — dekoratif görselin önünde */
.wrf-footer > .vc_column_container,
.wrf-footer > .wpb_column {
position: relative;
z-index: 2;
}
/* Sol kolon — başlık + form + adres */
.wrf-footer__main > .vc_column-inner,
.wrf-footer__main > .vc_column-inner > .wpb_wrapper {
padding: 0 !important;
}
/* Footer başlığı — h3 elementi; boyut base h3 kuralından (heading-3 preset) gelir */
.wrf-footer__title {
font-family: var(--wrf-font-heading) !important;
color: var(--wrf-white) !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
line-height: 1 !important;
margin: 0 0 14px !important;
}
.wrf-footer__subtitle {
font-family: var(--wrf-font-sans) !important;
color: rgba(255, 255, 255, 0.85) !important;
font-size: var(--wp--preset--font-size--medium);
line-height: 1.5;
margin: 0 0 36px !important;
}
.wrf-footer__subtitle p {
margin: 0 !important;
color: inherit !important;
}
/* Form — base stiller .wrf-newsletter-form'dan; footer'da margin override */
.wrf-footer__form {
margin: 0 0 56px !important;
max-width: 600px;
}
.wrf-footer__form .wrf-newsletter-form {
margin: 0;
max-width: 100%;
}
/* Adres bloku — küçük beyaz mat metin */
.wrf-footer__address {
font-family: var(--wrf-font-sans) !important;
color: rgba(255, 255, 255, 0.78) !important;
font-size: var(--wp--preset--font-size--medium) !important; /* Feedback R1: body boyutu (16px) */
line-height: 1.7;
margin: 0 !important;
}
.wrf-footer__address p {
color: inherit !important;
margin: 0 0 14px !important;
}
.wrf-footer__address p:last-child {
margin-bottom: 0 !important;
}
.wrf-footer__address a {
color: inherit !important;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
transition: border-color 0.2s ease, color 0.2s ease;
}
.wrf-footer__address a:hover {
color: var(--wrf-white) !important;
border-bottom-color: var(--wrf-white);
}
/* Row'u flex yap → sol/sağ kolon aynı boya stretch olsun, aksi halde
sağ kolon sadece social icon yüksekliği kadar oluyor ve "bottom-align"
yerleşecek dikey alan kalmıyor. */
.wrf-footer.vc_row {
display: flex !important;
flex-wrap: wrap;
align-items: stretch !important;
}
/* Sağ kolon — adres (üstte) + sosyal ikonlar (altta), sağ-alta yerleşir */
.wrf-footer__aside {
display: flex !important;
align-items: flex-end !important;
justify-content: flex-end !important;
}
/* Feedback R1: adres sağ kolonda sağa hizalı; social ile arasında boşluk */
.wrf-footer__aside .wrf-footer__address {
text-align: right;
margin-bottom: 22px !important;
}
.wrf-footer__aside .wrf-footer__address a { border-bottom: none; } /* sağ blokta alt-çizgi kalabalık yapmasın */
.wrf-footer__aside > .vc_column-inner {
padding: 0 !important;
width: 100%;
display: flex !important;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
.wrf-footer__aside > .vc_column-inner > .wpb_wrapper {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
margin-top: auto;
}
/* Total Social Links element — sağa hizalı kalsın */
.wrf-footer__aside .vcex-social-links,
.wrf-footer__aside .wpex-social-btns {
justify-content: flex-end !important;
margin: 0 !important;
}
.wrf-footer__social {
display: flex;
gap: 14px;
}
.wrf-footer__social-link {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--wrf-white);
color: var(--wrf-navy);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.wrf-footer__social-link:hover,
.wrf-footer__social-link:focus-visible {
background: var(--wrf-success);
color: var(--wrf-white);
transform: translateY(-2px);
outline: none;
}
.wrf-footer__social-link svg {
width: 18px;
height: 18px;
fill: currentColor;
display: block;
}
/* Footer social ikon RENGİ = PANEL'den (vcex_social_links color/hover_color).
Bu ikonların svg path'i fill attr'ı taşımıyor + currentColor kullanmıyor; Total accent ile
fill'liyor, panel color (currentColor) etkilemiyordu. Tek köprü: svg fill = currentColor →
böylece panel rengini takip eder (renk yine panelden yönetilir, sabit renk yazmıyoruz). */
.wrf-footer__aside .vcex-social-links__item svg,
.wrf-footer__aside .vcex-social-links__item svg path { fill: currentColor !important; }
/* Footer içindeki MC4WP success/error mesajı — form genişliğinde, sola yaslı */
.wrf-footer .mc4wp-form .mc4wp-response {
margin-left: 0;
margin-right: 0;
max-width: 560px;
}
@media (max-width: 900px) {
.wrf-footer {
padding: 60px 28px 0 !important;
}
.wrf-footer::after {
width: 70%;
max-width: 480px;
opacity: 0.16;
}
.wrf-footer .wpb_column,
.wrf-footer .vc_column_container {
width: 100% !important;
flex: 1 1 100% !important;
}
/* heading-3 preset mobilde ~57px → "STAY THE COURSE" 2 satıra düşüyor.
Sabit 44px ile tek satırda kalır (DIN bold uppercase 14 char × ~24px ≈ 336px). */
.wrf-footer__title {
font-size: 44px !important;
line-height: 1.05 !important;
}
.wrf-footer__subtitle {
font-size: var(--wrf-text-md) !important;
line-height: 1.45 !important;
margin-bottom: 28px !important;
}
.wrf-footer__form {
margin-bottom: 40px !important;
}
.wrf-footer__aside {
margin-top: 0;
justify-content: flex-start;
}
/* Feedback R1: mobilde tüm aside içeriği (adres + social) sola yaslı.
Wrapper'lar flex-column olduğu için yatay hiza = align-items (justify değil). */
.wrf-footer__aside > .vc_column-inner,
.wrf-footer__aside > .vc_column-inner > .wpb_wrapper {
align-items: flex-start;
justify-content: flex-start;
}
.wrf-footer__aside .wrf-footer__address {
text-align: left;
}
.wrf-footer__aside .vcex-social-links,
.wrf-footer__aside .wpex-social-btns {
justify-content: flex-start !important;
}
}
@media (max-width: 600px) {
.wrf-footer {
padding: 48px 20px 0 !important;
}
.wrf-footer::after {
opacity: 0.12;
}
.wrf-footer__title {
font-size: 36px !important;
}
}
@media (max-width: 380px) {
/* Çok dar ekran — "STAY THE COURSE" 36px'te bile zor sığar */
.wrf-footer__title {
font-size: 30px !important;
}
}
/* =============================================
INFOGRAM EMBED — .wrf-infogram-embed
[wrf_infogram id="..."] shortcode wrapper'ı. Infogram loader'ı
iframe yüksekliğini kendisi ayarlar; biz sadece full-width ve
yatay taşmayı engelliyoruz.
============================================= */
.wrf-infogram-embed {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.wrf-infogram-embed .infogram-embed {
width: 100%;
}
.wrf-infogram-embed iframe {
display: block;
width: 100% !important;
max-width: 100%;
border: 0;
}
/* =============================================
MOBİL — Genel
============================================= */
@media (max-width: 768px) {
/* Menü */
#site-header nav.mobile-toggle-nav {
width: calc(100% - 24px);
margin: 8px 12px 0 auto;
border-radius: 16px;
}
nav.mobile-toggle-nav .mobile-toggle-nav-ul > li > span > a {
font-size: var(--wrf-text-lg);
}
nav.mobile-toggle-nav .mobile-toggle-nav-ul .sub-menu a {
font-size: var(--wrf-text-md);
}
/* Hero */
.wrf-hero-radius {
border-radius: 2rem;
}
/* Header padding (mobil) — masaüstü kuralıyla aynı scope. body.home
kısıtlamasını kaldırdık çünkü overlay header site-wide; non-home
sayfalarda da mobilde 60/90/0/80 padding logo ile menüyü çakıştırıyordu. */
.wpex-sticky-header-holder:not(.is-sticky) #site-header.overlay-header {
padding: 20px 15px 0 15px;
}
}
/* =============================================
BE PART OF THE COLLECTIVE — CTA section (Canva)
Foto bg (Design Options / panelden değiştirilebilir) +
temanın row overlay'i: gradient siyah, soldan koyu → metin okunur.
============================================= */
/* Parallax bg: balina kuyruğu görselin ALT kısmında → alt şeridi göster */
.wrf-collective-section .vc_parallax-inner {
background-position: center bottom !important;
}
/* İçerik overlay'in üstünde kalsın (overlay absolute/positioned olduğu için) */
.wrf-collective-section .wpb_column {
position: relative;
z-index: 2;
}
/* Container — diğer sectionlarla aynı: 1280px ortalı */
.wrf-collective-inner > .vc_column-inner {
max-width: var(--wrf-content-max) !important;
margin-left: auto !important;
margin-right: auto !important;
/* !important: full-width row'un --no-padding kuralı yatay padding'i eziyordu */
padding: clamp(56px, 8vw, 110px) clamp(20px, 6vw, 40px) !important;
}
/* Ana başlık — "Be part of the collective" */
.wrf-collective-title {
font-family: var(--wrf-font-heading) !important;
color: var(--wrf-white) !important;
/* font-size: base h5/h6 kuralından (root preset) gelir — hardcode yok */
font-weight: 700 !important;
line-height: 1.1 !important;
margin: 0 0 18px !important;
}
/* Blok başlıkları — "Join the Revolution" vb. */
.wrf-collective-subtitle {
font-family: var(--wrf-font-heading) !important;
color: var(--wrf-white) !important;
/* font-size: base h5/h6 kuralından (root preset) gelir — hardcode yok */
font-weight: 700 !important;
line-height: 1.2 !important;
margin: 34px 0 10px !important;
}
/* Blok metinleri — dar kolon (Canva), beyaz */
.wrf-collective-text {
font-family: var(--wrf-font-sans) !important;
color: var(--wrf-white) !important;
font-size: var(--wp--preset--font-size--medium);
line-height: 1.7;
max-width: 560px;
margin: 0 0 20px !important;
}
/* Butonlar — Canva'da küçük ve title case (site pill base'i uppercase yapar, ez) */
.wrf-collective-btn,
.wrf-collective-btn a {
font-size: var(--wrf-text-md) !important;
padding: 10px 26px 6px 26px !important;
}
/* 2 sütun düzeni — Join the Revolution + Assist our Oceans (Canva) */
.wrf-collective-cols { margin-top: clamp(18px, 2.6vw, 30px); }
.wrf-collective-col .wrf-collective-subtitle { margin-top: 0 !important; } /* iki başlık kolon üstünde hizalı */
.wrf-collective-col .wrf-collective-text { max-width: none; }
@media (max-width: 768px) {
.wrf-collective-cols .wrf-collective-col + .wrf-collective-col { margin-top: clamp(28px, 6vw, 40px); }
}
/* =============================================
OUR WORK IN ACTION — Programme carousel
Görünüm: wrf-projects-section'ın center-mode tasarımı yeniden kullanılır
(aktif slide ortada büyük, yanlar soluk, geniş yazı alanı, pill butonlar).
Row class: "wrf-projects-section wrf-work-section"
Buradaki kurallar yalnız work'e özgü farklar: beyaz zemin + başlık + dots.
============================================= */
/* Beyaz zemin (projects'in sky bg'sini ez — Canva work section beyaz) */
.wrf-projects-section.wrf-work-section {
background-color: var(--wrf-white) !important;
}
/* Başlık — Canva: title case, navy, DIN */
.wrf-work-title {
font-family: var(--wrf-font-heading) !important;
color: var(--wrf-navy) !important;
/* font-size: base h5/h6 kuralından (root preset) gelir — hardcode yok */
font-weight: 700 !important;
line-height: 1.1 !important;
margin: 0 0 40px !important;
/* text-align: ortalama YALNIZ desktop — @media (min-width:901px) bloğunda */
}
/* Dots — tema değişkenleriyle, Insights ile aynı palet (projects ok kullanıyordu) */
.wrf-work-section .wpex-carousel {
--wpex-carousel-dot-color: var(--wrf-sky-soft);
--wpex-active-carousel-dot-color: var(--wrf-navy);
}
.wrf-work-section .wpex-carousel__dots {
margin-block-start: 32px;
gap: 12px;
}
.wrf-work-section .wpex-carousel__dots-dot {
width: 12px;
height: 12px;
transition: background-color 0.25s ease;
}
.wrf-work-section .wpex-carousel__dots-dot:not(.active):hover {
background: var(--wrf-sky);
}
/* View butonu — diğer navy outline butonlarla aynı (Insights light ile birebir):
beyaz zemin + navy border + title case; hover'da navy dolgu + beyaz metin */
.wrf-projects-section.wrf-work-section .entry-readmore,
.wrf-projects-section.wrf-work-section a.entry-readmore,
.wrf-projects-section.wrf-work-section a.entry-readmore.theme-button {
text-transform: none !important;
background-color: var(--wrf-white) !important;
border: 1.5px solid var(--wrf-navy) !important;
}
.wrf-projects-section.wrf-work-section .entry-readmore:hover,
.wrf-projects-section.wrf-work-section a.entry-readmore:hover,
.wrf-projects-section.wrf-work-section a.entry-readmore.theme-button:hover {
background-color: var(--wrf-navy) !important;
color: var(--wrf-white) !important;
border-color: var(--wrf-navy) !important;
}
/* =============================================
PARTNER LOGOS — Total Image Carousel (smooth autoplay)
Yönetim: WPBakery → Image Carousel → Images (Media Library'den ekle/çıkar).
Hover pause functions.php'deki wrf_logo_carousel_hover_pause filtresinden.
============================================= */
.wrf-partners-strip {
background-color: var(--wrf-white);
padding: 30px 0;
}
/* Logo hücreleri dikey ortalı */
.wrf-partners-strip .wpex-carousel__item {
display: flex;
align-items: center;
}
/* Logolar — tek boy şerit + gri tonlama, hover'da renklen */
.wrf-partners-strip .wpex-carousel-slide img,
.wrf-partners-strip .wpex-carousel__item img {
height: clamp(36px, 4.5vw, 56px);
width: auto;
max-width: 100%; /* item slot'unu aşmasın → mobilde geniş logolar komşuya binmez */
object-fit: contain;
margin-inline: auto;
/* Feedback R1: logolar RENKLİ (gri filtre + 0.7 opaklık kaldırıldı) */
}
/* Logo hücresi içeriği taşırmasın (owl smooth autoplay'de üst üste binmeyi engelle) */
.wrf-partners-strip .wpex-carousel__item,
.wrf-logos-carousel .wpex-carousel__item { overflow: hidden; }
.wrf-partners-strip .wpex-carousel-slide:hover img,
.wrf-partners-strip .wpex-carousel__item:hover img {
filter: none;
opacity: 1;
}
/* Work carousel yükseklik sabitleme — aktif kartın detay alanı (başlık+metin+buton)
slayttan slayta farklı yükseklikte olduğu için section yüksekliği değişiyor ve
alttaki logo şeridi zıplıyordu. En uzun içeriği karşılayan sabit alan ayrılır. */
@media (min-width: 901px) {
.wrf-work-section .wpex-carousel__item.center .wpex-carousel-entry-details {
min-height: 220px;
}
}
/* Work carousel content alanında kalsın — projects'in full-width (1500px) container
kuralını work varyantında 1260px'e indir (diğer sectionlarla aynı hiza) */
.wrf-projects-section.wrf-work-section > .wpb_column > .vc_column-inner {
max-width: var(--wrf-content-max) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Work varyantı hizalama düzeni:
1) Scale item'dan alınıp yalnızca görsele verilir — böylece detay alanının
konumu ölçeklenmeden, container koordinatlarında hesaplanır.
2) Aktif kartın detayları container genişliğine yayılır ve sol kenarı
"Our work in action" başlığıyla aynı hizada başlar (max genişlik yok). */
@media (min-width: 901px) {
.wrf-projects-section.wrf-work-section .wpex-carousel__item,
.wrf-projects-section.wrf-work-section .wpex-carousel__item.center {
transform: none;
}
.wrf-projects-section.wrf-work-section .wpex-carousel__item .wpex-carousel-entry-media {
transform: scale(0.85);
transform-origin: center center;
transition: transform 0.5s ease;
}
.wrf-projects-section.wrf-work-section .wpex-carousel__item.center .wpex-carousel-entry-media {
transform: scale(1.2); /* Feedback R1: aktif görseli birazcık büyüt (1.1 → 1.2) */
}
/* Detay alanı: sol kenar = başlık hizası, genişlik = stage (container içi).
Hesap (DevTools): item 390px + 30px owl margin; item padding 10px →
slide içi genişlik 370px (=%100). Orta item'ın içerik sol kenarı stage
başından 430px (390+30+10) → left: -(370 + 60). Stage genişliği
3×390 + 2×30 = 1230 → width: 300% (=1110) + 120px. */
.wrf-projects-section.wrf-work-section .wpex-carousel__item.center .wpex-carousel-entry-details {
left: calc(-100% - 60px);
transform: none;
width: calc(300% + 120px);
max-width: none;
padding: 24px 0 0 !important;
text-align: center; /* Feedback R1 (desktop): slayt içeriği ortalı */
}
/* Feedback R1 (yalnız desktop): slayt butonu ortalı; başlık sola yaslı kalır */
.wrf-projects-section.wrf-work-section .wpex-carousel-entry-button,
.wrf-projects-section.wrf-work-section .entry-readmore-wrap {
justify-content: center !important;
}
}
/* Açıklama metninin projects'ten gelen 720px sınırı work'te kalksın */
.wrf-projects-section.wrf-work-section .wpex-carousel-entry-excerpt {
max-width: none;
}
/* =============================================
ROADMAP 2050 SAYFASI — /programmes/roadmap-2050/
Hero: homepage video hero deseni (wrf-hero-overlay yeniden kullanılır).
============================================= */
/* Stage linkleri — hero altı küçük navy etiket-linkler (Canva) */
.wrf-roadmap-intro {
padding: clamp(20px, 3vw, 36px) 0 0 !important;
}
/* Üst stage etiketleri — Canva: tam genişlikte eşit dağılım (space-between).
Anchor'lar vc_column_text içinde 'ye sarıldığı için flex'i
'ye veriyoruz. */
.wrf-stage-links p {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(28px, 4vw, 56px);
width: 100%;
margin: 0 0 36px !important;
}
.wrf-stage-links a {
font-family: var(--wrf-font-heading) !important;
font-weight: 800;
font-size: var(--wrf-text-base);
letter-spacing: 0.01em;
color: var(--wrf-navy) !important;
text-decoration: none !important;
transition: opacity 0.2s ease;
}
.wrf-stage-links a:hover {
opacity: 0.65;
}
.wrf-roadmap-intro__title {
color: var(--wrf-navy) !important;
margin: 0 0 14px !important;
}
.wrf-roadmap-intro__lead {
font-family: var(--wrf-font-sans) !important;
color: var(--wrf-navy);
font-weight: 700;
font-size: var(--wp--preset--font-size--medium);
margin: 0 !important;
}
/* Lead altındaki destekleyici paragraf — aynı navy/sans, normal ağırlık, üstte nefes payı */
.wrf-roadmap-intro__note {
font-family: var(--wrf-font-sans) !important;
color: var(--wrf-navy);
font-weight: 400;
font-size: var(--wp--preset--font-size--medium);
line-height: 1.65;
margin: 14px 0 0 !important;
}
/* Grafik + stage butonları */
.wrf-roadmap-chart {
padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 8vw, 100px) !important;
}
.wrf-roadmap-chart__img img {
width: 100%;
height: auto;
display: block;
}
/* Stage kartları — Canva: tam genişlik eşit grid, navy bloklar,
alt köşeler yuvarlak, arkada soluk dev "ghost" yazı + üstte beyaz etiket. */
.wrf-stage-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(12px, 1.5vw, 24px);
margin-top: 0;
}
.wrf-stage-card {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(96px, 11vw, 140px);
background: var(--wrf-navy);
border-radius: 0 0 18px 18px;
text-decoration: none !important;
transition: background-color 0.25s ease;
}
.wrf-stage-card:hover {
background: var(--wrf-navy-dark);
}
/* Soluk dev ghost yazı — butondan geniş, kenarlardan taşar, overflow ile kırpılır */
.wrf-stage-card__ghost {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--wrf-font-heading) !important;
font-weight: 800;
font-size: clamp(2.6rem, 5vw, 4.2rem);
line-height: 1;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.12);
white-space: nowrap;
pointer-events: none;
user-select: none;
}
/* Üstteki net beyaz etiket */
.wrf-stage-card__label {
position: relative;
z-index: 1;
font-family: var(--wrf-font-heading) !important;
font-weight: 700;
font-size: clamp(1rem, 1.4vw, 1.3rem);
letter-spacing: 0.06em;
color: var(--wrf-white);
}
/* Stage grid wrapper — vc_column_text reset (üstten boşluk) */
.wrf-stage-grid-wrap {
/* grid gap'i ile aynı — kartlarla görsel arası tutarlı boşluk */
margin-top: clamp(12px, 1.5vw, 24px);
}
@media (max-width: 640px) {
.wrf-stage-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* =============================================
ROADMAP 2050 — DETAY SECTION (koyu okyanus bg + içerik)
Row class: wrf-roadmap-detail (bg foto + navy overlay temadan)
============================================= */
.wrf-roadmap-detail {
padding: clamp(48px, 7vw, 96px) var(--wrf-gutter) !important;
}
/* Bg zoom fix: WPBakery parallax (data-vc-parallax=1.5) inner'ı section'ın 1.5 katı
yüksekliğinde yapıp landscape görseli aşırı büyütüyordu (section çok uzun). Görseli
viewport'a göre cover'layan FIXED bg'ye çeviriyoruz → minimal zoom + doğal parallax.
Görsel yine panelden (parallax_image) gelir; skrollr transform'u nötrlenir. */
.wrf-roadmap-detail .vc_parallax-inner {
transform: none !important;
top: 0 !important;
height: 100% !important;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center !important;
}
@media (max-width: 1024px) {
/* mobil/tablet: fixed iOS'ta çalışmaz; cover ise çok uzun section'da görseli
~11× büyütüp bulanıklaştırıyor. Çözüm: görseli ÜST BAND (75vh) olarak keskin
göster (kısa alan → az ölçek → net), gradient mask ile navy'ye erit; alt kısım
section navy bg'si. Panel görseli (parallax_image) korunur. */
.wrf-roadmap-detail {
background-color: var(--wrf-navy) !important;
}
.wrf-roadmap-detail .vc_parallax-inner {
height: 75vh !important;
top: 0 !important;
transform: none !important;
background-attachment: scroll !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}
}
/* İçerik overlay üstünde kalsın (mevcut .wpb_column üzerinden) */
.wrf-roadmap-detail > .wpb_column {
position: relative;
z-index: 2;
}
/* Okunur içerik genişliği — mevcut .vc_column-inner üzerinden (diğer sectionlarla aynı desen) */
.wrf-roadmap-detail .vc_column-inner,
.wrf-roadmap-next .vc_column-inner {
max-width: var(--wrf-content-max);
margin-left: auto !important;
margin-right: auto !important;
}
/* Koyu zeminde tüm metin beyaz */
.wrf-roadmap-detail .wpb_text_column,
.wrf-roadmap-detail p,
.wrf-roadmap-detail strong {
color: var(--wrf-white);
}
/* ORTAK bölüm alt-başlığı (vcex_heading h6) — SİTE STANDARDI: class YALNIZ renk + margin
taşır. font-family/weight/size/line-height GLOBAL başlık sisteminden gelir
(--wpex-heading-font-family=DIN, --wpex-heading-font-weight=700, boyut h6→heading-6 tag'den).
Böylece tüm sitede alt-başlıklar birebir aynı. Renk section'dan. */
.wrf-subtitle { margin: 0 0 16px !important; }
.wrf-roadmap-detail .wrf-subtitle { color: var(--wrf-white) !important; }
.wrf-roadmap-next .wrf-subtitle { color: var(--wrf-navy) !important; }
.wrf-roadmap-detail p {
font-family: var(--wrf-font-sans) !important;
font-size: var(--wrf-text-base);
line-height: 1.65;
margin: 0 0 22px;
}
.wrf-roadmap-detail strong {
font-weight: 800;
}
/* Alıntı + kaynak */
.wrf-roadmap-quote {
font-weight: 800 !important;
font-size: var(--wrf-text-lg) !important;
line-height: 1.5 !important;
margin: 0 0 4px !important;
}
.wrf-roadmap-cite {
font-size: var(--wrf-text-base) !important;
margin: 0 0 22px !important;
}
/* Yeşil pillar kutusu — palet yeşili, hafif opacity (Canva) */
/* Feedback R1 (pg1): Reduce/Remove/Restore kutuları = açık mavi #E9F5FB + navy metin +
3D gölge (G4 kart standardı); üstte harfi fotoğrafla dolu R görseli. */
/* Feedback R1 (pg1): Reduce/Remove/Restore kutuları — #E9F5FB + navy + 3D gölge (G4).
Editör-dostu yapı: vc_row_inner.wrf-pillar-box > vcex_image(R) + vcex_heading(başlık) + vc_column_text(metin).
Başlık PANELDEN yönetilir (vcex_heading text_align=center); paragraf SOLA, tam genişlik. */
.wrf-pillar-box {
background-color: var(--wrf-blue-pale);
border-radius: 16px;
padding: clamp(28px, 3.5vw, 40px) clamp(28px, 5vw, 56px);
text-align: left;
color: var(--wrf-navy);
margin: 10px 0 26px;
box-shadow: var(--wrf-shadow); /* site geneli standart gölge */
}
.wrf-pillar-box > .wpb_column > .vc_column-inner,
.wrf-pillar-box .vc_column-inner { padding: 0 !important; }
/* Kutu içi element varsayılan alt boşluklarını sıfırla — alt padding şişmesin;
boşlukları aşağıdaki açık kurallar yönetir. */
.wrf-pillar-box .vcex-module,
.wrf-pillar-box .wpb_content_element { margin-bottom: 0 !important; }
/* R görseli (vcex_image) — ORTALI (.vcex-image-inner inline-block → figure'e text-align:center) */
.wrf-pillar-box .wrf-pillar-r {
margin: 0 0 20px !important;
text-align: center !important;
}
.wrf-pillar-r img {
width: clamp(112px, 14vw, 150px);
height: auto;
}
/* Başlık (vcex_heading) — ortalı navy */
.wrf-pillar-box .wrf-pillar-title {
text-align: center !important;
color: var(--wrf-navy) !important;
font-family: var(--wrf-font-heading) !important;
font-weight: 800 !important;
font-size: var(--wrf-text-lg) !important;
letter-spacing: 0.06em !important;
margin: 0 0 16px !important;
}
/* Paragraf (vc_column_text) — sola yaslı, tam genişlik (max-width yok) */
.wrf-pillar-text p {
margin: 0 0 8px;
line-height: 1.7;
color: var(--wrf-navy);
}
.wrf-pillar-text p:last-child { margin-bottom: 0; }
/* Pillar buton grid — vcex_flex_container (editörden yönetilebilir) + 4 sütun grid.
Flex container'ın display:flex'ini grid'e çeviriyoruz; butonlar hücreyi doldurur. */
.wrf-pillar-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 1.8vw, 22px);
margin: 26px 0;
}
.wrf-pillar-grid > *,
.wrf-pillar-grid .wrf-pillar-btn {
width: 100%;
}
.wrf-pillar-single {
display: flex;
justify-content: center;
margin: 8px 0 0;
}
/* Pillar buton — wrf-pill-btn--white base'i; tam padding + title case + 2 satıra izin */
.wrf-pillar-btn {
text-transform: none !important;
text-align: center;
font-size: var(--wrf-text-base) !important;
letter-spacing: normal !important;
padding: 18px 26px !important;
min-height: 64px;
line-height: 1.25 !important;
}
.wrf-pillar-btn:hover {
background-color: var(--wrf-white) !important;
color: var(--wrf-navy) !important;
}
/* =============================================
ROADMAP 2050 — WHAT'S NEXT (beyaz, navy metin)
============================================= */
.wrf-roadmap-next {
padding: clamp(48px, 7vw, 90px) 0 !important;
}
.wrf-roadmap-next p,
.wrf-roadmap-next strong {
color: var(--wrf-navy);
}
.wrf-roadmap-next p {
font-family: var(--wrf-font-sans) !important;
font-size: var(--wrf-text-base);
line-height: 1.65;
margin: 0 0 22px;
}
.wrf-roadmap-next strong {
font-weight: 800;
}
.wrf-roadmap-next a {
color: var(--wrf-navy);
text-decoration: underline;
}
.wrf-roadmap-quote--navy,
.wrf-roadmap-cite--navy {
color: var(--wrf-navy) !important;
}
@media (max-width: 900px) {
.wrf-pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.wrf-pillar-grid { grid-template-columns: 1fr; }
}
/* =============================================
MOBİL — Header & Hero düzeltmeleri
============================================= */
@media (max-width: 768px) {
/* Header: masaüstü padding'i (80/90px) mobilde logo+MENU'yü çakıştırıyordu */
body.home .wpex-sticky-header-holder:not(.is-sticky) #site-header {
padding: 24px 20px 0 !important;
}
/* Logo mobilde toggle'a girmesin diye sınırla */
#site-header .logo-img {
max-width: 140px;
}
/* Hero içeriğini 720px row içinde dikey ortala (row'u flex yap) */
.wrf-hero-overlay {
display: flex;
align-items: center;
}
.wrf-hero-overlay > .wpb_column {
width: 100%;
}
/* Üst spacer: flex-center + bu değer içeriği merkezin biraz altına indirir */
.wrf-hero-overlay .vcex-spacing[style*="210px"] {
height: clamp(80px, 22vw, 140px) !important;
}
.wrf-hero-overlay .vcex-spacing[style*="clamp(80px"] {
height: 48px !important;
}
}
/* =============================================
STAGE SAYFALARI (Build/Operation/Design/Refit)
============================================= */
/* 4'lü navigasyon — hero altı, aktif sekme palet yeşili */
/* Tam-genişlik nav'ın 50vw taşması (dikey scrollbar payı) yatay sayfa scroll'u
yaratmasın → en dış sarmalda yatay clip. clip, dikeyi/sticky header'ı bozmaz. */
#outer-wrap { overflow-x: clip; }
.wrf-stage-nav-row {
/* padding-top SIFIR: değişken clamp offset'i straddle'ı viewport'a göre kaydırıyordu.
Sabit offset → sabit margin her ekranda aynı yarı-binmeyi verir. */
padding: 0 !important;
/* Feedback R1: pill şeridi TAM GENİŞLİK — container'dan taşır, viewport'a yayılır. */
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
max-width: 100vw !important;
}
/* Straddle'ı DETERMİNİSTİK yap: nav row içindeki kolon/text dikey boşluklarını sıfırla.
(Total'ın responsive .vc_column-inner padding'i offset'i sayfa/viewport'a göre kaydırıp
sabit margin'i şaşırtıyordu.) Böylece pill'lerin başlangıcı hep video kenarında → tek
düz margin her sayfada/ekranda aynı yarı-binmeyi verir. */
.wrf-stage-nav-row .vc_column-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
.wrf-stage-nav-row .wpb_text_column { margin: 0 !important; }
.wrf-stage-nav {
/* BLOK akış: __scroll'un negatif margin'i (straddle) alt öğeleri de yukarı taşır →
parent pill'lere yapışır, flex'teki rezerve boşluk olmaz. Ortalamayı iç öğeler yapar. */
display: block;
margin-bottom: clamp(24px, 4vw, 40px);
}
/* Child item sarmalı — masaüstü: ortalı wrap; mobil: tek satır yatay kaydırma + sol/sağ beyaz fade */
.wrf-stage-nav__scroll { flex: 0 0 100%; width: 100%; position: relative; }
/* Child item'lar TEK SATIR (asla 2 satıra inmez); sığmazsa yatay kaydırma + sol/sağ beyaz fade.
"safe center": sığarsa ortalı, taşarsa baştan hizalı (kaydırılabilir). Fade ortalıyken beyaz
üzerinde görünmez, içerik kenara taşınca belirir → masaüstü + mobil ORTAK davranış. */
.wrf-stage-nav__items {
display: flex;
flex-wrap: nowrap; /* TEK SATIR — asla alt satıra inmez */
justify-content: safe center; /* sığarsa ortalı, taşarsa baştan (kaydırılabilir) */
column-gap: clamp(12px, 1.6vw, 22px);
overflow-x: auto; /* taşınca yatay kaydırma; aktif pill JS ile ortaya gelir */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* dikey padding = pill gölgesine yer (overflow-x:auto dikeyde de clip yapar) + straddle üst payı */
padding: 10px clamp(16px, 3vw, 30px) 22px;
scroll-padding-inline: clamp(16px, 3vw, 30px);
margin-left: -15px;
margin-right: -30px;
}
.wrf-stage-nav__items::-webkit-scrollbar { display: none; }
.wrf-stage-nav__items > .wrf-stage-nav__item { flex: 0 0 auto; white-space: nowrap; }
/* Yatay kaydırma fade'i KAPALI — pill'ler hero videosu üstüne bindiği için beyaz fade uygun değil. */
.wrf-stage-nav__scroll::before,
.wrf-stage-nav__scroll::after { content: none; }
/* =========================================================
FEEDBACK R1 — MENÜ FLIP (pg41)
Child sayfalar = hero'nun alt kenarına binen PILL'ler (yarısı video üstünde).
Parent (hub) = pill'lerin ALTINDA küçük, zeminsiz geri linki.
Suffix (stage/project/programme) shortcode'da kaldırıldı.
========================================================= */
/* Pill satırını hero'nun alt kenarına bindir (yarısı video üstünde).
NOT: items padding-top straddle'ı zayıflattığı için üstte az, altta gölge kadar padding. */
.wrf-stage-nav__scroll {
z-index: 3;
/* Kolon/text boşlukları sıfırlandığı için offset sabit → TEK düz değer her sayfa+ekranda
aynı yarı-binme. Ayrı mobil media query'ye gerek yok. */
margin-top: -34px;
}
/* (pill padding'i base .wrf-stage-nav__items kuralında — nowrap+scroll için tek yerde toplandı) */
/* Child item = beyaz pill, navy metin, gölge; hover'da hafif yükselir */
.wrf-stage-nav__item:not(.wrf-stage-nav__item--parent) {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
font-family: var(--wrf-font-heading) !important;
font-weight: 700;
font-size: var(--wrf-text-md);
letter-spacing: 0.02em;
color: var(--wrf-navy) !important;
text-decoration: none !important;
background: var(--wrf-white);
border-radius: var(--wrf-radius-pill);
padding: clamp(11px, 1.4vw, 15px) clamp(20px, 2.4vw, 30px);
box-shadow: 0 6px 14px -4px rgba(var(--wrf-navy-rgb), 0.38);
transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.wrf-stage-nav__item:not(.wrf-stage-nav__item--parent):hover {
color: var(--wrf-navy) !important;
box-shadow: 0 9px 18px -6px rgba(var(--wrf-navy-rgb), 0.5);
transform: translateY(-2px);
}
/* Aktif sayfa — dolu navy pill */
.wrf-stage-nav__item.is-active,
.wrf-stage-nav__item.is-active:hover {
background: var(--wrf-navy);
color: var(--wrf-white) !important;
}
/* Parent (hub) = altta küçük ortalı geri linki (zeminsiz) */
.wrf-stage-nav__top {
flex: 0 0 100%;
display: flex;
justify-content: center;
margin-top: clamp(2px, 0.6vw, 8px);
}
.wrf-stage-nav__item--parent {
background: none;
color: var(--wrf-navy) !important;
font-family: var(--wrf-font-heading) !important;
font-size: var(--wrf-text-sm);
font-weight: 700;
text-decoration: none !important;
padding: 6px 8px;
transition: color .2s ease;
}
.wrf-stage-nav__item--parent:hover { color: var(--wrf-blue-muted) !important; }
.wrf-stage-nav__item--parent::before { content: "\2190"; margin-right: 8px; }
.wrf-stage-nav__item--parent.is-active::before { content: none; }
/* İçerik section'ları (beyaz) */
.wrf-stage-intro,
.wrf-stage-closing {
padding: clamp(40px, 6vw, 72px) 0 !important;
}
.wrf-stage-intro p,
.wrf-stage-closing p {
font-family: var(--wrf-font-sans) !important;
color: var(--wrf-navy);
font-size: var(--wrf-text-base);
line-height: 1.7;
margin: 0 0 22px;
}
.wrf-stage-heading {
color: var(--wrf-navy) !important;
margin: 8px 0 14px !important;
}
/* "Build reduce actions" — bg foto + navy overlay + carousel */
/* Full-width: row tam genişlik (yatay padding yok). Başlık ve slider kendi
bleed-pad'leriyle content-left'e hizalanır; slider iki kenara da taşar. */
.wrf-stage-actions {
padding: clamp(48px, 7vw, 96px) 0 !important;
}
.wrf-stage-actions__title {
color: var(--wrf-navy) !important;
margin: 0 0 32px !important;
padding-left: var(--wrf-bleed-pad);
}
/* Intro başlığı — diğer başlıklarla aynı navy */
.wrf-stage-intro-title {
color: var(--wrf-navy) !important;
}
/* Year + desc kutusu — palet yeşili, beyaz ortalı metin */
.wrf-milestone {
flex: 0 0 clamp(288px, 30vw, 375px);
background: var(--wrf-green);
border-radius: 14px;
padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 28px);
text-align: center;
box-shadow: var(--wrf-shadow); /* Feedback R1: site geneli standart gölge */
}
/* Site geneli gölge utility — panelden Extra class "wrf-shadow" ile herhangi bir kutuya eklenebilir */
.wrf-shadow { box-shadow: var(--wrf-shadow) !important; }
.wrf-milestone__year {
display: block;
font-family: var(--wrf-font-heading) !important;
font-weight: 800;
font-size: clamp(1.8rem, 3vw, 2.4rem);
color: var(--wrf-white);
line-height: 1;
margin-bottom: 14px;
}
.wrf-milestone__desc p {
font-family: var(--wrf-font-sans) !important;
color: var(--wrf-white);
font-size: var(--wrf-text-sm);
line-height: 1.55;
margin: 0;
}
/* Yatay slider — kartlar yan yana akar, en sağdaki yarım görünür (peek),
sürüklenir (functions.php drag JS) + scroll-snap. Scrollbar gizli, ok/dot yok. */
.wrf-milestone-slider .wpb_wrapper {
display: flex;
gap: clamp(16px, 1.8vw, 24px);
overflow-x: auto;
/* scroll-snap yok — serbest kaydırma. Track tam genişlik; ilk kart bleed-pad
ile content-left'te başlar, kaydırınca kartlar ekran kenarına kadar uzar/kırpılır. */
padding-left: var(--wrf-bleed-pad);
padding-right: var(--wrf-gutter);
-webkit-overflow-scrolling: touch;
cursor: grab;
align-items: stretch;
/* overflow-x:auto dikeyde de clip yapıyor → gölgeye yer aç (üst+alt) */
padding-top: 16px;
padding-bottom: 42px;
/* Görünür ince yatay scrollbar — Firefox */
scrollbar-width: thin;
scrollbar-color: var(--wrf-green) var(--wrf-grey);
}
/* Görünür ince yatay scrollbar — WebKit */
.wrf-milestone-slider .wpb_wrapper::-webkit-scrollbar {
height: 8px;
}
.wrf-milestone-slider .wpb_wrapper::-webkit-scrollbar-track {
background: var(--wrf-grey);
border-radius: 9999px;
}
.wrf-milestone-slider .wpb_wrapper::-webkit-scrollbar-thumb {
background: var(--wrf-green);
border-radius: 9999px;
}
.wrf-milestone-slider.is-dragging .wpb_wrapper { cursor: grabbing; }
.wrf-milestone-slider .wpb_wrapper > p:empty { display: none; }
/* Intro lead paragrafı — SS: başlık altı bold navy */
.wrf-stage-lead p { font-weight: 700 !important; }
/* İçerik foto-bg section (build-bg) — beyaz metin, okunabilirlik için navy overlay */
.wrf-stage-photo {
/* Yatay padding = bleed-pad → içerik (kutular) content-max'e sabitlenir, bg full-width kalır */
padding: clamp(48px, 7vw, 90px) var(--wrf-bleed-pad) !important;
}
.wrf-stage-photo > .wpb_column {
position: relative;
z-index: 2;
}
.wrf-stage-photo .vc_column-inner {
max-width: var(--wrf-content-max);
margin-left: auto !important;
margin-right: auto !important;
}
.wrf-stage-photo .wrf-stage-heading,
.wrf-stage-photo p {
color: var(--wrf-white) !important;
}
.wrf-stage-photo p {
font-family: var(--wrf-font-sans) !important;
font-size: var(--wrf-text-base);
line-height: 1.7;
margin: 0 0 22px;
}
/* Feedback R1 (pg2): stage-photo bg — WPBakery content-moving parallax görselin ÜST
kısmını (gökyüzü) kırpıp yatları gizliyordu. Fixed bg (roadmap deseni) + position ~%62
→ yatlar görünür, hafif parallax. Mobilde scroll (iOS fixed desteklemez). */
.wrf-stage-photo .vc_parallax-inner {
transform: none !important;
top: 0 !important;
height: 100% !important;
background-attachment: fixed !important;
background-size: cover !important;
background-position: center 62% !important;
}
@media (max-width: 1024px) {
.wrf-stage-photo .vc_parallax-inner {
background-attachment: scroll !important;
background-position: center 62% !important;
}
}
/* =============================================
SİTE GENELİ STANDART KUTU (G4) — .wrf-box + .wrf-box-grid
#E9F5FB + navy metin + 16px radius + --wrf-shadow. vc_column'a el_class="wrf-box".
Grid: inner-row el_class="wrf-box-grid" (CSS flex gap → hiza/tutarlılık; tema gutter'ı
her yöne padding sızdırdığı için kullanılmıyor). Kullanıcı kuralı: kutular standart.
============================================= */
.wrf-box > .vc_column-inner {
background: var(--wrf-blue-pale) !important;
border-radius: 16px !important;
padding: clamp(24px, 2.4vw, 32px) !important;
box-shadow: var(--wrf-shadow);
height: 100%;
/* section'ın .vc_column-inner content-max/auto kuralı kutu iç'ini sıkıştırmasın
(özellikle full-width Step 5) → kutu grid hücresini doldurur */
max-width: none !important;
margin: 0 !important;
/* içerik dikeyde ortalı (equal_height kutularda) */
display: flex;
flex-direction: column;
justify-content: center;
}
.wrf-box p, .wrf-box li, .wrf-box strong { color: var(--wrf-navy) !important; }
/* Standart kutu başlığı (h6) — SİTE GENELİ: DIN 700, navy, heading-6 preset. Ham px YOK. */
.wrf-box :is(h5, h6) {
font-family: var(--wrf-font-heading) !important;
font-weight: 700 !important;
font-size: var(--wp--preset--font-size--heading-6) !important;
line-height: 1.25;
color: var(--wrf-navy) !important;
margin: 0 0 clamp(10px, 1.4vw, 14px) !important;
}
/* Kutu hover-pop (Feedback: kutular hover'da hafif yükselsin) */
.wrf-box > .vc_column-inner { transition: transform 0.22s ease, box-shadow 0.22s ease; }
.wrf-box > .vc_column-inner:hover { transform: translateY(-4px); box-shadow: 0 24px 42px -20px rgba(var(--wrf-navy-rgb), 0.42); }
/* Grid kutularında içerik ÜSTTE (başlık yukarıda) — genel stil; dikey ortalama değil */
.wrf-box-grid .wrf-box > .vc_column-inner { justify-content: flex-start; }
.wrf-box-grid {
display: flex !important;
flex-wrap: wrap;
gap: 24px;
align-items: stretch;
margin: 0 !important;
}
.wrf-box-grid > .wpb_column {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
@media (max-width: 767px) { .wrf-box-grid > .wpb_column { flex: 1 1 100% !important; } }
/* OAP "What is Ocean Assist" denklem görseli (pg9) — ortalı */
.wrf-oap-equation { text-align: center; margin: 8px 0 34px !important; }
.wrf-oap-equation img { max-width: 1080px; width: 100%; height: auto; }
/* Feedback R1 (pg2): "What are we targeting" — parlak foto bg + 3 açık-mavi frosted kutu
(3 sütun; mobilde stack). Her sütun = #E9F5FB frosted kutu, navy başlık + metin. */
/* Build (3-eşit, no_spaces): sütunlar kenar-kenara → yatay padding ile gap.
Split'te gap tema Outer Column Gap'inden (gap="30") gelir → sadece NON-SPLIT'e uygula. */
.wrf-stage-photo:not(.wrf-stage-photo--split) .wrf-target-box { padding-left: 14px !important; padding-right: 14px !important; }
.wrf-stage-photo .wrf-target-box > .vc_column-inner {
background: rgba(233, 245, 251, 0.9);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: 16px;
/* no_spaces .vc_column-inner padding:0'ı ez → kutu iç boşluğu */
padding: clamp(26px, 2.4vw, 36px) clamp(24px, 2.2vw, 32px) !important;
box-shadow: var(--wrf-shadow); /* site geneli standart gölge */
height: 100%;
max-width: none !important;
margin: 0 !important;
}
/* Kutu başlığı — SİTE STANDARDI: yalnız renk + margin; boyut/font/weight global h6
sisteminden (h6 tag → heading-6 preset, DIN, 700). Custom font-size YOK. */
.wrf-target-box__title {
color: var(--wrf-navy) !important;
margin: 0 0 12px !important;
}
.wrf-stage-photo .wrf-target-box p {
color: var(--wrf-navy) !important;
font-size: var(--wrf-text-sm) !important;
line-height: 1.6 !important;
margin: 0 0 10px !important;
}
.wrf-stage-photo .wrf-target-box p:last-child { margin-bottom: 0 !important; }
/* Split (Operation/Design/Refit): tema gap="30" + vcex_spacing KALDIRILDI (çakışıyorlardı).
Boşluklar TEK kaynaktan CSS: alt 2 kutu = flex gap; üst→alt = top-row margin. TEK değer
(28px), desktop + mobil TUTARLI. */
.wrf-stage-photo--split .wrf-stage-split-top { margin-bottom: 28px !important; }
/* Kenar hizası: her iki inner-row + sütunların yatay padding/margin'ini sıfırla →
üst kutu ile alt kutular content kenarına AYNI hizada. */
.wrf-stage-photo--split .wrf-stage-split-top,
.wrf-stage-photo--split .wrf-stage-split-bottom {
margin-left: 0 !important;
margin-right: 0 !important;
}
.wrf-stage-photo--split .wrf-stage-split-top > .wpb_column {
padding-left: 0 !important;
padding-right: 0 !important;
}
.wrf-stage-photo--split .wrf-stage-split-bottom {
display: flex !important;
flex-wrap: wrap;
gap: 28px;
align-items: stretch;
}
.wrf-stage-photo--split .wrf-stage-split-bottom > .wpb_column {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
@media (max-width: 767px) {
/* mobil: alt kutular tam genişlik stack; flex gap 28px zaten dikey → tutarlı */
.wrf-stage-photo--split .wrf-stage-split-bottom > .wpb_column { flex: 1 1 100% !important; }
/* Build (non-split, 3-stack): mobil dikey boşluk */
.wrf-stage-photo:not(.wrf-stage-photo--split) .wrf-target-box { margin-bottom: 20px !important; }
.wrf-stage-photo:not(.wrf-stage-photo--split) .wrf-target-box:last-child { margin-bottom: 0 !important; }
}
/* =============================================
FOTO-BG İÇERİK BAND'LARI — MOBİL OVERLAY GÜÇLENDİRME
Dar mobil viewport'ta cover-crop görselin dar orta şeridini (çoğu
zaman hareketli/parlak su, öznesiz) gösterir; parlak alanlarda beyaz
metin okunmaz. Mobilde overlay'i güçlü navy'ye çekip fotoyu sakin bir
doku haline getiririz — metin her yerde net okunur. Masaüstü overlay'i
(daha açık, görseli gösteren) kendi değerinde kalır.
Overlay rengi Total'ın scoped inline