/* ==========================================================================
POBOL ORTAK TASARIM SİSTEMİ — "SHEET & RAIL"
--------------------------------------------------------------------------
Yapısal fikir:
1) Sayfanın tabanı koyu; içerik bu tabanın üzerine oturan geniş yarıçaplı
beyaz bir "levha" (.sheet). Footer levhanın altında kalan açık tabandır.
2) Her bölüm, başlığın üzerinde duran bir künye (.kicker) ile açılır; içerik
geniş kolonda akar. Bölüm başlığı ortalanmaz, kenara yazılır.
3) Kart ızgarası yerine: basamaklı özellik ızgarası (.feat), üst üste
yığılan kartlar (.stack), katlanır banner panelleri (.fold), seçmeli
yan yana paket kartları (.plans), çizgili kategori listesi (.catlist), dikey
akan referans kolonları (.vmarq), hover ile açılan ürün listesi
(.famlist) ve eğik kesimli CTA (.ctasplit).
Marka rengi tek noktadan gelir: --brand / --brand-deep / --brand-soft
(inc/config.php içindeki $BRAND dizisinden basılır). Nötrler Pobol
logolarının gerçek gri ve siyahlarıdır.
========================================================================== */
:root { /* marka — config.php tarafından ezilir */ --brand: #53AF31; --brand-deep: #3E8C22; --brand-soft: #F0F8EC; /* koyu zeminlerde kullanılan açık ton — asidik değil, yumuşak */ --brand-lift: color-mix(in oklab,var(--brand) 72%,#EDFAD6); /* yüzeyler — sert siyah yerine sıcak, yumuşak koyular */ --base: #181B17; /* sayfa tabanı (koyu) */ --base-2: #242821; /* taban üstü koyu kutu */ --sheet: #F8F8F5; /* levha zemini */ --s1: #FFFFFF; /* levha üstü kutu */ --tint: color-mix(in oklab,var(--brand) 7%,#FFFFFF); /* metin */ --text: #20241E; --text-2: #5B5B5B; --text-3: #8D9091; --on-dark: rgba(255,255,255,.74); --on-dark-3: rgba(255,255,255,.46); --hair: rgba(32,36,30,.075); --hair-dark: rgba(255,255,255,.1); --ok: #2BAAB1; --warn: #E36159; --info: #088CDC; --gold: #FCB037; --shell: 1320px; --gap: clamp(12px,1.6vw,22px); /* levha kenar boşluğu */ --r-sheet: clamp(26px,3.4vw,52px); --r-xl: 28px; --r: 20px; --r-sm: 14px; --pill: 999px; /* gölgeler: daha az koyu, daha geniş yayılımlı */ --sh1: 0 1px 2px rgba(32,36,30,.03),0 14px 32px -18px rgba(32,36,30,.13); --sh2: 0 2px 8px rgba(32,36,30,.035),0 32px 60px -28px rgba(32,36,30,.18); --sh3: 0 50px 100px -42px rgba(0,0,0,.44); --head: "Inter Tight","Inter",system-ui,-apple-system,Segoe UI,sans-serif; --body: "Open Sans",system-ui,-apple-system,Segoe UI,sans-serif; --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); --stick: 96px; /* yapışkan ray üst boşluğu */ --ov: clamp(26px,4vw,58px); /* levhanın koyu bloğa binme payı */ }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Mobil menü açıkken sayfa arkada kaymasın. Gövde o anki kaydırma konumunda
sabitlenir (pobol.js body.top = -scrollY yazar), kapanışta aynı konuma
dönülür. Yalnızca overflow:hidden yetmiyordu: açık menüde başlık
position:fixed olduğu için akıştan çıkıyor, altındaki içerik başlık
yüksekliği kadar yukarı zıplıyor, menü kapanınca geri iniyordu. */
html.scroll-locked { overflow: hidden; }
html.scroll-locked body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; padding-right: var(--sbw,0px); }
/* Kilit, kaydırma çubuğunu da götürüyor: görünen alan çubuk genişliği kadar
genişliyor ve sayfa sağa kayıyordu. pobol.js kilitten hemen önce çubuğun
gerçek genişliğini --sbw olarak yazıyor; gövde o kadar iç boşluk alınca
içerik tam olarak eski yerinde kalıyor. Görünen alana göre konumlanan
sabit öğeler de aynı payla içeri çekilir. */
html.scroll-locked .totop { margin-right: var(--sbw,0px); }
/* Çapa bağlantısıyla (#bolum) gelindiğinde yapışkan header başlığın üstünü
kapatmasın: hedef, header yüksekliği kadar aşağıdan başlar. */
[id] { scroll-margin-top: calc(var(--stick) + 16px); }
body { margin: 0; background: var(--base); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.76; -webkit-font-smoothing: antialiased; }
/* tipografi: daha ferah satır yüksekliği, daha az sıkışık harf aralığı */
h1, h2, h3, h4, h5 { font-family: var(--head); margin: 0; color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(38px,6vw,86px); font-weight: 600; line-height: 1.06; letter-spacing: -.02em; }
h2 { font-size: clamp(29px,3.9vw,55px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
h3 { font-size: clamp(19px,1.6vw,23px); font-weight: 600; line-height: 1.32; letter-spacing: 0; }
h4 { font-size: 17px; font-weight: 600; letter-spacing: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 clamp(18px,3vw,44px); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.tac { text-align: center; }
/* ======================================================== LEVHA ========= */
.sheet { display: block; background: var(--sheet); border-radius: var(--r-sheet); margin: calc(-1 * var(--ov)) var(--gap) var(--gap); position: relative; z-index: 2; box-shadow: 0 -30px 60px -40px rgba(0,0,0,.5); }
/* levhanın içinde tam genişlik koyu panel */
.sheet .sec-ink { background: var(--base-2); border-radius: var(--r-xl); margin: 0 clamp(12px,2vw,26px); position: relative; }
/* ======================================================== ETİKET ======== */
.kicker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-deep); }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.on-ink .kicker, .hero .kicker, .page-head .kicker, .tile.ink .kicker, .ctaband .kicker, .dw-head .kicker { color: #fff; }
.on-ink .kicker::before, .hero .kicker::before, .page-head .kicker::before, .ctaband .kicker::before, .dw-head .kicker::before { background: var(--brand-lift); }
.lead { font-size: clamp(16px,1.2vw,19px); color: var(--text-2); max-width: 60ch; line-height: 1.76; }
.on-ink .lead, .hero .lead, .page-head .lead, .ctaband .lead { color: var(--on-dark); }
.on-ink, .on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: #fff; }
/* ====================================================== BUTONLAR ======== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--head); font-size: 15px; font-weight: 600; letter-spacing: 0; padding: 15px 28px; border-radius: var(--pill); border: 0; cursor: pointer; transition: background .18s,color .18s,transform .18s,box-shadow .18s; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 16px 32px -16px color-mix(in srgb,var(--brand) 62%,transparent); }
.btn-primary:hover { background: var(--brand-deep); transform: translateY(-1.5px); }
.btn-outline { background: rgba(20,22,19,.06); color: var(--text); }
.btn-outline:hover { background: rgba(20,22,19,.11); }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px var(--hair-dark); }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
.btn-white { background: #fff; color: var(--text); }
.btn-white:hover { background: var(--brand-soft); color: var(--brand-deep); transform: translateY(-1.5px); }
.btn-sm { padding: 11px 20px; font-size: 14px; }
.btn-block { width: 100%; }
.hero .btn-outline, .on-ink .btn-outline, .page-head .btn-outline, .ctaband .btn-outline, .site-head:not(.small) .btn-outline { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px var(--hair-dark); }
.hero .btn-outline:hover, .on-ink .btn-outline:hover, .ctaband .btn-outline:hover { background: rgba(255,255,255,.18); }
/* ==================================================== ÜST ŞERİT ========= */
.topbar { background: var(--base); color: var(--on-dark); font-size: 13px; }
.topbar .shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; }
.topbar-l, .topbar-r { display: flex; align-items: center; gap: 24px; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; }
.topbar a:hover { color: var(--brand-lift); }
.topbar svg { width: 14px; height: 14px; }
.topbar-note { color: var(--on-dark-3); font-size: 12px; }
/* ======================================================= HEADER ========= */
.site-head { position: sticky; top: 0; z-index: 70; background: var(--base); transition: background .25s,padding .25s; }
.site-head .shell { display: flex; align-items: center; gap: 26px; min-height: 84px; transition: min-height .25s,background .25s,border-radius .25s,box-shadow .25s,padding .25s; }
/* Yapışkan hâl: kenardan kenara tam genişlik şerit, üstte boşluk yok (27.10.2026).
Eskiden üstten 10px boşluklu, ortada yüzen yuvarlak bir haptı. Arka plan ve
gölge şeridin kendisinde; içerik yine .shell genişliğinde hizalı kalır. */
.site-head.small { background: rgba(255,255,255,.92); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 1px 0 rgba(20,22,19,.06), 0 14px 32px -18px rgba(32,36,30,.22); padding-top: 0; }
.site-head.small .shell { min-height: 64px; }
.site-head:not(.small) .mainnav>li>a { color: var(--on-dark); }
.site-head:not(.small) .mainnav>li>a:hover { color: #fff; background: rgba(255,255,255,.09); }
.site-head:not(.small) .mainnav>li.active>a { color: #fff; background: rgba(255,255,255,.14); }
.site-head:not(.small) .navtoggle { background: rgba(255,255,255,.12); }
.site-head:not(.small) .navtoggle span { background: #fff; }
.site-head:not(.small).open .submenu a { color: var(--on-dark); }
/* logo */
.wordmark { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.logo-img { height: var(--logo-h,42px); width: auto; max-width: 100%; min-width: 0; transition: height .25s; }
.site-head.small .logo-img { height: calc(var(--logo-h,42px) - 8px); }
.site-foot .logo-img { height: calc(var(--logo-h,42px) - 2px); }
.wordmark b { font-family: var(--head); font-weight: 700; font-size: 30px; letter-spacing: -.02em; color: var(--brand); line-height: 1; }
.wordmark i { font-style: normal; font-family: var(--head); font-weight: 600; font-size: 19px; color: #fff; background: var(--text-3); border-radius: 8px; padding: 3px 10px 4px; line-height: 1.05; }
.wordmark small { display: block; font-size: 9.5px; letter-spacing: .06em; color: var(--text-3); margin-top: 3px; white-space: nowrap; }
.wordmark-txt { display: flex; flex-direction: column; }
.site-foot .wordmark i { background: var(--text-2); }
.site-foot .wordmark small { color: var(--on-dark-3); }
/* menü */
/* Menü rayı çubuğun tam yüksekliğini kaplar; bağlantı hapı içinde dikeyde
ortalı durur. Böylece 'nin alt kenarı = çubuğun alt kenarı olur ve
açılır menü "top: 100%" ile tam çubuk hizasından başlar (sihirli sayı yok).
Yan etkisi: hover alanı çubuk yüksekliği kadar olur, fare daha az kopar. */
.mainnav { margin-left: auto; display: flex; align-self: stretch; align-items: stretch; gap: 2px; }
.mainnav>li { position: relative; display: flex; align-items: center; }
.mainnav>li>a { display: flex; align-items: center; gap: 6px; font-family: var(--head); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--text-2); padding: 9px 14px; border-radius: var(--pill); transition: color .16s,background .16s; }
.mainnav>li>a:hover { color: var(--text); background: rgba(20,22,19,.06); }
.mainnav>li.active>a { color: var(--text); background: rgba(20,22,19,.09); font-weight: 600; }
.mainnav .caret { width: 9px; height: 9px; opacity: .45; }
/* Açılır menü. İki ayrı hover sorunu çözülür:
1) Bağlantı ile panel arasındaki 10px boşluk ::before ile köprülenir —
fare boşluktan geçerken hâlâ içinde kaldığı için menü kapanmaz.
2) Kapanış 0.14s gecikmeli; fare bir an dışarı çıkarsa menü hemen kapanmaz,
geri dönünce iptal olur. Açılış gecikmesiz (hover kuralında 0s).
Panel artık dikeyde kaymıyor (yalnızca hafif scale) — sınırda titreme olmaz. */
.submenu { position: absolute; top: calc(100% + 10px); left: 50%; --sub-shift: 0px; min-width: 264px; background: var(--s1); border-radius: var(--r); box-shadow: var(--sh2); padding: 10px; opacity: 0; visibility: hidden; transform: translateX(calc(-50% + var(--sub-shift))) scale(.985); transform-origin: top center; transition: opacity .18s,transform .18s,visibility .18s; transition-delay: .14s; }
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
/* Başlık çubuğu kaydırmayla yapışkan hâle geçtiğinde (.small) açılır menü
doğrudan bağlantıya yapışır: boşluk kapanır, üst köşeler düzleşir. */
/* Yapışkan hâlde açılır menü çubuğun devamı gibi görünür: aynı yarı saydam
beyaz ve aynı bulanıklık (.site-head.small .shell ile birebir), boşluk yok,
üst köşeler düz. Böylece ikisi arasında renk dikişi oluşmaz. */
.site-head.small .submenu { top: 100%; border-top-left-radius: 0; border-top-right-radius: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
.site-head.small .submenu::before { display: none; }
.mainnav>li:hover .submenu, .mainnav>li:focus-within .submenu { opacity: 1; visibility: visible; transform: translateX(calc(-50% + var(--sub-shift))); transition-delay: 0s; }
.submenu a { display: block; font-size: 14.5px; color: var(--text-2); padding: 10px 13px; border-radius: var(--r-sm); }
.submenu a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.head-cta { display: flex; align-items: center; gap: 9px; flex: none; }
.navtoggle { display: none; margin-left: auto; width: 46px; height: 42px; border: 0; background: rgba(20,22,19,.06); border-radius: var(--r-sm); cursor: pointer; padding: 0; }
.navtoggle span { display: block; width: 18px; height: 2px; background: var(--text); margin: 4px auto; border-radius: 2px; transition: transform .2s,opacity .2s; }
/* Çubuklar 2px yüksek ve 4px marjlı; bitişik marjlar çakıştığı için merkezler
10px değil 6px aralıklı. X için üst çubuk +6, alt çubuk -6 kaydırılmalı. */
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ========================================================= HERO ========= */
/* Videolu hero (.herov) ile paylaşılan parçalar: düğme satırı, alt not ve
tabandaki rakam şeridi. */
.herov h1 em { font-style: normal; background: linear-gradient(96deg,var(--brand-lift),var(--brand)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--on-dark-3); }
.hero-note svg { width: 17px; height: 17px; color: var(--brand-lift); flex: none; }
/* rakam şeridi — hero'nun altına yatay çizgiyle oturur */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid var(--hair-dark); }
/* hücre içi soluk: ilk hücre başlıkla hizalı kalsın, diğerleri çizgiden nefes alsın */
.stats>div { padding: clamp(18px,2.2vw,30px) clamp(18px,2.2vw,32px); border-right: 1px solid var(--hair-dark); }
.stats>div:first-child { padding-left: 0; }
.stats>div:last-child { border-right: 0; padding-right: 0; }
.stats dt { font-family: var(--head); font-size: clamp(34px,4.4vw,62px); font-weight: 700; letter-spacing: -.02em; line-height: .92; color: #fff; font-variant-numeric: tabular-nums; }
.stats dd { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--on-dark-3); }
/* ============================================== SAYFA BAŞLIĞI ========== */
.page-head { position: relative; overflow: hidden; background: var(--base); color: #fff; }
.page-head::before { content: ""; position: absolute; width: 760px; aspect-ratio: 1; right: -12%; top: -150%; background: radial-gradient(circle,color-mix(in srgb,var(--brand) 36%,transparent) 0%,transparent 62%); filter: blur(18px); }
.page-head .shell { position: relative; z-index: 1; padding-top: clamp(34px,4.6vw,72px); padding-bottom: clamp(48px,6vw,96px); display: grid; grid-template-columns: 1fr minmax(0,42ch); gap: 14px clamp(24px,4vw,64px); align-items: end; }
.page-head .crumb { grid-column: 1/-1; }
/* h1 genel kuralla koyu metin rengini alıyor; koyu zeminde beyaza çevrilir */
.page-head h1, .page-head h2 { color: #fff; }
.page-head h1 { grid-column: 1; font-size: clamp(34px,5vw,72px); }
.page-head .lead { grid-column: 2; padding-bottom: 8px; }
.crumb { display: flex; flex-wrap: wrap; gap: 9px; font-size: 13px; color: var(--on-dark-3); }
.crumb a:hover { color: var(--brand-lift); }
.crumb span { opacity: .55; }
/* entegrasyon kategorileri gibi arka arkaya gelen kısa bölümler */
.sec-cat { padding: clamp(18px,2vw,30px) 0; }
/* ============================================ BÖLÜM + RAY ============== */
.sec { padding: clamp(40px,4.8vw,78px) 0; }
.sec-sm { padding: clamp(28px,3.2vw,50px) 0; }
/* dokulu ara zemin: düz ton değil, ince nokta ızgarası */
.sec-alt { background: radial-gradient(circle at center,color-mix(in srgb,var(--brand) 22%,transparent) .85px,transparent 1px) 0 0 / 22px 22px,var(--tint); }
/* Yapışkan künye rayı + geniş içerik kolonu. Ray ile içerik arasında,
bölümün tamamı boyunca inen ince bir ayraç çizgisi vardır. */
/* Bölüm künyesi: solda ince bir dikey ray. Marka noktası üstte, etiket
dikey yazılır (aşağıdan yukarıya okunur), altından saç teli çizgi iner. */
.layout { display: grid; grid-template-columns: clamp(42px,4.4vw,58px) minmax(0,1fr); column-gap: clamp(12px,1.8vw,28px); align-items: stretch; }
.rail { position: sticky; top: var(--stick); align-self: start; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 5px; }
.rail::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.rail-t { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); transform-origin: center; white-space: nowrap; font-family: var(--head); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.15; padding-block: 2px; text-transform: uppercase; color: var(--text-3); }
.rail::after { content: ""; flex: none; width: 1px; height: clamp(40px,7vw,120px); background: var(--hair); }
.sec-ink .rail-t, .on-ink .rail-t { color: var(--on-dark-3); }
.sec-ink .rail::before, .on-ink .rail::before { background: var(--brand-lift); }
.sec-ink .rail::after, .on-ink .rail::after { background: var(--hair-dark); }
/* sideways-lr: alttan yukarı dizilim, döndürme transformu olmadan. Transform bir
kompozitör katmanı yarattığı için Windows'ta subpixel antialiasing kapanıyor ve
ince gövdeler eriyor; bu blok destekleyen tarayıcılarda transformu kaldırır.
Desteklemeyenler yukarıdaki vertical-rl + rotate(180deg) yedeğinde kalır. */
@supports (writing-mode: sideways-lr) {
.rail-t { writing-mode: sideways-lr; transform: none; }
.fold-tab span { writing-mode: sideways-lr; transform: none; }
}
.layout-main { min-width: 0; display: flex; flex-direction: column; gap: clamp(18px,2.2vw,32px); }
.layout-head { display: flex; flex-direction: column; gap: 16px; }
.layout-head h2 { max-width: 26ch; }
.layout-head .lead { max-width: 62ch; }
.layout-head .btn { align-self: flex-start; margin-top: 4px; }
/* eski basit bölüm başlığı (iç sayfalarda kullanılıyor) */
.sec-head { display: grid; grid-template-columns: minmax(150px,15%) 1fr; gap: 10px clamp(24px,4vw,72px); align-items: start; margin-bottom: clamp(18px,2.2vw,32px); }
/* Bölüm künyesi ana sayfadaki ray ile aynı: üstte marka noktası, aşağıdan
yukarıya okunan etiket, altında saç teli çizgi. Tek elemanla kurulur:
vertical-rl + rotate(180) yazıyı yukarı doğru okutur, row-reverse ile
nokta (::before) üstte, çizgi (::after) altta kalır.
Ortalanmış (.center) ve satır (.row) varyantları yatay kalır. */
/* İç sayfalarda bölüm künyesi artık ana sayfadaki gibi ayrı bir yapışkan
ray kolonunda durur (.layout > .rail); başlık bloğu kendi kolonunda
kaldığı için ray hiçbir şeyin üzerine gelmez. Künyesi kalmayan ızgara
başlığı tek kolona iner. */
.sec-head:not(.center):not(.row) { grid-template-columns: minmax(0,1fr); column-gap: 0; }
.sec-head:not(.center):not(.row)>h2, .sec-head:not(.center):not(.row)>.lead, .sec-head:not(.center):not(.row)>.btn { grid-column: 1; }
/* ray kolonunun içindeki başlık: alt boşluğu .layout-main'in gap'i verir */
.layout-main>.sec-head { margin-bottom: 0; }
.sec-head .kicker { padding-top: 12px; }
.sec-head h2 { grid-column: 2; grid-row: 1; }
.sec-head .lead { grid-column: 2; grid-row: 2; margin-top: 8px; }
.sec-head>.btn { grid-column: 2; grid-row: 3; margin-top: 16px; justify-self: start; }
.sec-head.center { grid-template-columns: 1fr; justify-items: center; text-align: center; max-width: 74ch; margin-inline: auto; gap: 16px; }
.sec-head.center .kicker, .sec-head.center h2, .sec-head.center .lead { grid-column: 1; grid-row: auto; padding-top: 0; }
.sec-head.center .lead { text-align: center; }
.sec-head.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.sec-head.row>div { display: flex; flex-direction: column; gap: 14px; }
.sec-head.row .kicker { padding-top: 0; }
.sec-head.row>.btn { margin-top: 0; }
/* ============================================ AKSİYON SATIRI =========== */
/* Renkli kutu yok: solda iddia, sağda ince çizgilerle bölünmüş üç eylem. */
.actionrow { padding: clamp(20px,2.4vw,34px) 0 0; }
.actionrow .shell { display: grid; grid-template-columns: minmax(0,32%) 1fr; gap: clamp(22px,3.4vw,56px); align-items: center; }
.ar-lead { display: flex; flex-direction: column; gap: 14px; }
.ar-lead h2 { font-size: clamp(23px,2.4vw,34px); letter-spacing: -.012em; }
.ar-cells { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ar-cell { display: flex; flex-direction: column; gap: 5px; padding: clamp(20px,2.4vw,30px) clamp(16px,2vw,26px); border-right: 1px solid var(--hair); position: relative; overflow: hidden; transition: background .24s,padding .24s; }
.ar-cell:last-child { border-right: 0; }
.ar-cell::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .34s cubic-bezier(.2,.7,.2,1); }
.ar-cell:hover { background: var(--brand-soft); }
.ar-cell:hover::before { transform: scaleX(1); }
.ar-cell small { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-deep); }
.ar-cell b { font-family: var(--head); font-size: clamp(19px,1.9vw,27px); font-weight: 600; letter-spacing: 0; color: var(--text); line-height: 1.12; }
.ar-cell span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.ar-cell span svg { width: 13px; height: 13px; color: var(--brand-deep); opacity: 0; transform: translateX(-5px); transition: opacity .24s,transform .24s; }
.ar-cell:hover span svg { opacity: 1; transform: none; }
/* koyu zeminde (iç sayfa sonu levha içinde açık kalır) */
.sec-ink .ar-cell b { color: #fff; }
/* ======================================= KATLANIR BANNER PANELLERİ ===== */
/* Slider değil: paneller yan yana; açık olan genişler, kapalılar dikey
künyeye iner. Geçiş flex-grow üzerinden yapılır. */
.bannerstrip { padding: clamp(20px,2.4vw,34px) 0 0; }
.fold { display: flex; gap: 10px; height: clamp(300px,32vw,420px); }
/* NOT: flex-basis'i clamp()'ten auto'ya geçirmek animasyon üretmez (auto
ara değer almaz). Bu yüzden basis 0 sabit tutulur, sadece flex-grow
animasyonlanır; kapalı panelin daralma sınırını min-width verir. */
.fold-p { position: relative; flex: 1 1 0; min-width: clamp(66px,6vw,96px); border-radius: var(--r-xl); overflow: hidden; background: var(--base-2); cursor: pointer; will-change: flex-grow; transition: flex-grow .7s cubic-bezier(.22,.68,.16,1); }
.fold-p.on { flex-grow: 9; cursor: default; }
.fold-img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; object-position: center right; opacity: .3; transition: opacity .6s ease,transform 1.1s cubic-bezier(.2,.7,.2,1); transform: scale(1.06); }
.fold-p.on .fold-img { opacity: 1; transform: none; }
.fold-p:not(.on):hover .fold-img { opacity: .5; }
/* açık panelde metnin okunması için perde */
.fold-p.on::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(96deg,rgba(16,18,16,.94) 0%,rgba(16,18,16,.62) 40%,rgba(16,18,16,0) 76%); }
.fold-p.plain.on::after { background: linear-gradient(96deg,rgba(16,18,16,.7) 0%,rgba(16,18,16,0) 34%); }
/* kapalı panelin dikey künyesi */
.fold-tab { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 0; display: grid; place-items: center; color: #fff; transition: opacity .35s; }
.fold-tab span { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); transform-origin: center; font-family: var(--head); font-size: clamp(14.5px,1.3vw,17.5px); font-weight: 600; letter-spacing: .01em; line-height: 1.2; white-space: nowrap; }
.fold-tab::after { content: ""; position: absolute; left: 50%; bottom: 18px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--brand); }
.fold-p.on .fold-tab { opacity: 0; pointer-events: none; }
/* açık panelin içeriği */
.fold-c { position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; padding: clamp(22px,2.6vw,40px); max-width: min(52ch,64%); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .45s ease .12s,transform .5s cubic-bezier(.2,.7,.2,1) .12s; }
.fold-p.on .fold-c { opacity: 1; transform: none; pointer-events: auto; }
.fold-c .kicker { color: #fff; }
.fold-c .kicker::before { background: var(--brand-lift); }
.fold-c h3 { color: #fff; font-size: clamp(21px,2.4vw,34px); font-weight: 700; letter-spacing: -.012em; line-height: 1.04; }
.fold-c p { color: var(--on-dark); font-size: clamp(13.5px,1.05vw,15.5px); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fold-p.plain .fold-c { justify-content: flex-start; }
/* ===================================== ÖZELLİKLER — BASAMAKLI IZGARA === */
/* Eşit kart ızgarası değil: kolonlar birbirine göre kayık durur, arkada
kontur rakam vardır, ikon kutusu üstüne gelince markaya döner. */
.feat { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.8vw,26px); align-items: start; }
.feat-c { position: relative; overflow: hidden; background: var(--s1); border-radius: var(--r-xl); padding: clamp(26px,2.6vw,38px); box-shadow: var(--sh1); display: flex; flex-direction: column; gap: 15px; transition: transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s; }
.feat-c:nth-child(3n+2) { margin-top: clamp(16px,2.6vw,40px); }
.feat-c:nth-child(3n) { margin-top: clamp(32px,5.2vw,80px); }
.feat-c:hover { transform: translateY(-4px); box-shadow: var(--sh2); }
/* arkadaki kontur rakam */
.feat-num { position: absolute; right: clamp(12px,1.4vw,20px); top: clamp(2px,.6vw,8px); font-family: var(--head); font-size: clamp(58px,6.4vw,96px); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: transparent; pointer-events: none; -webkit-text-stroke: 1.1px var(--hair); transition: -webkit-text-stroke-color .32s; }
.feat-c:hover .feat-num { -webkit-text-stroke-color: color-mix(in srgb,var(--brand) 45%,transparent); }
.feat-ico { width: clamp(56px,5vw,68px); aspect-ratio: 1; border-radius: var(--r); background: var(--brand-soft); display: grid; place-items: center; flex: none; transition: background .3s,transform .35s cubic-bezier(.2,.7,.2,1); }
.feat-ico img { width: 56%; height: auto; min-width: 0; min-height: 0; object-fit: contain; transition: filter .3s; }
.feat-c:hover .feat-ico { background: var(--brand); transform: rotate(-4deg) scale(1.03); }
.feat-c:hover .feat-ico img { filter: brightness(0) invert(1); }
.feat-c h3 { position: relative; z-index: 1; padding-right: 2.4em; }
.feat-c p { font-size: 14.5px; color: var(--text-2); line-height: 1.66; padding-top: 14px; border-top: 1px solid var(--hair); margin-top: auto; }
/* PobolApi şeridi — ızgaranın altında tam genişlik marka bandı */
.featstrip { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px,2.4vw,36px); background: var(--brand); color: #fff; border-radius: var(--r-xl); padding: clamp(22px,2.4vw,34px) clamp(24px,2.6vw,40px); }
.featstrip h3 { color: #fff; flex: 1 1 300px; font-size: clamp(19px,1.9vw,26px); letter-spacing: -.012em; }
.featstrip-n { display: flex; align-items: baseline; gap: 9px; flex: none; }
.featstrip-n b { font-family: var(--head); font-size: clamp(34px,3.6vw,52px); font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.featstrip-n span { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .82; max-width: 11ch; line-height: 1.3; }
.featstrip-live { display: flex; align-items: center; gap: 10px; flex: none; font-family: var(--head); font-size: 15px; font-weight: 600; }
/* ================================== ÜST ÜSTE YIĞILAN KARTLAR =========== */
/* "Nasıl çalışır" adımları kaydırırken üst üste biner. */
.stack { display: flex; flex-direction: column; gap: clamp(14px,2vw,22px); }
.stack-card { position: sticky; top: calc(var(--stick) + var(--i,0) * 14px); background: var(--s1); border-radius: var(--r-xl); padding: clamp(26px,3vw,44px); box-shadow: var(--sh2); display: grid; grid-template-columns: auto 1fr; gap: clamp(18px,2.4vw,38px); align-items: start; }
.stack-card:nth-child(1) { --i: 0; }
.stack-card:nth-child(2) { --i: 1; }
.stack-card:nth-child(3) { --i: 2; }
.stack-card:nth-child(4) { --i: 3; }
.stack-card:nth-child(5) { --i: 4; }
.stack-n { font-family: var(--head); font-size: clamp(46px,5.4vw,84px); font-weight: 700; line-height: .84; letter-spacing: -.02em; color: var(--brand); font-variant-numeric: tabular-nums; }
.stack-body { display: flex; flex-direction: column; gap: 10px; }
.stack-body p { font-size: 15.5px; color: var(--text-2); max-width: 56ch; }
.stack-card:last-child { background: var(--base-2); color: #fff; }
.stack-card:last-child h3 { color: #fff; }
.stack-card:last-child p { color: var(--on-dark); }
.stack-card:last-child .stack-n { color: var(--brand-lift); }
/* ================================ KENARDAN TAŞAN GÖRSEL BÖLÜMÜ ========= */
/* Görsel levhanın kenarına dayanır, metin dar kolonda kalır. */
.spill { position: relative; display: grid; grid-template-columns: minmax(0,44ch) 1fr; gap: clamp(26px,4vw,64px); align-items: center; }
.spill-copy { display: flex; flex-direction: column; gap: 20px; }
/* görsel, kabuk dolgusunu iptal ederek levhanın kenarına dayanır */
.spill-media { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh2); background: var(--s1); }
.spill-media img { width: 100%; height: auto; display: block; }
.spill.flip { grid-template-columns: 1fr minmax(0,44ch); }
.spill.flip .spill-copy { order: 2; }
.spill.flip .spill-media { order: 1; }
/* ========================= ÖZELLİKLER SAYFASI (ozellikler.php) ========= */
/* Her özellik bir bölüm; --fx sırayla gelen vurgu rengi (afişteki ürün
renkleri). Solda numara, ikon ve başlık; sağda metin, maddeler ve paketler. */
.fx-list { display: flex; flex-direction: column; gap: clamp(16px,2vw,26px); }
.fx { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(20px,3.4vw,56px); padding: clamp(26px,3.2vw,48px); border-radius: var(--r-xl); background: var(--s1); box-shadow: var(--sh1); scroll-margin-top: calc(var(--stick) + 20px); }
/* sol kenarda vurgu renginde ince şerit ve köşede hafif renk lekesi */
.fx::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg,var(--fx),color-mix(in srgb,var(--fx) 35%,transparent)); }
.fx::after { content: ""; position: absolute; right: -12%; top: -40%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--fx) 14%,transparent),transparent 70%); pointer-events: none; }
.fx:target { box-shadow: var(--sh2), 0 0 0 2px var(--fx); }
.fx-side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fx-num { font-family: var(--head); font-size: clamp(44px,4.6vw,72px); font-weight: 700; line-height: .9; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.2px var(--fx); }
.fx-ico { width: 64px; height: 64px; border-radius: var(--r); display: grid; place-items: center; background: color-mix(in srgb,var(--fx) 14%,#fff); }
.fx-ico img { width: 56%; height: auto; }
.fx-side h2 { font-size: clamp(24px,2.3vw,34px); }
.fx-pkg { display: inline-flex; padding: 6px 13px; border-radius: var(--pill); font-size: 12.5px; font-weight: 700; color: color-mix(in srgb,var(--fx) 70%,#000); background: color-mix(in srgb,var(--fx) 13%,#fff); transition: background .2s, color .2s; }
.fx-pkg:hover { background: var(--fx); color: #fff; }
.fx-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; align-self: center; }
.fx-body p { font-size: 15.5px; color: var(--text-2); line-height: 1.7; }
.fx-body .fx-lead { font-size: clamp(16px,1.35vw,19px); color: var(--text); line-height: 1.6; }
.fx-points { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--hair); }
.checks.fx-points svg { color: var(--fx); } /* .checks svg (marka yeşili) kuralını geçsin */
/* ek modüller ($ADDONS) — kendi açıklamasıyla, paketler sayfasına gitmez */
.fx-addons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-items: start; }
/* bağlantı değil, bilgi kartı: başlık, açıklama, modülle gelenler, kapsam */
.fx-addon { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px,2vw,28px); border-radius: var(--r-xl); background: var(--s1); box-shadow: var(--sh1); }
.fx-addon-h { display: flex; align-items: center; gap: 16px; }
.fx-addon-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fx-addon-t h3 { font-size: clamp(17px,1.4vw,20px); }
.fx-addon-t small { font-size: 13px; color: var(--text-3); }
.fx-addon-d { font-size: 14.5px; line-height: 1.68; color: var(--text-2); }
.fx-addon-f { gap: 9px; padding-top: 14px; border-top: 1px solid var(--hair); }
.fx-addon-f li { font-size: 14.5px; }
.fx-addon-n { font-size: 13px; line-height: 1.6; color: var(--text-3); padding: 10px 14px; border-radius: var(--r-sm); background: var(--sheet); }
/* öne çıkan özelliğin altında: karşılaştırma tablosundan ilgili satırlar */
.fx-plans { margin-top: 6px; border-radius: var(--r-sm); background: var(--sheet); padding: 6px 14px; font-size: 14px; }
.fx-plans-h, .fx-plans-r { display: grid; grid-template-columns: minmax(0,1fr) repeat(3,minmax(64px,90px)); gap: 8px; align-items: center; padding: 9px 0; }
.fx-plans-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--hair); }
.fx-plans-h b, .fx-plans-r i { text-align: center; font-style: normal; }
.fx-plans-h b { font-weight: 700; color: var(--text-2); letter-spacing: .02em; text-transform: none; font-size: 12px; }
.fx-plans-r + .fx-plans-r { border-top: 1px solid var(--hair); }
.fx-plans-r span { color: var(--text); }
.fx-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: color-mix(in srgb,var(--fx) 72%,#000); }
.fx-more svg { width: 14px; height: 14px; transition: transform .2s; }
.fx-more:hover svg { transform: translateX(3px); }
/* --- arama çubuğu: başlığın altında, kaydırınca üstte yapışık --- */
/* Yapışık DEĞİL: kısa ekranlarda sürekli yer kaplıyordu. Kutu ekrandan
çıkınca sağ altta .fsearch-fab belirir, basınca kutuya döner. */
.fsearch-bar { padding: clamp(18px,2.4vw,30px) 0 0; scroll-margin-top: calc(var(--stick) + 10px); }
.fsearch { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto; padding: 0 10px 0 20px; height: 60px; border-radius: var(--pill); background: var(--s1); box-shadow: var(--sh2), inset 0 0 0 1px var(--hair); transition: box-shadow .2s; }
.fsearch:focus-within { box-shadow: var(--sh2), inset 0 0 0 2px var(--brand); }
.fsearch > svg { width: 20px; height: 20px; flex: none; color: var(--text-3); }
.fsearch input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: var(--text); }
.fsearch input::-webkit-search-cancel-button { display: none; }
.fsearch-x { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--sheet); color: var(--text-2); cursor: pointer; }
.fsearch-x svg { width: 16px; height: 16px; }
.fsearch-meta { max-width: 760px; margin: 10px auto 0; padding: 0 22px; min-height: 1.4em; font-size: 13px; color: var(--text-3); }
/* yüzen arama düğmesi: "başa dön" (.totop) düğmesinin hemen üstünde */
.fsearch-fab { position: fixed; right: clamp(14px,2vw,26px); bottom: calc(clamp(14px,2vw,26px) + 58px); z-index: 80; width: 48px; height: 48px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--brand); box-shadow: var(--sh2); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1), visibility .3s, background .2s; }
.fsearch-fab.show { opacity: 1; visibility: visible; transform: none; }
.fsearch-fab:hover { background: var(--brand-deep); }
.fsearch-fab svg { width: 20px; height: 20px; }
/* arama açıkken: liste süzülmüş, düğmede küçük bir işaret */
.fsearch-fab.on::after { content: ""; position: absolute; top: 6px; right: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--brand); }
html.scroll-locked .fsearch-fab { margin-right: var(--sbw,0px); }
.fsearch-empty { max-width: 620px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* süzülen öğeler: display:grid/flex kuralları [hidden]'ı ezmesin */
[data-fsearch] [hidden] { display: none !important; }
/* --- tüm özellikler kataloğu (inc/compare.php) --- */
.fcat-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.fcat-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--pill); background: var(--s1); box-shadow: var(--sh1); font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--text-2); transition: background .2s, color .2s; }
.fcat-nav a:hover { background: var(--brand); color: #fff; }
.fcats { display: flex; flex-direction: column; gap: 10px; }
.fcat { border-radius: var(--r); background: var(--s1); box-shadow: var(--sh1); scroll-margin-top: calc(var(--stick) + 90px); }
.fcat summary { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; list-style: none; }
.fcat summary::-webkit-details-marker { display: none; }
.fcat-t { flex: 1; font-family: var(--head); font-size: 15px; font-weight: 700; letter-spacing: .03em; }
.fcat-i { width: 18px; height: 18px; flex: none; color: var(--text-3); transition: transform .25s; }
.fcat[open] .fcat-i { transform: rotate(180deg); }
.fcat-b { padding: 0 22px 12px; }
.frow { display: grid; grid-template-columns: minmax(0,1fr) repeat(3,minmax(70px,110px)); gap: 10px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair); }
.frow-h { padding: 8px 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.frow-h b { text-align: center; font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--text-2); }
.frow-t b { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.frow-t p { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); max-width: 72ch; }
.frow-p { text-align: center; }
.fcat-cta { align-self: flex-start; }
@media (max-width:860px) {
.fx { grid-template-columns: 1fr; }
/* dar ekranda paket sütunları satırın altına iner, adları yanında yazar */
.frow-h, .fx-plans-h { display: none; }
.frow, .fx-plans-r { grid-template-columns: repeat(3,minmax(0,1fr)); }
.frow-t, .fx-plans-r > span { grid-column: 1 / -1; }
.frow-p, .fx-plans-r i { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 10px; background: var(--sheet); }
.frow-p::before, .fx-plans-r i::before { content: attr(data-p); font-size: 10.5px; font-weight: 700; color: var(--text-3); }
.fx-plans-r i { background: var(--s1); }
.fsearch { height: 54px; }
.fx-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
.fx-side h2 { flex-basis: 100%; }
.fx-addons { grid-template-columns: 1fr; }
}
/* ============================= PAKET SEÇİCİ (sekmeli panel) ============ */
/* ================================ ÜRÜN AİLESİ — HOVER LİSTESİ ========== */
.famlist { display: flex; flex-direction: column; }.famrow { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(18px,3vw,44px); align-items: center; padding: clamp(22px,2.6vw,36px) clamp(16px,2vw,28px); border-top: 1px solid var(--hair); position: relative; transition: background .28s,padding .28s; }
.famlist .famrow:last-child { border-bottom: 1px solid var(--hair); }
.famrow:hover { background: var(--brand-soft); }
/* künye: ürünün kendi logosu ($POBOL_LOGO) */
.famrow-mark { display: inline-flex; align-items: center; min-width: clamp(150px,16vw,220px); }
.famrow-mark img { width: auto; height: clamp(26px,2.6vw,36px); max-width: 100%; min-width: 0; object-fit: contain; object-position: left center; }
.famrow p { font-size: 15px; color: var(--text-2); max-width: 56ch; }
.famrow-go { width: 52px; height: 52px; border-radius: 50%; background: var(--s1); color: var(--text); display: grid; place-items: center; flex: none; box-shadow: var(--sh1); transition: background .22s,color .22s,transform .22s; }
.famrow:hover .famrow-go { background: var(--brand); color: #fff; transform: translateX(4px); }
.famrow-go svg { width: 18px; height: 18px; }
/* ============ ÜRÜN AİLESİ AFİŞİ — "4 güçlü ürün, tek platform" ========= */
/* inc/family-wheel.php. Koyu, köşeli yüzeyli zemin; solda künye, sağda çark.
Çarkın yazı ölçüleri cqw ile çarkın kendi genişliğine bağlı: çark hangi
boyda olursa olsun yazı/çizim oranı afişteki gibi kalır. */
.fwb { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: clamp(20px,3vw,48px); align-items: center; padding: clamp(26px,3.6vw,60px) clamp(20px,3.4vw,56px); border-radius: var(--r-xl); color: #fff;
background:
linear-gradient(118deg,transparent 0 36%,rgba(255,255,255,.03) 36% 61%,transparent 61%),
linear-gradient(152deg,rgba(255,255,255,.035) 0 24%,transparent 24%),
linear-gradient(32deg,transparent 0 68%,rgba(255,255,255,.025) 68%),
linear-gradient(212deg,transparent 0 80%,rgba(0,0,0,.18) 80%),
radial-gradient(55% 70% at 74% 50%,rgba(84,104,150,.18),transparent 72%),
linear-gradient(180deg,#1b1e25,#242832);
box-shadow: var(--sh3); }
.fwb-copy { display: flex; flex-direction: column; align-items: center; gap: clamp(14px,1.6vw,22px); text-align: center; }
.fwb-rule { width: 62%; height: 1px; background: rgba(255,255,255,.3); }
.fwb h2 { color: #fff; font-size: clamp(24px,2.5vw,38px); letter-spacing: -.01em; }
.fwb-copy p { font-size: clamp(15px,1.35vw,20px); color: rgba(255,255,255,.84); line-height: 1.45; }
.fwb-logos { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: clamp(10px,1.2vw,18px); } /* dördü tek satırda */
.fwb-logos a { display: block; opacity: .92; transition: opacity .2s, transform .2s; }
.fwb-logos a:hover { opacity: 1; transform: translateY(-2px); }
.fwb-logos li { min-width: 0; }
.fwb-logos img { display: block; height: clamp(13px,1.15vw,19px); width: auto; max-width: 100%; }
.fw { position: relative; container-type: inline-size; aspect-ratio: 1; width: 100%; max-width: 620px; justify-self: center; }
.fw-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fw-svg * { transform-box: view-box; }
.fw-tint { opacity: .05; }
.fw-arc, .fw-flash, .fw-wave { transform-origin: 650px 650px; } /* viewBox 1300 → merkez 650 */
.fw-flash { opacity: 0; }
.fw-wave { fill: none; stroke: #fff; stroke-width: 6; opacity: 0; }
/* ortadaki "4 / GÜÇLÜ ÜRÜN TEK PLATFORM" */
.fw-core-t { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; gap:0; font-family: var(--head); font-weight: 800; line-height: .9; white-space: nowrap; }
.fw-4 { display: block; font-size: 16cqw; line-height: .74; letter-spacing: -.05em; color: #fff; transform-origin: 50% 55%; }
.fw-words { display: flex; flex-direction: column; gap: .75cqw; font-size: 3.3cqw; line-height: 1; letter-spacing: 0; } /* satırlar arası açık: afişte sıkışık durmuyor */
.fw-words > span { display: block; }
.fw-words .fw-tek { font-size: 4.9cqw; line-height: .9; letter-spacing: -.01em; }
.fw-words .fw-plat { font-size: 1.9cqw; letter-spacing: .06em; }
/* bölge yazıları */
.fw-lab { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .9cqw; text-align: center; }
.fw-lab b { font-family: var(--head); font-weight: 800; line-height: .95; letter-spacing: -.01em; color: #fff; transition: color .2s, text-shadow .2s; }
.fw-lab span { font-size: max(7px,1.9cqw); font-weight: 600; line-height: 1.3; color: rgba(255,255,255,.86); max-width: 11.5em; }
/* Bölge yazıları bağlantı (inc/family-wheel.php · 'url'): üzerine gelince
başlık bölgenin rengini alıp hafifçe parlar. Kaydırma (translate)
kullanılmıyor — açılış hareketi (fwLab) translate'i fill-mode ile tutuyor. */
.fw-lab:hover b, .fw-lab:focus-visible b { color: var(--c); text-shadow: 0 0 18px color-mix(in srgb,var(--c) 55%,transparent); }
.fw-lab:focus-visible { outline: 2px solid var(--c); outline-offset: 6px; border-radius: 8px; }
.fw-lab-top, .fw-lab-bottom { left: 50%; transform: translateX(-50%); width: 46%; }
.fw-lab-top { top: 15.5%; }
.fw-lab-bottom { bottom: 13.5%; }
.fw-lab-top b, .fw-lab-bottom b { font-size: 5.8cqw; }
.fw-lab-left, .fw-lab-right { top: 50%; transform: translateY(-50%); width: 20%; }
.fw-lab-left { left: 10.5%; }
.fw-lab-right { right: 10.5%; }
.fw-lab-left b, .fw-lab-right b { font-size: 6.6cqw; }
/* --- açılış hareketi (banner.mp4 5,4 → 8 sn) ---
pobol.js JS çalışınca .armed ekler: tüm hareketler duraklatılmış olarak
ilk karede bekler (fill-mode both). Çark ekrana girince .go → oynar, bir
kez. JS yoksa ya da hareket azaltılmışsa .armed gelmez, son hâl görünür.
Yalnızca transform / opacity / dashoffset: tek seferlik, sürekli değil. */
.fw.armed .fw-arc { animation: fwArc .8s cubic-bezier(.2,.8,.25,1) calc(var(--d) * .07s) both paused; }
.fw.armed .fw-tint { animation: fwTint .6s ease .9s both paused; }
.fw.armed .fw-core { animation: fwFade .5s ease .75s both paused; }
.fw.armed .fw-node { animation: fwPop .42s cubic-bezier(.3,1.6,.5,1) calc(1.05s + var(--d) * .08s) both paused; }
.fw.armed .fw-4 { animation: fwSlam .46s cubic-bezier(.5,0,.75,0) 1.55s both paused; }
.fw.armed .fw-wave { animation: fwWave 1.1s cubic-bezier(.15,.6,.3,1) 1.98s both paused; }
.fw.armed .fw-wave-2 { animation-name: fwWave2; animation-delay: 2.12s; }
.fw.armed .fw-flash { animation: fwFlash .6s ease-out 1.98s both paused; }
.fw.armed .fw-svg, .fw.armed .fw-core-t { animation: fwShake .34s linear 1.98s both paused; }
.fw.armed .fw-core-t { animation-name: fwShakeT; }
.fw.armed .fw-words > span { animation: fwWord .38s cubic-bezier(.2,.8,.25,1) 2.15s both paused; }
.fw.armed .fw-words > span:nth-child(2) { animation-delay: 2.25s; }
.fw.armed .fw-words > span:nth-child(3) { animation-delay: 2.35s; }
.fw.armed .fw-words > span:nth-child(4) { animation-delay: 2.45s; }
.fw.armed .fw-lab { animation: fwLab .5s cubic-bezier(.2,.8,.25,1) calc(2.55s + var(--d) * .13s) both paused; }
/* !important: ".fw.armed .fw-words > span" gibi daha özgül kurallar kısayolla
paused yazdığı için sade bir kural onları geçemiyordu */
.fw.armed.go * { animation-play-state: running !important; }
/* yaylar dönerek ve büyüyerek halkaya oturur */
@keyframes fwArc { from { opacity: 0; transform: rotate(-150deg) scale(.78); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fwTint { from { opacity: 0; } to { opacity: .05; } }
@keyframes fwFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fwPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
/* çarpma: dev ve gri bir "4" hızlanarak küçülüp yerine çakılır (ease-in),
değdiği an hafifçe ezilip toparlanır — fwSlam'in son %15'i */
@keyframes fwSlam { 0% { opacity: 0; transform: scale(3.4); color: #8a9099; } 30% { opacity: 1; } 85% { transform: scale(.9); color: #d6d9de; } 93% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); color: #fff; } }
@keyframes fwWave { 0% { opacity: 0; transform: scale(1); } 1% { opacity: .9; transform: scale(1); stroke-width: 11; } 100% { opacity: 0; transform: scale(3.1); stroke-width: 2; } }
@keyframes fwWave2 { 0% { opacity: 0; transform: scale(1); } 1% { opacity: .45; transform: scale(1); stroke-width: 6; } 100% { opacity: 0; transform: scale(2.6); stroke-width: 2; } }
@keyframes fwFlash { 0% { opacity: 0; } 18% { opacity: .85; } 100% { opacity: 0; } }
@keyframes fwShake { 0%,100% { transform: none; } 20% { transform: translate(-1.2%,.8%); } 40% { transform: translate(1%,-.9%); } 60% { transform: translate(-.6%,.5%); } 80% { transform: translate(.3%,-.2%); } }
@keyframes fwShakeT { 0%,100% { transform: translate(-50%,-50%); } 20% { transform: translate(-51.2%,-49.2%); } 40% { transform: translate(-49%,-50.9%); } 60% { transform: translate(-50.6%,-49.5%); } 80% { transform: translate(-49.7%,-50.2%); } }
@keyframes fwWord { from { opacity: 0; translate: -.5em 0; } to { opacity: 1; translate: 0 0; } }
@keyframes fwLab { from { opacity: 0; translate: 0 1.6cqw; } to { opacity: 1; translate: 0 0; } }
@media (max-width:900px) {
.fwb { grid-template-columns: 1fr; }
.fw { max-width: 540px; }
}
/* ==================================================== KUTULAR =========== */
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2,1fr); }
.g3 { grid-template-columns: repeat(3,1fr); }
.g4 { grid-template-columns: repeat(4,1fr); }
.card { background: var(--s1); border-radius: var(--r-xl); padding: clamp(24px,2.3vw,34px); display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sh1); transition: transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
.card p { font-size: 14.5px; color: var(--text-2); line-height: 1.64; }
.card-ico { width: 58px; height: 58px; border-radius: var(--r); background: var(--brand-soft); display: grid; place-items: center; flex: none; }
.card-ico img { width: 32px; height: 32px; min-width: 0; min-height: 0; object-fit: contain; }
.card-ico svg { width: 25px; height: 25px; color: var(--brand-deep); }
.card-n { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--text-3); text-transform: uppercase; }
.sec-ink .card { background: #232620; }
.sec-ink .card h3, .sec-ink .card h4 { color: #fff; }
.sec-ink .card p { color: var(--on-dark); }
.modlist { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.mod { background: var(--s1); border-radius: var(--r); padding: 22px 24px; display: flex; flex-direction: column; gap: 7px; box-shadow: var(--sh1); transition: transform .2s,box-shadow .2s; }
.mod:hover { transform: translateY(-2px); box-shadow: var(--sh2); }
.mod var { font-style: normal; font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--brand); }
.mod p { font-size: 13.5px; color: var(--text-2); }
.sec-ink .mod { background: #232620; }
.sec-ink .mod h4 { color: #fff; }
.sec-ink .mod p { color: var(--on-dark); }
.checks { display: flex; flex-direction: column; gap: 13px; }
.checks li { display: flex; gap: 13px; font-size: 15.5px; color: var(--text-2); line-height: 1.6; }
.checks svg { width: 21px; height: 21px; flex: none; margin-top: 3px; color: var(--brand); }
.on-ink .checks li, .sec-ink .checks li { color: var(--on-dark); }
.on-ink .checks svg, .sec-ink .checks svg { color: var(--brand-lift); }
.checks.two { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 28px; }
/* eski adım ızgarası (iç sayfalarda) */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.step { background: var(--s1); border-radius: var(--r-xl); padding: clamp(24px,2.2vw,32px); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh1); }
.step-n { font-family: var(--head); font-size: 36px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--brand); display: block; }
.step p { font-size: 14px; color: var(--text-2); }
/* eski görsel+metin bölümü (iç sayfalarda) */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,4.4vw,70px); align-items: center; }
.showcase-copy { display: flex; flex-direction: column; gap: 20px; }
.showcase.rev .showcase-media, .showcase.media-left .showcase-media { order: 1; }
.showcase.rev .showcase-copy, .showcase.media-left .showcase-copy { order: 2; }
.showcase-media { position: relative; }
.shot { border-radius: var(--r-xl); overflow: hidden; background: var(--s1); box-shadow: var(--sh2); }
.shot img { width: 100%; height: auto; display: block; }
.shot-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; background: var(--sheet); }
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(20,22,19,.13); flex: none; display: block; }
.shot-bar i:nth-child(2) { background: #F0D2A0; }
.shot-bar i:nth-child(3) { background: color-mix(in srgb,var(--brand) 50%,#fff); }
.shot-bar span { flex: 1; min-width: 0; /* min-width:auto ellipsis'i devre dışı bırakıyordu */ margin-left: 8px; background: var(--s1); border-radius: var(--pill); font-size: 11.5px; color: var(--text-3); padding: 5px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-over { position: absolute; right: -24px; bottom: -28px; width: min(196px,44%); border-radius: var(--r); overflow: hidden; background: var(--s1); box-shadow: var(--sh2); }
.shot-over img { width: 100%; display: block; }
.illus { background: var(--tint); border-radius: var(--r-xl); padding: clamp(22px,3vw,44px); display: grid; place-items: center; }
.illus img { width: 100%; max-width: 520px; height: auto; min-width: 0; }
.illus.plain { background: transparent; padding: 0; }
.illus.tall img { width: auto; height: auto; min-width: 0; min-height: 0; max-width: min(300px,100%); max-height: 440px; border-radius: var(--r); box-shadow: var(--sh2); background: #fff; }
.devices { position: relative; display: grid; place-items: center; padding: 10px 0; }
.devices .dev-a { width: 78%; max-width: 540px; filter: drop-shadow(0 30px 46px rgba(20,22,19,.24)); }
.devices .dev-b { position: absolute; right: 0; bottom: -4%; width: 40%; max-width: 250px; filter: drop-shadow(0 20px 34px rgba(20,22,19,.22)); }
/* panel maketi ($HERO['type'] = 'mock') */
.badge { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--pill); }
.badge.g { background: var(--brand-soft); color: var(--brand-deep); }
.badge.b { background: #E7F2FB; color: #0A6DAA; }
.badge.t { background: #E4F5F5; color: #177C81; }
.badge.w { background: #FCEAE8; color: #B3392F; }
/* Nabız halkası box-shadow ile değil, ayrı bir katmanda ölçeklenen sözde
elemanla çiziliyor: box-shadow her karede ana iş parçacığında yeniden
boyanır (ölçümde tek başına bir çekirdeğin ~%20’sini yiyordu), transform
ve opacity ise derleyiciye devredilir ve boyama gerektirmez. */
.dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: color-mix(in srgb,var(--brand) 50%,transparent); animation: ping 2.6s ease-out infinite; }
/* 9px nokta + 13px yayılım = 35px dış çap → ölçek 35/9 ≈ 3.9 */
@keyframes ping {
from { transform: scale(1); opacity: 1; }
70%, 100% { transform: scale(3.9); opacity: 0; }
}
/* ===================================================== HARİTA =========== */
.map { border-radius: var(--r-xl); overflow: hidden; background: var(--s1); box-shadow: var(--sh1); }
.map iframe { display: block; width: 100%; height: clamp(280px,34vw,440px); border: 0; }
/* ============================================== LOGO ŞERİTLERİ ========= */
.marquee { overflow: hidden; padding: 5px 0; mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.marquee-row { display: flex; gap: 14px; width: max-content; animation: slide 52s linear infinite; }
.marquee.rev .marquee-row { animation-direction: reverse; animation-duration: 60s; }
/* ------------------------------------------------------------------------
EKRAN DIŞINDAKİ SONSUZ ANIMASYONLAR DURDURULUR
`is-idle` sınıfını pobol.js koyar: şeritlerin kendisine ve ekranda olmayan
her öğesine. Sayfadaki sonsuz animasyonların hiçbiri kendiliğinden
durmuyordu; ölçümde sayfa hiç kaydırılmadan boş dururken bile hepsi kare
üretmeye devam ediyor, ekranda olmayanlar da dahil. En pahalıları:
· .merge-dash path — SVG stroke-dashoffset derleyiciye devredilemez,
altı yolun her biri her karede yeniden boyanır
· .orb — 28px blur uygulanmış katman her karede yeniden rasterlenir
· şeritler — çok geniş/uzun katmanlar (bkz. LOGO ŞERİTLERİ)
Liste bilinçli olarak tek tek yazıldı: `*` ile süpürmek form-flash gibi tek
seferlik animasyonları da yarıda dondururdu. Yeni bir sonsuz animasyon
eklenirse seçicisi buraya da yazılmalı. */
.marquee.is-idle .marquee-row,
.vmarq.is-idle .vcol-in,
.is-idle .marquee-row,
.is-idle .vcol-in,
.is-idle .merge-dash path,
.is-idle .orb,
.is-idle .sticker,
.is-idle .dot::after,
.is-idle .herov-play i::after { animation-play-state: paused; }
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.logo-tile { --tile-h: 92px; --tile-pad: 18px; flex: none; width: 170px; height: var(--tile-h); padding: var(--tile-pad); background: var(--s1); border-radius: var(--r); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--sh1); }
/* min-width/min-height:0 şart: grid-flex öğelerinde varsayılan `auto` değeri
resmin doğal boyutunu asgari sınır yapar ve max-width:100%'ü etkisiz bırakır. */
.logo-tile img { width: auto; height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: calc(var(--tile-h) - var(--tile-pad) * 2); object-fit: contain; }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(138px,1fr)); gap: 9px; }
.logo-cell { background: var(--s1); border-radius: var(--r-sm); padding: 13px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: var(--sh1); transition: transform .2s,box-shadow .2s; }
.logo-cell:hover { transform: translateY(-2px); box-shadow: var(--sh2); }
.logo-cell figure { margin: 0; height: 40px; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.logo-cell img { width: auto; height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 40px; object-fit: contain; }
.logo-cell figcaption { font-size: 11.5px; color: var(--text-3); line-height: 1.35; }
/* SVG logolar (Pobol ürünleri) hücreye tam otursun */
.logo-cell img[src$=".svg"] { width: 100%; }
/* Referanslar: sabit beşli ızgara, darda dörde/üçe/ikiye iner. Gizli
hücreler (hidden) "Daha fazla göster" ile açılır — display:flex
[hidden]'ı ezdiği için ayrıca kapatılıyor. */
.logo-grid.logo-grid-5 { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
/* beşli ızgarada hücreler geniş; 40px yükseklikte yassı, sünmüş duruyordu */
.logo-grid-5 .logo-cell { padding: 22px 16px 16px; gap: 12px; }
.logo-grid-5 .logo-cell figure { height: 72px; }
.logo-grid-5 .logo-cell img { max-height: 72px; }
@media (max-width:760px) {
.logo-grid-5 .logo-cell { padding: 16px 10px 12px; }
.logo-grid-5 .logo-cell figure { height: 56px; }
.logo-grid-5 .logo-cell img { max-height: 56px; }
}
.logo-cell[hidden] { display: none; }
.more-row { display: flex; justify-content: center; margin-top: 22px; }
/* Gizli öğe kaldıkça listenin son satırı aşağı doğru silikleşir: devamı
olduğunu söyler. Perde değil maske — bölümün noktalı zemini görünür
kalır, yalnızca logolar solar. Tümü açılınca JS sınıfı kaldırır. */
.is-clipped { -webkit-mask-image: linear-gradient(to bottom,#000 calc(100% - 150px),rgba(0,0,0,.12)); mask-image: linear-gradient(to bottom,#000 calc(100% - 150px),rgba(0,0,0,.12)); }
.is-clipped + .more-row { margin-top: -6px; position: relative; }
@media (max-width:1000px) { .logo-grid.logo-grid-5 { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width:760px) { .logo-grid.logo-grid-5 { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:440px) { .logo-grid.logo-grid-5 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* Kutu ızgarası değil: iki kolona akan çizgili liste. Satırın üstüne
gelince o kategorinin logoları kayarak belirir. */
.catlist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px,2.4vw,38px); }
/* Rakam yok: sıra numarası + ad/örnekler. Satırlar kompakt, sağda ince bir ok. */
.catrow { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: clamp(10px,1.2vw,15px); padding: clamp(9px,1.1vw,13px) clamp(8px,1vw,12px) clamp(9px,1.1vw,13px) 4px; border-bottom: 1px solid var(--hair); position: relative; overflow: hidden; transition: padding-left .3s cubic-bezier(.2,.7,.2,1); }
.catrow:hover { padding-left: 12px; }
.catrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); transform: scaleY(0); transform-origin: center; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.catrow:hover::before { transform: scaleY(1); }
.catrow-i { font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* iki satırlı gövde: üstte kategori adı, altta içindeki servislerden örnekler */
.catrow-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.catrow b { font-family: var(--head); font-size: clamp(14.5px,1.25vw,17px); font-weight: 600; letter-spacing: 0; }
.catrow-body small { font-size: 11.5px; color: var(--text-3); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .26s; }
.catrow:hover .catrow-body small { color: var(--text-2); }
.catrow-body small u { text-decoration: none; color: var(--brand-deep); font-weight: 600; }
.catrow::after { content: ""; width: 13px; height: 13px; flex: none; opacity: .3; background: currentColor; transition: opacity .22s, transform .22s; -webkit-mask: var(--ico-arrow) center / contain no-repeat; mask: var(--ico-arrow) center / contain no-repeat; }
.catrow:hover::after { opacity: 1; transform: translateX(3px); color: var(--brand-deep); }
.sec-ink .catrow { border-bottom-color: var(--hair-dark); }
.sec-ink .catrow b { color: #fff; }
.sec-ink .catrow-i { color: var(--on-dark-3); }
.sec-ink .catrow:hover::after { color: var(--brand-lift); }
.sec-ink .catrow:hover { background: rgba(255,255,255,.04); }
.sec-ink .catrow-body small { color: var(--on-dark-3); }
.sec-ink .catrow:hover .catrow-body small { color: var(--on-dark); }
.sec-ink .catrow-body small u { color: var(--brand-lift); }
/* ---- REFERANSLAR: dikey akan üç kolon ---- */
.vmarq { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; height: clamp(320px,36vw,440px); overflow: hidden; mask-image: linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent); }
.vcol { overflow: hidden; }
/* Süreler kolon içeriğiyle birlikte kısaldı: kolon başına gösterilen
referans 37’den 10’a indi (index.php · $REF_SHOWN), aynı süre korunsaydı
şerit neredeyse duruyormuş gibi sürünürdü. */
.vcol-in { display: flex; flex-direction: column; gap: 12px; animation: vslide 12s linear infinite; }
.vcol:nth-child(2) .vcol-in { animation-duration: 15s; animation-direction: reverse; }
.vcol:nth-child(3) .vcol-in { animation-duration: 13.5s; }
@keyframes vslide {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
.vmarq .logo-tile { width: auto; flex: none; }
.refstrip { display: none; } /* yalnızca dar ekranda görünür (620px bloğu) */
/* ---- CTA: eğik kesimli iki tonlu blok ---- */
.ctasplit { display: grid; grid-template-columns: 1.02fr .98fr; background: var(--base-2); border-radius: var(--r-xl); overflow: hidden; color: #fff; }
.ctasplit-a { background: var(--brand); padding: clamp(30px,3.4vw,52px) clamp(70px,7vw,110px) clamp(30px,3.4vw,52px) clamp(28px,3vw,46px); margin-right: calc(-1 * clamp(40px,4.4vw,72px)); clip-path: polygon(0 0,100% 0,calc(100% - clamp(40px,4.4vw,72px)) 100%,0 100%); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.ctasplit-a h2 { color: #fff; }
.ctasplit-a .kicker { color: #fff; }
.ctasplit-a .kicker::before { background: #fff; }
/* sol panelin eğik kenarı sağa taştığı için metin o payı geçtikten sonra başlar */
.ctasplit-b { padding: clamp(28px,3.2vw,48px) clamp(28px,3vw,46px) clamp(28px,3.2vw,48px) calc(clamp(40px,4.4vw,72px) + clamp(18px,2vw,30px)); display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.ctasplit-b .lead { color: var(--on-dark); }
.ctasplit-btns { display: flex; flex-wrap: wrap; gap: 11px; }
/* ==================================================== PAKETLER ========= */
.plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: stretch; }
.plan { background: var(--s1); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh1); transition: transform .24s,box-shadow .24s; }
.plan:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
.plan.hot { background: var(--base-2); color: #fff; position: relative; }
.plan-head { padding: clamp(26px,2.4vw,34px) clamp(26px,2.4vw,34px) 24px; display: flex; flex-direction: column; gap: 8px; }
.plan-name { font-family: var(--body); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-deep); }
.plan.hot .plan-name { color: var(--brand-lift); }
.plan-old { font-size: 14px; color: var(--text-3); text-decoration: line-through; }
.plan.hot .plan-old { color: var(--on-dark-3); }
.plan-price { display: flex; align-items: baseline; gap: 9px; font-family: var(--head); font-weight: 700; font-size: clamp(36px,3.8vw,52px); letter-spacing: -.02em; line-height: 1.02; font-variant-numeric: tabular-nums; }
.plan-price span { font-family: var(--body); font-size: 13.5px; font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.plan.hot .plan-price span { color: var(--on-dark-3); }
.plan-desc { font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.plan.hot .plan-desc { color: var(--on-dark); }
.plan-list { padding: 0 clamp(26px,2.4vw,34px) 22px; display: flex; flex-direction: column; flex: 1; }
.plan-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; color: var(--text-2); }
.plan.hot .plan-list li { border-bottom-color: var(--hair-dark); color: var(--on-dark); }
.plan-list li:last-child { border-bottom: 0; }
.plan-foot { padding: 0 clamp(26px,2.4vw,34px) clamp(26px,2.4vw,34px); }
.plan-tag { position: absolute; top: 0; right: 0; background: var(--brand); color: #fff; font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: 8px 16px; border-bottom-left-radius: var(--r); }
.tk { font-family: var(--head); font-size: 14px; font-weight: 600; white-space: nowrap; letter-spacing: 0; }
.tk.yes { color: var(--brand); }
.plan.hot .tk.yes { color: var(--brand-lift); }
.tk.no { color: var(--text-3); opacity: .45; font-weight: 400; }
.tk.add { font-family: var(--body); font-size: 11px; font-weight: 700; color: var(--text-3); background: rgba(20,22,19,.05); border-radius: var(--pill); padding: 3px 10px; }
.tk.val { color: var(--text); font-variant-numeric: tabular-nums; }
.plan.hot .tk.val { color: #fff; }
/* ------------------------------ EK MODÜLLER (paneller) ------------------
Paketler sayfasında karşılaştırma tablosunun ardında. Akordiyon yok: her
modül tam genişlikte kendi paneli ve bütün detayı açık — tıklamaya gerek
kalmadan hepsi okunuyor. Solda marka renginde numaralı bir bant (sıra CSS
sayacıyla basılır), başlıkta ikon · ad + künye · fiyat, gövdede solda
açıklama + kapsam notu, sağda modülle gelen başlıklar. */
.xmods { display: flex; flex-direction: column; gap: clamp(14px,1.6vw,22px); counter-reset: xm; }
.xmod { counter-increment: xm; position: relative; overflow: hidden; background: var(--s1); border-radius: var(--r-xl); padding: clamp(22px,2.4vw,34px); padding-left: calc(clamp(22px,2.4vw,34px) + var(--xm-band,52px)); box-shadow: var(--sh1); transition: box-shadow .26s, transform .26s cubic-bezier(.2,.7,.2,1); }
/* sol bant ve içindeki sıra numarası */
.xmod::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--xm-band,52px); background: linear-gradient(180deg,var(--brand),var(--brand-deep)); }
.xmod::after { content: counter(xm,decimal-leading-zero); position: absolute; left: 0; top: 0; width: var(--xm-band,52px); padding-top: clamp(22px,2.4vw,32px); text-align: center; font-family: var(--head); font-size: 15px; font-weight: 700; letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; }
.xmod:hover { transform: translateY(-2px); box-shadow: var(--sh2); }
/* başlık satırı */
.xmod-head { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: clamp(14px,1.6vw,22px); padding-bottom: clamp(18px,2vw,24px); border-bottom: 1px solid var(--hair); }
.xmod-ico { flex: none; width: 54px; height: 54px; border-radius: var(--r); background: var(--brand-soft); display: grid; place-items: center; transition: background .26s; }
.xmod-ico svg { width: 26px; height: 26px; color: var(--brand-deep); }
.xmod:hover .xmod-ico { background: color-mix(in srgb,var(--brand) 18%,#fff); }
.xmod-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.xmod-id h3 { font-size: clamp(19px,1.9vw,25px); line-height: 1.24; }
.xmod-tag { margin: 2px 0 0; font-size: 13.5px; color: var(--text-3); line-height: 1.5; }
/* fiyat — paket kartlarındaki fiyat diliyle aynı, sağda kendi kolonu */
.xmod-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; padding-left: 8px; padding-top: 2px; }
.xmod-price b { font-family: var(--head); font-size: clamp(22px,2.2vw,30px); font-weight: 700; letter-spacing: -.02em; color: var(--brand-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.xmod-price b i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--text-3); }
.xmod-price small { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
/* gövde — solda açıklama, sağda kapsam listesi */
.xmod-body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(20px,3vw,48px); padding-top: clamp(18px,2vw,24px); }
.xmod-desc p { margin: 0; font-size: 15.5px; line-height: 1.74; color: var(--text-2); }
.xmod-note { margin-top: 14px !important; padding: 13px 16px; border-radius: var(--r-sm); background: var(--sheet); font-size: 13.5px !important; line-height: 1.6 !important; color: var(--text-3) !important; }
.xmod-note b { color: var(--text-2); font-weight: 700; }
.xmod-feats { display: flex; flex-direction: column; gap: 12px; }
.xmod-feats .checks { gap: 10px; }
.xmod-feats .checks li { font-size: 14.5px; }
.xmod-feats .checks svg { width: 19px; height: 19px; margin-top: 2px; }
.xmod-doc { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 4px; font-family: var(--head); font-size: 13.5px; font-weight: 600; color: var(--brand-deep); transition: gap .18s; }
.xmod-doc svg { width: 15px; height: 15px; }
.xmod-doc:hover { gap: 13px; }
@media (max-width:900px) {
.xmod-body { grid-template-columns: minmax(0,1fr); gap: 22px; }
}
@media (max-width:620px) {
/* bant inceltilir; başlıkta fiyat kendi satırına iner */
.xmod { --xm-band: 38px; }
.xmod::after { font-size: 13px; }
.xmod-head { flex-wrap: wrap; }
.xmod-ico { width: 44px; height: 44px; }
.xmod-ico svg { width: 22px; height: 22px; }
.xmod-price { flex: 1 1 100%; align-items: flex-start; text-align: left; padding-left: 0; padding-top: 8px; }
}
/* arama + "sadece farkları göster" çubuğu (gerçek sayfadaki düzen) */
.cmp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cmp-search { position: relative; flex: 1 1 260px; max-width: 430px; }
.cmp-search input { width: 100%; font-family: var(--body); font-size: 15px; color: var(--text); background: var(--s1); border: 0; border-radius: var(--pill); padding: 14px 48px 14px 20px; box-shadow: var(--sh1); transition: box-shadow .18s; }
.cmp-search input::placeholder { color: var(--text-3); }
.cmp-search input:focus { outline: none; box-shadow: var(--sh1),0 0 0 2px var(--brand); }
.cmp-search input::-webkit-search-cancel-button { cursor: pointer; }
.cmp-search svg { position: absolute; right: 18px; top: 50%; margin-top: -8px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
/* aramada eşleşmeyen satır ve grup gizlenir */
.cmp-wrap.searching tr.nomatch { display: none; }
.cmp-wrap.searching tbody.nohit { display: none; }
.cmp-empty { margin-top: 16px; padding: 22px 24px; background: var(--s1); border-radius: var(--r); box-shadow: var(--sh1); font-size: 15px; color: var(--text-2); }
.cmp-empty a { color: var(--brand-deep); font-weight: 600; }
.cmp-only { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; background: var(--s1); border-radius: var(--pill); padding: 10px 14px 10px 20px; box-shadow: var(--sh1); flex: none; font-family: var(--head); font-size: 14.5px; font-weight: 600; letter-spacing: 0; color: var(--text-2); transition: color .2s; }
.cmp-only:hover { color: var(--text); }
.cmp-only input { appearance: none; -webkit-appearance: none; margin: 0; width: 42px; height: 24px; border-radius: var(--pill); background: rgba(32,36,30,.14); position: relative; cursor: pointer; transition: background .24s; flex: none; }
.cmp-only input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .24s cubic-bezier(.2,.7,.2,1); }
.cmp-only input:checked { background: var(--brand); }
.cmp-only input:checked::after { transform: translateX(18px); }
.cmp-wrap.only-diff tbody tr.same { display: none; }
/* satır açıklaması — soru işareti çipi ve kendi ipucu balonu */
.cmp-i { position: relative; display: inline-grid; place-items: center; width: 19px; height: 19px; margin-left: 7px; border-radius: 50%; background: rgba(32,36,30,.08); color: var(--text-3); font-family: var(--head); font-size: 11px; font-weight: 700; cursor: help; vertical-align: middle; transition: background .2s,color .2s; }
.cmp-i:hover, .cmp-i:focus-visible { background: var(--brand); color: #fff; outline: none; z-index: 10; }
/* balon */
.cmp-i::after { content: attr(data-tip); position: absolute; left: -10px; bottom: calc(100% + 11px); width: max-content; max-width: min(320px,68vw); background: var(--base-2); color: #fff; border-radius: var(--r-sm); padding: 11px 14px; font-family: var(--body); font-size: 12.5px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-align: left; text-transform: none; white-space: normal; box-shadow: var(--sh2); opacity: 0; visibility: hidden; pointer-events: none; z-index: 11; transform: translateY(5px); transition: opacity .2s,transform .22s,visibility .2s; }
/* balonun oku */
.cmp-i::before { content: ""; position: absolute; left: 8px; bottom: calc(100% + -1px); border: 6px solid transparent; border-top-color: var(--base-2); opacity: 0; visibility: hidden; z-index: 11; transform: translateY(5px); transition: opacity .2s,transform .22s,visibility .2s; }
.cmp-i:hover::after, .cmp-i:focus-visible::after, .cmp-i:hover::before, .cmp-i:focus-visible::before { opacity: 1; visibility: visible; transform: none; }
/* öne çıkan paket kolonu vurgusu */
.cmp thead th.hot { background: var(--brand); }
.cmp td.hot { background: color-mix(in srgb,var(--brand) 5%,transparent); }
.cmp tbody tr:hover td.hot { background: color-mix(in srgb,var(--brand) 12%,transparent); }
/* NOT: ne .cmp-wrap ne .cmp-scroll overflow kutusu OLMAMALI — overflow:hidden
veya auto, içindeki position:sticky başlığı kendi kabına hapsedip sayfa
kaydırmasında sabitlenmesini engelliyor. Bu yüzden köşe yuvarlatma
hücrelere veriliyor ve tablo yatay kaydırma yerine daralıyor. */
.cmp-wrap { border-radius: var(--r-xl); background: var(--s1); box-shadow: var(--sh1); }
/* başlığın altında kalacağı sabit üst boşluk (yüzen header payı) */
.cmp-wrap { --cmp-stick: 80px; }
.cmp { width: 100%; border-collapse: collapse; table-layout: auto; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; font-size: 14.5px; border-bottom: 1px solid var(--hair); }
/* fiyat bilgisiyle birlikte sayfa kaydırırken üstte kalan başlık */
.cmp thead th { position: sticky; top: var(--cmp-stick,80px); background: var(--base-2); color: #fff; font-family: var(--head); font-size: 14px; font-weight: 600; letter-spacing: 0; z-index: 5; border-bottom: 0; vertical-align: bottom; padding-top: 13px; padding-bottom: 13px; }
.cmp thead th:first-child { border-top-left-radius: var(--r-xl); }
.cmp thead th:last-child { border-top-right-radius: var(--r-xl); }
.cmp tbody:last-child tr:last-child td:first-child { border-bottom-left-radius: var(--r-xl); }
.cmp tbody:last-child tr:last-child td:last-child { border-bottom-right-radius: var(--r-xl); }
/* başlık hücresi — üç ince satır: ad · yıllık fiyat (üstü çizili eskisiyle) · bağlantı.
Sabit kaldığı için mümkün olduğunca az dikey yer kaplar. */
.cmp-th { display: flex; flex-direction: column; gap: 3px; }
.cmp-th small { font-family: var(--body); font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--on-dark-3); line-height: 1.3; }
.cmp-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.cmp-th b { font-family: var(--head); font-size: clamp(15px,1.35vw,18px); font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cmp-th s { font-size: 10.5px; color: var(--on-dark-3); text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; }
/* buton yerine ince metin bağlantısı */
.cmp-go { display: inline-flex; align-items: center; gap: 5px; font-family: var(--head); font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--on-dark); transition: color .18s,gap .18s; }
.cmp-go svg { width: 11px; height: 11px; }
.cmp-go:hover { color: var(--brand-lift); gap: 8px; }
.cmp thead th.hot .cmp-th small, .cmp thead th.hot .cmp-th s { color: rgba(255,255,255,.78); }
.cmp thead th.hot .cmp-go { color: #fff; }
.cmp thead th.hot .cmp-go:hover { color: #fff; text-decoration: underline; }
.cmp thead th:not(:first-child) .cmp-th { align-items: center; }
.cmp thead th:not(:first-child) { text-align: center; width: 17%; }
/* .cmp-vs = 3 kolonlu "klasik paket vs marka" tablosu. Paket tablosu 4 kolonlu
olduğu için %17'lik kolon oradan geliyor; burada sağdaki iki kolon metni tek
satıra sığacak kadar geniş olmalı. */
.cmp.cmp-vs thead th:first-child { width: 20%; }
.cmp.cmp-vs thead th:not(:first-child) { width: 40%; }
.cmp td:not(:first-child) { text-align: center; }
/* grup başlığı = açılır kapanır düğme (gerçek sayfadaki accordion).
Kapalı hâlde beyaz satırlardan ayrışsın diye nötr gri bant, açık hâlde
marka tonuna geçer. */
/* Grup başlıkları ne dolgu ne aksan çizgisiyle ayrılır: ayrımı tipografi ve
satır yüksekliği yapar. Marka rengi yalnızca hover ve açık durumda görünür. */
.cmp .cmp-group td { padding: 0; background: none; border-bottom: 1px solid var(--hair); }
.cmp-gt { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; cursor: pointer; padding: 19px 18px; text-align: left; font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); transition: background .22s,color .22s; }
.cmp-gt:hover { background: color-mix(in srgb,var(--brand) 7%,transparent); color: var(--brand-deep); }
.cmp-g.open .cmp-gt { background: color-mix(in srgb,var(--brand) 13%,#fff); color: var(--brand-deep); }
.cmp-g.open .cmp-gt:hover { background: color-mix(in srgb,var(--brand) 18%,#fff); }
.cmp-gt span { flex: 1; min-width: 0; }
.cmp-gt em { font-style: normal; font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--text-3); flex: none; }
.cmp-gt:hover em, .cmp-g.open .cmp-gt em { color: var(--brand-deep); opacity: .7; }
.cmp-gt-i { width: 15px; height: 15px; flex: none; color: var(--text-3); transition: transform .28s cubic-bezier(.2,.7,.2,1),color .22s; }
.cmp-gt:hover .cmp-gt-i, .cmp-g.open .cmp-gt-i { color: var(--brand); }
.cmp-g.open .cmp-gt-i { transform: rotate(180deg); }
/* kapalı grupta özellik satırları gizlenir */
.cmp-g:not(.open) tr:not(.cmp-group) { display: none; }
.cmp tbody tr:hover td { background: var(--brand-soft); }
.cmp td:first-child { color: var(--text-2); }
.cmp tbody:last-child tr:last-child td { border-bottom: 0; }
/* ==================================================== İLETİŞİM ========= */
.contact { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(26px,3.8vw,58px); align-items: start; }
.form { background: var(--s1); border-radius: var(--r-xl); padding: clamp(24px,2.6vw,38px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; box-shadow: var(--sh1); }
/* Siteden "Demo Talebi" ile gelindiğinde (adres #demo-form ile biter) form
bir kez yanıp söner: marka renginde bir kontur dışa doğru açılıp kaybolur
ve kutunun kendisi hafifçe marka tonuna boyanır. Tek seferlik — animasyon
bitince pobol.js sınıfı kaldırır. Hareketi azaltılmış tercihte animasyon
çalışmaz, yerine sabit bir kontur kalır (aşağıdaki media bloğunda). */
@keyframes form-flash {
0% { outline-color: color-mix(in srgb,var(--brand) 0%,transparent); outline-offset: 2px; background: var(--s1); }
18% { outline-color: var(--brand); outline-offset: 6px; background: var(--brand-soft); }
55% { outline-color: color-mix(in srgb,var(--brand) 45%,transparent); outline-offset: 4px; background: var(--brand-soft); }
100% { outline-color: color-mix(in srgb,var(--brand) 0%,transparent); outline-offset: 2px; background: var(--s1); }
}
.form.flash { outline: 2px solid transparent; animation: form-flash 1.5s cubic-bezier(.2,.7,.2,1) 1 both; }
@media (prefers-reduced-motion: reduce) {
.form.flash { animation: none; outline: 2px solid var(--brand); outline-offset: 4px; background: var(--brand-soft); }
}
.form label { display: flex; flex-direction: column; gap: 8px; font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.form label.full { grid-column: 1/-1; }
.form input, .form textarea, .form select { font-family: var(--body); font-size: 15.5px; color: var(--text); background: var(--sheet); border: 0; border-radius: var(--r-sm); padding: 14px 16px; transition: box-shadow .16s,background .16s; }
.form textarea { resize: vertical; min-height: 118px; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; background: var(--s1); box-shadow: 0 0 0 2px var(--brand); }
.form .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form .field > label { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.form .field.full { grid-column: 1/-1; }
.form .btn { grid-column: 1/-1; }
.form-note { grid-column: 1/-1; font-size: 12.5px; color: var(--text-3); }
/* ---------------------------------------------- ARAMALI SEÇİM ALANI ----- */
/* Kapalıyken normal bir alan gibi durur; odaklanınca liste açılır ve
yazdıkça seçenekler süzülür. Değeri gizli input taşır. */
.searchable-select { position: relative; display: block; min-width: 0; }
.searchable-select__input { width: 100%; cursor: pointer; padding-right: 44px !important; text-overflow: ellipsis; }
.searchable-select.is-open .searchable-select__input { cursor: text; }
.searchable-select__arrow { position: absolute; right: 15px; top: 50%; width: 17px; height: 17px; margin-top: -8px; color: var(--text-3); pointer-events: none; transition: transform .2s ease, color .2s; }
.searchable-select.is-open .searchable-select__arrow { transform: rotate(180deg); color: var(--brand-deep); }
.searchable-select__list-wrap { position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 40; display: none; background: var(--s1); border-radius: var(--r-sm); box-shadow: var(--sh2); overflow: hidden; }
.searchable-select.is-open .searchable-select__list-wrap { display: block; }
.searchable-select.is-open-up .searchable-select__list-wrap { top: auto; bottom: calc(100% + 6px); }
.searchable-select__list { list-style: none; margin: 0; padding: 5px; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.searchable-select__option { padding: 9px 12px; border-radius: var(--r-sm); font-family: var(--body); font-size: 13.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--text-2); cursor: pointer; transition: background .14s, color .14s; }
.searchable-select__option:hover, .searchable-select__option.is-active { background: var(--tint); color: var(--text); }
.searchable-select__option.is-selected { background: var(--brand); color: #fff; font-weight: 700; }
.searchable-select__option.is-filtered-out { display: none; }
.searchable-select__empty { display: none; padding: 11px 12px; font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.searchable-select__empty.is-visible { display: block; }
.infolist { display: flex; flex-direction: column; gap: 12px; }
.info { background: var(--s1); border-radius: var(--r); padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--sh1); }
.info-ico { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--brand-soft); flex: none; display: grid; place-items: center; }
.info-ico svg { width: 20px; height: 20px; color: var(--brand-deep); }
.info small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); }
.info b { font-family: var(--head); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.info p { font-size: 14.5px; color: var(--text-2); }
.legal { font-size: 12.5px; color: var(--text-3); line-height: 1.7; }
/* ====================================================== METİN =========== */
.prose { max-width: 70ch; display: flex; flex-direction: column; gap: 22px; }
.prose p { font-size: 16.5px; color: var(--text-2); }
.prose h3 { margin-top: 10px; color: var(--text); }
.prose ul { display: flex; flex-direction: column; gap: 11px; }
.prose ul li { display: flex; gap: 13px; font-size: 15.5px; color: var(--text-2); }
.prose ul li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; margin-top: 10px; }
.quote { background: var(--brand-soft); border-radius: var(--r); padding: 24px 28px; font-size: 16.5px; color: var(--text); box-shadow: inset 3px 0 0 var(--brand); }
/* ======================================================== CTA =========== */
.ctaband { background: var(--base-2); color: #fff; border-radius: var(--r-xl); padding: clamp(32px,4vw,64px); display: flex; flex-wrap: wrap; align-items: center; gap: 26px; position: relative; overflow: hidden; }
.ctaband::after { content: ""; position: absolute; right: -8%; top: -130%; width: 600px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--brand) 32%,transparent) 0%,transparent 62%); filter: blur(16px); }
.ctaband>div { position: relative; z-index: 1; flex: 1 1 380px; display: flex; flex-direction: column; gap: 14px; }
.ctaband h2 { color: #fff; }
.ctaband .btn { position: relative; z-index: 1; }
/* ===================================================== FOOTER =========== */
/* Levhanın altında kalan koyu taban. Altta dev marka yazısı. */
.site-foot { background: var(--base); color: var(--on-dark); padding: clamp(48px,5.6vw,86px) 0 0; font-size: 15px; position: relative; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 44px; border-bottom: 1px solid var(--hair-dark); }
.site-foot h4 { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.site-foot li+li { margin-top: 11px; }
.site-foot a:hover { color: var(--brand-lift); }
.foot-about p { margin-top: 18px; max-width: 40ch; font-size: 14.5px; line-height: 1.7; }
.social { display: flex; gap: 9px; margin-top: 22px; }
.social a { width: 40px; height: 40px; background: rgba(255,255,255,.07); border-radius: var(--r-sm); display: grid; place-items: center; transition: background .16s,color .16s; }
.social a:hover { background: var(--brand); color: #fff; }
.social svg { width: 16px; height: 16px; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; padding: 22px 0 20px; font-size: 13px; color: var(--on-dark-3); }
/* footer alt satırındaki hukuki metin bağlantıları — eskiden düz metindi */
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.foot-legal a { color: var(--on-dark-3); transition: color .18s; }
.foot-legal a:hover { color: var(--brand-lift); }
/* ayraç: aradaki nokta CSS ile, işaretlemede gereksiz karakter durmasın */
.foot-legal a + a::before { content: "·"; margin-right: 14px; color: rgba(255,255,255,.28); }
/* ================================================ UÇAN PARÇALAR ======== */
/* Bölümlerin kenarlarından taşan, hafifçe süzülen dekoratif öğeler.
data-par ile kaydırmaya bağlı paralaks alırlar (pobol.js). */
/* NOT: CSS animasyonu ve JS paralaksı ikisi de transform kullanır; aynı öğede
çakışır. Bu yüzden süzülen öğelerde (chip/orb/sticker) animasyon, sabit
öğelerde (ring, kenar şekilleri) data-par paralaksı kullanılır. */
.floaters { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* .clip: parçalar bölümün kenarında kesilir — sayfa yana kaymaz */
.floaters.clip { overflow: hidden; border-radius: inherit; z-index: 0; }
/* bulanık marka lekeleri */
.orb { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(28px); background: radial-gradient(circle,color-mix(in srgb,var(--brand) 55%,transparent) 0%,transparent 70%); animation: orbit 20s ease-in-out infinite; }
@keyframes orbit {
0%, 100% { transform: translate3d(0,0,0) scale(1); }
50% { transform: translate3d(26px,-22px,0) scale(1.12); }
}
/* kenardan sarkan halka */
.ring { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; border: 1px solid var(--hair-dark); }
.ring::after { content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 1px solid var(--hair-dark); }
.ring.on-light { border-color: var(--hair); }
.ring.on-light::after { border-color: var(--hair); }
/* dönen yapışkan rozet */
.sticker { position: absolute; z-index: 3; width: clamp(96px,10vw,132px); aspect-ratio: 1; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; text-align: center; box-shadow: var(--sh2); transform: rotate(-6deg); font-family: var(--head); font-weight: 700; letter-spacing: -.012em; line-height: 1.05; animation: wobble 7s ease-in-out infinite; }
.sticker b { display: block; font-size: clamp(20px,2.2vw,28px); }
.sticker small { display: block; font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; opacity: .85; margin-top: 3px; }
@keyframes wobble {
0%, 100% { transform: rotate(-6deg) translateY(0); }
50% { transform: rotate(-2deg) translateY(-7px); }
}
/* metin arasında kayan küçük künye çizgisi */
.tickline { display: flex; align-items: center; gap: 14px; font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.tickline::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.on-ink .tickline, .sec-ink .tickline { color: var(--on-dark-3); }
.on-ink .tickline::after, .sec-ink .tickline::after { background: var(--hair-dark); }
/* ==================================================== BAŞA DÖN ========= */
.totop { position: fixed; right: clamp(14px,2vw,26px); bottom: clamp(14px,2vw,26px); z-index: 80; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; padding: 0; background: var(--s1); color: var(--text); display: grid; place-items: center; box-shadow: var(--sh2); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); transition: opacity .3s,transform .3s cubic-bezier(.2,.7,.2,1),visibility .3s,background .2s,color .2s; }
.totop svg { width: 19px; height: 19px; }
.totop.show { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--brand); color: #fff; }
/* ====================================================== REVEAL ========== */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
/* ================================================== RESPONSIVE ========== */
@media (max-width:1080px) {
:root { --stick: 84px; }
.sec-head { grid-template-columns: 1fr; gap: 20px; }
.layout-head h2, .layout-head .lead { max-width: none; }
/* dar ekranda ray yatay künyeye döner */
.layout { grid-template-columns: minmax(0,1fr); row-gap: 16px; }
.rail { position: static; flex-direction: row; align-items: center; gap: 11px; padding-top: 0; }
.rail-t { writing-mode: horizontal-tb; text-orientation: initial; transform: none; font-size: 11.5px; font-weight: 600; letter-spacing: .13em; padding-block: 0; }
.rail::after { width: auto; height: 1px; flex: 1; }
.sec-head .kicker, .sec-head h2, .sec-head .lead, .sec-head>.btn { grid-column: 1; grid-row: auto; padding-top: 0; }
/* künye yatay künyeye iner, çizgi satırın kalanını doldurur */
.stack-card { grid-template-columns: 1fr; gap: 12px; }
.spill, .spill.flip { grid-template-columns: 1fr; gap: 30px; }
.spill-media, .spill.flip .spill-media { order: 0; }
.spill .sticker { left: auto; right: 8px; top: -26px; }
.spill.flip .spill-copy { order: 0; }
.showcase { grid-template-columns: 1fr; gap: 36px; }
.showcase-copy, .showcase.rev .showcase-copy, .showcase.media-left .showcase-copy { order: 1; }
.showcase-media, .showcase.rev .showcase-media, .showcase.media-left .showcase-media { order: 2; }
.shot-over { right: 10px; bottom: -20px; }
.page-head .shell { grid-template-columns: 1fr; }
.page-head h1, .page-head .lead { grid-column: 1; }
/* Mobilde başlık HER ZAMAN "small" ölçüsünde durur: yüksekliği ve logo
boyutu kaydırmaya göre değişmez. Önceden sayfa kaydıkça 84↔64px,
logo 42↔34px arasında oynuyordu; menü her açılıp kapandığında da gövde
sabitlendiği için scrollY sıfırlanıp aynı oynama tekrarlanıyordu.
Ölçüler sabitlenince .small sınıfı mobilde boyutu hiç etkilemez —
yalnızca masaüstündeki yüzen hap görünümü için anlamlıdır.
Geçişler de kapatıldı ki durum değişse bile animasyon tetiklenmesin. */
.site-head .shell { min-height: 64px; transition: none; }
.logo-img { height: calc(var(--logo-h,42px) - 8px); transition: none; }
/* Yapışkan (.small) hâldeki "yüzen beyaz hap" masaüstü için tasarlandı;
dar ekranda kocaman yarıçaplı beyaz bir kutuya dönüşüp koyu başlıkla
çelişiyordu. Mobilde başlık yapışkanken de koyu ve tam genişlikte kalır;
bu yüzden menü/hamburger renkleri de koyu zemine göre sabitlenir. */
.site-head.small { background: var(--base); padding-top: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* mobil menü paneli position:fixed — üst öğede filtre onu başlığa hapsederdi */
.site-head.small .shell { min-height: 64px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; box-shadow: none; max-width: var(--shell); padding-left: clamp(18px,3vw,44px); padding-right: clamp(18px,3vw,44px); }
.site-head.small .navtoggle { background: rgba(255,255,255,.12); }
.site-head.small .navtoggle span { background: #fff; }
.site-head.small .mainnav>li>a { color: var(--on-dark); }
.site-head.small .mainnav>li.active>a { color: #fff; background: rgba(255,255,255,.14); }
.site-head.small .submenu { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-head.small.open .submenu a { color: var(--on-dark); }
.mainnav, .head-cta { display: none; }
.navtoggle { display: block; }
/* AÇIK MOBİL MENÜ — tam ekran panel davranışı.
Üç sorun birden buradan çıkıyordu:
1) Kapatma düğmesi hiçbir yerde görünmüyordu: işaretlemede .navtoggle,
.mainnav'dan SONRA geliyor; sarmalanan satırda liste width:100% aldığı
için düğme listenin altındaki üçüncü satıra, yani ekranın çok dışına
düşüyordu. Sıralamayı flex order ile düzeltiyoruz.
2) Menünün içi kaydırılamıyordu: liste ekrandan uzun ama gövde kaydırması
kilitli olduğu için alt başlıklara ulaşılamıyordu. Liste artık kendi
içinde kayar (overscroll-behavior: contain → kaydırma arkaya geçmez).
3) Sayfa kaydırılmışken menü açılınca menü kayboluyordu: başlık sticky,
gövde kaydırması kilitlenince sticky konumunu kaybediyordu. Açıkken
position:fixed kullanıyoruz; başlık satırı her hâlükârda üstte kalır. */
.site-head.open { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--base); padding-top: 0; }
.site-head.open .shell { flex-wrap: wrap; align-content: flex-start; padding-top: 12px; }
.site-head.open .wordmark { order: 1; }
.site-head.open .navtoggle { order: 2; }
.site-head.open .mainnav { order: 3; display: flex; flex-direction: column; align-self: auto; align-items: stretch; width: 100%; gap: 2px; padding: 6px 0 16px; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
/* logo + kapatma düğmesi satırı listeyle aynı yükseklikte olmasın diye
ilk satır kendi yüksekliğini korur */
.site-head.open .wordmark, .site-head.open .navtoggle { flex: none; }
.site-head.open .mainnav>li { display: block; } /* mobilde bağlantı + alt menü alt alta */
.site-head.open .mainnav>li>a { padding: 14px 16px; font-size: 16.5px; border-radius: var(--r-sm); }
/* Masaüstünde açılır panel başlığın altında ortalanmak için translateX(-50%)
taşıyor ve bu dönüşüm geçişli. Mobil akordiyonda panel akışa giriyor
(transform: none); iki durum arasındaki geçiş yüzünden alt menüler
açılırken yatay olarak kayıyordu. Bu genişlikte ne ortalamaya ne de
geçişe gerek var — ikisini de kapatıyoruz. */
.submenu { left: auto; transform: none; transition: none; }
/* Masaüstündeki açılma kuralı (.mainnav>li:hover/:focus-within .submenu)
özgüllüğü (0,3,1) ile hem yukarıdaki .submenu hem de
.site-head.open .submenu kurallarını eziyor. Mobilde bir alt menü
bağlantısına dokunulduğunda :focus-within kuruluyor, translateX(-50%)
geri geliyor ve panel yarı yarıya ekran dışına kayıyordu. Aynı seçiciyi
burada tekrarlayıp dönüşümü kesin olarak kapatıyoruz. */
.mainnav>li:hover .submenu, .mainnav>li:focus-within .submenu { transform: none; }
/* DOKUNMA RENKLERİ — mobil menü koyu zeminde duruyor.
Masaüstünde açılır menü bağlantısının hover'ı açık yeşil zemin + koyu
yeşil yazıdır. Mobilde yazı rengini daha yüksek özgüllüklü bir kural
beyaza sabitlediği için yalnızca ZEMİN açılıyor, yazı beyaz kalıyor ve
kontrast 1.62'ye düşüp bağlantı okunmaz oluyordu. Her iki seviyenin
dokunma/odak geri bildirimi burada koyu zemine göre yeniden tanımlanır. */
.site-head.open .mainnav>li>a:hover,
.site-head.open .mainnav>li>a:focus-visible { color: #fff; background: rgba(255,255,255,.10); }
.site-head.open .submenu a:hover,
.site-head.open .submenu a:focus-visible { color: #fff; background: rgba(255,255,255,.10); }
.site-head.open .submenu { position: static; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; box-shadow: none; padding: 0 0 6px 16px; min-width: 0; background: transparent; }
.site-head.open .submenu::before { display: none; } /* mobilde köprüye gerek yok */
.famrow { grid-template-columns: auto 1fr; row-gap: 12px; }
.famrow-go { grid-column: 2; justify-self: end; }
.g4, .steps { grid-template-columns: repeat(2,1fr); }
/* Basamaklı üçlü özellik ızgarası hiç kırılmıyordu: 360px ekranda kartlar
86px genişliğe düşüp 492px yüksekliğinde şeritlere dönüşüyordu. İki kolona
indiriyoruz; basamak kaydırmaları (nth-child 3n) üçlü düzene göre
kurulduğu için burada sıfırlanmalı. */
.feat { grid-template-columns: repeat(2,1fr); }
.feat-c { margin-top: 0 !important; }
.modlist { grid-template-columns: repeat(2,1fr); }
.catlist { grid-template-columns: 1fr; }
.ctasplit { grid-template-columns: 1fr; }
.ctasplit-a { margin-right: 0; clip-path: none; padding: clamp(26px,3vw,40px); }
.ctasplit-b { padding: clamp(26px,3vw,40px); }
.actionrow .shell { grid-template-columns: 1fr; gap: 22px; }
.fold { height: clamp(280px,44vw,380px); }
.fold-c { max-width: none; }
.stats { grid-template-columns: repeat(2,1fr); }
/* İki kolona inince sayı bloğu ortalanır. Masaüstündeki "ilk hücre sola,
son hücre sağa dayalı" boşluk sıfırlamaları burada geçersiz: 2 kolonda
1. ve 4. hücreye denk gelip satırları birbirine göre kaydırıyordu.
Dört hücre de simetrik boşluk alsın. */
.stats { text-align: center; }
.stats>div, .stats>div:first-child, .stats>div:last-child { padding-left: clamp(12px,2vw,24px); padding-right: clamp(12px,2vw,24px); }
.stats>div:nth-child(2n) { border-right: 0; }
.stats>div:nth-child(-n+2) { border-bottom: 1px solid var(--hair-dark); }
}
@media (max-width:860px) {
.sticker { width: 86px; }
.g3 { grid-template-columns: repeat(2,1fr); }
.plans { grid-template-columns: 1fr; }
.contact { grid-template-columns: 1fr; }
.foot-grid { grid-template-columns: 1fr 1fr; }
.sec-head.row { flex-direction: column; align-items: flex-start; }
.checks.two { grid-template-columns: 1fr; }
.stack-card { position: static; }
/* katlanır paneller dikey listeye iner, hepsi açık durur */
/* MOBİLDE BANNER: paneller alt alta iner ve hepsi aynı kalıba girer —
görsel kendi oranında üstte, metin altta panel zemininde.
Masaüstündeki "metin görselin üstünde" düzeni telefonda çalışmıyordu:
hazır banner grafikleri (type:image) kendi yazısını taşıdığı için site
metniyle çakışıyor, panel ekran görüntüsü gibi açık görsellerde ise
karartma katmanı ne kadar koyulaştırılsa da metin okunmuyordu.
Görseli metnin arkasından çıkarınca sorun kaynağında bitiyor; bu yüzden
karartma katmanı da kaldırıldı. */
.fold { flex-direction: column; height: auto; gap: 12px; }
.fold-p, .fold-p.on { flex: none; min-height: 0; }
.fold-img { position: static; width: 100%; height: auto; opacity: 1; transform: none; object-fit: contain; }
.fold-p::after { display: none; }
.fold-tab { display: none; }
.fold-c { opacity: 1; transform: none; pointer-events: auto; height: auto; max-width: none; justify-content: flex-start; padding: 15px clamp(14px,4vw,18px) 18px; }
/* metin artık görselin üstünde durmadığı için üç satırla sınırlamaya gerek yok */
.fold-c p { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
}
@media (max-width:620px) {
.g2, .g3, .g4, .steps, .modlist, .form { grid-template-columns: 1fr; }
/* basamaklı özellik ızgarası tek kolona iner */
.feat { grid-template-columns: 1fr; }
/* Referanslar: üç dikey kolon yerine tek yatay kayan şerit */
.vmarq { display: none; }
.refstrip { display: block; }
.catrow { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.catrow-body small { white-space: normal; }
/* Üst şerit mobilde tamamen kalkar. Telefon, e-posta ve çalışma saati zaten
bu genişlikte gizliydi; geriye yalnızca WhatsApp bağlantısı kalıyordu ve o
da kaldırılınca boş bir şerit kalacaktı. Aynı iletişim yolları "Hemen
başlayın" satırında ve footer'da duruyor, bilgi kaybı yok. */
.topbar { display: none; }
/* tablo yatay kaydırma yerine daralır (sabit başlık korunsun) */
.cmp th, .cmp td { padding: 11px 8px; font-size: 12.5px; }
.cmp thead th { padding-top: 11px; padding-bottom: 11px; }
.cmp-th b { font-size: 13.5px; }
.cmp-th small { font-size: 10.5px; letter-spacing: .05em; }
.cmp-th s { font-size: 10.5px; }
.cmp-go { font-size: 10.5px; }
.cmp-price { gap: 5px; }
.cmp .cmp-group td { font-size: 10.5px; letter-spacing: .1em; }
.cmp thead th:not(:first-child) { width: 19%; }
.tk { font-size: 12.5px; }
.tk.add { font-size: 10.5px; padding: 2px 7px; }
/* mikro künye tabanı: 9–10px etiketler telefonda okunmuyor */
.badge { font-size: 10.5px; }
.sticker small { font-size: 10.5px; }
.cmp-i { width: 17px; height: 17px; margin-left: 5px; }
.cmp-i::after { left: auto; right: -10px; }
.cmp-i::before { left: auto; right: 8px; }
.ar-cells { grid-template-columns: 1fr; }
.ar-cell { border-right: 0; border-bottom: 1px solid var(--hair); }
.ar-cell:last-child { border-bottom: 0; }
.logo-grid { grid-template-columns: repeat(auto-fill,minmax(112px,1fr)); }
/* Sahte tarayıcı çubuğundaki adres metni dekoratif ve white-space:nowrap
olduğu için kutunun İÇSEL min-content'ini 275px'e sabitliyor (min-width:0
sıkışmaya izin verir ama içsel ölçüyü küçültmez); bu da dar ekranda
.showcase ızgarasını taşırıyordu. Üç nokta kalıyor, adres metni gidiyor. */
.shot-bar span { display: none; }
.famrow-mark { min-width: 0; }
}
/* Çok dar ekran (≤420px): karşılaştırma tablosu 360px'te 4px taşıyordu.
Tasarım kararı "yatay kaydırma yerine tablo daralsın" olduğu için genişliği
iç boşluktan ve gereksiz künyelerden kazanıyoruz. Kelime kırma (overflow-wrap
:anywhere) denendi ama "KARŞILAŞTIRM/A" gibi çirkin kırılmalar yapıyordu;
onun yerine ilk kolonun "Karşılaştırma" üst künyesini gizliyoruz — altında
zaten "Özellik" yazıyor, yani bilgi kaybı yok. */
@media (max-width:420px) {
.cmp th, .cmp td { padding: 10px 6px; font-size: 12px; }
.cmp thead th:first-child .cmp-th small { display: none; }
.cmp-gt { padding: 15px 10px; gap: 8px; }
.cmp-gt em { display: none; } /* "6 özellik" sayacı dar ekranda satırı taşırıyor */
/* footer ızgarası iki kolon için 328px istiyor (kolonlar en uzun kelimenin
altına inemez), 320px ekranda 269px var — tek kolona iniyor. */
.foot-grid { grid-template-columns: 1fr; gap: 26px; }
}
/* 320px sınıfı ekranlar: karşılaştırma tablosu bu genişlikte ancak uzun
özellik adlarını kırarak sığıyor. Kırma yalnızca burada geçerli — 360px ve
üstünde tipografi bölünmeden kalıyor. */
@media (max-width:340px) {
/* 320px'te levha kenarı (12px) + kabuk iç boşluğu (18px) toplam 60px yer
yiyor; kabuğu daraltmak içeriğe 12px kazandırıyor — puntoları daha fazla
kısmaktan iyi. */
.shell { padding-inline: 12px; }
.cmp td:first-child { overflow-wrap: anywhere; }
/* tablonun kalan darlığı başlıktaki fiyat metninden geliyor: üç kolonun
"20.475 TL" başlığı taban genişliği kuruyor. Puntoyu bir tık kısıp
ikincil (üstü çizili) eski fiyatı bu genişlikte gizliyoruz. */
.cmp-th b { font-size: 12px; }
.cmp-th s { display: none; }
}
@media (prefers-reduced-motion:reduce) {
/* sözde elemanlar da dahil: nabız halkaları artık ::after üzerinde */
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html { scroll-behavior: auto; }
.rv { opacity: 1; transform: none; }
.stack-card { position: static; }
.feat-c { margin-top: 0 !important; }
}
@media print {
.topbar, .site-head, .actionrow, .marquee, .fold, .totop, .orb, .ring, .sticker { display: none; }
body { font-size: 12pt; background: #fff; }
.sheet { margin: 0; border-radius: 0; box-shadow: none; }
}
/* ================================= YARDIM MERKEZİ ======================
İki panel: solda yapışkan modül rayı, sağda seçili modülün alt başlıkları
kart hâlinde. İç içe akordiyon yok — tek tıkla modül değişir. */
.help { display: grid; grid-template-columns: minmax(0,286px) minmax(0,1fr); gap: clamp(20px,2.6vw,38px); align-items: start; }
/* sol ray */
.help-rail { position: sticky; top: var(--stick); display: flex; flex-direction: column; gap: 4px; background: var(--s1); border-radius: var(--r); padding: 10px; box-shadow: var(--sh1); }
.help-tab { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: 13px 14px; border-radius: var(--r-sm); position: relative; transition: background .2s, color .2s; }
.help-tab var { font-style: normal; font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--text-3); flex: none; transition: color .2s; }
.help-tab b { flex: 1; min-width: 0; font-family: var(--head); font-size: 15.5px; font-weight: 600; letter-spacing: 0; color: var(--text-2); transition: color .2s; }
.help-tab em { font-style: normal; font-family: var(--body); font-size: 11px; font-weight: 700; color: var(--text-3); background: var(--sheet); border-radius: var(--pill); padding: 3px 9px; flex: none; transition: background .2s, color .2s; }
.help-tab:hover { background: var(--sheet); }
.help-tab:hover b { color: var(--text); }
.help-tab.on { background: color-mix(in srgb,var(--brand) 12%,#fff); }
.help-tab.on b, .help-tab.on var { color: var(--brand-deep); }
.help-tab.on em { background: #fff; color: var(--brand-deep); }
.help-tab.on::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.help-tab.nohit { display: none; }
/* sağ panel */
.help-pane { display: none; flex-direction: column; gap: clamp(16px,2vw,24px); }
.help-pane.on { display: flex; }
.help-pane-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-bottom: 4px; }
.help-pane-head h3 { font-size: clamp(21px,2.2vw,30px); font-weight: 600; letter-spacing: -.012em; color: var(--text); }
.help-pane-head p { font-family: var(--body); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
/* alt başlık: düz bar + altında makale kutuları */
.help-blocks { display: flex; flex-direction: column; gap: clamp(18px,2.4vw,30px); }
.help-bar { display: flex; align-items: center; gap: 12px; padding: 15px 18px; background: var(--s1); border-radius: var(--r-sm); box-shadow: inset 3px 0 0 var(--brand), var(--sh1); }
.help-bar b { flex: 1; min-width: 0; font-family: var(--head); font-size: clamp(15.5px,1.5vw,18px); font-weight: 600; letter-spacing: 0; color: var(--text); }
.help-bar em { font-style: normal; font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); flex: none; }
/* align-items:stretch (varsayılan) + li'de flex: aynı satırdaki kutular
satırın en uzunu kadar yükselir, boyları eşitlenir. */
.help-boxes { display: grid; grid-template-columns: repeat(auto-fill,minmax(214px,1fr)); gap: 10px; margin-top: 10px; }
.help-boxes li { display: flex; }
.help-boxes a { display: flex; align-items: center; gap: 10px; flex: 1; padding: 15px 16px; border-radius: var(--r-sm); background: var(--s1); font-size: 14.5px; line-height: 1.45; color: var(--text-2); box-shadow: inset 0 0 0 1px transparent, var(--sh1); transition: color .2s, box-shadow .22s, transform .22s; }
.help-boxes a span { flex: 1; min-width: 0; }
.help-boxes a svg { width: 12px; height: 12px; flex: none; margin-top: 4px; opacity: .28; transition: opacity .2s, transform .2s; }
.help-boxes a:hover { color: var(--brand-deep); transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--brand) 34%,transparent), var(--sh2); }
.help-boxes a:hover svg { opacity: 1; transform: translateX(2px); }
.help-boxes li.nomatch, .help-block.nohit { display: none; }
.help-empty { padding: 24px 26px; background: var(--s1); border-radius: var(--r); box-shadow: var(--sh1); font-size: 15px; color: var(--text-2); }
.help-empty a { color: var(--brand-deep); font-weight: 600; }
/* arama modunda eşleşen tüm modüller alt alta görünür */
.help.searching .help-pane { display: none; }
.help.searching .help-pane.hit { display: flex; }
.help.searching .help-pane.hit + .help-pane.hit { padding-top: clamp(18px,2.4vw,30px); border-top: 1px solid var(--hair); }
.doc-count { font-family: var(--head); font-size: 13.5px; font-weight: 600; color: var(--text-3); flex: none; }
/* ============================== YARDIM MAKALESİ SAYFASI =============== */
.doc-page { display: grid; grid-template-columns: minmax(0,268px) minmax(0,1fr); gap: clamp(24px,3.6vw,56px); align-items: start; }
/* .doc-side (yan menü) kuralları dosyanın sonunda: YAN MENÜ */
.doc-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--head); font-size: 13.5px; font-weight: 600; color: var(--text-3); }
.doc-back svg { width: 13px; height: 13px; transform: rotate(180deg); }
.doc-back:hover { color: var(--brand-deep); }
.doc-art { background: var(--s1); border-radius: var(--r-xl); padding: clamp(24px,3vw,48px); box-shadow: var(--sh1); min-width: 0; }
.doc-art p { font-size: 16px; color: var(--text-2); line-height: 1.8; margin: 0 0 18px; }
.doc-art p:last-of-type { margin-bottom: 0; }
.doc-art strong, .doc-art b { color: var(--text); font-weight: 600; }
.doc-art h2, .doc-art h3, .doc-art h4 { margin: 30px 0 12px; }
.doc-art h2 { font-size: clamp(21px,2vw,27px); }
.doc-art h3 { font-size: clamp(18px,1.6vw,21px); }
.doc-art ul, .doc-art ol { display: flex; flex-direction: column; gap: 9px; margin: 0 0 18px; padding-left: 4px; }
.doc-art li { display: flex; gap: 11px; font-size: 15.5px; color: var(--text-2); line-height: 1.7; }
.doc-art ul li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; margin-top: 10px; }
.doc-art ol { counter-reset: d; }
.doc-art ol li { counter-increment: d; }
.doc-art ol li::before { content: counter(d); font-family: var(--head); font-size: 12px; font-weight: 700; color: var(--brand-deep); flex: none; min-width: 18px; margin-top: 3px; }
.doc-art img { width: auto; max-width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: var(--sh1); margin: 6px 0 20px; }
.doc-art a { color: var(--brand-deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.doc-art table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14.5px; }
.doc-art th, .doc-art td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--hair); }
.doc-art th { font-family: var(--head); font-weight: 600; color: var(--text); }
.doc-art blockquote { margin: 0 0 20px; padding: 18px 22px; background: var(--brand-soft); border-radius: var(--r-sm); box-shadow: inset 3px 0 0 var(--brand); }
.doc-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hair); }
.doc-nav a { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border-radius: var(--r); background: var(--sheet); text-decoration: none; transition: background .2s; }
.doc-nav a:hover { background: var(--brand-soft); }
.doc-nav small { font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); }
.doc-nav b { font-family: var(--head); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--text); text-decoration: none; }
.doc-nav-next { text-align: right; }
.doc-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 18px 20px; border-radius: var(--r); background: var(--sheet); }
.doc-help p { margin: 0; font-size: 15px; }
.doc-help div { display: flex; gap: 9px; flex-wrap: wrap; }
.doc-none { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; background: var(--s1); border-radius: var(--r-xl); padding: clamp(26px,3vw,44px); box-shadow: var(--sh1); }
@media (max-width:1080px) {
.doc-page { grid-template-columns: 1fr; }
.doc-side { position: static; }
}
@media (max-width:620px) {
.doc-nav { grid-template-columns: 1fr; }
.doc-nav-next { text-align: left; }
}
@media (max-width:1080px) {
/* ray yatay kaydırmalı çip sırasına iner */
.help { grid-template-columns: 1fr; }
.help-rail { position: static; flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
.help-rail::-webkit-scrollbar { display: none; }
.help-tab { width: auto; flex: none; padding: 11px 14px; }
.help-tab var { display: none; }
.help-tab b { font-size: 14.5px; white-space: nowrap; }
.help-tab.on::before { display: none; }
}
/* ================================== BLOG ==============================
Liste: ilk yazı geniş bir kart (.post-lead), kalanlar üç kolonluk
ızgarada (.blog-grid). Kategori süzgeci sunucu tarafında çalışır, çipler
sadece bağlantıdır. Yazı sayfası destek makalesiyle aynı .doc-page /
.doc-art düzenini kullanır — tipografi tek yerden gelsin. */
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--s1); border-radius: var(--pill); padding: 10px 16px; box-shadow: var(--sh1); font-family: var(--head); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text-2); transition: color .2s, background .2s, box-shadow .2s; }
.blog-chip var { font-style: normal; font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--text-3); font-variant-numeric: tabular-nums; transition: color .2s; }
.blog-chip:hover { color: var(--brand-deep); box-shadow: var(--sh2); }
.blog-chip:hover var { color: var(--brand-deep); }
.blog-chip.on { background: var(--brand); color: #fff; box-shadow: none; }
.blog-chip.on var { color: rgba(255,255,255,.7); }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
/* yazı kartı — tamamı bağlantı; üstte konuyu anlatan şema, altında künye */
.post { position: relative; display: flex; flex-direction: column; background: var(--s1); border-radius: var(--r-xl); box-shadow: var(--sh1); text-decoration: none; overflow: hidden; transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s; }
.post:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
.post h3 { font-size: clamp(17px,1.55vw,20.5px); line-height: 1.34; transition: color .2s; }
.post:hover h3, .post:hover h2 { color: var(--brand-deep); }
.post p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--text-2); }
/* şema kutusu — sabit en-boy oranı, kart hover'ında hafifçe yakınlaşır */
.post-art { display: block; overflow: hidden; background: var(--brand-soft); }
.post-art .art-svg { display: block; width: 100%; height: auto; aspect-ratio: 420 / 240; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.post:hover .post-art .art-svg { transform: scale(1.035); }
/* ızgara kartının metin bölgesi */
.blog-grid .post > :not(.post-art) { margin-inline: clamp(18px,1.8vw,24px); }
.blog-grid .post-m { margin-top: clamp(16px,1.6vw,20px); }
.blog-grid .post h3 { margin-top: 10px; }
.blog-grid .post p { margin-top: 9px; }
.blog-grid .post-f { margin-bottom: clamp(14px,1.5vw,18px); }
/* künye satırı: kategori · tarih · okuma süresi */
.post-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); }
.post-m b { font-weight: 700; color: var(--brand-deep); }
.post-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair); font-family: var(--body); font-size: 12px; color: var(--text-3); }
.post-f svg { width: 16px; height: 16px; flex: none; color: var(--brand); transition: transform .22s; }
.post:hover .post-f svg { transform: translateX(4px); }
/* ilk yazı — solda şema, sağda metin; marka tonlu zemin */
.post-lead { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); align-items: stretch; background: var(--tint); margin-bottom: 12px; }
.post-lead .post-art { height: 100%; background: transparent; display: grid; place-items: center; padding: clamp(20px,2.4vw,34px); }
.post-lead .post-art .art-svg { max-width: 460px; }
.post-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: clamp(26px,3vw,44px); padding-left: 0; }
.post-lead h2 { font-size: clamp(24px,2.7vw,36px); line-height: 1.14; transition: color .2s; }
.post-lead p { font-size: clamp(14.5px,1.15vw,16.5px); line-height: 1.7; }
.post-go { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-family: var(--head); font-size: 14.5px; font-weight: 600; letter-spacing: 0; color: var(--brand-deep); transition: gap .18s; }
.post-go svg { width: 17px; height: 17px; }
.post-lead:hover .post-go { gap: 14px; }
/* yazı sayfasının başındaki şema */
.post-hero { margin: 0 0 30px; border-radius: var(--r); overflow: hidden; background: var(--brand-soft); padding: clamp(12px,1.6vw,22px); }
.post-hero .art-svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; aspect-ratio: 420 / 240; }
/* yazı altı etiketleri */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hair); }
.post-tags span { background: var(--sheet); border-radius: var(--pill); padding: 6px 14px; font-family: var(--body); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--text-3); }
/* Blog gövdesinde madde başlarında kullanılıyor. .doc-art li bir flex
kutusu olduğu için satır içi ayrı bir flex öğesine dönüşüp kendi
kolonuna düşüyordu; blog yazılarında madde işaretini konumlandırıp satırı
normal blok akışına bırakıyoruz. Destek makaleleri etkilenmez. */
.post-doc ul li, .post-doc ol li { display: block; position: relative; padding-left: 24px; }
.post-doc ul li::before { position: absolute; left: 2px; top: 11px; margin-top: 0; }
.post-doc ol li::before { position: absolute; left: 0; top: 0; margin-top: 0; min-width: 0; }
@media (max-width:1080px) {
.blog-grid { grid-template-columns: repeat(2,1fr); }
/* ilk yazı da tek kolona iner: şema üstte, metin altta */
.post-lead { grid-template-columns: minmax(0,1fr); }
.post-lead .post-art { padding: clamp(18px,3vw,28px) clamp(18px,3vw,28px) 0; }
.post-copy { padding: clamp(20px,3vw,30px); }
}
@media (max-width:620px) {
.blog-grid { grid-template-columns: 1fr; }
.blog-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.blog-cats::-webkit-scrollbar { display: none; }
.blog-chip { flex: none; }
}
/* =========================== SIKÇA SORULAN SORULAR ====================
Akordiyon: soru satırı düğme, cevap grid-template-rows 0fr → 1fr ile
açılır. Numaralar CSS sayacı ile basılır; her .faq listesi kendi
sayacını sıfırlar (SSS sayfasında her kategori 01'den başlar). */
.faq { display: flex; flex-direction: column; gap: 10px; counter-reset: fq; }
.faq-i { counter-increment: fq; background: var(--s1); border-radius: var(--r); box-shadow: inset 0 0 0 1px transparent, var(--sh1); transition: box-shadow .24s, transform .24s; }
.faq-i:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--brand) 18%,transparent), var(--sh1); }
.faq-i.on { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--brand) 34%,transparent), var(--sh2); }
.faq-h { margin: 0; }
.faq-q { display: flex; align-items: flex-start; gap: clamp(12px,1.4vw,18px); width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: clamp(15px,1.7vw,21px) clamp(16px,1.9vw,24px); }
/* satır numarası — bölüm künyeleriyle aynı dil */
.faq-q var { font-style: normal; font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--text-3); flex: none; padding-top: 6px; transition: color .2s; }
.faq-q var::before { content: counter(fq,decimal-leading-zero); }
.faq-q span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; font-family: var(--head); font-size: clamp(15.5px,1.5vw,18.5px); font-weight: 600; letter-spacing: 0; line-height: 1.38; color: var(--text); transition: color .2s; }
/* grup adı (ana sayfadaki kısa listede görünür) */
.faq-q small { font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep); }
/* artı / eksi işareti */
.faq-s { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sheet); transition: background .22s, transform .3s; }
.faq-s::before, .faq-s::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; border-radius: 2px; background: var(--text-2); transition: transform .3s cubic-bezier(.2,.7,.2,1), background .22s; }
.faq-s::after { transform: rotate(90deg); }
.faq-q:hover var, .faq-i.on .faq-q var { color: var(--brand-deep); }
.faq-q:hover span { color: var(--brand-deep); }
.faq-q:hover .faq-s { background: var(--brand-soft); }
.faq-i.on .faq-s { background: var(--brand); transform: rotate(180deg); }
.faq-i.on .faq-s::before, .faq-i.on .faq-s::after { background: #fff; }
.faq-i.on .faq-s::after { transform: rotate(0deg); }
/* cevap gövdesi: 0fr → 1fr geçişi (desteklemeyen tarayıcıda animasyonsuz açılır) */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.2,.7,.2,1); }
.faq-i.on .faq-a { grid-template-rows: 1fr; }
.faq-in { overflow: hidden; min-height: 0; }
.faq-txt { padding: 0 clamp(16px,1.9vw,24px) clamp(18px,2vw,24px); }
.faq-txt p { font-size: 15.5px; color: var(--text-2); line-height: 1.75; max-width: 74ch; }
.faq-txt p b { color: var(--text); }
.faq-txt p a { color: var(--brand-deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* cevabın altında ilgili yardım makaleleri */
.faq-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
.faq-docs>b { font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); margin-right: 2px; }
.faq-docs a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--pill); background: var(--sheet); font-size: 13px; font-weight: 600; color: var(--text-2); transition: background .2s, color .2s; }
.faq-docs a svg { width: 11px; height: 11px; opacity: .4; }
.faq-docs a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.faq-docs a:hover svg { opacity: 1; }
/* arama süzgeci (SSS sayfası) */
.faq-i.nomatch { display: none; }
/* ---- ana sayfa: akordiyon + yanındaki yardım kutusu ---- */
.faqsplit { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,296px); gap: clamp(16px,2.2vw,32px); align-items: start; }
.faqside { position: sticky; top: var(--stick); display: flex; flex-direction: column; gap: 12px; background: var(--base-2); border-radius: var(--r); padding: clamp(20px,2.2vw,28px); overflow: hidden; }
.faqside h3 { color: #fff; font-size: clamp(19px,1.8vw,23px); }
.faqside p { font-size: 14.5px; color: var(--on-dark); line-height: 1.7; }
.faqside-n { display: flex; gap: 22px; padding: 4px 0 6px; }
.faqside-n div { display: flex; flex-direction: column; }
.faqside-n b { font-family: var(--head); font-size: clamp(23px,2.4vw,32px); font-weight: 600; letter-spacing: -.012em; color: var(--brand-lift); line-height: 1.1; }
.faqside-n span { font-size: 12px; color: var(--on-dark-3); }
.faqside .btn { width: 100%; }
.faqside-l { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--on-dark-3); margin-top: 2px; }
.faqside-l svg { width: 14px; height: 14px; flex: none; color: var(--brand-lift); }
@media (max-width:1080px) {
.faqsplit { grid-template-columns: 1fr; }
.faqside { position: static; }
}
@media (max-width:620px) {
.faq-q { gap: 11px; padding: 15px 16px; }
.faq-q var { display: none; }
.faq-txt { padding: 0 16px 18px; }
}
@media (max-width:1080px) {
/* masaüstü çerçevesi tam genişliğe çıkar; tablet ve telefon altında
kendi ölçülerinde durur (sanal genişlikleri kaymasın diye sabit) */
}
/* ============ SİPARİŞ AKIŞI — kanallar tek listede birleşir ==========
Ekran görüntüsü yok: solda gelen kanal şeritleri, ortada tek noktada
birleşen hatlar, sağda kanal işaretini satırda taşıyan tek liste.
Şeritlerin dikey merkezleri ile SVG hatlarının uçları aynı oranda
durur; SVG kutuyu esneterek doldurur (preserveAspectRatio="none"). */
.merge { display: grid; grid-template-columns: minmax(0,.64fr) minmax(0,.34fr) minmax(0,1.7fr); grid-template-rows: auto 1fr auto; align-items: stretch; }
/* --- sol: gelen kanallar --- */
/* şerit bloğu üç satıra oturur (künye · şeritler · not); ortadaki hat sütunu
yalnızca şeritler satırında durduğu için hatların uçları şeritlerin dikey
merkezleriyle örtüşür. */
.merge-in { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 3; row-gap: 12px; align-content: stretch; }
.merge-t { font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.merge-in ul { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.merge-in li { display: flex; align-items: center; gap: 10px; background: var(--s1); border-radius: var(--pill); padding: 7px 15px 7px 7px; box-shadow: var(--sh1); transition: transform .2s, box-shadow .2s; }
.merge-in li:hover { transform: translateX(3px); box-shadow: var(--sh2); }
.merge-in li b { flex: 1; min-width: 0; font-family: var(--head); font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merge-in li var { font-style: normal; font-family: var(--body); font-size: 12px; font-weight: 700; color: var(--text-3); flex: none; }
.merge-in small { font-size: 12px; color: var(--text-3); }
/* kanal işareti: logo ya da site siparişleri için dükkân simgesi */
.merge-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--sheet); display: grid; place-items: center; overflow: hidden; flex: none; }
.merge-mark img { width: 21px; height: 21px; object-fit: contain; }
.merge-mark svg { width: 15px; height: 15px; color: var(--brand-deep); }
/* --- orta: birleşen hatlar --- */
.merge-flow { grid-row: 2; display: flex; }
.merge-flow svg { width: 100%; height: 100%; fill: none; }
.merge-line path { stroke: color-mix(in srgb,var(--brand) 26%,transparent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
/* Akış `linear` değil `steps(26)` ile ilerliyor. stroke-dashoffset derleyiciye
devredilemez: her karede altı bezier eğrisinin kesikli kontur geometrisi
yeniden hesaplanıp boyanıyor ve bu, ölçümde bu bölüm ekrandayken bir
çekirdeğin %35'ini tek başına yiyordu (43,7% → animasyon kapalıyken 8,6%).
steps(26) hareketi aynı hızda ve aynı yolda tutar, yalnızca ara değerleri
kırpar: dashoffset saniyede 60 kez değil ~11 kez değişir, değişmediği
karelerde tarayıcı hiç boyamaz → 43,7% yerine 17,3%.
26 = iki kesik döngüsü (dasharray 3+10=13), yani adım başına tam bir
kullanıcı birimi; daha da ucuzu steps(13) ama hareket gözle görülür
kesikleşiyor. vector-effect kaldırmak ya da katmana almak denendi,
ikisi de ölçülebilir fayda vermedi. */
.merge-dash path { stroke: var(--brand); stroke-width: 1.6; stroke-dasharray: 3 10; vector-effect: non-scaling-stroke; animation: mergeflow 2.4s steps(26) infinite; }
@keyframes mergeflow { to { stroke-dashoffset: -26; } }
/* --- sağ: tek liste --- */
.merge-out { grid-row: 1 / span 3; display: flex; flex-direction: column; background: var(--s1); border-radius: var(--r-xl); box-shadow: var(--sh2); overflow: hidden; }
.merge-out header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 15px 18px; }
.merge-out header b { font-family: var(--head); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.merge-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.merge-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 18px 14px; }
.merge-chips span { font-size: 11.5px; font-weight: 600; color: var(--text-3); background: var(--sheet); border-radius: var(--pill); padding: 5px 12px; }
.merge-chips span.on { background: var(--brand-soft); color: var(--brand-deep); }
.merge-rows li { display: grid; grid-template-columns: 30px minmax(0,1fr) minmax(0,auto) 108px minmax(0,96px); align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--hair); transition: background .18s; }
.merge-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.merge-id small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merge-rows li:hover { background: var(--tint); }
.merge-rows b { font-family: var(--head); font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.merge-pay { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.merge-rows .badge { justify-self: start; }
.merge-rows var { font-style: normal; font-family: var(--head); font-size: 13.5px; font-weight: 600; color: var(--text); text-align: right; white-space: nowrap; }
.merge-out footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; background: var(--sheet); margin-top: auto; }
.merge-out footer span { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; }
.merge-out footer b { font-family: var(--head); font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--s1); border-radius: var(--pill); padding: 6px 13px; box-shadow: var(--sh1); }
/* --- altta: garantiler + modül bağlantısı --- */
.mergefoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 26px; padding-top: clamp(18px,2.2vw,28px); border-top: 1px solid var(--hair); }
.mergefoot .checks { flex-direction: row; flex-wrap: wrap; gap: 10px 26px; }
.mergefoot .checks li { font-size: 13.5px; gap: 10px; }
.mergefoot .checks svg { width: 17px; height: 17px; margin-top: 2px; }
@media (max-width:1080px) {
/* hatlar düşer: kanallar yatay şeride iner, liste altına geçer */
.merge { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto; row-gap: 16px; }
.merge-in { grid-row: 1 / span 3; }
.merge-out { grid-row: 4; }
.merge-flow { display: none; }
.merge-in ul { flex-direction: row; flex-wrap: wrap; }
.merge-in li { flex: 0 1 auto; }
.merge-in li b { white-space: nowrap; }
}
@media (max-width:620px) {
.merge-rows li { grid-template-columns: 26px minmax(0,1fr) minmax(0,86px); gap: 10px; padding: 11px 14px; }
.merge-pay { display: none; }
.merge-rows .badge { grid-column: 2; justify-self: start; }
.merge-rows var { grid-column: 3; }
.merge-mark { width: 26px; height: 26px; }
.merge-mark img { width: 18px; height: 18px; }
.merge-out header, .merge-chips, .merge-out footer { padding-left: 14px; padding-right: 14px; }
.merge-chips span:nth-child(n+3) { display: none; }
.merge-out footer b:nth-child(n+4) { display: none; }
}
/* ============== KULLANICI DENEYİMİ — müşteri videoları ================
Solda seçili videonun kapağı, sağda oynatma listesi. YouTube iframe'i
yalnızca oynat'a basılınca eklenir (kapak görseli maketi taşır), böylece
sayfa açılışında dış betik yüklenmez. Liste değişince çalan video
kaldırılır; arkada ses kalmaz. */
.stories { display: grid; grid-template-columns: minmax(0,1.58fr) minmax(0,1fr); gap: clamp(16px,2.2vw,32px); align-items: start; }
.stories-stage { min-width: 0; }
.story-pane { display: none; margin: 0; flex-direction: column; gap: 16px; }
.story-pane.on { display: flex; }
/* kapak + oynat düğmesi */
.story-screen { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: #101210; box-shadow: var(--sh2); }
.story-play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.story-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .3s; }
.story-play:hover img { transform: scale(1.035); opacity: .92; }
.story-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: clamp(58px,5.4vw,76px); height: clamp(58px,5.4vw,76px); border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: 0 20px 44px -14px rgba(0,0,0,.55); transition: transform .26s cubic-bezier(.2,.7,.2,1), background .22s; }
.story-btn svg { width: 40%; height: 40%; margin-left: 6%; color: var(--brand-deep); transition: color .22s; }
.story-play:hover .story-btn { transform: translate(-50%,-50%) scale(1.09); background: var(--brand); }
.story-play:hover .story-btn svg { color: #fff; }
.story-play:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.story-play[hidden] { display: none; }
/* tıklandıktan sonra gelen oynatıcı */
.story-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* kapağın altındaki künye */
.story-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; }
.story-who { display: flex; flex-direction: column; gap: 2px; }
.story-who b { font-family: var(--head); font-size: clamp(17px,1.6vw,21px); font-weight: 600; letter-spacing: 0; color: var(--text); }
.story-who span { font-size: 12.5px; color: var(--text-3); }
.story-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.story-chips li { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--brand-deep); background: var(--brand-soft); border-radius: var(--pill); padding: 4px 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--brand) 20%,transparent); }
/* --- oynatma listesi --- */
.stories-list { display: flex; flex-direction: column; gap: 6px; background: var(--s1); border-radius: var(--r); padding: 12px; box-shadow: var(--sh1); }
.stories-t { font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 4px 6px 6px; }
.story-tab { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; padding: 8px; border-radius: var(--r-sm); position: relative; transition: background .2s; }
/* küçük kapak: kapakta ad-soyad yazısı var, o yüzden yüze doğru kırpılır */
.story-thumb { width: 58px; height: 44px; border-radius: 9px; overflow: hidden; background: var(--sheet); flex: none; }
.story-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 26%; }
.story-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.story-t b { font-family: var(--head); font-size: 14.5px; font-weight: 600; letter-spacing: 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.story-t small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-go { width: 26px; height: 26px; border-radius: 50%; background: var(--sheet); display: grid; place-items: center; flex: none; transition: background .2s; }
.story-go svg { width: 10px; height: 10px; margin-left: 1px; color: var(--text-3); transition: color .2s; }
.story-tab:hover { background: var(--sheet); }
.story-tab:hover .story-t b { color: var(--text); }
.story-tab.on { background: color-mix(in srgb,var(--brand) 11%,#fff); }
.story-tab.on .story-t b { color: var(--brand-deep); }
.story-tab.on .story-go { background: var(--brand); }
.story-tab.on .story-go svg { color: #fff; }
.story-tab.on::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.stories-all { display: inline-flex; align-items: center; gap: 9px; margin: 6px 6px 2px; font-family: var(--head); font-size: 13.5px; font-weight: 600; color: var(--brand-deep); }
.stories-all svg { width: 14px; height: 14px; transition: transform .2s; }
.stories-all:hover svg { transform: translateX(3px); }
/* --- ŞERİT (carousel) — kartlar tek satırda, yatay kaydırmalı ---
grid-auto-flow: column ile satır kırılmaz; scroll-snap ile kartlar
hizalanır. Oklar pobol.js'teki [data-strip] davranışıyla çalışır ve
kaydırılacak yer kalmadığında pasifleşir. */
.strip { display: flex; flex-direction: column; gap: 14px; }
.strip-nav { display: flex; align-items: center; gap: 8px; }
.strip-nav span { flex: 1; font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.strip-b { width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; background: var(--s1); box-shadow: var(--sh1); display: grid; place-items: center; color: var(--text-2); transition: background .2s, color .2s, opacity .2s; }
.strip-b svg { width: 15px; height: 15px; }
.strip-b:hover { background: var(--brand); color: #fff; }
.strip-b[disabled] { opacity: .3; cursor: default; }
.strip-b[disabled]:hover { background: var(--s1); color: var(--text-2); }
.strip-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(286px,33vw,452px); gap: clamp(14px,1.6vw,24px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 4px; scrollbar-width: none; }
.strip-track::-webkit-scrollbar { display: none; }
.strip-track { cursor: grab; }
/* sürüklerken: snap ve yumuşak kaydırma kapanır, metin/görsel seçilmez */
.strip-track.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; -webkit-user-select: none; user-select: none; }
.strip-track.is-drag img, .strip-track.is-drag a { pointer-events: none; }
.strip-track>figure { display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0; scroll-snap-align: start; }
.strip-track .story-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
.strip-track .story-who b { font-size: clamp(16px,1.4vw,19px); }
@media (max-width:1080px) {
.stories { grid-template-columns: 1fr; }
/* liste yatay kaydırmalı şeride iner */
.stories-list { flex-direction: row; overflow-x: auto; align-items: center; scrollbar-width: none; }
.stories-list::-webkit-scrollbar { display: none; }
.stories-t, .stories-all { display: none; }
.story-tab { width: auto; flex: none; max-width: 232px; }
.story-tab.on::before { display: none; }
}
@media (max-width:620px) {
.story-thumb { width: 46px; height: 36px; }
.story-t small { display: none; }
.story-meta { gap: 10px; }
}
/* ---- PAYLAŞILAN VİDEO ALANI (.vplay) ----
Hem videolu banner hem videolu hero aynı davranışı kullanır: kapak
oynatıcının üstünde durur ve video gerçekten yüklendikten kısa süre sonra
kaybolur (YouTube'un açılıştaki başlık şeridi görünmesin); oynatıcı hiç
yüklenemezse kapak yerinde kalır. */
.vplay { position: relative; overflow: hidden; }
.vplay iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Sessiz döngüde oynatıcı tıklama almaz (ses düğmesinden sonra alır) ve biraz
büyütülüp kırpılır: YouTube künyeleri çerçevenin dışında kalır. */
.vplay.is-bg iframe { pointer-events: none; width: 118%; height: 118%; left: -9%; top: -9%; }
.vplay-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .5s ease; }
.vplay.is-live .vplay-poster { opacity: 0; }
/* "sessiz oynuyor" künyesi — video gerçekten başladığında görünür */
.vplay-live { position: absolute; z-index: 3; left: 12px; bottom: 12px; display: none; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--pill); background: rgba(16,18,16,.62); backdrop-filter: blur(6px); font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.vplay.is-live .vplay-live { display: inline-flex; }
.vplay.is-sound .vplay-live { display: none; }
/* ================ VİDEOLU HERO — tanıtım filmi tam alanda =============
Video hero'nun tamamını kaplar. iframe 16:9 kalmalı (aksi hâlde YouTube
siyah bant ekler), bu yüzden alanı kaplayacak kadar büyütülüp ortalanır:
genişlik, hero yüksekliğinden türeyen 16:9 genişlik ile %112 arasında
büyük olanı alır. Metinler koyu degrade perdenin üstünde durur; "sesli
izle"ye basılınca perde açılır ve metinler solar (izleme modu). */
.herov { position: relative; overflow: hidden; background: var(--base); color: #fff; --hv-h: clamp(520px,72vh,820px); min-height: var(--hv-h); display: flex; padding-bottom: clamp(60px,8vw,130px); }
.herov-media { position: absolute; inset: 0; z-index: 0; background: var(--base-2); }
/* tam ekran arka plan görseli (bg + image): videonun yerini alır, aynı
perdenin altında durur */
.herov-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Videosuz hero zemini — tek kaynak.
Arkada video olmayınca zemin düz koyu kalıyor ve hero boş görünüyordu.
Yerine sitenin kendi görsel dilinden bir zemin kuruluyor: sağ üstte ve solda
marka renginde ışımalar (.page-head::before ile aynı fikir) ve üstünde ince
nokta dokusu (.sec-alt ile aynı ızgara, koyu zemine göre beyaz). Görsel
dosyası yok — ek istek, ek yükseklik ve gecikme getirmiyor.
Üç yerde kullanılır: .herov-flat (film ve görsel yok), .herov-side (video
arkada değil, sağdaki kartın içinde) ve dar ekranda videolu hero — orada
video zaten oynatılmıyor. */
.herov { --hv-lit:
radial-gradient(circle at 84% -8%, color-mix(in srgb,var(--brand) 38%,transparent) 0%, transparent 56%),
radial-gradient(circle at -14% 30%, color-mix(in srgb,var(--brand) 22%,transparent) 0%, transparent 48%),
radial-gradient(circle at 8% 98%, color-mix(in srgb,var(--brand) 16%,transparent) 0%, transparent 44%),
radial-gradient(circle at center, rgba(255,255,255,.06) .9px, transparent 1px) 0 0 / 22px 22px,
var(--base); }
.herov-lit { background: var(--hv-lit); }
/* düzen 'flat': tek kolon, video izlemek için ayrılmış yüksekliğe gerek yok */
.herov-flat { --hv-h: clamp(440px,60vh,660px); }
.herov-flat .herov-grid { grid-template-columns: 1fr; align-items: start; }
.herov-flat .herov-copy h1 { max-width: 26ch; }
.herov-flat .herov-copy .lead { max-width: 56ch; }
/* düzen 'bg' + görsel: sağda oynat düğmesi olmadığı için metin tek kolonda */
.herov-bgimg .herov-grid { grid-template-columns: 1fr; }
/* düzen 'side': solda metin, sağda kart. Metin sütunu biraz geniş tutulur ki
başlık kartla aynı hizada kalsın, ikisi de dikeyde ortalanır. */
.herov-side { --hv-h: clamp(500px,66vh,720px); }
.herov-side .herov-grid { grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); align-items: center; }
.herov-side .herov-copy h1 { max-width: 17ch; font-size: clamp(31px,3.4vw,50px); }
.herov-side .herov-copy .lead { max-width: 46ch; }
/* sağdaki kart: 16:9, levha yarıçapı, ince kenar. Görsel de video da aynı
çerçeveyi kullanır; video kartın içinde .vplay olarak çalışır. */
.hero-card { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: var(--base-2); box-shadow: var(--sh3), inset 0 0 0 1px var(--hair-dark); }
.hero-card img { width: 100%; height: 100%; object-fit: cover; }
/* Karttaki sessiz döngü: YouTube'un kendi başlık/öneri katmanı küçük
çerçevede daha görünür oluyor, o yüzden tam ekran hero'dakinden biraz
daha çok yakınlaştırıp kenarlardan kırpıyoruz. */
.hero-card.is-bg iframe { width: 134%; height: 134%; left: -17%; top: -17%; }
/* Kartın tamamı büyütme düğmesidir: oynat dairesi ya da künye yok, video
temiz görünür. Üzerine gelince (ya da klavyeyle odaklanınca) hafif bir
perde ve sağ üst köşede yuvarlak büyütme ikonu belirir; başka zaman görünmez.
Kartta "sessiz oynuyor" rozeti yok. */
.hero-card.vplay.is-live .vplay-live { display: none; } /* .vplay.is-live kuralını geçecek özgüllük */
.hero-card-play { position: absolute; inset: 0; z-index: 3; display: block; padding: 0; border: 0; cursor: pointer; color: #fff; background: rgba(14,16,13,0); transition: background .25s; }
.hero-card:hover .hero-card-play, .hero-card-play:focus-visible { background: rgba(14,16,13,.22); }
.hero-card-play:focus-visible, .hero-card-mute:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
/* Köşedeki iki yuvarlak düğme (büyüt + ses) aynı görünümü paylaşır ve kartın
üzerine gelince birlikte belirir; hangisinin üstündeyseniz o marka rengini
alır. Ses düğmesi kart düğmesinin kardeşi, onun üstünde (z-index 4). */
.hero-card-zoom, .hero-card-mute { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(14,16,13,.72); box-shadow: inset 0 0 0 1px var(--hair-dark), 0 10px 26px -12px rgba(0,0,0,.6); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s, background .25s; }
.hero-card-mute { right: 62px; z-index: 4; cursor: pointer; }
.hero-card-zoom svg, .hero-card-mute svg { width: 18px; height: 18px; }
.hero-card:hover .hero-card-zoom, .hero-card-play:focus-visible .hero-card-zoom,
.hero-card:hover .hero-card-mute, .hero-card-mute:focus-visible { opacity: 1; transform: none; }
.hero-card-play:hover .hero-card-zoom, .hero-card-mute:hover { background: var(--brand); }
.hero-card-mute .i-on, .hero-card-mute[aria-pressed="true"] .i-off { display: none; }
.hero-card-mute[aria-pressed="true"] .i-on { display: block; }
/* Yerel video dosyası (config: $PROMO_VIDEO['file']) — pobol.js · [data-vfile]
iframe yerine